ecmact 1.0.2 → 2.0.0

package/dist/types/BaseComponent.d.ts

@@ -0,0 +1,28 @@
+import { AttributeMap, GlobalAttributes } from './attributes';
+export type TagName = keyof HTMLElementTagNameMap | (string & {});
+type ElementOf<K extends string> = K extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[K] : HTMLElement;
+type StyleProps = {
+    [P in keyof CSSStyleDeclaration as P extends string ? CSSStyleDeclaration[P] extends string ? P : never : never]?: string | number;
+};
+type EventHandlers = {
+    [E in keyof HTMLElementEventMap as `on${E}`]?: ((event: HTMLElementEventMap[E]) => void) | undefined;
+};
+interface BaseProps<K extends string> {
+    tag?: K;
+    content?: string;
+    html?: string;
+    style?: StyleProps;
+    children?: Node[];
+    ref?: (element: ElementOf<K>) => void;
+}
+type TagAttributes<K extends string> = K extends keyof AttributeMap ? AttributeMap[K] : K extends keyof HTMLElementTagNameMap ? unknown : {
+    [attribute: string]: unknown;
+};
+export type ComponentProps<K extends string = string> = BaseProps<K> & GlobalAttributes & EventHandlers & TagAttributes<K>;
+export interface RenderState {
+    element: HTMLElement | null;
+    attributes: Set<string>;
+    styles: Set<string>;
+    listeners: Map<string, EventListener>;
+}
+export {};

package/dist/types/attributes.d.ts

