@haxtheweb/create 9.0.5 → 9.0.8

package/dist/lib/statements.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.communityStatement = communityStatement;
+exports.haxIntro = haxIntro;
+exports.merlinSays = merlinSays;
+var _art = require("./art.js");
+var p = _interopRequireWildcard(require("@clack/prompts"));
+var _picocolors = _interopRequireDefault(require("picocolors"));
+var _promises = require("node:timers/promises");
+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; }
+async function haxIntro() {
+  console.clear();
+  await (0, _promises.setTimeout)(10);
+  console.clear();
+  p.intro(`${_picocolors.default.bgBlack(_picocolors.default.underline(_picocolors.default.gray(`Never`)))}`);
+  await (0, _promises.setTimeout)(100);
+  p.intro(`${_picocolors.default.bgBlack(_picocolors.default.red(`     stop `))}`);
+  await (0, _promises.setTimeout)(300);
+  p.intro(`${_picocolors.default.bgBlack(_picocolors.default.white(`         never`))}`);
+  await (0, _promises.setTimeout)(300);
+  p.intro(`${_picocolors.default.bgBlack(_picocolors.default.cyan(`              stopping `))}`);
+  await (0, _promises.setTimeout)(500);
+  let colors = ['blue', 'yellow', 'red', 'magenta'];
+  for (let i in _art.characters) {
+    if (i < _art.characters.length - 1) {
+      console.clear();
+      p.intro(`${_picocolors.default.bgBlack(_picocolors.default[colors[i]](`Better future loading..`))}`);
+      p.intro(_picocolors.default.bgBlack(_picocolors.default[colors[i]](_art.characters[i])));
+      let rockets = '';
+      for (let step = 0; step < i; step++) {
+        rockets += "🚀🚀🚀";
+      }
+      p.intro(rockets);
+      await (0, _promises.setTimeout)(Math.random() * 400 + 150);
+    }
+  }
+  console.clear();
+  p.intro(_picocolors.default.bgBlack(_picocolors.default.green(_art.characters.pop())));
+  p.intro(`${_picocolors.default.bgGreen(_picocolors.default.black(`     The Web : CLI    `))}
+  
+  
+    ${merlinSays('Welcome wary web wanderer')}`);
+}
+
+// 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.`))}
+    `);
+}
+
+// standardize merlin statements visually
+function merlinSays(text) {
+  return `${_picocolors.default.yellow(_picocolors.default.bgBlack(` 🧙 Merlin: `))} ${_picocolors.default.bgBlack(_picocolors.default.green(` ${text} `))}`;
+}

package/dist/{utils.js → lib/utils.js}

@@ -12,7 +12,6 @@ var path = _interopRequireWildcard(require("node:path"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SITE_FILE_NAME = exports.SITE_FILE_NAME = "site.json";
-
 /**
  * Helper to convert dash to camel; important when reading attributes.
  */

package/dist/templates/webcomponent/hax/.surgeignore

@@ -0,0 +1 @@
+!node_modules/

package/dist/templates/webcomponent/hax/.travis.yml

@@ -0,0 +1,17 @@
+language: node_js
+dist: trusty
+sudo: required
+addons:
+  firefox: "latest"
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-stable
+node_js: stable
+before_install:
+  - npm install -g web-component-tester
+install:
+  - npm install
+script:
+  - xvfb-run npm run test

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

@@ -15,12 +15,13 @@ DDD + Lit web component based on OpenWC toolchain. This is intended to provide t
 - `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 `/src/<%= name %>.js`
+- edit `./<%= 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/`
+- if you add additional `.js` files / web components then place them under `/lib/`
 - to improve HAX wiring edit file in `/lib/<%= name %>.haxProperties.json`
+- for i18n / internationalization efforts, see associated language `.json` files in `/locales/` as well as `/lib/` for haxProperties related translation examples.
 
 ## Recommended setup
 - Load VS code in 1 window to project root

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

@@ -11,7 +11,6 @@
     :root, html, body {
       margin: 0;
       padding: 0;
-      background-color: var(--ddd-accent-1);
     }
     #demo {
       margin: var(--ddd-spacing-2);
@@ -44,16 +43,18 @@
     <h2>Property usage</h2>
     <<%= name %> id="example" title="Sample property title"></<%= name %>>
   </div>
-  <script type="module" src="./src/<%= name %>.js"></script>
+  <script type="module" src="./<%= name %>.js"></script>
 
   <!-- 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);
