@e280/sly 0.2.5 → 0.3.0-10

package/x/view/hooks/use-name.js

@@ -0,0 +1,8 @@
+import { useHost } from "./use-cx.js";
+import { useOnce } from "./use-once.js";
+/** sets the host element's "data-view" attribute */
+export function useName(name = "") {
+    const host = useHost();
+    useOnce(() => host.setAttribute("view", name));
+}
+//# sourceMappingURL=use-name.js.map

package/x/view/hooks/use-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-name.js","sourceRoot":"","sources":["../../../s/view/hooks/use-name.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,aAAa,CAAA;AACnC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,oDAAoD;AACpD,MAAM,UAAU,OAAO,CAAC,IAAI,GAAG,EAAE;IAChC,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAA;AAC/C,CAAC"}

package/x/view/hooks/use-once.d.ts

@@ -0,0 +1,2 @@
+/** run the fn only one time */
+export declare function useOnce<Value>(fn: () => Value): Value;

package/x/view/hooks/use-once.js

@@ -0,0 +1,7 @@
+import { hooks } from "./plumbing/hooks.js";
+/** run the fn only one time */
+export function useOnce(fn) {
+    const { scope, position } = hooks.increment();
+    return scope.values.guarantee(position, fn);
+}
+//# sourceMappingURL=use-once.js.map

package/x/view/hooks/use-once.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-once.js","sourceRoot":"","sources":["../../../s/view/hooks/use-once.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAA;AAEzC,+BAA+B;AAC/B,MAAM,UAAU,OAAO,CAAQ,EAAe;IAC7C,MAAM,EAAC,KAAK,EAAE,QAAQ,EAAC,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,CAAU,CAAA;AACrD,CAAC"}

package/x/view/hooks/use-op.d.ts

@@ -0,0 +1,3 @@
+import { Op } from "../../op/op.js";
+export declare function useOp<Value>(fn: () => Promise<Value>): Op<Value>;
+export declare function useOpPromise<Value>(promise: Promise<Value>): Op<Value>;

package/x/view/hooks/use-op.js

@@ -0,0 +1,9 @@
+import { Op } from "../../op/op.js";
+import { useOnce } from "./use-once.js";
+export function useOp(fn) {
+    return useOnce(() => Op.load(fn));
+}
+export function useOpPromise(promise) {
+    return useOnce(() => Op.promise(promise));
+}
+//# sourceMappingURL=use-op.js.map

package/x/view/hooks/use-op.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-op.js","sourceRoot":"","sources":["../../../s/view/hooks/use-op.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,EAAE,EAAC,MAAM,gBAAgB,CAAA;AACjC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,MAAM,UAAU,KAAK,CAAQ,EAAwB;IACpD,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;AAClC,CAAC;AAED,MAAM,UAAU,YAAY,CAAQ,OAAuB;IAC1D,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAA;AAC1C,CAAC"}

package/x/view/hooks/use-ref.d.ts

@@ -0,0 +1,5 @@
+export declare function useRef<Value>(initial: Value): Ref<Value>;
+export declare class Ref<Value> {
+    current: Value;
+    constructor(current: Value);
+}

package/x/view/hooks/use-ref.js

@@ -0,0 +1,11 @@
+import { useOnce } from "./use-once.js";
+export function useRef(initial) {
+    return useOnce(() => new Ref(initial));
+}
+export class Ref {
+    current;
+    constructor(current) {
+        this.current = current;
+    }
+}
+//# sourceMappingURL=use-ref.js.map

package/x/view/hooks/use-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ref.js","sourceRoot":"","sources":["../../../s/view/hooks/use-ref.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,MAAM,UAAU,MAAM,CAAQ,OAAc;IAC3C,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC,CAAA;AACvC,CAAC;AAED,MAAM,OAAO,GAAG;IACI;IAAnB,YAAmB,OAAc;QAAd,YAAO,GAAP,OAAO,CAAO;IAAG,CAAC;CACrC"}

package/x/view/hooks/use-signal.d.ts

@@ -0,0 +1,3 @@
+export declare function useSignal<Value>(value: Value): import("@e280/strata").Signal<Value>;
+export declare function useDerived<Value>(fn: () => Value): import("@e280/strata").Derived<Value>;
+export declare function useLazy<Value>(fn: () => Value): import("@e280/strata").Lazy<Value>;