@@ -0,0 +1,303 @@
+export type Primitive = string | number | boolean | null | undefined;
+type Size = number | string;
+type Referrer = 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
+type CrossOrigin = 'anonymous' | 'use-credentials' | '';
+type Target = '_self' | '_blank' | '_parent' | '_top' | (string & {});
+type Preload = 'none' | 'metadata' | 'auto' | '';
+export interface GlobalAttributes {
+    id?: string;
+    class?: string;
+    title?: string;
+    lang?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    hidden?: boolean | 'until-found';
+    inert?: boolean;
+    tabindex?: number;
+    role?: string;
+    slot?: string;
+    part?: string;
+    accesskey?: string;
+    translate?: 'yes' | 'no';
+    spellcheck?: 'true' | 'false';
+    draggable?: 'true' | 'false';
+    contenteditable?: 'true' | 'false' | 'plaintext-only' | '';
+    inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    [attribute: `data-${string}`]: Primitive;
+    [attribute: `aria-${string}`]: Primitive;
+}
+export interface AttributeMap {
+    a: {
+        href?: string;
+        target?: Target;
+        rel?: string;
+        download?: string | boolean;
+        hreflang?: string;
+        type?: string;
+        ping?: string;
+        referrerpolicy?: Referrer;
+    };
+    img: {
+        src?: string;
+        srcset?: string;
+        sizes?: string;
+        alt?: string;
+        width?: Size;
+        height?: Size;
+        loading?: 'eager' | 'lazy';
+        decoding?: 'sync' | 'async' | 'auto';
+        fetchpriority?: 'high' | 'low' | 'auto';
+        crossorigin?: CrossOrigin;
+        referrerpolicy?: Referrer;
+        usemap?: string;
+        ismap?: boolean;
+    };
+    input: {
+        type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+        name?: string;
+        value?: string | number;
+        placeholder?: string;
+        disabled?: boolean;
+        readonly?: boolean;
+        required?: boolean;
+        checked?: boolean;
+        multiple?: boolean;
+        autofocus?: boolean;
+        autocomplete?: string;
+        accept?: string;
+        min?: string | number;
+        max?: string | number;
+        step?: string | number;
+        minlength?: number;
+        maxlength?: number;
+        size?: number;
+        pattern?: string;
+        list?: string;
+        form?: string;
+        src?: string;
+        alt?: string;
+        width?: Size;
+        height?: Size;
+    };
+    button: {
+        type?: 'button' | 'submit' | 'reset';
+        name?: string;
+        value?: string;
+        disabled?: boolean;
+        autofocus?: boolean;
+        form?: string;
+        formaction?: string;
+        formmethod?: 'get' | 'post' | 'dialog';
+        formtarget?: Target;
+        formnovalidate?: boolean;
+    };
+    form: {
+        action?: string;
+        method?: 'get' | 'post' | 'dialog';
+        enctype?: string;
+        target?: Target;
+        name?: string;
+        novalidate?: boolean;
+        autocomplete?: string;
+        'accept-charset'?: string;
+    };
+    label: {
+        for?: string;
+        form?: string;
+    };
+    select: {
+        name?: string;
+        disabled?: boolean;
+        multiple?: boolean;
+        required?: boolean;
+        autofocus?: boolean;
+        autocomplete?: string;
+        size?: number;
+        form?: string;
+    };
+    option: {
+        value?: string | number;
+        label?: string;
+        selected?: boolean;
+        disabled?: boolean;
+    };
+    optgroup: {
+        label?: string;
+        disabled?: boolean;
+    };
+    textarea: {
+        name?: string;
+        placeholder?: string;
+        rows?: number;
+        cols?: number;
+        wrap?: 'soft' | 'hard' | 'off';
+        disabled?: boolean;
+        readonly?: boolean;
+        required?: boolean;
+        autofocus?: boolean;
+        autocomplete?: string;
+        minlength?: number;
+        maxlength?: number;
+        form?: string;
+    };
+    fieldset: {
+        name?: string;
+        disabled?: boolean;
+        form?: string;
+    };
+    output: {
+        for?: string;
+        form?: string;
+        name?: string;
+    };
+    progress: {
+        value?: number;
+        max?: number;
+    };
+    meter: {
+        value?: number;
+        min?: number;
+        max?: number;
+        low?: number;
+        high?: number;
+        optimum?: number;
+    };
+    link: {
+        href?: string;
+        rel?: string;
+        type?: string;
+        media?: string;
+        as?: string;
+        sizes?: string;
+        hreflang?: string;
+        integrity?: string;
+        crossorigin?: CrossOrigin;
+        referrerpolicy?: Referrer;
+    };
+    script: {
+        src?: string;
+        type?: string;
+        async?: boolean;
+        defer?: boolean;
+        nomodule?: boolean;
+        integrity?: string;
+        crossorigin?: CrossOrigin;
+        referrerpolicy?: Referrer;
+    };
+    iframe: {
+        src?: string;
+        srcdoc?: string;
+        name?: string;
+        width?: Size;
+        height?: Size;
+        allow?: string;
+        allowfullscreen?: boolean;
+        sandbox?: string;
+        loading?: 'eager' | 'lazy';
+        referrerpolicy?: Referrer;
+    };
+    video: {
+        src?: string;
+        poster?: string;
+        width?: Size;
+        height?: Size;
+        controls?: boolean;
+        autoplay?: boolean;
+        loop?: boolean;
+        muted?: boolean;
+        playsinline?: boolean;
+        preload?: Preload;
+        crossorigin?: CrossOrigin;
+    };
+    audio: {
+        src?: string;
+        controls?: boolean;
+        autoplay?: boolean;
+        loop?: boolean;
+        muted?: boolean;
+        preload?: Preload;
+        crossorigin?: CrossOrigin;
+    };
+    source: {
+        src?: string;
+        srcset?: string;
+        sizes?: string;
+        type?: string;
+        media?: string;
+        width?: Size;
+        height?: Size;
+    };
+    canvas: {
+        width?: Size;
+        height?: Size;
+    };
+    td: {
+        colspan?: number;
+        rowspan?: number;
+        headers?: string;
+    };
+    th: {
+        colspan?: number;
+        rowspan?: number;
+        headers?: string;
+        scope?: string;
+        abbr?: string;
+    };
+    col: {
+        span?: number;
+    };
+    colgroup: {
+        span?: number;
+    };
+    ol: {
+        start?: number;
+        reversed?: boolean;
+        type?: '1' | 'a' | 'A' | 'i' | 'I';
+    };
+    li: {
+        value?: number;
+    };
+    details: {
+        open?: boolean;
+        name?: string;
+    };
+    dialog: {
+        open?: boolean;
+    };
+    blockquote: {
+        cite?: string;
+    };
+    q: {
+        cite?: string;
+    };
+    time: {
+        datetime?: string;
+    };
+    meta: {
+        name?: string;
+        content?: string;
+        charset?: string;
+        'http-equiv'?: string;
+    };
+    track: {
+        src?: string;
+        kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+        srclang?: string;
+        label?: string;
+        default?: boolean;
+    };
+    slot: {
+        name?: string;
+    };
+    data: {
+        value?: string;
+    };
+    del: {
+        cite?: string;
+        datetime?: string;
+    };
+    ins: {
+        cite?: string;
+        datetime?: string;
+    };
+}
+export {};

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { em } from './em';
-export { mount } from './utils';
+export type { AttributeMap, GlobalAttributes } from './attributes';
+export type { ComponentProps, RenderState, TagName } from './BaseComponent';

