@ornery/web-components 1.1.8 → 4.0.0

package/.github/workflows/publish.yml

@@ -0,0 +1,25 @@
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+
+      - run: npm install
+
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/esbuild.js

@@ -0,0 +1,2 @@
+import { unplugin } from './src/plugin.js';
+export default unplugin.esbuild;

package/html.d.ts

@@ -0,0 +1,7 @@
+declare module '*.html' {
+  type ConnectableNodeList = Node[] & {
+    connect(root?: Element | DocumentFragment): Element | DocumentFragment | undefined;
+  };
+  const template: (props?: Record<string, unknown>) => ConnectableNodeList;
+  export default template;
+}

package/index.js

@@ -1,17 +1,7 @@
-const ContextBinding = require('./src/context-binding');
-const DataManager = require('./src/data-manager');
-const EventMap = require('./src/event-map');
-const i18n = require('./src/i18n');
-const utils = require('./src/utils');
-const bindEvents = require('./src/bind-events');
-const setupConnect = require('./src/setup-connect');
-
-module.exports = {
-  ContextBinding,
-  DataManager,
-  EventMap,
-  bindEvents,
-  setupConnect,
-  ...i18n,
-  ...utils,
-};
+export { default as ContextBinding } from './src/context-binding.js';
+export { default as DataManager } from './src/data-manager.js';
+export { default as EventMap } from './src/event-map.js';
+export { I18n } from './src/i18n.js';
+export { default as bindEvents } from './src/bind-events.js';
+export { default as setupConnect } from './src/setup-connect.js';
+export * from './src/utils.js';

package/jestLoader.js

@@ -1,5 +1,7 @@
-const HtmlLoader = require('./src/loaders/html-loader');
+import { transformHTML } from './src/loaders/html-loader.js';
 
-module.exports = {
-  process: (src) => HtmlLoader(src),
+export default {
+  processAsync: async (src, filename) => ({
+    code: await transformHTML(src, filename),
+  }),
 };

package/loader.js

@@ -1,2 +1 @@
-const HtmlLoader = require('./src/loaders/html-loader');
-module.exports = HtmlLoader;
+export { default } from './webpack.js';

package/package.json

@@ -1,31 +1,39 @@
 {
   "name": "@ornery/web-components",
-  "version": "1.1.8",
+  "version": "4.0.0",
   "description": "WebComponents html loader and optional runtime mixins to enable creation of custom HTML elements using es6 template literal syntax in *.html files.",
+  "type": "module",
   "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./templates": "./templates.js",
+    "./loader": "./loader.js",
+    "./vite": "./vite.js",
+    "./webpack": "./webpack.js",
+    "./rollup": "./rollup.js",
+    "./esbuild": "./esbuild.js",
+    "./rspack": "./rspack.js",
+    "./html.d.ts": "./html.d.ts"
+  },
+  "types": "./html.d.ts",
   "scripts": {
-    "docs": "jsdoc2md src/loaders/*.js src/*.js > README.md"
+    "docs": "jsdoc2md src/loaders/*.js src/*.js > README.md",
+    "test": "node --test tests/*.test.mjs"
   },
   "author": "timothyswt@gmail.com",
   "license": "MIT",
   "dependencies": {
-    "es6-templates": "^0.2.3",
-    "fastparse": "^1.1.1",
-    "html-minifier": "^3.5.8",
-    "html-webpack-plugin": "^3.2.0",
-    "loader-utils": "^1.1.0",
-    "node-sass": "^6.0.0",
-    "sass": "^1.34.0"
+    "fastparse": "^1.1.2",
+    "html-minifier-terser": "^7.2.0",
+    "sass": "^1.86.0",
+    "unplugin": "^3.0.0"
   },
   "devDependencies": {
-    "eslint": "^6.8.0",
-    "eslint-config-babel": "^9.0.0",
-    "eslint-config-google": "^0.13.0",
-    "eslint-plugin-jsdoc": "^15.8.0",
-    "jsdoc": "^3.6.3",
-    "jsdoc-to-markdown": "^5.0.0"
-  },
-  "peerDependencies": {
-    "node-sass": "^4.13.1"
+    "eslint": "^9.0.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-jsdoc": "^50.0.0",
+    "jsdoc": "^4.0.0",
+    "jsdoc-to-markdown": "^9.0.0",
+    "jsdom": "^29.1.1"
   }
 }

package/rollup.js

@@ -0,0 +1,2 @@
+import { unplugin } from './src/plugin.js';
+export default unplugin.rollup;

package/rspack.js

@@ -0,0 +1,2 @@
+import { unplugin } from './src/plugin.js';
+export default unplugin.rspack;

package/src/bind-events.js

