thunderous 2.3.13 → 2.4.2

package/package.json

@@ -1,71 +1,55 @@
 {
-	"name": "thunderous",
-	"version": "2.3.13",
-	"description": "",
-	"type": "module",
-	"main": "./dist/index.cjs",
-	"module": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"files": [
-		"/dist",
-		"/package.json",
-		"/README.md",
-		"/LICENSE"
-	],
-	"author": "Jonathan DeWitt",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/Thunder-Solutions/Thunderous"
-	},
-	"keywords": [
-		"thunderous",
-		"web components",
-		"functional",
-		"signals",
-		"custom elements"
-	],
-	"bugs": {
-		"url": "https://github.com/Thunder-Solutions/Thunderous/issues"
-	},
-	"homepage": "https://github.com/Thunder-Solutions/Thunderous#readme",
-	"license": "MIT",
-	"scripts": {
-		"demo": "cd demo && npm start",
-		"demo:ssr": "cd demo && npm run ssr",
-		"www": "cd www && npm run dev",
-		"build": "tsup src/index.ts --format cjs,esm --dts --no-clean",
-		"test": "find src -name '*.test.ts' | xargs c8 node --import tsx --test",
-		"typecheck": "tsc --noEmit",
-		"lint": "eslint . && prettier --check .",
-		"lint:fix": "eslint . --fix && prettier --write .",
-		"version:patch": "npm run build && npm version patch && cd demo && npm version patch && cd ../www && npm version patch && git add -A && git commit -m 'bump version'",
-		"version:minor": "npm run build && npm version minor && cd demo && npm version minor && cd ../www && npm version minor && git add -A && git commit -m 'bump version'",
-		"version:major": "npm run build && npm version major && cd demo && npm version major && cd ../www && npm version major && git add -A && git commit -m 'bump version'",
-		"publish": "npm run typecheck && npm run lint && npm test && npm run build && npm publish"
-	},
-	"devDependencies": {
-		"@types/dompurify": "^3.2.0",
-		"@types/eslint": "^8.56.10",
-		"@types/node": "^22.10.1",
-		"@typescript-eslint/eslint-plugin": "^8.17.0",
-		"@typescript-eslint/parser": "^8.17.0",
-		"c8": "^10.1.2",
-		"eslint": "^8.57.0",
-		"eslint-plugin-import": "^2.31.0",
-		"eslint-plugin-node": "^11.1.0",
-		"eslint-plugin-promise": "^7.1.0",
-		"express": "^4.17.1",
-		"prettier": "^3.3.3",
-		"tsup": "^8.3.0",
-		"tsx": "^4.19.2",
-		"typescript": "^5.7.2"
-	},
-	"peerDependencies": {
-		"@webcomponents/scoped-custom-element-registry": "^0.0.10"
-	},
-	"peerDependenciesMeta": {
-		"@webcomponents/scoped-custom-element-registry": {
-			"optional": true
-		}
-	}
-}
+  "name": "thunderous",
+  "version": "2.4.2",
+  "description": "A lightweight, functional web components library that brings the power of signals to your UI.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "/dist",
+    "/package.json",
+    "/README.md",
+    "/LICENSE"
+  ],
+  "author": "Jonathan DeWitt <jon.dewitt@thunder.solutions>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Thunder-Solutions/Thunderous"
+  },
+  "keywords": [
+    "thunderous",
+    "web components",
+    "functional",
+    "signals",
+    "custom elements"
+  ],
+  "bugs": {
+    "url": "https://github.com/Thunder-Solutions/Thunderous/issues"
+  },
+  "homepage": "https://github.com/Thunder-Solutions/Thunderous#readme",
+  "license": "MIT",
+  "peerDependencies": {
+    "@webcomponents/scoped-custom-element-registry": "^0.0.10"
+  },
+  "peerDependenciesMeta": {
+    "@webcomponents/scoped-custom-element-registry": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "demo": "cd demo && npm start",
+    "demo:ssr": "cd demo && npm run ssr",
+    "build": "tsup src/index.ts --format cjs,esm --dts --no-clean",
+    "test": "npm run test:server && npm run test:client",
+    "test:server": "find src/__test__/server -name '*.test.ts' | xargs c8 tsx --test",
+    "test:client": "PLAYWRIGHT_BROWSERS_PATH=../../.browsers playwright test",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "format:fix": "prettier --write . --ignore-path ../../.gitignore",
+    "preversion": "npm run typecheck && npm run lint && npm test && npm run build",
+    "version": "node postversion.js"
+  }
+}