package/x/view/hooks/use-signal.js

@@ -0,0 +1,12 @@
+import { signal } from "@e280/strata";
+import { useOnce } from "./use-once.js";
+export function useSignal(value) {
+    return useOnce(() => signal(value));
+}
+export function useDerived(fn) {
+    return useOnce(() => signal.derived(fn));
+}
+export function useLazy(fn) {
+    return useOnce(() => signal.lazy(fn));
+}
+//# sourceMappingURL=use-signal.js.map

package/x/view/hooks/use-signal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-signal.js","sourceRoot":"","sources":["../../../s/view/hooks/use-signal.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,MAAM,UAAU,SAAS,CAAQ,KAAY;IAC5C,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAA;AACpC,CAAC;AAED,MAAM,UAAU,UAAU,CAAQ,EAAe;IAChD,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAA;AACzC,CAAC;AAED,MAAM,UAAU,OAAO,CAAQ,EAAe;IAC7C,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;AACtC,CAAC"}

package/x/view/hooks/use-state.d.ts

@@ -0,0 +1 @@
+export declare function useState<Value>(value: Value): readonly [Value, (next: Value | ((prev: Value) => Value)) => void];

package/x/view/hooks/use-state.js

@@ -0,0 +1,17 @@
+import { useRef } from "./use-ref.js";
+import { useRender } from "./use-cx.js";
+export function useState(value) {
+    const render = useRender();
+    const ref = useRef(value);
+    const set = (next) => {
+        const value = typeof next === "function"
+            ? next(ref.current)
+            : next;
+        if (Object.is(value, ref.current))
+            return;
+        ref.current = value;
+        render();
+    };
+    return [ref.current, set];
+}
+//# sourceMappingURL=use-state.js.map

package/x/view/hooks/use-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-state.js","sourceRoot":"","sources":["../../../s/view/hooks/use-state.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,UAAU,QAAQ,CAAQ,KAAY;IAC3C,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAEzB,MAAM,GAAG,GAAG,CAAC,IAAsC,EAAE,EAAE;QACtD,MAAM,KAAK,GAAG,OAAO,IAAI,KAAK,UAAU;YACvC,CAAC,CAAE,IAA+B,CAAC,GAAG,CAAC,OAAO,CAAC;YAC/C,CAAC,CAAC,IAAI,CAAA;QACP,IAAI,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,OAAO,CAAC;YAAE,OAAM;QACzC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAA;QACnB,MAAM,EAAE,CAAA;IACT,CAAC,CAAA;IAED,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAU,CAAA;AACnC,CAAC"}

package/x/view/hooks/use-wake.d.ts

@@ -0,0 +1,2 @@
+/** run the fn whenever the view is mounted */
+export declare function useWake<Value>(fn: () => Value): Value;

package/x/view/hooks/use-wake.js

@@ -0,0 +1,6 @@
+import { useLife } from "./use-life.js";
+/** run the fn whenever the view is mounted */
+export function useWake(fn) {
+    return useLife(() => [fn(), () => { }]);
+}
+//# sourceMappingURL=use-wake.js.map

package/x/view/hooks/use-wake.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-wake.js","sourceRoot":"","sources":["../../../s/view/hooks/use-wake.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAC;AAEtC,8CAA8C;AAC9C,MAAM,UAAU,OAAO,CAAQ,EAAe;IAC7C,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC,CAAA;AACvC,CAAC"}

package/x/view/index.d.ts

@@ -1,5 +1,20 @@
-export * from "./utils/parts/chain.js";
-export * from "./utils/parts/sly-view.js";
-export * from "./utils/contextualize.js";
+export * from "./common/css-reset.js";
+export * from "./common/sly-shadow.js";
+export * from "./elements/light.js";
+export * from "./elements/shadow.js";
+export * from "./hooks/use-attrs.js";
+export * from "./hooks/use-css.js";
+export * from "./hooks/use-cx.js";
+export * from "./hooks/use-life.js";
+export * from "./hooks/use-mount.js";
+export * from "./hooks/use-name.js";
+export * from "./hooks/use-once.js";
+export * from "./hooks/use-op.js";
+export * from "./hooks/use-ref.js";
+export * from "./hooks/use-signal.js";
+export * from "./hooks/use-state.js";
+export * from "./hooks/use-cx.js";
+export * from "./hooks/use-wake.js";
+export * from "./light.js";
+export * from "./shadow.js";
 export * from "./types.js";
