fix(cli): more wizard improvements (#6769)

* fix(cli): more wizard improvements

* chore:

Author: johnjenkins

packages/cli/package.json

@@ -46,6 +46,7 @@
     "@clack/prompts": "^1.5.1",
     "@stencil/dev-server": "workspace:*",
     "@stencil/templates": "workspace:*",
+    "local-pkg": "^1.2.1",
     "nypm": "^0.3.12",
     "std-env": "^3.8.0",
     "typescript": "catalog:"

packages/cli/src/_test_/task-init.spec.ts

@@ -21,13 +21,18 @@ vi.mock('nypm', () => ({
   installDependencies: vi.fn().mockResolvedValue(undefined),
   detectPackageManager: vi.fn().mockResolvedValue({ name: 'npm' }),
 }));
+vi.mock('local-pkg', () => ({
+  // installs "succeed" by default; tests override to simulate a package manager
+  // that reports success but silently fails to write to node_modules
+  getPackageInfo: vi.fn().mockResolvedValue({ rootPath: '/node_modules/pkg' }),
+}));
 
 vi.mock('@clack/prompts', () => ({
   intro: vi.fn(),
   outro: vi.fn(),
   note: vi.fn(),
   confirm: vi.fn().mockResolvedValue(true),
-  log: { warn: vi.fn(), info: vi.fn() },
+  log: { warn: vi.fn(), info: vi.fn(), error: vi.fn() },
   spinner: vi.fn(() => ({ start: vi.fn(), stop: vi.fn() })),
   cancel: vi.fn(),
   isCancel: vi.fn().mockReturnValue(false),
@@ -83,6 +88,7 @@ import {
   generatePackageJsonFields,
   generateStencilConfig,
 } from '@stencil/templates';
+import { getPackageInfo } from 'local-pkg';
 import { addDevDependency, installDependencies } from 'nypm';
 import type { ValidatedConfig } from '@stencil/core/compiler';
 
@@ -179,6 +185,7 @@ describe('taskInit', () => {
     vi.mocked(generateStencilConfig).mockReturnValue(null);
     vi.mocked(clack.confirm).mockResolvedValue(true);
     vi.mocked(clack.isCancel).mockReturnValue(false);
+    vi.mocked(getPackageInfo).mockResolvedValue({ rootPath: '/node_modules/pkg' } as never);
     vi.spyOn(process, 'cwd').mockReturnValue(CWD);
     vi.spyOn(process, 'exit').mockImplementation((code) => {
       throw new Error(`exit:${code ?? 0}`);
@@ -338,6 +345,25 @@ describe('taskInit', () => {
     });
   });
 
+  it('fails loudly when the base install reports success but @stencil/core is not resolvable', async () => {
+    vi.mocked(getPackageInfo).mockResolvedValue(undefined);
+    await expect(taskInit(mockCoreCompiler, mockStrictConfig)).rejects.toThrow('exit:1');
+    expect(clack.log.error).toHaveBeenCalledWith(expect.stringContaining('@stencil/core'));
+  });
+
+  it('fails loudly when an integration reports installed but is not resolvable', async () => {
+    vi.mocked(promptIntegrations).mockResolvedValue([makeIntegration('@stencil/vitest')]);
+    // @stencil/core resolves fine, but the just-added integration does not
+    vi.mocked(getPackageInfo).mockImplementation((name: string) =>
+      Promise.resolve(name === '@stencil/core' ? { rootPath: '/node_modules/pkg' } : undefined),
+    );
+
+    await expect(taskInit(mockCoreCompiler, mockStrictConfig)).rejects.toThrow('exit:1');
+    expect(clack.log.error).toHaveBeenCalledWith(expect.stringContaining('@stencil/vitest'));
+    // never reaches plugin discovery/run since verification fails first
+    expect(vi.mocked(discoverPlugins)).not.toHaveBeenCalled();
+  });
+
   it('does not discover plugins when no integrations are selected', async () => {
     await taskInit(mockCoreCompiler, mockStrictConfig);
     expect(vi.mocked(discoverPlugins)).not.toHaveBeenCalled();
@@ -488,6 +514,15 @@ describe('taskInit', () => {
       });
     });
 
+    it('fails loudly when a newly installed integration is not actually resolvable', async () => {
+      const vitest = makeIntegration('@stencil/vitest');
+      vi.mocked(promptAddCapabilities).mockResolvedValue({ toInstall: [vitest], toConfigure: [] });
+      vi.mocked(getPackageInfo).mockResolvedValue(undefined);
+
+      await expect(taskInit(mockCoreCompiler, mockStrictConfig)).rejects.toThrow('exit:1');
+      expect(clack.log.error).toHaveBeenCalledWith(expect.stringContaining('@stencil/vitest'));
+    });
+
     it('calls run() for newly installed packages after re-discovery', async () => {
       const vitest = makeIntegration('@stencil/vitest');
       vi.mocked(promptAddCapabilities).mockResolvedValue({ toInstall: [vitest], toConfigure: [] });

packages/cli/src/_test_/wizard-discover.spec.ts

@@ -3,9 +3,12 @@ import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 import { discoverPlugins } from '../wizard/discover';
 
 vi.mock('node:fs/promises', () => ({ readFile: vi.fn() }));
+vi.mock('local-pkg', () => ({ getPackageInfo: vi.fn() }));
 
 import { readFile } from 'node:fs/promises';
+import { getPackageInfo } from 'local-pkg';
 const mockReadFile = readFile as ReturnType<typeof vi.fn>;
+const mockGetPackageInfo = getPackageInfo as ReturnType<typeof vi.fn>;
 
 const ROOT = '/project';
 
@@ -16,8 +19,19 @@ function makeRootPkg(
   return JSON.stringify({ dependencies: deps, devDependencies: devDeps });
 }
 
-function makeDepPkg(wizardEntry?: string): string {
-  return JSON.stringify(wizardEntry ? { stencil: { wizard: wizardEntry } } : {});
+/** Registers a resolvable package at `${ROOT}/node_modules/${packageName}`, optionally declaring a wizard entry. */
+function mockResolvedPackage(packageName: string, wizardEntry?: string) {
+  const rootPath = `${ROOT}/node_modules/${packageName}`;
+  mockGetPackageInfo.mockImplementation((name: string) => {
+    if (name !== packageName) return Promise.resolve(undefined);
+    return Promise.resolve({
+      name,
+      version: '1.0.0',
+      rootPath,
+      packageJsonPath: `${rootPath}/package.json`,
+      packageJson: wizardEntry ? { stencil: { wizard: wizardEntry } } : {},
+    });
+  });
 }
 
 function makeLoader(modules: Record<string, Record<string, unknown>> = {}) {
@@ -34,6 +48,7 @@ describe('discoverPlugins', () => {
 
   beforeEach(() => {
     warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    mockGetPackageInfo.mockReset().mockResolvedValue(undefined);
   });
 
   afterEach(() => {
@@ -47,36 +62,54 @@ describe('discoverPlugins', () => {
   });
 
   it('returns empty array when no deps declare stencil.wizard', async () => {
-    mockReadFile
-      .mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }))
-      .mockResolvedValueOnce(makeDepPkg(/* no wizard */));
+    mockReadFile.mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }));
+    mockResolvedPackage('@stencil/vitest' /* no wizard */);
+
+    const result = await discoverPlugins(ROOT, makeLoader());
+    expect(result).toEqual([]);
+  });
+
+  it('returns empty array when a dep cannot be resolved at all', async () => {
+    mockReadFile.mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }));
+    // mockGetPackageInfo already defaults to resolving undefined
 
     const result = await discoverPlugins(ROOT, makeLoader());
     expect(result).toEqual([]);
   });
 
-  it('discovers a plugin from dependencies', async () => {
+  it('discovers a plugin from dependencies, resolved via node module resolution', async () => {
     const plugin = { generate: { fileTemplates: [] } };
-    mockReadFile
-      .mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }))
-      .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js'));
+    mockReadFile.mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }));
+    mockResolvedPackage('@stencil/vitest', './dist/wizard.js');
 
     const wizardPath = `${ROOT}/node_modules/@stencil/vitest/dist/wizard.js`;
     const loader = makeLoader({ [wizardPath]: { wizard: plugin } });
 
     const result = await discoverPlugins(ROOT, loader);
     expect(result).toEqual([{ packageName: '@stencil/vitest', plugin }]);
+    // rootDir is passed through as a resolution path, so hoisted deps (workspace root
+    // node_modules) resolve correctly, not just a literal rootDir/node_modules join
+    expect(mockGetPackageInfo).toHaveBeenCalledWith('@stencil/vitest', { paths: [ROOT] });
   });
 
   it('discovers plugins from both dependencies and devDependencies', async () => {
     const pluginA = { generate: { fileTemplates: [] } };
     const pluginB = { init: { id: 'sass', displayName: 'Sass', description: '' } };
-    mockReadFile
-      .mockResolvedValueOnce(
-        makeRootPkg({ '@stencil/vitest': '^1.0.0' }, { '@stencil/sass': '^3.0.0' }),
-      )
-      .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js')) // @stencil/vitest
-      .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js')); // @stencil/sass
+    mockReadFile.mockResolvedValueOnce(
+      makeRootPkg({ '@stencil/vitest': '^1.0.0' }, { '@stencil/sass': '^3.0.0' }),
+    );
+    mockGetPackageInfo.mockImplementation((name: string) => {
+      const wizardEntry = './dist/wizard.js';
+      if (name !== '@stencil/vitest' && name !== '@stencil/sass') return Promise.resolve(undefined);
+      const rootPath = `${ROOT}/node_modules/${name}`;
+      return Promise.resolve({
+        name,
+        version: '1.0.0',
+        rootPath,
+        packageJsonPath: `${rootPath}/package.json`,
+        packageJson: { stencil: { wizard: wizardEntry } },
+      });
+    });
 
     const loader = makeLoader({
       [`${ROOT}/node_modules/@stencil/vitest/dist/wizard.js`]: { wizard: pluginA },
@@ -90,9 +123,8 @@ describe('discoverPlugins', () => {
   });
 
   it('skips a plugin whose module fails to load and warns', async () => {
-    mockReadFile
-      .mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }))
-      .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js'));
+    mockReadFile.mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }));
+    mockResolvedPackage('@stencil/vitest', './dist/wizard.js');
 
     const loader = makeLoader(/* no matching module */);
 
@@ -103,9 +135,8 @@ describe('discoverPlugins', () => {
   });
 
   it('skips a plugin that does not export wizard and warns', async () => {
-    mockReadFile
-      .mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }))
-      .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js'));
+    mockReadFile.mockResolvedValueOnce(makeRootPkg({ '@stencil/vitest': '^1.0.0' }));
+    mockResolvedPackage('@stencil/vitest', './dist/wizard.js');
 
     const wizardPath = `${ROOT}/node_modules/@stencil/vitest/dist/wizard.js`;
     const loader = makeLoader({ [wizardPath]: { notWizard: {} } });
