@haxtheweb/create 10.0.8 → 11.0.0

package/dist/lib/programs/site.js

@@ -14,6 +14,7 @@ exports.siteThemeList = siteThemeList;
 var _promises = require("node:timers/promises");
 var fs = _interopRequireWildcard(require("node:fs"));
 var path = _interopRequireWildcard(require("node:path"));
+var _open = _interopRequireDefault(require("open"));
 var p = _interopRequireWildcard(require("@clack/prompts"));
 var ejs = _interopRequireWildcard(require("ejs"));
 var _picocolors = _interopRequireDefault(require("picocolors"));
@@ -27,8 +28,6 @@ var _microFrontendRegistry = require("../micro-frontend-registry.js");
 var haxcmsNodejsCli = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs/dist/cli.js"));
 var hax = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs"));
 var josfile = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs/dist/lib/JSONOutlineSchema.js"));
-var child_process = _interopRequireWildcard(require("child_process"));
-var util = _interopRequireWildcard(require("node:util"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -40,29 +39,8 @@ globalThis.MicroFrontendRegistryConfig = {
 _microFrontendRegistry.MicroFrontendRegistry.enableServices(['core', 'haxcms', 'experimental']);
 const JSONOutlineSchema = josfile.default;
 const HAXCMS = hax.HAXCMS;
-const exec = util.promisify(child_process.exec);
-const spawn = child_process.spawn;
-async function interactiveExec(command, args = [], options = {}) {
-  return new Promise((resolve, reject) => {
-    process.env.NODE_NO_WARNINGS = 1;
-    const child = spawn(command, args, {
-      stdio: 'inherit',
-      ...options
-    });
-    child.on('exit', code => {
-      if (code === 0) {
-        resolve();
-      } else {
-        reject(new Error(`Command failed with code ${code}`));
-      }
-    });
-    child.on('error', err => {
-      reject(err);
-    });
-  });
-}
 var sysSurge = true;
-exec('surge --version', error => {
+(0, _utils.exec)('surge --version', error => {
   if (error) {
     sysSurge = false;
   }
@@ -100,6 +78,9 @@ function siteActions() {
   return [{
     value: 'start',
     label: "Launch site in browser (http://localhost)"
+  }, {
+    value: 'serve',
+    label: "Launch site in development mode"
   }, {
     value: 'node:stats',
     label: "Node Stats / data"
@@ -127,6 +108,9 @@ function siteActions() {
   }, {
     value: 'site:theme',
     label: "Change theme"
+  }, {
+    value: 'site:element',
+    label: "Add new Lit component to custom/src"
   }, {
     value: 'site:html',
     label: "Full site as HTML"
@@ -148,6 +132,12 @@ function siteActions() {
   }, {
     value: 'recipe:play',
     label: "Play recipe file"
+  }, {
+    value: 'issue:general',
+    label: "Issue: Submit an issue or suggestion"
+  }, {
+    value: 'issue:theme',
+    label: "Issue: Suggest custom theme"
   }];
 }
 async function siteCommandDetected(commandRun) {
@@ -375,9 +365,23 @@ async function siteCommandDetected(commandRun) {
         try {
           if (!commandRun.options.quiet) {
             p.intro(`Starting server.. `);
-            p.intro(`⌨️  To stop server, press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C `)))}`);
+            p.note(`🚀 Server running at: ${_picocolors.default.underline(_picocolors.default.cyan(`http://localhost:3000`))}
+⌨️  To stop server, press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C or CTRL + BREAK `)))}`);
+          }
+          await (0, _utils.exec)(`cd ${activeHaxsite.directory} && npx @haxtheweb/haxcms-nodejs`);
+        } catch (e) {
+          (0, _logging.log)(e.stderr);
+        }
+        break;
+      case "serve":
+        try {
+          if (!commandRun.options.quiet) {
+            p.intro(`Starting server in development mode.. `);
+            p.note(`🚀 Server running at: ${_picocolors.default.underline(_picocolors.default.cyan(`http://localhost:3000`))}
+💻 Site will live reload on changes to ${_picocolors.default.bold('custom/src')}
+⌨️  To stop server, press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C or CTRL + BREAK `)))}`);
           }
-          await exec(`cd ${activeHaxsite.directory} && npx @haxtheweb/haxcms-nodejs`);
+          await (0, _utils.exec)(`cd ${activeHaxsite.directory} && NODE_ENV=development npx @haxtheweb/haxcms-nodejs`);
         } catch (e) {
           (0, _logging.log)(e.stderr);
         }
@@ -756,7 +760,7 @@ async function siteCommandDetected(commandRun) {
       case "site:sync":
         // @todo git sync might need other arguments / be combined with publishing
         try {
-          await exec(`cd ${activeHaxsite.directory} && git pull && git push`);
+          await (0, _utils.exec)(`cd ${activeHaxsite.directory} && git pull && git push`);
         } catch (e) {
           (0, _logging.log)(e.stderr);
         }
@@ -845,6 +849,135 @@ async function siteCommandDetected(commandRun) {
           (0, _logging.log)(e.stderr);
         }
         break;
+      case "site:element":
+        try {
+          const reservedNames = ["annotation-xml", "color-profile", "font-face", "font-face-src", "font-face-uri", "font-face-format", "font-face-name", "missing-glyph"];
+          activeHaxsite = await hax.systemStructureContext();
+          if (!commandRun.options.name) {
+            commandRun.options.name = await p.text({
+              message: 'Component name:',
+              placeholder: 'my-component',
+              required: true,
+              validate: value => {
+                if (!value) {
+                  return "Name is required (tab writes default)";
+                }
+                if (reservedNames.includes(value)) {
+                  return `Reserved name ${_picocolors.default.bold(value)} cannot be used`;
+                }
+                if (value.toLocaleLowerCase() !== value) {
+                  return "Name must be lowercase";
+                }
+                if (/^\d/.test(value)) {
+                  return "Name cannot start with a number";
+                }
+                if (/[`~!@#$%^&*()_=+\[\]{}|;:\'",<.>\/?\\]/.test(value)) {
+                  return "No special characters allowed in name";
+                }
+                if (value.indexOf(' ') !== -1) {
+                  return "No spaces allowed in name";
+                }
+                if (value.indexOf('-') === -1 || value.replace('--', '') !== value || value[0] === '-' || value[value.length - 1] === '-') {
+                  return "Name must include at least one `-` and must not start or end name.";
+                }
+                // Check for any other syntax errors
+                if (!/^[a-z][a-z0-9.\-]*\-[a-z0-9.\-]*$/.test(value)) {
+                  return `Name must follow the syntax ${_picocolors.default.bold("my-component")}`;
+                }
+                // assumes auto was selected in CLI
+                let joint = process.cwd();
+                if (commandRun.options.path) {
+                  joint = commandRun.options.path;
+                }
+                if (fs.existsSync(path.join(joint, value))) {
+                  return `${path.join(joint, value)} exists, rename this project`;
+                }
+              }
+            });
+          } else {
+            let value = commandRun.options.name;
+            if (!value) {
+              console.error(_picocolors.default.red("Name is required (tab writes default)"));
+              process.exit(1);
+            }
+            if (reservedNames.includes(value)) {
+              console.error(_picocolors.default.red(`Reserved name ${_picocolors.default.bold(value)} cannot be used`));
+              process.exit(1);
+            }
+            if (value.toLocaleLowerCase() !== value) {
+              console.error(_picocolors.default.red("Name must be lowercase"));
+              process.exit(1);
+            }
+            if (/^\d/.test(value)) {
+              console.error(_picocolors.default.red("Name cannot start with a number"));
+              process.exit(1);
+            }
+            if (/[`~!@#$%^&*()_=+\[\]{}|;:\'",<.>\/?\\]/.test(value)) {
+              console.error(_picocolors.default.red("No special characters allowed in name"));
+              process.exit(1);
+            }
+            if (value.indexOf(' ') !== -1) {
+              console.error(_picocolors.default.red("No spaces allowed in name"));
+              process.exit(1);
+            }
+            if (value.indexOf('-') === -1 || value.replace('--', '') !== value || value[0] === '-' || value[value.length - 1] === '-') {
+              console.error(_picocolors.default.red("Name must include at least one `-` and must not start or end name."));
+              process.exit(1);
+            }
+            // Check for any other syntax errors
+            if (!/^[a-z][a-z0-9.\-]*\-[a-z0-9.\-]*$/.test(value)) {
+              console.error(_picocolors.default.red(`Name must follow the syntax ${_picocolors.default.bold("my-component")}`));
+              process.exit(1);
+            }
+            // assumes auto was selected in CLI
+            let joint = process.cwd();
+            if (commandRun.options.path) {
+              joint = commandRun.options.path;
+            }
+            if (fs.existsSync(path.join(joint, value))) {
+              console.error(_picocolors.default.red(`${path.join(joint, value)} exists, rename this project`));
+              process.exit(1);
+            }
+          }
+          const project = {
+            name: commandRun.options.name,
+            path: activeHaxsite.directory,
+            className: (0, _utils.dashToCamel)(commandRun.options.name),
+            year: new Date().getFullYear()
+          };
+          if (!project.author) {
+            try {
+              let value = await (0, _utils.exec)(`git config user.name`);
+              project.author = value.stdout.trim();
+            } catch (e) {
+              (0, _logging.log)(`
+                   git user name not configured. Run the following to do this:\n
+                   git config --global user.name "namehere"\n
+                   git config --global user.email "email@here`, 'debug');
+            }
+          }
+          const filePath = `${project.path}/custom/src/${project.name}.js`;
+          await fs.copyFileSync(`${process.mainModule.path}/templates/generic/sitecomponent.js`, filePath);
+          const ejsString = ejs.fileLoader(filePath, 'utf8');
+          let content = ejs.render(ejsString, project);
+          // file written successfully  
+          fs.writeFileSync(filePath, content);
+          if (!commandRun.options.npmClient) {
+            commandRun.options.npmClient = 'npm';
+          }
+          if (fs.existsSync(`${project.path}/custom/custom-elements.json`)) {
+            await (0, _utils.exec)(`cd custom && ${commandRun.options.npmClient} run analyze`);
+          }
+          p.note(`🧙  Add to another web component (.js): ${_picocolors.default.underline(_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`import ./${project.name}.js`))))}`);
+          // at least a second to see the message print at all
+          await (0, _promises.setTimeout)(1000);
+        } catch (e) {
+          (0, _logging.log)(e.stderr);
+          // Original ejs.render error checking
+          console.error(_picocolors.default.red(process.cwd()));
+          console.error(_picocolors.default.red(e));
+        }
+        break;
       case "site:surge":
         try {
           // attempt to install; implies they asked to publish with surge but
@@ -852,7 +985,7 @@ async function siteCommandDetected(commandRun) {
           if (!sysSurge) {
             let s = p.spinner();
             s.start((0, _statements.merlinSays)('Installing Surge.sh globally so we can publish'));
-            let execOutput = await exec(`npm install --global surge`);
+            let execOutput = await (0, _utils.exec)(`npm install --global surge`);
             s.stop((0, _statements.merlinSays)('surge.sh installed globally'));
             (0, _logging.log)(execOutput.stdout.trim());
             sysSurge = true;
@@ -861,7 +994,7 @@ async function siteCommandDetected(commandRun) {
           if (commandRun.options.domain && commandRun.options.y) {
             let s = p.spinner();
             s.start((0, _statements.merlinSays)('Sending site to Surge.sh ..'));
-            execOutput = await exec(`cd ${activeHaxsite.directory} && surge . ${commandRun.options.domain}`);
+            execOutput = await (0, _utils.exec)(`cd ${activeHaxsite.directory} && surge . ${commandRun.options.domain}`);
             (0, _logging.log)(execOutput.stdout.trim());
             s.stop((0, _statements.merlinSays)(`Site published: https://${commandRun.options.domain}`));
           } else {
@@ -870,7 +1003,7 @@ async function siteCommandDetected(commandRun) {
             if (commandRun.options.domain) {
               surgeArgs.push(commandRun.options.domain);
             }
-            execOutput = await interactiveExec('surge', surgeArgs, {
+            execOutput = await (0, _utils.interactiveExec)('surge', surgeArgs, {
               cwd: activeHaxsite.directory
             });
             (0, _logging.log)((0, _statements.merlinSays)(`Site published: https://${commandRun.options.domain}`));
@@ -1013,14 +1146,14 @@ async function siteCommandDetected(commandRun) {
                 let commandMatch = siteActions().filter(action => action.value === commandList[i].split(' ')[2]);
                 // if we found a command that means it is a valid command to run against the site
                 if (commandMatch.length > 0) {
-                  await exec(`${commandList[i]} --y --no-i --auto --quiet${rootDir}`);
+                  await (0, _utils.exec)(`${commandList[i]} --y --no-i --auto --quiet${rootDir}`);
                 }
                 // 1st command won't match as the argument creates a new site
                 // but ensure we don't have a site context prior to running this
                 // or we'll get a site in a site with the same name which is not
                 // the desired result
                 else if (!(await hax.systemStructureContext())) {
-                  await exec(`${commandList[i]} --y --no-i --auto --quiet --no-extras`);
+                  await (0, _utils.exec)(`${commandList[i]} --y --no-i --auto --quiet --no-extras`);
                   // site will have been created, obtain the site name and set root so
                   // the other commands get piped into it correctly
                   rootDir = ` --root ${commandList[i].split(' ')[2]}`;
@@ -1032,6 +1165,40 @@ async function siteCommandDetected(commandRun) {
           }
         }
         break;
+      case "issue:general":
+        // open the issues
+        p.intro(`${_picocolors.default.bgBlue(_picocolors.default.white(` Submit issue / suggestion on Github `))}`);
+        p.intro(`${_picocolors.default.bgBlue(_picocolors.default.white(` Opening in browser `))}`);
+        await (0, _open.default)("https://github.com/haxtheweb/issues/issues/new");
+        p.outro(`${_picocolors.default.bgBlue(_picocolors.default.white(` https://github.com/haxtheweb/issues/issues/new `))}`);
+        break;
+      case "issue:theme":
+        // open the issues
+        p.intro(`${_picocolors.default.bgBlue(_picocolors.default.white(` Submit custom theme on Github `))}`);
+        p.intro(`${_picocolors.default.bgBlue(_picocolors.default.white(` Opening in browser `))}`);
+        let allContents = '';
+        fs.readdir(`${activeHaxsite.directory}/custom/src`, (err, files) => {
+          if (err) {
+            console.error('Error reading directory:', err);
+            return;
+          }
+          files.forEach((file, index) => {
+            const filePath = path.join(`${activeHaxsite.directory}/custom/src`, file);
+            if (fs.lstatSync(filePath).isFile()) {
+              const content = fs.readFileSync(filePath, 'utf-8');
+              // append file name as a JS comment
+              allContents += `\n// FILENAME: ${file}\n` + content + '\n'; // Add newline between files if desired
+            }
+            if (index === files.length - 1) {
+              console.log('Combined contents of all files:\n', allContents);
+            }
+          });
+        });
+        console.log(allContents);
+        await (0, _open.default)(`https://github.com/haxtheweb/issues/issues/new?template=new-design.md`);
+        p.outro(`${_picocolors.default.bgBlue(_picocolors.default.white(` Copy the output of the console into the issue's js template area `))}`);
+        p.outro(`${_picocolors.default.bgBlue(_picocolors.default.white(` https://github.com/haxtheweb/issues/issues/new?template=new-design.md `))}`);
+        break;
       case "quit":
         // quit
         process.exit(0);
@@ -1311,7 +1478,7 @@ async function siteProcess(commandRun, project, port = '3000') {
   }
   if (project.gitRepo && !commandRun.options.isMonorepo) {
     try {
-      await exec(`cd ${project.path}/${project.name} && git init && git add -A && git commit -m "first commit" && git branch -M main${project.gitRepo ? ` && git remote add origin ${project.gitRepo}` : ''}`);
+      await (0, _utils.exec)(`cd ${project.path}/${project.name} && git init && git add -A && git commit -m "first commit" && git branch -M main${project.gitRepo ? ` && git remote add origin ${project.gitRepo}` : ''}`);
     } catch (e) {}
   }
   // ensure dot files is there because it doesn't copy for some reason for sites :\
@@ -1341,13 +1508,13 @@ ${_picocolors.default.underline(_picocolors.default.cyan(`http://localhost:${por
 📘  VS Code Project: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`code ${optionPath}`)))}
 🚧  Launch later: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${command}`)))}
 
-⌨️  To resume 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C `)))}
+⌨️  To resume 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C or CTRL + BREAK `)))}
 `);
     }
     // at least a second to see the message print at all
     await (0, _promises.setTimeout)(1000);
     try {
-      await exec(`cd ${optionPath} && ${command}`);
+      await (0, _utils.exec)(`cd ${optionPath} && ${command}`);
     } catch (e) {
       // don't log bc output is weird
     }
@@ -1384,17 +1551,14 @@ async function siteThemeList(coreOnly = true, directory = null) {
       value: 'clean-portfolio-theme',
       label: 'Clean Portfolio'
     }, {
-      value: 'haxor-slevin',
-      label: 'Haxor Blog'
+      value: 'journey-theme',
+      label: 'Journey'
     }, {
       value: 'polaris-flex-theme',
-      label: 'Polaris - Flex'
+      label: 'Flex'
     }, {
       value: 'polaris-flex-sidebar',
-      label: 'Polaris - Flex Sidebar'
-    }, {
-      value: 'polaris-invent-theme',
-      label: 'Polaris - Invent'
+      label: 'Flex Sidebar'
     }, {
       value: 'custom-theme',
       label: 'Create Custom Theme'
@@ -1456,7 +1620,7 @@ async function customSiteTheme(commandRun, project) {
   }
   if (!project.author) {
     try {
-      let value = await exec(`git config user.name`);
+      let value = await (0, _utils.exec)(`git config user.name`);
       project.author = value.stdout.trim();
     } catch (e) {
       (0, _logging.log)(`
@@ -1493,7 +1657,7 @@ async function customSiteTheme(commandRun, project) {
   }
 
   // import theme to custom.js
-  await fs.appendFileSync(`${sitePath}/custom/src/custom.js`, `\n import "./${project.customThemeName}.js"`);
+  await fs.appendFileSync(`${sitePath}/custom/src/custom.js`, `\n import "./${project.customThemeName}.js";`);
   var activeHaxsite = await hax.systemStructureContext(sitePath);
 
   // add theme to site.json
@@ -1506,7 +1670,7 @@ async function customSiteTheme(commandRun, project) {
   activeHaxsite.manifest.save(false);
 
   // install and build theme dependencies
-  await exec(`cd ${sitePath}/custom/ && ${commandRun.options.npmClient} install && ${commandRun.options.npmClient} run build && ${commandRun.options.npmClient} run analyze && cd ${sitePath}`);
+  await (0, _utils.exec)(`cd ${sitePath}/custom/ && ${commandRun.options.npmClient} install && ${commandRun.options.npmClient} run build && ${commandRun.options.npmClient} run analyze && cd ${sitePath}`);
 }
 
 // @fork of the hax core util for this so that we avoid api difference between real dom and parse nodejs dom

package/dist/lib/programs/webcomponent.js

@@ -18,15 +18,12 @@ var _statements = require("../statements.js");
 var _logging = require("../logging.js");
 var _utils = require("../utils.js");
 var hax = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs"));
-var child_process = _interopRequireWildcard(require("child_process"));
-var util = _interopRequireWildcard(require("node:util"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const HAXCMS = hax.HAXCMS;
-const exec = util.promisify(child_process.exec);
 let sysGit = true;
-exec('git --version', error => {
+(0, _utils.exec)('which git', error => {
   if (error) {
     sysGit = false;
   }
@@ -228,7 +225,7 @@ async function webcomponentProcess(commandRun, project, port = "8000") {
   s.stop('Files are now awesome!');
   if (project.gitRepo && !commandRun.options.isMonorepo) {
     try {
-      await exec(`cd ${project.path}/${project.name} && git init && git add -A && git commit -m "first commit" && git branch -M main${project.gitRepo ? ` && git remote add origin ${project.gitRepo}` : ''}`);
+      await (0, _utils.exec)(`cd ${project.path}/${project.name} && git init && git add -A && git commit -m "first commit" && git branch -M main${project.gitRepo ? ` && git remote add origin ${project.gitRepo}` : ''}`);
     } catch (e) {}
   }
   // options for install, git and other extras
@@ -238,7 +235,7 @@ async function webcomponentProcess(commandRun, project, port = "8000") {
     try {
       // monorepos install from top but then still need to launch from local location
       if (!commandRun.options.isMonorepo) {
-        await exec(`cd ${project.path}/${project.name} && ${commandRun.options.npmClient} install`);
+        await (0, _utils.exec)(`cd ${project.path}/${project.name} && ${commandRun.options.npmClient} install`);
       }
     } catch (e) {
       console.warn(e);
@@ -260,12 +257,12 @@ ${_picocolors.default.underline(_picocolors.default.cyan(`http://localhost:${por
 📘  VS Code Project: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`code ${optionPath}`)))}
 🚧  Launch later: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${command}`)))}
 
-⌨️  To resume 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C `)))}
+⌨️  To resume 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C or CTRL + BREAK `)))}
 `);
     // at least a second to see the message print at all
     await (0, _promises.setTimeout)(1000);
     try {
-      await exec(`cd ${optionPath} && ${command} && ${commandRun.options.npmClient} run analyze`);
+      await (0, _utils.exec)(`cd ${optionPath} && ${command} && ${commandRun.options.npmClient} run analyze`);
     } catch (e) {
       // don't log bc output is weird
     }
@@ -284,7 +281,7 @@ function webcomponentActions() {
     label: "Check status of web component"
   }, {
     value: 'wc:element',
-    label: "Add a new Lit module to an existing project"
+    label: "Add new Lit component to existing project"
   }, {
     value: 'wc:haxproperties',
     label: "Write haxProperties schema"
@@ -358,7 +355,7 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
 📘  VS Code Project: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`code ${process.cwd()}`)))}
 🚧  Launch later: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${commandRun.options.npmClient} start`)))}
 
-⌨️  To exit 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C `)))}
+⌨️  To exit 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C or CTRL + BREAK `)))}
           `);
         }
         try {
@@ -368,17 +365,63 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
             if (!commandRun.options.quiet) {
               let s = p.spinner();
               s.start((0, _statements.merlinSays)(`Installation magic (${commandRun.options.npmClient} install)`));
-              await exec(`${commandRun.options.npmClient} install`);
+              await (0, _utils.exec)(`${commandRun.options.npmClient} install`);
               s.stop((0, _statements.merlinSays)(`Everything is installed. It's go time`));
             } else {
-              await exec(`${commandRun.options.npmClient} install`);
+              await (0, _utils.exec)(`${commandRun.options.npmClient} install`);
             }
           }
-          await exec(`${commandRun.options.npmClient} start`);
+          await (0, _utils.exec)(`${commandRun.options.npmClient} start`);
         } catch (e) {
           // don't log bc output is odd
         }
         break;
+      case "serve":
+        try {
+          if (!commandRun.options.quiet) {
+            p.intro(`Launching development server.. `);
+          }
+          if (packageData.scripts.serve) {
+            if (!commandRun.options.quiet) {
+              p.note(`${(0, _statements.merlinSays)(`Project launched in development mode`)}
+
+🚀  Running your ${_picocolors.default.bold('webcomponent')} ${_picocolors.default.bold(packageData.name)}:
+      ${_picocolors.default.underline(_picocolors.default.cyan(`http://localhost:${port}`))}
+
+🏠  Launched: ${_picocolors.default.underline(_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${process.cwd()}`))))}
+💻  Folder: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`cd ${process.cwd()}`)))}
+📂  Open folder: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`open ${process.cwd()}`)))}
+📘  VS Code Project: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`code ${process.cwd()}`)))}
+🚧  Launch later: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${commandRun.options.npmClient} serve`)))}
+
+⌨️  To exit 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C or CTRL + BREAK `)))}
+          `);
+            }
+            await (0, _utils.exec)(`${commandRun.options.npmClient} run serve`);
+          } else {
+            // if no serve script, run start instead
+            if (!commandRun.options.quiet) {
+              p.note(`${(0, _statements.merlinSays)(`No ${_picocolors.default.bold('serve')} script found, running ${_picocolors.default.bold(`${commandRun.options.npmClient} start`)} instead`)}
+
+🚀  Running your ${_picocolors.default.bold('webcomponent')} ${_picocolors.default.bold(packageData.name)}:
+      ${_picocolors.default.underline(_picocolors.default.cyan(`http://localhost:${port}`))}
+
+🏠  Launched: ${_picocolors.default.underline(_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${process.cwd()}`))))}
+💻  Folder: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`cd ${process.cwd()}`)))}
+📂  Open folder: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`open ${process.cwd()}`)))}
+📘  VS Code Project: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`code ${process.cwd()}`)))}
+🚧  Launch later: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${commandRun.options.npmClient} start`)))}
+
+⌨️  To exit 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C or CTRL + BREAK `)))}
+          `);
+            }
+            await (0, _utils.exec)(`${commandRun.options.npmClient} start`);
+          }
+        } catch (e) {
+          // don't log bc output is odd
+          console.log("error", e);
+        }
+        break;
       case "wc:status":
       case "wc:stats":
       case "webcomponent:status":
@@ -422,6 +465,7 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
       case "wc:element":
       case "webcomponent:element":
         try {
+          const reservedNames = ["annotation-xml", "color-profile", "font-face", "font-face-src", "font-face-uri", "font-face-format", "font-face-name", "missing-glyph"];
           if (!commandRun.options.name) {
             commandRun.options.name = await p.text({
               message: 'Component name:',
@@ -431,18 +475,28 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
                 if (!value) {
                   return "Name is required (tab writes default)";
                 }
+                if (reservedNames.includes(value)) {
+                  return `Reserved name ${_picocolors.default.bold(value)} cannot be used`;
+                }
                 if (value.toLocaleLowerCase() !== value) {
                   return "Name must be lowercase";
                 }
                 if (/^\d/.test(value)) {
                   return "Name cannot start with a number";
                 }
+                if (/[`~!@#$%^&*()_=+\[\]{}|;:\'",<.>\/?\\]/.test(value)) {
+                  return "No special characters allowed in name";
+                }
                 if (value.indexOf(' ') !== -1) {
                   return "No spaces allowed in name";
                 }
                 if (value.indexOf('-') === -1 || value.replace('--', '') !== value || value[0] === '-' || value[value.length - 1] === '-') {
                   return "Name must include at least one `-` and must not start or end name.";
                 }
+                // Check for any other syntax errors
+                if (!/^[a-z][a-z0-9.\-]*\-[a-z0-9.\-]*$/.test(value)) {
+                  return `Name must follow the syntax ${_picocolors.default.bold("my-component")}`;
+                }
                 // assumes auto was selected in CLI
                 let joint = process.cwd();
                 if (commandRun.options.path) {
@@ -459,12 +513,21 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
               console.error(_picocolors.default.red("Name is required (tab writes default)"));
               process.exit(1);
             }
+            if (reservedNames.includes(value)) {
+              console.error(_picocolors.default.red(`Reserved name ${_picocolors.default.bold(value)} cannot be used`));
+              process.exit(1);
+            }
             if (value.toLocaleLowerCase() !== value) {
               console.error(_picocolors.default.red("Name must be lowercase"));
               process.exit(1);
             }
             if (/^\d/.test(value)) {
               console.error(_picocolors.default.red("Name cannot start with a number"));
+              process.exit(1);
+            }
+            if (/[`~!@#$%^&*()_=+\[\]{}|;:\'",<.>\/?\\]/.test(value)) {
+              console.error(_picocolors.default.red("No special characters allowed in name"));
+              process.exit(1);
             }
             if (value.indexOf(' ') !== -1) {
               console.error(_picocolors.default.red("No spaces allowed in name"));
@@ -474,6 +537,11 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
               console.error(_picocolors.default.red("Name must include at least one `-` and must not start or end name."));
               process.exit(1);
             }
+            // Check for any other syntax errors
+            if (!/^[a-z][a-z0-9.\-]*\-[a-z0-9.\-]*$/.test(value)) {
+              console.error(_picocolors.default.red(`Name must follow the syntax ${_picocolors.default.bold("my-component")}`));
+              process.exit(1);
+            }
             // assumes auto was selected in CLI
             let joint = process.cwd();
             if (commandRun.options.path) {
@@ -500,9 +568,6 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
           let content = ejs.render(ejsString, project);
           // file written successfully  
           fs.writeFileSync(filePath, content);
-          if (packageData.customElements) {
-            await webcomponentGenerateHAXSchema(commandRun, packageData);
-          }
           p.note(`🧙  Add to another web component (.js): ${_picocolors.default.underline(_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`import ./${project.name}.js`))))}
 💻  Add to an HTML file: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`<script type="module" src="${project.name}"></script>`)))}`);
           // at least a second to see the message print at all
@@ -510,7 +575,7 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
         } catch (e) {
           (0, _logging.log)(e.stderr);
           // Original ejs.render error checking
-          console.error(_picocolors.default.red(filePath));
+          console.error(_picocolors.default.red(process.cwd()));
           console.error(_picocolors.default.red(e));
         }
         break;
@@ -541,7 +606,7 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
 async function webcomponentGenerateHAXSchema(commandRun, packageData) {
   // run analyzer automatically if we have it so that it's up to date
   if (packageData.scripts.analyze) {
-    await exec(`${commandRun.options.npmClient} run analyze`);
+    await (0, _utils.exec)(`${commandRun.options.npmClient} run analyze`);
   }
   if (fs.existsSync(`${process.cwd()}/${packageData.customElements}`)) {
     const ceFileData = fs.readFileSync(`${process.cwd()}/${packageData.customElements}`, 'utf8', (error, data) => {