handoff-app 0.14.0 → 0.15.0

package/Changelog.md

@@ -6,6 +6,64 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.15.0] - 2024-11-05
+
+This release allows Figma foundation styles - Colors, Typography, and Effects
+to create variable references in component styles in CSS, SASS, and Style
+Dictionaries. It also adds shared style support in snippets to make it easier
+to structure and reuse styles across multiple large components.
+
+### Features
+
+- Figma foundation styles - Colors, Typography, and Effects - are now linked to
+  component styles in the tokens export. This allows you to use foundation styles
+  as variables in component styles in CSS, SASS, and Style Dictionaries.
+  - To enable, set `useVariables` to `true` in the `handoff.config.json` file.
+  - You can also enable variable support via the `.env` var 
+  `HANDOFF_USE_VARIABLES`. You can use a boolean or string ("true"/"false")
+  - When enabled, Handoff will create variable references in the component styles
+    for the foundation styles wherever possible instead of using the string value.
+  - For example a color foundation style `Blue` in the `Primary` color group
+    with value `#FF0000` will be referenced as `var(--color-primary-blue)` in
+    the component styles instead of `#FF0000`.
+  - This feature is disabled by default.
+- Added support for shared styles in snippets. Shared Styles exist to allow users
+  to separate styles used across multiple components from the styles unique to
+  each component.
+  - To use a shared style in a snippet, add a `{{ sharedStyles }}` to your snippet
+    HTML file. Handoff will replace this with the shared styles from the Figma
+    file.
+  - Created a `shared.scss` or `shared.css` file in the `integration/snippets`
+    directory to define the shared styles.
+  - If the shared styles are defined in a `shared.scss` file, Handoff will compile
+    the shared styles to CSS and include them in the snippet.
+
+### Changes
+
+- The default configuration now has a `useVariables` property set to `false` to
+  maintain backward compatibility.
+- The default snippets.html file now includes a `{{ sharedStyles }}` token to
+  support shared styles in snippets. This value will be empty if no shared styles
+  exists.
+
+## [0.14.1] - 2024-10-28
+
+This release introduces greater flexibility for custom integrations and general improvements to CLI handling.
+
+### Changes
+
+- Added support for custom integration paths with the `-i <path-to-integration>` CLI argument.
+  - Can be used with commands like `fetch`, `start`, `build:app`, etc.
+  - Defaults to the `integration` directory if the argument isn't specified, ensuring backward compatibility.
+
+### Improvements
+
+- Enhanced CLI command management:
+  - Switched to `yargs` for improved CLI parsing.
+  - Each command now has a dedicated handler file for better modularity.
+- Improved the docs app build process:
+  - Introduced a cleanup procedure that ensures only files present in the working directory are included in the final build.
+
 ## [0.14.0] - 2024-09-26
 
 This release enables creation of complex documentation pages, with storybook

package/dist/app.js

@@ -159,11 +159,26 @@ var transformMdx = function (src, dest, id) {
     mdx = "\n\n\n".concat(mdx, "\n\n\nimport {staticBuildMenu, getCurrentSection} from \"handoff-app/src/app/components/util\";\nimport { getClientConfig } from '@handoff/config';\nimport { getPreview } from \"handoff-app/src/app/components/util\";\n\nexport const getStaticProps = async () => {\n  // get previews for components on this page\n  const previews = getPreview();\n  const menu = staticBuildMenu();\n  const config = getClientConfig();\n  return {\n    props: {\n      previews,\n      menu,\n      config,\n      current: getCurrentSection(menu, \"/").concat(id, "\") ?? [],\n      title: \"").concat(title, "\",\n      description: \"").concat(description, "\",\n      image: \"").concat(image, "\",\n    },\n  };\n};\n\nexport const preview = (name) => {\n  return previews.components[name];\n};\n\nimport MarkdownLayout from \"handoff-app/src/app/components/MarkdownLayout\";\nexport default function Layout(props) {\n  return (\n    <MarkdownLayout\n      menu={props.menu}\n      metadata={{\n        metaDescription: \"").concat(metaDescription, "\",\n        metaTitle: \"").concat(metaTitle, "\",\n        title: \"").concat(title, "\",\n        weight: ").concat(weight, ",\n        image: \"").concat(image, "\",\n        menuTitle: \"").concat(menuTitle, "\",\n        enabled: ").concat(enabled, ",\n      }}\n      wide={").concat(wide, "}\n      allPreviews={props.previews}\n      config={props.config}\n      current={props.current}\n    >\n      {props.children}\n    </MarkdownLayout>\n  );\n\n}");
     fs_extra_1.default.writeFileSync(dest, mdx, 'utf-8');
 };
