feat(package-bundler): move TS types generation to rollup (#5270)

* chore(deps): upgrade typescript-transform-paths to ^3.5.2 * feat(bundler): use rollup to generate types * chore: delete tsconfig.types.json * chore(package-bundler): update readme * feat(package-bundler): resolve aliases through tsconfig * chore(storybook): remove broken config * chore(turbo): fix turbo config and split into package configs * chore(tailwind/deps): remove unused KAIO devDep * ci: fix storybook build * ci: fix broken turbo storybook commands * chore: remove package.json typescript version lock comment * style(package-bundler): clean up rollup config
cultureamp · Nov 14, 2024 · 573097f · 573097f
1 parent e5a3c7a
commit 573097f
Show file tree

Hide file tree

Showing 31 changed files with 364 additions and 321 deletions.
diff --git a/.buildkite/scripts/build-storybook.sh b/.buildkite/scripts/build-storybook.sh
@@ -6,5 +6,5 @@ set -e
 
 corepack enable
 pnpm install --frozen-lockfile
-pnpm turbo @docs/storybook#build:docs
+pnpm turbo build:docs --filter=@docs/storybook
 tar -czf ./storybook.tar.gz ./docs/storybook-static
diff --git a/.changeset/fresh-toys-report.md b/.changeset/fresh-toys-report.md
@@ -0,0 +1,7 @@
+---
+"@kaizen/components": patch
+"@kaizen/design-tokens": patch
+"@kaizen/tailwind": patch
+---
+
+Update @kaizen/package-bundler
diff --git a/.changeset/poor-goats-tie.md b/.changeset/poor-goats-tie.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/package-bundler": patch
+---
+
+Update dep `typescript-transform-paths` to `^3.5.2` and loosen `typescript` peerDep version.
diff --git a/.changeset/quick-meals-rescue.md b/.changeset/quick-meals-rescue.md
@@ -0,0 +1,13 @@
+---
+"@kaizen/package-bundler": major
+---
+
+Move TypeScript types generation to rollup as the separate step using `tsc` was not resolving aliases with `[email protected]`.
+
+BREAKING CHANGES:
+- `@kaizen/package-bundler/tsconfig.dist.json` has been removed
+  - Remove this from `extends` within your `tsconfig.dist.json`
+- `@kaizen/package-bundler/tsconfig.types.json`
+  - Delete your `tsconfig.types.json` (no longer required)
+- `rollupConfig` no longer accepts the `alias` arg as aliases are now automatically resolved based on your `tsconfig.json` paths
+  - Remove `alias` defined within your `rollup.config.mjs`
diff --git a/.github/workflows/chromatic-main.yaml b/.github/workflows/chromatic-main.yaml
@@ -18,7 +18,7 @@ jobs:
           fetch-depth: 0
       - uses: ./.github/actions/setup
       - name: Build Storybook
-        run: pnpm turbo @docs/storybook#build:chromatic
+        run: pnpm turbo build:chromatic --filter=@docs/storybook
       - name: Publish to Chromatic
         uses: chromaui/action@v11
         with:

diff --git a/.github/workflows/chromatic-pr.yaml b/.github/workflows/chromatic-pr.yaml
@@ -43,7 +43,7 @@ jobs:
       - uses: ./.github/actions/setup
       - name: Build Storybook for Chromatic
         # We want both stories and docs for the branch preview
-        run: pnpm turbo @docs/storybook#build:chromatic
+        run: pnpm turbo build:chromatic --filter=@docs/storybook
       - id: publishChromatic
         name: Publish to Chromatic
         uses: chromaui/action@v11

diff --git a/.github/workflows/test-stories.yaml b/.github/workflows/test-stories.yaml
@@ -31,7 +31,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v4
       - uses: ./.github/actions/setup
-      - run: pnpm turbo @docs/storybook#build:test
+      - run: pnpm turbo build:test --filter=@docs/storybook
       - name: Upload Storybook build as artifact
         uses: actions/upload-artifact@v4
         with:
@@ -53,7 +53,7 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (1/3)
-        run: pnpm turbo @docs/storybook#test:storybook -- --shard 1/3
+        run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 1/3
 
   storybook-tests-2:
     name: "test-storybook"
@@ -69,7 +69,7 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (2/3)
-        run: pnpm turbo @docs/storybook#test:storybook -- --shard 2/3
+        run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 2/3
 
   storybook-tests-3:
     name: "test-storybook"
@@ -85,4 +85,4 @@ jobs:
         with:
           artifactName: ${{ env.ARTIFACT_NAME }}
       - name: Storybook tests (3/3)
-        run: pnpm turbo @docs/storybook#test:storybook -- --shard 3/3
+        run: pnpm turbo test:storybook --filter=@docs/storybook -- --shard 3/3
diff --git a/docs/.storybook/main.ts b/docs/.storybook/main.ts
@@ -15,7 +15,6 @@ const config: StorybookConfig = {
     "../../packages/**/*.mdx",
     "../../packages/**/*.stories.tsx",
     "../pages/**/*.mdx",
-    "../pages/**/*.stories.tsx",
   ],
   addons: [
     getAbsolutePath("@storybook/addon-a11y"),

diff --git a/docs/turbo.json b/docs/turbo.json
@@ -0,0 +1,37 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build:tailwind": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+      "outputs": ["docs/.storybook/preview.css"],
+      "cache": false
+    },
+    "build:docs": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+      "outputs": ["docs/storybook-static/**"],
+      "cache": false
+    },
+    "build:test": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "inputs": ["$TURBO_DEFAULT$", "../packages/**/*"],
+      "outputs": ["docs/storybook-static/**"],
+      "cache": false
+    },
+    "build:chromatic": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "outputs": ["docs/storybook-static/**"],
+      "cache": false
+    },
+    "dev": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "cache": false
+    },
+    "test:storybook": {
+      "dependsOn": ["^build", "build:tailwind"],
+      "outputs": ["docs/storybook-static/**"],
+      "cache": false
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -86,7 +86,7 @@
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "turbo": "^2.2.3",
-    "typescript": "5.5.4",
+    "typescript": "^5.6.3",
     "vite": "^5.4.10",
     "vitest": "^2.1.3",
     "vitest-axe": "^0.1.0"
@@ -95,7 +95,6 @@
     "@storybook/*": "Required for Storybook stories across all packages",
     "chromatic": "Required for Storybook stories across all packages",
     "playwright": "Required for github actions setup",
-    "typescript": "Version locked for package-bundler",
     "vite-plugin-node-polyfills": "Adds the node `assert` polyfill to Vite for prosemirror to run in storybook"
   },
   "pnpm": {

diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs
@@ -15,7 +15,4 @@ export default rollupConfig({
     reactAriaComponentsV3: "./src/__react-aria-components__/index.ts",
   },
   plugins: pluginsSharedUi,
-  alias: {
-    entries: [{ find: "~components", replacement: "src" }],
-  },
 })
