sinho 0.1.0

package/dist/bundle.min.js

@@ -0,0 +1 @@
+const t=t=>({t:t,o:[],i:[],l:{...t?.l},u(t){const n=o;o=this;try{return t()}finally{o=n}},h(){for(let t=this.i.length-1;t>=0;t--)this.i[t].h();this.i=[];for(let t=this.o.length-1;t>=0;t--){const n=this.o[t];n._?.(),n.p.forEach((t=>t.o.delete(n))),n.p.clear()}this.o=[]}});let n,e,o=t(),s=!1;const r=()=>o,c=(t,o)=>{const r=()=>(!s&&n&&(n.p.add(r),r.o.add(n)),r.peek());r.o=new Set,r.peek=()=>t;const c=(n,s)=>{if(s={...o,...s},e){const o="function"==typeof n?n(r.peek()):n;(s?.force||o!==r.peek())&&(s?.force?t=o:e.m.push((()=>t=o)),s?.silent||r.o.forEach((t=>e.o.add(t))))}else i((()=>c(n,s)))};return[r,c]},i=t=>{const n=e;e={m:[],o:new Set};try{const n=t();for(;e.m.length>0||e.o.size>0;){const t=e.o;e.o=new Set,t.forEach((t=>t._?.())),e.m.forEach((t=>t())),e.m=[],t.forEach((t=>t.u()))}return n}finally{e=n}},l=(t,e)=>{const r=!!e,c={v:o,p:new Set,u(){const o=n,c=s;n=this;try{e?this.p.size||e.forEach((t=>t())):(this.p.forEach((t=>t.o.delete(this))),this.p.clear()),s=r,this._?.();const n=this.v.u((()=>i(t)));this._=n?()=>{this.v.u((()=>i(n))),this._=null}:null}finally{n=o,s=c}}};c.p.forEach((t=>t.o.add(c))),o.o.push(c),c.u(),c.p.size||c._||o.o.pop()},u=(t,n)=>{const[e,o]=c();let s=!0;return l((()=>{o(t,s?{...n,force:!0}:n),s=!1})),e},f=(n,e)=>{const s=o,r=t(s);Object.assign(r.l,e?.details),s.i.push(r);return[r.u(n),()=>{const t=s.i.indexOf(r);t>=0&&s.i.splice(t,1),r.h()}]},a=(t,n)=>{const[e,o]=c(t,n);return e.set=o,e},d={upgrade:t=>()=>d.get(t),get:t=>"function"==typeof t?t():t,peek(t){const n=s;s=!0;try{return this.get(t)}finally{s=n}}},h=(t={})=>({S:[],M(t){return this.k?.next().value??t()},...t}),_=()=>{const t=r();return t.l.C??=h()},p=(t,n)=>{const e=_(),o=h({...e,...t}),[s,r]=f(n,{details:{C:o}});return l((()=>r)),s},m=t=>(t[0]??"").toLowerCase()+t.slice(1).replace(/[A-Z]/g,(t=>"-"+t.toLowerCase())),y=t=>t.startsWith("on:")?t.slice(3):m(t.slice(2)),w=Symbol(),b=(t,n)=>({[w]:Math.random().toString(36).slice(2),N:t,j:n}),g=t=>!!t?.[w],v=(t,n,e)=>{n.addEventListener(t[w],(t=>{const n=d.get(e);void 0!==n&&(t.stopPropagation(),t.detail(n))}))},x=t=>{const n=_();return u((()=>{let e=t.N;return n.H?.dispatchEvent(new CustomEvent(t[w],{detail:t=>e=t,bubbles:!0,composed:!0})),e}))},S=(t,n)=>({L:"p",T:t,...n}),M=(t=CustomEvent)=>({L:"e",A:t}),k=Symbol();let C;const E=(t,n)=>{C?C.push([t,n]):l(t,n)},N=(t,n={},e={})=>{const o=[],s=new Map;for(const t in n){const e=n[t];if("p"==e.L&&e.attribute){"function"==typeof e.attribute&&(e.attribute={transform:e.attribute});const n=e.attribute={name:m(t),static:!1,transform:t=>t,...e.attribute};s.set(n.name,{name:t,meta:e}),n.static||o.push(n.name)}}e.shadow??={mode:"open"};class i extends HTMLElement{static[k]={O:t};static observedAttributes=o;props={};events={};[k]={};constructor(){super();for(const t in n){const e=n[t];if("p"==e.L){const n=g(e.T)?e.T:null,[o,s]=c(n?void 0:e.T);this.props[t]=o,n&&v(n,this,o),Object.defineProperty(this,t,{get:o.peek,set:t=>s((()=>t),{force:!0})})}else if("e"==e.L&&t.startsWith("on")){const n=y(t);this.events[t]=t=>this.dispatchEvent(new e.A(n,t))}}}connectedCallback(){const t=(n=this,e.shadow?n.shadowRoot??n.attachShadow(e.shadow):n);var n;this[k].D=f((()=>p({I:!1,H:this,k:t.childNodes.values()},(()=>{this[k].v=r();const n=C;C=[];try{t?.append(...this.render().build()),C.forEach((([t,n])=>l(t,n)))}finally{C=n}}))))[1]}disconnectedCallback(){this[k].D?.()}attributeChangedCallback(t,n,e){const o=s.get(t);o&&(this[o.name]=null!=e?o.meta.attribute.transform.call(this,e):g(o.meta.T)?void 0:o.meta.T)}}return i},j=t=>!!t?.[k],H=(...t)=>{const[n,e]="string"==typeof t[0]?[t[0],t.slice(1)]:["",t];for(const t of e)customElements.define(n+t[k].O,t)},L=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i,T=(t,n,e)=>{"-"==n[0]?t.style.setProperty(n,""+e):t.style[n]=null==e?"":"number"!=typeof e||L.test(n)?""+e:e+"px"},A=(t,n,e,o)=>{const s=null==e||!1===e&&!n.includes("-");if(n.startsWith("prop:"))t[n]=e;else if(n.startsWith("attr:"))s?t.removeAttribute(n):t.setAttribute(n,e);else if(!["innerHTML","outerHTML"].includes(n)){if(!["tabIndex","role",...o?["width","height","href","list","form","download","rowSpan","colSpan"]:[]].includes(n)&&n in t)try{return void(t[n]=e??"")}catch(t){}"function"==typeof e||(s?t.removeAttribute(n):t.setAttribute(n,e))}},O=t=>({build(){const n=t();return n.build?.()??n}}),D=({text:t,marker:n})=>O((()=>{const e=_(),o=n&&e.M((()=>document.createComment(""))),s=e.M((()=>document.createTextNode("")));return l((()=>{const n=""+(d.get(t)??"");s.textContent!=n&&(s.textContent=n)})),o?[o,s]:[s]})),I=({children:t})=>O((()=>Array.isArray(t)?t.flatMap((t=>I({children:t}).build())):null==t?[]:"object"==typeof t?t:D({text:t}))),$=(t,n,e,o)=>{const{ref:s,style:c,children:u,dangerouslySetInnerHTML:f,...a}=e;for(const n in c??{}){const e=c[n];l((()=>{T(t,n,d.get(e))}))}for(const n in a){const e=a[n];if(n.startsWith("on")){const o=r(),s=t=>{o.u((()=>i((()=>e(t)))))},c=y(n);l((()=>(t.addEventListener(c,s),()=>t.removeEventListener(c,s))))}else l((()=>{A(t,n,d.get(e),o)}))}return f&&l((()=>{const n=d.get(f).__html;t.innerHTML!=n&&(t.innerHTML=n)})),s&&l((()=>(s.set(t),()=>s.set(void 0)))),null!=e.children&&t.append(...p({I:n,k:t.childNodes.values()},(()=>I({children:e.children}).build()))),t},z=(t,n={},e)=>(null!=e&&(n.children=e),j(t)?((t,n)=>O((()=>{const e=_().M((()=>new t));return customElements.upgrade(e),$(e,!1,n),[e]})))(t,n):"function"==typeof t?O((()=>t(n))):((t,n={})=>O((()=>{const e=_(),o="svg"==t||!!e.I;return[$(e.M((()=>o?document.createElementNS("http://www.w3.org/2000/svg",t):document.createElement(t))),o,n,!0)]})))(t,n)),P=new Proxy(z,{get:(t,n)=>(e,o)=>t(n,e,o)}),V=(t,n)=>{const[e,o]=c({$:[],P:new Map});let s=new Map;return l((()=>{const e=[],r=s,c=((t,n)=>{const e=new Map;for(let o=0;o<t.length;o++){const s=n(t[o],o);if(e.has(s))throw Error(`Duplicate key '${s}'`);e.set(s,o)}return e})(t(),n),i=(t=NaN)=>e.map((t=>"r"==t.V?n=>n<t.Z?n:n==t.Z?NaN:n-1:"a"==t.V?n=>n<t.Z?n:n+1:"m"==t.V?n=>t.q<=n&&n<t.B?n+1:n==t.B?t.q:n:t=>t)).reduce(((t,n)=>n(t)),t);for(const t of r.keys()){const n=i(r.get(t));c.has(t)||e.push({V:"r",F:t,Z:n})}for(let o=0;o<t().length;o++){const s=n(t()[o],o),c=i(r.get(s));isNaN(c)?e.push({V:"a",F:s,Z:o}):c!=o&&e.push({V:"m",F:s,B:c,q:o})}e.length>0&&o({$:e,P:c}),s=c})),e},Z=t=>O((()=>{const n=_(),e=d.upgrade(t.each??[]),o=n.M((()=>document.createComment(""))),s=t.key??((t,n)=>n),r=[o],i=new Map,u=V(e,s),a=t=>{for(let n=t-1;n>=0;n--){const n=s(e()[t-1],t-1),o=i.get(n)?.G??[];if(o.length>0)return o[o.length-1]}return o};return l((()=>{for(const n of u().$)if("r"==n.V){const{G:t=[],D:e}=i.get(n.F)??{};e?.();const o=r.indexOf(t[0]);o>0&&r.splice(o,t.length),t.forEach((t=>t.parentNode?.removeChild(t))),i.delete(n.F)}else if("a"==n.V){let o=[];const[,s]=f((()=>{const[s,i]=c(n.Z),[f,d]=c(e()[n.Z]);l((()=>{0<=s()&&s()<e().length&&d((()=>e()[s()]))})),l((()=>{const t=u().P.get(n.F);null!=t&&i(t)})),o=t.children?.(f,s,e).build()??[];const h=a(n.Z),_=r.indexOf(h);_>=0&&r.splice(_+1,0,...o),o.forEach((t=>h.parentNode?.insertBefore(t,h.nextSibling)))}));i.set(n.F,{G:o,D:s})}else if("m"==n.V){const{G:t=[]}=i.get(n.F)??{},e=r.indexOf(t[0]);e>=0&&r.splice(e,t.length);const o=a(n.q),s=r.indexOf(o);s>=0&&r.splice(s+1,0,...t),t.forEach((t=>o.parentNode?.insertBefore(t,o.nextSibling)))}}),[u]),r})),q=t=>(_().S=[],B({condition:t.condition,children:t.children})),B=t=>{const n=_(),e=n.S,o=u((()=>e.every((t=>!t()))&&d.get(t.condition)));return n.S=[...e,o],p({S:[]},(()=>O((()=>{const e=n.M((()=>document.createComment(""))),s=[e],r=u((()=>o()?I({children:t.children}):null));let c=[];return l((()=>{c.forEach((t=>t.parentNode?.removeChild(t))),s.length=1;const[,t]=f((()=>{c=r()?.build()??[],e.after(...c),s.push(...c)}));return t}),[r]),s}))))},F=({children:t})=>B({condition:!0,children:t}),G=({mount:t,children:n})=>O((()=>p({k:void 0},(()=>{const e=I({children:n}).build();return l((()=>(e.forEach((n=>t.appendChild(n))),()=>{e.forEach((t=>t.parentNode?.removeChild(t)))}))),[]})))),J=Symbol(),K=new Map,Q=t=>{const n=t.children;if("function"==typeof n){const e=z("style",{},D({text:n,marker:!1}));return t.light?G({mount:document.head,children:e}):e}if(n){const o=_(),s=t.light?document:o.H?.shadowRoot??document,r=((t,n,e)=>{if(!K.has(n)){const t=new CSSStyleSheet;t.replaceSync(n),K.set(n,{J:t,K:0})}const o=K.get(n);o.K++,t.has(n)||t.set(n,{J:o.J,K:0});const s=t.get(n);return s.K++,l((()=>()=>{--s.K||(t.delete(n),e()),--o.K||K.delete(n)})),s.J})((e=s,e[J]??=new Map),n,(()=>{s.adoptedStyleSheets=s.adoptedStyleSheets.filter((t=>t!=r))}));s.adoptedStyleSheets.push(r)}var e;return I({})},R=(t,...n)=>{const e=()=>t.reduce(((t,e,o)=>t+e+(d.get(n[o])??"")),"");return n.some((t=>"function"==typeof t))?e:e()},U=(t,n,e)=>(n&&null!=e&&(n.key=e),z(t,n));export{N as Component,F as Else,B as ElseIf,Z as For,I as Fragment,q as If,d as MaybeSignal,G as Portal,Q as Style,b as createContext,z as createElement,R as css,H as defineComponents,M as event,P as h,j as isComponent,U as jsx,U as jsxDEV,U as jsxs,S as prop,i as useBatch,x as useContext,E as useEffect,u as useMemo,a as useRef,c as useSignal};

