How can I publish "ui" or other packages

[thedv91]

I want to publish my packages however I have a problem with package.json.

In development environment:

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./index.tsx",
  "license": "MIT"
}

This is what I want when I publish the package:

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "types": "./types/index.d.ts",
  "license": "MIT"
}

I know this is not turborepo problem but can anyone help me?

[rxliuli]

At present, my method is to generate a template project through cli and then build it. The former standardizes the basic structure of lib, and the latter implements the function of zero-configuration packaging on top of this. You can refer to: https://www.npmjs.com/package/@liuli-util/cli

1. liuli-cli generate Generate template project
2. liuli-cli build lib build bundle

[amitvchaudhary]

I want to create a shared ui library. Let's call it packages/design. In it, I want to create components that are again dependent on another component library (in my case Quasar for VueJS). How can I build this design library and use it in multiple apps?

[rxliuli]

If you don't need to publish in the monorepo, you can directly point main to the source code. Otherwise, please use more flexible build tools such as rollup (currently esbuild only supports ts/tsx by default), and the vue ecosystem must wait for official build tools. Maybe you can take a look at vite?

[amitvchaudhary]

I want to keep it in my Turborepo only and do not want to expose the design package outside Turborepo. I don't want to publish it to npm registry. Also I am using Vite but not sure how to proceed. My final expectations are that there must be a "design" package and it must have a third-party component library and I create my own components by wrapping the other components and then use my components in other VueJS apps.

[amitvchaudhary]

I am using Vite in my VueJS package but I am not sure how to make my design package available in all apps even though I have added "ui" in dependency array of all apps' pacakge.json files. It throws "module not found ...." error.

[rxliuli]

I am using Vite in my VueJS package but I am not sure how to make my design package available in all apps even though I have added "ui" in dependency array of all apps' pacakge.json files. It throws "module not found ...." error.

Link to a minimal reproducible example project?

[cbaucom]

From their docs:

For the foreseeable future, turbo is not going to deal with package publishing. Versioning/Publishing is an extremely opinionated topic with a lot of existing solutions. Our advice is to avoid versioning packages altogether unless you actually need to publish them to NPM for external consumption. If you have to version your packages, we really like the workflow of Changesets (especially for open source projects).

[thilllon]

link changed:

https://turbo.build/repo/docs/handbook/publishing-packages/versioning-and-publishing

[glomotion]

FWIW - we have solved this one for ourselves by patching the packages/x-package/package.json files during the publish steps. Its definitely not the most elegant solution but works well enough for us.

So when we do a release - we do these steps (in order) inside cicd:

1. Do a build of all packages (per normal)
2. patch each package's package.json filesto point toward /dist/index.js and /dist/index.d.ts instead of /src/index.ts
3. npm publish each package

the (ts-node) code which does the patching looks like this:

import fs from "fs/promises";

type PackageNames = "react" | "tokens";
type JsonData = {
  main: "./dist/index.js" | "./src/index.ts";
  types: "./dist/index.d.ts" | "./src/index.ts";
};

export const DIST_PATHS: JsonData = {
  main: "./dist/index.js",
  types: "./dist/index.d.ts",
};

export const SRC_PATHS: JsonData = {
  main: "./src/index.ts",
  types: "./src/index.ts",
};

export function readPackageFileBuffer(packageName: PackageNames) {
  return fs.readFile(`./packages/${packageName}/package.json`, "utf8");
}

export function patchPackageData(data: string, PATHS: JsonData) {
  const parsed = JSON.parse(data);
  parsed.main = PATHS.main;
  parsed.types = PATHS.types;
  return JSON.stringify(parsed, null, 2);
}

export function writeToPackage(packageName: PackageNames, data: string) {
  return fs.writeFile(`./packages/${packageName}/package.json`, data);
}

export async function patchPackageFile(
  packageName: PackageNames,
  PATHS: JsonData
) {
  const data = await readPackageFileBuffer(packageName);
  writeToPackage(packageName, patchPackageData(data, PATHS));
}

[thedv91]

Currently, I have to write two function prePublish and postPublish to do the same thing.