diff --git a/packages/components/tsconfig.dist.json b/packages/components/tsconfig.dist.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
+  "extends": "./tsconfig.json",
   "include": ["src/**/*"],
   "exclude": [
     "node_modules",

diff --git a/packages/components/tsconfig.types.json b/packages/components/tsconfig.types.json
diff --git a/packages/components/turbo.json b/packages/components/turbo.json
@@ -0,0 +1,19 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        "!**/README.md",
+        "!**/*.stories.*",
+        "!**/*.spec.*",
+        "!__tests__/**/*",
+        "!CHANGELOG.md",
+        "!svgo.config.js",
+        "!svgo.spec.ts",
+        "!svgoUtils.js"
+      ],
+      "outputs": ["dist/**"]
+    }
+  }
+}
diff --git a/packages/design-tokens/tsconfig.dist.json b/packages/design-tokens/tsconfig.dist.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
+  "extends": "./tsconfig.json",
   "include": ["src/**/*"],
   "exclude": [
     "node_modules",

diff --git a/packages/design-tokens/tsconfig.types.json b/packages/design-tokens/tsconfig.types.json
diff --git a/packages/design-tokens/turbo.json b/packages/design-tokens/turbo.json
@@ -0,0 +1,16 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "inputs": [
+        "$TURBO_DEFAULT$",
+        "!**/README.md",
+        "!_docs/**/*",
+        "!CHANGELOG.md",
+        "!CONTRIBUTING.md",
+        "!TODO.md"
+      ],
+      "outputs": ["dist/**"]
+    }
+  }
+}
diff --git a/packages/hosted-assets/turbo.json b/packages/hosted-assets/turbo.json
@@ -0,0 +1,9 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "inputs": ["$TURBO_DEFAULT$", "!CHANGELOG.md", "!README.md"],
+      "outputs": ["dist/**"]
+    }
+  }
+}
diff --git a/packages/package-bundler/README.md b/packages/package-bundler/README.md
@@ -18,14 +18,14 @@ _Note: If your package extends another shared UI package, you will need to list
 
 Add the following to your `package.json`:
 ```json
-"main": "dist/cjs/index.cjs",
-"module": "dist/esm/index.mjs",
-"types": "dist/types/index.d.ts",
+"main": "dist/cjs/index.cjs", // CommonJS entrypoint
+"module": "dist/esm/index.mjs", // ES modules entrypoint
+"types": "dist/types/index.d.ts", // TypeScript types entrypoint
 "files": [
-  "dist"
+  "dist" // Ensure dist dir is included in package
 ],
 "sideEffects": [
-  "styles.css"
+  "styles.css" // Ensure styles do not get tree-shaken
 ],
 "scripts": {
   "build": "pnpm package-bundler build-shared-ui",
@@ -44,15 +44,14 @@ pnpm add -D postcss postcss-preset-env rollup tslib
 - `rollup`
 - `tslib` (peerDep of `rollup`)
 - If using Tailwind:
-  - `tailwind`
+  - `tailwindcss`
 
 ### Required files
 
 - `postcss.config.js`
 - `rollup.config.mjs`
 - `tsconfig.json`
 - `tsconfig.dist.json`
-- `tsconfig.types.json`
 - If using Tailwind:
   - `tailwind.config.js`
   - `src/tailwind.css`
@@ -104,18 +103,7 @@ export default rollupConfig({
 
 // tsconfig.dist.json
 {
-  "extends": [
-    "./tsconfig.json",
-    "@kaizen/package-bundler/tsconfig.dist.json"
-  ]
-}
-
-// tsconfig.types.json
-{
-  "extends": [
-    "./tsconfig.dist.json",
-    "@kaizen/package-bundler/tsconfig.types.json"
-  ]
+  "extends": "./tsconfig.json"
 }
 ```
 