package/dist/utils/applyStyle.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from '../types';
+export declare const applyStyle: (element: HTMLElement, style: ComponentProps["style"], previous: Set<string>) => Set<string>;

package/dist/{types/utils → utils}/index.d.ts

@@ -1,5 +1,5 @@
-export { setEventListeners } from './setEventListeners';
-export { generateStyle } from './generateStyle';
-export { generateAttributes } from './generateAttributes';
-export { render } from './render';
+export { applyStyle } from './applyStyle';
 export { mount } from './mount';
+export { render } from './render';
+export { setEventListeners } from './setEventListeners';
+export { syncAttributes } from './syncAttributes';

package/dist/utils/mount.d.ts

@@ -0,0 +1 @@
+export declare const mount: (target: string | Element, ...nodes: Node[]) => Element;

package/dist/utils/render.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps, RenderState } from '../types';
+export declare const render: (root: ShadowRoot, props: ComponentProps, state: RenderState) => HTMLElement;

package/dist/utils/setEventListeners.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from '../types';
+export declare const setEventListeners: (element: HTMLElement, props: ComponentProps, previous: Map<string, EventListener>) => Map<string, EventListener>;

package/dist/utils/syncAttributes.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from '../types';
+export declare const syncAttributes: (element: HTMLElement, props: ComponentProps, previous: Set<string>) => Set<string>;

package/package.json

@@ -1,30 +1,33 @@
 {
   "name": "ecmact",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Dynamic components library using Vite Vanilla and Web Components",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "types": "dist/types/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js",
-      "types": "./dist/types/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     }
   },
   "files": [
     "dist"
   ],
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=22.12.0"
   },
   "scripts": {
     "build": "vite build",
-    "test": "vitest",
-    "lint": "eslint . --ext .ts --fix",
-    "format": "prettier --write \"src/**/*.{ts,js,json,css,md}\"",
-    "release": "npm publish --access public"
+    "typecheck": "tsc",
+    "test": "vitest run --coverage",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepublishOnly": "npm run build"
   },
   "keywords": [
     "vite",
@@ -36,15 +39,35 @@
   "author": "Alexandr Priadchenko",
   "license": "MIT",
   "devDependencies": {
-    "eslint-plugin-prettier": "^5.2.5",
-    "jiti": "^2.4.2",
-    "prettier": "^3.5.3",
-    "typescript-eslint": "^8.28.0",
-    "vite": "^6.2.4",
-    "vite-plugin-dts": "^4.5.3"
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^22.20.5",
+    "@vitest/coverage-v8": "^5.1.0",
+    "eslint": "^10.14.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.7",
+    "happy-dom": "^21.0.4",
+    "jiti": "^2.7.0",
+    "prettier": "^3.9.10",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.72.1",
+    "vite": "^8.3.6",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^5.1.0"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/eternalvision/ecmact.git"
+  },
+  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/eternalvision/ecmact/issues"
+  },
+  "homepage": "https://github.com/eternalvision/ecmact#readme",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "overrides": {
+    "minimatch": "^11.0.1"
   }
 }

