handoff-app 1.1.3 → 1.2.0-1

package/dist/app-builder/watchers.d.ts

@@ -1,13 +1,9 @@
 import chokidar from 'chokidar';
 import Handoff from '..';
-import { ComponentSegment } from '../transformers/preview/component/builder';
-import { ComponentListObject } from '../transformers/preview/types';
-export interface WatcherState {
-    debounce: boolean;
-    runtimeComponentsWatcher: chokidar.FSWatcher | null;
-    runtimeConfigurationWatcher: chokidar.FSWatcher | null;
-    componentDirectoriesWatcher: chokidar.FSWatcher | null;
-}
+import { RuntimeComponentEntryType } from './watchers/component';
+import { WatcherState } from './watchers/utils';
+export { getRuntimeComponentsPathsToWatch, mapEntryTypeToSegment } from './watchers/component';
+export type { WatcherState } from './watchers/utils';
 /**
  * Watches the working public directory for changes and updates the app.
  */
@@ -26,22 +22,17 @@ export declare const watchPages: (handoff: Handoff, chokidarConfig: chokidar.Wat
  * since per-component builds may depend on these shared entries.
  */
 export declare const watchGlobalEntries: (handoff: Handoff, state: WatcherState, chokidarConfig: chokidar.WatchOptions) => void;
-/**
- * Maps configuration entry types to component segments.
- */
-export declare const mapEntryTypeToSegment: (type: keyof ComponentListObject["entries"]) => ComponentSegment | undefined;
-/**
- * Gets the paths of runtime components to watch.
- *
- * @returns A Map of paths to watch and their entry types
- */
-export declare const getRuntimeComponentsPathsToWatch: (handoff: Handoff) => Map<string, "template" | "js" | "scss">;
 /**
  * Watches runtime components for changes.
  */
-export declare const watchRuntimeComponents: (handoff: Handoff, state: WatcherState, runtimeComponentPathsToWatch: Map<string, keyof ComponentListObject["entries"]>) => void;
+export declare const watchRuntimeComponents: (handoff: Handoff, state: WatcherState, runtimeComponentPathsToWatch: Map<string, RuntimeComponentEntryType>) => void;
 /**
  * Watches the runtime configuration for changes.
+ *
+ * Uses the generic {@link ConfigDiffStrategy} registry so that each entity
+ * kind (patterns today, potentially themes / slots later) supplies its own
+ * snapshot → diff → selective-rebuild logic without the watcher needing to
+ * know the details.
  */
 export declare const watchRuntimeConfiguration: (handoff: Handoff, state: WatcherState) => void;
 /**

package/dist/app-builder/watchers.js

@@ -35,17 +35,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.watchComponentDirectories = exports.watchRuntimeConfiguration = exports.watchRuntimeComponents = exports.getRuntimeComponentsPathsToWatch = exports.mapEntryTypeToSegment = exports.watchGlobalEntries = exports.watchPages = exports.watchAppSource = exports.watchPublicDirectory = void 0;
+exports.watchComponentDirectories = exports.watchRuntimeConfiguration = exports.watchRuntimeComponents = exports.watchGlobalEntries = exports.watchPages = exports.watchAppSource = exports.watchPublicDirectory = exports.mapEntryTypeToSegment = exports.getRuntimeComponentsPathsToWatch = void 0;
 const chokidar_1 = __importDefault(require("chokidar"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const path_1 = __importDefault(require("path"));
+const builder_1 = __importStar(require("../transformers/preview/component/builder"));
 const css_1 = require("../transformers/preview/component/css");
 const javascript_1 = require("../transformers/preview/component/javascript");
-const builder_1 = __importStar(require("../transformers/preview/component/builder"));
 const logger_1 = require("../utils/logger");
 const path_2 = require("../utils/path");
 const client_config_1 = require("./client-config");
+const config_diff_1 = require("./config-diff");
 const paths_1 = require("./paths");
+const component_1 = require("./watchers/component");
+const utils_1 = require("./watchers/utils");
+var component_2 = require("./watchers/component");
+Object.defineProperty(exports, "getRuntimeComponentsPathsToWatch", { enumerable: true, get: function () { return component_2.getRuntimeComponentsPathsToWatch; } });
+Object.defineProperty(exports, "mapEntryTypeToSegment", { enumerable: true, get: function () { return component_2.mapEntryTypeToSegment; } });
 /**
  * Watches the working public directory for changes and updates the app.
  */
@@ -56,8 +62,7 @@ const watchPublicDirectory = (handoff, wss, state, chokidarConfig) => {
                 case 'add':
                 case 'change':
                 case 'unlink':
-                    if (!state.debounce) {
-                        state.debounce = true;
+                    yield (0, utils_1.scheduleHandler)(state, 'publicDirectory', () => __awaiter(void 0, void 0, void 0, function* () {
                         try {
                             logger_1.Logger.warn('Public directory changed. Handoff will ingest the new data...');
                             yield (0, paths_1.syncPublicFiles)(handoff);
@@ -66,10 +71,7 @@ const watchPublicDirectory = (handoff, wss, state, chokidarConfig) => {
                         catch (e) {
                             logger_1.Logger.error('Error syncing public directory:', e);
                         }
-                        finally {
-                            state.debounce = false;
-                        }
-                    }
+                    }));
                     break;
             }
         }));