-export * from "./view.js";

package/x/view/index.js

@@ -1,6 +1,21 @@
-export * from "./utils/parts/chain.js";
-export * from "./utils/parts/sly-view.js";
-export * from "./utils/contextualize.js";
+export * from "./common/css-reset.js";
+export * from "./common/sly-shadow.js";
+export * from "./elements/light.js";
+export * from "./elements/shadow.js";
+export * from "./hooks/use-attrs.js";
+export * from "./hooks/use-css.js";
+export * from "./hooks/use-cx.js";
+export * from "./hooks/use-life.js";
+export * from "./hooks/use-mount.js";
+export * from "./hooks/use-name.js";
+export * from "./hooks/use-once.js";
+export * from "./hooks/use-op.js";
+export * from "./hooks/use-ref.js";
+export * from "./hooks/use-signal.js";
+export * from "./hooks/use-state.js";
+export * from "./hooks/use-cx.js";
+export * from "./hooks/use-wake.js";
+export * from "./light.js";
+export * from "./shadow.js";
 export * from "./types.js";
-export * from "./view.js";
 //# sourceMappingURL=index.js.map

package/x/view/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/view/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAA;AACtC,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/view/index.ts"],"names":[],"mappings":"AACA,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AAEtC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AAEpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AAEnC,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA"}

package/x/view/light.d.ts

@@ -0,0 +1,2 @@
+import { View } from "./types.js";
+export declare function light<Props extends any[]>(view: View<Props>): View<Props>;

package/x/view/light.js

@@ -0,0 +1,41 @@
+import { microbounce } from "@e280/stz";
+import { LightCx } from "./parts/cx.js";
+import { hooks } from "./hooks/plumbing/hooks.js";
+import { Reactivity } from "./parts/reactivity.js";
+import { Hookscope } from "./hooks/plumbing/hookscope.js";
+import { AsyncDirective, directive } from "lit/async-directive.js";
+export function light(view) {
+    return directive(class D extends AsyncDirective {
+        #props;
+        #cx = new LightCx(microbounce(() => {
+            if (!this.#props)
+                throw new Error("cannot render before props");
+            if (this.isConnected) {
+                const content = this.render(...this.#props);
+                this.setValue(content);
+                this.#cx.doneRender();
+            }
+        }));
+        #hookscope = new Hookscope(this.#cx);
+        #reactivity = new Reactivity();
+        update(part, props) {
+            const ret = super.update(part, props);
+            if (this.isConnected)
+                this.#cx.doneRender();
+            return ret;
+        }
+        render(...props) {
+            this.#props = props;
+            return this.#reactivity.observe(() => hooks.wrap(this.#hookscope, () => view(...this.#props)), this.#cx.render);
+        }
+        disconnected() {
+            this.#hookscope.mounts.unmountAll();
+            this.#reactivity.clear();
+        }
+        reconnected() {
+            this.#hookscope.mounts.remountAll();
+            this.#cx.render();
+        }
+    });
+}
+//# sourceMappingURL=light.js.map

package/x/view/light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"light.js","sourceRoot":"","sources":["../../s/view/light.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAGrC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,EAAC,KAAK,EAAC,MAAM,2BAA2B,CAAA;AAC/C,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAC,SAAS,EAAC,MAAM,+BAA+B,CAAA;AACvD,OAAO,EAAC,cAAc,EAAE,SAAS,EAAO,MAAM,wBAAwB,CAAA;AAEtE,MAAM,UAAU,KAAK,CAAsB,IAAiB;IAC3D,OAAO,SAAS,CAAC,MAAM,CAAE,SAAQ,cAAc;QAC9C,MAAM,CAAQ;QACd,GAAG,GAAG,IAAI,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,MAAM;gBAAE,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAA;YAC/D,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACtB,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAA;gBAC3C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;gBACtB,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;YACtB,CAAC;QACF,CAAC,CAAC,CAAC,CAAA;QACH,UAAU,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpC,WAAW,GAAG,IAAI,UAAU,EAAE,CAAA;QAE9B,MAAM,CAAC,IAAU,EAAE,KAAY;YAC9B,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACrC,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAA;YAC3C,OAAO,GAAG,CAAA;QACX,CAAC;QAED,MAAM,CAAC,GAAG,KAAY;YACrB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;YACnB,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAC9B,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,EAC7D,IAAI,CAAC,GAAG,CAAC,MAAM,CACf,CAAA;QACF,CAAC;QAED,YAAY;YACX,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE,CAAA;YACnC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAA;QACzB,CAAC;QAED,WAAW;YACV,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,EAAE,CAAA;YACnC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAA;QAClB,CAAC;KACD,CAAgB,CAAA;AAClB,CAAC"}

