NPX Create Stylex App #1440
NPX Create Stylex App #1440
Conversation
- 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.
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.
|
…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.
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.
| const { TEMPLATES } = require('./templates'); | ||
| const { copyDirectory } = require('./utils/files'); | ||
| const { | ||
| detectPackageManager, |
There was a problem hiding this comment.
We can probably use nypm to auto-detect the package manager here.
nmn
left a comment
nmn
left a comment
There was a problem hiding this comment.
Templates will not resolve for the CLI.
| const exampleDir = path.resolve( | ||
| __dirname, | ||
| '../../../../examples', | ||
| template.exampleSource, | ||
| ); |
There was a problem hiding this comment.
This won't work standalone.
When this package is installed as a standalone CLI, the examples directory won't exist in the same relative path.
There are two options around this problem:
- The TEMPLATES should be fetched over the network from the github repo. This has the benefit of letting us update the templates without needing to update the CLI. This should also make it possible to pass in custom templates to the CLI which can be fetched.
- If fetching a folder from Github seems too problematic, we could create some kind of build step to copy all the examples into the CLI package before publishing. This is far from ideal, but may be acceptable as a temporary solution.
There was a problem hiding this comment.
Sounds good, I will try and get the 1st one working.
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
|
|
||
| 'use strict'; | ||
|
|
||
| const yargs = require('yargs/yargs'); |
There was a problem hiding this comment.
I think @clack/prompts should have something for parsing args too. Look at the create-vite-app CLI for an example.
| '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.
- 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.
|
|
||
| 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
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
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 |
| force: true, | ||
| }); | ||
|
|
||
| return targetDir; |
There was a problem hiding this comment.
we need to modify this to copy the shared-ui package into the example as well, copy it into this directory, then replace the shared-ui reference to point to the copied package path instead
| }, | ||
| "dependencies": { | ||
| "@stylexjs/stylex": "0.17.4", | ||
| "@stylexjs/shared-ui": "0.17.4", |
There was a problem hiding this comment.
let's revert these changes to the examples/ folder
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