@ornery/web-components 2.0.0 → 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": "2.0.0",
+  "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,4 +1,4 @@
-const EventMap = require('./event-map');
+import EventMap from './event-map.js';
 
 /**
    * @class DataStore
@@ -90,4 +90,4 @@ class DataManager {
   }
 }
 
-module.exports = DataManager;
+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 = {

package/src/i18n.js

@@ -1,9 +1,8 @@
-const DataManager = require('./data-manager');
-const {template, getFromObj, toLowerMap} = require('./utils');
+import DataManager from './data-manager.js';
+import {template, getFromObj, toLowerMap} from './utils.js';
 
-if (typeof HTMLElement === 'undefined') {
-  // eslint-disable-next-line no-global-assign
-  HTMLElement = class {};
+if (typeof globalThis.HTMLElement === 'undefined') {
+  globalThis.HTMLElement = class {};
 }
 
 /**
@@ -246,6 +245,4 @@ class I18n {
   }
 }
 
-module.exports = {
-  I18n,
-};
+export { I18n };

package/src/index.js

@@ -1,13 +1,11 @@
-import ContextBinding from './context-binding';
-import DataManager from './data-manager';
-import EventMap from './event-map';
-import HTMLLoader from './loaders/html-loader';
-export * from './utils';
+import ContextBinding from './context-binding.js';
+import DataManager from './data-manager.js';
+import EventMap from './event-map.js';
+export * from './utils.js';
+export * from './i18n.js';
 
 export {
   ContextBinding,
   DataManager,
   EventMap,
 };
-
-export default HTMLLoader;

package/src/loaders/attrs-parser.js

@@ -1,4 +1,4 @@
-const Parser = require('fastparse');
+import Parser from 'fastparse';
 
 const attrsParser = new Parser({
   outside: {
@@ -41,7 +41,7 @@ const attrsParser = new Parser({
   },
 });
 
-module.exports = (html, tagAttr) => {
+export default (html, tagAttr) => {
   return attrsParser.parse('outside', html, {
     currentTag: null,
     results: [],

package/src/loaders/html-loader.js

@@ -1,91 +1,69 @@
-const htmlMinifier = require('html-minifier');
-const attrParse = require('./attrs-parser');
-const loaderUtils = require('loader-utils');
-const url = require('url');
-const fs = require('fs');
-const path = require('path');
-const {compile} = require('es6-templates');
+import { minify } from 'html-minifier-terser';
+import attrParse from './attrs-parser.js';
+import * as sass from 'sass';
+import fs from 'fs';
+import path from 'path';
 
-const templateWrapStart = 'const {bindEvents, setupConnect} = require("@ornery/web-components/templates"); module.exports = (p = {})=> { const parsed = new DOMParser().parseFromString(function(props){return ';
-const templateWrapEnd = '}.call(p, p), \'text/html\'); const elements = [...parsed.head.children, ...bindEvents(parsed.body, p).childNodes]; return setupConnect(elements, p)}';
+const RUNTIME_HELPERS = `
+const __idRe = /^[A-Za-z_$][A-Za-z0-9_$]*$/;
+const __reserved = new Set(['props', 'arguments', 'this']);
+function __render(__p, __body) {
+  const keys = Object.keys(__p).filter((k) => __idRe.test(k) && !__reserved.has(k));
+  const fn = new Function('props', ...keys, 'return \`' + __body + '\`');
+  return fn.apply(__p, [__p, ...keys.map((k) => __p[k])]);
+}
+`;
 
-const getLoaderConfig = function(context) {
-  const query = loaderUtils.getOptions(context) || {};
-  const configKey = query.config || 'htmlLoader';
-  const config = (context.options && context.options[configKey]) || {};
-  return {...{
-    minimize: true,
-    removeComments: true,
-    collapseWhitespace: true,
-    exportAsEs6Default: true,
-    attributes: [],
-    interpolate: false,
-    urlRoot: '',
-    removeCommentsFromCDATA: true,
-    removeCDATASectionsFromCDATA: true,
-    conservativeCollapse: true,
-    useShortDoctype: true,
-    keepClosingSlash: true,
-    removeScriptTypeAttributes: true,
-    removeStyleTypeAttributes: true,
-  }, ...query, ...config};
+const defaultOptions = {
+  minimize: true,
+  removeComments: true,
+  collapseWhitespace: true,
+  exportAsEs6Default: true,
+  attributes: [],
+  interpolate: false,
+  urlRoot: '',
+  removeCommentsFromCDATA: true,
+  removeCDATASectionsFromCDATA: true,
+  conservativeCollapse: true,
+  useShortDoctype: true,
+  keepClosingSlash: true,
+  removeScriptTypeAttributes: true,
+  removeStyleTypeAttributes: true,
 };
 
 /**
- * @class htmlLoader
- * @param {String} content fileContent from webpack
- * @return {String} it returns the HTML content wrapped as a module function
- * @description The HTML file is converted into a module that exports a function.
+ * @function transformHTML
+ * @param {String} content the HTML source content
+ * @param {String} id the file path of the HTML file being transformed
+ * @param {Object} options plugin options
+ * @return {Promise<String>} the HTML content wrapped as an ESM module function
+ * @description Transforms an HTML file into an ES module that exports a function.
  * That function takes a single argument (p shorthand for "props").
- * Also provides sass support by incliding a `link` tag in your html file to the scss file.
  *
  * We use the builtin DOMParser to parse the HTML template to reduce runtime dependencies.
- * an IIFE that takes a single argument (props) and returns the compiled template literal tring and passes
- * it into the DOMParser.parseFromString fn.
- *
- * The IIFE ends with fn.call(p, p) which ensures that the es6 template context supports
+ * The function ends with fn.call(p, p) which ensures that the es6 template context supports
  * both "this" and "props" within the template.
  *
- * ${this.myValue} and ${props.myValue} are treated identically and can be used interchangably
- * For on*="" HTML5 event attributes, the loader replaces any ES6 syntax before babel conversion
- * to the es6 template literal. This way, the interaction between the on* events and the ContextBinding mixin
- * does not break. @see ContextBinding for more details.
+ * ${this.myValue} and ${props.myValue} are treated identically and can be used interchangeably.
  *
- * @example @lang js <caption>webpack.config.js</caption>
-    {
-      module: {
-        rules: [
-          {
-            // set this to match the paths of the html files you want to import as functions.
-            test: /web-components\/.+\.html$/,
-            exclude: /node_modules/,
-            use: [{
-                loader: '@ornery/web-components/loader',
-                options: {
-                    minimize: true,
-                    removeComments: true,
-                    collapseWhitespace: true,
-                    exportAsEs6Default: true,
-                    attrs: false,
-                    interpolate: false
-                }
-            }]
-          }
-        ]
-      }
-    }
+ * @example @lang js <caption>vite.config.js</caption>
+ * import { defineConfig } from 'vite';
+ * import webComponents from '@ornery/web-components/vite';
  *
- * @example @lang scss <caption>example.scss</caption>
- * .example-list {
- *   padding: 0;
- *   margin: 0;
+ * export default defineConfig({
+ *   plugins: [
+ *     webComponents({ include: /\.html$/ })
+ *   ]
+ * });
  *
- *   .example-list-item {
- *     line-height: 1rem;
- *     margin: .5rem;
- *   }
- * }
+ * @example @lang js <caption>webpack.config.js</caption>
+ * import webComponents from '@ornery/web-components/webpack';
  *
+ * export default {
+ *   plugins: [
+ *     webComponents({ include: /\.html$/ })
+ *   ]
+ * };
  *
  * @example @lang html <caption>example.html</caption>
  * <link src="./example.scss" />
@@ -95,23 +73,6 @@ const getLoaderConfig = function(context) {
  * </ul>
  *
  * @example @lang js
- * // becomes converted into:
- * const {bindEvents, setupConnect} = require("@ornery/web-components/templates");
- * module.exports = (p = {})=> {
- *   const parsed = new DOMParser().parseFromString(function(props){
- *   return "<style>.example-list{padding: 0;margin: 0;} .example-list .example-list-item{line-height: 1rem;margin: .5rem;}</style>" +
- *     "<h3>" + this.headerText + "</h3>" +
- *         "<ul>" +
- *     this.items.map(function(item){return "<li>" + item + "</li>"; })
- *                      .join("") +
- *         "</ul>"
- *   }.call(p, p), 'text/html');
- *
- *   const elements = [...parsed.head.children, ...bindEvents(parsed.body, p).childNodes];
- *   return setupConnect(elements, p)
- * }
- *
- * @example @lang js
  * import listTemplate from './example.html';
  * const fruits = ["apple", "orange", "banana"];
  *
@@ -119,23 +80,11 @@ const getLoaderConfig = function(context) {
  *   headerText: "List of fruits.",
  *   items: fruits
  * });
- *
- * console.log(compiledDOMNodeArray.length) // 2
- * console.log(compiledDOMNodeArray[0].tagName) // "h3"
- * console.log(compiledDOMNodeArray[0].innerHTML) // "List of fruits."
- * console.log(compiledDOMNodeArray[1].tagName) // "ul"
- * console.log(compiledDOMNodeArray[1].children[0].tagName) // "li"
- * console.log(compiledDOMNodeArray[1].children[0].innerHTML) // "apple"
- * console.log(compiledDOMNodeArray[1].children[1].tagName) // "li"
- * console.log(compiledDOMNodeArray[1].children[1].innerHTML) // "orange"
- * console.log(compiledDOMNodeArray[1].children[2].tagName) // "li"
- * console.log(compiledDOMNodeArray[1].children[2].innerHTML) // "banana"
- *
- *
- *
  */