@@ -151,8 +153,7 @@ const watchGlobalEntries = (handoff, state, chokidarConfig) => {
             case 'add':
             case 'change':
             case 'unlink':
-                if (!state.debounce) {
-                    state.debounce = true;
+                yield (0, utils_1.scheduleHandler)(state, 'globalEntries', () => __awaiter(void 0, void 0, void 0, function* () {
                     try {
                         logger_1.Logger.warn('Global entry changed. Rebuilding bundles and components...');
                         const shouldRebuildMainCss = !!scssEntry && scssPathsToWatch.some((watchPath) => (0, path_2.isPathInside)(file, watchPath));
@@ -164,57 +165,17 @@ const watchGlobalEntries = (handoff, state, chokidarConfig) => {
                             yield (0, javascript_1.buildMainJS)(handoff);
                         }
                         yield (0, builder_1.default)(handoff);
+                        yield (0, config_diff_1.runAllFinalizers)(handoff);
                     }
                     catch (e) {
                         logger_1.Logger.error('Error rebuilding after global entry change:', e);
                     }
-                    finally {
-                        state.debounce = false;
-                    }
-                }
+                }));
                 break;
         }
     }));
 };
 exports.watchGlobalEntries = watchGlobalEntries;
-/**
- * Maps configuration entry types to component segments.
- */
-const mapEntryTypeToSegment = (type) => {
-    return {
-        js: builder_1.ComponentSegment.JavaScript,
-        scss: builder_1.ComponentSegment.Style,
-        template: builder_1.ComponentSegment.Previews,
-        templates: builder_1.ComponentSegment.Previews,
-    }[type];
-};
-exports.mapEntryTypeToSegment = mapEntryTypeToSegment;
-/**
- * Gets the paths of runtime components to watch.
- *
- * @returns A Map of paths to watch and their entry types
- */
-const getRuntimeComponentsPathsToWatch = (handoff) => {
-    var _a, _b, _c;
-    const result = new Map();
-    for (const runtimeComponentId of Object.keys((_b = (_a = handoff.runtimeConfig) === null || _a === void 0 ? void 0 : _a.entries.components) !== null && _b !== void 0 ? _b : {})) {
-        const runtimeComponent = handoff.runtimeConfig.entries.components[runtimeComponentId];
-        for (const [runtimeComponentEntryType, runtimeComponentEntryPath] of Object.entries((_c = runtimeComponent.entries) !== null && _c !== void 0 ? _c : {})) {
-            const normalizedComponentEntryPath = runtimeComponentEntryPath;
-            if (fs_extra_1.default.existsSync(normalizedComponentEntryPath)) {
-                const entryType = runtimeComponentEntryType;
-                if (fs_extra_1.default.statSync(normalizedComponentEntryPath).isFile()) {
-                    result.set(path_1.default.resolve(normalizedComponentEntryPath), entryType);
-                }
-                else {
-                    result.set(normalizedComponentEntryPath, entryType);
-                }
-            }
-        }
-    }
-    return result;
-};
-exports.getRuntimeComponentsPathsToWatch = getRuntimeComponentsPathsToWatch;
 /**
  * Watches runtime components for changes.
  */
