@e280/sly 0.2.1 → 0.2.2

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.
package/x/index.html CHANGED
@@ -111,7 +111,7 @@ body {
111
111
  }
112
112
 
113
113
  </style>
114
- <script type=module src="demo/demo.bundle.min.js?v=f6c7a9dc6b1a"></script>
114
+ <script type=module src="demo/demo.bundle.min.js?v=d5cebd790ce1"></script>
115
115
  <link rel="icon" href="assets/favicon.png?v=4dc161ed79b3"/>
116
116
 
117
117
  <meta name="theme-color" content="#95ff7b">
@@ -131,7 +131,7 @@ body {
131
131
  <img class=icon alt="" src="/assets/favicon.png"/>
132
132
  <h1>sly testing page</h1>
133
133
  <p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
134
- <p class=lil>v0.2.1</p>
134
+ <p class=lil>v0.2.2</p>
135
135
 
136
136
  <fastcount-element></fastcount-element>
137
137
  <counter-component start=280 step=2>component</counter-component>
package/x/view/types.d.ts CHANGED
@@ -13,9 +13,14 @@ export type View<Props extends any[]> = {
13
13
  component: <B extends Constructor<BaseElement>>(Base?: B) => {
14
14
  props: (propFn: (component: InstanceType<B>) => Props) => (ComponentClass<B, Props>);
15
15
  };
16
+ naked: (host: HTMLElement) => NakedView<Props>;
16
17
  };
17
18
  export type ViewProps<V extends View<any>> = (V extends View<infer Props> ? Props : never);
18
19
  export type ComponentClass<B extends Constructor<BaseElement>, Props extends any[]> = {
19
20
  view: View<Props>;
20
21
  new (): InstanceType<B>;
21
22
  } & B;
23
+ export type NakedView<Props extends any[]> = {
24
+ host: HTMLElement;
25
+ render: (...props: Props) => void;
26
+ };
@@ -1,8 +1,9 @@
1
1
  import { ViewChain } from "./parts/chain.js";
2
- import { BaseElement } from "../../base/element.js";
3
2
  import { ViewContext } from "./parts/context.js";
3
+ import { BaseElement } from "../../base/element.js";
4
4
  import { makeComponent } from "./make-component.js";
5
5
  import { makeViewDirective } from "./parts/directive.js";
6
+ import { NakedContext, NakedCapsule } from "./parts/naked.js";
6
7
  export function makeView(viewFn, settings) {
7
8
  const renderDirective = makeViewDirective(viewFn, settings);
8
9
  function v(...props) {
@@ -19,6 +20,13 @@ export function makeView(viewFn, settings) {
19
20
  v.component = (Base = BaseElement) => ({
20
21
  props: (propFn) => (makeComponent(settings, Base, propFn, viewFn))
21
22
  });
23
+ v.naked = (host) => {
24
+ const naked = new NakedCapsule(host, viewFn, settings);
25
+ return {
26
+ host,
27
+ render: (...props) => naked.update(new NakedContext(props)),
28
+ };
29
+ };
22
30
  return v;
23
31
  }
24
32
  //# sourceMappingURL=make-view.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"make-view.js","sourceRoot":"","sources":["../../../s/view/utils/make-view.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,sBAAsB,CAAA;AAEtD,MAAM,UAAU,QAAQ,CACtB,MAAqB,EACrB,QAAwB;IAGzB,MAAM,eAAe,GAAG,iBAAiB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAE3D,SAAS,CAAC,CAAC,GAAG,KAAY;QACzB,OAAO,eAAe,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,KAAY,EAAE,EAAE,CAAC,IAAI,SAAS,CAC3C,IAAI,WAAW,CAAC,KAAK,CAAC,EACtB,eAAe,CACf,CAAA;IAED,CAAC,CAAC,SAAS,GAAG,CAAuB,OAAqC,EAAE,EAAE;QAC7E,MAAM,OAAO,GAAmB,GAAG,CAAC,EAAE;YACrC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;YAC5B,OAAO,CAAC,GAAG,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,CAAA;QACtD,CAAC,CAAA;QACD,OAAO,QAAQ,CAAS,OAAO,EAAE,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,CAAC,CAAC,SAAS,GAAG,CAAqC,OAAU,WAAkB,EAAE,EAAE,CAAC,CAAC;QACpF,KAAK,EAAE,CAAC,MAA6C,EAAE,EAAE,CAAC,CACzD,aAAa,CACZ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAM,CACN,CACD;KACD,CAAC,CAAA;IAEF,OAAO,CAAC,CAAA;AACT,CAAC"}
1
+ {"version":3,"file":"make-view.js","sourceRoot":"","sources":["../../../s/view/utils/make-view.ts"],"names":[],"mappings":"AAKA,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAA;AACjD,OAAO,EAAC,aAAa,EAAC,MAAM,qBAAqB,CAAA;AACjD,OAAO,EAAC,iBAAiB,EAAC,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAC,YAAY,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAA;AAE3D,MAAM,UAAU,QAAQ,CACtB,MAAqB,EACrB,QAAwB;IAGzB,MAAM,eAAe,GAAG,iBAAiB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAE3D,SAAS,CAAC,CAAC,GAAG,KAAY;QACzB,OAAO,eAAe,CAAC,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,KAAY,EAAE,EAAE,CAAC,IAAI,SAAS,CAC3C,IAAI,WAAW,CAAC,KAAK,CAAC,EACtB,eAAe,CACf,CAAA;IAED,CAAC,CAAC,SAAS,GAAG,CAAuB,OAAqC,EAAE,EAAE;QAC7E,MAAM,OAAO,GAAmB,GAAG,CAAC,EAAE;YACrC,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;YAC5B,OAAO,CAAC,GAAG,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,GAAG,MAAM,CAAC,CAAC,CAAA;QACtD,CAAC,CAAA;QACD,OAAO,QAAQ,CAAS,OAAO,EAAE,QAAQ,CAAC,CAAA;IAC3C,CAAC,CAAA;IAED,CAAC,CAAC,SAAS,GAAG,CAAqC,OAAU,WAAkB,EAAE,EAAE,CAAC,CAAC;QACpF,KAAK,EAAE,CAAC,MAA6C,EAAE,EAAE,CAAC,CACzD,aAAa,CACZ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAM,CACN,CACD;KACD,CAAC,CAAA;IAEF,CAAC,CAAC,KAAK,GAAG,CAAC,IAAiB,EAAoB,EAAE;QACjD,MAAM,KAAK,GAAG,IAAI,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;QACtD,OAAO;YACN,IAAI;YACJ,MAAM,EAAE,CAAC,GAAG,KAAY,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,YAAY,CAAC,KAAK,CAAC,CAAC;SAClE,CAAA;IACF,CAAC,CAAA;IAED,OAAO,CAAC,CAAA;AACT,CAAC"}
@@ -1,13 +1,12 @@
1
1
  import { ViewFn } from "../../types.js";
2
- import { SlyView } from "./sly-view.js";
3
2
  import { ViewContext } from "./context.js";
4
3
  /** controls the rendering of view context into an element. */
5
4
  export declare class ViewCapsule<Props extends any[]> {
6
5
  #private;
7
6
  private viewFn;
8
7
  private settings;
9
- constructor(viewFn: ViewFn<Props>, settings: ShadowRootInit);
10
- update(context: ViewContext<Props>): SlyView;
8
+ constructor(host: HTMLElement, viewFn: ViewFn<Props>, settings: ShadowRootInit);
9
+ update(context: ViewContext<Props>): HTMLElement;
11
10
  disconnected(): void;
12
11
  reconnected(): void;
13
12
  }
@@ -1,5 +1,4 @@
1
1
  import { debounce } from "@e280/stz";
2
- import { SlyView } from "./sly-view.js";
3
2
  import { dom } from "../../../dom/dom.js";
4
3
  import { Reactor } from "../../../base/utils/reactor.js";
5
4
  import { attrSet } from "../../../dom/attrs/parts/attr-fns.js";
@@ -9,17 +8,19 @@ import { _disconnect, _reconnect, _wrap, Use } from "../../../base/use.js";
9
8
  export class ViewCapsule {
10
9
  viewFn;
11
10
  settings;
12
- #element = SlyView.make();
11
+ #element;
13
12
  #reactor = new Reactor();
14
13
  #use;
15
14
  #shadow;
16
15
  #context;
17
- #attrWatcher = new AttrWatcher(this.#element, () => this.#renderDebounced());
18
- constructor(viewFn, settings) {
16
+ #attrWatcher;
17
+ constructor(host, viewFn, settings) {
19
18
  this.viewFn = viewFn;
20
19
  this.settings = settings;
20
+ this.#element = host;
21
21
  this.#shadow = this.#element.attachShadow(this.settings);
22
22
  this.#use = new Use(this.#element, this.#shadow, this.#renderNow, this.#renderDebounced);
23
+ this.#attrWatcher = new AttrWatcher(this.#element, () => this.#renderDebounced());
23
24
  }
24
25
  update(context) {
25
26
  this.#context = context;
@@ -1 +1 @@
1
- {"version":3,"file":"capsule.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/capsule.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAElC,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AACrC,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAA;AACtD,OAAO,EAAC,OAAO,EAAC,MAAM,sCAAsC,CAAA;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,qCAAqC,CAAA;AAC/D,OAAO,EAAC,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,MAAM,sBAAsB,CAAA;AAExE,8DAA8D;AAC9D,MAAM,OAAO,WAAW;IAUb;IACA;IAVV,QAAQ,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;IACzB,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAA;IAExB,IAAI,CAAK;IACT,OAAO,CAAY;IACnB,QAAQ,CAAqB;IAC7B,YAAY,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;IAE5E,YACU,MAAqB,EACrB,QAAwB;QADxB,WAAM,GAAN,MAAM,CAAe;QACrB,aAAQ,GAAR,QAAQ,CAAgB;QAEjC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACxD,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAClB,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,gBAAgB,CACrB,CAAA;IACF,CAAC;IAED,MAAM,CAAC,OAA2B;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QACvB,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAA;IACrB,CAAC;IAED,UAAU,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACnC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpD,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAC7B,CAAA;YACD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACnD,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;YACjC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;YACjD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;QAC1B,CAAC,CAAC,CAAA;IACH,CAAC,CAAA;IAED,gBAAgB,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IAE/C,YAAY;QACX,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;QACvB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;IAC1B,CAAC;CACD"}
1
+ {"version":3,"file":"capsule.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/capsule.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAElC,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAA;AACtD,OAAO,EAAC,OAAO,EAAC,MAAM,sCAAsC,CAAA;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,qCAAqC,CAAA;AAC/D,OAAO,EAAC,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,MAAM,sBAAsB,CAAA;AAExE,8DAA8D;AAC9D,MAAM,OAAO,WAAW;IAWb;IACA;IAXV,QAAQ,CAAa;IACrB,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAA;IAExB,IAAI,CAAK;IACT,OAAO,CAAY;IACnB,QAAQ,CAAqB;IAC7B,YAAY,CAAa;IAEzB,YACE,IAAiB,EACT,MAAqB,EACrB,QAAwB;QADxB,WAAM,GAAN,MAAM,CAAe;QACrB,aAAQ,GAAR,QAAQ,CAAgB;QAEjC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACxD,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAClB,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,gBAAgB,CACrB,CAAA;QACD,IAAI,CAAC,YAAY,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;IAClF,CAAC;IAED,MAAM,CAAC,OAA2B;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QACvB,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAA;IACrB,CAAC;IAED,UAAU,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACnC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpD,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAC7B,CAAA;YACD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACnD,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;YACjC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;YACjD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;QAC1B,CAAC,CAAC,CAAA;IACH,CAAC,CAAA;IAED,gBAAgB,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IAE/C,YAAY;QACX,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;QACvB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;IAC1B,CAAC;CACD"}
@@ -1,9 +1,11 @@
1
1
  import { AsyncDirective, directive } from "lit/async-directive.js";
2
+ import { SlyView } from "./sly-view.js";
2
3
  import { ViewCapsule } from "./capsule.js";
3
4
  /** creates a lit directive fn, which when called, emits a funky lit thing to inject in your html templates. */
4
5
  export function makeViewDirective(viewFn, settings) {
5
6
  return directive(class ViewDirective extends AsyncDirective {
6
- #capsule = new ViewCapsule(viewFn, settings);
7
+ #host = SlyView.make();
8
+ #capsule = new ViewCapsule(this.#host, viewFn, settings);
7
9
  render(context) {
8
10
  return this.#capsule.update(context);
9
11
  }
@@ -1 +1 @@
1
- {"version":3,"file":"directive.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/directive.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAA;AAEjF,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AAGxC,+GAA+G;AAC/G,MAAM,UAAU,iBAAiB,CAC/B,MAAqB,EACrB,QAAwB;IAGzB,OAAO,SAAS,CAAC,MAAM,aAAc,SAAQ,cAAc;QAC1D,QAAQ,GAAG,IAAI,WAAW,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAE5C,MAAM,CAAC,OAA2B;YACjC,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACrC,CAAC;QAED,YAAY;YACX,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAA;QAC7B,CAAC;QAED,WAAW;YACV,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAA;QAC5B,CAAC;KACD,CAAqD,CAAA;AACvD,CAAC"}
1
+ {"version":3,"file":"directive.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/directive.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,cAAc,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAA;AAEjF,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAA;AAGxC,+GAA+G;AAC/G,MAAM,UAAU,iBAAiB,CAC/B,MAAqB,EACrB,QAAwB;IAGzB,OAAO,SAAS,CAAC,MAAM,aAAc,SAAQ,cAAc;QAC1D,KAAK,GAAG,OAAO,CAAC,IAAI,EAAE,CAAA;QACtB,QAAQ,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAA;QAExD,MAAM,CAAC,OAA2B;YACjC,OAAO,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACrC,CAAC;QAED,YAAY;YACX,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAA;QAC7B,CAAC;QAED,WAAW;YACV,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAA;QAC5B,CAAC;KACD,CAAqD,CAAA;AACvD,CAAC"}
@@ -0,0 +1,18 @@
1
+ import { ViewFn } from "../../types.js";
2
+ import { AttrValue } from "../../../dom/types.js";
3
+ /** the information we need to render a view. */
4
+ export declare class NakedContext<Props extends any[]> {
5
+ props: Props;
6
+ attrs: Map<string, AttrValue>;
7
+ constructor(props: Props);
8
+ }
9
+ /** controls the rendering of view context into an element. */
10
+ export declare class NakedCapsule<Props extends any[]> {
11
+ #private;
12
+ private viewFn;
13
+ private settings;
14
+ constructor(host: HTMLElement, viewFn: ViewFn<Props>, settings: ShadowRootInit);
15
+ update(context: NakedContext<Props>): HTMLElement;
16
+ disconnected(): void;
17
+ reconnected(): void;
18
+ }
@@ -0,0 +1,57 @@
1
+ import { debounce } from "@e280/stz";
2
+ import { dom } from "../../../dom/dom.js";
3
+ import { Reactor } from "../../../base/utils/reactor.js";
4
+ import { attrSet } from "../../../dom/attrs/parts/attr-fns.js";
5
+ import { AttrWatcher } from "../../../base/utils/attr-watcher.js";
6
+ import { _disconnect, _reconnect, _wrap, Use } from "../../../base/use.js";
7
+ /** the information we need to render a view. */
8
+ export class NakedContext {
9
+ props;
10
+ attrs = new Map();
11
+ constructor(props) {
12
+ this.props = props;
13
+ }
14
+ }
15
+ /** controls the rendering of view context into an element. */
16
+ export class NakedCapsule {
17
+ viewFn;
18
+ settings;
19
+ #element;
20
+ #reactor = new Reactor();
21
+ #use;
22
+ #shadow;
23
+ #context;
24
+ #attrWatcher;
25
+ constructor(host, viewFn, settings) {
26
+ this.viewFn = viewFn;
27
+ this.settings = settings;
28
+ this.#element = host;
29
+ this.#shadow = this.#element.attachShadow(this.settings);
30
+ this.#use = new Use(this.#element, this.#shadow, this.#renderNow, this.#renderDebounced);
31
+ this.#attrWatcher = new AttrWatcher(this.#element, () => this.#renderDebounced());
32
+ }
33
+ update(context) {
34
+ this.#context = context;
35
+ this.#renderNow();
36
+ return this.#element;
37
+ }
38
+ #renderNow = () => {
39
+ this.#use[_wrap](() => {
40
+ const content = this.#reactor.effect(() => this.viewFn(this.#use)(...this.#context.props), () => this.#renderDebounced());
41
+ attrSet.entries(this.#element, this.#context.attrs);
42
+ dom.render(this.#shadow, content);
43
+ this.#attrWatcher.start();
44
+ });
45
+ };
46
+ #renderDebounced = debounce(0, this.#renderNow);
47
+ disconnected() {
48
+ this.#use[_disconnect]();
49
+ this.#reactor.clear();
50
+ this.#attrWatcher.stop();
51
+ }
52
+ reconnected() {
53
+ this.#use[_reconnect]();
54
+ this.#attrWatcher.start();
55
+ }
56
+ }
57
+ //# sourceMappingURL=naked.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"naked.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/naked.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,WAAW,CAAA;AAElC,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AAEvC,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAA;AACtD,OAAO,EAAC,OAAO,EAAC,MAAM,sCAAsC,CAAA;AAC5D,OAAO,EAAC,WAAW,EAAC,MAAM,qCAAqC,CAAA;AAC/D,OAAO,EAAC,WAAW,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,MAAM,sBAAsB,CAAA;AAExE,gDAAgD;AAChD,MAAM,OAAO,YAAY;IAEL;IADnB,KAAK,GAAG,IAAI,GAAG,EAAqB,CAAA;IACpC,YAAmB,KAAY;QAAZ,UAAK,GAAL,KAAK,CAAO;IAAG,CAAC;CACnC;AAED,8DAA8D;AAC9D,MAAM,OAAO,YAAY;IAWd;IACA;IAXV,QAAQ,CAAa;IACrB,QAAQ,GAAG,IAAI,OAAO,EAAE,CAAA;IAExB,IAAI,CAAK;IACT,OAAO,CAAY;IACnB,QAAQ,CAAsB;IAC9B,YAAY,CAAa;IAEzB,YACE,IAAiB,EACT,MAAqB,EACrB,QAAwB;QADxB,WAAM,GAAN,MAAM,CAAe;QACrB,aAAQ,GAAR,QAAQ,CAAgB;QAEjC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QACxD,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAClB,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,UAAU,EACf,IAAI,CAAC,gBAAgB,CACrB,CAAA;QACD,IAAI,CAAC,YAAY,GAAG,IAAI,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;IAClF,CAAC;IAED,MAAM,CAAC,OAA4B;QAClC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAA;QACvB,IAAI,CAAC,UAAU,EAAE,CAAA;QACjB,OAAO,IAAI,CAAC,QAAQ,CAAA;IACrB,CAAC;IAED,UAAU,GAAG,GAAG,EAAE;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE;YACrB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CACnC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpD,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAC7B,CAAA;YACD,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;YACnD,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;YACjC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;QAC1B,CAAC,CAAC,CAAA;IACH,CAAC,CAAA;IAED,gBAAgB,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;IAE/C,YAAY;QACX,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAA;QACxB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;IACzB,CAAC;IAED,WAAW;QACV,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;QACvB,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;IAC1B,CAAC;CACD"}
@@ -1,5 +1,6 @@
1
1
  /** <sly-view> element that views are rendered into. */
2
2
  export declare class SlyView extends HTMLElement {
3
3
  #private;
4
+ static register(): void;
4
5
  static make(): SlyView;
5
6
  }
@@ -2,11 +2,14 @@ import { dom } from "../../../dom/dom.js";
2
2
  /** <sly-view> element that views are rendered into. */
3
3
  export class SlyView extends HTMLElement {
4
4
  static #registered = false;
5
- static make() {
5
+ static register() {
6
6
  if (!this.#registered) {
7
7
  dom.register({ SlyView }, { soft: true, upgrade: true });
8
8
  this.#registered = true;
9
9
  }
10
+ }
11
+ static make() {
12
+ this.register();
10
13
  return document.createElement("sly-view");
11
14
  }
12
15
  }
@@ -1 +1 @@
1
- {"version":3,"file":"sly-view.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/sly-view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AAEvC,uDAAuD;AACvD,MAAM,OAAO,OAAQ,SAAQ,WAAW;IACvC,MAAM,CAAC,WAAW,GAAG,KAAK,CAAA;IAC1B,MAAM,CAAC,IAAI;QACV,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,GAAG,CAAC,QAAQ,CAAC,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAA;YACpD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;QACxB,CAAC;QACD,OAAO,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAY,CAAA;IACrD,CAAC"}
1
+ {"version":3,"file":"sly-view.js","sourceRoot":"","sources":["../../../../s/view/utils/parts/sly-view.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,qBAAqB,CAAA;AAEvC,uDAAuD;AACvD,MAAM,OAAO,OAAQ,SAAQ,WAAW;IACvC,MAAM,CAAC,WAAW,GAAG,KAAK,CAAA;IAE1B,MAAM,CAAC,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,GAAG,CAAC,QAAQ,CAAC,EAAC,OAAO,EAAC,EAAE,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAA;YACpD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;QACxB,CAAC;IACF,CAAC;IAED,MAAM,CAAC,IAAI;QACV,IAAI,CAAC,QAAQ,EAAE,CAAA;QACf,OAAO,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAY,CAAA;IACrD,CAAC"}