-const htmlLoader = function(content) {
-  const config = getLoaderConfig(this);
+export async function transformHTML(content, id, options = {}) {
+  const config = { ...defaultOptions, ...options };
+  const fileDir = path.dirname(id);
+
   const links = attrParse(content, function(tag, attr) {
     const res = config.attributes.find(function(a) {
       if (a.charAt(0) === ':') {
@@ -150,16 +99,8 @@ const htmlLoader = function(content) {
   const data = {};
   content = [content];
   links.forEach(function(link) {
-    if (!loaderUtils.isUrlRequest(link.value, config.urlRoot)) return;
-
-    if (link.value.indexOf('mailto:') > -1 ) return;
+    if (link.value.indexOf('mailto:') > -1) return;
 
-    const uri = url.parse(link.value);
-    if (uri.hash !== null && uri.hash !== undefined) {
-      uri.hash = null;
-      link.value = uri.format();
-      link.length = link.value.length;
-    }
     let ident;
     while (data[ident]) {
       ident = '~~~HTMLLINK~~~' + Math.random() + Math.random() + '~~~';
@@ -172,25 +113,60 @@ const htmlLoader = function(content) {
   });
   content.reverse();
   content = content.join('');
-  const linkregex = /^\s*<link.+href="(.+?s*css)".*>$/gmi;
-  const imports = [...content.matchAll(linkregex)];
   content = content.replace(/on(\w+?)=["']\$\{(.+?)\}.*?["']/gmi, (m, cg1, cg2) => `on${cg1}="${cg2}"`);
-  content = htmlMinifier.minify(content, {...config});
+  content = await minify(content, { ...config });
   content = content.replace(/\\"/g, '\\\\"');
   content = content.replace(/\\'/g, '\\\\\'');
-  content = compile('`' + `<style>${imports.map((m)=>{
-    if (typeof m[1] === 'string') {
-      const filePath = path.resolve(this.context || '', m[1]);
-      if (typeof filePath === 'string' && fs.existsSync(filePath)) {
-        content = content.replace(m[0], '');
-        return require('node-sass').renderSync({
-          file: filePath,
-        }).css.toString('utf8');
-      }
+
+  const linkregex = /<link[^>]+href=["']([^"']+?\.s?css)["'][^>]*>/gi;
+  const imports = [...content.matchAll(linkregex)];
+  const styleContent = imports.map((m) => {
+    const filePath = path.resolve(fileDir, m[1]);
+    if (fs.existsSync(filePath)) {
+      content = content.replace(m[0], '');
+      return sass.compile(filePath).css;
     }
     return '';
-  }).join('\n')}</style>\n` + content + '`').code;
-  return `${templateWrapStart}${content}${templateWrapEnd}`;
+  }).join('\n');
+
+  content = escapeBackticksOutsideInterpolation(content);
+  const stylePrefix = styleContent ? `<style>${styleContent.replace(/`/g, '\\`')}</style>` : '';
+  const body = JSON.stringify(stylePrefix + content);
+  return `import {bindEvents, setupConnect} from "@ornery/web-components/templates";
+${RUNTIME_HELPERS}
+export default (p = {}) => {
+  const parsed = new DOMParser().parseFromString(__render(p, ${body}), 'text/html');
+  const elements = [...parsed.head.children, ...bindEvents(parsed.body, p).childNodes];
+  return setupConnect(elements, p);
 };
+`;
+}
+
+function escapeBackticksOutsideInterpolation(str) {
+  let out = '';
+  let i = 0;
+  while (i < str.length) {
+    const ch = str[i];
+    if (ch === '$' && str[i + 1] === '{') {
+      let depth = 1;
+      let j = i + 2;
+      while (j < str.length && depth > 0) {
+        if (str[j] === '{') depth++;
+        else if (str[j] === '}') depth--;
+        if (depth === 0) break;
+        j++;
+      }
+      out += str.slice(i, j + 1);
+      i = j + 1;
+    } else if (ch === '`') {
+      out += '\\`';
+      i++;
+    } else {
+      out += ch;
+      i++;
+    }
+  }
+  return out;
+}
 
-module.exports = htmlLoader;
+export default transformHTML;

package/src/plugin.js

@@ -0,0 +1,14 @@
+import { createUnplugin } from 'unplugin';
+import { transformHTML } from './loaders/html-loader.js';
+
+export const unplugin = createUnplugin((options = {}) => ({
+  name: 'ornery-web-components',
+  transformInclude(id) {
+    return (options.include || /\.html$/).test(id);
+  },
+  transform(code, id) {
+    return transformHTML(code, id, options);
+  },
+}));
+
+export default unplugin;

package/src/setup-connect.js

@@ -1,4 +1,4 @@
-module.exports = function (nodeList, context) {
+export default function setupConnect(nodeList, context) {
   nodeList.connect = function (root) {
     if (typeof HTMLElement !== "undefined") {
       if (!root && context instanceof HTMLElement) {

package/src/utils.js

@@ -28,7 +28,7 @@ const getFromObj = (path, obj = {}) => {
 };
 
 
-const thisRegex = /^[this|props]\./gi;
+const thisRegex = /^(this|props)\./i;
 const nestedES6 = /\$\{.*(\$\{(.+?)\}).*\}/g;
 const es6Regex = /\$\{(.+?)\}/g;
 /**
@@ -45,10 +45,10 @@ const stripES6 = function(expr, context) {
   let matchArr;
   while (matchArr = nestedES6.exec(result)) {
     const [, outerMatch, key] = matchArr;
-    const replacement = getFromObj(key, context);
+    const replacement = getFromObj(key.replace(thisRegex, ''), context);
     result = stripES6(result.replace(outerMatch, replacement).trim(), context);
   }
-  return result.replace(es6Regex, (match, $1)=> getFromObj($1, context));
+  return result.replace(es6Regex, (match, $1) => getFromObj($1.replace(thisRegex, ''), context));
 };
 
 /**
@@ -277,7 +277,7 @@ const toLowerMap = (obj = {}) => {
   }, {});
 };
 
-module.exports = {
+export {
   getFromObj,
   template,
   stripES6,

package/templates.js

@@ -1,7 +1,2 @@
-const bindEvents = require('./src/bind-events');
-const setupConnect = require('./src/setup-connect');
-
-module.exports = {
-  bindEvents,
-  setupConnect,
-};
+export { default as bindEvents } from './src/bind-events.js';
+export { default as setupConnect } from './src/setup-connect.js';

package/tests/fixtures/list.html

@@ -0,0 +1,10 @@
+<link href="./list.scss" />
+<h3 id="list-title">${this.headerText}</h3>
+<p id="subtitle-props">${props.subtitle}</p>
+<p id="subtitle-bare">${subtitle}</p>
+<ul class="example-list">
+  ${this.items.map((item) => `<li class="example-list-item">${item}</li>`).join("")}
+</ul>
+<button id="add-this" onclick="${this.onAdd}">Add via this</button>
+<button id="add-props" onclick="${props.onAdd}">Add via props</button>
+<button id="add-bare" onclick="${onAdd}">Add via bare</button>

package/tests/fixtures/list.scss

@@ -0,0 +1,12 @@
+$accent: #2563eb;
+$radius: 4px;
+
+.example-list {
+  list-style: none;
+  padding: 0;
+
+  &-item {
+    color: $accent;
+    border-radius: $radius;
+  }
+}

package/tests/loader.smoke.test.mjs

@@ -0,0 +1,127 @@
+import { describe, it, before } from 'node:test';
+import assert from 'node:assert/strict';
+import { readFile, writeFile, mkdir, rm } from 'node:fs/promises';
+import path from 'node:path';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+import { JSDOM } from 'jsdom';
+
+import vitePlugin from '@ornery/web-components/vite';
+import webpackPlugin from '@ornery/web-components/webpack';
+import rollupPlugin from '@ornery/web-components/rollup';
+import esbuildPlugin from '@ornery/web-components/esbuild';
+import rspackPlugin from '@ornery/web-components/rspack';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const fixture = path.join(__dirname, 'fixtures', 'list.html');
+
+// Exercise the bundler plugin's transform hook the same way Vite/Webpack would.
+async function runTransform(id) {
+  const plugin = vitePlugin();
+  const code = await readFile(id, 'utf8');
+  assert.equal(plugin.transformInclude(id), true, 'plugin opts into .html files');
+  const result = await plugin.transform.call({}, code, id);
+  return typeof result === 'string' ? result : result.code;
+}
+
+describe('@ornery/web-components loader', () => {
+  let dom;
+  before(() => {
+    dom = new JSDOM('<!doctype html><html><body></body></html>');
+    globalThis.window = dom.window;
+    globalThis.document = dom.window.document;
+    globalThis.DOMParser = dom.window.DOMParser;
+    globalThis.HTMLElement = dom.window.HTMLElement;
+    globalThis.Node = dom.window.Node;
+    globalThis.Element = dom.window.Element;
+    globalThis.Event = dom.window.Event;
+  });
+
+  it('transforms an HTML file into an ESM module that matches the documented shape', async () => {
+    const html = await readFile(fixture, 'utf8');
+    const out = await runTransform(fixture);
+
+    assert.match(
+      out,
+      /import \{bindEvents, setupConnect\} from "@ornery\/web-components\/templates"/,
+      'output imports bindEvents/setupConnect from the public entry',
+    );
+    assert.match(out, /export default \(p = \{\}\)\s*=>/, 'default-exports a props-taking function');
+    assert.match(out, /new DOMParser\(\)\.parseFromString/, 'uses DOMParser for template assembly');
+    assert.match(out, /<style>/, 'inlines a <style> tag');
+
+    assert.match(out, /\.example-list/, 'compiled SCSS selector is present');
+    assert.match(out, /\.example-list-item\s*\{[^}]*color:\s*#2563eb/, 'SCSS was compiled to CSS with resolved $accent');
+
+    assert.doesNotMatch(out, /\$accent/, 'SCSS variables are resolved');
+    assert.doesNotMatch(out, /<link[^>]+\.scss/, 'link tag is stripped after SCSS inline');
+  });
+
+  it('exposes instantiable plugins for every supported bundler', () => {
+    for (const factory of [vitePlugin, webpackPlugin, rollupPlugin, esbuildPlugin, rspackPlugin]) {
+      const plugin = factory({});
+      assert.ok(plugin, `${factory.name || 'plugin'} returned a value`);
+    }
+  });
+
+  it('evaluating the module and calling it with props renders nodes, styles, and wires events', async () => {
+    const out = await runTransform(fixture);
+
+    // Write the compiled module inside the repo so Node can resolve
+    // `@ornery/web-components/templates` through the symlinked node_modules entry
+    // — exactly what a consumer project would see after `npm install`.
+    const outDir = path.join(__dirname, '.compiled');
+    await rm(outDir, { recursive: true, force: true });
+    await mkdir(outDir, { recursive: true });
+    const modFile = path.join(outDir, 'list.compiled.mjs');
+    await writeFile(modFile, out, 'utf8');
+    const mod = await import(pathToFileURL(modFile).href);
+
+    assert.equal(typeof mod.default, 'function', 'default export is a function');
+
+    let clicks = 0;
+    const props = {
+      headerText: 'List of fruits.',
+      subtitle: 'Fresh picks',
+      items: ['apple', 'orange', 'banana'],
+      onAdd() { clicks++; },
+    };
+    const result = mod.default(props);
+
+    assert.ok(Array.isArray(result), 'returns an array-like node list');
+    assert.equal(typeof result.connect, 'function', 'node list carries a connect() function (setupConnect)');
+
+    const host = document.createElement('div');
+    host.append(...result);
+
+    const title = host.querySelector('#list-title');
+    assert.ok(title, 'rendered header');
+    assert.equal(title.textContent, 'List of fruits.', 'interpolated ${this.headerText}');
+
+    // Per docs: ${this.X}, ${props.X}, and ${X} are interchangeable.
+    assert.equal(host.querySelector('#subtitle-props').textContent, 'Fresh picks', '${props.subtitle} interpolates');
+    assert.equal(host.querySelector('#subtitle-bare').textContent, 'Fresh picks', '${subtitle} (bare) interpolates');
+
+    const items = host.querySelectorAll('.example-list-item');
+    assert.equal(items.length, 3, 'rendered all mapped items');
+    assert.deepEqual(
+      Array.from(items, (li) => li.textContent),
+      ['apple', 'orange', 'banana'],
+      'each item value interpolated inside the mapped template',
+    );
+
+    for (const id of ['add-this', 'add-props', 'add-bare']) {
+      const button = host.querySelector('#' + id);
+      assert.ok(button, `rendered ${id}`);
+      assert.equal(button.getAttribute('onclick'), null, `onclick stripped on ${id}`);
+    }
+
+    host.querySelector('#add-this').dispatchEvent(new dom.window.Event('click'));
+    host.querySelector('#add-props').dispatchEvent(new dom.window.Event('click'));
+    host.querySelector('#add-bare').dispatchEvent(new dom.window.Event('click'));
+    assert.equal(clicks, 3, '${this.fn}, ${props.fn}, and ${fn} all bind the same handler');
+
+    const style = Array.from(host.children).find((n) => n.tagName === 'STYLE');
+    assert.ok(style, '<style> landed in the connected output');
+    assert.match(style.textContent, /\.example-list-item/, 'compiled CSS reached the DOM');
+  });
+});

package/vite.js

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

package/webpack.js

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

package/src/loaders/rules.js

@@ -1,17 +0,0 @@
-const path = require('path');
-
-module.exports = [
-  {
-    test: /\.scss$/,
-    use: [
-      'css-loader', // translates CSS into CommonJS
-      'sass-loader', // compiles Sass to CSS, using Node Sass by default
-    ],
-  },
-  {
-    test: /\.html$/,
-    use: [{
-      loader: path.resolve(__dirname, '../loaders/html-loader.js'),
-    }],
-  },
-];