package/dist/component.d.ts

@@ -0,0 +1,253 @@
+import { Cleanup, MaybeSignal, Signal } from "./scope.js";
+import type { DomEventProps, DomProps } from "./dom.js";
+import { JsxPropNameToEventName } from "./utils.js";
+import { useScope } from "./scope.js";
+import { Context } from "./context.js";
+import { Template } from "./template.js";
+interface Tagged<in out T> {
+    _tag: T;
+}
+type OmitNever<T> = Omit<T, {
+    [K in keyof T]: T[K] extends never ? K : never;
+}[keyof T]>;
+type PartialRequire<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
+/** @ignore */
+export interface PropMeta<T> extends PropOptions<T>, Tagged<"p"> {
+    _type?: [T];
+    _defaultOrContext: T;
+}
+export interface AttributeOptions<T> {
+    /**
+     * The name of the attribute to observe.
+     *
+     * Defaults to the kebab-case version of the prop.
+     */
+    name?: string;
+    /**
+     * A function to transform the attribute value to the prop value.
+     */
+    transform: (value: string) => T;
+    /**
+     * Set to `true` to not observe the attribute for changes.
+     *
+     * @default false
+     */
+    static?: boolean;
+}
+type PartialPartial<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export interface PropOptions<T> {
+    attribute?: ((value: string) => T) | (string extends T ? PartialPartial<AttributeOptions<T>, "transform"> : AttributeOptions<T>);
+}
+type Props<M> = OmitNever<{
+    readonly [K in keyof M]: M[K] extends PropMeta<infer T> ? Signal<T> : never;
+}>;
+export type EventConstructor<T = any, E = Event> = new (name: string, arg: T) => E;
+/** @ignore */
+export interface EventMeta<out E extends EventConstructor> extends Tagged<"e"> {
+    _event: E;
+}
+type Events<M> = OmitNever<Omit<{
+    readonly [K in keyof M]: K extends `on${string}` ? M[K] extends EventMeta<infer E> ? E : never : never;
+}, `on${Lowercase<keyof HTMLElementEventMap>}`>>;
+type GeneralJsxProps<T> = Partial<OmitNever<{
+    [K in keyof T]: K extends typeof jsxPropsSym | keyof DomProps<any> | `on${string}` | `${Uppercase<infer _>}${string}` | "accessKeyLabel" | "offsetHeight" | "offsetLeft" | "offsetParent" | "offsetTop" | "offsetWidth" | "attributes" | "classList" | "clientHeight" | "clientLeft" | "clientTop" | "clientWidth" | "localName" | "namespaceURI" | "ownerDocument" | "part" | "prefix" | "scrollHeight" | "scrollWidth" | "shadowRoot" | "tagName" | "baseURI" | "childNodes" | "firstChild" | "isConnected" | "lastChild" | "nextSibling" | "nodeName" | "nodeType" | "parentElement" | "parentNode" | "previousSibling" | "nextElementSibling" | "previousElementSibling" | "childElementCount" | "firstElementChild" | "lastElementChild" | "assignedSlot" | "attributeStyleMap" | "isContentEditable" | "dataset" ? never : T[K] extends Function ? never : MaybeSignal<T[K]>;
+}>> & DomProps<any> & DomEventProps<never> & Record<string, any>;
+export type JsxProps<T extends HTMLElement> = typeof jsxPropsSym extends keyof T ? NonNullable<T[typeof jsxPropsSym]> : any;
+type ComponentJsxProps<M> = Partial<OmitNever<{
+    [K in keyof Props<M>]: Props<M>[K] extends Signal<infer T> ? MaybeSignal<T> : never;
+}> & {
+    [K in keyof Events<M>]: (evt: InstanceType<Events<M>[K]>) => void;
+}> & GeneralJsxProps<HTMLElement>;
+type EventEmitters<M> = OmitNever<Omit<{
+    [K in keyof Events<M>]: Events<M>[K] extends EventConstructor<infer E> ? undefined extends E ? (arg?: E) => boolean : (arg: E) => boolean : never;
+}, `on${Lowercase<keyof HTMLElementEventMap>}`>>;
+/**
+ * Defines a property in your component metadata that can be set from outside
+ * of the component.
+ *
+ * Make sure to avoid conflicts with native `HTMLElement` properties.
+ *
+ * You can get properties by accessing the {@link Signal} in `this.props`.
+ * It's also possible to set the properties directly on the component instance.
+ *
+ * It's also possible to define an attribute for the property by setting the
+ * `attribute` option. By default, the attribute name is the kebab-case version
+ * of the property name. The attribute will be observed and the signal updated
+ * on changes. You can also provide a custom name and a transform function to
+ * convert the attribute value to the property value.
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   greetingMessage: prop<string>("Hello, world!", {
+ *     attribute: {
+ *       name: "greeting",
+ *     }
+ *   }),
+ * }) {
+ *   render() {
+ *     return <h1>{this.props.greetingMessage}</h1>;
+ *   }
+ * }
+ *
+ * defineComponents(App);
+ *
+ * const app = new App();
+ * app.greetingMessage = "Hello, universe!";
+ * ```
+ */
+export declare const prop: (<T>(context: Context<T>, opts?: PropOptions<T>) => PropMeta<T | undefined>) & (<T>(defaultValue: T, opts?: PropOptions<T>) => PropMeta<T>) & (<T>(defaultValue?: T, opts?: PropOptions<T | undefined>) => PropMeta<T | undefined>);
+type _CustomEventContructor<T> = undefined extends T ? typeof CustomEvent<T> : EventConstructor<PartialRequire<CustomEventInit<T>, "detail">, CustomEvent<T>>;
+/**
+ * Defines an event in your component metadata that can be dispatched by
+ * the component.
+ *
+ * Make sure your event name starts with `on` and to avoid conflicts with
+ * native `HTMLElement` events. The event name will be converted to kebab-case.
+ *
+ * You can dispatch events either using `HTMLElement.dispatchEvent` or by
+ * calling the event emitter function in `this.events` inside the `render`
+ * function of a component.
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   onSomethingHappen: event<string>(),
+ *   // Event name will be `something-happen`
+ * }) {
+ *   render() {
+ *     // …
+ *     this.events.onSomethingHappen({ detail: "Something happened! "});
+ *   }
+ * }
+ *
+ * const app = new App();
+ * app.addEventListener("something-happen", (evt) => {
+ *   // `evt` is `CustomEvent<string>`
+ *   console.log(evt.detail);
+ * });
+ * ```
+ *
+ * You can also provide a custom event constructor:
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   onSomethingClick: event(() => MouseEvent),
+ * }) {
+ *   render() {
+ *     return (
+ *       <button onclick={evt => this.events.onSomethingClick(evt)}>
+ *         Click me!
+ *       </button>
+ *     );
+ *   }
+ * }
+ * ```
+ */
+export declare const event: (() => EventMeta<_CustomEventContructor<undefined>>) & (<T>() => EventMeta<_CustomEventContructor<T>>) & (<E extends EventConstructor>(eventConstructor: E) => EventMeta<E>);
+export type Metadata = {
+    [K in keyof ComponentInner<any> | "props" | "events"]?: never;
+} & {
+    [K in keyof DomProps<any>]?: never;
+} & {
+    [K in keyof HTMLElement]?: never;
+} & {
+    [name: string]: PropMeta<any> | EventMeta<any>;
+};
+export declare const componentSym: unique symbol;
+export declare const jsxPropsSym: unique symbol;
+declare abstract class ComponentInner<M extends Metadata> {
+    protected props: Props<M>;
+    protected events: EventEmitters<M>;
+    readonly [jsxPropsSym]?: ComponentJsxProps<M>;
+    readonly [componentSym]: {
+        _scope?: ReturnType<typeof useScope>;
+        _destroy?: (() => void) | void;
+    };
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
+    addEventListener<K extends keyof Events<M> & string>(type: JsxPropNameToEventName<K>, listener: (event: InstanceType<Events<M>[K]>) => void, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof Events<M> & string>(type: JsxPropNameToEventName<K>, listener: (event: InstanceType<Events<M>[K]>) => void, options?: boolean | EventListenerOptions): void;
+    abstract render(): Template;
+}
+export type Component<M extends Metadata = {}> = {
+    -readonly [K in keyof Props<M>]: Props<M>[K] extends Signal<infer T> ? T : never;
+} & ComponentInner<M> & HTMLElement;
+export interface ComponentConstructor<M extends Metadata = {}> {
+    /** @ignore */
+    readonly [componentSym]: {
+        readonly _tagName: string;
+    };
+    readonly observedAttributes: readonly string[];
+    new (): Component<M>;
+}
+export interface ComponentOptions {
+    /**
+     * Shadow DOM options. Set to `false` to disable shadow DOM.
+     *
+     * @default { mode: "open" }
+     */
+    shadow?: ShadowRootInit | false;
+}
+/**
+ * Creates an effect which will rerun when any accessed signal changes.
+ *
+ * If used inside of a component and the component is not yet mounted, the
+ * effect will run only after the component is mounted. Otherwise, the effect
+ * will run immediately.
+ *
+ * @param fn The function to run; it may return a cleanup function.
+ */
+export declare const useMountEffect: (fn: () => Cleanup, deps?: Signal<unknown>[]) => void;
+/**
+ * Creates a new web component class.
+ *
+ * Specify props and events using the `metadata` parameter.
+ *
+ * @example
+ * ```tsx
+ * class MyComponent extends Component("my-component", {
+ *   myProp: prop<string>("Hello, world!"),
+ *   onMyEvent: event(),
+ * }) {
+ *   render() {
+ *     return (
+ *       <>
+ *         <h1>{this.props.myProp}</h1>
+ *         <button onclick={() => this.events.onMyEvent()}>Click me</button>
+ *       </>
+ *     );
+ *   },
+ * }
+ *
+ * customElements.define("my-component", MyComponent);
+ * ```
+ */
+export declare const Component: ((tagName: string) => ComponentConstructor<{}>) & (<const M extends Metadata>(tagName: string, metadata: M, opts?: ComponentOptions) => ComponentConstructor<M>);
+/**
+ * Determines whether the given value is a component created by
+ * extending {@link ComponentConstructor}.
+ */
+export declare const isComponent: (value: any) => value is ComponentConstructor<{}> | Component<{}>;
+/**
+ * Represents a functional component.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent: FunctionalComponent<{
+ *   name: MaybeSignal<string>;
+ * }> = ({ name }) => {
+ *   return <h1>Hello, {name}!</h1>;
+ * };
+ * ```
+ */
+export interface FunctionalComponent<in P extends object = {}> {
+    (props: P): Template;
+}
+/**
+ * Defines a set of components with the given prefix.
+ */
+export declare const defineComponents: ((...components: ComponentConstructor[]) => void) & ((prefix: string, ...components: ComponentConstructor[]) => void);
+export {};

package/dist/component.js

@@ -0,0 +1,256 @@
+import { useEffect, useSubscope, useSignal, } from "./scope.js";
+import { runWithRenderer } from "./renderer.js";
+import { camelCaseToKebabCase, jsxPropNameToEventName, } from "./utils.js";
+import { useScope } from "./scope.js";
+import { isContext, provideContext } from "./context.js";
+/**
+ * Defines a property in your component metadata that can be set from outside
+ * of the component.
+ *
+ * Make sure to avoid conflicts with native `HTMLElement` properties.
+ *
+ * You can get properties by accessing the {@link Signal} in `this.props`.
+ * It's also possible to set the properties directly on the component instance.
+ *
+ * It's also possible to define an attribute for the property by setting the
+ * `attribute` option. By default, the attribute name is the kebab-case version
+ * of the property name. The attribute will be observed and the signal updated
+ * on changes. You can also provide a custom name and a transform function to
+ * convert the attribute value to the property value.
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   greetingMessage: prop<string>("Hello, world!", {
+ *     attribute: {
+ *       name: "greeting",
+ *     }
+ *   }),
+ * }) {
+ *   render() {
+ *     return <h1>{this.props.greetingMessage}</h1>;
+ *   }
+ * }
+ *
+ * defineComponents(App);
+ *
+ * const app = new App();
+ * app.greetingMessage = "Hello, universe!";
+ * ```
+ */
+export const prop = (defaultOrContext, opts) => ({
+    _tag: "p",
+    _defaultOrContext: defaultOrContext,
+    ...opts,
+});
+/**
+ * Defines an event in your component metadata that can be dispatched by
+ * the component.
+ *
+ * Make sure your event name starts with `on` and to avoid conflicts with
+ * native `HTMLElement` events. The event name will be converted to kebab-case.
+ *
+ * You can dispatch events either using `HTMLElement.dispatchEvent` or by
+ * calling the event emitter function in `this.events` inside the `render`
+ * function of a component.
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   onSomethingHappen: event<string>(),
+ *   // Event name will be `something-happen`
+ * }) {
+ *   render() {
+ *     // …
+ *     this.events.onSomethingHappen({ detail: "Something happened! "});
+ *   }
+ * }
+ *
+ * const app = new App();
+ * app.addEventListener("something-happen", (evt) => {
+ *   // `evt` is `CustomEvent<string>`
+ *   console.log(evt.detail);
+ * });
+ * ```
+ *
+ * You can also provide a custom event constructor:
+ *
+ * @example
+ * ```tsx
+ * class App extends Component("x-app", {
+ *   onSomethingClick: event(() => MouseEvent),
+ * }) {
+ *   render() {
+ *     return (
+ *       <button onclick={evt => this.events.onSomethingClick(evt)}>
+ *         Click me!
+ *       </button>
+ *     );
+ *   }
+ * }
+ * ```
+ */
+export const event = ((eventConstructor = CustomEvent) => ({
+    _tag: "e",
+    _event: eventConstructor,
+}));
+export const componentSym = Symbol("Component");
+let mountEffects;
+/**
+ * Creates an effect which will rerun when any accessed signal changes.
+ *
+ * If used inside of a component and the component is not yet mounted, the
+ * effect will run only after the component is mounted. Otherwise, the effect
+ * will run immediately.
+ *
+ * @param fn The function to run; it may return a cleanup function.
+ */
+export const useMountEffect = (fn, deps) => {
+    if (mountEffects) {
+        mountEffects.push([fn, deps]);
+    }
+    else {
+        useEffect(fn, deps);
+    }
+};
+/**
+ * Creates a new web component class.
+ *
+ * Specify props and events using the `metadata` parameter.
+ *
+ * @example
+ * ```tsx
+ * class MyComponent extends Component("my-component", {
+ *   myProp: prop<string>("Hello, world!"),
+ *   onMyEvent: event(),
+ * }) {
+ *   render() {
+ *     return (
+ *       <>
+ *         <h1>{this.props.myProp}</h1>
+ *         <button onclick={() => this.events.onMyEvent()}>Click me</button>
+ *       </>
+ *     );
+ *   },
+ * }
+ *
+ * customElements.define("my-component", MyComponent);
+ * ```
+ */
+export const Component = ((tagName, metadata = {}, opts = {}) => {
+    // Extract attribute information
+    const observedAttributes = [];
+    const attributePropMap = new Map();
+    for (const name in metadata) {
+        const meta = metadata[name];
+        if (meta._tag == "p" && meta.attribute) {
+            if (typeof meta.attribute == "function") {
+                meta.attribute = { transform: meta.attribute };
+            }
+            const attribute = (meta.attribute = {
+                name: camelCaseToKebabCase(name),
+                static: false,
+                transform: (x) => x,
+                ...meta.attribute,
+            });
+            attributePropMap.set(attribute.name, {
+                name,
+                meta: meta,
+            });
+            if (!attribute.static) {
+                observedAttributes.push(attribute.name);
+            }
+        }
+    }
+    // Create base class
+    opts.shadow ??= { mode: "open" };
+    const getRenderParent = (component) => opts.shadow
+        ? component.shadowRoot ?? component.attachShadow(opts.shadow)
+        : component;
+    class _Component extends HTMLElement {
+        static [componentSym] = {
+            _tagName: tagName,
+        };
+        static observedAttributes = observedAttributes;
+        props = {};
+        events = {};
+        [componentSym] = {};
+        constructor() {
+            super();
+            for (const name in metadata) {
+                const meta = metadata[name];
+                if (meta._tag == "p") {
+                    const context = isContext(meta._defaultOrContext)
+                        ? meta._defaultOrContext
+                        : null;
+                    const [getter, setter] = useSignal(context ? undefined : meta._defaultOrContext);
+                    this.props[name] = getter;
+                    if (context) {
+                        provideContext(context, this, getter);
+                    }
+                    Object.defineProperty(this, name, {
+                        get: getter.peek,
+                        set: (value) => setter(() => value, { force: true }),
+                    });
+                }
+                else if (meta._tag == "e" && name.startsWith("on")) {
+                    const eventName = jsxPropNameToEventName(name);
+                    this.events[name] = (arg) => this.dispatchEvent(new meta._event(eventName, arg));
+                }
+            }
+        }
+        connectedCallback() {
+            const renderParent = getRenderParent(this);
+            this[componentSym]._destroy = useSubscope(() => runWithRenderer({
+                _svg: false,
+                _component: this,
+                _nodes: renderParent.childNodes.values(),
+            }, () => {
+                this[componentSym]._scope = useScope();
+                // Render
+                const prevMountEffects = mountEffects;
+                mountEffects = [];
+                try {
+                    renderParent?.append(...this.render().build());
+                    // Run mount effects
+                    mountEffects.forEach(([fn, opts]) => useEffect(fn, opts));
+                }
+                finally {
+                    mountEffects = prevMountEffects;
+                }
+            }))[1];
+        }
+        disconnectedCallback() {
+            this[componentSym]._destroy?.();
+        }
+        attributeChangedCallback(name, _, value) {
+            const prop = attributePropMap.get(name);
+            if (prop) {
+                this[prop.name] =
+                    value != null
+                        ? prop.meta.attribute.transform.call(this, value)
+                        : isContext(prop.meta._defaultOrContext)
+                            ? undefined
+                            : prop.meta._defaultOrContext;
+            }
+        }
+    }
+    return _Component;
+});
+/**
+ * Determines whether the given value is a component created by
+ * extending {@link ComponentConstructor}.
+ */
+export const isComponent = (value) => !!value?.[componentSym];
+/**
+ * Defines a set of components with the given prefix.
+ */
+export const defineComponents = (...args) => {
+    const [prefix, components] = typeof args[0] == "string"
+        ? [args[0], args.slice(1)]
+        : ["", args];
+    for (const component of components) {
+        customElements.define(prefix + component[componentSym]._tagName, component);
+    }
+};
+//# sourceMappingURL=component.js.map

package/dist/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"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"}