@@ -238,21 +199,27 @@ const watchRuntimeComponents = (handoff, state, runtimeComponentPathsToWatch) =>
                 case 'add':
                 case 'change':
                 case 'unlink':
-                    if (!state.debounce) {
-                        state.debounce = true;
+                    yield (0, utils_1.scheduleHandler)(state, `runtimeComponent:${normalizedFile}`, () => __awaiter(void 0, void 0, void 0, function* () {
                         try {
                             const entryType = runtimeComponentEntryTypeByPath.get(normalizedFile);
-                            const segmentToUpdate = entryType ? (0, exports.mapEntryTypeToSegment)(entryType) : undefined;
-                            const componentDir = path_1.default.basename(path_1.default.dirname(file));
-                            yield (0, builder_1.default)(handoff, componentDir, segmentToUpdate);
+                            const segmentToUpdate = entryType ? (0, component_1.mapEntryTypeToSegment)(entryType) : undefined;
+                            const componentId = (0, component_1.resolveComponentIdForChangedFile)(handoff, file);
+                            const skipPatterns = segmentToUpdate === builder_1.ComponentSegment.JavaScript ||
+                                segmentToUpdate === builder_1.ComponentSegment.Style;
+                            let finalizeContext;
+                            if (skipPatterns) {
+                                finalizeContext = { skipPatternFinalizer: true };
+                            }
+                            else if (componentId) {
+                                finalizeContext = { patternRebuildComponentIds: [componentId] };
+                            }
+                            yield (0, builder_1.default)(handoff, componentId, segmentToUpdate);
+                            yield (0, config_diff_1.runAllFinalizers)(handoff, finalizeContext);
                         }
                         catch (e) {
                             logger_1.Logger.error('Error processing component:', e);
                         }
-                        finally {
-                            state.debounce = false;
-                        }
-                    }
+                    }));
                     break;
             }
         }));
