@ornery/web-components 1.1.8 → 4.0.0

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

@@ -14,21 +14,21 @@
  *
  * result == 'bar';
  */
-const keyRegexp = /^[\w\-]+(\.[\w\-]+)+$/g
+const keyRegexp = /^[\w-]+(\.[\w-]+)+$/g;
 const getFromObj = (path, obj = {}) => {
   path = path && path.trim();
-  if (path != null){
+  if (path != null) {
     if (obj[path] != null) {
       return obj[path];
     } else if (keyRegexp.test(path)) {
       return path.split('.').reduce((res, key) => res[key] != null ? res[key] : path, obj);
-    } 
+    }
   }
   return path;
 };
 
 
-const thisRegex = /^[this|props]\./gi;
+const thisRegex = /^(this|props)\./i;
 const nestedES6 = /\$\{.*(\$\{(.+?)\}).*\}/g;
 const es6Regex = /\$\{(.+?)\}/g;
 /**
@@ -44,11 +44,11 @@ const stripES6 = function(expr, context) {
   let result = expr.replace(thisRegex, '');
   let matchArr;
   while (matchArr = nestedES6.exec(result)) {
-      let [wholeMatch, outerMatch, key] = matchArr;
-      const replacement = getFromObj(key, context);
-      result = stripES6(result.replace(outerMatch, replacement).trim(), context);
+    const [, outerMatch, key] = matchArr;
+    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));
 };
 
 /**
@@ -104,12 +104,12 @@ const template = stripES6;
 const arrayParser = (val, key, params) => {
   let current = params[key];
   if (current) {
-      if (!Array.isArray(current)) {
-          current = [current];
-      }
-      current.push(val);
+    if (!Array.isArray(current)) {
+      current = [current];
+    }
+    current.push(val);
   } else {
-      current = val;
+    current = val;
   }
   return current;
 };
@@ -144,12 +144,12 @@ const toParams = (str, options = {}) => {
   const queryString = parts[1] || '';
   const params = {};
   queryString.split('&').forEach((val) => {
-      const innerParts = val.split('=');
-      if (innerParts.length !== 2) return;
-      const paramKey = decodeURIComponent(innerParts[0]);
-      const paramVal = decodeURIComponent(innerParts[1]);
-      const parser = options[paramKey] || (() => paramVal);
-      params[paramKey] = arrayParser(parser(paramVal, paramKey, params), paramKey, params);
+    const innerParts = val.split('=');
+    if (innerParts.length !== 2) return;
+    const paramKey = decodeURIComponent(innerParts[0]);
+    const paramVal = decodeURIComponent(innerParts[1]);
+    const parser = options[paramKey] || (() => paramVal);
+    params[paramKey] = arrayParser(parser(paramVal, paramKey, params), paramKey, params);
   });
   return params;
 };
@@ -176,11 +176,11 @@ const toParams = (str, options = {}) => {
 const toSearch = (options) => {
   const filtered = Object.entries(options).filter((ent) => !!ent[1]);
   return encodeURI(`?${filtered.map((ent) => {
-      if (Array.isArray(ent[1])) {
-          return ent[1].map((val) => [ent[0], val].join('=')).join('&');
-      } else {
-          return ent.join('=');
-      }
+    if (Array.isArray(ent[1])) {
+      return ent[1].map((val) => [ent[0], val].join('=')).join('&');
+    } else {
+      return ent.join('=');
+    }
   }).join('&')}`);
 };
 
@@ -210,13 +210,13 @@ const toSearch = (options) => {
 const prefixKeys = (obj, prefix) => {
   let keys = [];
   if (Array.isArray(obj)) {
-      keys = obj.map((val, i) => i);
+    keys = obj.map((val, i) => i);
   } else {
-      keys = Object.keys(obj);
+    keys = Object.keys(obj);
   }
   return Object.assign(
       {},
-      ...keys.map((key) => ({[prefix + key]: obj[key]}))
+      ...keys.map((key) => ({[prefix + key]: obj[key]})),
   );
 };
 
@@ -257,18 +257,27 @@ const toDataAttrs = (obj) => {
   return prefixKeys(obj, 'data-');
 };
 const HTMLEncodable = /[\u00A0-\u9999<>]/g;
-const encodeHTML = (stringVal = "") => stringVal.replace(HTMLEncodable, i => `&#${i.charCodeAt(0)};`)
+const encodeHTML = (stringVal = '') => stringVal.replace(HTMLEncodable, (i) => `&#${i.charCodeAt(0)};`);
 
 const withClosing = /<([^>]+?)([^>]*?)>(.*?)<\/\1>/gi;
 const selfClosing = /(<([^>]+)\/>)/ig;
-const shouldEncode = (str) => {
-    return (str || '')
-        .replace(withClosing, '')
-        .replace(selfClosing, '')
-        .trim();
-}
+const shouldEncode = (str) => (str || '').replace(withClosing, '').replace(selfClosing, '').trim();
 
-module.exports = {
+const toLowerMap = (obj = {}) => {
+  if (Array.isArray(obj)) {
+    return obj.map(toLowerMap);
+  }
+  if (typeof obj === 'string') {
+    return obj.toLowerCase();
+  }
+  return Object.entries(obj).reduce((acc, [key, val]) => {
+    const lck = key.toLowerCase();
+    acc[lck] = toLowerMap(val);
+    return acc;
+  }, {});
+};
+
+export {
   getFromObj,
   template,
   stripES6,
@@ -278,5 +287,6 @@ module.exports = {
   prefixKeys,
   toDataAttrs,
   shouldEncode,
-  encodeHTML
+  encodeHTML,
+  toLowerMap,
 };

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'),
-    }],
-  },
-];