@@ -1,4 +1,4 @@
-const {template} = require('./utils');
+import {template} from './utils.js';
 /**
  * @param {HTMLElement} root The root element to find all elements from.
  * @param {Object} context the context object for finding functions to bind against. default is the root element
@@ -96,4 +96,4 @@ const bindEvents = (root, context = root) => {
   return root;
 };
 
-module.exports = bindEvents;
+export default bindEvents;

package/src/context-binding.js

@@ -1,5 +1,5 @@
 
-module.exports = (superclass) =>
+export default (superclass) =>
 /**
  * @class ContextBinding
  * @param {class} superclass inheriting class

package/src/data-manager.js

@@ -1,34 +1,33 @@
-const EventMap = require('./event-map');
+import EventMap from './event-map.js';
 
-module.exports = (() => {
-  /**
+/**
    * @class DataStore
    * @description Configuration values can be set and propagated to consuming
    * components via this static class or through
    * the corresponding wc-config element
    */
-  const DataStore = new class {
-    constructor() {
-      this._state = new EventMap();
-    }
+class DataManager {
+  constructor() {
+    this._state = new EventMap();
+  }
 
-    /**
+  /**
      * @memberOf DataStore
      * @param {String} key
      * @return {Object} the current value of the requested property name.
      */
-    get(key) {
-      return key ? this._state.get(key) : this._state.getAll();
-    }
+  get(key) {
+    return key ? this._state.get(key) : this._state.getAll();
+  }
 
-    /**
+  /**
      * @memberOf DataStore
      * @return {Object} the current state object.
      */
-    getState() {
-      return this._state.getAll();
-    }
-    /**
+  getState() {
+    return this._state.getAll();
+  }
+  /**
      * @memberOf DataStore
      * @param {String|Object} key the name of the value to set.
      * It can also be called with an {} query to set multiple values at once.
@@ -36,59 +35,59 @@ module.exports = (() => {
      * @return {{state}|*}
      * @description wraps this.set
      */
-    set(key, value) {
-      let query = key;
-      if (value) {
-        // we have a single value
-        query = {[key]: value};
-      }
-      return this._state.replace({...this._state.getAll(), ...query});
+  set(key, value) {
+    let query = key;
+    if (value) {
+      // we have a single value
+      query = {[key]: value};
     }
+    return this._state.replace({...this._state.getAll(), ...query});
+  }
 
-    /**
+  /**
      * @memberOf DataStore
      * @param {Object} newState the new state object.
      * @return {{state}|*}
      * @description wraps this.set
      */
-    setState(newState) {
-      return this.set(newState);
-    }
-    /**
+  setState(newState) {
+    return this.set(newState);
+  }
+  /**
      * @memberOf DataStore
      * @param {Function} callback is the function to execute when any property changes.
      * @return {{destroy}|*}
      * @description call destroy() on the returned object to remove the event listener.
      */
-    subscribe(callback) {
-      return callback && this._state.on('set', callback);
-    }
+  subscribe(callback) {
+    return callback && this._state.on('set', callback);
+  }
 
-    /**
+  /**
      * @memberOf DataStore
      * @param {Array} keys the property names to be notified when they mutate
      * @param {Function} callback the callback to be executed when any of the value for any of those keys have changed.
      * @return {{destroy}|*}
      * @description call destroy() on the returned object to remove the event listener.
      */
-    subscribeTo(keys, callback) {
-      keys = typeof (keys) === 'string' ? [keys] : keys;
-      return this.subscribe((event, newState, oldState) => {
-        let updates;
-        keys.forEach((property) => {
-          if (newState[property] !== oldState[property]) {
-            updates = {
-              ...updates,
-              [property]: {
-                oldValue: oldState[property],
-                newValue: newState[property],
-              },
-            };
-          }
-        });
-        updates && callback(updates, newState, oldState);
+  subscribeTo(keys, callback) {
+    keys = typeof (keys) === 'string' ? [keys] : keys;
+    return this.subscribe((event, newState, oldState) => {
+      let updates;
+      keys.forEach((property) => {
+        if (newState[property] !== oldState[property]) {
+          updates = {
+            ...updates,
+            [property]: {
+              oldValue: oldState[property],
+              newValue: newState[property],
+            },
+          };
+        }
       });
-    }
-  };
-  return DataStore;
-})();
+      updates && callback(updates, newState, oldState);
+    });
+  }
+}
+
+export default DataManager;

package/src/event-map.js

@@ -2,7 +2,7 @@
  * @class EventMap
  * @description provides an event bus for when properties of the underlying Map change.
  */
-module.exports = class EventMap {
+export default class EventMap {
   constructor() {
     this._map = new Map();
     this._subscribers = {