npm - grundlage - Versions diffs - 0.0.1 - Mend

grundlage 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README ADDED Viewed

@@ -0,0 +1,170 @@
+# Grundlage - a web component base rendering function
+## Overview
+The Template System provides a declarative way to handle dynamic content, conditional rendering, lists, and asynchronous operations using native HTML `<template>` elements. It uses slots for state management while maintaining compatibility with regular Web Component slots.
+## Core Concepts
+### Template Boundaries
+Each template creates its own boundary for state management and error handling. Content and errors are scoped to their immediate parent template, creating clean separation between different template blocks.
+### State Management Slots
+Templates use slots to manage different states (content, fallback, error, etc.). The default slot is used for the primary content, while other states are handled through named slots.
+## Basic Usage
+### Conditional Rendering
+```html
+<template when="${condition}">
+  <!-- Default slot (content) -->
+  <div>Main content shown when condition is true</div>
+  <!-- Fallback state -->
+  <template slot="fallback">
+    <div>Shown when condition is false</div>
+  </template>
+  <!-- Error state -->
+  <template slot="error">
+    <div>${error => error.message}</div>
+  </template>
+</template>
+```
+### Async Operations
+```html
+<template suspense="${fetchData}">
+  <!-- Default slot for success state -->
+  <div>${data => data.result}</div>
+  <!-- Loading state -->
+  <template slot="fallback" when="${() => status() === 'loading'}">
+    <div>Loading...</div>
+  </template>
+  <!-- Error state -->
+  <template slot="error">
+    <div>${error => error.message}</div>
+  </template>
+</template>
+```
+### List Rendering
+```html
+<template each="${items}">
+  <!-- Item template -->
+  <template slot="item" key="${item => item.id}">
+    <div>${item => item.name}</div>
+  </template>
+  <!-- Empty state -->
+  <template slot="empty">
+    <div>No items available</div>
+  </template>
+</template>
+```
+## Slot Rules
+1. The default (unnamed) slot is used for primary content
+2. Special state slots:
+   - `fallback`: Alternative content
+   - `error`: Error handling
+   - `empty`: Empty state for lists
+   - `item`: List item template
+3. Multiple elements can use the same slot:
+```html
+<template when="${condition}">
+  <!-- Both fallbacks exist, visibility controlled by conditions -->
+  <template slot="fallback" when="${loading}">
+    <div>Loading...</div>
+  </template>
+  <template slot="fallback" when="${timeout}">
+    <div>Timeout...</div>
+  </template>
+</template>
+```
+## Template Boundaries and Nesting
+### Scope Rules
+1. Everything can be slotted, only templates have render functionality
+2. Templates create strict boundaries
+3. Slots belong to their immediate parent template
+4. Errors are caught by the nearest parent template
+```html
+<template when="${outerCondition}">
+  <div>Outer content</div>
+  <!-- This template is self-contained -->
+  <template when="${innerCondition}">
+    <div>Inner content</div>
+    <!-- This fallback belongs to inner template -->
+    <template slot="fallback">
+      <div>Inner fallback</div>
+    </template>
+  </template>
+  <!-- This fallback belongs to outer template -->
+  <template slot="fallback">
+    <div>Outer fallback</div>
+  </template>
+</template>
+```
+### Component Integration
+Templates inside component slots are self-contained:
+```html
+<my-component>
+  <!-- This template manages its own states -->
+  <template when="${condition}" slot="footer">
+    <div>Footer content</div>
+    <!-- Fallback belongs to when template, not component -->
+    <template slot="fallback">
+      <div>Footer fallback</div>
+    </template>
+  </template>
+</my-component>
+```
+## Special Considerations
+1. State management attributes (`when`, `each`, `suspense`) can only be used on `<template>` elements
+2. Dynamic slot names are not supported
+3. Template order doesn't affect slot rendering, but content within slots is rendered in document order
+## Error Handling
+Errors are caught by the nearest parent template with an error slot:
+```html
+<template when="${condition}">
+  <template suspense="${fetchData}">
+    <div>${data => data.result}</div>
+    <!-- Fetch errors are caught here -->
+    <template slot="error">
+      <div>Fetch error: ${error => error.message}</div>
+    </template>
+  </template>
+  <!-- Other errors in the when template are caught here -->
+  <template slot="error">
+    <div>General error: ${error => error.message}</div>
+  </template>
+</template>
+```

package/dist/grundlage.d.ts ADDED Viewed

