{"version":3,"file":"lithentElement.mjs","sources":["../src/index.ts"],"sourcesContent":["import { h, mount, render } from 'lithent';\nimport type { Props, TagFunction } from 'lithent';\n\n/**\n * Prop declarations for `defineElement`. Each key is a camelCase prop name\n * observed as its kebab-case attribute; the constructor picks the attribute\n * conversion (DESIGN §4.1).\n */\nexport type PropSpec = Record<\n string,\n StringConstructor | NumberConstructor | BooleanConstructor | ObjectConstructor\n>;\n\n/** The prop type a constructor declares (DESIGN §8). */\ntype PropType = C extends NumberConstructor\n ? number\n : C extends BooleanConstructor\n ? boolean\n : C extends StringConstructor\n ? string\n : unknown;\n\n/**\n * Props a declaration produces. Every prop can be absent (no attribute, no\n * property yet) except Boolean ones, which start as `false` (DESIGN §4.1).\n */\nexport type PropsOf = {\n [K in keyof S as S[K] extends BooleanConstructor ? K : never]: boolean;\n} & {\n [K in keyof S as S[K] extends BooleanConstructor ? never : K]?: PropType<\n S[K]\n >;\n};\n\n/** What the inner component receives: the declared props and `host`. */\nexport type ElementProps = PropsOf & {\n host: HTMLElement;\n};\n\n/** The element `defineElement` registers, with a property per prop. */\nexport type LithentElementOf = HTMLElement & PropsOf;\n\nexport type DefineElementOptions = {\n props?: S;\n shadow?: boolean | 'open' | 'closed';\n styles?: string[];\n};\n\n/** What an element keeps between callbacks. */\ntype State = {\n /** Current props, owned by the element. */\n p: Props;\n /** The render root, created on first connect. */\n root?: ShadowRoot | HTMLElement;\n /** `destroy` returned by `render`, set while mounted. */\n d?: () => void;\n /** The Host component's `renew`, set while mounted. */\n r?: () => void;\n};\n\n/**\n * Element state, outside the element: fields on the instance would collide\n * with props of the same name (`p`, `d`, ...), and a closed shadow root must\n * not leak through a property. (A module WeakMap instead of `#private`\n * fields: those compile to helpers that cost more bytes than this whole\n * file — RC-3.)\n */\nconst states = new WeakMap();\nconst stateOf = (el: HTMLElement) => states.get(el)!;\n\n/** Set a prop and re-render if mounted (renew is batched per microtask). */\nconst update = (el: HTMLElement, key: string, value: unknown) => {\n const state = stateOf(el);\n state.p[key] = value;\n // Before the first connect there is no renew: the first render reads p.\n if (state.r) state.r();\n};\n\n/**\n * Attribute string -> prop value (DESIGN §4.1). `null` means the attribute is\n * absent. Invalid numbers and JSON become `undefined` without a warning: the\n * runtime packages have no dev-only build to keep warnings out of production.\n */\nconst convert = (type: PropSpec[string], value: string | null): unknown => {\n if (type === Boolean) return value !== null;\n if (value === null) return undefined;\n if (type === Number) return isNaN(+value) ? undefined : +value;\n if (type === Object) {\n try {\n return JSON.parse(value);\n } catch {\n return undefined;\n }\n }\n return value;\n};\n\n/**\n * Dispatch a DOM event from the element (DC-5). It is dispatched on the\n * element itself, so it bubbles to the host page; `composed` lets it also\n * leave an outer shadow root when the element is nested in another\n * component. It is cancelable: returns `false` when a listener called\n * `preventDefault()`. Pass `init` to change `bubbles`, `composed` or\n * `cancelable`.\n *\n * ```ts\n * const PayButton = mount<{ amount: number; host: HTMLElement }>(\n * (_renew, props) => () =>\n * h('button', { onClick: () => emit(props.host, 'pay', props.amount) }, 'Pay')\n * );\n * ```\n */\nexport const emit = (\n host: Element,\n name: string,\n detail?: unknown,\n // Overrides the defaults, e.g. { bubbles: false } for a noisy event that\n // only listeners on the element itself should hear. `detail` always wins.\n init?: EventInit\n) =>\n host.dispatchEvent(\n new CustomEvent(name, {\n bubbles: true,\n composed: true,\n cancelable: true,\n ...init,\n detail,\n })\n );\n\n/**\n * Register a lithent component as a Custom Element.\n *\n * The element owns the props and renders a small Host component that holds\n * `renew`; the user's component sits under it unchanged (DESIGN §2).\n * Returns `undefined` where Custom Elements do not exist (SSR, Node), and the\n * existing constructor when the name is already taken (DC-7).\n */\nexport const defineElement = <\n // `host` is reserved (DC-5): declaring it is a type error as well.\n S extends PropSpec & { host?: never } = Record,\n>(\n name: `${string}-${string}`,\n // `S` is inferred from `props` only: it sits in a mapped type here, which\n // TypeScript does not infer from (checked in Phase 7; no NoInfer needed).\n component: (props: ElementProps, children?: never) => unknown,\n options: DefineElementOptions = {}\n): (new () => LithentElementOf) | undefined => {\n if (typeof customElements === 'undefined') return undefined;\n\n const existing = customElements.get(name);\n if (existing) return existing as new () => LithentElementOf;\n\n const { shadow = true, props: spec = {} as S, styles } = options;\n // DC-5: `host` is the prop that carries the element itself.\n if ('host' in spec) throw Error('\"host\" is reserved');\n // FR-6: styles apply only inside a shadow root (DESIGN §5); one sheet per\n // definition, shared by every instance and created on first use.\n const css = shadow && styles ? styles.join('\\n') : '';\n let sheet: CSSStyleSheet | undefined;\n\n // FR-3: kebab-case attribute -> camelCase prop key.\n const keyOf: Record = {};\n const attrOf: Record = {};\n for (const key in spec) {\n keyOf[(attrOf[key] = key.replace(/[A-Z]/g, c => '-' + c.toLowerCase()))] =\n key;\n }\n const observed = Object.keys(keyOf);\n\n class LithentElement extends HTMLElement {\n // A getter rather than a static field: static fields compile to helpers.\n static get observedAttributes() {\n return observed;\n }\n\n constructor() {\n super();\n const state: State = { p: {} };\n states.set(this, state);\n // An absent Boolean attribute is `false`, before any attribute callback.\n for (const key in spec) if (spec[key] === Boolean) state.p[key] = false;\n }\n\n connectedCallback() {\n const state = stateOf(this);\n // Still mounted: this is the reconnect half of a move (DC-4).\n if (state.d) return;\n\n // FR-4: a value assigned before the element was defined is an own\n // property that hides the prototype accessor (DESIGN §4.2). Take it over\n // here rather than in the constructor: an upgrade runs the attribute\n // callbacks after the constructor and before this, and the property is\n // the richer value. lithent sets both on an element it renders before\n // the definition (B-3), so an object or `false` must not be turned back\n // into the attribute string.\n for (const key in spec) {\n // Object.hasOwn, not this.hasOwnProperty: a prop may be named that.\n if (Object.hasOwn(this, key)) {\n const value = (this as unknown as Props)[key];\n delete (this as unknown as Props)[key];\n // Through the accessor, so `undefined` falls back to the attribute\n // (or `false`) as everywhere else.\n (this as unknown as Props)[key] = value;\n }\n }\n\n // DC-8: open shadow root by default; `shadow: false` renders into the\n // element itself. A shadow root survives disconnects, so reuse it.\n let root = state.root;\n if (!root) {\n root = state.root = shadow\n ? this.attachShadow({ mode: shadow === 'closed' ? 'closed' : 'open' })\n : this;\n // Styles go in once per root: the root, and a fallback