@swell/cli 2.9.27 → 2.9.28

package/dist/commands/create/component.d.ts

@@ -10,10 +10,13 @@ export default class CreateComponent extends CreateConfigCommand {
     static helpMeta: HelpMeta;
     static flags: {
         description: import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
+        extension: import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
         overwrite: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
+        target: import("@oclif/core/lib/interfaces/parser.js").OptionFlag<string[] | undefined, import("@oclif/core/lib/interfaces/parser.js").CustomOptions>;
         yes: import("@oclif/core/lib/interfaces/parser.js").BooleanFlag<boolean>;
     };
     static summary: string;
     createType: ConfigType;
+    private checkConfig;
     run(): Promise<void>;
 }

package/dist/commands/create/component.js

@@ -1,8 +1,13 @@
 import { input } from '@inquirer/prompts';
 import { Args, Flags } from '@oclif/core';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
 import { CreateConfigCommand } from '../../create-config-command.js';
+import { resolveComponentValues, } from '../../lib/apps/component-extension.js';
+import { listRootComponentFiles } from '../../lib/apps/components.js';
 import { ConfigType } from '../../lib/apps/index.js';
 import { getComponentTemplate, setupComponentSupport, toComponentName, } from '../../lib/create/component.js';
+import { readStaticConfig } from '../../lib/function-source-analysis.js';
 export default class CreateComponent extends CreateConfigCommand {
     static args = {
         name: Args.string({
@@ -14,9 +19,10 @@ export default class CreateComponent extends CreateConfigCommand {
     static examples = [
         '$ swell create component',
         '$ swell create component ColorPicker -d "Brand color picker" -y',
+        '$ swell create component MyComponent --extension <extension-id> --target <target-id> -y',
     ];
     static helpMeta = {
-        usageDirect: '<name> [-d <description>] -y',
+        usageDirect: '<name> [-d <description>] [--extension <extension-id>] [--target <target-id>...] -y',
     };
     static flags = {
         description: Flags.string({
@@ -24,10 +30,17 @@ export default class CreateComponent extends CreateConfigCommand {
             default: '',
             description: 'Description',
         }),
+        extension: Flags.string({
+            description: 'Extension id from swell.json: makes the component the UI of that extension',
+        }),
         overwrite: Flags.boolean({
             default: false,
             description: 'Overwrite existing file',
         }),
+        target: Flags.string({
+            description: 'Target id where the component renders; repeat for more targets',
+            multiple: true,
+        }),
         yes: Flags.boolean({
             char: 'y',
             description: 'Skip prompts, require all arguments',
@@ -35,9 +48,35 @@ export default class CreateComponent extends CreateConfigCommand {
     };
     static summary = 'Create an app component in the components folder.';
     createType = ConfigType.COMPONENT;
+    // The same rules as push, so a scaffold that would fail to push is refused here
+    async checkConfig(componentName, extension, targets) {
+        const configured = this.swellConfig.get('extensions');
+        const extensions = Array.isArray(configured)
+            ? configured
+            : [];
+        const files = await listRootComponentFiles(this.appPath);
+        const siblings = await Promise.all(files.map(async (file) => {
+            const source = await fs
+                .readFile(path.join(this.appPath, file), 'utf8')
+                .catch(() => '');
+            return {
+                config: readStaticConfig(source, file).config,
+                name: path.basename(file).replace(/\.[^.]+$/, ''),
+            };
+        }));
+        try {
+            resolveComponentValues(componentName, {
+                ...(extension && { extension: { id: extension } }),
+                ...(targets.length > 0 && { targets: targets.map((id) => ({ id })) }),
+            }, extensions, siblings);
+        }
+        catch (error) {
+            this.error(error.message, { exit: 1 });
+        }
+    }
     async run() {
         const { args, flags } = await this.parse(CreateComponent);
-        const { description: descriptionFlag, overwrite, yes } = flags;
+        const { description: descriptionFlag, extension, overwrite, target: targets = [], yes, } = flags;
         let name = args.name;
         let description = descriptionFlag;
         if (yes) {
@@ -62,9 +101,15 @@ export default class CreateComponent extends CreateConfigCommand {
         if (!componentName) {
             this.error(`Invalid component name: ${name}`, { exit: 1 });
         }
+        if (extension || targets.length > 0) {
+            await this.checkConfig(componentName, extension, targets);
+        }
         const created = await this.createFile({
             extension: 'tsx',
-            fileBody: getComponentTemplate(componentName, description),
+            fileBody: getComponentTemplate(componentName, description, {
+                extension,
+                targets,
+            }),
             fileName: componentName,
         }, overwrite, !yes);
         if (!created) {

package/dist/commands/create/tests.js

@@ -4,7 +4,7 @@ import { toAppId } from '../../lib/create/index.js';
 import { createTestsScaffold, } from '../../lib/create/tests.js';
 import { detectPackageManager, getPackageManagerCommands, } from '../../lib/package-manager.js';
 export default class CreateTests extends AppCommand {
-    static description = 'Initialize a vitest + Cloudflare Workers test setup that reuses swell-cli authentication.';
+    static description = 'Initialize a vitest + Cloudflare Workers test setup for app functions.';
     static examples = [
         '$ swell create tests',
         '$ swell create tests --overwrite',
@@ -43,7 +43,9 @@ export default class CreateTests extends AppCommand {
         this.logScaffoldResult(result, pm);
     }
     logScaffoldResult(result, pm) {
-        const hasChanges = result.createdFiles.length > 0 || result.packageJsonUpdated;
+        const hasChanges = result.createdFiles.length > 0 ||
+            result.removedFiles.length > 0 ||
+            result.packageJsonUpdated;
         if (hasChanges) {
             this.log('');
             this.log('✓ Created test scaffolding');
@@ -62,6 +64,13 @@ export default class CreateTests extends AppCommand {
                 this.log(`  ${file}`);
             }
         }
+        if (result.removedFiles.length > 0) {
+            this.log('');
+            this.log('Removed (no longer part of the test setup):');
+            for (const file of result.removedFiles) {
+                this.log(`  ${file}`);
+            }
+        }
         if (result.packageJsonUpdated) {
             this.log('');
             this.log('Updated package.json with test scripts and devDependencies.');

package/dist/commands/inspect/extensions.js

@@ -6,7 +6,7 @@ import { resolveInspectScope, ScopeError, } from '../../lib/apps/inspect-scope.j
 import { HEX24, isObjectId } from '../../lib/apps/object-id.js';
 import { resolveAppId } from '../../lib/apps/resolve.js';
 import { default as localConfig } from '../../lib/config.js';
-import { buildExtensionDetail, buildOrphanDetail, componentMatchesExtension, diffManifestEntries, formatExtensionKey, functionMatchesExtension, listGroupForApp, listGroupForOrphans, listMetaFor, nextStepLines, orphanListMeta, parseExtensionKey, } from '../../lib/inspect/extensions.js';
+import { buildExtensionDetail, buildOrphanDetail, componentMatchesExtension, diffManifestEntries, formatExtensionKey, componentExtensionId, functionMatchesExtension, listGroupForApp, listGroupForOrphans, listMetaFor, nextStepLines, orphanListMeta, parseExtensionKey, } from '../../lib/inspect/extensions.js';
 import { renderKeyMetaTable } from '../../lib/inspect/table.js';
 import { SwellCommand } from '../../swell-command.js';
 export default class Extensions extends SwellCommand {
@@ -144,7 +144,7 @@ Identifier forms:
                 }
             }
             for (const comp of appComponents) {
-                const ext = comp.values?.extension;
+                const ext = componentExtensionId(comp.values);
                 if (!ext)
                     continue;
                 if (declaredIds.has(ext))
@@ -331,7 +331,7 @@ Identifier forms:
             // but no manifest entry declares it. Surface as the orphan envelope only
             // when we actually find handlers; otherwise it's a "not found" lookup.
             const orphanFns = allFunctions.filter((f) => f.extension === extId);
-            const orphanComps = allComponents.filter((c) => c.values?.extension === extId);
+            const orphanComps = allComponents.filter((c) => componentExtensionId(c.values) === extId);
             if (orphanFns.length === 0 && orphanComps.length === 0) {
                 this.error(`No extension '${extId}' declared by app '${appSlug}', and no handlers reference it. ` +
                     `List available: swell inspect extensions${scope.appSlug ? ` --app=${scope.appSlug}` : ''}`, { exit: 1 });

package/dist/lib/apps/app-config.d.ts

@@ -118,6 +118,8 @@ export declare class AppConfigComponent extends AppConfig {
     protected parsesJsonValues(): boolean;
     isRootComponent(): boolean;
     protected contentHash(): Promise<string | undefined>;
+    private manifestExtensions;
+    private siblingComponents;
     preparePostData(postData: any): Promise<any>;
 }
 export declare class AppConfigAsset extends AppConfigDefault {

package/dist/lib/apps/app-config.js

@@ -5,7 +5,9 @@ import * as fs from 'node:fs/promises';
 import * as path from 'node:path';
 import { bundleFunction, bundleComponent, bundleComponentModule, bundleWorkflow, getLocalInputs, } from '../bundle.js';
 import { analyzeFunctionSource, hasKindDiagnostic, readStaticConfig, workflowStaticConfigError, } from '../function-source-analysis.js';
-import { AllConfigPaths, ConfigType, filePathExistsAsync, hashFile, hashString, } from './index.js';
+import { isLegacyComponent, resolveComponentValues, } from './component-extension.js';
+import { listRootComponentFiles } from './components.js';
+import { AllConfigPaths, ConfigType, filePathExistsAsync, getNameFromFilePath, hashFile, hashString, } from './index.js';
 export class IgnoringFileError extends Error {
     constructor(message) {
         super(message);
@@ -380,6 +382,31 @@ export class AppConfigComponent extends AppConfig {
     async contentHash() {
         return this.isRootComponent() ? this.bundleHash() : this.fileHash;
     }
+    // Read only for components that name an extension, so other apps never need a readable swell.json
+    async manifestExtensions() {
+        try {
+            const manifest = JSON.parse(await fs.readFile(path.join(this.appRoot(), 'swell.json'), 'utf8'));
+            return Array.isArray(manifest?.extensions) ? manifest.extensions : [];
+        }
+        catch (error) {
+            throw new Error(`cannot read swell.json: ${error.message}`);
+        }
+    }
+    // Siblings whose config cannot be read are skipped: their own push reports them
+    async siblingComponents() {
+        const appRoot = this.appRoot();
+        const files = await listRootComponentFiles(appRoot);
+        return Promise.all(files
+            .filter((file) => file !== this.filePath)
+            .map(async (file) => {
+            const source = await fs
+                .readFile(path.join(appRoot, file), 'utf8')
+                // A sibling that vanished or was renamed reads as empty and is skipped
+                .catch(() => '');
+            const { config } = readStaticConfig(source, file);
+            return { name: getNameFromFilePath(file), config };
+        }));
+    }
     async preparePostData(postData) {
         if (!this.isRootComponent()) {
             return postData;
@@ -395,8 +422,13 @@ export class AppConfigComponent extends AppConfig {
             if (errors.length > 0) {
                 throw new Error(`config must be static metadata: ${errors.join('; ')}`);
             }
-            // Checkout payment components still load through swell-js, which evaluates the legacy IIFE
-            if (config?.extension) {
+            const name = getNameFromFilePath(this.filePath);
+            // Without an object extension only the targets shape is checked, with no manifest read
+            const values = config?.extension !== undefined && !isLegacyComponent(config)
+                ? resolveComponentValues(name, config, await this.manifestExtensions(), await this.siblingComponents())
+                : resolveComponentValues(name, config, [], []);
+            // Legacy payment components (string extension) still load through swell.app, which evaluates an IIFE
+            if (isLegacyComponent(config)) {
                 postData.build_file = {
                     content_type: 'application/javascript',
                     data: await bundleComponent(this.appPath),
@@ -415,7 +447,7 @@ export class AppConfigComponent extends AppConfig {
             postData.file = {
                 data: fileData,
             };
-            postData.values = config ?? {};
+            postData.values = values;
         }
         catch (error) {
             throw new FunctionProcessingError(`Unable to compile component ${this.name}`, error);

package/dist/lib/apps/component-extension.d.ts

@@ -0,0 +1,23 @@
+export interface ManifestExtension {
+    id: string;
+    type: string;
+}
+export interface SiblingComponent {
+    name: string;
+    config?: Record<string, unknown>;
+}
+/**
+ * Whether the config is the legacy swell.app contract (string extension)
+ * @param {object} config static component config
+ * @returns {boolean} true for a string extension
+ */
+export declare function isLegacyComponent(config: Record<string, unknown> | undefined): boolean;
+/**
+ * The values to push for a component's static config
+ * @param {string} name component name
+ * @param {object} config static component config
+ * @param {ManifestExtension[]} extensions extensions of swell.json
+ * @param {SiblingComponent[]} siblings the app's other root components
+ * @returns {object} values with the extension type added
+ */
+export declare function resolveComponentValues(name: string, config: Record<string, unknown> | undefined, extensions: ManifestExtension[], siblings: SiblingComponent[]): Record<string, unknown>;

package/dist/lib/apps/component-extension.js

@@ -0,0 +1,60 @@
+const isRecord = (value) => Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+const TARGETS_SHAPE = 'targets must be a list of objects with an id, like [{ id: "<target id>" }]';
+/**
+ * Whether the config is the legacy swell.app contract (string extension)
+ * @param {object} config static component config
+ * @returns {boolean} true for a string extension
+ */
+export function isLegacyComponent(config) {
+    return typeof config?.extension === 'string';
+}
+// Target ids and what each target needs are the platform's to check at push
+function checkTargets(config) {
+    if (config.targets === undefined) {
+        return;
+    }
+    if (!Array.isArray(config.targets) ||
+        !config.targets.every((item) => isRecord(item) && typeof item.id === 'string' && item.id !== '')) {
+        throw new Error(TARGETS_SHAPE);
+    }
+}
+/**
+ * The values to push for a component's static config
+ * @param {string} name component name
+ * @param {object} config static component config
+ * @param {ManifestExtension[]} extensions extensions of swell.json
+ * @param {SiblingComponent[]} siblings the app's other root components
+ * @returns {object} values with the extension type added
+ */
+export function resolveComponentValues(name, config, extensions, siblings) {
+    const values = { ...config };
+    checkTargets(values);
+    const { extension } = values;
+    // A string extension is the legacy swell.app contract
+    if (extension === undefined || typeof extension === 'string') {
+        return values;
+    }
+    if (!isRecord(extension) ||
+        typeof extension.id !== 'string' ||
+        !extension.id) {
+        throw new Error('extension must be an object with an id, like { id: "card" }');
+    }
+    const matches = extensions.filter((item) => item.id === extension.id);
+    if (matches.length > 1) {
+        throw new Error(`extension "${extension.id}" is declared more than once in swell.json`);
+    }
+    const [declared] = matches;
+    if (!declared) {
+        throw new Error(`extension "${extension.id}" is not declared in swell.json`);
+    }
+    const other = siblings.find((sibling) => {
+        const siblingExtension = sibling.config?.extension;
+        return (sibling.name !== name &&
+            isRecord(siblingExtension) &&
+            siblingExtension.id === extension.id);
+    });
+    if (other) {
+        throw new Error(`extension "${extension.id}" already has the component ${other.name}`);
+    }
+    return { ...values, extension: { ...extension, type: declared.type } };
+}

package/dist/lib/apps/frontend-scaffold.js

@@ -252,7 +252,7 @@ export async function setupPackage(name, config, pkg) {
             moduleResolution: 'bundler',
             types: ['@swell/app-types'],
         },
-        exclude: ['node_modules', 'frontend', 'test', 'vitest.config.ts'],
+        exclude: ['node_modules', 'frontend', 'test', 'vitest.config.mts'],
     };
     await writeJsonFile(path.join(configPath, 'package.json'), packageJson);
     // create frontend can initialize a workspace around an existing manifest.

package/dist/lib/create/component.d.ts

@@ -1,7 +1,11 @@
 export declare const PREACT_VERSION = "^10.28.0";
-export declare const APPS_SDK_VERSION = "^2.0.0-alpha.6";
+export declare const APPS_SDK_VERSION = "^2.0.0-alpha.7";
 export declare const toComponentName: (value: string) => string;
-export declare function getComponentTemplate(name: string, description: string): string;
+export interface ComponentTemplateOptions {
+    extension?: string;
+    targets?: string[];
+}
+export declare function getComponentTemplate(name: string, description: string, { extension, targets }?: ComponentTemplateOptions): string;
 export interface ComponentSetupResult {
     changed: string[];
     dependenciesAdded: boolean;

package/dist/lib/create/component.js

@@ -2,8 +2,8 @@ import * as fs from 'node:fs/promises';
 import * as path from 'node:path';
 import * as semver from 'semver';
 export const PREACT_VERSION = '^10.28.0';
-export const APPS_SDK_VERSION = '^2.0.0-alpha.6';
-// The first release with the ./components entry
+export const APPS_SDK_VERSION = '^2.0.0-alpha.7';
+// The minimum SDK the scaffold needs
 const COMPONENTS_SDK = semver.minVersion(APPS_SDK_VERSION);
 // Example: 'color picker' => 'ColorPicker'
 export const toComponentName = (value) => {
@@ -16,11 +16,19 @@ export const toComponentName = (value) => {
     // A component name is also its function name, so it must start with a letter
     return /^[A-Za-z]/.test(name) ? name : '';
 };
-export function getComponentTemplate(name, description) {
+export function getComponentTemplate(name, description, { extension, targets = [] } = {}) {
+    const config = [`  description: ${JSON.stringify(description)},`];
+    if (extension) {
+        config.push(`  extension: { id: ${JSON.stringify(extension)} },`);
+    }
+    if (targets.length > 0) {
+        const ids = targets.map((id) => `{ id: ${JSON.stringify(id)} }`);
+        config.push(`  targets: [${ids.join(', ')}],`);
+    }
     return `import type { ComponentProps } from '@swell/apps-sdk/components';
 
 export const config = {
-  description: ${JSON.stringify(description)},
+${config.join('\n')}
 };
 
 export default function ${name}({ value, setValue, readonly }: ComponentProps<string>) {
@@ -119,7 +127,7 @@ export async function setupComponentSupport(appPath) {
             const range = pkg[sdkSection]['@swell/apps-sdk'];
             const min = semver.validRange(range) ? semver.minVersion(range) : null;
             if (min && semver.lt(min, COMPONENTS_SDK)) {
-                // `swell create tests` pins an earlier 2.x; 1.x is another SDK the app may use
+                // `swell create tests` pinned an earlier 2.x; 1.x is another SDK the app may use
                 if (semver.major(min) === 2) {
                     pkg[sdkSection]['@swell/apps-sdk'] = APPS_SDK_VERSION;
                     result.dependenciesAdded = true;

package/dist/lib/create/tests/templates/index.d.ts

@@ -1,8 +1,5 @@
-export { envDtsTemplate } from './env-dts.js';
-export { integrationTestTemplate } from './integration-test.js';
 export { mockRequestTemplate } from './mock-request.js';
 export { setupGlobalsTemplate } from './setup-globals.js';
-export { swellClientTemplate } from './swell-client.js';
 export { tsconfigTemplate } from './tsconfig.js';
 export { unitTestTemplate } from './unit-test.js';
 export { vitestConfigTemplate } from './vitest-config.js';

package/dist/lib/create/tests/templates/index.js

@@ -1,8 +1,5 @@
-export { envDtsTemplate } from './env-dts.js';
-export { integrationTestTemplate } from './integration-test.js';
 export { mockRequestTemplate } from './mock-request.js';
 export { setupGlobalsTemplate } from './setup-globals.js';
-export { swellClientTemplate } from './swell-client.js';
 export { tsconfigTemplate } from './tsconfig.js';
 export { unitTestTemplate } from './unit-test.js';
 export { vitestConfigTemplate } from './vitest-config.js';

package/dist/lib/create/tests/templates/mock-request.js

@@ -1,8 +1,5 @@
 export function mockRequestTemplate(options) {
     return `\
-import { env } from "cloudflare:test";
-import { createSwellClient } from "./swell-client";
-
 export interface MockRequestOptions {
   data?: SwellData;
   query?: { [key: string]: string };
@@ -13,7 +10,6 @@ export interface MockRequestOptions {
   swell?: Partial<SwellAPI>;
   store?: Partial<SwellStore>;
   appId?: string;
-  useRealSwell?: boolean;
 }
 
 function createDefaultSwellMock(): Partial<SwellAPI> {
@@ -42,7 +38,6 @@ export function createMockRequest(options: MockRequestOptions = {}): SwellReques
     swell,
     store,
     appId,
-    useRealSwell = false,
   } = options;
 
   const requestHeaders = new Headers(headers);
@@ -58,7 +53,7 @@ export function createMockRequest(options: MockRequestOptions = {}): SwellReques
     body: method === "GET" ? undefined : JSON.stringify(data),
   });
 
-  const storeId = store?.id || env.SWELL_STORE_ID || "test-store";
+  const storeId = store?.id || "test-store";
 
   const resolvedStore = {
     id: storeId,
@@ -72,10 +67,9 @@ export function createMockRequest(options: MockRequestOptions = {}): SwellReques
     },
   };
 
-  const swellClient =
-    swell || (useRealSwell ? createSwellClient() : createDefaultSwellMock());
+  const swellClient = swell || createDefaultSwellMock();
 
-  const resolvedAppId = appId || env.SWELL_APP_ID || "${options.appId}";
+  const resolvedAppId = appId || "${options.appId}";
 
   const req: Partial<SwellRequest> & { appId: string; storeId: string } = {
     originalRequest,
@@ -91,7 +85,7 @@ export function createMockRequest(options: MockRequestOptions = {}): SwellReques
     publicKey: null,
     store: resolvedStore,
     session,
-    apiHost: env.SWELL_API_BASE_URL || "",
+    apiHost: "",
     logParams: undefined,
     swell: swellClient as SwellAPI,
     rawBody: method === "GET" ? "" : JSON.stringify(data),

package/dist/lib/create/tests/templates/tsconfig.js

@@ -5,7 +5,7 @@ export function tsconfigTemplate() {
             moduleResolution: 'bundler',
             skipLibCheck: true,
             types: [
-                '@cloudflare/vitest-pool-workers',
+                '@cloudflare/vitest-plugin/types',
                 '@swell/app-types',
                 'vitest/globals',
             ],

package/dist/lib/create/tests/templates/vitest-config.d.ts

@@ -1,2 +1 @@
-import type { TestTemplateOptions } from '../types.js';
-export declare function vitestConfigTemplate(options: TestTemplateOptions): string;
+export declare function vitestConfigTemplate(): string;

package/dist/lib/create/tests/templates/vitest-config.js

@@ -1,123 +1,27 @@
 import { FUNCTION_COMPATIBILITY_DATE } from '../../../constants.js';
-export function vitestConfigTemplate(options) {
+export function vitestConfigTemplate() {
     return `\
-import { defineWorkersConfig } from "@cloudflare/vitest-pool-workers/config";
-import { readFileSync, existsSync } from "node:fs";
-import { homedir } from "node:os";
-import path from "node:path";
-
-type SdkAuth = {
-  storeId: string;
-  sessionId: string;
-  apiBaseUrl: string;
-};
-
-const isCI = Boolean(process.env.CI || process.env.CONTINUOUS_INTEGRATION);
-
-function loadSwellAuth(): SdkAuth {
-  const envStoreId = process.env.SWELL_STORE_ID;
-  const envSessionId = process.env.SWELL_SESSION_ID;
-  const envApiBaseUrl = process.env.SWELL_API_BASE_URL;
-
-  if (envStoreId && envSessionId) {
-    return {
-      storeId: envStoreId,
-      sessionId: envSessionId,
-      apiBaseUrl: envApiBaseUrl || \`https://\${envStoreId}.swell.store/admin/api\`,
-    };
-  }
-
-  if (isCI) {
-    throw new Error(
-      "CI environment detected but SWELL_STORE_ID and SWELL_SESSION_ID are not set. " +
-        "Add these as CI secrets/variables to run integration tests.",
-    );
-  }
-
-  const home = homedir();
-  const configPath = path.resolve(home, ".swell", "config.json");
-  if (!existsSync(configPath)) {
-    throw new Error(
-      \`Swell CLI config not found at \${configPath}. Run \\\`swell login\\\` or set SWELL_STORE_ID and SWELL_SESSION_ID.\`
-    );
-  }
-
-  const rawConfig = readFileSync(configPath, "utf-8");
-
-  interface CliConfig {
-    defaultStore?: string;
-    stores?: { storeId: string; sessionId?: string }[];
-  }
-
-  let configJson: CliConfig;
-
-  try {
-    configJson = JSON.parse(rawConfig) as CliConfig;
-  } catch (error) {
-    throw new Error(
-      \`Unable to parse Swell CLI config at \${configPath}: \${String(error)}\`
-    );
-  }
-
-  const defaultStore = configJson.defaultStore;
-  const stores = configJson.stores || [];
-
-  const store = defaultStore
-    ? stores.find((item) => item.storeId === defaultStore)
-    : undefined;
-
-  if (!defaultStore || !store?.sessionId) {
-    throw new Error(
-      "No active Swell CLI session found. Run \\\`swell login\\\` or set SWELL_STORE_ID and SWELL_SESSION_ID.",
-    );
-  }
-
-  const envPath = path.join(home, ".swell", "env.json");
-  let apiBaseUrl = \`https://\${defaultStore}.swell.store/admin/api\`;
-
-  if (existsSync(envPath)) {
-    try {
-      const rawEnv = readFileSync(envPath, "utf-8");
-      const envJson = JSON.parse(rawEnv) as { ADMIN_API_BASE_URL?: string };
-      if (envJson.ADMIN_API_BASE_URL) {
-        apiBaseUrl = envJson.ADMIN_API_BASE_URL.replace("\${STORE_ID}", defaultStore);
-      }
-    } catch {
-      // Ignore env parsing errors and fall back to default
-    }
-  }
-
-  return {
-    storeId: defaultStore,
-    sessionId: store.sessionId!,
-    apiBaseUrl,
-  };
-}
-
-const sdkAuth = loadSwellAuth();
-
-export default defineWorkersConfig({
+import { cloudflareTest } from "@cloudflare/vitest-plugin";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  plugins: [
+    cloudflareTest({
+      miniflare: {
+        compatibilityDate: "${FUNCTION_COMPATIBILITY_DATE}",
+        // Reports a rejection as unhandled only if nothing has handled it by the end of the
+        // microtask queue. Without it, a rejection handled one step later fails the run
+        compatibilityFlags: ["unhandled_rejection_after_microtask_checkpoint"],
+      },
+    }),
+  ],
   test: {
     globals: true,
+    // The Workers runtime cannot read Vitest's module cache from disk
+    fsModuleCache: false,
     include: ["test/**/*.test.ts"],
     exclude: ["node_modules", "docs"],
     setupFiles: ["./test/setup-globals.ts"],
-    poolOptions: {
-      workers: {
-        singleWorker: true,
-        isolatedStorage: true,
-        miniflare: {
-          compatibilityDate: "${FUNCTION_COMPATIBILITY_DATE}",
-          bindings: {
-            SWELL_STORE_ID: sdkAuth.storeId,
-            SWELL_SESSION_ID: sdkAuth.sessionId,
-            SWELL_API_BASE_URL: sdkAuth.apiBaseUrl,
-            SWELL_APP_ID: "${options.appId}",
-            SWELL_ENVIRONMENT: "test",
-          },
-        },
-      },
-    },
   },
 });
 `;

package/dist/lib/create/tests/types.d.ts

@@ -13,6 +13,8 @@ export interface ScaffoldResult {
     createdFiles: string[];
     /** Files that were skipped because they already exist */
     skippedFiles: string[];
+    /** Files of an earlier scaffold that were removed */
+    removedFiles: string[];
     /** Whether package.json was updated */
     packageJsonUpdated: boolean;
     /** Warning messages to display to user */

package/dist/lib/create/tests.js

@@ -1,14 +1,28 @@
 import * as fs from 'node:fs/promises';
 import * as path from 'node:path';
 import { filePathExistsAsync, writeFile } from '../apps/index.js';
-import { envDtsTemplate, integrationTestTemplate, mockRequestTemplate, setupGlobalsTemplate, swellClientTemplate, tsconfigTemplate, unitTestTemplate, vitestConfigTemplate, } from './tests/templates/index.js';
+import { APPS_SDK_VERSION } from './component.js';
+import { mockRequestTemplate, setupGlobalsTemplate, tsconfigTemplate, unitTestTemplate, vitestConfigTemplate, } from './tests/templates/index.js';
 const TEST_DEV_DEPENDENCIES = {
-    // 0.13+ requires vitest 4 and drops the /config entry the vitest template imports
-    '@cloudflare/vitest-pool-workers': '0.12.x',
-    vitest: '3.2.x',
+    // npm 10 cannot resolve vitest 4.1 next to the plugin; vitest 5 needs Node 22.12 or later
+    '@cloudflare/vitest-plugin': '1.4.x',
+    vitest: '5.0.x',
     '@swell/app-types': 'latest',
-    '@swell/apps-sdk': '2.0.0-alpha.0',
+    '@swell/apps-sdk': APPS_SDK_VERSION,
 };
+// Earlier scaffolds used the deprecated pool package and a vitest.config.ts,
+// which Vitest would load ahead of vitest.config.mts
+const LEGACY_POOL_PACKAGE = '@cloudflare/vitest-pool-workers';
+const LEGACY_VITEST_CONFIG = 'vitest.config.ts';
+// The plugin is ESM-only and scaffolded apps are not "type": "module"
+const VITEST_CONFIG = 'vitest.config.mts';
+// Files of earlier scaffolds that have no place in the current one
+const RETIRED_FILES = [
+    LEGACY_VITEST_CONFIG,
+    'test/env.d.ts',
+    'test/helpers/swell-client.ts',
+    'test/integration/example.test.ts',
+];
 async function writeTextFile(filePath, contents, overwrite) {
     if (!overwrite && (await filePathExistsAsync(filePath))) {
         return { created: false, skipped: true };
@@ -46,9 +60,16 @@ async function updatePackageJson(appPath) {
     }
     const devDeps = (pkg.devDependencies || {});
     const deps = (pkg.dependencies || {});
-    devDeps['@cloudflare/vitest-pool-workers'] =
-        devDeps['@cloudflare/vitest-pool-workers'] ||
-            TEST_DEV_DEPENDENCIES['@cloudflare/vitest-pool-workers'];
+    if (devDeps[LEGACY_POOL_PACKAGE] || deps[LEGACY_POOL_PACKAGE]) {
+        // The plugin does not support the vitest version the pool package required
+        for (const section of [deps, devDeps]) {
+            delete section[LEGACY_POOL_PACKAGE];
+            delete section.vitest;
+        }
+    }
+    devDeps['@cloudflare/vitest-plugin'] =
+        devDeps['@cloudflare/vitest-plugin'] ||
+            TEST_DEV_DEPENDENCIES['@cloudflare/vitest-plugin'];
     devDeps.vitest = devDeps.vitest || TEST_DEV_DEPENDENCIES.vitest;
     if (!devDeps['@swell/app-types'] && !deps['@swell/app-types']) {
         devDeps['@swell/app-types'] = TEST_DEV_DEPENDENCIES['@swell/app-types'];
@@ -72,6 +93,29 @@ async function updatePackageJson(appPath) {
         };
     }
 }
+async function hasLegacySetup(appPath) {
+    if (await filePathExistsAsync(path.join(appPath, LEGACY_VITEST_CONFIG))) {
+        return true;
+    }
+    try {
+        const pkg = JSON.parse(await fs.readFile(path.join(appPath, 'package.json'), 'utf8'));
+        return Boolean(pkg.devDependencies?.[LEGACY_POOL_PACKAGE] ||
+            pkg.dependencies?.[LEGACY_POOL_PACKAGE]);
+    }
+    catch {
+        return false;
+    }
+}
+// The app tsconfig.json covers functions only; the config file runs in Node
+async function excludeVitestConfig(appPath) {
+    const tsconfigPath = path.join(appPath, 'tsconfig.json');
+    if (!(await filePathExistsAsync(tsconfigPath)))
+        return;
+    const tsconfig = await fs.readFile(tsconfigPath, 'utf8');
+    const next = tsconfig.replace(`"${LEGACY_VITEST_CONFIG}"`, `"${VITEST_CONFIG}"`);
+    if (next !== tsconfig)
+        await fs.writeFile(tsconfigPath, next, 'utf8');
+}
 async function validatePrerequisites(appPath) {
     const warnings = [];
     const tsconfigPath = path.join(appPath, 'tsconfig.json');
@@ -85,6 +129,7 @@ export async function createTestsScaffold(options) {
     const result = {
         createdFiles: [],
         skippedFiles: [],
+        removedFiles: [],
         packageJsonUpdated: false,
         warnings: [],
     };
@@ -100,14 +145,21 @@ export async function createTestsScaffold(options) {
             result.skippedFiles.push(relativePath);
         }
     };
-    await trackFile('vitest.config.ts', vitestConfigTemplate({ appId }));
+    if (overwrite) {
+        const exists = await Promise.all(RETIRED_FILES.map((file) => filePathExistsAsync(path.join(appPath, file))));
+        result.removedFiles = RETIRED_FILES.filter((_, index) => exists[index]);
+        await Promise.all(result.removedFiles.map((file) => fs.rm(path.join(appPath, file))));
+    }
+    else if (await hasLegacySetup(appPath)) {
+        result.warnings.push(`This app has an earlier test setup (${LEGACY_VITEST_CONFIG} with ${LEGACY_POOL_PACKAGE}, which is deprecated). Nothing was changed. Run \`swell create tests --overwrite\` to move it to @cloudflare/vitest-plugin; this replaces the scaffolded test files.`);
+        return result;
+    }
+    await trackFile(VITEST_CONFIG, vitestConfigTemplate());
+    await excludeVitestConfig(appPath);
     await trackFile('test/tsconfig.json', tsconfigTemplate());
-    await trackFile('test/env.d.ts', envDtsTemplate());
     await trackFile('test/setup-globals.ts', setupGlobalsTemplate());
-    await trackFile('test/helpers/swell-client.ts', swellClientTemplate());
     await trackFile('test/helpers/mock-request.ts', mockRequestTemplate({ appId }));
     await trackFile('test/unit/example.test.ts', unitTestTemplate());
-    await trackFile('test/integration/example.test.ts', integrationTestTemplate());
     const pkgResult = await updatePackageJson(appPath);
     result.packageJsonUpdated = pkgResult.updated;
     if (pkgResult.warning) {

package/dist/lib/inspect/extensions.d.ts

@@ -42,7 +42,10 @@ export interface ComponentRecord {
     file_path?: string;
     values?: {
         [key: string]: unknown;
-        extension?: string;
+        extension?: string | {
+            id: string;
+            type?: string;
+        };
     };
     [key: string]: unknown;
 }
@@ -202,6 +205,10 @@ export declare function stripHookPrefix(event: string): string;
 export declare function eventsCoveredByFunctions(functions: Pick<FunctionRecord, 'model'>[]): Set<string>;
 /** Required events not covered by any of the bound functions. */
 export declare function missingRequiredEvents(type: ExtensionType, functions: Pick<FunctionRecord, 'model'>[]): string[];
+/**
+ * The extension id a component binds to: a string (legacy) or `{ id }` (object)
+ */
+export declare function componentExtensionId(values: ComponentRecord['values']): string | undefined;
 /** Lift a component record into the synthesized `BoundComponent` shape. */
 export declare function liftBoundComponent(record: ComponentRecord): BoundComponent;
 /** Lift a function record into the synthesized `BoundFunction` shape. */

package/dist/lib/inspect/extensions.js

@@ -127,12 +127,22 @@ export function missingRequiredEvents(type, functions) {
     const covered = eventsCoveredByFunctions(functions);
     return requiredEventsFor(type).filter((ev) => !covered.has(ev));
 }
+/**
+ * The extension id a component binds to: a string (legacy) or `{ id }` (object)
+ */
+export function componentExtensionId(values) {
+    const extension = values?.extension;
+    if (typeof extension === 'string') {
+        return extension;
+    }
+    return typeof extension?.id === 'string' ? extension.id : undefined;
+}
 /** Lift a component record into the synthesized `BoundComponent` shape. */
 export function liftBoundComponent(record) {
     return {
         id: record.id,
         name: record.name,
-        extension: record.values?.extension,
+        extension: componentExtensionId(record.values),
         file_path: record.file_path,
     };
 }
@@ -686,5 +696,5 @@ export function functionMatchesExtension(fn, extId) {
     return fn.extension === extId;
 }
 export function componentMatchesExtension(comp, extId) {
-    return comp.values?.extension === extId;
+    return componentExtensionId(comp.values) === extId;
 }

package/oclif.manifest.json

@@ -1664,7 +1664,8 @@
       "description": "Create an app component in the components folder.",
       "examples": [
         "$ swell create component",
-        "$ swell create component ColorPicker -d \"Brand color picker\" -y"
+        "$ swell create component ColorPicker -d \"Brand color picker\" -y",
+        "$ swell create component MyComponent --extension <extension-id> --target <target-id> -y"
       ],
       "flags": {
         "app-path": {
@@ -1683,12 +1684,26 @@
           "multiple": false,
           "type": "option"
         },
+        "extension": {
+          "description": "Extension id from swell.json: makes the component the UI of that extension",
+          "name": "extension",
+          "hasDynamicHelp": false,
+          "multiple": false,
+          "type": "option"
+        },
         "overwrite": {
           "description": "Overwrite existing file",
           "name": "overwrite",
           "allowNo": false,
           "type": "boolean"
         },
+        "target": {
+          "description": "Target id where the component renders; repeat for more targets",
+          "name": "target",
+          "hasDynamicHelp": false,
+          "multiple": true,
+          "type": "option"
+        },
         "yes": {
           "char": "y",
           "description": "Skip prompts, require all arguments",
@@ -1706,7 +1721,7 @@
       "strict": true,
       "summary": "Create an app component in the components folder.",
       "helpMeta": {
-        "usageDirect": "<name> [-d <description>] -y"
+        "usageDirect": "<name> [-d <description>] [--extension <extension-id>] [--target <target-id>...] -y"
       },
       "isESM": true,
       "relativePath": [
@@ -2346,7 +2361,7 @@
     "create:tests": {
       "aliases": [],
       "args": {},
-      "description": "Initialize a vitest + Cloudflare Workers test setup that reuses swell-cli authentication.",
+      "description": "Initialize a vitest + Cloudflare Workers test setup for app functions.",
       "examples": [
         "$ swell create tests",
         "$ swell create tests --overwrite"
@@ -3670,5 +3685,5 @@
       ]
     }
   },
-  "version": "2.9.27"
+  "version": "2.9.28"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swell/cli",
-  "version": "2.9.27",
+  "version": "2.9.28",
   "type": "module",
   "description": "Swell's command line interface/utility",
   "keywords": [

package/dist/lib/create/tests/templates/env-dts.d.ts

@@ -1 +0,0 @@
-export declare function envDtsTemplate(): string;

package/dist/lib/create/tests/templates/env-dts.js

@@ -1,15 +0,0 @@
-export function envDtsTemplate() {
-    return `\
-declare module "cloudflare:test" {
-  interface ProvidedEnv {
-    SWELL_STORE_ID: string;
-    SWELL_SESSION_ID: string;
-    SWELL_API_BASE_URL: string;
-    SWELL_APP_ID: string;
-    SWELL_ENVIRONMENT?: string;
-  }
-}
-
-export {};
-`;
-}

package/dist/lib/create/tests/templates/integration-test.d.ts

@@ -1 +0,0 @@
-export declare function integrationTestTemplate(): string;

package/dist/lib/create/tests/templates/integration-test.js

@@ -1,19 +0,0 @@
-export function integrationTestTemplate() {
-    return `\
-import { describe, it, expect } from "vitest";
-import { createSwellClient } from "../helpers/swell-client";
-
-describe("Store settings (read-only)", () => {
-  it("loads general store settings using CLI auth", async () => {
-    const swell = createSwellClient();
-
-    const general = await swell.get("/settings/general");
-
-    expect(general).toBeDefined();
-    expect(general.id).toBe("general");
-    expect(general.features).toBeDefined();
-    expect(typeof general.features.carts).toBe("boolean");
-  });
-});
-`;
-}

package/dist/lib/create/tests/templates/swell-client.d.ts

@@ -1 +0,0 @@
-export declare function swellClientTemplate(): string;

package/dist/lib/create/tests/templates/swell-client.js

@@ -1,128 +0,0 @@
-export function swellClientTemplate() {
-    return `\
-import { env } from "cloudflare:test";
-
-type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
-
-type BasicSwellClient = Pick<
-  SwellAPI,
-  "get" | "post" | "put" | "delete" | "settings"
->;
-
-async function makeRequest(
-  method: HttpMethod,
-  url: string,
-  data?: any
-): Promise<any> {
-  const baseUrl = env.SWELL_API_BASE_URL || "https://api.swell.store";
-  const sessionId = env.SWELL_SESSION_ID;
-  const environment = env.SWELL_ENVIRONMENT || "test";
-
-  if (!sessionId) {
-    throw new Error(
-      "Missing SWELL_SESSION_ID binding. Run \\\`swell login\\\` or set it explicitly for tests.",
-    );
-  }
-
-  let endpointUrl = String(url).startsWith("/") ? url.substring(1) : String(url);
-  if (!endpointUrl.startsWith("data/")) {
-    endpointUrl = \`data/\${endpointUrl}\`;
-  }
-
-  let fullUrl = \`\${baseUrl}/\${endpointUrl}\`;
-  const headers: HeadersInit = {
-    "Content-Type": "application/json;charset=UTF-8",
-    "User-Agent": "swell-app-tests/1.0",
-    "X-Session": sessionId,
-    "Swell-Env": environment,
-  };
-
-  const options: RequestInit = {
-    method,
-    headers,
-  };
-
-  if (data) {
-    if (method === "GET") {
-      const params = new URLSearchParams();
-
-      function append(prefix: string, value: any) {
-        if (value === null || value === undefined) return;
-        if (typeof value === "object" && !Array.isArray(value)) {
-          for (const [k, v] of Object.entries(value)) {
-            append(\`\${prefix}[\${k}]\`, v);
-          }
-        } else if (Array.isArray(value)) {
-          for (const v of value) {
-            append(\`\${prefix}[]\`, v);
-          }
-        } else {
-          params.append(prefix, String(value));
-        }
-      }
-
-      for (const [key, value] of Object.entries(data)) {
-        append(key, value);
-      }
-
-      const query = params.toString();
-      if (query) {
-        fullUrl += \`?\${query}\`;
-      }
-    } else {
-      options.body = JSON.stringify(data);
-    }
-  }
-
-  const response = await fetch(fullUrl, options);
-  const text = await response.text();
-
-  let result: any;
-  try {
-    result = text ? JSON.parse(text) : null;
-  } catch {
-    result = text;
-  }
-
-  if (!response.ok) {
-    throw new (globalThis as any).SwellError(result || text || "Request failed", {
-      status: response.status,
-    });
-  }
-
-  if (result?.errors) {
-    throw new (globalThis as any).SwellError(result.errors, {
-      status: 400,
-    });
-  }
-
-  return result;
-}
-
-export function createSwellClient(): BasicSwellClient {
-  return {
-    get(url: string, query?: any) {
-      return makeRequest("GET", url, query);
-    },
-    post(url: string, data?: any) {
-      return makeRequest("POST", url, data);
-    },
-    put(url: string, data?: any) {
-      return makeRequest("PUT", url, data);
-    },
-    delete(url: string, data?: any) {
-      return makeRequest("DELETE", url, data);
-    },
-    settings(id?: string) {
-      const appId = id || env.SWELL_APP_ID;
-      if (!appId) {
-        throw new Error(
-          "Missing app id. Pass an id to settings() or set SWELL_APP_ID binding.",
-        );
-      }
-      return makeRequest("GET", \`/settings/\${appId}\`);
-    },
-  } as BasicSwellClient;
-}
-`;
-}