@e280/sly 0.2.4 → 0.3.0-1

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

@@ -0,0 +1,10 @@
+/** return the current count of how many times this view has been rendered (starts at 0) */
+export declare function useCount(): number;
+/** return a function that triggers the view to rerender */
+export declare function useRender(): () => Promise<void>;
+/** return a promise that resolves after the next render is complete */
+export declare function useRendered(): Promise<void>;
+/** return the shadow view's host element */
+export declare function useHost(): HTMLElement;
+/** return the shadow root */
+export declare function useShadow(): ShadowRoot;

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

@@ -0,0 +1,33 @@
+import { ShadowCx } from "../parts/cx.js";
+import { hooks } from "./plumbing/hooks.js";
+function useCx() {
+    const { scope } = hooks.increment();
+    return scope.cx;
+}
+function useShadowCx() {
+    const cx = useCx();
+    if (!(cx instanceof ShadowCx))
+        throw new Error("this hook only works on shadow views (but was called in a light view)");
+    return cx;
+}
+/** return the current count of how many times this view has been rendered (starts at 0) */
+export function useCount() {
+    return useCx().count;
+}
+/** return a function that triggers the view to rerender */
+export function useRender() {
+    return useCx().render;
+}
+/** return a promise that resolves after the next render is complete */
+export function useRendered() {
+    return useCx().rendered.promise;
+}
+/** return the shadow view's host element */
+export function useHost() {
+    return useShadowCx().host;
+}
+/** return the shadow root */
+export function useShadow() {
+    return useShadowCx().shadow;
+}
+//# sourceMappingURL=use-cx.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-cx.js","sourceRoot":"","sources":["../../../s/view/hooks/use-cx.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAA;AAEzC,SAAS,KAAK;IACb,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IACjC,OAAO,KAAK,CAAC,EAAE,CAAA;AAChB,CAAC;AAED,SAAS,WAAW;IACnB,MAAM,EAAE,GAAG,KAAK,EAAE,CAAA;IAClB,IAAI,CAAC,CAAC,EAAE,YAAY,QAAQ,CAAC;QAC5B,MAAM,IAAI,KAAK,CAAC,uEAAuE,CAAC,CAAA;IACzF,OAAO,EAAE,CAAA;AACV,CAAC;AAED,2FAA2F;AAC3F,MAAM,UAAU,QAAQ;IACvB,OAAO,KAAK,EAAE,CAAC,KAAK,CAAA;AACrB,CAAC;AAED,2DAA2D;AAC3D,MAAM,UAAU,SAAS;IACxB,OAAO,KAAK,EAAE,CAAC,MAAM,CAAA;AACtB,CAAC;AAED,uEAAuE;AACvE,MAAM,UAAU,WAAW;IAC1B,OAAO,KAAK,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAA;AAChC,CAAC;AAED,4CAA4C;AAC5C,MAAM,UAAU,OAAO;IACtB,OAAO,WAAW,EAAE,CAAC,IAAI,CAAA;AAC1B,CAAC;AAED,6BAA6B;AAC7B,MAAM,UAAU,SAAS;IACxB,OAAO,WAAW,EAAE,CAAC,MAAM,CAAA;AAC5B,CAAC"}

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

@@ -0,0 +1,2 @@
+/** mount/unmount lifecycle, but also return a value */
+export declare function useLife<Value>(fn: () => [value: Value, dispose: () => void]): Value;

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

@@ -0,0 +1,13 @@
+import { useRef } from "./use-ref.js";
+import { useMount } from "./use-mount.js";
+/** mount/unmount lifecycle, but also return a value */
+export function useLife(fn) {
+    const ref = useRef(undefined);
+    useMount(() => {
+        const [value, dispose] = fn();
+        ref.value = value;
+        return dispose;
+    });
+    return ref.value;
+}
+//# sourceMappingURL=use-life.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-life.js","sourceRoot":"","sources":["../../../s/view/hooks/use-life.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAA;AAEvC,uDAAuD;AACvD,MAAM,UAAU,OAAO,CAAQ,EAA6C;IAC3E,MAAM,GAAG,GAAG,MAAM,CAAQ,SAAkB,CAAC,CAAA;IAE7C,QAAQ,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,EAAE,CAAA;QAC7B,GAAG,CAAC,KAAK,GAAG,KAAK,CAAA;QACjB,OAAO,OAAO,CAAA;IACf,CAAC,CAAC,CAAA;IAEF,OAAO,GAAG,CAAC,KAAK,CAAA;AACjB,CAAC"}

package/x/{base/utils/mounts.d.ts → view/hooks/use-mount.d.ts}

