@haxtheweb/create 10.0.7 → 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,9 +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);
 var sysSurge = true;
-exec('surge --version', error => {
+(0, _utils.exec)('surge --version', error => {
   if (error) {
     sysSurge = false;
   }
@@ -80,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"
@@ -107,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"
@@ -128,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) {
@@ -355,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);
         }
@@ -736,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);
         }
@@ -825,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
@@ -832,28 +985,31 @@ 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;
           }
-          if (!commandRun.options.domain) {
-            commandRun.options.domain = await p.text({
-              message: `Domain for surge`,
-              initialValue: `haxcli-${activeHaxsite.name}.surge.sh`,
-              defaultValue: `haxcli-${activeHaxsite.name}.surge.sh`,
-              required: true,
-              validate: value => {
-                if (!value) {
-                  return "Domain must have a value";
-                }
-              }
+          let execOutput;
+          if (commandRun.options.domain && commandRun.options.y) {
+            let s = p.spinner();
+            s.start((0, _statements.merlinSays)('Sending site to Surge.sh ..'));
+            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 {
+            let surgeArgs = ['.'];
+            // could get here bc of being interactive, yet passed in a domain...
+            if (commandRun.options.domain) {
+              surgeArgs.push(commandRun.options.domain);
+            }
+            execOutput = await (0, _utils.interactiveExec)('surge', surgeArgs, {
+              cwd: activeHaxsite.directory
             });
+            (0, _logging.log)((0, _statements.merlinSays)(`Site published: https://${commandRun.options.domain}`));
           }
-          let execOutput = await exec(`cd ${activeHaxsite.directory} && surge . ${commandRun.options.domain}`);
-          (0, _logging.log)(execOutput.stdout.trim());
-          (0, _logging.log)(`Site published: https://${commandRun.options.domain}`);
         } catch (e) {
+          console.log("?");
           (0, _logging.log)(e.stderr);
         }
         break;
@@ -990,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]}`;
@@ -1009,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);
@@ -1123,9 +1313,6 @@ async function siteProcess(commandRun, project, port = '3000') {
       project.extras = ['launch'];
     }
   }
-  if (!commandRun.options.quiet) {
-    s.start((0, _statements.merlinSays)(`Creating new site: ${project.name}`));
-  }
   let siteRequest = {
     "site": {
       "name": project.name,
@@ -1241,9 +1428,18 @@ async function siteProcess(commandRun, project, port = '3000') {
   }
   HAXCMS.cliWritePath = `${project.path}`;
   let res = new Res();
+  // unfortunately the twig exception is not blockable from output at this layer
   await hax.RoutesMap.post.createSite({
     body: siteRequest
   }, res);
+  // so we run it and then clear the screen
+  // this is a bit of a hack but it works to give the user the feedback that the site was
+  // created successfully, but only if not in quiet mode (default)
+  if (!commandRun.options.quiet) {
+    process.stdout.write('\x1Bc');
+    s.start((0, _statements.merlinSays)(`Creating new site: ${project.name}`));
+    await (0, _promises.setTimeout)(1000);
+  }
   // path different for this one as it's on the fly produced
   const recipeFileName = path.join(project.path, '/', project.name, `${siteRecipeFile}`);
   const recipeLogTransport = new winston.transports.File({
@@ -1270,7 +1466,7 @@ async function siteProcess(commandRun, project, port = '3000') {
     }
   }
   if (!commandRun.options.quiet) {
-    s.stop((0, _statements.merlinSays)(`${project.name} created!`));
+    s.stop((0, _statements.merlinSays)(`${project.name} created successfully!`));
     await (0, _promises.setTimeout)(500);
   }
 
@@ -1282,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 :\
@@ -1312,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
     }
@@ -1355,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'
@@ -1427,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)(`
@@ -1464,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
@@ -1477,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