@haxtheweb/create 9.0.10 → 9.0.12

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 _microFrontendRegistry = require("../micro-frontend-registry.js");
 var haxcmsNodejsCli = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs/dist/cli.js"));
 var hax = _interopRequireWildcard(require("@haxtheweb/haxcms-nodejs"));
 var child_process = _interopRequireWildcard(require("child_process"));
@@ -21,6 +25,12 @@ 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; }
+// trick MFR into giving local paths
+globalThis.MicroFrontendRegistryConfig = {
+  base: `@haxtheweb/open-apis/`
+};
+// emable HAXcms routes so we have name => path just like on frontend!
+_microFrontendRegistry.MicroFrontendRegistry.enableServices(['haxcms']);
 const HAXCMS = hax.HAXCMS;
 const exec = util.promisify(child_process.exec);
 var sysSurge = true;
@@ -29,10 +39,27 @@ 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;
+  }
+  setHeader() {
+    return this;
+  }
+}
 function siteActions() {
   return [{
     value: 'start',
@@ -46,6 +73,9 @@ function siteActions() {
   }, {
     value: 'theme',
     label: "Change theme"
+  }, {
+    value: 'node:stats',
+    label: "Page stats"
   }, {
     value: 'node:add',
     label: "Add page"
@@ -55,6 +85,9 @@ function siteActions() {
   }, {
     value: 'node:delete',
     label: "Delete page"
+  }, {
+    value: 'file:list',
+    label: "List files"
   }];
 }
 async function siteCommandDetected(commandRun) {
@@ -131,6 +164,56 @@ 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)(html);
+                  console.log(dom);
+                  break;
+                case 'md':
+                  // @todo use the built in endpoints broker
+                  break;
+              }
+            }
+          }
+        } catch (e) {
+          console.log(e.stderr);
+        }
+        break;
       case "node:add":
         try {
           // @todo accept title if not supplied
@@ -358,6 +441,18 @@ 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 "quit":
         // quit
         process.exit(0);
@@ -370,6 +465,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',
@@ -410,6 +529,30 @@ function siteNodeOperations(search = null) {
   return obj;
 }
 
+// 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}`);
+  // 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`);
+    let res = new Res();
+    let req = {
+      body: JSON.stringify(body),
+      method: "post"
+    };
+    // js pass by ref for the win; these will both update bc of how we structured the calls
+    await handler.default(req, res);
+    // they'll need unpacked but that's a small price!
+    return {
+      req: req,
+      res: res
+    };
+  }
+}
 // process site creation
 async function siteProcess(commandRun, project, port = '3000') {
   // auto select operations to perform if requested
@@ -436,10 +579,38 @@ async function siteProcess(commandRun, project, port = '3000') {
       "icon": "av:library-add"
     }
   };
+  // allow for importSite option
+  if (commandRun.options.importSite) {
+    if (!commandRun.options.importStructure) {
+      // assume hax to hax if it's not defined
+      commandRun.options.importStructure = 'haxcmsToSite';
+    }
+    // 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, {
+        repoUrl: commandRun.options.importSite
+      });
+      if (resp.res.data && resp.res.data.data && resp.res.data.data.items) {
+        siteRequest.build.structure = 'import';
+        siteRequest.build.items = resp.res.data.data.items;
+      }
+      if (resp.res.data && resp.res.data.data && resp.res.data.data.files) {
+        siteRequest.build.files = resp.res.data.data.files;
+      }
+    }
+  }
   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) {

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.10",
+  "version": "9.0.12",
   "publishConfig": {
     "access": "public"
   },
@@ -42,19 +42,22 @@
   "dependencies": {
     "@clack/core": "0.3.4",
     "@clack/prompts": "0.7.0",
-    "@haxtheweb/haxcms-nodejs": "^9.0.15",
+    "@haxtheweb/haxcms-nodejs": "^9.0.17",
+    "@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"
   }
 }