NPX Create Stylex App #1440
NPX Create Stylex App #1440
Conversation
abhakat
requested review from
ezzak,
mellyeliu,
necolas,
nmn and
vincentriemer
as code owners
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
meta-cla
bot
added
the
CLA Signed
workflow: benchmarks/perfComparison of performance test results, measured in operations per second. Larger is better.
|
workflow: benchmarks/sizeComparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
|
nmn
left a comment
nmn
left a comment
There was a problem hiding this comment.
Great start! Thanks for doing this.
| * Template configuration | ||
| * Each template references an example directory in /examples | ||
| */ | ||
| const TEMPLATES = [ |
There was a problem hiding this comment.
Let's make sure that all examples are given as options.
| return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`; | ||
| } | ||
|
|
||
| function showWelcomeBanner() { |
There was a problem hiding this comment.
That looks a lot cleaner.
nmn
left a comment
nmn
left a comment
There was a problem hiding this comment.
Templates will not resolve for the CLI.
| 'package.json', // We'll generate this separately | ||
| 'README.md', // We'll generate this separately |
There was a problem hiding this comment.
It's probably easier for us to take the existing package.json and README.md file and edit them.
There was a problem hiding this comment.
We can probably take the pre-existing README.md and append a block about npx create-stylex-app and its args
| await fs.ensureDir(targetDir); | ||
|
|
||
| // Resolve example source directory | ||
| const exampleDir = path.resolve( |
There was a problem hiding this comment.
OK. still waiting for the change to fetch this from github over the network.
There was a problem hiding this comment.
Will do. Sorry got caught up with some other stuff.
|
|
||
| p.note(nextSteps, 'Next steps'); | ||
|
|
||
| p.outro(`${pc.green('Done!')} Happy coding with StyleX`); |
There was a problem hiding this comment.
Looks like the welcome banner changes got overridden. Can we also add a screenshot of the CLI logs to the test plan?
There was a problem hiding this comment.
This is what it looks like when it works
abhakat
force-pushed
the
npx-create-stylex-app
branch
from
cf31220 to
5edbdb7
Compare
|
The merge conflicts will be from the recent patch release. I think we can get the important examples (Next.js, Vite+React, Vite, etc) working and add the rest as a follow up to unblock you. Let's add a |
mellyeliu
left a comment
mellyeliu
left a comment
There was a problem hiding this comment.
This is fine for a first pass, let's do some cleanup and add the --help config in a follow up
- Add package.json with dependencies (yargs, ansis, fs-extra) - Configure Babel for CommonJS transpilation - Implement CLI with project name validation - Add template system reading from examples/ - Implement file copying with exclusions - Generate package.json and README.md dynamically - Complete first milestone: working vite-react template Implements Steps 1-28 from CREATE_STYLEX_APP_PLAN.md
functionality - Move package to @stylexjs/create-stylex-app for monorepo consistency - Add all 3 templates (nextjs, vite-react, vite) - Add --framework/-f flag with interactive selection via prompts - Add prompts dependency for interactive CLI - Update plan: defer feature flags & polish to future work Implements Steps 35-39. Core scaffolding tool now functional with template selection, dependency installation, and all 3 framework templates working end-to-end.
…hed tool with branded colors, progress tracking, helpful errors, and a clean success screen. Adds ora@^9.0.0 for spinner functionality. Main gripe: selection part, might want to change colors. Updating yarn.lock, make sure this is fine.
1. Updated dependencies (package.json):
- Removed: prompts, ora, ansis
- Added: @clack/prompts (^0.11.0), picocolors (^1.1.0)
2. Rewrote src/index.js using @clack/prompts API:
- p.intro() - Clean intro header (replaces ASCII art banner)
- p.select() - Framework selection with hints
- p.spinner() - Progress indication for copy/config steps
- p.spinner({ indicator: 'timer' }) - Install with elapsed time display
- p.log.success/info/warn/error() - Status messages
- p.note() - Boxed "Next steps" display
- p.outro() - Clean closing message
- p.cancel() and p.isCancel() - Graceful cancellation handling
3. Deleted 4 utility files (~200 lines removed):
- src/utils/logger.js
- src/utils/spinner.js
- src/utils/success.js
- src/utils/errors.js
- Replace yargs with lightweight manual arg parsing - Switch from local example copying to GitHub downloads via giget - Add --template flag for custom GitHub templates (github:user/repo/path) - Remove detect-deps logic and detective dependency (was a runtime workaround) - Generate README/next-steps based on available scripts (dev → build → start) - Improve error feedback with package counts and stderr display Known issues with examples (need upstream fixes): - example-nextjs: missing autoprefixer in package.json - example-rollup: missing @babel/preset-flow in package.json - example-esbuild: no dev/serve script, only builds - example-storybook: vitest v4 conflicts with @vitest/* v3 - 6 examples use private @stylexjs/shared-ui (not on npm) The examples were designed for monorepo use and rely on hoisted dependencies. They need to be fixed to declare all dependencies explicitly before the CLI can scaffold them successfully for standalone use.
The @stylexjs/shared-ui package is private and not published to npm, causing 404 errors when users scaffold these templates with create-stylex-app. Fixed by inlining the shared-ui components (Button + tokens) directly into each example's src/shared-ui/ directory. Affected templates: - example-react-router - example-redwoodsdk - example-vite-react - example-vite-rsc - example-vite - example-waku See packages/@stylexjs/create-stylex-app/TEMPLATE_ISSUES.md for full template status tracker including other issues to address (nextjs/autoprefixer, rollup/babel-preset-flow, storybook/vitest version conflict).
… shared-ui fetching for templates that depend on @stylexjs/shared-ui, and rewrites the dependency to file:./shared-ui for npm resolution. Several templates have upstream issues (missing deps, version conflicts) tracked in TEMPLATE_ISSUES.md.
abhakat
force-pushed
the
npx-create-stylex-app
branch
from
078c5d2 to
d171c12
Compare
|
Awesome stuff! |
What changed / motivation
This PR introduces create-stylex-app, a new CLI scaffolding tool that enables developers to quickly bootstrap StyleX projects using official templates. This addresses the need for an official, maintained way to start
new StyleX projects, similar to create-react-app, create-next-app, and other ecosystem tools.
Key features:
Implementation details:
Note: Please see TEMPLATE_ISSUES.md for known issues with specific templates that need to be addressed before merging.
Usage:
Changes to examples:
This PR also inlines @stylexjs/shared-ui into 6 example templates to fix npm 404 errors when scaffolding (since @stylexjs/shared-ui is a private monorepo package not published to npm):
Each now has a local src/shared-ui/ directory with the inlined code.
Files changed:
New package (packages/@stylexjs/create-stylex-app/):
Examples (shared-ui inlining):
Linked PR/Issues
Fixes # 1395
npx create-stylex-app#1395Additional Context
Testing performed:
dependencies
dependencies
correct dependencies
generated package.json
removed)
to lib/)
Future enhancements (deferred to follow-up PRs):
Breaking changes: None - this is a new package with no
existing dependents
Publishing note: Package is currently marked "private": true
and will require:
Pre-flight checklist
Contribution Guidelines