package/dist/cjs/index.js

@@ -1,8 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=({props:s,shadowRoot:t})=>{Object.entries(s).forEach(([e,n])=>{if(e.startsWith("on")&&typeof n=="function"){const o=e.slice(2).toLowerCase();t.querySelector(s.tag||"div")?.addEventListener(o,n)}})},p=({style:s,tag:t})=>{if(Object.keys(s).length===0)return"";const e=Object.entries(s).map(([n,o])=>`${n.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${o};`).join(" ");return`<style>${t} { ${e} }</style>`},l=({props:s})=>Object.entries(s).filter(([t])=>!["content","tag","style","children"].includes(t)&&!t.startsWith("on")).map(([t,e])=>`${t}="${e}"`).join(" "),h=({props:s,shadowRoot:t,generateStyle:e})=>{const{content:n="",tag:o="div",children:r=[]}=s;t.innerHTML=`
-      ${e()}
-      <${o} ${l({props:s})}>
-        ${n.length>0?n:""}
-        ${r.length>0?"<slot></slot>":""}
-      </${o}>
-    `;const c=t.querySelector("slot");r.forEach(i=>c.appendChild(i))},d=(s,...t)=>{const e=document.querySelector(s);e&&e.append(...t)};class u extends HTMLElement{_props;constructor(t={}){super(),this.attachShadow({mode:"open"}),this._props=t}#t(){return a({props:this.props,shadowRoot:this.shadowRoot})}#s(){const{style:t={},tag:e="div"}=this.props;return p({style:t,tag:e})}#e(){return h({props:this._props,shadowRoot:this.shadowRoot,generateStyle:()=>this.#s()})}connectedCallback(){this.#e(),this.#t()}setState(t){this.props={...this._props,...t}}get props(){return this._props}set props(t){this._props=t,this.#e(),this.#t()}}const m=new Proxy({},{get(s,t){const e=`em-${t.toLowerCase()}`;return customElements.get(e)||customElements.define(e,class extends u{constructor(n){super(n)}}),n=>{const o=document.createElement(e);return o.props=n,o}}});exports.em=m;exports.mount=d;
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/setEventListeners.ts","../../src/utils/generateStyle.ts","../../src/utils/generateAttributes.ts","../../src/utils/render.ts","../../src/utils/mount.ts","../../src/component.ts","../../src/em.ts"],"sourcesContent":["export const setEventListeners = ({ props, shadowRoot }) => {\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.startsWith('on') && typeof value === 'function') {\n      const event = key.slice(2).toLowerCase();\n      shadowRoot.querySelector(props.tag || 'div')?.addEventListener(event, value);\n    }\n  });\n};\n","export const generateStyle = ({ style, tag }) => {\n  if (Object.keys(style).length === 0) return '';\n\n  const css = Object.entries(style)\n    .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)\n    .join(' ');\n\n  return `<style>${tag} { ${css} }</style>`;\n};\n","export const generateAttributes = ({ props }) =>\n  Object.entries(props)\n    .filter(\n      ([key]) => !['content', 'tag', 'style', 'children'].includes(key) && !key.startsWith('on'),\n    )\n    .map(([key, value]) => `${key}=\"${value}\"`)\n    .join(' ');\n","import { generateAttributes } from './generateAttributes';\n\nexport const render = ({ props, shadowRoot, generateStyle }) => {\n  const { content = '', tag = 'div', children = [] } = props;\n\n  shadowRoot!.innerHTML = `\n      ${generateStyle()}\n      <${tag} ${generateAttributes({ props })}>\n        ${content.length > 0 ? content : ''}\n        ${children.length > 0 ? `<slot></slot>` : ''}\n      </${tag}>\n    `;\n\n  const slot = shadowRoot!.querySelector('slot') as HTMLSlotElement;\n  children.forEach((child: any) => slot.appendChild(child));\n};\n","export const mount = (elementId: string, ...nodes: Node[]) => {\n  const container = document.querySelector(elementId);\n  if (container) container.append(...nodes);\n};\n","import type { ComponentProps } from '@types';\nimport { setEventListeners, generateStyle, render } from '@utils';\n\nexport class component extends HTMLElement {\n  private _props: ComponentProps;\n\n  constructor(props: ComponentProps = {}) {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this._props = props;\n  }\n\n  #setEventListeners() {\n    return setEventListeners({\n      props: this.props,\n      shadowRoot: this.shadowRoot,\n    });\n  }\n\n  #generateStyle() {\n    const { style = {}, tag = 'div' } = this.props;\n    return generateStyle({ style, tag });\n  }\n\n  #render() {\n    return render({\n      props: this._props,\n      shadowRoot: this.shadowRoot,\n      generateStyle: () => this.#generateStyle(),\n    });\n  }\n\n  connectedCallback() {\n    this.#render();\n    this.#setEventListeners();\n  }\n\n  setState(newProps: Partial<ComponentProps>) {\n    this.props = {\n      ...this._props,\n      ...newProps,\n    };\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  set props(newProps: ComponentProps) {\n    this._props = newProps;\n    this.#render();\n    this.#setEventListeners();\n  }\n}\n","import { component } from './component';\nimport type { ComponentProps } from '@types';\n\ninterface ComponentRegistry {\n  [key: string]: (props: ComponentProps) => component;\n}\n\nconst em: ComponentRegistry = new Proxy({} as ComponentRegistry, {\n  get(_, prop: string) {\n    const tagName = `em-${prop.toLowerCase()}`;\n\n    if (!customElements.get(tagName)) {\n      customElements.define(\n        tagName,\n        class extends component {\n          constructor(props: ComponentProps) {\n            super(props);\n          }\n        },\n      );\n    }\n\n    return (props: ComponentProps): component => {\n      const element = document.createElement(tagName) as component;\n      element.props = props;\n      return element;\n    };\n  },\n});\n\nexport { em };\n"],"names":["setEventListeners","props","shadowRoot","key","value","event","generateStyle","style","tag","css","generateAttributes","render","content","children","slot","child","mount","elementId","nodes","container","component","#setEventListeners","#generateStyle","#render","newProps","em","_","prop","tagName","element"],"mappings":"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"}

package/dist/es/index.js

@@ -1,87 +0,0 @@
-const p = ({ props: s, shadowRoot: t }) => {
-  Object.entries(s).forEach(([e, n]) => {
-    if (e.startsWith("on") && typeof n == "function") {
-      const o = e.slice(2).toLowerCase();
-      t.querySelector(s.tag || "div")?.addEventListener(o, n);
-    }
-  });
-}, a = ({ style: s, tag: t }) => {
-  if (Object.keys(s).length === 0) return "";
-  const e = Object.entries(s).map(([n, o]) => `${n.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${o};`).join(" ");
-  return `<style>${t} { ${e} }</style>`;
-}, h = ({ props: s }) => Object.entries(s).filter(
-  ([t]) => !["content", "tag", "style", "children"].includes(t) && !t.startsWith("on")
-).map(([t, e]) => `${t}="${e}"`).join(" "), l = ({ props: s, shadowRoot: t, generateStyle: e }) => {
-  const { content: n = "", tag: o = "div", children: r = [] } = s;
-  t.innerHTML = `
-      ${e()}
-      <${o} ${h({ props: s })}>
-        ${n.length > 0 ? n : ""}
-        ${r.length > 0 ? "<slot></slot>" : ""}
-      </${o}>
-    `;
-  const c = t.querySelector("slot");
-  r.forEach((i) => c.appendChild(i));
-}, u = (s, ...t) => {
-  const e = document.querySelector(s);
-  e && e.append(...t);
-};
-class d extends HTMLElement {
-  _props;
-  constructor(t = {}) {
-    super(), this.attachShadow({ mode: "open" }), this._props = t;
-  }
-  #t() {
-    return p({
-      props: this.props,
-      shadowRoot: this.shadowRoot
-    });
-  }
-  #s() {
-    const { style: t = {}, tag: e = "div" } = this.props;
-    return a({ style: t, tag: e });
-  }
-  #e() {
-    return l({
-      props: this._props,
-      shadowRoot: this.shadowRoot,
-      generateStyle: () => this.#s()
-    });
-  }
-  connectedCallback() {
-    this.#e(), this.#t();
-  }
-  setState(t) {
-    this.props = {
-      ...this._props,
-      ...t
-    };
-  }
-  get props() {
-    return this._props;
-  }
-  set props(t) {
-    this._props = t, this.#e(), this.#t();
-  }
-}
-const m = new Proxy({}, {
-  get(s, t) {
-    const e = `em-${t.toLowerCase()}`;
-    return customElements.get(e) || customElements.define(
-      e,
-      class extends d {
-        constructor(n) {
-          super(n);
-        }
-      }
-    ), (n) => {
-      const o = document.createElement(e);
-      return o.props = n, o;
-    };
-  }
-});
-export {
-  m as em,
-  u as mount
-};
-//# sourceMappingURL=index.js.map

