fix(nimbus): support type generation hook for consumers#998
Conversation
jaikamat
requested review from
ByronDWall,
ddouglasz,
misama-ct,
stephsprinkle,
tylermorrisford and
valoriecarli
and removed request for
a team
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 8a4dd01 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| "test": "vitest --run", | ||
| "typecheck": "tsc --noEmit", | ||
| "build-theme-typings": "pnpm chakra typegen ./src/theme/index.ts", | ||
| "postinstall": "chakra typegen ./dist/index.es.js || true", |
There was a problem hiding this comment.
The key insight is that ./dist/index.es.js refers to Nimbus's own bundled code, not a file the consumer creates.
How it works
When a consumer runs pnpm add @commercetools/nimbus:
- Package extraction: Nimbus is extracted to
node_modules/@commercetools/nimbus/ - Postinstall runs: The script executes with the working directory set to the package folder (
node_modules/@commercetools/nimbus/) - Path resolution:
./dist/index.es.jsresolves to:node_modules/@commercetools/nimbus/dist/index.es.js - This is Nimbus's own built bundle, which exports
system. - Type generation: Chakra CLI imports that file, finds the
systemexport, analyzes the theme config, and writes type declarations to:node_modules/@chakra-ui/react/dist/types/ - Consumer benefits: The consumer's TypeScript now sees the augmented types.
| } | ||
| }, | ||
| "dependencies": { | ||
| "@chakra-ui/cli": "catalog:react", |
There was a problem hiding this comment.
Had to move this to dependencies so consumers can have access to it
There was a problem hiding this comment.
Did you test it, I don't think this works, does it?
If it doesn't, you might want to try running npx chakra typegen ... down here.
I believe npx should always be available to consumers if node is. But I am not sure if it works in a postinstall scenario as npx commands sometimes (usually?) present (y/n) confirmation prompts.
Worst case, the chaka-cli package needs to be a another peer-dependency of the consuming app like chakra itself.
There was a problem hiding this comment.
I tested this locally with the MC using pack, seemed to work just fine
| ### TypeScript Support | ||
|
|
||
| TypeScript types for component variants, sizes, and design tokens are generated | ||
| automatically during installation. No additional setup required. |
There was a problem hiding this comment.
we should probably specify this is done as a post-install hook that may need to be whitelisted?
Modern package managers increasingly block postinstall scripts by default.
Package Manager Behavior
┌──────────────────┬────────────────────────────────────────────────────────────────────────┐
│ Package Manager │ Default Behavior │
├──────────────────┼────────────────────────────────────────────────────────────────────────┤
│ npm │ Runs by default, but users can disable with --ignore-scripts or .npmrc │
├──────────────────┼────────────────────────────────────────────────────────────────────────┤
│ pnpm (v8+) │ Blocked by default - requires explicit allowlist │
├──────────────────┼────────────────────────────────────────────────────────────────────────┤
│ yarn (v2+/Berry) │ Blocked by default - requires explicit allowlist │
└──────────────────┴────────────────────────────────────────────────────────────────────────┘
pnpm Specifically
Since this is a pnpm monorepo and many consumers likely use pnpm, they'd need to add this to their package.json or .npmrc:
// package.json
{
"pnpm": {
"onlyBuiltDependencies": ["@commercetools/nimbus"]
}
}
Or in .npmrc:
enable-pre-post-scripts=true
Implications for Nimbus
This means the postinstall hook:
"postinstall": "chakra typegen ./dist/index.es.js || true"
Likely doesn't run for most consumers - which explains why the docs include the manual troubleshooting step:
npx @chakra-ui/cli typegen node_modules/@commercetools/nimbus/dist/index.es.js
Bottom Line
Given that postinstall hooks are often blocked anyway, having @chakra-ui/cli in dependencies provides little benefit while adding install
overhead. Moving it to devDependencies and relying on the documented manual command would be cleaner - it's effectively what most consumers
already experience. ```
| } | ||
| }, | ||
| "dependencies": { | ||
| "@chakra-ui/cli": "catalog:react", |
There was a problem hiding this comment.
Did you test it, I don't think this works, does it?
If it doesn't, you might want to try running npx chakra typegen ... down here.
I believe npx should always be available to consumers if node is. But I am not sure if it works in a postinstall scenario as npx commands sometimes (usually?) present (y/n) confirmation prompts.
Worst case, the chaka-cli package needs to be a another peer-dependency of the consuming app like chakra itself.
4 participants
I had to timebox myself, and chose to abandon this PR in favor of Michael's suggested solution from earlier in the day, which seems to work just fine in the wild.