+var performCleanup = function (handoff) { return __awaiter(void 0, void 0, void 0, function () {
+    var appPath;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                appPath = getAppPath(handoff);
+                if (!fs_extra_1.default.existsSync(appPath)) return [3 /*break*/, 2];
+                return [4 /*yield*/, fs_extra_1.default.rm(appPath, { recursive: true })];
+            case 1:
+                _a.sent();
+                _a.label = 2;
+            case 2: return [2 /*return*/];
+        }
+    });
+}); };
 var prepareProjectApp = function (handoff) { return __awaiter(void 0, void 0, void 0, function () {
-    var srcPath, appPath, handoffProjectId, handoffAppBasePath, handoffWorkingPath, handoffModulePath, handoffExportPath, nextConfigPath, nextConfigContent;
-    var _a, _b;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    var srcPath, appPath, handoffProjectId, handoffAppBasePath, handoffWorkingPath, handoffIntegrationPath, handoffModulePath, handoffExportPath, nextConfigPath, handoffUseReferences, nextConfigContent;
+    var _a, _b, _c, _d;
+    return __generator(this, function (_e) {
+        switch (_e.label) {
             case 0:
                 srcPath = path_1.default.resolve(handoff.modulePath, 'src', 'app');
                 appPath = getAppPath(handoff);
@@ -171,35 +186,39 @@ var prepareProjectApp = function (handoff) { return __awaiter(void 0, void 0, vo
                 return [4 /*yield*/, fs_extra_1.default.promises.mkdir(appPath, { recursive: true })];
             case 1:
                 // Prepare project app dir
-                _c.sent();
+                _e.sent();
                 return [4 /*yield*/, fs_extra_1.default.copy(srcPath, appPath, { overwrite: true })];
             case 2:
-                _c.sent();
+                _e.sent();
                 return [4 /*yield*/, mergePublicDir(handoff)];
             case 3:
-                _c.sent();
+                _e.sent();
                 return [4 /*yield*/, mergeMDX(handoff)];
             case 4:
-                _c.sent();
+                _e.sent();
                 handoffProjectId = (_a = handoff.config.figma_project_id) !== null && _a !== void 0 ? _a : '';
                 handoffAppBasePath = (_b = handoff.config.app.base_path) !== null && _b !== void 0 ? _b : '';
                 handoffWorkingPath = path_1.default.resolve(handoff.workingPath);
+                handoffIntegrationPath = path_1.default.resolve(handoff.workingPath, (_c = handoff.config.integrationPath) !== null && _c !== void 0 ? _c : 'integration');
                 handoffModulePath = path_1.default.resolve(handoff.modulePath);
                 handoffExportPath = path_1.default.resolve(handoff.workingPath, handoff.exportsDirectory, handoff.config.figma_project_id);
                 nextConfigPath = path_1.default.resolve(appPath, 'next.config.mjs');
+                handoffUseReferences = (_d = handoff.config.useVariables) !== null && _d !== void 0 ? _d : false;
                 return [4 /*yield*/, fs_extra_1.default.readFile(nextConfigPath, 'utf-8')];
             case 5:
-                nextConfigContent = (_c.sent())
+                nextConfigContent = (_e.sent())
                     .replace(/basePath:\s+\'\'/g, "basePath: '".concat(handoffAppBasePath, "'"))
                     .replace(/HANDOFF_PROJECT_ID:\s+\'\'/g, "HANDOFF_PROJECT_ID: '".concat(handoffProjectId, "'"))
                     .replace(/HANDOFF_APP_BASE_PATH:\s+\'\'/g, "HANDOFF_APP_BASE_PATH: '".concat(handoffAppBasePath, "'"))
                     .replace(/HANDOFF_WORKING_PATH:\s+\'\'/g, "HANDOFF_WORKING_PATH: '".concat(handoffWorkingPath, "'"))
+                    .replace(/HANDOFF_INTEGRATION_PATH:\s+\'\'/g, "HANDOFF_INTEGRATION_PATH: '".concat(handoffIntegrationPath, "'"))
                     .replace(/HANDOFF_MODULE_PATH:\s+\'\'/g, "HANDOFF_MODULE_PATH: '".concat(handoffModulePath, "'"))
                     .replace(/HANDOFF_EXPORT_PATH:\s+\'\'/g, "HANDOFF_EXPORT_PATH: '".concat(handoffExportPath, "'"))
+                    .replace(/HANDOFF_USE_REFERENCES:\s+\'\'/g, "HANDOFF_USE_REFERENCES: '".concat(handoffUseReferences, "'"))
                     .replace(/%HANDOFF_MODULE_PATH%/g, handoffModulePath);
                 return [4 /*yield*/, fs_extra_1.default.writeFile(nextConfigPath, nextConfigContent)];
             case 6:
-                _c.sent();
+                _e.sent();
                 return [2 /*return*/, appPath];
         }
     });
@@ -217,9 +236,14 @@ var buildApp = function (handoff) { return __awaiter(void 0, void 0, void 0, fun
                 if (!fs_extra_1.default.existsSync(path_1.default.resolve(handoff.workingPath, handoff.exportsDirectory, handoff.config.figma_project_id, 'tokens.json'))) {
                     throw new Error('Tokens not exported. Run `handoff-app fetch` first.');
                 }
+                // Perform cleanup
+                return [4 /*yield*/, performCleanup(handoff)];
+            case 1:
+                // Perform cleanup
+                _a.sent();
                 // If we are building the app, ensure the integration is built first
                 return [4 /*yield*/, (0, pipeline_1.buildIntegrationOnly)(handoff)];
-            case 1:
+            case 2:
                 // If we are building the app, ensure the integration is built first
                 _a.sent();
                 // Build client preview styles
@@ -228,11 +252,11 @@ var buildApp = function (handoff) { return __awaiter(void 0, void 0, void 0, fun
                         .catch(function (error) {
                         throw new Error(error);
                     })];
-            case 2:
+            case 3:
                 // Build client preview styles
                 _a.sent();
                 return [4 /*yield*/, prepareProjectApp(handoff)];
-            case 3:
+            case 4:
                 appPath = _a.sent();
                 // Build app
                 return [4 /*yield*/, (0, next_build_1.nextBuild)({
@@ -243,7 +267,7 @@ var buildApp = function (handoff) { return __awaiter(void 0, void 0, void 0, fun
                         experimentalTurbo: false,
                         experimentalBuildMode: 'default',
                     }, appPath)];
-            case 4:
+            case 5:
                 // Build app
                 _a.sent();
                 outputRoot = path_1.default.resolve(handoff.workingPath, handoff.sitesDirectory);
@@ -266,8 +290,9 @@ var buildApp = function (handoff) { return __awaiter(void 0, void 0, void 0, fun
  */
 var watchApp = function (handoff) { return __awaiter(void 0, void 0, void 0, function () {
     var appPath, dev, hostname, port, app, handle, moduleOutput, chokidarConfig, debounce;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
+    var _a, _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
             case 0:
                 if (!fs_extra_1.default.existsSync(path_1.default.resolve(handoff.workingPath, handoff.exportsDirectory, handoff.config.figma_project_id, 'tokens.json'))) {
                     throw new Error('Tokens not exported. Run `handoff-app fetch` first.');
@@ -280,10 +305,10 @@ var watchApp = function (handoff) { return __awaiter(void 0, void 0, void 0, fun
                     })];
             case 1:
                 // Build client preview styles
-                _a.sent();
+                _c.sent();
                 return [4 /*yield*/, prepareProjectApp(handoff)];
             case 2:
-                appPath = _a.sent();
+                appPath = _c.sent();
                 // Include any changes made within the app source during watch
                 chokidar_1.default
                     .watch(path_1.default.resolve(handoff.modulePath, 'src', 'app'), {
@@ -410,9 +435,9 @@ var watchApp = function (handoff) { return __awaiter(void 0, void 0, void 0, fun
                         });
                     }); });
                 }
-                if (fs_extra_1.default.existsSync(path_1.default.resolve(handoff.workingPath, 'integration'))) {
-                    chokidar_1.default.watch(path_1.default.resolve(handoff.workingPath, 'integration'), chokidarConfig).on('all', function (event, file) { return __awaiter(void 0, void 0, void 0, function () {
-                        var _a;
+                if (fs_extra_1.default.existsSync(path_1.default.resolve(handoff.workingPath, (_a = handoff.config.integrationPath) !== null && _a !== void 0 ? _a : 'integration'))) {
+                    chokidar_1.default.watch(path_1.default.resolve(handoff.workingPath, (_b = handoff.config.integrationPath) !== null && _b !== void 0 ? _b : 'integration'), chokidarConfig).on('all', function (event, file) { return __awaiter(void 0, void 0, void 0, function () {
+                        var _a, sharedStyles;
                         return __generator(this, function (_b) {
                             switch (_b.label) {
                                 case 0:
@@ -422,25 +447,28 @@ var watchApp = function (handoff) { return __awaiter(void 0, void 0, void 0, fun
                                         case 'change': return [3 /*break*/, 1];
                                         case 'unlink': return [3 /*break*/, 1];
                                     }
-                                    return [3 /*break*/, 7];
+                                    return [3 /*break*/, 8];
                                 case 1:
-                                    if (!((file.includes('json') || file.includes('html') || file.includes('js') || file.includes('scss')) && !debounce)) return [3 /*break*/, 6];
+                                    if (!((file.includes('json') || file.includes('html') || file.includes('js') || file.includes('scss')) && !debounce)) return [3 /*break*/, 7];
                                     console.log(chalk_1.default.yellow("Integration ".concat(event, "ed. Handoff will rerender the integrations...")), file);
                                     debounce = true;
-                                    if (!file.includes('snippet')) return [3 /*break*/, 3];
-                                    return [4 /*yield*/, (0, preview_2.processSnippet)(handoff, path_1.default.basename(file))];
+                                    if (!file.includes('snippet')) return [3 /*break*/, 4];
+                                    return [4 /*yield*/, (0, preview_2.processSharedStyles)(handoff)];
                                 case 2:
+                                    sharedStyles = _b.sent();
+                                    return [4 /*yield*/, (0, preview_2.processSnippet)(handoff, path_1.default.basename(file), sharedStyles)];
+                                case 3:
                                     _b.sent();
-                                    return [3 /*break*/, 5];
-                                case 3: return [4 /*yield*/, handoff.integration()];
-                                case 4:
-                                    _b.sent();
-                                    _b.label = 5;
+                                    return [3 /*break*/, 6];
+                                case 4: return [4 /*yield*/, handoff.integration()];
                                 case 5:
-                                    debounce = false;
+                                    _b.sent();
                                     _b.label = 6;
-                                case 6: return [3 /*break*/, 7];
-                                case 7: return [2 /*return*/];
+                                case 6:
+                                    debounce = false;
+                                    _b.label = 7;
+                                case 7: return [3 /*break*/, 8];
+                                case 8: return [2 /*return*/];
                             }
                         });
                     }); });

package/dist/cli/eject.js

@@ -87,10 +87,10 @@ var makeIntegration = function (handoff) { return __awaiter(void 0, void 0, void
                 fs_extra_1.default.copySync(integrationPath, workingPath, { overwrite: handoff.force ? true : false });
                 if (handoff.force)
                     handoff.force = false;
+                console.log(chalk_1.default.green("Integration has been successfully created! Path: ".concat(workingPath)));
                 return [4 /*yield*/, (0, pipeline_1.buildIntegrationOnly)(handoff)];
             case 1:
                 _a.sent();
-                console.log(chalk_1.default.green("Integration has been successfully created! Path: ".concat(workingPath)));
                 return [2 /*return*/, handoff];
         }
     });

package/dist/cli.js

@@ -15,48 +15,13 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-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) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var arg_1 = __importDefault(require("arg"));
-var _1 = __importDefault(require("."));
+var yargs_1 = __importDefault(require("yargs/yargs"));
+var helpers_1 = require("yargs/helpers");
+var commands_1 = require("./commands");
 var HandoffCliError = /** @class */ (function (_super) {
     __extends(HandoffCliError, _super);
     function HandoffCliError(message) {
@@ -69,18 +34,11 @@ var HandoffCliError = /** @class */ (function (_super) {
     }
     return HandoffCliError;
 }(Error));
-var usage = "Usage: handoff-app <cmd> <opts>\n\nCommands:\n  fetch [opts] - Fetches the design tokens from the design system\n\n  build - Using the current tokens, build various outputs\n    build:app [opts] - Builds the design system static application\n    build:integration [opts] - Builds current selected integration, styles and previews\n    build:recipe - Builds a recipe file based on the integration that is curretnly used (if any)\n    build:snippets <name> [opts] - Builds the snippets for the current integration. Pass a name to build a specific snippet.\n\n  start [opts] - Starts the design system in development mode\n\n  make\n    make:exportable <type> <name> [opts] - Creates a new schema\n    make:template <component> <state> [opts] - Creates a new template\n    make:page <name> <parent> [opts] - Creates a new custom page\n    make:integration - Creates a new integration based on the provided Bootstrap 5.3 template\n    make:snippet - <name> Creates a new html code snippet that you can embed in your documentation\n\n  eject - Ejects the default entire configuration to the current directory\n    eject:config [opts] - Ejects the default configuration to the current directory\n    eject:integration [opts] - Ejects the default integration to the current directory\n    eject:exportables [opts] - Ejects the default exportables to the current directory\n    eject:pages [opts] - Ejects the default pages to the current directory\n    eject:theme [opts] - Ejects the currently selected theme to theme/main.scss\n\n  rename:snippet <source> <destination> [opts] - Renames a snippet from source to destination and update any references.\n\nOptions:\n  -c, --config [file]      Define the path to the config file\n  -d, --debug              Show debug logs\n  -h, --help               Show this help message\n  -v, --version            Show the version number\n";
-/**
- * Show the help message
- */
-var showHelp = function () {
-    cliError(usage, 2);
-};
 /**
  * Show the help message
  */
 var showVersion = function () {
-    cliError('Handoff App - 0.14.0', 2);
+    return 'Handoff App - 0.15.0';
 };
 /**
  * Define a CLI error
@@ -94,170 +52,18 @@ var cliError = function (msg, exitCode) {
     err.exitCode = exitCode;
     throw err;
 };
-var watching = false;
-var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, void 0, function () {
-    var args, handoff, _a, snippet, source, destination, type, name_1, templateComponent, templateState, pageName, pageParent, snippetName, e_1;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
-            case 0:
-                _b.trys.push([0, 24, , 25]);
-                args = (0, arg_1.default)({
-                    '--help': Boolean,
-                    '-h': '--help',
-                    '--version': Boolean,
-                    '-v': '--version',
-                    '--config': String,
-                    '-c': '--config',
-                    '--debug': Boolean,
-                    '-d': '--debug',
-                    '--force': Boolean,
-                    '-f': '--force',
-                }, {
-                    permissive: false,
-                    argv: argv,
-                });
-                if (args['--help']) {
-                    return [2 /*return*/, showHelp()];
-                }
-                if (args['--version']) {
-                    return [2 /*return*/, showVersion()];
-                }
-                handoff = new _1.default();
-                if (args['--debug']) {
-                    handoff.debug = true;
-                }
-                if (args['--force']) {
-                    handoff.force = true;
-                }
-                _a = args._[0];
-                switch (_a) {
-                    case 'fetch': return [3 /*break*/, 1];
-                    case 'build:app': return [3 /*break*/, 2];
-                    case 'start': return [3 /*break*/, 4];
-                    case 'dev': return [3 /*break*/, 5];
-                    case 'build:integration': return [3 /*break*/, 6];
-                    case 'build:snippets': return [3 /*break*/, 7];
-                    case 'rename:snippet': return [3 /*break*/, 8];
-                    case 'build:recipe': return [3 /*break*/, 9];
-                    case 'eject': return [3 /*break*/, 10];
-                    case 'eject:config': return [3 /*break*/, 11];
-                    case 'eject:integration': return [3 /*break*/, 12];
-                    case 'eject:exportables': return [3 /*break*/, 13];
-                    case 'eject:theme': return [3 /*break*/, 14];
-                    case 'eject:pages': return [3 /*break*/, 15];
-                    case 'make': return [3 /*break*/, 16];
-                    case 'make:exportable': return [3 /*break*/, 17];
-                    case 'make:template': return [3 /*break*/, 18];
-                    case 'make:page': return [3 /*break*/, 19];
-                    case 'make:snippet': return [3 /*break*/, 20];
-                    case 'make:integration': return [3 /*break*/, 21];
-                }
-                return [3 /*break*/, 22];
-            case 1: return [2 /*return*/, handoff.fetch()];
-            case 2: return [4 /*yield*/, handoff.build()];
-            case 3:
-                _b.sent();
-                return [2 /*return*/, handoff];
-            case 4:
-                watching = true;
-                return [2 /*return*/, handoff.start()];
-            case 5:
-                watching = true;
-                return [2 /*return*/, handoff.dev()];
-            case 6: return [2 /*return*/, handoff.integration()];
-            case 7:
-                snippet = args._[1];
-                return [2 /*return*/, handoff.snippet(snippet)];
-            case 8:
-                source = args._[1];
-                if (!source) {
-                    cliError("You must specify a source snippet name", 2);
-                }
-                destination = args._[2];
-                if (!destination) {
-                    cliError("You must specify a destination snippet name", 2);
-                }
-                return [2 /*return*/, handoff.renameSnippet(source, destination)];
-            case 9: return [2 /*return*/, handoff.recipe()];
-            case 10:
-                cliError("Eject commands will eject the default configuration into the working directory so you can customize it.\n\nEject must have a subcommand. Did you mean:\n  - eject:config\n  - eject:exportables\n  - eject:integration\n  - eject:docs\n  - eject:theme.", 2);
-                return [3 /*break*/, 23];
-            case 11: return [2 /*return*/, handoff.ejectConfig()];
-            case 12: return [2 /*return*/, handoff.ejectIntegration()];
-            case 13: return [2 /*return*/, handoff.ejectExportables()];
-            case 14: return [2 /*return*/, handoff.ejectTheme()];
-            case 15: return [2 /*return*/, handoff.ejectPages()];
-            case 16:
-                cliError("Make commands create configuration files in your working root and scaffold up the appropriate folder structure if needed.\n\n  Make must have a subcommand. Did you mean:\n    - make:template\n    - make:exportable\n    - make:page\n    - make:integration\n    - make:snippet", 2);
-                return [3 /*break*/, 23];
-            case 17:
-                type = args._[1];
-                if (!type) {
-                    cliError("You must specify a type of 'component' or 'foundation'", 2);
-                }
-                name_1 = args._[2];
-                if (!name_1) {
-                    cliError("You must specify a name for the exportable", 2);
-                }
-                if (!/^[a-z0-9]+$/i.test(name_1)) {
-                    cliError("Exportable name must be alphanumeric and may contain dashes or underscores", 2);
-                }
-                return [2 /*return*/, handoff.makeExportable(type, name_1)];
-            case 18:
-                templateComponent = args._[1];
-                if (!templateComponent) {
-                    cliError("You must supply a component name", 2);
-                }
-                if (!/^[a-z0-9]+$/i.test(templateComponent)) {
-                    cliError("Template component must be alphanumeric and may contain dashes or underscores", 2);
-                }
-                templateState = args._[2];
-                if (templateState && !/^[a-z0-9]+$/i.test(templateComponent)) {
-                    cliError("Template state must be alphanumeric and may contain dashes or underscores", 2);
-                }
-                return [2 /*return*/, handoff.makeTemplate(templateComponent, templateState)];
-            case 19:
-                pageName = args._[1];
-                if (!pageName) {
-                    cliError("You must supply a page name", 2);
-                }
-                if (!/^[a-z0-9]+$/i.test(pageName)) {
-                    cliError("Page name must be alphanumeric and may contain dashes or underscores", 2);
-                }
-                pageParent = args._[2];
-                if (pageParent && !/^[a-z0-9]+$/i.test(pageParent)) {
-                    cliError("Page parent must be alphanumeric and may contain dashes or underscores", 2);
-                }
-                return [2 /*return*/, handoff.makePage(pageName, pageParent)];
-            case 20:
-                snippetName = args._[1];
-                if (!snippetName) {
-                    cliError("You must supply a snippet name", 2);
-                }
-                if (!/^[a-z0-9]+$/i.test(snippetName)) {
-                    cliError("Snippet name must be alphanumeric and may contain dashes or underscores", 2);
-                }
-                return [2 /*return*/, handoff.makeSnippet(snippetName)];
-            case 21: return [2 /*return*/, handoff.makeIntegration()];
-            case 22: return [2 /*return*/, showHelp()];
-            case 23: return [3 /*break*/, 25];
-            case 24:
-                e_1 = _b.sent();
-                if (e_1.message.indexOf('Unknown or unexpected option') === -1)
-                    throw e_1;
-                return [2 /*return*/, cliError(e_1.message + "\n".concat(usage), 2)];
-            case 25: return [2 /*return*/];
-        }
-    });
-}); };
-run(process.argv.slice(2), process.stdout, process.stderr)
-    .then(function () {
-    if (!watching) {
-        process.exit(0);
+var run = function () {
+    try {
+        var yargsInstance_1 = (0, yargs_1.default)((0, helpers_1.hideBin)(process.argv));
+        commands_1.commands.forEach(function (command) {
+            yargsInstance_1.command(command);
+        });
+        yargsInstance_1.help().version(showVersion()).strict().parse();
     }
-})
-    .catch(function (e) {
-    if (!e.silent)
-        console.error(e.messageOnly ? e.message : e);
-    process.exit(e.exitCode || 1);
-});
+    catch (e) {
+        if (e.message.indexOf('Unknown or unexpected option') === -1)
+            throw e;
+        return cliError(e.message, 2);
+    }
+};
+run();

package/dist/commands/build/app.d.ts

@@ -0,0 +1,6 @@
+import { CommandModule } from 'yargs';
+import { SharedArgs } from '../types';
+export interface BuildAppArgs extends SharedArgs {
+}
+declare const command: CommandModule<{}, BuildAppArgs>;
+export default command;

package/dist/commands/build/app.js

@@ -0,0 +1,64 @@
+"use strict";
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("../utils");
+var __1 = __importDefault(require("../../"));
+var command = {
+    command: 'build:app',
+    describe: 'Build the documentation application',
+    builder: function (yargs) {
+        return (0, utils_1.getSharedOptions)(yargs);
+    },
+    handler: function (args) { return __awaiter(void 0, void 0, void 0, function () {
+        var handoff;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    handoff = new __1.default(args.debug, args.force, { integrationPath: args.integration });
+                    return [4 /*yield*/, handoff.build()];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); },
+};
+exports.default = command;

package/dist/commands/build/integration.d.ts

@@ -0,0 +1,6 @@
+import { CommandModule } from 'yargs';
+import { SharedArgs } from '../types';
+export interface BuildIntegrationArgs extends SharedArgs {
+}
+declare const command: CommandModule<{}, BuildIntegrationArgs>;
+export default command;