ecmact 1.0.2 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Alexandr Priadchenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy  
+of this software and associated documentation files (the "Software"), to deal  
+in the Software without restriction, including without limitation the rights  
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell  
+copies of the Software, and to permit persons to whom the Software is  
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all  
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR  
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,  
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE  
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER  
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,  
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE  
+SOFTWARE.

package/README.md

@@ -0,0 +1,473 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/eternalvision/ecmact/main/public/ecmact.png" alt="ECMact" width="300" />
+</p>
+
+# ECMact
+
+ECMact is a small component library built on native Web Components. Every component is a custom element with an open Shadow DOM, created through a single factory, `em`. There is no virtual DOM, no template language and no build-time step: components are plain function calls that return real DOM elements.
+
+- Zero runtime dependencies
+- Content, attributes and styles are written through DOM APIs, never through `innerHTML` (unless you ask for it)
+- In-place updates: `setState` reuses the DOM node, so focus and input state survive
+- Full TypeScript support, with attributes, events, styles and `ref` typed per HTML tag
+- ES and CommonJS builds, bundled type declarations, `sideEffects: false`
+
+## Table of contents
+
+- [Install](#install)
+- [Quick start](#quick-start)
+- [How it works](#how-it-works)
+- [Creating components](#creating-components)
+- [Props reference](#props-reference)
+- [Content and children](#content-and-children)
+- [Attributes](#attributes)
+- [Styles](#styles)
+- [Events](#events)
+- [Refs](#refs)
+- [State and updates](#state-and-updates)
+- [Mounting](#mounting)
+- [Composition](#composition)
+- [TypeScript](#typescript)
+- [Security model](#security-model)
+- [Server-side rendering](#server-side-rendering)
+- [Browser support](#browser-support)
+- [Limitations](#limitations)
+- [Migrating from 1.x](#migrating-from-1x)
+- [Development](#development)
+- [Release](#release)
+- [License](#license)
+
+## Install
+
+```bash
+npm install ecmact
+```
+
+Requires a browser (or DOM implementation) with Custom Elements v1 and Shadow DOM. The package ships ES2022 code.
+
+```ts
+import { em, mount } from 'ecmact';
+```
+
+CommonJS is supported as well:
+
+```js
+const { em, mount } = require('ecmact');
+```
+
+## Quick start
+
+```ts
+import { em, mount } from 'ecmact';
+
+let count = 0;
+
+const card = em.Card({
+  content: 'Click me',
+  style: { padding: '20px', backgroundColor: '#cceeff', cursor: 'pointer' },
+  onclick: () => {
+    count++;
+    card.setState({ content: `Clicked ${count} time${count === 1 ? '' : 's'}` });
+  },
+});
+
+mount('body', card);
+```
+
+## How it works
+
+`em.Card(props)` does three things:
+
+1. On first access of the name `Card`, registers a custom element `em-card` (once per lowercase name).
+2. Creates an `<em-card>` element.
+3. Assigns `props`, which renders one inner element (a `div` by default) into the element's Shadow DOM.
+
+```
+<em-card>                  custom element (the host, returned by em.Card)
+  #shadow-root (open)
+    <div style="...">      inner element, rendered from props
+      text content
+      ...children
+    </div>
+</em-card>
+```
+
+The returned value is a real `HTMLElement`. You can append it anywhere, query it, add your own listeners to it and read `element.shadowRoot`. The inner element is `element.shadowRoot.firstElementChild`.
+
+Rendering is synchronous. Setting props, or calling `setState`, updates the DOM immediately; there is no scheduler and no batching.
+
+## Creating components
+
+```ts
+const card = em.Card({ content: 'Hello' });
+const title = em.Title({ tag: 'h1', content: 'Welcome' });
+const link = em.Link({ tag: 'a', href: '/docs', content: 'Docs' });
+```
+
+`em` is a Proxy: any property name is a component factory. The name only decides the custom element name; what is rendered is decided by `tag`.
+
+- `em.Card`, `em.card` and `em.CARD` all produce `<em-card>` elements of the same class.
+- A name must match `/^[A-Za-z][A-Za-z0-9_-]*$/`, otherwise a `TypeError` is thrown.
+- `em.then` and symbol properties return `undefined`, so `await em` and `String(em)` are safe.
+- Factories can be called with no arguments: `em.Card()` renders an empty `div`.
+
+Use a distinct name per kind of component. Names are a convention for your own readability and for devtools; they do not carry props or behavior.
+
+## Props reference
+
+| Prop        | Type                          | Default | Description                                                     |
+| ----------- | ----------------------------- | ------- | --------------------------------------------------------------- |
+| `tag`       | `string`                      | `'div'` | Tag name of the inner element.                                  |
+| `content`   | `string`                      | `''`    | Text content. Never parsed as HTML.                             |
+| `html`      | `string`                      | -       | Raw HTML for the inner element. Opt-in, trusted input only.     |
+| `children`  | `Node[]`                      | `[]`    | Nodes appended after the content.                               |
+| `style`     | object of CSS properties      | -       | Inline styles, camelCase keys.                                  |
+| `ref`       | `(element) => void`           | -       | Called once, when the inner element is created.                 |
+| `on<event>` | `(event) => void`             | -       | Event listener on the inner element, lowercase, e.g. `onclick`. |
+| any other   | `string \| number \| boolean` | -       | Set as an HTML attribute on the inner element.                  |
+
+All props apply to the inner element, not to the `<em-*>` host.
+
+## Content and children
+
+`content` is always inserted as a text node, so markup in it is shown literally:
+
+```ts
+em.Card({ content: '<b>not bold</b>' });
+```
+
+`children` is an array of DOM nodes, appended after the content:
+
+```ts
+em.Card({
+  content: 'Parent text',
+  children: [em.Card({ content: 'Child 1' }), em.Card({ content: 'Child 2' })],
+});
+```
+
+`html` replaces the inner element's contents with parsed HTML. Children are appended after it. Use it only for trusted markup (see [Security model](#security-model)):
+
+```ts
+em.Card({ html: '<strong>trusted</strong> markup', children: [em.Card({ content: 'after' })] });
+```
+
+When `html` is set, `content` is ignored.
+
+Children passed to `children` are moved, not cloned: a node can have only one parent. On every update the inner element's children are replaced with the current `content` or `html` and the current `children` array.
+
+## Attributes
+
+Any prop that is not a reserved key (`tag`, `content`, `html`, `style`, `children`, `ref`) and does not start with `on` is set on the inner element with `setAttribute`.
+
+| Value                            | Result                              |
+| -------------------------------- | ----------------------------------- |
+| `string`, `number`               | `setAttribute(key, String(value))`  |
+| `true`                           | empty attribute, e.g. `disabled=""` |
+| `false`, `null`, `undefined`     | attribute not set / removed         |
+| anything else (object, function) | ignored                             |
+
+```ts
+em.Field({
+  tag: 'input',
+  type: 'email',
+  placeholder: 'you@example.com',
+  required: true,
+  maxlength: 64,
+  'data-testid': 'email',
+  'aria-label': 'Email',
+});
+```
+
+Attribute names are HTML attribute names, not DOM property names: use `class`, not `className`, and `for`, not `htmlFor`. Names are written as given; HTML treats them case-insensitively.
+
+On `setState`, attributes that are no longer present, or whose value became `false`, `null` or `undefined`, are removed from the element.
+
+Values are set through the DOM, so quotes and markup inside a value cannot break out of the attribute.
+
+## Styles
+
+`style` takes an object of CSS properties in camelCase. Keys are converted to kebab-case and applied through the CSSOM (`element.style.setProperty`).
+
+```ts
+em.Card({
+  style: {
+    display: 'flex',
+    backgroundColor: '#fafafa',
+    borderRadius: '8px',
+    zIndex: 2,
+  },
+});
+```
+
+- Values must be strings or numbers. Numbers are passed as is, without units: `zIndex: 2` works, `width: 10` does not mean `10px`. Use strings for lengths.
+- Other values (`undefined`, objects) are skipped.
+- On `setState`, properties that are no longer in `style` are removed; the rest are updated.
+- Styles apply to the inner element only. There are no selectors, pseudo-classes or media queries. For those, use a stylesheet that targets the host (`em-card`) with CSS custom properties, or a `ref` that adds a `<style>` to `element.getRootNode()`.
+
+Because the content lives in a Shadow DOM, global stylesheets do not reach it.
+
+## Events
+
+Props starting with `on` whose value is a function become event listeners on the inner element. The event name is the rest of the key, lowercased.
+
+```ts
+em.Field({
+  tag: 'input',
+  oninput: (event) => console.log((event.target as HTMLInputElement).value),
+  onkeydown: (event) => event.key === 'Enter' && submit(),
+});
+```
+
+- Non-function `on*` values are ignored (an `onclick` string is never evaluated).
+- Listeners are replaced on every update: old ones are removed, current ones are added. There are no duplicate handlers, and removing the prop removes the listener.
+- Listeners are registered without options. For `once`, `passive` or `capture`, or for custom events, add the listener yourself in a `ref`:
+
+```ts
+em.Card({
+  ref: (element) => element.addEventListener('wheel', onWheel, { passive: true }),
+});
+```
+
+- Events bubble out of the Shadow DOM according to normal rules (`click`, `input` and other composed events reach listeners on the `<em-*>` host and its ancestors, with the event target retargeted to the host).
+
+## Refs
+
+`ref` receives the inner element once, right after it is created. It is called again only if the element is recreated (when `tag` changes).
+
+```ts
+let input!: HTMLInputElement;
+
+const field = em.Field({
+  tag: 'input',
+  ref: (element) => (input = element),
+});
+
+input.focus();
+```
+
+Refs are the escape hatch for anything the props do not cover: listener options, live form values, focus, measurements, third-party widgets.
+
+## State and updates
+
+Each component exposes its props and an update method.
+
+| Member                        | Description                                             |
+| ----------------------------- | ------------------------------------------------------- |
+| `component.props`             | Getter: the current props object.                       |
+| `component.props = p`         | Setter: replaces all props and re-renders.              |
+| `component.setState(partial)` | Merges `partial` into the current props and re-renders. |
+
+```ts
+const counter = em.Counter({ content: '0' });
+
+counter.setState({ content: '1' });
+counter.setState({ style: { color: 'red' } });
+```
+
+`setState` shallow-merges: nested objects such as `style` are replaced, not merged. To change one style property, pass the whole style object.
+
+Updates are in place:
+
+- The inner element is reused while `tag` stays the same. Focus, selection, scroll position and the live value of form controls are preserved.
+- Attributes, styles and listeners are diffed against the previous render, and stale ones are removed.
+- If `tag` changes, a new inner element is created (and `ref` is called again).
+- The text content and the `children` are always rebuilt.
+
+Components do not track state for you. `setState` is a rendering call, not a store: keep your application state wherever you like and call `setState` when it changes.
+
+An `<em-*>` element created outside the library (for example `document.createElement('em-card')`) renders an empty `div` when it is connected.
+
+## Mounting
+
+```ts
+mount(target, ...nodes);
+```
+
+| Argument | Type                | Description                             |
+| -------- | ------------------- | --------------------------------------- |
+| `target` | `string \| Element` | CSS selector or element to append into. |
+| `nodes`  | `Node[]`            | Components or any other DOM nodes.      |
+
+Returns the container. Throws `Error: ecmact: mount target "<selector>" not found` if the selector matches nothing, so a typo in a selector fails loudly instead of rendering nothing.
+
+```ts
+mount('#app', header, content, footer);
+mount(document.body, toast);
+```
+
+`mount` is a thin wrapper over `Element.append`; you can always use the DOM directly.
+
+## Composition
+
+Components are values. Compose them with ordinary functions:
+
+```ts
+import { em, mount } from 'ecmact';
+
+const Item = (label: string, onRemove: () => void) =>
+  em.Item({
+    tag: 'li',
+    style: { display: 'flex', gap: '8px' },
+    children: [
+      em.Label({ tag: 'span', content: label }),
+      em.Remove({ tag: 'button', content: 'x', onclick: onRemove }),
+    ],
+  });
+
+const List = (items: string[]) => {
+  const list = em.List({ tag: 'ul' });
+  const render = () =>
+    list.setState({
+      children: items.map((label, index) =>
+        Item(label, () => {
+          items.splice(index, 1);
+          render();
+        }),
+      ),
+    });
+  render();
+  return list;
+};
+
+mount('#app', List(['one', 'two', 'three']));
+```
+
+Since children are rebuilt on every update, create child components inside the render step (as above) when they depend on state, or keep references and update them with `setState` individually.
+
+## TypeScript
+
+The package ships its own declarations. Props are typed by the inner tag, which is inferred from the `tag` prop (and defaults to `'div'`).
+
+```ts
+const link = em.Link({ tag: 'a', href: '/docs', target: '_blank' });
+
+em.Link({ tag: 'a', src: 'x.png' });
+em.Field({ tag: 'input', type: 'bogus' });
+em.Card({ onclik: () => {} });
+```
+
+The last three calls are compile errors: `src` is not an attribute of `a`, `'bogus'` is not an input type, and `onclik` is not an event.
+
+What is typed:
+
+- **Return type.** `em.X({ tag: 'a' })` is `Component<'a'>`; `setState` accepts `Partial<ComponentProps<'a'>>`.
+- **Attributes by tag.** Global attributes (`id`, `class`, `title`, `lang`, `dir`, `hidden`, `inert`, `tabindex`, `role`, `slot`, `part`, `accesskey`, `translate`, `spellcheck`, `draggable`, `contenteditable`, `inputmode`) plus `data-*` and `aria-*` apply to every tag. Tag-specific attributes are defined for: `a`, `img`, `input`, `button`, `form`, `label`, `select`, `option`, `optgroup`, `textarea`, `fieldset`, `output`, `progress`, `meter`, `link`, `script`, `iframe`, `video`, `audio`, `source`, `track`, `canvas`, `td`, `th`, `col`, `colgroup`, `ol`, `li`, `details`, `dialog`, `blockquote`, `q`, `time`, `meta`, `slot`, `data`, `del`, `ins`. Other standard tags accept the global attributes only.
+- **Custom tags.** A tag that is not a standard HTML tag (for example `'x-widget'`, or a plain `string`) accepts any attribute.
+- **Events.** `on<event>` props are typed from `HTMLElementEventMap`; the handler receives the right event type. Unknown `on*` names are errors on standard tags and allowed on custom tags.
+- **Styles.** `style` accepts the string-valued properties of `CSSStyleDeclaration`, with `string | number` values.
+- **`ref`.** The element type follows the tag: `HTMLInputElement` for `'input'`, `HTMLElement` for custom tags.
+
+Attribute value types follow HTML semantics: booleans for boolean attributes, numbers for numeric ones, string unions for enumerated ones.
+
+When the tag is not known at compile time, widen it to `string`; props then become permissive and `setState({ tag })` accepts any tag:
+
+```ts
+const dynamic = em.Dynamic({ tag: tagName as string, content: 'x' });
+dynamic.setState({ tag: 'section' });
+```
+
+Exported types:
+
+```ts
+import type { Component, ComponentProps, AttributeMap, GlobalAttributes, TagName } from 'ecmact';
+```
+
+## Security model
+
+- `content` is inserted as a text node; markup in it is inert.
+- Attribute values and style values are set through `setAttribute` and the CSSOM, never concatenated into HTML, so they cannot inject markup or break out of an attribute or a `<style>` block.
+- `on*` props only accept functions; strings are ignored, so attribute-style handlers such as `onclick="..."` are never created.
+- `html` is the one raw-HTML entry point. It uses `innerHTML` and does not sanitize. Pass only markup you control, or sanitize it first (for example with DOMPurify).
+- `tag` is passed to `document.createElement`; it cannot inject markup. It should still not come from untrusted input, since it decides which element is created (for example `script` or `iframe`).
+- Attributes that carry URLs (`href`, `src`, `action`) are set as given. `javascript:` URLs are not filtered; validate user-supplied URLs.
+
+## Server-side rendering
+
+Importing `ecmact` is safe without a DOM (Node, SSR bundlers, tooling): no browser globals are touched at import time. Creating components requires `document` and `customElements`, so call `em.*` and `mount` only in the browser, or in a DOM environment such as happy-dom or jsdom. There is no server-side serialization of components.
+
+## Browser support
+
+Any evergreen browser with Custom Elements v1, Shadow DOM and ES2022 class fields (including private `#fields`). No polyfills are included.
+
+## Limitations
+
+- **Attributes, not properties.** Props map to attributes. For form controls, `value` and `checked` set the default value/state; after the user interacts with the control, changing the attribute no longer changes what is displayed. Set live values through a `ref` (`input.value = '...'`).
+- **Shadow DOM by default.** Global CSS does not apply inside components, and form controls inside a Shadow DOM do not take part in an outer `<form>`'s submission or validation. Label/`for` and `id` references do not cross the shadow boundary.
+- **One inner element.** A component renders a single element. Compose several components for more complex structures.
+- **Full rebuild of children.** Children and text are rebuilt on every update; there is no keyed child diffing.
+- **No lifecycle hooks, context or store.** The library is a rendering layer.
+- **Handlers without options.** Listener options require a `ref`.
+
+## Migrating from 1.x
+
+2.0.0 fixes the package entry points (1.x published `exports` that pointed to missing files) and closes several injection paths. Breaking changes:
+
+| 1.x                                                              | 2.x                                                        |
+| ---------------------------------------------------------------- | ---------------------------------------------------------- |
+| `content` was inserted as HTML                                   | `content` is text; use `html` for trusted markup           |
+| Attribute and style values were concatenated into an HTML string | Set through DOM APIs                                       |
+| `mount` silently did nothing for a missing selector              | `mount` throws                                             |
+| `mount` accepted a selector only                                 | accepts a selector or an `Element`, returns the container  |
+| `slots` and `customEvents` props (not implemented)               | removed                                                    |
+| `ref` was declared but never called                              | `ref` is called when the inner element is created          |
+| `em.then` / symbols registered elements or threw                 | return `undefined`; invalid names throw `TypeError`        |
+| Every `setState` rebuilt the whole shadow tree                   | in-place update, element reused while `tag` is unchanged   |
+| Children were rendered through a `<slot>`                        | children are appended to the inner element                 |
+| Props were loosely typed                                         | attributes, events, styles and `ref` typed by tag          |
+| `dist/es/index.js`, `dist/cjs/index.js`                          | `dist/index.js`, `dist/index.cjs`, declarations in `dist/` |
+
+## Development
+
+```bash
+npm ci
+npm run lint
+npm run typecheck
+npm test
+npm run build
+```
+
+| Script                 | Description                                          |
+| ---------------------- | ---------------------------------------------------- |
+| `npm run build`        | Vite library build: ES, CJS and `.d.ts` into `dist/` |
+| `npm test`             | Vitest with happy-dom and V8 coverage                |
+| `npm run typecheck`    | `tsc --noEmit` over `src` and `tests`                |
+| `npm run lint`         | ESLint (flat config, typescript-eslint, prettier)    |
+| `npm run lint:fix`     | ESLint with autofix                                  |
+| `npm run format`       | Prettier write                                       |
+| `npm run format:check` | Prettier check                                       |
+
+Tests enforce 100% statement, branch, function and line coverage; the run fails if coverage drops. Type-level behavior (attributes, events, styles, `ref` by tag) is covered by `tests/types.test.ts` and checked by `npm run typecheck`.
+
+Source layout:
+
+```
+src/
+  index.ts           public exports
+  em.ts              Proxy factory and custom element registration
+  component.ts       custom element class: props, setState, rendering entry
+  types/             ComponentProps, attribute tables, render state
+  utils/
+    render.ts        creates or reuses the inner element and fills it
+    syncAttributes.ts  attribute diffing
+    applyStyle.ts    style diffing through the CSSOM
+    setEventListeners.ts  listener diffing
+    mount.ts         mount helper
+tests/               Vitest suites (runtime and type-level)
+```
+
+## Release
+
+Releases are published from CI. Bump the version, push, and push a matching tag:
+
+```bash
+npm version <patch|minor|major>
+git push --follow-tags
+```
+
+A tag matching `v*` triggers the release workflow, which runs format check, lint, typecheck and tests, then publishes to npm with provenance via trusted publishing. Configure a trusted publisher for `ecmact` on npmjs.com (repository `eternalvision/ecmact`, workflow `release.yml`) before the first release.
+
+The CI workflow runs the full check (format, lint, typecheck, tests with coverage, build, production audit) on every push to `main` and on pull requests.
+
+## License
+
+MIT

package/dist/component.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from './types';
+declare const Base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+export declare class Component<K extends string = string> extends Base {
+    #private;
+    constructor(props?: ComponentProps<K>);
+    connectedCallback(): void;
+    setState(newProps: Partial<ComponentProps<K>>): void;
+    get props(): ComponentProps<K>;
+    set props(newProps: ComponentProps<K>);
+}
+export {};

package/dist/em.d.ts

@@ -0,0 +1,6 @@
+import { Component } from './component';
+import { ComponentProps } from './types';
+type ComponentFactory = <K extends string = 'div'>(props?: ComponentProps<K>) => Component<K>;
+type ComponentRegistry = Record<string, ComponentFactory>;
+declare const em: ComponentRegistry;
+export { em };

package/dist/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=e=>e.replace(/([A-Z])/g,`-$1`).toLowerCase(),t=(t,n={},r)=>{let i=new Map;return Object.entries(n).forEach(([t,n])=>{(typeof n==`string`||typeof n==`number`)&&i.set(e(t),String(n))}),r.forEach(e=>{i.has(e)||t.style.removeProperty(e)}),i.forEach((e,n)=>t.style.setProperty(n,e)),new Set(i.keys())},n=(e,...t)=>{let n=typeof e==`string`?document.querySelector(e):e;if(!n)throw Error(`ecmact: mount target "${e}" not found`);return n.append(...t),n},r=(e,t,n)=>{n.forEach((t,n)=>e.removeEventListener(n,t));let r=new Map;return Object.entries(t).forEach(([e,t])=>{e.startsWith(`on`)&&typeof t==`function`&&r.set(e.slice(2).toLowerCase(),t)}),r.forEach((t,n)=>e.addEventListener(n,t)),r},i=new Set([`tag`,`content`,`html`,`style`,`children`,`ref`]),a=e=>e===!0?``:typeof e==`string`||typeof e==`number`?String(e):null,o=(e,t,n)=>{let r=new Map;return Object.entries(t).forEach(([e,t])=>{if(i.has(e)||e.startsWith(`on`))return;let n=a(t);n!==null&&r.set(e,n)}),n.forEach(t=>{r.has(t)||e.removeAttribute(t)}),r.forEach((t,n)=>e.setAttribute(n,t)),new Set(r.keys())},s=(e,t,n)=>{let r=document.createElement(e);return t.replaceChildren(r),n.attributes=new Set,n.styles=new Set,n.listeners=new Map,n.element=r,r},c=(e,n,i)=>{let{tag:a=`div`,content:c=``,html:l,style:u,children:d=[],ref:f}=n,p=i.element?.localName!==a.toLowerCase(),m=p?s(a,e,i):i.element;return i.attributes=o(m,n,i.attributes),i.styles=t(m,u,i.styles),i.listeners=r(m,n,i.listeners),l===void 0?m.replaceChildren(document.createTextNode(c),...d):(m.innerHTML=l,m.append(...d)),p&&f?.(m),m},l=typeof HTMLElement>`u`?class{}:HTMLElement,u=class extends l{#e;#t;#n={element:null,attributes:new Set,styles:new Set,listeners:new Map};constructor(e={}){super(),this.#t=this.attachShadow({mode:`open`}),this.#e=e}connectedCallback(){this.#n.element||this.#r()}setState(e){this.props={...this.#e,...e}}get props(){return this.#e}set props(e){this.#e=e,this.#r()}#r(){c(this.#t,this.#e,this.#n)}},d=/^[A-Za-z][A-Za-z0-9_-]*$/,f=new Proxy({},{get(e,t){if(typeof t==`symbol`||t===`then`)return;if(!d.test(t))throw TypeError(`ecmact: invalid component name "${t}"`);let n=`em-${t.toLowerCase()}`;return customElements.get(n)||customElements.define(n,class extends u{}),(e={})=>{let t=document.createElement(n);return t.props=e,t}}});exports.em=f,exports.mount=n;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["toKebabCase","key","applyStyle","next","style","value","previous","element","mount","nodes","container","target","setEventListeners","event","listener","props","reservedKeys","toAttributeValue","syncAttributes","attribute","createElement","tag","root","render","isNew","state","html","content","children","ref","Base","Component","#root","#props","#state","#render","newProps","namePattern","em","prop","tagName"],"sources":["../src/utils/applyStyle.ts","../src/utils/mount.ts","../src/utils/setEventListeners.ts","../src/utils/syncAttributes.ts","../src/utils/render.ts","../src/component.ts","../src/em.ts"],"sourcesContent":["import type { ComponentProps } from '../types';\n\nconst toKebabCase = (key: string) => key.replace(/([A-Z])/g, '-$1').toLowerCase();\n\nexport const applyStyle = (\n  element: HTMLElement,\n  style: ComponentProps['style'] = {},\n  previous: Set<string>,\n) => {\n  const next = new Map<string, string>();\n\n  Object.entries(style).forEach(([key, value]) => {\n    if (typeof value === 'string' || typeof value === 'number') {\n      next.set(toKebabCase(key), String(value));\n    }\n  });\n\n  previous.forEach((key) => {\n    if (!next.has(key)) element.style.removeProperty(key);\n  });\n\n  next.forEach((value, key) => element.style.setProperty(key, value));\n\n  return new Set(next.keys());\n};\n","export const mount = (target: string | Element, ...nodes: Node[]) => {\n  const container = typeof target === 'string' ? document.querySelector(target) : target;\n  if (!container) throw new Error(`ecmact: mount target \"${target}\" not found`);\n  container.append(...nodes);\n  return container;\n};\n","import type { ComponentProps } from '../types';\n\nexport const setEventListeners = (\n  element: HTMLElement,\n  props: ComponentProps,\n  previous: Map<string, EventListener>,\n) => {\n  previous.forEach((listener, event) => element.removeEventListener(event, listener));\n\n  const next = new Map<string, EventListener>();\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.startsWith('on') && typeof value === 'function') {\n      next.set(key.slice(2).toLowerCase(), value as EventListener);\n    }\n  });\n\n  next.forEach((listener, event) => element.addEventListener(event, listener));\n\n  return next;\n};\n","import type { ComponentProps } from '../types';\n\nconst reservedKeys = new Set(['tag', 'content', 'html', 'style', 'children', 'ref']);\n\nconst toAttributeValue = (value: unknown) => {\n  if (value === true) return '';\n  if (typeof value === 'string' || typeof value === 'number') return String(value);\n  return null;\n};\n\nexport const syncAttributes = (\n  element: HTMLElement,\n  props: ComponentProps,\n  previous: Set<string>,\n) => {\n  const next = new Map<string, string>();\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (reservedKeys.has(key) || key.startsWith('on')) return;\n    const attribute = toAttributeValue(value);\n    if (attribute !== null) next.set(key, attribute);\n  });\n\n  previous.forEach((key) => {\n    if (!next.has(key)) element.removeAttribute(key);\n  });\n\n  next.forEach((value, key) => element.setAttribute(key, value));\n\n  return new Set(next.keys());\n};\n","import type { ComponentProps, RenderState } from '../types';\nimport { applyStyle } from './applyStyle';\nimport { setEventListeners } from './setEventListeners';\nimport { syncAttributes } from './syncAttributes';\n\nconst createElement = (tag: string, root: ShadowRoot, state: RenderState) => {\n  const element = document.createElement(tag);\n  root.replaceChildren(element);\n  state.attributes = new Set();\n  state.styles = new Set();\n  state.listeners = new Map();\n  state.element = element;\n  return element;\n};\n\nexport const render = (root: ShadowRoot, props: ComponentProps, state: RenderState) => {\n  const { tag = 'div', content = '', html, style, children = [], ref } = props;\n\n  const isNew = state.element?.localName !== tag.toLowerCase();\n  const element = isNew ? createElement(tag, root, state) : (state.element as HTMLElement);\n\n  state.attributes = syncAttributes(element, props, state.attributes);\n  state.styles = applyStyle(element, style, state.styles);\n  state.listeners = setEventListeners(element, props, state.listeners);\n\n  if (html === undefined) {\n    element.replaceChildren(document.createTextNode(content), ...children);\n  } else {\n    element.innerHTML = html;\n    element.append(...children);\n  }\n\n  if (isNew) ref?.(element);\n\n  return element;\n};\n","import type { ComponentProps, RenderState } from './types';\nimport { render } from './utils';\n\nconst Base = typeof HTMLElement === 'undefined' ? (class {} as typeof HTMLElement) : HTMLElement;\n\nexport class Component<K extends string = string> extends Base {\n  #props: ComponentProps<K>;\n  readonly #root: ShadowRoot;\n  readonly #state: RenderState = {\n    element: null,\n    attributes: new Set(),\n    styles: new Set(),\n    listeners: new Map(),\n  };\n\n  constructor(props: ComponentProps<K> = {} as ComponentProps<K>) {\n    super();\n    this.#root = this.attachShadow({ mode: 'open' });\n    this.#props = props;\n  }\n\n  connectedCallback() {\n    if (!this.#state.element) this.#render();\n  }\n\n  setState(newProps: Partial<ComponentProps<K>>) {\n    this.props = { ...this.#props, ...newProps } as ComponentProps<K>;\n  }\n\n  get props() {\n    return this.#props;\n  }\n\n  set props(newProps: ComponentProps<K>) {\n    this.#props = newProps;\n    this.#render();\n  }\n\n  #render() {\n    render(this.#root, this.#props as ComponentProps, this.#state);\n  }\n}\n","import { Component } from './component';\nimport type { ComponentProps } from './types';\n\ntype ComponentFactory = <K extends string = 'div'>(props?: ComponentProps<K>) => Component<K>;\n\ntype ComponentRegistry = Record<string, ComponentFactory>;\n\nconst namePattern = /^[A-Za-z][A-Za-z0-9_-]*$/;\n\nconst em: ComponentRegistry = new Proxy({} as ComponentRegistry, {\n  get(_, prop) {\n    if (typeof prop === 'symbol' || prop === 'then') return undefined;\n\n    if (!namePattern.test(prop)) {\n      throw new TypeError(`ecmact: invalid component name \"${prop}\"`);\n    }\n\n    const tagName = `em-${prop.toLowerCase()}`;\n\n    if (!customElements.get(tagName)) {\n      customElements.define(tagName, class extends Component {});\n    }\n\n    return <K extends string = 'div'>(props: ComponentProps<K> = {} as ComponentProps<K>) => {\n      const element = document.createElement(tagName) as Component<K>;\n      element.props = props;\n      return element;\n    };\n  },\n});\n\nexport { em };\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { em } from './em';
+export { mount } from './utils';
+export type { Component } from './component';
+export type { AttributeMap, ComponentProps, GlobalAttributes, TagName } from './types';

package/dist/index.js

@@ -0,0 +1,82 @@
+// src/utils/applyStyle.ts
+var e = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase(), t = (t, n = {}, r) => {
+	let i = /* @__PURE__ */ new Map();
+	return Object.entries(n).forEach(([t, n]) => {
+		(typeof n == "string" || typeof n == "number") && i.set(e(t), String(n));
+	}), r.forEach((e) => {
+		i.has(e) || t.style.removeProperty(e);
+	}), i.forEach((e, n) => t.style.setProperty(n, e)), new Set(i.keys());
+}, n = (e, ...t) => {
+	let n = typeof e == "string" ? document.querySelector(e) : e;
+	if (!n) throw Error(`ecmact: mount target "${e}" not found`);
+	return n.append(...t), n;
+}, r = (e, t, n) => {
+	n.forEach((t, n) => e.removeEventListener(n, t));
+	let r = /* @__PURE__ */ new Map();
+	return Object.entries(t).forEach(([e, t]) => {
+		e.startsWith("on") && typeof t == "function" && r.set(e.slice(2).toLowerCase(), t);
+	}), r.forEach((t, n) => e.addEventListener(n, t)), r;
+}, i = /* @__PURE__ */ new Set([
+	"tag",
+	"content",
+	"html",
+	"style",
+	"children",
+	"ref"
+]), a = (e) => e === !0 ? "" : typeof e == "string" || typeof e == "number" ? String(e) : null, o = (e, t, n) => {
+	let r = /* @__PURE__ */ new Map();
+	return Object.entries(t).forEach(([e, t]) => {
+		if (i.has(e) || e.startsWith("on")) return;
+		let n = a(t);
+		n !== null && r.set(e, n);
+	}), n.forEach((t) => {
+		r.has(t) || e.removeAttribute(t);
+	}), r.forEach((t, n) => e.setAttribute(n, t)), new Set(r.keys());
+}, s = (e, t, n) => {
+	let r = document.createElement(e);
+	return t.replaceChildren(r), n.attributes = /* @__PURE__ */ new Set(), n.styles = /* @__PURE__ */ new Set(), n.listeners = /* @__PURE__ */ new Map(), n.element = r, r;
+}, c = (e, n, i) => {
+	let { tag: a = "div", content: c = "", html: l, style: u, children: d = [], ref: f } = n, p = i.element?.localName !== a.toLowerCase(), m = p ? s(a, e, i) : i.element;
+	return i.attributes = o(m, n, i.attributes), i.styles = t(m, u, i.styles), i.listeners = r(m, n, i.listeners), l === void 0 ? m.replaceChildren(document.createTextNode(c), ...d) : (m.innerHTML = l, m.append(...d)), p && f?.(m), m;
+}, l = typeof HTMLElement > "u" ? class {} : HTMLElement, u = class extends l {
+	#e;
+	#t;
+	#n = {
+		element: null,
+		attributes: /* @__PURE__ */ new Set(),
+		styles: /* @__PURE__ */ new Set(),
+		listeners: /* @__PURE__ */ new Map()
+	};
+	constructor(e = {}) {
+		super(), this.#t = this.attachShadow({ mode: "open" }), this.#e = e;
+	}
+	connectedCallback() {
+		this.#n.element || this.#r();
+	}
+	setState(e) {
+		this.props = {
+			...this.#e,
+			...e
+		};
+	}
+	get props() {
+		return this.#e;
+	}
+	set props(e) {
+		this.#e = e, this.#r();
+	}
+	#r() {
+		c(this.#t, this.#e, this.#n);
+	}
+}, d = /^[A-Za-z][A-Za-z0-9_-]*$/, f = new Proxy({}, { get(e, t) {
+	if (typeof t == "symbol" || t === "then") return;
+	if (!d.test(t)) throw TypeError(`ecmact: invalid component name "${t}"`);
+	let n = `em-${t.toLowerCase()}`;
+	return customElements.get(n) || customElements.define(n, class extends u {}), (e = {}) => {
+		let t = document.createElement(n);
+		return t.props = e, t;
+	};
+} });
+export { f as em, n as mount };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["toKebabCase","key","applyStyle","next","style","value","previous","element","mount","nodes","container","target","setEventListeners","event","listener","props","reservedKeys","toAttributeValue","syncAttributes","attribute","createElement","tag","root","render","isNew","state","html","content","children","ref","Base","Component","#root","#props","#state","#render","newProps","namePattern","em","prop","tagName"],"sources":["../src/utils/applyStyle.ts","../src/utils/mount.ts","../src/utils/setEventListeners.ts","../src/utils/syncAttributes.ts","../src/utils/render.ts","../src/component.ts","../src/em.ts"],"sourcesContent":["import type { ComponentProps } from '../types';\n\nconst toKebabCase = (key: string) => key.replace(/([A-Z])/g, '-$1').toLowerCase();\n\nexport const applyStyle = (\n  element: HTMLElement,\n  style: ComponentProps['style'] = {},\n  previous: Set<string>,\n) => {\n  const next = new Map<string, string>();\n\n  Object.entries(style).forEach(([key, value]) => {\n    if (typeof value === 'string' || typeof value === 'number') {\n      next.set(toKebabCase(key), String(value));\n    }\n  });\n\n  previous.forEach((key) => {\n    if (!next.has(key)) element.style.removeProperty(key);\n  });\n\n  next.forEach((value, key) => element.style.setProperty(key, value));\n\n  return new Set(next.keys());\n};\n","export const mount = (target: string | Element, ...nodes: Node[]) => {\n  const container = typeof target === 'string' ? document.querySelector(target) : target;\n  if (!container) throw new Error(`ecmact: mount target \"${target}\" not found`);\n  container.append(...nodes);\n  return container;\n};\n","import type { ComponentProps } from '../types';\n\nexport const setEventListeners = (\n  element: HTMLElement,\n  props: ComponentProps,\n  previous: Map<string, EventListener>,\n) => {\n  previous.forEach((listener, event) => element.removeEventListener(event, listener));\n\n  const next = new Map<string, EventListener>();\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.startsWith('on') && typeof value === 'function') {\n      next.set(key.slice(2).toLowerCase(), value as EventListener);\n    }\n  });\n\n  next.forEach((listener, event) => element.addEventListener(event, listener));\n\n  return next;\n};\n","import type { ComponentProps } from '../types';\n\nconst reservedKeys = new Set(['tag', 'content', 'html', 'style', 'children', 'ref']);\n\nconst toAttributeValue = (value: unknown) => {\n  if (value === true) return '';\n  if (typeof value === 'string' || typeof value === 'number') return String(value);\n  return null;\n};\n\nexport const syncAttributes = (\n  element: HTMLElement,\n  props: ComponentProps,\n  previous: Set<string>,\n) => {\n  const next = new Map<string, string>();\n\n  Object.entries(props).forEach(([key, value]) => {\n    if (reservedKeys.has(key) || key.startsWith('on')) return;\n    const attribute = toAttributeValue(value);\n    if (attribute !== null) next.set(key, attribute);\n  });\n\n  previous.forEach((key) => {\n    if (!next.has(key)) element.removeAttribute(key);\n  });\n\n  next.forEach((value, key) => element.setAttribute(key, value));\n\n  return new Set(next.keys());\n};\n","import type { ComponentProps, RenderState } from '../types';\nimport { applyStyle } from './applyStyle';\nimport { setEventListeners } from './setEventListeners';\nimport { syncAttributes } from './syncAttributes';\n\nconst createElement = (tag: string, root: ShadowRoot, state: RenderState) => {\n  const element = document.createElement(tag);\n  root.replaceChildren(element);\n  state.attributes = new Set();\n  state.styles = new Set();\n  state.listeners = new Map();\n  state.element = element;\n  return element;\n};\n\nexport const render = (root: ShadowRoot, props: ComponentProps, state: RenderState) => {\n  const { tag = 'div', content = '', html, style, children = [], ref } = props;\n\n  const isNew = state.element?.localName !== tag.toLowerCase();\n  const element = isNew ? createElement(tag, root, state) : (state.element as HTMLElement);\n\n  state.attributes = syncAttributes(element, props, state.attributes);\n  state.styles = applyStyle(element, style, state.styles);\n  state.listeners = setEventListeners(element, props, state.listeners);\n\n  if (html === undefined) {\n    element.replaceChildren(document.createTextNode(content), ...children);\n  } else {\n    element.innerHTML = html;\n    element.append(...children);\n  }\n\n  if (isNew) ref?.(element);\n\n  return element;\n};\n","import type { ComponentProps, RenderState } from './types';\nimport { render } from './utils';\n\nconst Base = typeof HTMLElement === 'undefined' ? (class {} as typeof HTMLElement) : HTMLElement;\n\nexport class Component<K extends string = string> extends Base {\n  #props: ComponentProps<K>;\n  readonly #root: ShadowRoot;\n  readonly #state: RenderState = {\n    element: null,\n    attributes: new Set(),\n    styles: new Set(),\n    listeners: new Map(),\n  };\n\n  constructor(props: ComponentProps<K> = {} as ComponentProps<K>) {\n    super();\n    this.#root = this.attachShadow({ mode: 'open' });\n    this.#props = props;\n  }\n\n  connectedCallback() {\n    if (!this.#state.element) this.#render();\n  }\n\n  setState(newProps: Partial<ComponentProps<K>>) {\n    this.props = { ...this.#props, ...newProps } as ComponentProps<K>;\n  }\n\n  get props() {\n    return this.#props;\n  }\n\n  set props(newProps: ComponentProps<K>) {\n    this.#props = newProps;\n    this.#render();\n  }\n\n  #render() {\n    render(this.#root, this.#props as ComponentProps, this.#state);\n  }\n}\n","import { Component } from './component';\nimport type { ComponentProps } from './types';\n\ntype ComponentFactory = <K extends string = 'div'>(props?: ComponentProps<K>) => Component<K>;\n\ntype ComponentRegistry = Record<string, ComponentFactory>;\n\nconst namePattern = /^[A-Za-z][A-Za-z0-9_-]*$/;\n\nconst em: ComponentRegistry = new Proxy({} as ComponentRegistry, {\n  get(_, prop) {\n    if (typeof prop === 'symbol' || prop === 'then') return undefined;\n\n    if (!namePattern.test(prop)) {\n      throw new TypeError(`ecmact: invalid component name \"${prop}\"`);\n    }\n\n    const tagName = `em-${prop.toLowerCase()}`;\n\n    if (!customElements.get(tagName)) {\n      customElements.define(tagName, class extends Component {});\n    }\n\n    return <K extends string = 'div'>(props: ComponentProps<K> = {} as ComponentProps<K>) => {\n      const element = document.createElement(tagName) as Component<K>;\n      element.props = props;\n      return element;\n    };\n  },\n});\n\nexport { em };\n"],"mappings":"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"}