@@ -261,6 +228,11 @@ const watchRuntimeComponents = (handoff, state, runtimeComponentPathsToWatch) =>
 exports.watchRuntimeComponents = watchRuntimeComponents;
 /**
  * Watches the runtime configuration for changes.
+ *
+ * Uses the generic {@link ConfigDiffStrategy} registry so that each entity
+ * kind (patterns today, potentially themes / slots later) supplies its own
+ * snapshot → diff → selective-rebuild logic without the watcher needing to
+ * know the details.
  */
 const watchRuntimeConfiguration = (handoff, state) => {
     if (state.runtimeConfigurationWatcher) {
@@ -269,26 +241,44 @@ const watchRuntimeConfiguration = (handoff, state) => {
     if (handoff.getConfigFilePaths().length > 0) {
         state.runtimeConfigurationWatcher = chokidar_1.default.watch(handoff.getConfigFilePaths(), { ignoreInitial: true });
         state.runtimeConfigurationWatcher.on('all', (event, file) => __awaiter(void 0, void 0, void 0, function* () {
+            const normalizedFile = (0, path_2.normalizePathForCompare)(file);
             switch (event) {
                 case 'add':
                 case 'change':
                 case 'unlink':
-                    if (!state.debounce) {
-                        state.debounce = true;
+                    yield (0, utils_1.scheduleHandler)(state, `runtimeConfig:${normalizedFile}`, () => __awaiter(void 0, void 0, void 0, function* () {
+                        var _a;
                         try {
-                            file = path_1.default.dirname(file);
+                            const changedFile = file;
+                            // Look up the entity this config file belongs to BEFORE reload.
+                            const entryBefore = handoff.getConfigFileEntry(changedFile);
+                            const strategy = entryBefore ? (0, config_diff_1.getStrategy)(entryBefore.kind) : undefined;
+                            const handle = entryBefore && strategy ? strategy.capture(handoff, entryBefore.entityId) : undefined;
                             handoff.reload();
                             yield (0, client_config_1.persistClientConfig)(handoff);
-                            (0, exports.watchRuntimeComponents)(handoff, state, (0, exports.getRuntimeComponentsPathsToWatch)(handoff));
-                            yield (0, builder_1.default)(handoff, path_1.default.basename(file));
+                            (0, exports.watchRuntimeComponents)(handoff, state, (0, component_1.getRuntimeComponentsPathsToWatch)(handoff));
+                            (0, exports.watchRuntimeConfiguration)(handoff, state);
+                            const entryAfter = handoff.getConfigFileEntry(changedFile);
+                            const normalizedChanged = (0, path_2.normalizePathForCompare)(changedFile);
+                            const normalizedMainConfig = handoff.getMainConfigFilePath()
+                                ? (0, path_2.normalizePathForCompare)(handoff.getMainConfigFilePath())
+                                : undefined;
+                            if (normalizedMainConfig && normalizedChanged === normalizedMainConfig) {
+                                yield (0, builder_1.default)(handoff);
+                            }
+                            else if (handle) {
+                                yield handle.apply(handoff, entryAfter === null || entryAfter === void 0 ? void 0 : entryAfter.entityId);
+                            }
+                            else {
+                                const effectiveId = (_a = entryAfter === null || entryAfter === void 0 ? void 0 : entryAfter.entityId) !== null && _a !== void 0 ? _a : path_1.default.basename(path_1.default.dirname(changedFile));
+                                yield (0, builder_1.default)(handoff, effectiveId);
+                            }
+                            yield (0, config_diff_1.runAllFinalizers)(handoff);
                         }
                         catch (e) {
                             logger_1.Logger.error('Error reloading runtime configuration:', e);
                         }
-                        finally {
-                            state.debounce = false;
-                        }
-                    }
+                    }));
                     break;
             }
         }));
@@ -321,35 +311,31 @@ const watchComponentDirectories = (handoff, state, chokidarConfig) => {
     const knownComponents = new Set(Object.keys((_e = (_d = (_c = handoff.runtimeConfig) === null || _c === void 0 ? void 0 : _c.entries) === null || _d === void 0 ? void 0 : _d.components) !== null && _e !== void 0 ? _e : {}));
     state.componentDirectoriesWatcher = chokidar_1.default.watch(dirsToWatch, Object.assign(Object.assign({}, chokidarConfig), { depth: 1 }));
     state.componentDirectoriesWatcher.on('add', (file) => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b, _c;
         const basename = path_1.default.basename(file);
         const dirName = path_1.default.basename(path_1.default.dirname(file));
         const isConfigFile = basename.endsWith('.json') || basename.endsWith('.js') || basename.endsWith('.cjs');
         const isNewComponent = isConfigFile && basename.startsWith(dirName) && !knownComponents.has(dirName);
         if (!isNewComponent)
             return;
-        if (!state.debounce) {
-            state.debounce = true;
+        yield (0, utils_1.scheduleHandler)(state, `newComponent:${dirName}`, () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
             try {
                 logger_1.Logger.warn(`New component detected: ${dirName}. Reloading configuration...`);
                 handoff.reload();
                 knownComponents.add(dirName);
-                // Update known set with all current components
                 for (const id of Object.keys((_c = (_b = (_a = handoff.runtimeConfig) === null || _a === void 0 ? void 0 : _a.entries) === null || _b === void 0 ? void 0 : _b.components) !== null && _c !== void 0 ? _c : {})) {
                     knownComponents.add(id);
                 }
                 yield (0, client_config_1.persistClientConfig)(handoff);
-                (0, exports.watchRuntimeComponents)(handoff, state, (0, exports.getRuntimeComponentsPathsToWatch)(handoff));
+                (0, exports.watchRuntimeComponents)(handoff, state, (0, component_1.getRuntimeComponentsPathsToWatch)(handoff));
                 (0, exports.watchRuntimeConfiguration)(handoff, state);
                 yield (0, builder_1.default)(handoff, dirName);
+                yield (0, config_diff_1.runAllFinalizers)(handoff, { patternRebuildComponentIds: [dirName] });
             }
             catch (e) {
                 logger_1.Logger.error('Error processing new component:', e);
             }
-            finally {
-                state.debounce = false;
-            }
-        }
+        }));
     }));
 };
 exports.watchComponentDirectories = watchComponentDirectories;