package/dist/__test__/custom-element.test.js

@@ -1,48 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'assert';
-import { customElement } from '../custom-element';
-import { html } from '../render';
-import { createRegistry } from '../registry';
-import { NOOP } from '../utilities';
-await describe('customElement', async () => {
-    await it('does not throw on the server', () => {
-        assert.doesNotThrow(() => customElement(() => html `<div></div>`));
-    });
-    await it('returns an element result class', () => {
-        const MyElement = customElement(() => html `<div></div>`);
-        assert.ok(MyElement);
-        const keys = Object.keys(MyElement);
-        assert(keys.every((key) => ['define', 'register', 'eject'].includes(key)));
-    });
-    await it('supports scoped registries', () => {
-        const registry = createRegistry({ scoped: true });
-        assert.doesNotThrow(() => customElement(() => html `<div></div>`, { shadowRootOptions: { registry } }));
-    });
-    await it('returns self for chaining', () => {
-        const MyElement = customElement(() => html `<div></div>`);
-        const registry = createRegistry();
-        assert.strictEqual(MyElement.define('my-element'), MyElement);
-        assert.strictEqual(MyElement.register(registry), MyElement);
-    });
-    await it('registers the element with a registry', () => {
-        const registry = createRegistry();
-        const MyElement = customElement(() => html `<div></div>`)
-            .register(registry)
-            .define('my-element');
-        assert.strictEqual(registry.getTagName(MyElement), 'MY-ELEMENT');
-    });
-    await it('logs an error when registering after defining in a scoped registry', (testContext) => {
-        testContext.mock.method(console, 'error', NOOP);
-        const errorMock = console.error.mock;
-        const registry = createRegistry({ scoped: true });
-        const MyElement = customElement(() => html `<div></div>`);
-        MyElement.define('my-element');
-        MyElement.register(registry);
-        assert.strictEqual(errorMock.callCount(), 1);
-        assert.strictEqual(errorMock.calls[0].arguments[0], 'Must call `register()` before `define()` for scoped registries.');
-    });
-    await it('throws an error when ejecting on the server', () => {
-        const MyElement = customElement(() => html `<div></div>`);
-        assert.throws(() => MyElement.eject());
-    });
-});

package/dist/__test__/registry.test.js

