Skip to content

Commit

Permalink
fix(cli): prevent generate task from crashing (#5693)
Browse files Browse the repository at this point in the history
this pr is motivated by a scneario where running `npx stencil generate`
would result in either an error or an early return:
```
npm run generate

> gen-test-1@0.0.1 generate
> stencil generate

[49:23.1]  @stencil/core
[49:23.2]  v4.17.0 ♨️
```

note: the reported error was never reproduced locally, only the early
return.

technically, this was introduced in v4.17.0, when we switched over to
using esbuild for production builds. however, this has been present in
any build that is esbuild-based since we migrated the cli submodule to
esbuild (where we had a mixed rollup-esbuild build during the migration
for dev builds).

removing this alias eliminates dynamic imports in the CJS output of the
cli submodule:
```
const {
    prompt: r
  } = await import('../sys/node/prompts.js')
```
which wouldn't run properly, causing the error/early return.

this change does cause an increase in bundle size, as we end up
importing more of prompts.js than we do. to mitigate this, we direct
the cli module to the export we actually use (leading to less getting
bundled in the cli module).

fixes: #5692

STENCIL-1294 cannot identified the prompts.js as a function? ?
  • Loading branch information
rwaskiewicz committed Apr 23, 2024
1 parent 9a28fa5 commit 9efbf4b
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 2 deletions.
31 changes: 31 additions & 0 deletions .github/workflows/test-component-starter.yml
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,34 @@ jobs:
run: npm run test -- --no-build # the project was just built, don't build it again
working-directory: ./tmp-component-starter
shell: bash

- name: Test npx stencil generate
# `stencil generate` doesn't have a way to skip file generation, so we provide it with a component name and run
# `echo` with a newline to select "all files" to generate (and use -e to interpret that backslash for a newline)
run: echo -e '\n' | npm run generate -- hello-world
working-directory: ./tmp-component-starter
shell: bash

- name: Verify Files Exist
run: |
file_list=(
src/components/hello-world/hello-world.tsx
src/components/hello-world/hello-world.css
src/components/hello-world/test/hello-world.spec.tsx
src/components/hello-world/test/hello-world.e2e.ts
)
for file in "${file_list[@]}"; do
if [ -f "$file" ]; then
echo "File '$file' exists."
else
echo "File '$file' does not exist."
exit 1
fi
done
working-directory: ./tmp-component-starter
shell: bash

- name: Test Generated Files
run: npm run test
working-directory: ./tmp-component-starter
shell: bash
2 changes: 2 additions & 0 deletions scripts/esbuild/cli.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ export async function buildCli(opts: BuildOptions) {
const dtsFilename = 'index.d.ts';

const cliAliases = getEsbuildAliases();
// this isn't strictly necessary to alias - however, this minimizes cuts down the bundle size by ~70kb.
cliAliases['prompts'] = 'prompts/lib/index.js';

const external = getEsbuildExternalModules(opts, opts.output.cliDir);

Expand Down
3 changes: 1 addition & 2 deletions scripts/esbuild/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,9 @@ export function getEsbuildAliases(): Record<string, string> {

// mapping node.js module names to `sys/node` "cache"
//
// these allow us to bundle and ship a dependency (like `prompts`) as part
// these allow us to bundle and ship a dependency (like `glob`) as part
// of the Stencil distributable but also have our separate bundles
// reference the same file
prompts: './sys/node/prompts.js',
glob: './sys/node/glob.js',

// dev server related aliases
Expand Down

0 comments on commit 9efbf4b

Please sign in to comment.