@@ -1,3 +1,4 @@
+export declare function useMount(fn: () => () => void): void;
 export declare class Mounts {
     #private;
     mount(mount: () => () => void): void;

package/x/{base/utils/mounts.js → view/hooks/use-mount.js}

@@ -1,3 +1,9 @@
+import { useOnce } from "./use-once.js";
+import { hooks } from "./plumbing/hooks.js";
+export function useMount(fn) {
+    const { scope } = hooks.increment();
+    return useOnce(() => scope.mounts.mount(fn));
+}
 export class Mounts {
     #mounters = [];
     #unmounters = [];
@@ -15,4 +21,4 @@ export class Mounts {
             this.#unmounters.push(mount());
     }
 }
-//# sourceMappingURL=mounts.js.map
+//# sourceMappingURL=use-mount.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-mount.js","sourceRoot":"","sources":["../../../s/view/hooks/use-mount.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAA;AAEzC,MAAM,UAAU,QAAQ,CAAC,EAAoB;IAC5C,MAAM,EAAC,KAAK,EAAC,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IACjC,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;AAC7C,CAAC;AAED,MAAM,OAAO,MAAM;IAClB,SAAS,GAAyB,EAAE,CAAA;IACpC,WAAW,GAAmB,EAAE,CAAA;IAEhC,KAAK,CAAC,KAAuB;QAC5B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;IAC/B,CAAC;IAED,UAAU;QACT,KAAK,MAAM,OAAO,IAAI,IAAI,CAAC,WAAW;YACrC,OAAO,EAAE,CAAA;QACV,IAAI,CAAC,WAAW,GAAG,EAAE,CAAA;IACtB,CAAC;IAED,UAAU;QACT,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,SAAS;YACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;IAChC,CAAC;CACD"}

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

@@ -0,0 +1,2 @@
+/** sets the host element's "data-view" attribute */
+export declare function useName(name?: string): void;

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 "../../ops/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 "../../ops/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,iBAAiB,CAAA;AAClC,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>(value: Value): Ref<Value>;
+export declare class Ref<Value> {
+    value: Value;
+    constructor(value: Value);
+}

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

@@ -0,0 +1,11 @@
+import { useOnce } from "./use-once.js";
+export function useRef(value) {
+    return useOnce(() => new Ref(value));
+}
+export class Ref {
+    value;
+    constructor(value) {
+        this.value = value;
+    }
+}
+//# 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,KAAY;IACzC,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,CAAC,CAAA;AACrC,CAAC;AAED,MAAM,OAAO,GAAG;IACI;IAAnB,YAAmB,KAAY;QAAZ,UAAK,GAAL,KAAK,CAAO;IAAG,CAAC;CACnC"}

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

@@ -0,0 +1,3 @@
+export declare function useSignal<Value>(value: Value): import("@e280/strata").SignalFn<Value>;
+export declare function useDerived<Value>(fn: () => Value): import("@e280/strata").DerivedFn<Value>;
+export declare function useLazy<Value>(fn: () => Value): import("@e280/strata").LazyFn<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.value)
+            : next;
+        if (Object.is(value, ref.value))
+            return;
+        ref.value = value;
+        render();
+    };
+    return [ref.value, 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,KAAK,CAAC;YAC7C,CAAC,CAAC,IAAI,CAAA;QACP,IAAI,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC;YAAE,OAAM;QACvC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAA;QACjB,MAAM,EAAE,CAAA;IACT,CAAC,CAAA;IAED,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAU,CAAA;AACjC,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,16 @@
-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 "./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,17 @@
-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 "./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;AAErC,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/parts/sly-shadow.d.ts

@@ -0,0 +1,3 @@
+export declare class SlyShadow extends HTMLElement {
+    connectedCallback(): void;
+}

package/x/view/parts/sly-shadow.js

@@ -0,0 +1,7 @@
+export class SlyShadow extends HTMLElement {
+    connectedCallback() {
+        if (!this.hasAttribute("view"))
+            this.setAttribute("view", "");
+    }
+}
+//# sourceMappingURL=sly-shadow.js.map

package/x/view/parts/sly-shadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sly-shadow.js","sourceRoot":"","sources":["../../../s/view/parts/sly-shadow.ts"],"names":[],"mappings":"AACA,MAAM,OAAO,SAAU,SAAQ,WAAW;IACzC,iBAAiB;QAChB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAC7B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAC/B,CAAC;CACD"}

package/x/view/shadow.d.ts

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

package/x/view/shadow.js

@@ -0,0 +1,72 @@
+import { microbounce } from "@e280/stz";
+import { render as litRender } from "lit";
+import { dom } from "../dom/dom.js";
+import { ShadowCx } from "./parts/cx.js";
+import { SlyShadow } from "./parts/sly-shadow.js";
+import { hooks } from "./hooks/plumbing/hooks.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 shadow(view) {
+    const setupFn = () => {
+        dom.register({ SlyShadow }, { soft: true });
+        const host = document.createElement("sly-shadow");
+        const shadow = host.attachShadow({ mode: "open" });
+        return { host, shadow };
+    };
+    return rawShadow(setupFn, view);
+}
+shadow.config = (setupFn) => ((view) => (rawShadow(setupFn, view)));
+export 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;
 };