package/x/view/parts/apply-attrs.d.ts

@@ -0,0 +1,2 @@
+import { ViewAttrs } from "../types.js";
+export declare function applyAttrs(element: HTMLElement, attrs: ViewAttrs): void;

package/x/view/parts/apply-attrs.js

@@ -0,0 +1,22 @@
+export function applyAttrs(element, attrs) {
+    for (const [name, value] of Object.entries(attrs))
+        applyAttr(element, name, value);
+}
+function applyAttr(element, name, value) {
+    const existing = element.getAttribute(name);
+    const v = coerce(value);
+    if (v === existing)
+        return;
+    if (v === null)
+        element.removeAttribute(name);
+    else
+        element.setAttribute(name, v);
+}
+function coerce(value) {
+    if (typeof value === "string")
+        return value;
+    else if (typeof value === "number")
+        return value.toString();
+    return value ? "" : null;
+}
+//# sourceMappingURL=apply-attrs.js.map

package/x/view/parts/apply-attrs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apply-attrs.js","sourceRoot":"","sources":["../../../s/view/parts/apply-attrs.ts"],"names":[],"mappings":"AAGA,MAAM,UAAU,UAAU,CAAC,OAAoB,EAAE,KAAgB;IAChE,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;QAChD,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAA;AACjC,CAAC;AAED,SAAS,SAAS,CAAC,OAAoB,EAAE,IAAY,EAAE,KAAe;IACrE,MAAM,QAAQ,GAAG,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;IAC3C,MAAM,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACvB,IAAI,CAAC,KAAK,QAAQ;QAAE,OAAM;IAC1B,IAAI,CAAC,KAAK,IAAI;QAAE,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;;QACxC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;AACnC,CAAC;AAED,SAAS,MAAM,CAAC,KAAe;IAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAA;SACtC,IAAI,OAAO,KAAK,KAAK,QAAQ;QAAE,OAAO,KAAK,CAAC,QAAQ,EAAE,CAAA;IAC3D,OAAO,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;AACzB,CAAC"}

