@haxtheweb/create 9.0.11 → 9.0.13

package/README.md

@@ -1,10 +1,17 @@
+[![License: Apache 2.0](https://img.shields.io/badge/license-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+[![Lit](https://img.shields.io/badge/-Lit-324fff?style=flat&logo=data:image/svg%2bxml;base64,PHN2ZyBmaWxsPSIjZmZmIiB2aWV3Qm94PSIwIDAgMTYwIDIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTYwIDgwdjgwbC00MC00MHptLTQwIDQwdjgwbDQwLTQwem0wLTgwdjgwbC00MC00MHptLTQwIDQwdjgwbDQwLTQwem0tNDAtNDB2ODBsNDAtNDB6bTQwLTQwdjgwbC00MC00MHptLTQwIDEyMHY4MGwtNDAtNDB6bS00MC00MHY4MGw0MC00MHoiLz48L3N2Zz4%3D)](https://lit.dev/)
+[![#HAXTheWeb](https://img.shields.io/badge/-HAXTheWeb-999999FF?style=flat&logo=data:image/svg%2bxml;base64,PHN2ZyBpZD0iZmVhMTExZTAtMjEwZC00Y2QwLWJhMWQtZGZmOTQyODc0Njg1IiBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4NC40IDEzNS45NyI+PGRlZnM+PHN0eWxlPi5lMWJjMjAyNS0xODAwLTRkYzItODc4NS1jNDZlZDEwM2Y0OTJ7ZmlsbDojMjMxZjIwO308L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iZTFiYzIwMjUtMTgwMC00ZGMyLTg3ODUtYzQ2ZWQxMDNmNDkyIiBkPSJNNzguMDcsODMuNDVWNTVIODYuMnY4LjEzaDE2LjI2djQuMDdoNC4wN1Y4My40NUg5OC40VjY3LjE5SDg2LjJWODMuNDVaIi8+PHBvbHlnb24gcG9pbnRzPSIxNTMuMTMgNjMuNyAxNTMuMTMgNTEuMzkgMTQwLjU0IDUxLjM5IDE0MC41NCAzOS4wOSAxMjcuOTUgMzkuMDkgMTI3Ljk1IDI2Ljc5IDEwMi43OCAyNi43OSAxMDIuNzggMzkuMDkgMTE1LjM2IDM5LjA5IDExNS4zNiA1MS4zOSAxMjcuOTUgNTEuMzkgMTI3Ljk1IDYzLjcgMTQwLjU0IDYzLjcgMTQwLjU0IDc2IDEyNy4zNiA3NiAxMjcuMzYgODguMyAxMTQuNzggODguMyAxMTQuNzggMTAwLjYxIDEwMi4xOSAxMDAuNjEgMTAyLjE5IDExMi45MSAxMjcuMzYgMTEyLjkxIDEyNy4zNiAxMDAuNjEgMTM5Ljk1IDEwMC42MSAxMzkuOTUgODguMyAxNTIuNTQgODguMyAxNTIuNTQgNzYgMTY1LjcyIDc2IDE2NS43MiA2My43IDE1My4xMyA2My43Ii8+PHBvbHlnb24gcG9pbnRzPSIzMy4xMyA2My43IDMzLjEzIDUxLjM5IDQ1LjcyIDUxLjM5IDQ1LjcyIDM5LjA5IDU4LjMxIDM5LjA5IDU4LjMxIDI2Ljc5IDgzLjQ4IDI2Ljc5IDgzLjQ4IDM5LjA5IDcwLjg5IDM5LjA5IDcwLjg5IDUxLjM5IDU4LjMxIDUxLjM5IDU4LjMxIDYzLjcgNDUuNzIgNjMuNyA0NS43MiA3NiA1OC44OSA3NiA1OC44OSA4OC4zIDcxLjQ4IDg4LjMgNzEuNDggMTAwLjYxIDg0LjA3IDEwMC42MSA4NC4wNyAxMTIuOTEgNTguODkgMTEyLjkxIDU4Ljg5IDEwMC42MSA0Ni4zMSAxMDAuNjEgNDYuMzEgODguMyAzMy43MiA4OC4zIDMzLjcyIDc2IDIwLjU0IDc2IDIwLjU0IDYzLjcgMzMuMTMgNjMuNyIvPjwvc3ZnPg==)](https://haxtheweb.org/)
+[![Published on npm](https://img.shields.io/npm/v/@haxtheweb/create?style=flat)](https://www.npmjs.com/package/@haxtheweb/create)
+[![build](https://github.com/haxtheweb/create/workflows/build/badge.svg)](https://github.com/haxtheweb/create/actions)
+[![X](https://img.shields.io/twitter/follow/haxtheweb.svg?style=social&label=Follow)](https://twitter.com/intent/follow?screen_name=haxtheweb)
+
 # HAX The CLI
 Rapidly build web components for the Web that work with HAX. HAX The Web's CLI tools empower you to rapidly..
 
 ```bash
 # this allows you to then use hax command
 npm install @haxtheweb/create --global
-# then run
+# then run this for interactive prompt
 hax start
 ```
 
@@ -12,11 +19,12 @@ hax start
 
 ## Default / global / new context
 - `hax start` - fun ascii art and interactive CLI (via [clack](https://www.clack.cc/) )
-- `hax --name my-element --y` - Make a new HAX capable, i18n wired, Design system (DDD) driven web component
+- `hax webcomponent my-element --y` - Make a new HAX capable, i18n wired, Design system (DDD) driven web component
   -  if in a monorepo root, will place in correct location / inherit settings
 - `hax site mysite --y` - create a new HAXsite (HAXcms, single site)
 
 ## --help
+Run `hax help` or `hax webcomponent --help` or `hax site --help` for up-to-date listing
 ```
 Usage: hax [options] [command]
 
@@ -70,12 +78,8 @@ Commands:
 npx @haxtheweb/create
 # this is same as above, better windows CLI support
 npm init @haxtheweb
-```
-
-## Usage in other programs
-https://stackoverflow.com/questions/69208298/use-node-bins-without-installing-the-package-globally explains it but you should be able to use the CLI as part of another project as follows:
-```json
-{
+- Try Hax: https://hax.cloud
+- HAXCellence https://haxtheweb.org/what-is-hax
   "scripts": {
     "hax": "hax"
   }
@@ -109,3 +113,25 @@ Build a HAX site that can be published and transported anywhere. Your users migh
 - Ability to import via URL just like the front-end
 - Theme development starting point to be able to build themes locally
 - Primed to publish to gh-pages, vercel and more
+
+# Get Help / Issues / Support
+- Discord Channel - https://bit.ly/hax-discord
+- Unified issue queue - https://github.com/haxtheweb/issues/issues
+- Using Merlin directly in any HAX spaces and type "Issue" to jump start a report!
+
+## Watch and Learn more about HAX here:
+- Try Hax: https://hax.cloud
+- HAXCellence https://haxtheweb.org/what-is-hax
+- Youtube channel - https://www.youtube.com/@haxtheweb
+
+# Related links and tech
+- [NPM Package list](https://www.npmjs.com/org/haxtheweb)
+- [HAXcms (NodeJS)](https://github.com/haxtheweb/haxcms-nodejs)
+- [HAXcms (PHP)](https://github.com/haxtheweb/haxcms-php)
+- [Storybook docs](https://open-apis.hax.cloud/)
+- [HAX [dot] PSU](https://hax.psu.edu)
+- [HAX doc site](https://haxtheweb.org/)
+- [HAX + 11ty](https://github.com/haxtheweb/hax11ty)
+
+
+![HAX Traveler: World Changer](https://raw.githubusercontent.com/haxtheweb/art/refs/heads/main/haxtheweb/hax-traveler-world-changer.jpg)

package/dist/create.js

@@ -28,10 +28,10 @@ exec('git --version', error => {
 });
 async function main() {
   var commandRun = {};
-  _commander.program.option('--').option('--v', 'Verbose output for developers').option('--path <char>', 'where to perform operation').option('--npm-client <char>', 'npm client to use (must be installed) npm, yarn, pnpm', 'npm').option('--y', 'yes to all questions').option('--skip', 'skip frills like animations').option('--auto', 'yes to all questions, alias of y')
+  _commander.program.option('--').option('--v', 'Verbose output').option('--debug', 'Output for developers').option('--format <char>', 'Output format; json (default), yaml').option('--path <char>', 'where to perform operation').option('--npm-client <char>', 'npm client to use (must be installed) npm, yarn, pnpm', 'npm').option('--y', 'yes to all questions').option('--skip', 'skip frills like animations').option('--auto', 'yes to all questions, alias of y').option('--no-i', 'prevent interactions / sub-process, good for scripting')
 
   // options for webcomponent
-  .option('--org <char>', 'organization for package.json').option('--author <char>', 'author for site / package.json')
+  .option('--org <char>', 'organization for package.json').option('--author <char>', 'author for site / package.json').option('--writeHaxProperties', 'Write haxProperties for the element')
 
   // options for site
   .option('--import-site <char>', 'URL of site to import').option('--import-structure <char>', `import method to use:\n\rpressbooksToSite\n\relmslnToSite\n\rhaxcmsToSite\n\rnotionToSite\n\rgitbookToSite\n\revolutionToSite\n\rhtmlToSite\n\rdocxToSite`).option('--node-op <char>', 'node operation to perform').option('--item-id <char>', 'node ID to operate on').option('--name <char>', 'name of the project').option('--domain <char>', 'published domain name').helpCommand(true);
@@ -61,7 +61,7 @@ async function main() {
       commandRun.arguments.action = action;
       commandRun.options.skip = true;
     }
-  }).option('--path <char>', 'path the project should be created in').option('--import-site <char>', 'URL of site to import').option('--import-structure <char>', `import method to use:\n\rpressbooksToSite\n\relmslnToSite\n\rhaxcmsToSite\n\rnotionToSite\n\rgitbookToSite\n\revolutionToSite\n\rhtmlToSite\n\rdocxToSite`).option('--name <char>', 'name of the site (when creating a new one)').option('--domain <char>', 'published domain name').option('--node-op <char>', 'node operation to perform').version(await HAXCMS.getHAXCMSVersion());
+  }).option('--path <char>', 'path the project should be created in').option('--import-site <char>', 'URL of site to import').option('--import-structure <char>', `import method to use:\n\rpressbooksToSite\n\relmslnToSite\n\rhaxcmsToSite\n\rnotionToSite\n\rgitbookToSite\n\revolutionToSite\n\rhtmlToSite\n\rdocxToSite`).option('--name <char>', 'name of the site (when creating a new one)').option('--domain <char>', 'published domain name').option('--node-op <char>', 'node operation to perform').option('--no-i', 'prevent interactions / sub-process, good for scripting').version(await HAXCMS.getHAXCMSVersion());
   let siteNodeOps = (0, _site.siteNodeOperations)();
   for (var i in siteNodeOps) {
     _commander.program.option(`--${(0, _utils.camelToDash)(siteNodeOps[i].value)} <char>`, `${siteNodeOps[i].label}`);
@@ -80,14 +80,14 @@ async function main() {
       commandRun.arguments.name = name;
       commandRun.options.skip = true;
     }
-  }).option('--path <char>', 'path the project should be created in').option('--org <char>', 'organization for package.json').option('--author <char>', 'author for site / package.json');
+  }).option('--path <char>', 'path the project should be created in').option('--org <char>', 'organization for package.json').option('--author <char>', 'author for site / package.json').option('--writeHaxProperties', 'Write haxProperties for the element').option('--no-i', 'prevent interactions / sub-process, good for scripting');
   // process program arguments
   _commander.program.parse();
   commandRun.options = {
     ...commandRun.options,
     ..._commander.program.opts()
   };
-  if (commandRun.options.v) {
+  if (commandRun.options.debug) {
     console.log(commandRun);
   }
   // auto and y assume same thing
@@ -109,9 +109,14 @@ async function main() {
   if (!commandRun.options.path && commandRun.options.skip) {
     commandRun.options.path = process.cwd();
   }
-  if (commandRun.options.auto) {
-    commandRun.options.org = '';
-    commandRun.options.author = author;
+  // if we skip stuff then set org/author automatically
+  if (commandRun.options.skip || commandRun.options.auto) {
+    if (!commandRun.options.org) {
+      commandRun.options.org = '';
+    }
+    if (!commandRun.options.author) {
+      commandRun.options.author = author;
+    }
   }
   let packageData = {};
   let testPackages = [path.join(process.cwd(), 'package.json'), path.join(process.cwd(), '../', 'package.json'), path.join(process.cwd(), '../', '../', 'package.json')];
@@ -121,7 +126,10 @@ async function main() {
     let packLoc = testPackages.shift();
     if (fs.existsSync(packLoc)) {
       try {
-        packageData = JSON.parse(fs.readFileSync(`${process.cwd()}/package.json`));
+        packageData = {
+          ...JSON.parse(fs.readFileSync(packLoc)),
+          ...packageData
+        };
         // assume we are working on a web component / existing if we find this key
         if (packageData.hax && packageData.hax.cli) {
           commandRun.program = 'webcomponent';
@@ -129,6 +137,8 @@ async function main() {
         // leverage these values if they exist downstream
         if (packageData.npmClient) {
           commandRun.options.npmClient = packageData.npmClient;
+        } else {
+          commandRun.options.npmClient = 'npm';
         }
         // see if we're in a monorepo
         if (packageData.useWorkspaces && packageData.workspaces && packageData.workspaces.packages && packageData.workspaces.packages[0]) {
@@ -149,12 +159,15 @@ async function main() {
       }
     }
   }
+  if (commandRun.options.debug) {
+    console.log(packageData);
+  }
   // CLI works within context of the site if one is detected, otherwise we can do other thingss
   if (await hax.systemStructureContext()) {
     commandRun.program = 'site';
     commandRun.options.skip = true;
     await (0, _site.siteCommandDetected)(commandRun);
-  } else if (packageData && packageData.hax && packageData.hax.cli && packageData.scripts.start) {
+  } else if (packageData && (packageData.customElements || packageData.hax && packageData.hax.cli) && packageData.scripts.start) {
     commandRun.program = 'webcomponent';
     commandRun.options.skip = true;
     await (0, _webcomponent.webcomponentCommandDetected)(commandRun, packageData);
@@ -185,7 +198,7 @@ async function main() {
         project = {
           type: commandRun.command
         };
-      } else {
+      } else if (commandRun.options.i) {
         project = await p.group({
           type: ({
             results
@@ -198,7 +211,7 @@ async function main() {
               label: '🏗️ Create a Web Component'
             }, {
               value: 'site',
-              label: '🏡 Create a HAXcms site (single)'
+              label: '🏡 Create a HAXsite'
             }, {
               value: 'quit',
               label: '🚪 Quit'
@@ -211,6 +224,8 @@ async function main() {
             process.exit(0);
           }
         });
+      } else if (!commandRun.options.i) {
+        process.exit(0);
       }
       // detect being in a haxcms scaffold. easiest way is _sites being in this directory
       // set the path automatically so we skip the question
@@ -321,7 +336,7 @@ async function main() {
           extras: ({
             results
           }) => {
-            if (!commandRun.options.auto) {
+            if (!commandRun.options.auto && commandRun.options.i) {
               let options = [];
               let initialValues = [];
               if (commandRun.command === "webcomponent" || results.type === "webcomponent") {

package/dist/lib/programs/site.js

@@ -8,12 +8,16 @@ exports.siteActions = siteActions;
 exports.siteCommandDetected = siteCommandDetected;
 exports.siteItemsOptionsList = siteItemsOptionsList;
 exports.siteNodeOperations = siteNodeOperations;
+exports.siteNodeStatsOperations = siteNodeStatsOperations;
 exports.siteProcess = siteProcess;
 exports.siteThemeList = siteThemeList;
 var _promises = require("node:timers/promises");
 var p = _interopRequireWildcard(require("@clack/prompts"));
 var _picocolors = _interopRequireDefault(require("picocolors"));
+var _jsYaml = require("js-yaml");
+var _nodeHtmlParser = require("node-html-parser");
 var _statements = require("../statements.js");
+var _utils = require("../utils.js");
 var _microFrontendRegistry = require("../micro-frontend-registry.js");
 var haxcmsNodejsCli = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs/dist/cli.js"));
 var hax = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs"));
@@ -27,7 +31,7 @@ globalThis.MicroFrontendRegistryConfig = {
   base: `@haxtheweb/open-apis/`
 };
 // emable HAXcms routes so we have name => path just like on frontend!
-_microFrontendRegistry.MicroFrontendRegistry.enableServices(['haxcms']);
+_microFrontendRegistry.MicroFrontendRegistry.enableServices(['core', 'haxcms', 'experimental']);
 const HAXCMS = hax.HAXCMS;
 const exec = util.promisify(child_process.exec);
 var sysSurge = true;
@@ -36,32 +40,65 @@ exec('surge --version', error => {
     sysSurge = false;
   }
 });
-const fakeSend = {
-  send: json => console.log(json),
-  sendStatus: data => console.log(data)
-};
+
+// fake response class so we can capture the response from the headless route as opposed to print to console
+// this way we can handle as data or if use is requesting output format to change we can respond
+class Res {
+  constructor() {
+    this.query = {};
+    this.data = null;
+    this.statusCode = null;
+  }
+  send(data) {
+    this.data = data;
+    return this;
+  }
+  status(status) {
+    this.statusCode = status;
+    return this;
+  }
+  json(data) {
+    this.data = JSON.parse(JSON.stringify(data));
+    return this;
+  }
+  setHeader() {
+    return this;
+  }
+}
 function siteActions() {
   return [{
     value: 'start',
-    label: "Start site (http://localhost)"
+    label: "Launch site (http://localhost)"
   }, {
-    value: 'status',
-    label: "Status"
-  }, {
-    value: 'sync',
-    label: "Sync git"
-  }, {
-    value: 'theme',
-    label: "Change theme"
+    value: 'node:stats',
+    label: "Node: Stats"
   }, {
     value: 'node:add',
-    label: "Add page"
+    label: "Node: Add page"
   }, {
     value: 'node:edit',
-    label: "Edit page"
+    label: "Node: Edit page"
   }, {
     value: 'node:delete',
-    label: "Delete page"
+    label: "Node: Delete page"
+  }, {
+    value: 'status',
+    label: "Site: Status"
+  }, {
+    value: 'theme',
+    label: "Site: Change theme"
+  }, {
+    value: 'file:list',
+    label: "Site: List files"
+  }, {
+    value: 'site:html',
+    label: "Site: Full site as HTML"
+  }, {
+    value: 'site:md',
+    label: "Site: Full site as Markdown"
+  }, {
+    value: 'sync',
+    label: "Site: Sync git"
   }];
 }
 async function siteCommandDetected(commandRun) {
@@ -138,6 +175,67 @@ async function siteCommandDetected(commandRun) {
           console.log(e.stderr);
         }
         break;
+      case "node:stats":
+        try {
+          if (!commandRun.options.itemId) {
+            commandRun.options.itemId = await p.select({
+              message: `Select an item to edit`,
+              required: true,
+              options: [{
+                value: null,
+                label: "-- edit nothing, exit --"
+              }, ...(await siteItemsOptionsList(activeHaxsite))]
+            });
+          }
+          if (commandRun.options.itemId) {
+            let nodeOps = siteNodeStatsOperations();
+            let page = activeHaxsite.loadNode(commandRun.options.itemId);
+            // select which aspect of this we are editing
+            if (!commandRun.options.nodeOp) {
+              commandRun.options.nodeOp = await p.select({
+                message: `${page.title} (${page.id}) - Node operations`,
+                required: true,
+                options: [{
+                  value: null,
+                  label: "-- Exit --"
+                }, ...nodeOps]
+              });
+            }
+            if (commandRun.options.nodeOp && siteNodeStatsOperations(commandRun.options.nodeOp)) {
+              switch (commandRun.options.nodeOp) {
+                case 'details':
+                  console.log(page);
+                  break;
+                case 'html':
+                  console.log(await activeHaxsite.getPageContent(page));
+                  break;
+                case 'schema':
+                  // next up
+                  let html = await activeHaxsite.getPageContent(page);
+                  let dom = (0, _nodeHtmlParser.parse)(`<div id="fullpage">${html}</div>`);
+                  let els = [];
+                  for (var i in dom.querySelector('#fullpage').childNodes) {
+                    let node = dom.querySelector('#fullpage').childNodes[i];
+                    if (node && node.getAttribute) {
+                      els.push(await nodeToHaxElement(node, null));
+                    }
+                  }
+                  console.log(els);
+                  break;
+                case 'md':
+                  let resp = await openApiBroker('@core', 'htmlToMd', {
+                    html: await activeHaxsite.getPageContent(page)
+                  });
+                  console.log(resp.res.data.data);
+                  break;
+              }
+            }
+          }
+        } catch (e) {
+          console.log(e.stderr);
+          console.log(e);
+        }
+        break;
       case "node:add":
         try {
           // @todo accept title if not supplied
@@ -365,6 +463,42 @@ async function siteCommandDetected(commandRun) {
           console.log(e.stderr);
         }
         break;
+      case "file:list":
+        let res = new Res();
+        await hax.RoutesMap.get.listFiles({
+          query: activeHaxsite.name,
+          filename: commandRun.options.filename
+        }, res);
+        if (commandRun.options.format === 'yaml') {
+          console.log((0, _jsYaml.dump)(res.data));
+        } else {
+          console.log(res.data);
+        }
+        break;
+      case "site:html":
+      case "site:md":
+        let siteContent = '';
+        activeHaxsite = await hax.systemStructureContext();
+        let items = [];
+        if (commandRun.options.itemId != null) {
+          items = activeHaxsite.manifest.findBranch(commandRun.options.itemId);
+        } else {
+          items = activeHaxsite.manifest.orderTree(activeHaxsite.manifest.items);
+        }
+        for (var i in items) {
+          let page = activeHaxsite.loadNode(items[i].id);
+          siteContent += `<h1>${items[i].title}</h1>\n\r`;
+          siteContent += `<div data-jos-item-id="${items[i].id}">\n\r${await activeHaxsite.getPageContent(page)}\n\r</div>\n\r`;
+        }
+        if (operation.action === 'site:md') {
+          let resp = await openApiBroker('@core', 'htmlToMd', {
+            html: siteContent
+          });
+          console.log(resp.res.data.data);
+        } else {
+          console.log(siteContent);
+        }
+        break;
       case "quit":
         // quit
         process.exit(0);
@@ -377,6 +511,30 @@ async function siteCommandDetected(commandRun) {
   }
   (0, _statements.communityStatement)();
 }
+function siteNodeStatsOperations(search = null) {
+  let obj = [{
+    value: 'details',
+    label: "Details"
+  }, {
+    value: 'html',
+    label: "Page as HTML source"
+  }, {
+    value: 'schema',
+    label: "Page as HAXElementSchema"
+  }, {
+    value: 'md',
+    label: "Page as Markdown"
+  }];
+  if (search) {
+    for (const op of obj) {
+      if (op.value === search) {
+        return true;
+      }
+    }
+    return false;
+  }
+  return obj;
+}
 function siteNodeOperations(search = null) {
   let obj = [{
     value: 'title',
@@ -417,37 +575,16 @@ function siteNodeOperations(search = null) {
   return obj;
 }
 
-// fake response clas so we can capture the response from the headless route as opposed to print to console
-class Res {
-  constructor() {
-    this.query = {};
-    this.data = null;
-    this.statusCode = null;
-  }
-  send(data) {
-    this.data = data;
-    return this;
-  }
-  status(status) {
-    this.statusCode = status;
-    return this;
-  }
-  setHeader() {
-    return this;
-  }
-}
-
 // broker a call to the open-api repo which is an express based wrapper for vercel (originally)
 // this ensures the calls are identical and yet are converted to something the CLI can leverage
-async function openApiBroker(call, body) {
-  let mfItem = _microFrontendRegistry.MicroFrontendRegistry.get(`@haxcms/${call}`);
+async function openApiBroker(scope, call, body) {
+  let mfItem = _microFrontendRegistry.MicroFrontendRegistry.get(`${scope}/${call}`);
   // ensure we have a MFR record to do the connection
   // fun thing is this is local file access directly via import()
   if (mfItem) {
     // dynamic import... this might upset some stuff later bc it's not a direct reference
     // but it's working locally at least.
     const handler = await (specifier => new Promise(r => r(specifier)).then(s => _interopRequireWildcard(require(s))))(`${mfItem.endpoint.replace('/api/', '/dist/')}.js`);
-    // start the fake response
     let res = new Res();
     let req = {
       body: JSON.stringify(body),
@@ -466,8 +603,10 @@ async function openApiBroker(call, body) {
 async function siteProcess(commandRun, project, port = '3000') {
   // auto select operations to perform if requested
   if (!project.extras) {
-    let extras = ['launch'];
-    project.extras = extras;
+    project.extras = [];
+    if (commandRun.options.i) {
+      project.extras = ['launch'];
+    }
   }
   let s = p.spinner();
   s.start((0, _statements.merlinSays)(`Creating new site: ${project.name}`));
@@ -496,7 +635,7 @@ async function siteProcess(commandRun, project, port = '3000') {
     }
     // verify this is a valid way to do an import
     if (commandRun.options.importStructure && _microFrontendRegistry.MicroFrontendRegistry.get(`@haxcms/${commandRun.options.importStructure}`)) {
-      let resp = await openApiBroker(commandRun.options.importStructure, {
+      let resp = await openApiBroker('@haxcms', commandRun.options.importStructure, {
         repoUrl: commandRun.options.importSite
       });
       if (resp.res.data && resp.res.data.data && resp.res.data.data.items) {
@@ -509,9 +648,17 @@ async function siteProcess(commandRun, project, port = '3000') {
     }
   }
   HAXCMS.cliWritePath = `${project.path}`;
+  let res = new Res();
   await hax.RoutesMap.post.createSite({
     body: siteRequest
-  }, fakeSend);
+  }, res);
+  if (commandRun.options.v) {
+    if (commandRun.options.format === 'yaml') {
+      console.log((0, _jsYaml.dump)(res.data));
+    } else {
+      console.log(res.data);
+    }
+  }
   s.stop((0, _statements.merlinSays)(`${project.name} created!`));
   await (0, _promises.setTimeout)(500);
   if (project.gitRepo && !commandRun.options.isMonorepo) {
@@ -586,4 +733,101 @@ async function siteThemeList() {
     });
   }
   return items;
+}
+
+// @fork of the hax core util for this so that we avoid api difference between real dom and parse nodejs dom
+async function nodeToHaxElement(node, eventName = "insert-element") {
+  if (!node) {
+    return null;
+  }
+  // build out the properties to send along
+  var props = {};
+  // support basic styles
+  if (typeof node.getAttribute("style") !== typeof undefined) {
+    props.style = node.getAttribute("style");
+  }
+  // don't set a null style
+  if (props.style === null || props.style === "null") {
+    delete props.style;
+  }
+  // test if a class exists, not everything scopes
+  if (typeof node.getAttribute('class') !== typeof undefined) {
+    props.class = node.getAttribute('class').replace("hax-active", "");
+  }
+  // test if a id exists as its a special case in attributes... of course
+  if (typeof node.getAttribute('id') !== typeof undefined) {
+    props.id = node.getAttribute("id");
+  }
+  let tmpProps;
+  // weak fallback
+  if (typeof tmpProps === typeof undefined) {
+    tmpProps = node.__data;
+  }
+  // complex elements need complex support
+  if (typeof tmpProps !== typeof undefined) {
+    // run through attributes, though non-reflected props won't be here
+    // run through props, we always defer to property values
+    for (var property in tmpProps) {
+      // make sure we only set things that have a value
+      if (property != "class" && property != "style" && tmpProps.hasOwnProperty(property) && typeof node[property] !== undefined && node[property] != null && node[property] != "") {
+        props[property] = node[property];
+      }
+      // special support for false boolean
+      else if (node[property] === false) {
+        props[property] = false;
+      } else if (node[property] === true) {
+        props[property] = true;
+      } else if (node[property] === 0) {
+        props[property] = 0;
+      } else {
+        // unknown prop setting / ignored
+        //console.warn(node[property], property);
+      }
+    }
+    for (var attribute in node._attrs) {
+      // make sure we only set things that have a value
+      if (typeof node._attrs[attribute] !== typeof undefined && attribute != "class" && attribute != "style" && attribute != "id" && typeof node._attrs[attribute] !== undefined && node._attrs[attribute] != null && node._attrs[attribute] != "") {
+        props[attribute] = node._attrs[attribute];
+      } else if (node._attrs[attribute] == "0") {
+        props[attribute] = node._attrs[attribute];
+      } else {
+        // note: debug here if experiencing attributes that won't bind
+      }
+    }
+  } else {
+    // much easier case, usually just in primatives
+    for (var attribute in node._attrs) {
+      // make sure we only set things that have a value
+      if (typeof node._attrs[attribute] !== typeof undefined && attribute != "class" && attribute != "style" && attribute != "id" && typeof node._attrs[attribute] !== undefined && node._attrs[attribute] != null && node._attrs[attribute] != "") {
+        props[attribute] = node._attrs[attribute];
+      }
+    }
+  }
+  // support sandboxed environments which
+  // will hate iframe tags but love webview
+  let tag = node.tagName.toLowerCase();
+  if (globalThis.HaxStore && globalThis.HaxStore.instance && globalThis.HaxStore.instance._isSandboxed && tag === "iframe") {
+    tag = "webview";
+  }
+  let slotContent = '';
+  // if hax store around, allow it to get slot content of the node
+  if (globalThis.HaxStore && globalThis.HaxStore.instance) {
+    slotContent = await globalThis.HaxStore.instance.getHAXSlot(node);
+  } else {
+    // if HAX isn't around, just return the innerHTML as a string for asignment to content
+    slotContent = node.innerHTML;
+  }
+  // support fallback on inner text if there were no nodes
+  if (slotContent == "") {
+    slotContent = node.innerText;
+  }
+  let element = {
+    tag: tag,
+    properties: props,
+    content: slotContent
+  };
+  if (eventName !== null) {
+    element.eventName = eventName;
+  }
+  return element;
 }

package/dist/lib/programs/webcomponent.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.webcomponentCommandDetected = webcomponentCommandDetected;
+exports.webcomponentGenerateHAXSchema = webcomponentGenerateHAXSchema;
 exports.webcomponentProcess = webcomponentProcess;
 var fs = _interopRequireWildcard(require("node:fs"));
 var _promises = require("node:timers/promises");
@@ -27,6 +28,110 @@ exec('git --version', error => {
     sysGit = false;
   }
 });
+class HAXWiring {
+  /**
+   * Return a haxProperties prototype / example structure
+   */
+  prototypeHaxProperties = () => {
+    // example properties valid for HAX context menu.
+    let props = {
+      api: "1",
+      type: "element",
+      editingElement: "core",
+      hideDefaultSettings: false,
+      canScale: true,
+      canEditSource: true,
+      contentEditable: false,
+      gizmo: {
+        title: "Tag name",
+        description: "",
+        icon: "icons:android",
+        color: "purple",
+        tags: ["Other"],
+        handles: [{
+          type: "data",
+          type_exclusive: false,
+          url: "src"
+        }],
+        meta: {
+          author: "auto"
+        },
+        requiresChildren: false,
+        requiresParent: false
+      },
+      settings: {
+        configure: [{
+          slot: "",
+          title: "Inner content",
+          description: "The slotted content that lives inside the tag",
+          inputMethod: "textfield",
+          icon: "android",
+          required: true,
+          validationType: "text"
+        }, {
+          slot: "button",
+          title: "Button content",
+          description: "The content that can override the button",
+          inputMethod: "textfield",
+          icon: "android",
+          required: true,
+          validationType: "text"
+        }, {
+          property: "title",
+          title: "Title",
+          description: "",
+          inputMethod: "textfield",
+          icon: "android",
+          required: true,
+          validationType: "text"
+        }, {
+          property: "primaryColor",
+          title: "Title",
+          description: "",
+          inputMethod: "textfield",
+          icon: "android",
+          required: false,
+          validation: ".*",
+          validationType: "text"
+        }],
+        advanced: [{
+          property: "secondaryColor",
+          title: "Secondary color",
+          description: "An optional secondary color used in certain edge cases.",
+          inputMethod: "colorpicker",
+          icon: "color"
+        }, {
+          property: "endPoint",
+          title: "API endpoint",
+          description: "An optional endpoint to hit and load in more data dymaically.",
+          inputMethod: "textfield",
+          icon: "android",
+          validation: "[a-z0-9]",
+          validationType: "url"
+        }],
+        developer: []
+      },
+      saveOptions: {
+        wipeSlot: false,
+        unsetAttributes: ["end-point", "secondary-color"]
+      },
+      documentation: {
+        howTo: "https://haxtheweb.org/welcome",
+        purpose: "https://haxtheweb.org/welcome"
+      },
+      demoSchema: [{
+        tag: "my-tag",
+        content: "<p>inner html</p>",
+        properties: {
+          endPoint: "https://cdn2.thecatapi.com/images/9j5.jpg",
+          primaryColor: "yellow",
+          title: "A cat"
+        }
+      }]
+    };
+    return props;
+  };
+}
 
 // processing an element
 async function webcomponentProcess(commandRun, project, port = "8000") {
@@ -117,7 +222,7 @@ async function webcomponentProcess(commandRun, project, port = "8000") {
         await exec(`cd ${project.path}/${project.name} && ${commandRun.options.npmClient} install`);
       }
     } catch (e) {
-      console.log(e);
+      console.warn(e);
     }
     s.stop((0, _statements.merlinSays)(`Everything is installed. It's go time`));
   }
@@ -155,8 +260,12 @@ ${_picocolors.default.underline(_picocolors.default.cyan(`http://localhost:${por
 // autodetect webcomponent
 async function webcomponentCommandDetected(commandRun, packageData = {}, port = "8000") {
   p.intro(`${_picocolors.default.bgBlack(_picocolors.default.white(` HAXTheWeb : Webcomponent detected `))}`);
-  p.intro(`${_picocolors.default.bgBlue(_picocolors.default.white(` Name: ${packageData.name} `))}`);
-  p.note(`${(0, _statements.merlinSays)(`I have summoned a sub-process daemon 👹`)}
+  p.intro(`${_picocolors.default.bgBlue(_picocolors.default.white(` Web component name: ${packageData.name} `))}`);
+  // if we support customElement analyzer (hax wcs do) then generate if asked
+  if (commandRun.options.writeHaxProperties && packageData.customElements) {
+    webcomponentGenerateHAXSchema(commandRun, packageData);
+  } else {
+    p.note(`${(0, _statements.merlinSays)(`I have summoned a sub-process daemon 👹`)}
     
     🚀  Running your ${_picocolors.default.bold('webcomponent')} ${_picocolors.default.bold(packageData.name)}:
           ${_picocolors.default.underline(_picocolors.default.cyan(`http://localhost:${port}`))}
@@ -169,16 +278,111 @@ async function webcomponentCommandDetected(commandRun, packageData = {}, port =
     
     ⌨️  To exit 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C `)))}
     `);
-  try {
-    // ensure it's installed first, unless it's a monorepo
-    if (!commandRun.options.isMonorepo) {
-      let s = p.spinner();
-      s.start((0, _statements.merlinSays)(`Installation magic (${commandRun.options.npmClient} install)`));
-      await exec(`${commandRun.options.npmClient} install`);
-      s.stop((0, _statements.merlinSays)(`Everything is installed. It's go time`));
+    try {
+      // ensure it's installed first, unless it's a monorepo. basic check for node_modules
+      // folder as far as if already installed so we don't double install needlessly
+      if (!commandRun.options.isMonorepo && !fs.existsSync("./node_modules")) {
+        let s = p.spinner();
+        s.start((0, _statements.merlinSays)(`Installation magic (${commandRun.options.npmClient} install)`));
+        await exec(`${commandRun.options.npmClient} install`);
+        s.stop((0, _statements.merlinSays)(`Everything is installed. It's go time`));
+      }
+      await exec(`${commandRun.options.npmClient} start`);
+    } catch (e) {
+      // don't log bc output is odd
     }
-    await exec(`${commandRun.options.npmClient} start`);
-  } catch (e) {
-    // don't log bc output is odd
   }
+}
+
+// merge the web component factory libraries the user has installed 
+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`);
+  }
+  if (fs.existsSync(`${process.cwd()}/${packageData.customElements}`)) {
+    const ceFileData = fs.readFileSync(`${process.cwd()}/${packageData.customElements}`, 'utf8', (error, data) => {
+      if (error) {
+        console.warn(error);
+        return;
+      }
+      return data;
+    });
+    let wiring = new HAXWiring();
+    if (commandRun.options.debug) {
+      console.log(ceFileData);
+    }
+    if (ceFileData) {
+      let ce = JSON.parse(ceFileData);
+      await ce.modules.forEach(async modules => {
+        await modules.declarations.forEach(async declarations => {
+          let props = wiring.prototypeHaxProperties();
+          props.gizmo.title = declarations.tagName.replace('-', ' ');
+          props.gizmo.tags = ["Other"];
+          props.gizmo.handles = [];
+          props.gizmo.meta.author = "HAXTheWeb core team";
+          delete props.gizmo.shortcutKey;
+          delete props.gizmo.requiresChildren;
+          delete props.gizmo.requiresParent;
+          props.settings.configure = [];
+          props.settings.advanced = [];
+          props.documentation = {
+            howTo: null,
+            purpose: null
+          };
+          props.saveOptions = {
+            unsetAttributes: []
+          };
+          props.demoSchema = [{
+            tag: declarations.tagName,
+            content: "",
+            properties: {}
+          }];
+          let propData = [];
+          if (declarations.attributes) {
+            propData = declarations.attributes;
+          }
+          // loop through and if props are things we can map then do it
+          await propData.forEach(async prop => {
+            if (["t", "colors", '_haxState', "elementVisible"].includes(prop.fieldName)) {
+              props.saveOptions.unsetAttributes.push(prop.fieldName);
+            } else {
+              let type = "textfield";
+              if (prop.type && prop.type.text) {
+                type = getInputMethodFromType(prop.type.text);
+              }
+              if (type) {
+                let propSchema = {
+                  property: prop.fieldName,
+                  title: prop.name,
+                  description: "",
+                  inputMethod: type
+                };
+                if (prop.default !== undefined) {
+                  props.demoSchema[0].properties[prop.fieldName] = prop.default;
+                }
+                props.settings.configure.push(propSchema);
+              }
+            }
+          });
+          if (commandRun.options.v) {
+            console.log(JSON.stringify(props, null, 2));
+          }
+          fs.writeFileSync(`./lib/${declarations.tagName}.haxProperties.json`, JSON.stringify(props, null, 2));
+          console.log(`schema written to: ./lib/${declarations.tagName}.haxProperties.json`);
+        });
+      });
+    }
+  }
+}
+function getInputMethodFromType(type) {
+  switch (type) {
+    case "string":
+      return "textfield";
+    case "number":
+      return "number";
+    case "boolean":
+      return "boolean";
+  }
+  return false;
 }

package/dist/templates/webcomponent/hax/package.json

@@ -33,7 +33,7 @@
     },
     "devDependencies": {
       "@babel/preset-env": "^7.16.4",
-      "@custom-elements-manifest/analyzer": "^0.4.17",
+      "@custom-elements-manifest/analyzer": "^0.10.3",
       "@open-wc/building-rollup": "^3.0.2",
       "@rollup/plugin-babel": "^6.0.4",
       "@rollup/plugin-node-resolve": "^15.2.3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haxtheweb/create",
-  "version": "9.0.11",
+  "version": "9.0.13",
   "publishConfig": {
     "access": "public"
   },
@@ -42,20 +42,22 @@
   "dependencies": {
     "@clack/core": "0.3.4",
     "@clack/prompts": "0.7.0",
-    "@haxtheweb/haxcms-nodejs": "^9.0.15",
+    "@haxtheweb/haxcms-nodejs": "^9.0.18",
     "@haxtheweb/open-apis": "^9.0.11",
+    "commander": "12.1.0",
+    "node-html-parser": "6.1.13",
     "ejs": "3.1.10",
-    "picocolors": "1.0.1",
-    "commander": "12.1.0"
+    "js-yaml": "4.1.0",
+    "picocolors": "1.0.1"
   },
   "devDependencies": {
-    "nodemon": "^3.1.7",
     "@babel/cli": "^7.24.6",
     "@babel/core": "^7.24.6",
     "@babel/preset-env": "7.24.6",
     "@babel/register": "^7.24.6",
-    "@custom-elements-manifest/analyzer": "^0.10.2",
+    "@custom-elements-manifest/analyzer": "^0.10.3",
     "babel-plugin-transform-dynamic-import": "^2.1.0",
-    "commit-and-tag-version": "12.4.1"
+    "commit-and-tag-version": "12.4.1",
+    "nodemon": "^3.1.7"
   }
 }