package/dist/context.d.ts

@@ -0,0 +1,21 @@
+import { Signal, SetSignalOptions, MaybeSignal } from "./scope.js";
+declare const contextSym: unique symbol;
+/**
+ * A value that can be passed through the component tree without having to be
+ * explicitly passed as a prop.
+ */
+export interface Context<in out T> {
+    readonly [contextSym]: string;
+    /** @ignore */
+    readonly _init: T;
+    /** @ignore */
+    readonly _opts?: SetSignalOptions;
+}
+/**
+ * Creates a new context with the given value.
+ */
+export declare const createContext: (<T>(value: T, opts?: SetSignalOptions) => Context<T>) & (<T>(value?: T, opts?: SetSignalOptions) => Context<T | undefined>);
+export declare const isContext: (value: any) => value is Context<unknown>;
+export declare const provideContext: <T>(context: Context<T>, element: Element, value: MaybeSignal<T | undefined>) => void;
+export declare const useContext: <T>(context: Context<T>) => Signal<T>;
+export {};

package/dist/context.js

@@ -0,0 +1,34 @@
+import { useRenderer } from "./renderer.js";
+import { useMemo, MaybeSignal } from "./scope.js";
+const contextSym = Symbol("Context");
+/**
+ * Creates a new context with the given value.
+ */
+export const createContext = ((value, opts) => ({
+    [contextSym]: Math.random().toString(36).slice(2),
+    _init: value,
+    _opts: opts,
+}));
+export const isContext = (value) => !!value?.[contextSym];
+export const provideContext = (context, element, value) => {
+    element.addEventListener(context[contextSym], (evt) => {
+        const innerValue = MaybeSignal.get(value);
+        if (innerValue !== undefined) {
+            evt.stopPropagation();
+            evt.detail(innerValue);
+        }
+    });
+};
+export const useContext = (context) => {
+    const renderer = useRenderer();
+    return useMemo(() => {
+        let result = context._init;
+        renderer._component?.dispatchEvent(new CustomEvent(context[contextSym], {
+            detail: (value) => (result = value),
+            bubbles: true,
+            composed: true,
+        }));
+        return result;
+    });
+};
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,OAAO,EAA4B,WAAW,EAAE,MAAM,YAAY,CAAC;AAE5E,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAgBrC;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAI8C,CAAC,CACvE,KAAS,EACT,IAAuB,EACC,EAAE,CAAC,CAAC;IAC5B,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IACjD,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,IAAI;CACZ,CAAC,CAAQ,CAAC;AAEX,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAU,EAA6B,EAAE,CACjE,CAAC,CAAC,KAAK,EAAE,CAAC,UAAU,CAAC,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,OAAmB,EACnB,OAAgB,EAChB,KAAiC,EACjC,EAAE;IACF,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE;QACpD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAE1C,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YAC7B,GAAG,CAAC,eAAe,EAAE,CAAC;YACrB,GAAuB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAI,OAAmB,EAAa,EAAE;IAC9D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC;QAE3B,QAAQ,CAAC,UAAU,EAAE,aAAa,CAChC,IAAI,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;YACnC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,MAAM,GAAG,KAAK,CAAC;YACnC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAoB,CACtB,CAAC;QAEF,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC"}