@@ -155,7 +143,7 @@ module.exports = {
 
 ### Alias
 
-If you are using aliases, ensure you have them listed in your `tsconfig.json` (the `tsconfig.dist` and `tsconfig.types` should extend this) and in `rollup.config`.
+If you are using aliases, ensure you have them listed in your `tsconfig.json` (the `tsconfig.dist` should extend this).
 
 Example:
 ```json
@@ -170,17 +158,6 @@ Example:
 
 // tsconfig.dist.json
 {
-  "extends": ["./tsconfig.json", "@kaizen/package-bundler/tsconfig.dist.json"],
+  "extends": "./tsconfig.json",
 }
 ```
-
-```ts
-// rollup.config.mjs
-export default rollupConfig({
-  alias: {
-    entries: [
-      { find: "~components", replacement: "src" },
-    ],
-  },
-})
-```
diff --git a/packages/package-bundler/bin/build-commands.sh b/packages/package-bundler/bin/build-commands.sh
@@ -15,12 +15,8 @@ clean() {
 bundle() {
     echo -e "${GREEN}Compile and bundle source code...${NC}"
     rollup -c
-    echo -e "${GREEN}------${NC}"
-}
-
-compile_types() {
-    echo -e "${GREEN}Compile typescript types...${NC}"
-    tsc --project tsconfig.types.json --declarationDir dist/types
+    mv dist/esm/_tmp/types dist/types
+    rm -rf dist/esm/_tmp
     echo -e "${GREEN}------${NC}"
 }
 
@@ -37,7 +33,6 @@ elapsed_time() {
 build() {
     clean
     bundle
-    compile_types
 }
 
 case "$1" in

diff --git a/packages/package-bundler/package.json b/packages/package-bundler/package.json
@@ -17,9 +17,7 @@
   "files": [
     "dist",
     "bin",
-    "tsconfig.base.json",
-    "tsconfig.dist.json",
-    "tsconfig.types.json"
+    "tsconfig.base.json"
   ],
   "author": "Geoffrey Chong <[email protected]>",
   "homepage": "https://cultureamp.design",
@@ -37,7 +35,7 @@
     "rollup-plugin-node-externals": "^7.1.3",
     "rollup-plugin-postcss": "^4.0.2",
     "ts-patch": "^3.2.1",
-    "typescript-transform-paths": "^3.5.1"
+    "typescript-transform-paths": "^3.5.2"
   },
   "dependenciesComments": {
     "ts-patch": "Required for typescript-transform-paths"
@@ -53,11 +51,6 @@
     "postcss-preset-env": "^9.5.14 || ^10.0.0",
     "rollup": "^4.18.0",
     "tslib": ">=2.6.2",
-    "typescript": ">= 5.4.5 <= 5.5.4"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "comments": "https://github.com/LeDDGroup/typescript-transform-paths/issues/266"
-    }
+    "typescript": "5.x"
   }
 }