package/x/{base/utils → view/parts}/apply-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"apply-styles.js","sourceRoot":"","sources":["../../../s/base/utils/apply-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAqC,kBAAkB,EAAC,MAAM,KAAK,CAAA;AAEtF,MAAM,UAAU,WAAW,CAAC,MAAkB,EAAE,MAAuB;IACtE,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;AAC3C,CAAC;AAED,SAAS,aAAa,CAAC,MAAuB;IAC7C,MAAM,aAAa,GAAG,EAAE,CAAA;IAExB,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAC3B,MAAM,GAAG,GAAG,IAAI,GAAG,CAAE,MAAyB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC,CAAA;QACxE,KAAK,MAAM,CAAC,IAAI,GAAG;YAClB,aAAa,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAsB,CAAC,CAAC,CAAA;IACnE,CAAC;SACI,IAAI,MAAM,KAAK,SAAS;QAC5B,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAA;IAE/C,OAAO,aAAa,CAAA;AACrB,CAAC"}
+{"version":3,"file":"apply-styles.js","sourceRoot":"","sources":["../../../s/view/parts/apply-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,WAAW,EAAqC,kBAAkB,EAAC,MAAM,KAAK,CAAA;AAEtF,MAAM,UAAU,WAAW,CAAC,MAAkB,EAAE,MAAuB;IACtE,WAAW,CAAC,MAAM,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;AAC3C,CAAC;AAED,SAAS,aAAa,CAAC,MAAuB;IAC7C,MAAM,aAAa,GAAG,EAAE,CAAA;IAExB,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;QAC3B,MAAM,GAAG,GAAG,IAAI,GAAG,CAAE,MAAyB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,CAAC,CAAA;QACxE,KAAK,MAAM,CAAC,IAAI,GAAG;YAClB,aAAa,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAsB,CAAC,CAAC,CAAA;IACnE,CAAC;SACI,IAAI,MAAM,KAAK,SAAS;QAC5B,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAA;IAE/C,OAAO,aAAa,CAAA;AACrB,CAAC"}

package/x/view/parts/cx.d.ts

@@ -0,0 +1,12 @@
+export declare class LightCx {
+    render: () => Promise<void>;
+    count: number;
+    rendered: import("@e280/stz").Deferred<void>;
+    constructor(render: () => Promise<void>);
+    doneRender(): void;
+}
+export declare class ShadowCx extends LightCx {
+    host: HTMLElement;
+    shadow: ShadowRoot;
+    constructor(render: () => Promise<void>, host: HTMLElement, shadow: ShadowRoot);
+}

package/x/view/parts/cx.js

@@ -0,0 +1,24 @@
+import { defer } from "@e280/stz";
+export class LightCx {
+    render;
+    count = 0;
+    rendered = defer();
+    constructor(render) {
+        this.render = render;
+    }
+    doneRender() {
+        this.count++;
+        this.rendered.resolve();
+        this.rendered = defer();
+    }
+}
+export class ShadowCx extends LightCx {
+    host;
+    shadow;
+    constructor(render, host, shadow) {
+        super(render);
+        this.host = host;
+        this.shadow = shadow;
+    }
+}
+//# sourceMappingURL=cx.js.map

package/x/view/parts/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../../s/view/parts/cx.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAA;AAE/B,MAAM,OAAO,OAAO;IAIA;IAHnB,KAAK,GAAG,CAAC,CAAA;IACT,QAAQ,GAAG,KAAK,EAAQ,CAAA;IAExB,YAAmB,MAA2B;QAA3B,WAAM,GAAN,MAAM,CAAqB;IAAG,CAAC;IAElD,UAAU;QACT,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;QACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,EAAE,CAAA;IACxB,CAAC;CACD;AAED,MAAM,OAAO,QAAS,SAAQ,OAAO;IAG3B;IACA;IAHT,YACE,MAA2B,EACpB,IAAiB,EACjB,MAAkB;QAE1B,KAAK,CAAC,MAAM,CAAC,CAAA;QAHL,SAAI,GAAJ,IAAI,CAAa;QACjB,WAAM,GAAN,MAAM,CAAY;IAG3B,CAAC;CACD"}

package/x/view/parts/reactivity.d.ts

@@ -0,0 +1,5 @@
+export declare class Reactivity {
+    #private;
+    clear(): void;
+    observe<X>(fn: () => X, rerender: () => Promise<void>): X;
+}

package/x/view/parts/reactivity.js

@@ -0,0 +1,18 @@
+import { tracker } from "@e280/strata";
+export class Reactivity {
+    #stoppers = [];
+    clear() {
+        this.#stoppers.forEach(stop => stop());
+        this.#stoppers = [];
+    }
+    observe(fn, rerender) {
+        const { seen, result } = tracker.observe(fn);
+        this.clear();
+        for (const item of seen) {
+            const stop = tracker.subscribe(item, rerender);
+            this.#stoppers.push(stop);
+        }
+        return result;
+    }
+}
+//# sourceMappingURL=reactivity.js.map

package/x/view/parts/reactivity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactivity.js","sourceRoot":"","sources":["../../../s/view/parts/reactivity.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AAEpC,MAAM,OAAO,UAAU;IACtB,SAAS,GAAmB,EAAE,CAAA;IAE9B,KAAK;QACJ,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,CAAA;QACtC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAA;IACpB,CAAC;IAED,OAAO,CAAI,EAAW,EAAE,QAA6B;QACpD,MAAM,EAAC,IAAI,EAAE,MAAM,EAAC,GAAG,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;QAC1C,IAAI,CAAC,KAAK,EAAE,CAAA;QACZ,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE,CAAC;YACzB,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;YAC9C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC1B,CAAC;QACD,OAAO,MAAM,CAAA;IACd,CAAC;CACD"}

package/x/view/shadow.d.ts

@@ -0,0 +1,6 @@
+import { View, ShadowSetup, ShadowView } from "./types.js";
+export declare function shadowSetup(): ShadowSetup;
+export declare function shadow<Props extends any[]>(view: View<Props>): ShadowView<Props>;
+export declare namespace shadow {
+    var setup: (setup: () => ShadowSetup) => <Props extends any[]>(view: View<Props>) => ShadowView<Props>;
+}

package/x/view/shadow.js

@@ -0,0 +1,71 @@
+import { microbounce } from "@e280/stz";
+import { render as litRender } from "lit";
+import { ShadowCx } from "./parts/cx.js";
+import { hooks } from "./hooks/plumbing/hooks.js";
+import { SlyShadow } from "./common/sly-shadow.js";
+import { Reactivity } from "./parts/reactivity.js";
+import { applyAttrs } from "./parts/apply-attrs.js";
+import { Hookscope } from "./hooks/plumbing/hookscope.js";
+import { AsyncDirective, directive } from "lit/async-directive.js";
+export function shadowSetup() {
+    SlyShadow.register();
+    const host = document.createElement("sly-shadow");
+    const shadow = host.attachShadow({ mode: "open" });
+    return { host, shadow };
+}
+export function shadow(view) {
+    return rawShadow(shadowSetup, view);
+}
+shadow.setup = (setup) => ((view) => (rawShadow(setup, view)));
+function rawShadow(setup, view) {
+    const directiveFn = directive(class extends AsyncDirective {
+        #cx;
+        #hookscope;
+        #props;
+        #reactivity = new Reactivity();
+        constructor(part) {
+            super(part);
+            const { host, shadow } = setup();
+            const rerender = microbounce(() => {
+                if (!this.#props)
+                    throw new Error("cannot render before props");
+                if (!this.isConnected)
+                    return;
+                const content = this.#renderContent(this.#props);
+                litRender(content, this.#cx.shadow);
+                this.#cx.doneRender();
+            });
+            this.#cx = new ShadowCx(rerender, host, shadow);
+            this.#hookscope = new Hookscope(this.#cx);
+        }
+        #renderContent(props) {
+            this.#props = props;
+            return this.#reactivity.observe(() => hooks.wrap(this.#hookscope, () => view(...this.#props)), this.#cx.render);
+        }
+        render({ props, children, attrs }) {
+            const { host } = this.#cx;
+            if (!this.isConnected)
+                return host;
+            if (attrs)
+                applyAttrs(host, attrs);
+            litRender(children, this.#cx.host);
+            litRender(this.#renderContent(props), this.#cx.shadow);
+            this.#cx.doneRender();
+            return host;
+        }
+        disconnected() {
+            this.#hookscope.mounts.unmountAll();
+            this.#reactivity.clear();
+        }
+        reconnected() {
+            this.#hookscope.mounts.remountAll();
+            this.#cx.render();
+        }
+    });
+    function shadowView(...props) {
+        return directiveFn({ props });
+    }
+    shadowView.with = directiveFn;
+    return shadowView;
+}
+//# sourceMappingURL=shadow.js.map

package/x/view/shadow.js.map

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

package/x/view/types.d.ts

@@ -1,26 +1,18 @@
 import { TemplateResult } from "lit";
-import { Constructor } from "@e280/stz";
-import { DirectiveResult } from "lit/directive.js";
-import { Use } from "../base/use.js";
-import { BaseElement } from "../base/element.js";
-import { ViewChain } from "./utils/parts/chain.js";
+import { DirectiveResult } from "lit/async-directive.js";
 export type Content = TemplateResult | DirectiveResult | HTMLElement | string | null | undefined | void | Content[];
-export type ViewFn<Props extends any[]> = ((use: Use) => (...props: Props) => Content);
-export type View<Props extends any[]> = {
-    (...props: Props): DirectiveResult;
-    props: (...props: Props) => ViewChain<Props>;
-    transmute: <PropsB extends any[]>(convert: (...propsB: PropsB) => Props) => View<PropsB>;
-    component: <B extends Constructor<BaseElement>>(Base?: B) => {
-        props: (propFn: (component: InstanceType<B>) => Props) => (ComponentClass<B, Props>);
-    };
-    naked: (host: HTMLElement) => NakedView<Props>;
+export type View<Props extends any[]> = (...props: Props) => Content;
+export type ViewAttr = string | number | boolean;
+export type ViewAttrs = Record<string, ViewAttr>;
+export type Placement<Props extends any[]> = {
+    props: Props;
+    children?: Content;
+    attrs?: ViewAttrs;
 };
-export type ViewProps<V extends View<any>> = (V extends View<infer Props> ? Props : never);
-export type ComponentClass<B extends Constructor<BaseElement>, Props extends any[]> = {
-    view: View<Props>;
-    new (): InstanceType<B>;
-} & B;
-export type NakedView<Props extends any[]> = {
+export type ShadowView<Props extends any[]> = View<Props> & {
+    with: (placement: Placement<Props>) => Content;
+};
+export type ShadowSetup = {
     host: HTMLElement;
-    render: (...props: Props) => void;
+    shadow: ShadowRoot;
 };

package/s/demo/views/counter.ts

@@ -1,50 +0,0 @@
-
-import {css, html} from "lit"
-
-import {dom} from "../../dom/dom.js"
-import {view} from "../../view/view.js"
-import {cssReset} from "../../base/css-reset.js"
-import {BaseElement} from "../../base/element.js"
-
-export const CounterView = view(use => (start: number, step: number) => {
-	use.name("counter")
-	use.styles(cssReset, styles)
-
-	const $count = use.signal(start)
-	const increment = () => { $count.value += step }
-
-	return html`
-		<slot></slot>
-		<div>
-			<span>${$count()}</span>
-		</div>
-		<div>
-			<button @click="${increment}">++</button>
-		</div>
-	`
-})
-
-// convert a view into a web component
-export class CounterComponent extends (
-	CounterView
-		.component(class extends BaseElement {
-			attrs = dom.attrs(this).spec({
-				start: Number,
-				step: Number,
-			})
-		})
-		.props(c => [c.attrs.start ?? 0, c.attrs.step ?? 1])
-) {}
-
-const styles = css`
-:host {
-	display: flex;
-	justify-content: center;
-	gap: 1em;
-}
-
-button {
-	padding: 0.2em 0.5em;
-}
-`
-

package/s/demo/views/fastcount.ts

@@ -1,29 +0,0 @@
-
-import {css, html} from "lit"
-import {nap, cycle} from "@e280/stz"
-
-import {dom} from "../../dom/dom.js"
-import {Use} from "../../base/use.js"
-import {BaseElement} from "../../base/element.js"
-
-export class FastcountElement extends BaseElement {
-	static styles = css`span{color:orange}`
-
-	attrs = dom.attrs(this).spec({value: Number})
-	something = {whatever: "rofl"}
-
-	render(use: Use) {
-		const {value = 1} = this.attrs
-		const $count = use.signal(0)
-
-		use.mount(() => cycle(async() => {
-			await nap(10)
-			await $count($count() + 1)
-		}))
-
-		return html`
-			<span>${$count() * value}</span>
-		`
-	}
-}
-

package/s/demo/views/mounting.ts

@@ -1,36 +0,0 @@
-
-import {html} from "lit"
-import {cycle, nap} from "@e280/stz"
-import {view} from "../../view/view.js"
-
-export const MountingTest = view(use => () => {
-	const $toggle = use.signal(false)
-
-	use.mount(() => cycle(async() => {
-		await nap(1000)
-		$toggle(!$toggle())
-	}))
-
-	return $toggle()
-		? TestAlpha()
-		: html`bravo`
-})
-
-export const TestAlpha = view(() => () => {
-	return html`
-		<span>${TestCharlie()}</span>
-	`
-})
-
-
-export const TestCharlie = view(use => () => {
-	use.mount(() => {
-		// console.log("mount")
-		return () => {
-			// console.log("unmount")
-		}
-	})
-
-	return html`charlie`
-})
-

package/s/loaders/parts/error-display.ts

@@ -1,26 +0,0 @@
-
-import {css, html} from "lit"
-import {view} from "../../view/view.js"
-import {cssReset} from "../../base/css-reset.js"
-
-export const ErrorDisplay = view(use => (error: any) => {
-	use.name("error")
-	use.styles(cssReset, style)
-
-	if (typeof error === "string")
-		return error
-
-	else if (error instanceof Error)
-		return html`<strong>${error.name}:</strong> <span>${error.message}</span>`
-
-	else
-		return `error`
-})
-
-const style = css`
-:host {
-	font-family: monospace;
-	color: red;
-}
-`
-