@@ -1,60 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'assert';
-import { createRegistry } from '../registry';
-import { customElement } from '../custom-element';
-import { html } from '../render';
-import { NOOP } from '../utilities';
-await describe('createRegistry', async () => {
-    await it('creates a global registry', () => {
-        const registry = createRegistry();
-        assert.ok(registry);
-        assert.strictEqual(registry.scoped, false);
-    });
-    await it('creates a scoped registry', () => {
-        const registry = createRegistry({ scoped: true });
-        assert.ok(registry);
-        assert.strictEqual(registry.scoped, true);
-    });
-    await it('defines a custom element', () => {
-        const registry = createRegistry();
-        const MyElement = customElement(() => html `<div></div>`);
-        assert.doesNotThrow(() => registry.define('my-element', MyElement));
-    });
-    await it('warns about duplicate custom elements', (testContext) => {
-        testContext.mock.method(console, 'warn', NOOP);
-        const warnMock = console.warn.mock;
-        const registry = createRegistry();
-        const MyElement = customElement(() => html `<div></div>`);
-        const MyElement2 = customElement(() => html `<div></div>`);
-        registry.define('my-element', MyElement);
-        registry.define('my-element', MyElement2);
-        assert.strictEqual(warnMock.callCount(), 1);
-        assert.strictEqual(warnMock.calls[0].arguments[0], 'Custom element tag name "MY-ELEMENT" was already defined. Skipping...');
-        registry.define('my-element-2', MyElement);
-        assert.strictEqual(warnMock.callCount(), 2);
-        assert.strictEqual(warnMock.calls[1].arguments[0], 'MY-ELEMENT-2 was already defined. Skipping...');
-    });
-    await it('gets the tag name of a custom element', () => {
-        const registry = createRegistry();
-        const tagName = 'my-element';
-        const MyElement = customElement(() => html `<div></div>`);
-        registry.define(tagName, MyElement);
-        const result = registry.getTagName(MyElement);
-        assert.strictEqual(result, tagName.toUpperCase());
-    });
-    await it('gets all tag names defined in the registry', () => {
-        const registry = createRegistry();
-        const MyElement = customElement(() => html `<div></div>`);
-        const MyElement2 = customElement(() => html `<div></div>`);
-        registry.define('my-element', MyElement);
-        registry.define('my-element-2', MyElement2);
-        const result = registry.getAllTagNames();
-        assert.deepStrictEqual(result, ['MY-ELEMENT', 'MY-ELEMENT-2']);
-    });
-    await it('throws an error if ejected on the server', () => {
-        const registry = createRegistry();
-        const MyElement = customElement(() => html `<div></div>`);
-        registry.define('my-element', MyElement);
-        assert.throws(() => registry.eject(), { message: 'Cannot eject a registry on the server.' });
-    });
-});

package/dist/__test__/render.test.js

@@ -1,48 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'assert';
-import { html, css } from '../render';
-import { NOOP } from '../utilities';
-await describe('html', async () => {
-    await it('renders a simple string', () => {
-        const result = html `<div></div>`;
-        assert.strictEqual(result, '<div></div>');
-    });
-    await it('renders a string with interpolated values', () => {
-        const result = html `<div>${'Hello, world!'} ${1} ${true}</div>`;
-        assert.strictEqual(result, '<div>Hello, world! 1 true</div>');
-    });
-    await it('renders a string with signals', () => {
-        const mockGetter = () => 'Hello, world!';
-        const result = html `<div>${mockGetter}</div>`;
-        assert.strictEqual(result, '<div>Hello, world!</div>');
-    });
-});
-await describe('css', async () => {
-    await it('renders a simple string', () => {
-        // prettier-ignore
-        const result = css `div { color: red; }`;
-        assert.strictEqual(result, 'div { color: red; }');
-    });
-    await it('renders a string with interpolated values', () => {
-        // prettier-ignore
-        const result = css `div { --str: ${'str'}; --num: ${1}; --bool: ${true}; }`;
-        assert.strictEqual(result, 'div { --str: str; --num: 1; --bool: true; }');
-    });
-    await it('logs an error if a non-primitive value is interpolated', (testContext) => {
-        testContext.mock.method(console, 'error', NOOP);
-        const errorMock = console.error.mock;
-        const obj = {};
-        // prettier-ignore
-        const result = css `div { --obj: ${obj}; }`;
-        assert.strictEqual(result, 'div { --obj: ; }');
-        assert.strictEqual(errorMock.callCount(), 1);
-        assert.strictEqual(errorMock.calls[0].arguments[0], 'Objects are not valid in CSS values. Received:');
-        assert.strictEqual(errorMock.calls[0].arguments[1], obj);
-    });
-    await it('renders a string with signals', () => {
-        const mockGetter = () => 'red';
-        // prettier-ignore
-        const result = css `div { color: ${mockGetter}; }`;
-        assert.strictEqual(result, 'div { color: red; }');
-    });
-});

package/dist/__test__/server-side.test.js