package/dist/create_element.d.ts

@@ -0,0 +1,43 @@
+import { FunctionalComponent, JsxProps } from "./component.js";
+import { DomIntrinsicElements, DomProps } from "./dom.js";
+import { Children } from "./intrinsic/Fragment.js";
+import { Template } from "./template.js";
+/**
+ * Creates a template based on the given component type.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return createElement("div", { id: "app" }, [
+ *     createElement("h1", {}, "Hello, World!"),
+ *   ]);
+ * }
+ * ```
+ */
+export declare const createElement: (<K extends keyof DomIntrinsicElements & string>(type: K, props?: DomIntrinsicElements[K], children?: Children) => Template) & (<T extends HTMLElement>(...args: [
+    type: new () => T,
+    ...({} extends JsxProps<T> ? [props?: JsxProps<T>] : [props: JsxProps<T>]),
+    children?: DomProps<T>["children"]
+]) => Template) & (<P extends object>(...args: [
+    type: FunctionalComponent<P>,
+    ...({} extends P ? [props?: P] : [props: P]),
+    ...(P extends {
+        children?: unknown;
+    } ? undefined extends P["children"] ? [children?: P["children"]] : [children: P["children"]] : [])
+]) => Template);
+/**
+ * Shorthand for {@link createElement} with convenience methods for intrinsic
+ * elements.
+ *
+ * @example
+ * ```tsx
+ * render() {
+ *   return h.div({ id: "app" }, [
+ *     h.h1({}, "Hello, World!"),
+ *   ]);
+ * }
+ * ```
+ */
+export declare const h: typeof createElement & {
+    [K in keyof DomIntrinsicElements]: (props?: DomIntrinsicElements[K], children?: Children) => Template;
+};