package/dist/es/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/setEventListeners.ts","../../src/utils/generateStyle.ts","../../src/utils/generateAttributes.ts","../../src/utils/render.ts","../../src/utils/mount.ts","../../src/component.ts","../../src/em.ts"],"sourcesContent":["export const setEventListeners = ({ props, shadowRoot }) => {\n  Object.entries(props).forEach(([key, value]) => {\n    if (key.startsWith('on') && typeof value === 'function') {\n      const event = key.slice(2).toLowerCase();\n      shadowRoot.querySelector(props.tag || 'div')?.addEventListener(event, value);\n    }\n  });\n};\n","export const generateStyle = ({ style, tag }) => {\n  if (Object.keys(style).length === 0) return '';\n\n  const css = Object.entries(style)\n    .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)\n    .join(' ');\n\n  return `<style>${tag} { ${css} }</style>`;\n};\n","export const generateAttributes = ({ props }) =>\n  Object.entries(props)\n    .filter(\n      ([key]) => !['content', 'tag', 'style', 'children'].includes(key) && !key.startsWith('on'),\n    )\n    .map(([key, value]) => `${key}=\"${value}\"`)\n    .join(' ');\n","import { generateAttributes } from './generateAttributes';\n\nexport const render = ({ props, shadowRoot, generateStyle }) => {\n  const { content = '', tag = 'div', children = [] } = props;\n\n  shadowRoot!.innerHTML = `\n      ${generateStyle()}\n      <${tag} ${generateAttributes({ props })}>\n        ${content.length > 0 ? content : ''}\n        ${children.length > 0 ? `<slot></slot>` : ''}\n      </${tag}>\n    `;\n\n  const slot = shadowRoot!.querySelector('slot') as HTMLSlotElement;\n  children.forEach((child: any) => slot.appendChild(child));\n};\n","export const mount = (elementId: string, ...nodes: Node[]) => {\n  const container = document.querySelector(elementId);\n  if (container) container.append(...nodes);\n};\n","import type { ComponentProps } from '@types';\nimport { setEventListeners, generateStyle, render } from '@utils';\n\nexport class component extends HTMLElement {\n  private _props: ComponentProps;\n\n  constructor(props: ComponentProps = {}) {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this._props = props;\n  }\n\n  #setEventListeners() {\n    return setEventListeners({\n      props: this.props,\n      shadowRoot: this.shadowRoot,\n    });\n  }\n\n  #generateStyle() {\n    const { style = {}, tag = 'div' } = this.props;\n    return generateStyle({ style, tag });\n  }\n\n  #render() {\n    return render({\n      props: this._props,\n      shadowRoot: this.shadowRoot,\n      generateStyle: () => this.#generateStyle(),\n    });\n  }\n\n  connectedCallback() {\n    this.#render();\n    this.#setEventListeners();\n  }\n\n  setState(newProps: Partial<ComponentProps>) {\n    this.props = {\n      ...this._props,\n      ...newProps,\n    };\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  set props(newProps: ComponentProps) {\n    this._props = newProps;\n    this.#render();\n    this.#setEventListeners();\n  }\n}\n","import { component } from './component';\nimport type { ComponentProps } from '@types';\n\ninterface ComponentRegistry {\n  [key: string]: (props: ComponentProps) => component;\n}\n\nconst em: ComponentRegistry = new Proxy({} as ComponentRegistry, {\n  get(_, prop: string) {\n    const tagName = `em-${prop.toLowerCase()}`;\n\n    if (!customElements.get(tagName)) {\n      customElements.define(\n        tagName,\n        class extends component {\n          constructor(props: ComponentProps) {\n            super(props);\n          }\n        },\n      );\n    }\n\n    return (props: ComponentProps): component => {\n      const element = document.createElement(tagName) as component;\n      element.props = props;\n      return element;\n    };\n  },\n});\n\nexport { em };\n"],"names":["setEventListeners","props","shadowRoot","key","value","event","generateStyle","style","tag","css","generateAttributes","render","content","children","slot","child","mount","elementId","nodes","container","component","#setEventListeners","#generateStyle","#render","newProps","em","_","prop","tagName","element"],"mappings":"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"}

package/dist/types/component.d.ts

@@ -1,10 +0,0 @@
-import { ComponentProps } from './types';
-export declare class component extends HTMLElement {
-    #private;
-    private _props;
-    constructor(props?: ComponentProps);
-    connectedCallback(): void;
-    setState(newProps: Partial<ComponentProps>): void;
-    get props(): ComponentProps;
-    set props(newProps: ComponentProps);
-}

package/dist/types/em.d.ts

@@ -1,7 +0,0 @@
-import { component } from './component';
-import { ComponentProps } from './types';
-interface ComponentRegistry {
-    [key: string]: (props: ComponentProps) => component;
-}
-declare const em: ComponentRegistry;
-export { em };

package/dist/types/types/BaseComponent.d.ts

@@ -1,10 +0,0 @@
-export interface ComponentProps {
-    content?: string;
-    tag?: string;
-    style?: Partial<CSSStyleDeclaration>;
-    children?: HTMLElement[];
-    slots?: Record<string, string>;
-    ref?: (element: HTMLElement) => void;
-    customEvents?: Record<string, (event: Event) => void>;
-    [key: string]: any;
-}

package/dist/types/types/index.d.ts

@@ -1 +0,0 @@
-export type { ComponentProps } from './BaseComponent';

package/dist/types/utils/generateAttributes.d.ts

@@ -1,3 +0,0 @@
-export declare const generateAttributes: ({ props }: {
-    props: any;
-}) => string;

package/dist/types/utils/generateStyle.d.ts

@@ -1,4 +0,0 @@
-export declare const generateStyle: ({ style, tag }: {
-    style: any;
-    tag: any;
-}) => string;

package/dist/types/utils/mount.d.ts

@@ -1 +0,0 @@
-export declare const mount: (elementId: string, ...nodes: Node[]) => void;

package/dist/types/utils/render.d.ts

@@ -1,5 +0,0 @@
-export declare const render: ({ props, shadowRoot, generateStyle }: {
-    props: any;
-    shadowRoot: any;
-    generateStyle: any;
-}) => void;

package/dist/types/utils/setEventListeners.d.ts

@@ -1,4 +0,0 @@
-export declare const setEventListeners: ({ props, shadowRoot }: {
-    props: any;
-    shadowRoot: any;
-}) => void;