package/dist/app-builder/websocket.js

@@ -20,7 +20,14 @@ const logger_1 = require("../utils/logger");
  * @returns A function that accepts a message string and broadcasts it to all connected clients.
  */
 const createWebSocketServer = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (port = 3001) {
+    logger_1.Logger.info(`Starting WebSocket server for live reload on port ${port}…`);
     const wss = new ws_1.WebSocket.Server({ port });
+    wss.on('listening', () => {
+        logger_1.Logger.info(`WebSocket server listening on ws://localhost:${port} (live reload)`);
+    });
+    wss.on('error', (err) => {
+        logger_1.Logger.error(`WebSocket server failed${err instanceof Error ? `: ${err.message}` : ''}`, err instanceof Error ? err : undefined);
+    });
     // Heartbeat function to mark a connection as alive.
     const heartbeat = function () {
         this.isAlive = true;
@@ -30,7 +37,7 @@ const createWebSocketServer = (...args_1) => __awaiter(void 0, [...args_1], void
         const extWs = ws;
         extWs.isAlive = true;
         extWs.send(JSON.stringify({ type: 'WELCOME' }));
-        extWs.on('error', (error) => logger_1.Logger.error('WebSocket error:', error));
+        extWs.on('error', (error) => logger_1.Logger.error('WebSocket client error:', error));
         extWs.on('pong', heartbeat);
     });
     // Periodically ping clients to ensure they are still connected
@@ -38,7 +45,7 @@ const createWebSocketServer = (...args_1) => __awaiter(void 0, [...args_1], void
         wss.clients.forEach((client) => {
             const extWs = client;
             if (!extWs.isAlive) {
-                logger_1.Logger.warn('Terminating inactive client');
+                logger_1.Logger.debug('Terminating inactive WebSocket client');
                 return client.terminate();
             }
             extWs.isAlive = false;
@@ -49,10 +56,9 @@ const createWebSocketServer = (...args_1) => __awaiter(void 0, [...args_1], void
     wss.on('close', () => {
         clearInterval(pingInterval);
     });
-    logger_1.Logger.success(`WebSocket server listening on ws://localhost:${port}`);
     // Return a function to broadcast a message to all connected clients
     return (message) => {
-        logger_1.Logger.success(`Broadcasting message to ${wss.clients.size} client(s)`);
+        logger_1.Logger.debug(`Broadcasting reload to ${wss.clients.size} WebSocket client(s)`);
         wss.clients.forEach((client) => {
             if (client.readyState === ws_1.WebSocket.OPEN) {
                 client.send(message);

package/dist/cache/build-cache.js

@@ -155,8 +155,8 @@ function getComponentFilePaths(handoff, componentId) {
             files.push(entries.scss);
             componentDirs.add((0, path_2.normalizePathForCompare)(path_1.default.dirname(entries.scss)));
         }
-        // Handle both 'template' (singular) and 'templates' (plural) entry types
-        const templatePath = entries.template || entries.templates;
+        // Handle template-style entries across renderer families
+        const templatePath = entries.template || entries.templates || entries.component || entries.story;
         if (templatePath) {
             try {
                 const stat = fs_extra_1.default.statSync(templatePath);
@@ -178,10 +178,19 @@ function getComponentFilePaths(handoff, componentId) {
     }
     // Find the config file path for this component using exact config filename + directory matching.
     const configPaths = handoff.getConfigFilePaths();
-    const expectedConfigFileNames = new Set([`${componentId}.json`, `${componentId}.js`, `${componentId}.cjs`]);
+    const expectedConfigFileNames = new Set([
+        `${componentId}.handoff.ts`,
+        `${componentId}.handoff.js`,
+        `${componentId}.handoff.cjs`,
+        `${componentId}.handoff.json`,
+        `${componentId}.json`,
+        `${componentId}.js`,
+        `${componentId}.cjs`,
+    ]);
     const matchingConfigPath = configPaths.find((configPath) => {
         const configFileName = path_1.default.basename(configPath);
-        if (!expectedConfigFileNames.has(configFileName)) {
+        const isModernDeclaration = /\.handoff\.(ts|js|cjs|json)$/.test(configFileName);
+        if (!expectedConfigFileNames.has(configFileName) && !isModernDeclaration) {
             return false;
         }
         if (componentDirs.size === 0) {
@@ -210,7 +219,7 @@ function computeComponentFileStates(handoff, componentId) {
         }
         let templateDirFiles;
         if (templateDir) {
-            templateDirFiles = yield (0, file_state_1.computeDirectoryState)(templateDir, ['.hbs', '.html', '.tsx', '.ts']);
+            templateDirFiles = yield (0, file_state_1.computeDirectoryState)(templateDir, ['.hbs', '.html', '.tsx', '.ts', '.jsx', '.js']);
         }
         return { files, templateDirFiles };
     });

package/dist/cli/create.js

@@ -85,22 +85,35 @@ const createDirectory = (dirPath) => {
  * Get mandatory templates based on whether examples are included
  * Uses different handoff config templates for blank vs. with-examples projects
  */
-const getMandatoryTemplates = (includeExamples) => [
-    { source: 'package.json.tpl', destination: 'package.json' },
-    {
-        source: includeExamples ? 'handoff.config.with-examples.js.tpl' : 'handoff.config.js.tpl',
-        destination: 'handoff.config.js'
-    },
-    { source: 'tsconfig.json.tpl', destination: 'tsconfig.json' },
-    { source: 'gitignore.tpl', destination: '.gitignore' },
-    { source: 'env.tpl', destination: '.env' },
-    { source: 'README.md.tpl', destination: 'README.md' },
-];
-// Example component files (only included when user opts for examples)
-const exampleTemplates = [
-    { source: 'components/button/Button.tsx.tpl', destination: 'components/button/Button.tsx', isExample: true },
-    { source: 'components/button/button.js.tpl', destination: 'components/button/button.js', isExample: true },
-];
+const getMandatoryTemplates = (includeExamples, languagePreference) => {
+    const configFormat = languagePreference;
+    const configTemplateBaseName = includeExamples ? 'handoff.config.with-examples' : 'handoff.config';
+    const configTemplateSource = `${configTemplateBaseName}.${configFormat === 'typescript' ? 'ts' : 'js'}.tpl`;
+    const configDestination = `handoff.config.${configFormat === 'typescript' ? 'ts' : 'js'}`;
+    const templates = [
+        { source: 'package.json.tpl', destination: 'package.json' },
+        {
+            source: configTemplateSource,
+            destination: configDestination,
+        },
+        { source: 'gitignore.tpl', destination: '.gitignore' },
+        { source: 'env.tpl', destination: '.env' },
+        { source: 'README.md.tpl', destination: 'README.md' },
+    ];
+    if (languagePreference === 'typescript') {
+        templates.push({ source: 'tsconfig.json.tpl', destination: 'tsconfig.json' });
+    }
+    return templates;
+};
+const getExampleTemplates = (languagePreference) => {
+    const declarationSuffix = languagePreference === 'typescript' ? 'ts' : 'js';
+    const declarationFile = `components/button/button.react.handoff.${declarationSuffix}.tpl`;
+    const componentFile = languagePreference === 'typescript' ? 'components/button/Button.tsx.tpl' : 'components/button/Button.jsx.tpl';
+    return [
+        { source: declarationFile, destination: `components/button/button.handoff.${languagePreference === 'typescript' ? 'ts' : 'js'}`, isExample: true },
+        { source: componentFile, destination: `components/button/Button.${languagePreference === 'typescript' ? 'tsx' : 'jsx'}`, isExample: true },
+    ];
+};
 /**
  * Render a template string by replacing placeholders with values
  */
@@ -109,18 +122,34 @@ const renderTemplate = (content, data) => {
         if (!(key in data)) {
             console.warn(chalk_1.default.yellow(`Warning: Unknown template placeholder '{{${key}}}'`));
         }
-        return data[key] || '';
+        const value = data[key];
+        return typeof value === 'string' ? value : '';
     });
 };
+const getDependenciesToInstall = (options) => {
+    const dependencies = ['handoff-app@latest'];
+    const devDependencies = [];
+    if (options.includeExamples) {
+        dependencies.push('react', 'react-dom');
+        if (options.languagePreference === 'typescript') {
+            devDependencies.push('@types/react', '@types/react-dom');
+        }
+    }
+    return { dependencies, devDependencies };
+};
 /**
- * Execute npm install
+ * Execute npm install for required dependencies.
  */
-const runNpmInstall = (projectPath) => __awaiter(void 0, void 0, void 0, function* () {
+const installDependencies = (projectPath, options) => __awaiter(void 0, void 0, void 0, function* () {
+    const { dependencies, devDependencies } = getDependenciesToInstall(options);
     const spinner = p.spinner();
     spinner.start('Installing dependencies...');
     return new Promise((resolve, reject) => {
         var _a;
-        const npmProcess = (0, child_process_1.spawn)('npm', ['install'], {
+        const installCommand = devDependencies.length
+            ? `npm install --save-prefix="^" ${dependencies.join(' ')} && npm install --save-dev --save-prefix="^" ${devDependencies.join(' ')}`
+            : `npm install --save-prefix="^" ${dependencies.join(' ')}`;
+        const npmProcess = (0, child_process_1.spawn)(installCommand, {
             cwd: projectPath,
             stdio: 'pipe',
             shell: true,
@@ -208,6 +237,19 @@ const create = () => __awaiter(void 0, void 0, void 0, function* () {
             process.exit(0);
         }
         const includeExamples = projectType === 'with-examples';
+        const languagePreferenceSelection = yield p.select({
+            message: 'Preferred project language (declarations, examples, and handoff.config)?',
+            options: [
+                { value: 'typescript', label: 'TypeScript', hint: 'Uses .handoff.ts and handoff.config.ts' },
+                { value: 'javascript', label: 'JavaScript', hint: 'Uses .handoff.js and handoff.config.js' },
+            ],
+            initialValue: 'typescript',
+        });
+        if (p.isCancel(languagePreferenceSelection)) {
+            p.cancel('Project creation cancelled.');
+            process.exit(0);
+        }
+        const languagePreference = languagePreferenceSelection;
         // Get Figma project ID
         p.log.step(chalk_1.default.blue('Figma Configuration'));
         const figmaProjectId = yield p.text({
@@ -233,6 +275,8 @@ const create = () => __awaiter(void 0, void 0, void 0, function* () {
             projectName: projectName,
             figmaProjectId: (figmaProjectId || '').trim(),
             figmaAccessToken: (figmaAccessToken || '').trim(),
+            languagePreference,
+            includeExamples,
         };
         // Create files
         const spinner = p.spinner();
@@ -243,8 +287,8 @@ const create = () => __awaiter(void 0, void 0, void 0, function* () {
         }
         // Combine mandatory templates with example templates based on user choice
         const templates = [
-            ...getMandatoryTemplates(includeExamples),
-            ...(includeExamples ? exampleTemplates : []),
+            ...getMandatoryTemplates(includeExamples, languagePreference),
+            ...(includeExamples ? getExampleTemplates(languagePreference) : []),
         ];
         try {
             for (const template of templates) {
@@ -267,7 +311,7 @@ const create = () => __awaiter(void 0, void 0, void 0, function* () {
             throw err;
         }
         // Install dependencies
-        yield runNpmInstall(projectPath);
+        yield installDependencies(projectPath, options);
         // Success message
         const nextSteps = [`cd ${projectName}`];
         if (figmaProjectId && figmaAccessToken) {

package/dist/cli/eject.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -13,6 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ejectTheme = exports.ejectPages = exports.ejectConfig = void 0;
+const p = __importStar(require("@clack/prompts"));
 const fs_extra_1 = __importDefault(require("fs-extra"));
 const path_1 = __importDefault(require("path"));
 const logger_1 = require("../utils/logger");
@@ -21,14 +45,31 @@ const logger_1 = require("../utils/logger");
  * @param handoff
  */
 const ejectConfig = (handoff) => __awaiter(void 0, void 0, void 0, function* () {
-    const configPath = path_1.default.resolve(path_1.default.join(handoff.workingPath, 'handoff.config.js'));
-    if (fs_extra_1.default.existsSync(configPath)) {
-        if (!handoff.force) {
-            logger_1.Logger.error(`Config file already exists. Use "--force" to overwrite.`);
-        }
+    const existingConfigNames = ['handoff.config.ts', 'handoff.config.js', 'handoff.config.cjs', 'handoff.config.json'];
+    const existingConfigPaths = existingConfigNames
+        .map((name) => path_1.default.resolve(path_1.default.join(handoff.workingPath, name)))
+        .filter((filePath) => fs_extra_1.default.existsSync(filePath));
+    if (existingConfigPaths.length > 0 && !handoff.force) {
+        logger_1.Logger.error(`Config file already exists. Use "--force" to overwrite.`);
+        return handoff;
+    }
+    const defaultFormat = fs_extra_1.default.existsSync(path_1.default.resolve(handoff.workingPath, 'tsconfig.json')) ? 'typescript' : 'javascript';
+    const formatSelection = yield p.select({
+        message: 'Which config format would you like to eject?',
+        options: [
+            { value: 'typescript', label: 'TypeScript', hint: 'Generates handoff.config.ts' },
+            { value: 'javascript', label: 'JavaScript', hint: 'Generates handoff.config.js' },
+        ],
+        initialValue: defaultFormat,
+    });
+    if (p.isCancel(formatSelection)) {
+        logger_1.Logger.warn('Config eject cancelled.');
+        return handoff;
     }
-    // load the template as a string
-    const template = fs_extra_1.default.readFileSync(path_1.default.resolve(handoff.modulePath, 'config/config.template.js'), 'utf8');
+    const useTypeScript = formatSelection === 'typescript';
+    const configPath = path_1.default.resolve(path_1.default.join(handoff.workingPath, useTypeScript ? 'handoff.config.ts' : 'handoff.config.js'));
+    const templatePath = path_1.default.resolve(handoff.modulePath, useTypeScript ? 'config/config.template.ts' : 'config/config.template.js');
+    const template = fs_extra_1.default.readFileSync(templatePath, 'utf8');
     fs_extra_1.default.writeFileSync(configPath, template);
     logger_1.Logger.success(`Config ejected to ${configPath}`);
     return handoff;