@@ -1,196 +0,0 @@
-import { clientOnlyCallback, getServerRenderArgs, insertTemplates, onServerDefine, serverCss, serverDefine, serverDefineFns, wrapTemplate, } from '../server-side';
-import { describe, mock, it } from 'node:test';
-import assert from 'assert';
-import { createRegistry } from '../registry';
-import { DEFAULT_RENDER_OPTIONS } from '../constants';
-import { NOOP } from '../utilities';
-import { customElement } from '../custom-element';
-import { html } from '../render';
-const stripWhitespace = (template) => template.trim().replace(/\s\s+/g, ' ');
-await describe('getServerRenderArgs', async () => {
-    await it('throws on the server when accessing client-only properties', () => {
-        const args = getServerRenderArgs('my-element-1');
-        assert.throws(() => args.elementRef.children, {
-            message: 'The `elementRef` property is not available on the server.',
-        });
-        assert.throws(() => args.root.children, { message: 'The `root` property is not available on the server.' });
-        assert.throws(() => args.internals.ariaChecked, {
-            message: 'The `internals` property is not available on the server.',
-        });
-    });
-    await it('returns nothing from customCallback on the server', () => {
-        const args = getServerRenderArgs('my-element-2');
-        assert.strictEqual(args.customCallback(NOOP), '');
-    });
-    await it('tracks CSS strings on the server using adoptStyleSheet', () => {
-        const args = getServerRenderArgs('my-element-3');
-        // build the expected result
-        const cssStr = ':host { color: red; }';
-        const expectedServerCss = new Map();
-        expectedServerCss.set('my-element-3', [cssStr]);
-        // @ts-expect-error // this will be a string on the server.
-        args.adoptStyleSheet(':host { color: red; }');
-        assert.deepStrictEqual(serverCss, expectedServerCss);
-    });
-    await it('tracks CSS strings on the server with registries using adoptStyleSheet', () => {
-        const registry = createRegistry();
-        const args = getServerRenderArgs('my-element-4', registry);
-        // build the expected result
-        const cssStr1 = ':host { color: blue; }';
-        const expectedServerCss = new Map();
-        expectedServerCss.set('my-element-4', [cssStr1]);
-        // @ts-expect-error // this will be a string on the server.
-        args.adoptStyleSheet(cssStr1);
-        assert.deepStrictEqual(registry.__serverCss, expectedServerCss);
-    });
-});
-await describe('wrapTemplate', async () => {
-    await it('wraps the render result in a template tag', () => {
-        const template = stripWhitespace(wrapTemplate({
-            tagName: 'my-element-5',
-            serverRender: () => 'Hello, world!',
-            options: DEFAULT_RENDER_OPTIONS,
-        }));
-        const expectedTemplate = stripWhitespace(/* html */ `
-			<template
-				shadowrootmode="closed"
-				shadowrootdelegatesfocus="false"
-				shadowrootclonable="false"
-				shadowrootserializable="false"
-			>
-				Hello, world!
-			</template>
-		`);
-        assert.strictEqual(template, expectedTemplate);
-    });
-    await it('wraps the render result in a template tag with CSS', () => {
-        const args = getServerRenderArgs('my-element-6');
-        // @ts-expect-error // this will be a string on the server.
-        args.adoptStyleSheet(':host { color: green; }');
-        const template = stripWhitespace(wrapTemplate({
-            tagName: 'my-element-6',
-            serverRender: () => 'Hello, world!',
-            options: DEFAULT_RENDER_OPTIONS,
-        }));
-        const expectedTemplate = stripWhitespace(/* html */ `
-			<template
-				shadowrootmode="closed"
-				shadowrootdelegatesfocus="false"
-				shadowrootclonable="false"
-				shadowrootserializable="false"
-			>
-				<style>:host { color: green; }</style>Hello, world!
-			</template>
-		`);
-        assert.strictEqual(template, expectedTemplate);
-    });
-    await it('wraps the render result in a template tag when shadow root is not attached', () => {
-        const template = stripWhitespace(wrapTemplate({
-            tagName: 'my-element-7',
-            serverRender: () => 'Hello, world!',
-            options: {
-                ...DEFAULT_RENDER_OPTIONS,
-                attachShadow: false,
-            },
-        }));
-        const expectedTemplate = 'Hello, world!';
-        assert.strictEqual(template, expectedTemplate);
-    });
-});
-await describe('insertTemplates', async () => {
-    await it('inserts the template into the input string', () => {
-        const inputString = /* html */ `<my-element-7></my-element-7>`;
-        const template = /* html */ `<div>Hello, world!</div>`;
-        const result = stripWhitespace(insertTemplates('my-element-7', template, inputString));
-        const expectedResult = stripWhitespace(/* html */ `
-			<my-element-7><div>Hello, world!</div></my-element-7>
-		`);
-        assert.strictEqual(result, expectedResult);
-    });
-    await it('inserts the template into the input string and parses attribute references', () => {
-        const inputString = /* html */ `<my-element-8 test="Hello, world!"></my-element-8>`;
-        const template = /* html */ `<div>{{attr:test}}</div>`;
-        const result = stripWhitespace(insertTemplates('my-element-8', template, inputString));
-        const expectedResult = stripWhitespace(/* html */ `
-			<my-element-8 test="Hello, world!"><div>Hello, world!</div></my-element-8>
-		`);
-        assert.strictEqual(result, expectedResult);
-    });
-});
-await describe('onServerDefine', async () => {
-    await it('adds the function to the set', () => {
-        const fn = NOOP;
-        onServerDefine(fn);
-        assert.strictEqual(serverDefineFns.size, 1);
-        assert.strictEqual(serverDefineFns.has(fn), true);
-        serverDefineFns.clear();
-    });
-});
-await describe('serverDefine', async () => {
-    await it('calls the serverDefineFns with the result of serverRender', () => {
-        const fn = mock.fn((tagName, template) => {
-            assert.strictEqual(tagName, 'my-element-9');
-            assert.strictEqual(template, 'Hello, world!');
-        });
-        onServerDefine(fn);
-        serverDefine({
-            tagName: 'my-element-9',
-            serverRender: () => 'Hello, world!',
-            options: {
-                ...DEFAULT_RENDER_OPTIONS,
-                attachShadow: false,
-            },
-            elementResult: customElement(() => html `<div></div>`),
-        });
-        assert.strictEqual(fn.mock.calls.length, 1);
-        assert.strictEqual(fn.mock.calls[0].arguments[0], 'my-element-9');
-        serverDefineFns.clear();
-    });
-    await it('sets the server render options on the parent registry', () => {
-        const parentRegistry = createRegistry();
-        const serverRender = () => 'Hello, world!';
-        serverDefine({
-            tagName: 'my-element-10',
-            serverRender,
-            options: DEFAULT_RENDER_OPTIONS,
-            parentRegistry,
-            elementResult: customElement(() => html `<div></div>`),
-        });
-        const expectedServerRenderOpts = new Map([
-            ['my-element-10', { serverRender, ...DEFAULT_RENDER_OPTIONS }],
-        ]);
-        assert.strictEqual(parentRegistry.__serverRenderOpts.size, 1);
-        assert.deepStrictEqual(parentRegistry.__serverRenderOpts, expectedServerRenderOpts);
-    });
-    await it('renders scoped registries correctly', () => {
-        const scopedRegistry = createRegistry({ scoped: true });
-        onServerDefine((tagName, template) => {
-            assert.strictEqual(tagName, 'my-element-12');
-            assert.strictEqual(template, '<my-element-11>inner</my-element-11>');
-        });
-        serverDefine({
-            tagName: 'my-element-11',
-            serverRender: () => 'inner',
-            options: { ...DEFAULT_RENDER_OPTIONS, attachShadow: false },
-            parentRegistry: scopedRegistry,
-            elementResult: customElement(() => html `<div></div>`),
-        });
-        serverDefine({
-            tagName: 'my-element-12',
-            serverRender: () => '<my-element-11></my-element-11>',
-            options: { ...DEFAULT_RENDER_OPTIONS, attachShadow: false },
-            scopedRegistry,
-            elementResult: customElement(() => html `<div></div>`),
-        });
-        serverDefineFns.clear();
-    });
-});
-await describe('clientOnlyCallback', async () => {
-    await it('does nothing on the server when called directly', () => {
-        let runCount = 0;
-        clientOnlyCallback(() => {
-            runCount++;
-        });
-        assert.strictEqual(runCount, 0);
-    });
-});