+      color: black;
     }
     #follow-the-white-rabbit[open] summary {
       background-color: var(--ddd-accent-4) !important;
+      color: black;
     }
     #follow-the-white-rabbit[open] .content {
       padding: 0 var(--ddd-spacing-4);
@@ -98,7 +99,7 @@
         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://haxtheweb.org/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>

package/dist/templates/webcomponent/hax/locales/webcomponent.ar.haxProperties.json

@@ -0,0 +1,16 @@
+{
+    "settings": {
+        "configure": [
+            {
+                "title": "عنوان"
+            }
+        ]
+    },
+    "demoSchema": [
+        {
+            "properties": {
+              "title": "قيمة مخصصة"
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,3 @@
+{
+    "title": "عنوان"
+}

package/dist/templates/webcomponent/hax/locales/webcomponent.es.haxProperties.json

@@ -0,0 +1,16 @@
+{
+    "settings": {
+        "configure": [
+            {
+                "title": "Título"
+            }
+        ]
+    },
+    "demoSchema": [
+        {
+            "properties": {
+              "title": "Valor personalizado"
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,3 @@
+{
+    "title": "título"
+}

package/dist/templates/webcomponent/hax/locales/webcomponent.hi.haxProperties.json

@@ -0,0 +1,16 @@
+{
+    "settings": {
+        "configure": [
+            {
+                "title": "शीर्षक"
+            }
+        ]
+    },
+    "demoSchema": [
+        {
+            "properties": {
+              "title": "कस्टम मूल्य"
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,3 @@
+{
+    "title": "शीर्षक"
+}

package/dist/templates/webcomponent/hax/locales/webcomponent.zh.haxProperties.json

@@ -0,0 +1,16 @@
+{
+    "settings": {
+        "configure": [
+            {
+                "title": "标题"
+            }
+        ]
+    },
+    "demoSchema": [
+        {
+            "properties": {
+              "title": "定制值"
+            }
+        }
+    ]
+}

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

@@ -0,0 +1,3 @@
+{
+    "title": "标题"
+}

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

@@ -1,26 +1,35 @@
 {
-    "name": "<%= name %>",
+    "name": "<%= org %><%= name %>",
+    "version": "0.0.0",
     "description": "Webcomponent <%= name %> following hax / open-wc recommendations",
     "license": "Apache-2.0",
-    "author": "<%= author %>",
-    "version": "0.0.0",
+    "author": {
+      "name": "<%= author %>"
+    },
+    "keywords": [
+      "webcomponents",
+      "lit",
+      "haxtheweb"
+    ],
+    "repository": {
+      "type": "git",
+      "url": "<%= githubLink %>"
+    },
     "type": "module",
+    "main": "<%= name %>.js",
+    "module": "<%= name %>.js",
     "scripts": {
       "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"
+      "release": "npm run build && commit-and-tag-version && git push --follow-tags origin main && npm publish",
+      "test": "web-test-runner test/**/*.test.js --coverage --node-resolve",
+      "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch"
     },
-    "keywords": [
-      "haxtheweb",
-      "webcomponents",
-      "lit",
-      "generator",
-      "starter-app"
-    ],
     "dependencies": {
-      "lit": "^3.1.4",
-      "@haxtheweb/d-d-d": "^<%= version %>"
+      "lit": "^3.2.0",
+      "@haxtheweb/d-d-d": "^9.0.13",
+      "@haxtheweb/i18n-manager": "^9.0.13"
     },
     "devDependencies": {
       "@babel/preset-env": "^7.16.4",
@@ -29,7 +38,9 @@
       "@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",
+      "@open-wc/testing": "^4.0.0",
+      "@web/dev-server": "^0.4.6",
+      "@web/test-runner": "^0.19.0",
       "@web/rollup-plugin-html": "^2.3.0",
       "@web/rollup-plugin-import-meta-assets": "^2.2.1",
       "babel-plugin-template-html-minifier": "^4.1.0",
@@ -38,5 +49,12 @@
       "rimraf": "^5.0.7",
       "commit-and-tag-version": "^12.4.1"
     },
+    "private": false,
+    "publishConfig": {
+      "access": "public"
+    },
+    "hax": {
+      "cli": true
+    },
     "customElements": "custom-elements.json"
   }

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

@@ -0,0 +1,21 @@
+import { html, fixture, expect } from '@open-wc/testing';
+import "../<%= name %>.js";
+
+describe("<%= className %> test", () => {
+  let element;
+  beforeEach(async () => {
+    element = await fixture(html`
+      <<%= name %>
+        title="title"
+      ></<%= name %>>
+    `);
+  });
+
+  it("basic will it blend", async () => {
+    expect(element).to.exist;
+  });
+
+  it("passes the a11y audit", async () => {
+    await expect(element).shadowDom.to.be.accessible();
+  });
+});

package/dist/templates/webcomponent/hax/web-dev-server.config.mjs

@@ -6,6 +6,8 @@ const hmr = process.argv.includes('--hmr');
 export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   open: '/',
   watch: !hmr,
+  https: true,
+  dedupe: true,
   /** Resolve bare module imports */
   nodeResolve: {
     exportConditions: ['browser', 'development'],

package/dist/templates/webcomponent/hax/{src/webcomponent.js → webcomponent.js}

@@ -1,7 +1,18 @@
+/**
+ * Copyright <%= year %> <%= author %>
+ * @license Apache-2.0, see LICENSE for full text.
+ */
 import { LitElement, html, css } from "lit";
 import { DDDSuper } from "@haxtheweb/d-d-d/d-d-d.js";
+import { I18NMixin } from "@haxtheweb/i18n-manager/lib/I18NMixin.js";
 
-export class <%= className %> extends DDDSuper(LitElement) {
+/**
+ * `<%= name %>`
+ * 
+ * @demo index.html
+ * @element <%= name %>
+ */
+export class <%= className %> extends DDDSuper(I18NMixin(LitElement)) {
 
   static get tag() {
     return "<%= name %>";
@@ -10,14 +21,29 @@ export class <%= className %> extends DDDSuper(LitElement) {
   constructor() {
     super();
     this.title = "";
+    this.t = this.t || {};
+    this.t = {
+      ...this.t,
+      title: "Title",
+    };
+    this.registerLocalization({
+      context: this,
+      localesPath:
+        new URL("./locales/<%= name %>.ar.json", import.meta.url).href +
+        "/../",
+      locales: ["ar", "es", "hi", "zh"],
+    });
   }
 
+  // Lit reactive properties
   static get properties() {
     return {
+      ...super.properties,
       title: { type: String },
     };
   }
 
+  // Lit scoped styles
   static get styles() {
     return [super.styles,
     css`
@@ -26,23 +52,22 @@ export class <%= className %> extends DDDSuper(LitElement) {
         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));
       }
       .wrapper {
         margin: var(--ddd-spacing-2);
         padding: var(--ddd-spacing-4);
       }
-      div {
-        padding: 0;
-        margin: 0;
+      h3 span {
+        font-size: var(--<%= name %>-label-font-size, var(--ddd-font-size-s));
       }
     `];
   }
 
+  // Lit render the HTML
   render() {
     return html`
 <div class="wrapper">
-  <div>${this.title}</div>
+  <h3><span>${this.t.title}:</span> ${this.title}</h3>
   <slot></slot>
 </div>`;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haxtheweb/create",
-  "version": "9.0.5",
+  "version": "9.0.8",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,8 @@
   "scripts": {
     "build": "rm -rf dist && babel src --out-dir dist --copy-files --include-dotfiles && chmod 774 dist/create.js",
     "start": "npm run build && node ./dist/create.js && chmod 774 dist/create.js",
-    "release": "npm run build && commit-and-tag-version && git push --follow-tags origin main && npm publish"
+    "release": "npm run build && commit-and-tag-version && git push --follow-tags origin main && npm publish",
+    "haxcms-nodejs-cli": "haxcms-nodejs-cli"
   },
   "bin": {
     "create-haxtheweb": "./dist/create.js",
@@ -31,22 +32,18 @@
     "dist"
   ],
   "keywords": [
-    "haxtheweb",
-    "haxcms",
-    "haxsite",
-    "htw",
     "webcomponents",
+    "html",
     "lit",
-    "cms",
-    "generator",
-    "starter-app"
+    "haxtheweb"
   ],
   "dependencies": {
     "@clack/core": "0.3.4",
     "@clack/prompts": "0.7.0",
-    "@haxtheweb/haxcms-nodejs": "^9.0.5",
+    "@haxtheweb/haxcms-nodejs": "^9.0.11",
     "ejs": "3.1.10",
-    "picocolors": "1.0.1"
+    "picocolors": "1.0.1",
+    "commander": "12.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.6",