@@ -119,12 +150,21 @@ describe('discoverPlugins', () => {
 
   it('does not fail when one plugin errors and others succeed', async () => {
     const plugin = { generate: { fileTemplates: [] } };
-    mockReadFile
-      .mockResolvedValueOnce(
-        makeRootPkg({ '@stencil/vitest': '^1.0.0', '@stencil/broken': '^1.0.0' }),
-      )
-      .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js')) // @stencil/vitest
-      .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js')); // @stencil/broken
+    mockReadFile.mockResolvedValueOnce(
+      makeRootPkg({ '@stencil/vitest': '^1.0.0', '@stencil/broken': '^1.0.0' }),
+    );
+    mockGetPackageInfo.mockImplementation((name: string) => {
+      if (name !== '@stencil/vitest' && name !== '@stencil/broken')
+        return Promise.resolve(undefined);
+      const rootPath = `${ROOT}/node_modules/${name}`;
+      return Promise.resolve({
+        name,
+        version: '1.0.0',
+        rootPath,
+        packageJsonPath: `${rootPath}/package.json`,
+        packageJson: { stencil: { wizard: './dist/wizard.js' } },
+      });
+    });
 
     const loader = makeLoader({
       [`${ROOT}/node_modules/@stencil/vitest/dist/wizard.js`]: { wizard: plugin },
@@ -166,9 +206,9 @@ describe('discoverPlugins', () => {
       const installedPlugin = { generate: { fileTemplates: [] } };
       mockReadFile
         .mockResolvedValueOnce(makeRootPkg({ '@stencil/sass': '^3.0.0' }))
-        .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js')) // @stencil/sass
         .mockRejectedValueOnce(new Error('ENOENT')) // dist/package.json not found
         .mockResolvedValueOnce(JSON.stringify({ name: 'my-plugin' })); // parent package.json
+      mockResolvedPackage('@stencil/sass', './dist/wizard.js');
 
       const loader = makeLoader({
         [`${ROOT}/node_modules/@stencil/sass/dist/wizard.js`]: { wizard: installedPlugin },
@@ -186,9 +226,9 @@ describe('discoverPlugins', () => {
       const installedPlugin = { generate: { fileTemplates: [] } };
       mockReadFile
         .mockResolvedValueOnce(makeRootPkg({ 'my-plugin': '^1.0.0' }))
-        .mockResolvedValueOnce(makeDepPkg('./dist/wizard.js')) // installed my-plugin
         .mockRejectedValueOnce(new Error('ENOENT')) // dev: dist/package.json not found
         .mockResolvedValueOnce(JSON.stringify({ name: 'my-plugin' })); // dev: parent package.json
+      mockResolvedPackage('my-plugin', './dist/wizard.js');
 
       const loader = makeLoader({
         [`${ROOT}/node_modules/my-plugin/dist/wizard.js`]: { wizard: installedPlugin },

packages/cli/src/task-init.ts

@@ -7,6 +7,7 @@ import {
   generateStencilConfig,
   toPascalCase,
 } from '@stencil/templates';
+import { getPackageInfo } from 'local-pkg';
 import * as nypm from 'nypm';
 import { addDevDependency, installDependencies } from 'nypm';
 import { isCI } from 'std-env';
@@ -49,6 +50,31 @@ import {
 import { printSplash } from './wizard/splash.js';
 import type { CoreCompiler } from './load-compiler.js';
 
+/**
+ * Package managers can report success while silently failing to write to node_modules
+ * (observed with npm computing a resolved lockfile but reifying zero filesystem changes).
+ * Confirms packages actually landed on disk instead of trusting the install call's exit code.
+ *
+ * @param rootDir - directory to resolve packages from.
+ * @param packageNames - packages that were just supposed to be installed.
+ * @returns names that failed to resolve; empty when everything installed correctly.
+ */
+async function verifyInstalled(rootDir: string, packageNames: string[]): Promise<string[]> {
+  const missing: string[] = [];
+  for (const name of packageNames) {
+    const info = await getPackageInfo(name, { paths: [rootDir] });
+    if (!info) missing.push(name);
+  }
+  return missing;
+}
+
+function failInstallVerification(missing: string[], rootDir: string): never {
+  p.log.error(
+    `Install reported success but ${missing.join(', ')} could not be found in ${rootDir}. Your package manager may have silently failed to write to node_modules - check its logs and try again.`,
+  );
+  process.exit(1);
+}
+
 function outputKeysToTargets(keys: ReadonlyArray<OutputKey>): Array<{ type: string }> {
   const map: Record<OutputKey, string> = {
     loader: 'loader-bundle',
@@ -153,13 +179,19 @@ export async function taskInit(
   await installDependencies({ cwd, silent: true });
   s2.stop('Dependencies installed');
 
+  const missingBase = await verifyInstalled(coreDir, ['@stencil/core']);
+  if (missingBase.length > 0) failInstallVerification(missingBase, coreDir);
+
   if (selectedIntegrations.length > 0) {
     const s3 = p.spinner();
     const pkgs = selectedIntegrations.map((i) => i.package);
     s3.start(`Installing ${pkgs.join(', ')}`);
     // Integration packages (e.g. output target plugins) are deps of the core package
     await addDevDependency(withVersionRanges(pkgs), { cwd: coreDir, silent: true });
     s3.stop('Integrations installed');
+
+    const missingIntegrations = await verifyInstalled(coreDir, pkgs);
+    if (missingIntegrations.length > 0) failInstallVerification(missingIntegrations, coreDir);
   }
 
   // Phase 4: re-discover + run plugin wizards
@@ -263,6 +295,9 @@ async function addCapabilities(cwd: string, strictConfig?: ValidatedConfig): Pro
     s.start(`Installing ${pkgs.join(', ')}`);
     await addDevDependency(withVersionRanges(pkgs), { cwd, silent: true });
     s.stop('Dependencies installed');
+
+    const missing = await verifyInstalled(cwd, pkgs);
+    if (missing.length > 0) failInstallVerification(missing, cwd);
   }
 
   // Re-discover after install so newly installed packages can run their wizards

packages/cli/src/wizard/discover.ts

@@ -1,6 +1,7 @@
 import { readFile } from 'node:fs/promises';
 import { basename, dirname, join, resolve } from 'node:path';
 import { pathToFileURL } from 'node:url';
+import { getPackageInfo } from 'local-pkg';
 
 import type { StencilWizardPlugin } from './types.js';
 
@@ -24,11 +25,14 @@ async function readJson(filePath: string) {
 }
 
 async function loadOne(rootDir: string, packageName: string, loader: ModuleLoader) {
-  const depPkg = await readJson(join(rootDir, 'node_modules', packageName, 'package.json'));
-  const wizardEntry = (depPkg?.stencil as { wizard?: string } | undefined)?.wizard;
+  // resolved via node's module resolution (not a plain rootDir/node_modules join) so
+  // hoisted deps in npm/pnpm/yarn workspaces are found regardless of where they land
+  const info = await getPackageInfo(packageName, { paths: [rootDir] });
+  if (!info) return null;
+  const wizardEntry = (info.packageJson.stencil as { wizard?: string } | undefined)?.wizard;
   if (!wizardEntry) return null;
 
-  const wizardPath = join(rootDir, 'node_modules', packageName, wizardEntry);
+  const wizardPath = join(info.rootPath, wizardEntry);
   let mod: Record<string, unknown>;
   try {
     mod = await loader(pathToFileURL(wizardPath).href);