@@ -0,0 +1,192 @@
+declare module "mount/helper" {
+    export const isIterable: (value: unknown) => value is Array<unknown> | Set<unknown> | Map<unknown, unknown>;
+    export const remove: (start: Node, end: Node) => DocumentFragment;
+}
+declare module "mount/mount-list" {
+    import type { Context } from "context/index";
+    import { type TemplateBus } from "mount/mount";
+    export const mountList: (template: HTMLTemplateElement, templateBus: TemplateBus, context: Context) => void;
+}
+declare module "mount/update-content" {
+    import type { Context } from "context/index";
+    import { type TemplateBus } from "mount/mount";
+    export const updateContent: (stubbedElement: Element, templateBus: TemplateBus, context: Context) => void;
+}
+declare module "mount/update-style" {
+    import type { Context } from "context/index";
+    export const updateStyle: (styleElement: HTMLStyleElement, context: Context) => void;
+}
+declare module "mount/update-attributes" {
+    import type { Context } from "context/index";
+    import type { TemplateBus } from "mount/mount";
+    export const updateAttributes: (stubbedElement: HTMLElement, templateBus: TemplateBus, context: Context) => void;
+}
+declare module "mount/update-dom" {
+    import type { Context } from "context/index";
+    import { type TemplateBus } from "mount/mount";
+    export const updateDOM: (content: DocumentFragment, templateBus: TemplateBus, context: Context) => DocumentFragment;
+}
+declare module "mount/mount" {
+    import type { Context } from "context/index";
+    import { type InternalAsyncSignal, type SignalGetter, type ValueOf } from "context/signal";
+    export const defaultWhen: () => boolean;
+    export const noop: () => undefined;
+    export const defaultKeyFn: (element: unknown, index?: number, array?: Array<unknown>) => string;
+    export type MountData = {
+        keyFn: (element: unknown, index?: number, array?: Array<unknown>) => string;
+        when: (activeValue?: unknown) => unknown;
+        each: (activeValue?: unknown) => Array<unknown>;
+        suspense: ((activeValue?: unknown) => unknown) & InternalAsyncSignal;
+        ref: (rangeOrElement: Range | Element) => void;
+    };
+    export type TemplateSlots = {
+        content: DocumentFragment;
+        fallbacks: DocumentFragment;
+        errors: DocumentFragment;
+        empty: DocumentFragment;
+        loading: DocumentFragment;
+    };
+    const RENDER_CASE: {
+        readonly CONTENT: 0;
+        readonly FALLBACK: 1;
+        readonly EMPTY: 2;
+        readonly LOADING: 3;
+        readonly ERROR: 4;
+    };
+    export const extractTemplateSlots: (originalTemplate: HTMLTemplateElement) => Record<ValueOf<typeof RENDER_CASE>, DocumentFragment>;
+    export const extractTemplateFunctionality: (template: HTMLTemplateElement, { keyFn }: TemplateBus, { values }: Context) => MountData;
+    export type MountPoint = [Comment, Comment];
+    export const createMountPoint: (template: Element, name?: string) => MountPoint;
+    export type TemplateBus = {
+        activeValue: SignalGetter<unknown>;
+        keyFn: (element: unknown, index?: number, array?: Array<unknown>) => string;
+    };
+    export const shouldRerender: (slots: Record<ValueOf<typeof RENDER_CASE>, DocumentFragment>, data: MountData, { activeValue }: TemplateBus, context: Context) => {
+        status: SignalGetter<0 | 1 | 2 | 3 | 4>;
+        result: SignalGetter<undefined>;
+        staticResult: () => any;
+    };
+    export type ComponentLifecylce = {
+        beforeRender: (activeValue: unknown) => void;
+        afterRender: (activeValue: unknown) => void;
+    };
+    export const extractTemplateCallbacks: (templateElement: HTMLTemplateElement, context: Context) => ComponentLifecylce;
+    export const mount: (templateElement: HTMLTemplateElement, templateBus: TemplateBus, context: Context) => void;
+}
+declare module "context/signal" {
+    export const ASYNC_STATES: {
+        readonly IDLE: -1;
+        readonly ERROR: 0;
+        readonly LOADING: 1;
+        readonly SUCCESS: 2;
+    };
+    export type ValueOf<T> = T[keyof T];
+    export interface Effect {
+        execute: VoidFunction;
+        dependencies: Set<Set<Effect>>;
+        parent: Effect;
+        children: Set<Effect>;
+        cleanupEffects: Set<VoidFunction>;
+        dirty: boolean;
+    }
+    export type InternalAsyncSignal = {
+        error: SignalGetter<Error>;
+        status: SignalGetter<ValueOf<typeof ASYNC_STATES>>;
+        refetch: VoidFunction;
+    };
+    export type AsyncSignalGetter<Value> = SignalGetter<Value> & InternalAsyncSignal;
+    type AsyncSignal<Value> = [AsyncSignalGetter<Value>, SignalSetter<Value>];
+    export type SignalSetter<Value> = (newValue: Value | ((prevValue: Value) => Value)) => void;
+    export type SignalGetter<Value> = () => Value;
+    export type Signal<Value> = [SignalGetter<Value>, SignalSetter<Value>];
+    export type CreateSignalFn = <Value>(initialValue: Value) => Signal<Value>;
+    type ComputedFn = <Value>(fn: (isToplevel: boolean) => Value) => SignalGetter<Value>;
+    type CreateAsyncFn = <Value>(createPromise: () => Promise<Value>, trigger?: SignalGetter<unknown>) => AsyncSignal<Value>;
+    type RefFn = () => (...args: [] | [Node] | [Node, Node]) => Array<Node> | Node | undefined;
+    type FromSignalFn = <Value>(externalSignal: Signal<Value>) => Signal<Value>;
+    export type Reactivity = {
+        create: CreateSignalFn;
+        createAsync: CreateAsyncFn;
+        computed: ComputedFn;
+        ref: RefFn;
+        dispose: VoidFunction;
+        fromSignal: FromSignalFn;
+        context: Effect[];
+        onCleanup: (callback: VoidFunction) => void;
+    };
+    export const cleanup: (effect: Effect) => void;
+    export const createSignalReactivity: () => Reactivity;
+}
+declare module "context/slots" {
+    import type { Reactivity } from "context/signal";
+    export const getSlotContent: (root: Element | ShadowRoot, signal: Reactivity) => (name?: string) => (() => Node[]) | undefined;
+}
+declare module "context/index" {
+    import { type Reactivity, type SignalGetter } from "context/signal";
+    export type Context = {
+        signal: Reactivity;
+        mountCallbacks: Set<VoidFunction>;
+        unMountCallbacks: Set<VoidFunction>;
+        dispose: VoidFunction;
+        values: Map<string, unknown>;
+    };
+    export type UserContext = Pick<Context, "signal"> & {
+        lifecyle: {
+            onMount: (callback: VoidFunction) => void;
+            onUnmount: (callback: VoidFunction) => void;
+        };
+        elements: {
+            shadowRoot: () => ShadowRoot;
+            slots: (name?: string) => SignalGetter<Node[]>;
+        };
+    };
+    export const createUserContext: (shadowRoot: ShadowRoot, { mountCallbacks, unMountCallbacks, signal }: Context) => UserContext;
+    export const createContext: () => Context;
+}
+declare module "template/html" {
+    import { renderKey } from "template/helper";
+    export type ParsingResult = {
+        template: string;
+        values: Map<string, unknown>;
+        name: string;
+        key: typeof renderKey;
+    };
+    export const html: (tokens: TemplateStringsArray, ...dynamicValues: Array<unknown>) => ParsingResult;
+}
+declare module "template/helper" {
+    import type { CssParsingResult } from "template/css";
+    import type { ParsingResult } from "template/html";
+    export const renderKey: unique symbol;
+    export const isInsideOfTag: (template: string) => boolean;
+    export const isStatic: (value: unknown) => boolean;
+    export const isNestedRender: (nextValue: unknown) => nextValue is ParsingResult;
+    export const createStub: () => string;
+    export const mergeMaps: (from: Map<unknown, unknown>, to: Map<unknown, unknown>) => Map<unknown, unknown>;
+    export const cssKey: unique symbol;
+    export const createStyleStub: () => string;
+    export const isUsedAsClassIdentifier: (node: CssParsingResult) => boolean;
+    export const isNestedStyleRender: (nextValue: unknown) => nextValue is CssParsingResult;
+}
+declare module "template/css" {
+    import { cssKey } from "template/helper";
+    export type CssParsingResult = {
+        template: string;
+        values: Map<string, unknown>;
+        key: typeof cssKey;
+        name: string;
+    };
+    export const css: (tokens: TemplateStringsArray, ...dynamicValues: Array<unknown>) => CssParsingResult;
+}
+declare module "index" {
+    import { type UserContext } from "context/index";
+    import { type CssParsingResult } from "template/css";
+    import { type ParsingResult } from "template/html";
+    export type ComponentOptions = {};
+    export type Props = Record<string, unknown>;
+    export type RenderFn = (props: Props, context: UserContext) => ParsingResult;
+    export type ComponentProps<Props = Record<string, unknown>> = ((name: string, renderFn: RenderFn, options?: ComponentOptions) => (props?: Props) => ParsingResult) & {
+        html: (tokens: TemplateStringsArray, ...dynamicValues: Array<unknown>) => ParsingResult;
+        css: (tokens: TemplateStringsArray, ...dynamicValues: Array<unknown>) => CssParsingResult;
+    };
+    export const render: ComponentProps;
+}

