@haxtheweb/create 0.1.3 → 0.1.5

package/dist/create.js

@@ -105,6 +105,7 @@ async function main() {
       }, {
         onCancel: () => {
           p.cancel('🧙 Merlin: Canceling CLI.. HAX ya later 🪄');
+          communityStatement();
           process.exit(0);
         }
       });
@@ -139,7 +140,7 @@ async function main() {
           }
           break;
         case "quit":
-          p.outro(`Have a great day! Ideas to HAX faster? ${_picocolors.default.underline(_picocolors.default.cyan('https://github.com/haxtheweb/issues'))}`);
+          // quit
           break;
       }
     }
@@ -150,7 +151,7 @@ async function main() {
     };
     while (project.type !== 'quit') {
       if (activeProject) {
-        p.note(` 🧙🪄 BE GONE ${activeProject} sub-process daemon! 🪄 + ✨ 👹 = 💀 `);
+        p.note(` 🧙🪄 BE GONE ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgGreen(activeProject)))} sub-process daemon! 🪄 + ✨ 👹 = 💀 `);
       }
       project = await p.group({
         type: ({
@@ -176,6 +177,7 @@ async function main() {
       }, {
         onCancel: () => {
           p.cancel('🧙🪄 Merlin: Leaving so soon? HAX ya later');
+          communityStatement();
           process.exit(0);
         }
       });
@@ -226,6 +228,9 @@ async function main() {
                 if (!value) {
                   return "Name is required (tab writes default)";
                 }
+                if (/^\d/.test(value)) {
+                  return "Name cannot start with a number";
+                }
                 if (value.indexOf(' ') !== -1) {
                   return "No spaces allowed in project name";
                 }
@@ -253,19 +258,19 @@ async function main() {
             let initialValues = [];
             if (results.type === "webcomponent") {
               options = [{
+                value: 'launch',
+                label: 'Launch project',
+                hint: 'recommended, requires install'
+              }, {
                 value: 'install',
-                label: 'Install dependencies (via npm)',
+                label: 'Install dependencies via npm',
                 hint: 'recommended'
               }, {
                 value: 'git',
-                label: 'Put in version control (git)',
+                label: 'Apply version control via git',
                 hint: 'recommended'
-              }, {
-                value: 'launch',
-                label: 'Launch project on creation',
-                hint: 'recommended (requires install)'
               }];
-              initialValues = ['install', 'git', 'launch'];
+              initialValues = ['launch', 'install', 'git'];
             } else {
               options = [{
                 value: 'launch',
@@ -275,7 +280,7 @@ async function main() {
               initialValues = ['launch'];
             }
             return p.multiselect({
-              message: 'Additional setup options',
+              message: 'Additional setup',
               initialValues: initialValues,
               options: options,
               required: false
@@ -284,11 +289,13 @@ async function main() {
         }, {
           onCancel: () => {
             p.cancel('🧙🪄 Merlin: Canceling CLI.. HAX ya later');
+            communityStatement();
             process.exit(0);
           }
         });
-        // values not set but important for templating
+        // values not set by user but used in templating
         project.className = (0, _utils.dashToCamel)(project.name);
+        project.year = new Date().getFullYear();
         project.version = await HAXCMS.getHAXCMSVersion();
         let s = p.spinner();
         // we can do this if it's a multisite
@@ -330,6 +337,21 @@ async function main() {
             await (0, _promises.setTimeout)(500);
             break;
           case 'webcomponent':
+            // option to build github repo link for the user
+            if (project.extras.includes('git')) {
+              project.gitRepo = await p.text({
+                message: 'Git Repo location:',
+                placeholder: `git@github.com:${project.author}/${project.name}.git`
+              });
+              // if they supplied one and it has github in it, build a link automatically for ejs index
+              if (project.gitRepo && project.gitRepo.includes('github.com')) {
+                project.githubLink = project.gitRepo.replace('git@github.com:', 'https://github.com/').replace('.git', '');
+              } else {
+                project.githubLink = null;
+              }
+            } else {
+              project.githubLink = null;
+            }
             s.start(merlinSays('Copying project files'));
             // leverage this little helper from HAXcms
             await HAXCMS.recurseCopy(`${process.mainModule.path}/templates/${project.type}/hax/`, `${project.path}/${project.name}`);
@@ -356,18 +378,15 @@ async function main() {
             s.stop('Files are now awesome!');
             break;
         }
-        if (project.extras.includes('git')) {
-          project.gitRepo = await p.text({
-            message: 'Git Repo location:',
-            placeholder: `git@github.com:${project.author}/${project.name}.git`
-          });
+        if (project.gitRepo) {
           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 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
-        if (project.extras.includes('install')) {
-          s.start(merlinSays(`Let's install everything using magic (npm)`));
+        // can't launch if we didn't install first so launch implies installation
+        if (project.extras.includes('launch') || project.extras.includes('install')) {
+          s.start(merlinSays(`Installation magic (npm install)`));
           try {
             await exec(`cd ${project.path}/${project.name} && npm install`);
           } catch (e) {
@@ -377,22 +396,30 @@ async function main() {
         }
         // autolaunch if default was selected
         if (project.extras.includes('launch')) {
+          let optionPath = `${project.path}/${project.name}`;
+          let command = `npx @haxtheweb/haxcms-nodejs`;
+          if (project.type === "webcomponent") {
+            command = `npm start`;
+          }
           p.note(`${merlinSays(`I have summoned a sub-process daemon 👹`)}
-Running ${project.type}
-Launched from: ${project.path}/${project.name}
 
-To resume 🧙 Merlin press ⌨️: ${_picocolors.default.black(_picocolors.default.bgRed(`CTRL + C`))}
+🚀  Running your ${_picocolors.default.bold(project.type)} ${_picocolors.default.bold(project.name)}:
+      ${_picocolors.default.underline(_picocolors.default.cyan('http://localhost:8000'))}
+
+🏠  Launched from: ${_picocolors.default.underline(_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${optionPath}`))))}
+💻  Navigate to folder: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`cd ${optionPath}`)))}
+🚧  Launch later with command: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`${command}`)))}
+📂  Open folder: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`open ${optionPath}`)))}
+📘  VS Code Project: ${_picocolors.default.bold(_picocolors.default.yellow(_picocolors.default.bgBlack(`code ${optionPath}`)))}
+
+⌨️  To resume 🧙 Merlin press: ${_picocolors.default.bold(_picocolors.default.black(_picocolors.default.bgRed(` CTRL + C `)))}
 `);
-          await (0, _promises.setTimeout)(2000);
-          let optionPath = `${project.path}/${project.name}`;
-          if (project.type === "webcomponent") {
-            try {
-              await exec(`cd ${optionPath} && npm start`);
-            } catch (e) {}
-          } else {
-            try {
-              await exec(`cd ${optionPath} && npx @haxtheweb/haxcms-nodejs`);
-            } catch (e) {}
+          // at least a second to see the message print at all
+          await (0, _promises.setTimeout)(1000);
+          try {
+            await exec(`cd ${optionPath} && ${command}`);
+          } catch (e) {
+            // don't log bc output is weird
           }
         } else {
           let nextSteps = `cd ${project.path}/${project.name} && `;
@@ -412,16 +439,24 @@ To resume 🧙 Merlin press ⌨️: ${_picocolors.default.black(_picocolors.defa
         }
       }
     }
-    p.outro(`
-🔮  Ideas to HAX better, faster, stronger: ${_picocolors.default.underline(_picocolors.default.cyan('https://github.com/haxtheweb/issues'))}
-
-👔  Share on LinkedIn: ${_picocolors.default.underline(_picocolors.default.cyan('https://bit.ly/hax-linkedin'))}
-
-🧵  Share on X: ${_picocolors.default.underline(_picocolors.default.cyan('https://bit.ly/hax-x'))}
-
-💬  Join our Community: ${_picocolors.default.underline(_picocolors.default.cyan('https://bit.ly/hax-discord'))}
-
-`);
   }
+  communityStatement();
 }
-main().catch(console.error);
+main().catch(console.error);
+
+// standard community statement so we can leverage on cancel executions
+function communityStatement() {
+  p.outro(`
+    🧙  HAX @ Penn State: ${_picocolors.default.underline(_picocolors.default.cyan('https://hax.psu.edu'))}
+    
+    🔮  Ideas to HAX Harder, Better, Faster, Stronger: ${_picocolors.default.underline(_picocolors.default.white('https://github.com/haxtheweb/issues/issues'))}
+    
+    👔  Share on LinkedIn: ${_picocolors.default.underline(_picocolors.default.cyan('https://bit.ly/hax-the-linkedin'))}
+    
+    🧵  Tweet on X: ${_picocolors.default.underline(_picocolors.default.white('https://bit.ly/hax-the-x'))}
+    
+    💬  Join Community: ${_picocolors.default.underline(_picocolors.default.cyan('https://bit.ly/hax-discord'))}
+    
+    💡  ${_picocolors.default.bold(_picocolors.default.white(`Never. Stop. Innovating.`))}
+  `);
+}

package/dist/templates/webcomponent/hax/LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright (c) 2024 <%= author %>
+   Copyright (c) <%= year %> <%= author %>
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package/dist/templates/webcomponent/hax/README.md

@@ -1,16 +1,26 @@
 # <%= name %>
-HAX The Web Boilerplate based on OpenWC intended to quick start contribution via Vercel and web components ecosystems.
+DDD + Lit web component based on OpenWC toolchain. This is intended to provide the following:
+- Look good via DDD, HAX design system
+- Simple, easy to read code via Lit
+- Great workflow via OpenWC tooling + Vercel for sharing demos
+- Simplify contribution to the HAX ecosystem
+- Publish and distribute via npmjs.com
 
-## Install
-- `yarn install` - installs dependencies to get workin
+## Install dependencies
+- `npm install` - installs dependencies so you can work
 
-## Scripts
-- `yarn start` runs your web component for development, reloading on file changes
-- `yarn run build` builds your web component and outputs it in your `dist` directory for placement on web servers in a compiled form
+## Commands
+- `npm start` - runs your web component for development, reloading on file changes
+- `npm run build` - builds your web component and outputs it in your `dist` directory for placement on web servers in a compiled form. Vercel automatically does this on commit to github.
+- `npm run release` - this will build your code, update the version, and publish it to npm for others to use
 
 ## Working with your web component
-- edit files in the `/src/` directory
+- edit `/src/<%= name %>.js`
+- edit your 'demo' by modifying `./index.html`
+- add dependencies using `npm install --save @whatever/repo` or editing `./package.json` directly
 - if you must reference additional non-JS files, ensure you use the `new URL('./my-file.jpg', import.meta.url).href` syntax so that it builds correctly
+- if you add additional `.js` files / web components then place them under `/src/`
+- to improve HAX wiring edit file in `/lib/<%= name %>.haxProperties.json`
 
 ## Recommended setup
 - Load VS code in 1 window to project root
@@ -18,20 +28,21 @@ HAX The Web Boilerplate based on OpenWC intended to quick start contribution via
 - Right click -> Inspect and open the Console to see error output
 
 ## Recommended Integrated Development Environment (IDE)
-- VSCode https://code.visualstudio.com/Download
+- [VSCode](https://code.visualstudio.com/Download)
 
 ### Plugins
 
 Name: lit-html
-Id: bierner.lit-html
 Description: Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
-Version: 1.11.1
 Publisher: Matt Bierner
 VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html
 
 Name: lit-plugin
-Id: runem.lit-plugin
 Description: Syntax highlighting, type checking and code completion for lit-html
-Version: 1.4.3
 Publisher: Rune Mehlsen
-VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin
+VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin
+
+# Credits
+A brighter future dreamed and developed by the Penn State [HAXTheWeb](https://hax.psu.edu/) initative.
+
+Never. Stop. innovating.

package/dist/templates/webcomponent/hax/index.html

@@ -8,35 +8,123 @@
   <meta name="Description" content="Demonstration for <%= name %>">
 
   <style>
-    :root,
-    html,
-    body {
+    :root, html, body {
       margin: 0;
       padding: 0;
-      background-color: #ededed;
+      background-color: var(--ddd-accent-1);
+    }
+    #demo {
+      margin: var(--ddd-spacing-2);
     }
     <%= name %> {
-      margin: 16px;
+      margin: var(--ddd-spacing-2);
+      border: var(--ddd-border-md);
+      border-radius: var(--ddd-radius-lg);
     }
-    #demo1 {
-      --<%= name %>-font-size: var(--ddd-font-size-xs);
-      background-color: var(--ddd-accent-5);
+    <%= name %>:hover {
+      box-shadow: var(--ddd-boxShadow-sm);
     }
-    #demo2 {
+    #example {
       --<%= name %>-font-size: var(--ddd-font-size-l);
-      background-color: var(--ddd-accent-8);
-      color: var(--ddd-primary-15);
+      background-color: var(--ddd-accent-2);
+      color: var(--ddd-primary-17);
     }
   </style>
   <title><%= name %></title>
 </head>
 
 <body>
-  <h1><%= name %></h1>
-  <!-- this is going to do whatever the tag's defaults are -->
-  <<%= name %> id="demo1"><div>Sample Slot Content</div></<%= name %>>
-  <<%= name %> id="demo2" title="Sample Title Content"></<%= name %>>
+  <div id="demo">
+    <h1><%= name %></h1>
+    <!-- this is going to do whatever the tag's defaults are -->
+    <h2>Default</h2>
+    <<%= name %>></<%= name %>>
+    <h2>Slot usage</h2>
+    <<%= name %> data-accent="2" data-primary="17"><div>Sample slot content</div></<%= name %>>
+    <h2>Property usage</h2>
+    <<%= name %> id="example" title="Sample property title"></<%= name %>>
+  </div>
   <script type="module" src="./src/<%= name %>.js"></script>
-</body>
 
+  <!-- Take HAX, the Web and you further down the rabbit hole -->
+  <style>
+    #follow-the-white-rabbit {
+      margin: var(--ddd-spacing-4) auto 64px  16px;
+      background-color: var(--ddd-accent-4);
+    }
+    #follow-the-white-rabbit[open] summary {
+      background-color: var(--ddd-accent-4) !important;
+    }
+    #follow-the-white-rabbit[open] .content {
+      padding: 0 var(--ddd-spacing-4);
+    }
+    #follow-the-white-rabbit ul,
+    #follow-the-white-rabbit li {
+      padding: 0;
+      margin: 0;
+    }
+    #follow-the-white-rabbit li {
+      font-size: var(--ddd-font-size-xs);
+      list-style: none;
+    }
+    #follow-the-white-rabbit li strong,
+    #follow-the-white-rabbit li a {
+      padding: var(--ddd-spacing-2) var(--ddd-spacing-4);
+      color: black;
+      display: block;
+      font-weight: bold;
+    }
+    #follow-the-white-rabbit li:focus-within a,
+    #follow-the-white-rabbit li:hover a {
+      background-color: black;
+      color: yellow;
+    }
+  </style>
+  <details id="follow-the-white-rabbit" open>
+    <summary>How to Develop</summary>
+    <div class="content">
+      <p>
+      <%if (githubLink) { %>
+        <strong>Checkout project on github:</strong> <a href="<%= githubLink %>" target="_blank" rel="nofollow"><%= author %>/<%= name %></a>
+        <% } %>
+      </p>
+      <p>
+        You can edit the current page by modifying <code>index.html</code><br />
+        To edit your <strong><%= name %></strong> tag, modify <code>src/<%= name %>.js</code>.
+        This file contains all the HTML, CSS and JavaScript used to render your elements above!
+      </p>
+      <p>
+        Web components are easy to follow once you get used to their pattern.
+        Below are links to help on your journey. Good luck, we need you!
+      </p>
+      <ul>
+        <li><a href="https://oer.hax.psu.edu/bto108/sites/haxcellence/documentation/ddd" target="_blank">🧑‍🎨 Learn DDD HAX Design system</a></li>
+        <li><a href="https://lit.dev/playground/" target="_blank" rel="nofollow">🔥 Learn Lit</a></li>
+        <li><a href="https://hax.psu.edu" target="_blank">🧙 HAX The Web @ Penn State</a></li>
+      </ul>
+      <h2>Join and Share HAX</h2>
+      <ul>
+        <li><a href="https://github.com/haxtheweb/issues/issues" target="_blank" rel="nofollow">🔮 Ideas to HAX Harder, Better, Faster, Stronger</a></li>
+        <li><a href="https://bit.ly/hax-the-linkedin" target="_blank" rel="nofollow">👔 Share on LinkedIn</a></li>
+        <li><a href="https://bit.ly/hax-the-x" target="_blank" rel="nofollow">🧵 Tweet on X</a></li>
+        <li><a href="https://bit.ly/hax-discord" target="_blank" rel="nofollow">💬 Join Community</a></li>
+      </ul>
+      <h2>Learn the languages and tools</h2>
+      <ul>
+        <li><a href="https://w3schools.com" target="_blank" rel="nofollow">🌐 Learn HTML</a></li>
+        <li><a href="https://web.dev/learn/css/" target="_blank" rel="nofollow">🎨 Learn CSS</a></li>
+        <li><a href="http://Javascript.info" target="_blank" rel="nofollow">💻 Learn JavaScript (JS)</a></li>
+        <li><a href="https://gitimmersion.com" target="_blank" rel="nofollow">🦺 Learn Git / Github</a></li>
+        <li><a href="https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/" target="_blank" rel="nofollow">📦 Learn NPM</a></li>
+        <li><a href="http://learnux.io" target="_blank" rel="nofollow">📐 Learn UX / UI development</a></li>
+      </ul>
+      <h2>Find purpose and inspiration</h2>
+      <ul>
+        <li><a href="https://www.youtube.com/watch?v=eC7xzavzEKY" target="_blank" rel="nofollow">🐟 This is Water - David Foster Wallace</a></li>
+        <li><a href="https://www.youtube.com/watch?v=kYfNvmF0Bqw" target="_blank" rel="nofollow">🏗️ Secrets of Life - Steve Jobs</a></li>
+        <li><strong>💡 <em>Never. Stop. Innovating.</em></strong></li>
+      </ul>
+    </div>
+  </details>
+</body>
 </html>

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

@@ -1,42 +1,51 @@
 {
+    "api": "1",
     "canScale": true,
     "canEditSource": true,
+    "type": "element",
+    "designSystem": {
+        "accent": true,
+        "primary": true,
+        "card": true,
+        "text": true,
+        "designTreatment": false
+    },
     "gizmo": {
-      "title": "<%= name %>",
-      "description": "",
-      "icon": "book",
-      "color": "green",
-      "tags": [
-        "Other"
-      ],
-      "handles": [],
-      "meta": {
-        "author": "<%= author %>"
-      }
+        "title": "<%= name %>",
+        "description": "",
+        "icon": "icons:android",
+        "color": "purple",
+        "tags": [
+            "Other"
+        ],
+        "handles": [],
+        "meta": {
+            "author": "<%= author %>"
+        }
     },
     "settings": {
-      "configure": [
-        {
-          "property": "title",
-          "title": "Title",
-          "description": "Title of <%= name %>",
-          "inputMethod": "textfield",
-          "icon": "editor:title",
-          "required": true
-        }
-      ]
+        "configure": [
+            {
+                "property": "title",
+                "title": "Title",
+                "description": "",
+                "inputMethod": "textfield",
+                "icon": "editor:title",
+                "required": true
+            }
+        ]
     },
     "saveOptions": {
-      "wipeSlot": false,
-      "unsetAttributes": []
+        "wipeSlot": false,
+        "unsetAttributes": []
     },
     "demoSchema": [
-      {
-        "tag": "<%= name %>",
-        "properties": {
-        },
-        "content": ""
-      }
+        {
+            "tag": "<%= name %>",
+            "properties": {
+              "title": "Sample property title"
+            },
+            "content": ""
+        }
     ]
-  }
-  
+}

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

@@ -4,30 +4,39 @@
     "license": "Apache-2.0",
     "author": "<%= author %>",
     "version": "0.0.0",
+    "type": "module",
     "scripts": {
-      "build": "rimraf public && rollup -c rollup.config.js && yarn run analyze --exclude public",
-      "analyze": "cem analyze --litelement",
-      "start": "web-dev-server"
+      "start": "web-dev-server",
+      "build": "rimraf public && rollup -c rollup.config.js && npm run analyze",
+      "analyze": "cem analyze --litelement --exclude public",
+      "release": "npm run build && commit-and-tag-version && git push --follow-tags origin main && npm publish"
     },
+    "keywords": [
+      "haxtheweb",
+      "webcomponents",
+      "lit",
+      "generator",
+      "starter-app"
+    ],
     "dependencies": {
-      "lit": "^3.1.3",
+      "lit": "^3.1.4",
       "@haxtheweb/d-d-d": "<%= version %>"
     },
     "devDependencies": {
       "@babel/preset-env": "^7.16.4",
       "@custom-elements-manifest/analyzer": "^0.4.17",
-      "@open-wc/building-rollup": "^2.0.1",
-      "@open-wc/testing": "next",
-      "@rollup/plugin-babel": "^5.3.0",
-      "@rollup/plugin-node-resolve": "^13.0.6",
-      "@web/dev-server": "^0.1.28",
-      "@web/rollup-plugin-html": "^1.10.1",
-      "@web/rollup-plugin-import-meta-assets": "^1.0.7",
+      "@open-wc/building-rollup": "^3.0.2",
+      "@rollup/plugin-babel": "^6.0.4",
+      "@rollup/plugin-node-resolve": "^15.2.3",
+      "@rollup/plugin-terser": "^0.4.4",
+      "@web/dev-server": "^0.4.5",
+      "@web/rollup-plugin-html": "^2.3.0",
+      "@web/rollup-plugin-import-meta-assets": "^2.2.1",
       "babel-plugin-template-html-minifier": "^4.1.0",
-      "deepmerge": "^4.2.2",
-      "rimraf": "^3.0.2",
-      "rollup": "^2.60.0",
-      "rollup-plugin-terser": "^7.0.2"
+      "babel-plugin-transform-dynamic-import": "^2.1.0",
+      "rollup-plugin-esbuild": "^6.1.1",
+      "rimraf": "^5.0.7",
+      "commit-and-tag-version": "^12.4.1"
     },
     "customElements": "custom-elements.json"
   }

package/dist/templates/webcomponent/hax/rollup.config.js

@@ -1,8 +1,8 @@
 import nodeResolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
-import html from '@web/rollup-plugin-html';
+import { rollupPluginHTML as html } from '@web/rollup-plugin-html';
 import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';
-import { terser } from 'rollup-plugin-terser';
+import esbuild from 'rollup-plugin-esbuild';
 
 export default {
   input: 'index.html',
@@ -19,36 +19,21 @@ export default {
     /** Enable using HTML as rollup entrypoint */
     html({
       minify: true,
-      injectServiceWorker: true,
-      serviceWorkerPath: 'public/sw.js',
     }),
     /** Resolve bare module imports */
     nodeResolve(),
-    /** Minify JS */
-    terser(),
+    /** Minify JS, compile JS to a lower language target */
+    esbuild({
+      minify: true,
+      target: ['chrome64', 'firefox67', 'safari11.1'],
+    }),
     /** Bundle assets references via import.meta.url */
     importMetaAssets(),
-    /** Compile JS to a lower language target */
+    /** Minify html and css tagged template literals */
     babel({
-      babelHelpers: 'bundled',
-      presets: [
-        [
-          require.resolve('@babel/preset-env'),
-          {
-            targets: [
-              'last 3 Chrome major versions',
-              'last 3 Firefox major versions',
-              'last 3 Edge major versions',
-              'last 3 Safari major versions',
-            ],
-            modules: false,
-            bugfixes: true,
-          },
-        ],
-      ],
       plugins: [
         [
-          require.resolve('babel-plugin-template-html-minifier'),
+          'babel-plugin-template-html-minifier',
           {
             modules: { lit: ['html', { name: 'css', encapsulation: 'style' }] },
             failOnError: false,

package/dist/templates/webcomponent/hax/src/webcomponent.js

@@ -23,20 +23,28 @@ export class <%= className %> extends DDDSuper(LitElement) {
     css`
       :host {
         display: block;
+        color: var(--ddd-theme-primary);
+        background-color: var(--ddd-theme-accent);
+        font-family: var(--ddd-font-navigation);
+        font-size: var(--<%= name %>-font-size, var(--ddd-font-size-s));
       }
-      p {
-        font-size: var(--<%= name %>-font-size);
+      .wrapper {
+        margin: var(--ddd-spacing-2);
+        padding: var(--ddd-spacing-4);
+      }
+      div {
+        padding: 0;
+        margin: 0;
       }
     `];
   }
-  
 
   render() {
     return html`
-      <div class="wrapper">
-        <p>${this.title}</p>
-        <slot></slot>
-      </div>`;
+<div class="wrapper">
+  <div>${this.title}</div>
+  <slot></slot>
+</div>`;
   }
 
   /**
@@ -48,4 +56,4 @@ export class <%= className %> extends DDDSuper(LitElement) {
   }
 }
 
-globalThis.customElements.define(<%= className %>.tag,  <%= className %>);
+globalThis.customElements.define(<%= className %>.tag, <%= className %>);

package/dist/utils.js

@@ -17,7 +17,7 @@ const SITE_FILE_NAME = exports.SITE_FILE_NAME = "site.json";
  * Helper to convert dash to camel; important when reading attributes.
  */
 function dashToCamel(str) {
-  return str.replace(/-([a-z])/g, function (g) {
+  return str.replace(/-([a-z0-9])/g, function (g) {
     return g[1].toUpperCase();
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haxtheweb/create",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "publishConfig": {
     "access": "public"
   },
@@ -24,7 +24,8 @@
     "release": "npm run build && commit-and-tag-version && git push --follow-tags origin main && npm publish"
   },
   "bin": {
-    "create-haxtheweb": "./dist/create.js"
+    "create-haxtheweb": "./dist/create.js",
+    "hax": "./dist/create.js"
   },
   "files": [
     "dist"
@@ -36,6 +37,7 @@
     "htw",
     "webcomponents",
     "lit",
+    "cms",
     "generator",
     "starter-app"
   ],
@@ -44,17 +46,13 @@
     "@clack/prompts": "0.7.0",
     "picocolors": "1.0.1",
     "ejs": "3.1.10",
-    "@haxtheweb/haxcms-nodejs": "0.0.13"
+    "@haxtheweb/haxcms-nodejs": "^0.0.15"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.6",
     "@babel/core": "^7.24.6",
     "@babel/register": "^7.24.6",
     "@custom-elements-manifest/analyzer": "^0.10.2",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@web/rollup-plugin-html": "^2.3.0",
-    "@web/rollup-plugin-import-meta-assets": "^2.2.1",
     "babel-plugin-transform-dynamic-import": "^2.1.0",
     "@babel/preset-env": "7.24.6",
     "commit-and-tag-version": "12.4.1"