package/dist/grundlage.js ADDED Viewed

@@ -0,0 +1,602 @@
+const st = (t) => !!t?.[Symbol.iterator], A = (t, e) => {
+  const n = new DocumentFragment();
+  let r = t.nextSibling;
+  for (; r && r !== e; ) {
+    const s = r.nextSibling;
+    n.append(r), r = s;
+  }
+  return n;
+}, b = {
+  ADD: 0,
+  DELETE: 1,
+  MOVE: 2
+}, ot = (t, e = I, n) => {
+  const r = [], s = t.map(e), o = new Set(s), a = Math.max(
+    s.length,
+    n.positions.length
+  );
+  let c = 0, i = 0;
+  for (let u = 0; u < a; u++) {
+    const d = s[c], l = n.positions[i];
+    if (d === l) {
+      c += 1, i += 1;
+      continue;
+    }
+    if (!d) {
+      r.push({
+        type: b.DELETE,
+        key: l,
+        relatedKey: "",
+        callback: S
+      }), i += 1;
+      continue;
+    }
+    if (!n.keys.has(d)) {
+      const p = t[c];
+      r.push({
+        type: b.ADD,
+        key: d,
+        relatedKey: s[c - 1] ?? "",
+        callback: () => p
+      }), c += 1;
+      continue;
+    }
+    if (!o.has(l)) {
+      r.push({
+        type: b.DELETE,
+        key: l,
+        relatedKey: "",
+        callback: S
+      }), i += 1;
+      continue;
+    }
+    const f = n.positions.indexOf(
+      d,
+      i
+    ), g = n.positions[i];
+    r.push({
+      type: b.MOVE,
+      key: d,
+      relatedKey: g,
+      callback: S
+    }), n.positions[i] = n.positions[f], n.positions[f] = g, c += 1, i += 1;
+  }
+  return n.keys = o, n.positions = s, r;
+}, ct = (t, e, n) => {
+  const { signal: r } = n, s = /* @__PURE__ */ new Map(), o = {
+    keys: /* @__PURE__ */ new Set(),
+    positions: []
+  }, a = Y(
+    t,
+    e,
+    n
+  ), c = W(t), [i] = _(t, "list"), { beforeRender: u, afterRender: d } = B(
+    t,
+    n
+  );
+  r.computed((l) => {
+    const f = e.activeValue(), g = st(f) ? Array.from(f) : [f], p = ot(
+      g,
+      e.keyFn,
+      o
+    );
+    l && u(f), p.forEach(({ type: m, key: h, relatedKey: O, callback: k }) => {
+      switch (m) {
+        case b.ADD:
+          const C = [
+            new Comment(`list-${h}-start`),
+            new Comment(`list-${h}-end`)
+          ];
+          s.set(h, C), (s.get(O)?.[1] ?? i).after(...C);
+          const w = { activeValue: k, keyFn: e.keyFn }, { status: x } = z(
+            c,
+            a,
+            w,
+            n
+          );
+          r.computed(() => {
+            const F = v(
+              c[x()].cloneNode(!0),
+              w,
+              n
+            );
+            requestAnimationFrame(() => {
+              A(...C), C[0].after(F);
+            });
+          });
+          break;
+        case b.DELETE:
+          const [L, nt] = s.get(h);
+          requestAnimationFrame(() => {
+            A(L.previousSibling, nt.nextSibling), s.delete(h);
+          });
+          break;
+        case b.MOVE:
+          const [$, V] = s.get(O), [D, j] = s.get(h);
+          requestAnimationFrame(() => {
+            const F = A($, V), rt = A(D, j);
+            $.after(rt), D.after(F);
+          }), s.set(O, [D, j]), s.set(h, [$, V]);
+          break;
+        default:
+          console.warn("operation not recognized");
+          break;
+      }
+    }), l && requestAnimationFrame(() => {
+      d(f);
+    });
+  });
+}, at = (t, e, n) => {
+  const { signal: r, values: s } = n, o = s.get(t.getAttribute("data-replace")), [a, c] = _(t, "content");
+  r.computed((i) => {
+    const u = o(e.activeValue()), d = document.createTextNode(u);
+    i ? requestAnimationFrame(() => {
+      A(a, c), a.after(d);
+    }) : (A(a, c), a.after(d));
+  });
+}, it = (t, e) => {
+  const { signal: n, values: r } = e;
+  t.getAttributeNames().forEach((s) => {
+    if (!r.has(s))
+      return;
+    t.removeAttribute(s);
+    const o = t.getRootNode().host, a = r.get(s);
+    n.computed(() => {
+      const c = a();
+      o.style.setProperty(`--${s}`, c), n.onCleanup(() => o.style.removeProperty(`--${s}`));
+    });
+  });
+}, lt = (t) => {
+  const e = [];
+  let n = t.indexOf("__");
+  for (; n !== -1; ) {
+    const r = t.indexOf("__", n + 2);
+    if (r === -1) break;
+    e.push(t.slice(n, r + 2)), n = t.indexOf("__", r + 2);
+  }
+  return e;
+}, ut = (t, e, n) => {
+  const { signal: r, values: s } = n;
+  t.removeAttribute("data-update"), t.getAttributeNames().forEach((o) => {
+    const a = t.getAttribute(o), c = s.get(a);
+    if (!(!o.startsWith("__") && !a.includes("__"))) {
+      if (o === "ref") {
+        t.removeAttribute(o), c(t);
+        return;
+      }
+      if (o.startsWith("on")) {
+        t.removeAttribute(o);
+        const i = o.slice(2);
+        t.addEventListener(i, c), r.onCleanup(
+          () => t.removeEventListener(
+            i,
+            c
+          )
+        );
+        return;
+      }
+      if (o === "class") {
+        lt(a).forEach((i) => {
+          const u = s.get(i);
+          let d = i;
+          r.computed(() => {
+            const l = u(e.activeValue());
+            t.classList.replace(d, l), d = l;
+          });
+        });
+        return;
+      }
+      if (t.tagName.includes("-")) {
+        t.hasOwnProperty("setProperty") ? t.setProperty(o, c) : t[o] = c;
+        return;
+      }
+      typeof c == "function" && (t.removeAttribute(o), r.computed(() => {
+        const i = c(e.activeValue());
+        t.setAttribute(
+          o || i,
+          o ? i : ""
+        );
+      }));
+    }
+  });
+}, dt = (t) => {
+  if (t instanceof HTMLTemplateElement)
+    return t;
+  const e = document.createElement("template");
+  return t.replaceWith(e), e.content.append(t), e;
+}, v = (t, e, n) => (t.querySelectorAll("[slot='item']").forEach((r) => {
+  r.removeAttribute("slot"), ct(dt(r), e, n);
+}), t.querySelectorAll("template").forEach((r) => {
+  ft(r, e, n);
+}), t.querySelectorAll("[data-update]").forEach((r) => {
+  ut(r, e, n);
+}), t.querySelectorAll("[data-replace]").forEach(
+  (r) => at(r, e, n)
+), t.querySelectorAll("style").forEach((r) => it(r, n)), t), T = (t, e) => {
+  const n = document.createDocumentFragment();
+  return t.content.querySelectorAll(`[slot=${e}]`).forEach((r) => {
+    n.append(r);
+  }), n;
+}, U = () => !0, S = () => {
+}, I = (t, e, n) => `key-${t.toString()}`, y = {
+  CONTENT: 0,
+  FALLBACK: 1,
+  EMPTY: 2,
+  LOADING: 3,
+  ERROR: 4
+}, W = (t) => {
+  const e = t.cloneNode(!0);
+  return {
+    [y.CONTENT]: e.content,
+    [y.FALLBACK]: T(e, "fallback"),
+    [y.EMPTY]: T(e, "empty"),
+    [y.LOADING]: T(e, "loading"),
+    [y.ERROR]: T(e, "error")
+  };
+}, Y = (t, { keyFn: e }, { values: n }) => ({
+  when: n.get(t.getAttribute("when")) ?? U,
+  each: n.get(t.getAttribute("each")) ?? S,
+  //@ts-expect-error
+  suspense: n.get(
+    t.getAttribute("suspense")
+  ) ?? S,
+  ref: n.get(t.getAttribute("ref")) ?? S,
+  keyFn: n.get(t.getAttribute("keys")) ?? e ?? I
+}), _ = (t, e = "template") => {
+  const n = new Comment(`${e}-start`), r = new Comment(`${e}-end`);
+  return t.replaceWith(n, r), [n, r];
+}, z = (t, e, { activeValue: n }, r) => {
+  const s = t[y.EMPTY].childNodes.length, o = t[y.ERROR].childNodes.length, a = t[y.LOADING].childNodes.length, [c, i] = r.signal.create(void 0);
+  let u;
+  return { status: r.signal.computed(() => {
+    try {
+      const l = n(), f = e.when(l), g = e.each?.(l), p = e.suspense?.status?.(), m = e.suspense?.error?.(), h = e.suspense?.(l);
+      return u = m ?? h ?? g ?? f, i(u), p === R.ERROR && o ? y.ERROR : p === R.LOADING && a ? y.LOADING : g?.length === 0 && s ? y.EMPTY : !f || p && p !== R.SUCCESS ? y.FALLBACK : y.CONTENT;
+    } catch {
+      return y.ERROR;
+    }
+  }), result: c, staticResult: () => u };
+}, B = (t, e) => {
+  const n = {
+    beforeRender: S,
+    afterRender: S
+  };
+  return t.getAttributeNames().forEach((r) => {
+    switch (r.toLowerCase()) {
+      case "beforerender":
+        n.beforeRender = e.values.get(
+          t.getAttribute(r)
+        );
+        break;
+      case "afterrender":
+        n.afterRender = e.values.get(
+          t.getAttribute(r)
+        );
+        break;
+    }
+  }), n;
+}, ft = (t, e, n) => {
+  const { signal: r } = n, s = Y(
+    t,
+    e,
+    n
+  ), o = W(t), [a, c] = _(t), { beforeRender: i, afterRender: u } = B(
+    t,
+    n
+  ), { result: d, status: l, staticResult: f } = z(
+    o,
+    s,
+    e,
+    n
+  );
+  r.computed((g) => {
+    const p = f(), m = v(
+      o[l()].cloneNode(!0),
+      { activeValue: d, keyFn: s.keyFn },
+      n
+    );
+    g ? (i(p), requestAnimationFrame(() => {
+      A(a, c), a.after(m), u(p);
+    })) : (A(a, c), a.after(m));
+  });
+}, R = {
+  IDLE: -1,
+  ERROR: 0,
+  LOADING: 1,
+  SUCCESS: 2
+}, H = (t) => {
+  for (const e of t.dependencies)
+    e.delete(t);
+  t.children.forEach(H), t.cleanupEffects.forEach((e) => e()), t.dependencies.clear(), t.children.clear(), t.cleanupEffects.clear(), t.parent = void 0;
+}, pt = (t) => {
+  let e = t;
+  for (; e; ) {
+    if (e.dirty) return !0;
+    e = e.parent;
+  }
+  return !1;
+}, ht = () => {
+  const t = [], e = (c) => {
+    const i = /* @__PURE__ */ new Set();
+    let u = c;
+    return [() => {
+      const f = t.at(-1);
+      return f && (i.add(f), f.dependencies.add(i)), u;
+    }, (f) => {
+      const g = typeof f == "function" ? f(u) : f;
+      g !== u && (u = g, [...i].forEach((p) => {
+        p.dependencies.size > 0 ? (p.dirty = !0, p.execute()) : i.delete(p);
+      }));
+    }];
+  }, n = ([
+    c,
+    i
+  ]) => {
+    const u = /* @__PURE__ */ new Set();
+    return [() => {
+      const l = t.at(-1);
+      return l && (u.add(l), l.dependencies.add(u)), c();
+    }, i];
+  }, r = (c) => {
+    t.at(-1)?.cleanupEffects.add(c);
+  }, s = (c) => {
+    const [i, u] = e(void 0), d = t.at(-1), l = {
+      execute() {
+        H(l), t.push(l), u(c(pt(l))), t.pop(), l.dirty = !1, !(!l.parent || l.dependencies.size > 0) && (l.children.forEach((f) => {
+          d.children.add(f), f.parent = d, d.cleanupEffects = d.cleanupEffects.union(
+            l.cleanupEffects
+          );
+        }), l.children.clear(), l.parent = void 0);
+      },
+      dependencies: /* @__PURE__ */ new Set(),
+      parent: d,
+      children: /* @__PURE__ */ new Set(),
+      cleanupEffects: /* @__PURE__ */ new Set(),
+      dirty: !1
+    };
+    return d && d.children.add(l), l.execute(), i;
+  };
+  return {
+    create: e,
+    createAsync: (c, i = U) => {
+      const [u, d] = e(void 0), [l, f] = e(void 0), [g, p] = e(
+        R.IDLE
+      );
+      let m = c, h = null;
+      const O = () => {
+        (!h || h.signal.aborted) && (h = new AbortController());
+      }, k = async (E) => {
+        O();
+        let w = !1;
+        const x = () => {
+          console.log("aborted"), w = !0;
+        };
+        h.signal.addEventListener("abort", x, { once: !0 });
+        try {
+          p(R.LOADING);
+          const L = await E(i());
+          w || (d(L), p(R.SUCCESS));
+        } catch (L) {
+          w || (p(R.ERROR), f(L));
+        } finally {
+          h.signal.removeEventListener("abort", x);
+        }
+      };
+      s(() => {
+        i() && (h?.abort("triggered"), k(m));
+      });
+      const C = (E) => {
+        typeof E == "function" ? (m = Promise.try(E), k(m)) : d(E);
+      };
+      return u.error = l, u.status = g, u.refetch = () => {
+        h?.abort("refetch"), k(m);
+      }, [u, C];
+    },
+    computed: s,
+    onCleanup: r,
+    context: t,
+    ref: () => {
+      const c = [];
+      return (...u) => {
+        if (u.length === 2) {
+          c.length = 0;
+          const [d, l] = u;
+          let f = d.nextSibling;
+          for (; f && f !== l; ) {
+            const g = f.nextSibling;
+            c.push(f), f = g;
+          }
+          return c;
+        }
+        return u.length === 1 ? (c.length = 0, c.push(u.at(0)), c.at(0)) : c.length > 1 ? c : c.at(0);
+      };
+    },
+    fromSignal: n,
+    dispose() {
+      t.length = 0;
+    }
+  };
+}, gt = (t, e) => {
+  const n = /* @__PURE__ */ new WeakMap(), r = (s) => {
+    let o = !1, a = !0;
+    const [c, i] = e.create(s.assignedNodes()), u = () => {
+      if (!o) {
+        if (a) {
+          a = !1;
+          return;
+        }
+        o = !0, i(s.assignedNodes()), requestAnimationFrame(() => {
+          o = !1;
+        });
+      }
+    };
+    return s.addEventListener("slotchange", u), e.onCleanup(() => {
+      s.removeEventListener("slotchange", u);
+    }), c;
+  };
+  return (s = "") => {
+    const o = s ? `slot[name='${s}']` : "slot:not([name])", a = t.querySelector(o);
+    if (!a)
+      return console.error("no slot with that name exists, returning empty signal"), () => [];
+    if (n.has(a))
+      return n.get(a);
+    const c = r(a);
+    return n.set(a, c), c;
+  };
+}, yt = (t, { mountCallbacks: e, unMountCallbacks: n, signal: r }) => ({
+  signal: r,
+  lifecyle: {
+    onMount: (s) => {
+      e.add(s);
+    },
+    onUnmount: (s) => {
+      n.add(s);
+    }
+  },
+  elements: {
+    shadowRoot: () => t,
+    slots: gt(t, r)
+  }
+}), mt = () => {
+  const t = ht(), e = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+  return {
+    signal: t,
+    mountCallbacks: e,
+    unMountCallbacks: n,
+    values: /* @__PURE__ */ new Map(),
+    dispose() {
+      t.dispose(), e.clear(), n.clear();
+    }
+  };
+}, J = Symbol("render"), At = (t) => {
+  const e = t.lastIndexOf("<"), n = t.lastIndexOf(">"), r = n === -1;
+  return e === -1 ? !1 : r || n < e;
+}, St = ["string", "number", "bigint", "boolean", "symbol"], q = (t) => St.includes(typeof t), Et = (t) => typeof t == "object" && t?.key === J, Q = () => `__${(Math.random() * 1e5).toFixed()}__`, M = (t, e) => (t.forEach((n, r) => e.set(r, n)), e), X = Symbol("css"), Z = () => `css-${(Math.random() * 1e5).toFixed()}`, bt = (t) => t.template.at(-1) === ".", K = (t) => typeof t == "object" && t?.key === X, N = (t, e) => {
+  if (q(t))
+    return t.toString();
+  if (Array.isArray(t) || t instanceof Set)
+    return Array.from(t).map((n) => N(n, e)).join(" ");
+  if (K(t))
+    return M(t.values, e.values), bt(e) ? (e.values.set(t.name, t.template), t.name) : t.template;
+  if (typeof t == "function") {
+    const n = Z();
+    return e.values.set(n, t), `var(--${n}, ${t()})`;
+  }
+  return typeof t == "function" ? N(t(), e) : t ? t.toString() : "";
+}, Rt = (t, ...e) => {
+  const n = {
+    template: t[0],
+    values: /* @__PURE__ */ new Map(),
+    key: X,
+    name: Z()
+  };
+  return t.slice(1).forEach((r, s) => {
+    const o = e[s];
+    n.template += `${N(o, n)}${r}`;
+  }), n;
+}, Ct = (t) => {
+  const e = t.template, n = e.lastIndexOf("<");
+  if (e.indexOf(" data-update ", n) !== -1)
+    return;
+  const r = e.indexOf(" ", n), s = e.slice(0, r), o = e.slice(r + 1);
+  t.template = `${s} data-update ${o}`;
+}, P = (t, e) => {
+  if (q(t))
+    return t;
+  if (K(t))
+    return M(t.values, e.values), e.values.set(t.name, t.template), t.name;
+  if (Array.isArray(t) || t instanceof Set)
+    return Array.from(t).map((r) => P(r, e)).join(" ");
+  if (t && typeof t == "object")
+    return (t instanceof Map ? Array.from(t) : Object.entries(t)).map(
+      ([s, o]) => `${s}=${P(o, e)} `
+    ).join(" ");
+  Ct(e);
+  const n = Q();
+  return e.values.set(n, t), n;
+}, wt = (t, e) => {
+  if (q(t))
+    return t;
+  if (Et(t))
+    return M(t.values, e.values), t.template;
+  if (K(t))
+    return M(t.values, e.values), e.values.set(t.name, t.template), `<style ${Array.from(t.values.keys()).join(" ")}>${t.template}</style>`;
+  const n = Q();
+  return e.values.set(n, t), `<span data-replace=${n}></span>`;
+}, tt = (t, ...e) => {
+  const n = {
+    template: t[0],
+    values: /* @__PURE__ */ new Map(),
+    key: J,
+    name: ""
+  };
+  return t.slice(1).forEach((r, s) => {
+    const o = e[s], a = At(n.template) ? P(o, n) : wt(o, n);
+    n.template += `${a}${r}`;
+  }), n;
+}, G = (t) => {
+  try {
+    t();
+  } catch (e) {
+    console.warn(e);
+  }
+}, et = (t, e, n = {}) => {
+  class r extends HTMLElement {
+    #t = /* @__PURE__ */ new Map();
+    #e = mt();
+    #n;
+    #r;
+    constructor() {
+      super(), this.attachShadow({ mode: "open", serializable: !0 }), Array.from(this.attributes).forEach((o) => {
+        this.#t.set(o.name, o.value);
+      });
+    }
+    connectedCallback() {
+      this.#s(), this.#e.mountCallbacks.forEach(G), this.#c();
+    }
+    async disconnectedCallback() {
+      await Promise.resolve(), this.isConnected || (this.#n?.disconnect(), this.#e.unMountCallbacks.forEach(G), this.#t.clear(), this.#e.dispose());
+    }
+    setProperty(o, a) {
+      o === "style" || this.#t.get(o) === a || (a == null ? this.#t.delete(o) : this.#t.set(o, a), this.#o());
+    }
+    #o() {
+      this.#r && cancelAnimationFrame(this.#r), this.#r = requestAnimationFrame(() => {
+        this.#s(), this.#r = null;
+      });
+    }
+    #c() {
+      this.#n?.disconnect(), this.#n = new MutationObserver((o) => {
+        o.forEach((a) => {
+          this.setProperty(
+            a.attributeName,
+            this.getAttribute(a.attributeName)
+          );
+        });
+      }), this.#n.observe(this, { attributes: !0 });
+    }
+    #s() {
+      const { template: o, values: a } = e(
+        Object.fromEntries(this.#t),
+        yt(this.shadowRoot, this.#e)
+      ), c = new Range().createContextualFragment(o);
+      this.#e.values = a;
+      const i = v(
+        c,
+        {
+          activeValue: () => {
+          },
+          keyFn: I
+        },
+        this.#e
+      );
+      this.shadowRoot.replaceChildren(i);
+    }
+  }
+  return customElements?.get(t) || customElements.define(t, r), (s = {}) => tt`<${t} ${{ ...s }}></${t}>`;
+};
+et.html = tt;
+et.css = Rt;
+export {
+  et as render
+};

package/dist/grundlage.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "grundlage",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "a web component base render function",
+  "keywords": [
+    "web-components"
+  ],
+  "type": "module",
+  "types": "dist/grundlage.d.ts",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/grundlage.umd.cjs",
+  "module": "./dist/grundlage.js",
+  "exports": {
+    ".": {
+      "import": "./dist/grundlage.js",
+      "require": "./dist/grundlage.umd.cjs"
+    }
+  },
+  "scripts": {
+    "build": "vite build && tsc --noCheck"
+  }
+}