foldkit 0.133.0 → 0.135.0

package/dist/test/apps/bubbling.js

@@ -1,5 +1,4 @@
 import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -24,8 +23,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.div([h.Role('option'), h.OnClick(ClickedContainer())], [h.span([], [`clicks=${model.clicks}`])]),
         h.div([h.Role('listitem'), h.OnDoubleClick(DoubleClickedContainer())], [h.span([], [`dbl=${model.doubleClicks}`])]),

package/dist/test/apps/colorPicker.d.ts

@@ -0,0 +1,28 @@
+import { Schema as S } from 'effect';
+import * as CustomElement from '../../customElement/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
+export declare const hexColorPicker: CustomElement.CustomElementSpec<"hex-color-picker", {
+    color: S.String;
+}, {
+    'color-changed': S.Struct<{
+        readonly value: S.String;
+    }>;
+}>;
+export declare const Model: S.Struct<{
+    readonly color: S.String;
+}>;
+export type Model = typeof Model.Type;
+export declare const ChangedColor: import("../../schema/index.js").CallableTaggedStruct<"ChangedColor", {
+    value: S.String;
+}>;
+export declare const Message: S.Union<readonly [import("../../schema/index.js").CallableTaggedStruct<"ChangedColor", {
+    value: S.String;
+}>]>;
+export type Message = typeof Message.Type;
+export declare const initialModel: {
+    readonly color: string;
+};
+export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
+export declare const viewWithoutHandler: (model: Model, h: HtmlBuilder<Message>) => Html;
+//# sourceMappingURL=colorPicker.d.ts.map

package/dist/test/apps/colorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPicker.d.ts","sourceRoot":"","sources":["../../../src/test/apps/colorPicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,aAAa,MAAM,8BAA8B,CAAA;AAC7D,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAM5D,eAAO,MAAM,cAAc;;;;;;EAQzB,CAAA;AAIF,eAAO,MAAM,KAAK;;EAAgC,CAAA;AAClD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,YAAY;;EAAyC,CAAA;AAElE,eAAO,MAAM,OAAO;;IAA0B,CAAA;AAC9C,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY;;CAAmC,CAAA;AAI5D,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAkB5D,CAAA;AAED,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,EACZ,GAAG,WAAW,CAAC,OAAO,CAAC,KACtB,IAUF,CAAA"}

package/dist/test/apps/colorPicker.js

@@ -0,0 +1,43 @@
+import { Match as M, Schema as S } from 'effect';
+import * as CustomElement from '../../customElement/index.js';
+import { m } from '../../message/index.js';
+import { evo } from '../../struct/index.js';
+// CUSTOM ELEMENT
+export const hexColorPicker = CustomElement.define({
+    tag: 'hex-color-picker',
+    properties: {
+        color: S.String,
+    },
+    events: {
+        'color-changed': S.Struct({ value: S.String }),
+    },
+});
+// MODEL
+export const Model = S.Struct({ color: S.String });
+// MESSAGE
+export const ChangedColor = m('ChangedColor', { value: S.String });
+export const Message = S.Union([ChangedColor]);
+// INIT
+export const initialModel = Model.make({ color: '#000000' });
+// UPDATE
+export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
+    ChangedColor: ({ value }) => [evo(model, { color: () => value }), []],
+}));
+// VIEW
+export const view = (model, h) => {
+    const picker = hexColorPicker.withMessage(h);
+    return h.div([], [
+        picker([
+            picker.Color(model.color),
+            picker.OnColorChanged(detail => ChangedColor({ value: detail.value })),
+        ], []),
+        h.span([h.Role('status')], [model.color]),
+    ]);
+};
+export const viewWithoutHandler = (model, h) => {
+    const picker = hexColorPicker.withMessage(h);
+    return h.div([], [
+        picker([picker.Color(model.color)], []),
+        h.span([h.Role('status')], [model.color]),
+    ]);
+};

package/dist/test/apps/counter.d.ts

@@ -1,6 +1,6 @@
 import { Effect, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly count: S.Number;
     readonly log: S.$Array<S.Number>;
@@ -12,6 +12,8 @@ export declare const ClickedFetch: import("../../schema/index.js").CallableTagge
 export declare const ClickedFetchById: import("../../schema/index.js").CallableTaggedStruct<"ClickedFetchById", {
     id: S.Number;
 }>;
+export declare const Ticked: import("../../schema/index.js").CallableTaggedStruct<"Ticked", {}>;
+export declare const PolledCount: import("../../schema/index.js").CallableTaggedStruct<"PolledCount", {}>;
 export declare const StartedThreeFetches: import("../../schema/index.js").CallableTaggedStruct<"StartedThreeFetches", {}>;
 export declare const StartedTwoFetchesById: import("../../schema/index.js").CallableTaggedStruct<"StartedTwoFetchesById", {}>;
 export declare const StartedMixedFetches: import("../../schema/index.js").CallableTaggedStruct<"StartedMixedFetches", {}>;
@@ -23,7 +25,7 @@ export declare const FailedFetchCount: import("../../schema/index.js").CallableT
 }>;
 export declare const Message: S.Union<readonly [import("../../schema/index.js").CallableTaggedStruct<"ClickedIncrement", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedDecrement", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedFetch", {}>, import("../../schema/index.js").CallableTaggedStruct<"ClickedFetchById", {
     id: S.Number;
-}>, import("../../schema/index.js").CallableTaggedStruct<"StartedThreeFetches", {}>, import("../../schema/index.js").CallableTaggedStruct<"StartedTwoFetchesById", {}>, import("../../schema/index.js").CallableTaggedStruct<"StartedMixedFetches", {}>, import("../../schema/index.js").CallableTaggedStruct<"SucceededFetchCount", {
+}>, import("../../schema/index.js").CallableTaggedStruct<"Ticked", {}>, import("../../schema/index.js").CallableTaggedStruct<"PolledCount", {}>, import("../../schema/index.js").CallableTaggedStruct<"StartedThreeFetches", {}>, import("../../schema/index.js").CallableTaggedStruct<"StartedTwoFetchesById", {}>, import("../../schema/index.js").CallableTaggedStruct<"StartedMixedFetches", {}>, import("../../schema/index.js").CallableTaggedStruct<"SucceededFetchCount", {
     count: S.Number;
 }>, import("../../schema/index.js").CallableTaggedStruct<"FailedFetchCount", {
     error: S.String;
@@ -41,5 +43,5 @@ export declare const FetchCountById: Command.CommandDefinitionWithArgs<"FetchCou
 }, never, never>>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=counter.d.ts.map

package/dist/test/apps/counter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../../src/test/apps/counter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,gBAAgB;;EAA0C,CAAA;AACvE,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,qBAAqB,mFAA6B,CAAA;AAC/D,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,mBAAmB;;EAAgD,CAAA;AAChF,eAAO,MAAM,gBAAgB;;EAA6C,CAAA;AAE1E,eAAO,MAAM,OAAO;;;;;;IAUlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,UAAU;;;iBAIgC,CAAA;AAEvD,eAAO,MAAM,cAAc;;;;;iBAKyC,CAAA;AAIpE,eAAO,MAAM,YAAY,EAAE,KAA6B,CAAA;AAIxD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAiCxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAiBnC,CAAA"}
+{"version":3,"file":"counter.d.ts","sourceRoot":"","sources":["../../../src/test/apps/counter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAsB,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEvE,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAM5D,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,gBAAgB;;EAA0C,CAAA;AACvE,eAAO,MAAM,MAAM,oEAAc,CAAA;AACjC,eAAO,MAAM,WAAW,yEAAmB,CAAA;AAC3C,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,qBAAqB,mFAA6B,CAAA;AAC/D,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,mBAAmB;;EAAgD,CAAA;AAChF,eAAO,MAAM,gBAAgB;;EAA6C,CAAA;AAE1E,eAAO,MAAM,OAAO;;;;;;IAYlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,UAAU;;;iBAIgC,CAAA;AAEvD,eAAO,MAAM,cAAc;;;;;iBAKyC,CAAA;AAIpE,eAAO,MAAM,YAAY,EAAE,KAA6B,CAAA;AAIxD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAmCxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAe5D,CAAA"}

package/dist/test/apps/counter.js

@@ -1,7 +1,7 @@
-import { Effect, Match as M, Schema as S } from 'effect';
+import { Array, Effect, Match as M, Number, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
+import { evo } from '../../struct/index.js';
 // MODEL
 export const Model = S.Struct({
     count: S.Number,
@@ -12,6 +12,8 @@ export const ClickedIncrement = m('ClickedIncrement');
 export const ClickedDecrement = m('ClickedDecrement');
 export const ClickedFetch = m('ClickedFetch');
 export const ClickedFetchById = m('ClickedFetchById', { id: S.Number });
+export const Ticked = m('Ticked');
+export const PolledCount = m('PolledCount');
 export const StartedThreeFetches = m('StartedThreeFetches');
 export const StartedTwoFetchesById = m('StartedTwoFetchesById');
 export const StartedMixedFetches = m('StartedMixedFetches');
@@ -22,6 +24,8 @@ export const Message = S.Union([
     ClickedDecrement,
     ClickedFetch,
     ClickedFetchById,
+    Ticked,
+    PolledCount,
     StartedThreeFetches,
     StartedTwoFetchesById,
     StartedMixedFetches,
@@ -35,10 +39,12 @@ export const FetchCountById = Command.define('FetchCountById', { id: S.Number },
 export const initialModel = { count: 0, log: [] };
 // UPDATE
 export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
-    ClickedIncrement: () => [{ ...model, count: model.count + 1 }, []],
-    ClickedDecrement: () => [{ ...model, count: model.count - 1 }, []],
+    ClickedIncrement: () => [evo(model, { count: Number.increment }), []],
+    ClickedDecrement: () => [evo(model, { count: Number.decrement }), []],
     ClickedFetch: () => [model, [FetchCount()]],
     ClickedFetchById: ({ id }) => [model, [FetchCountById({ id })]],
+    Ticked: () => [evo(model, { count: Number.increment }), []],
+    PolledCount: () => [model, [FetchCount()]],
     StartedThreeFetches: () => [
         model,
         [FetchCount(), FetchCount(), FetchCount()],
@@ -57,14 +63,13 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
         ],
     ],
     SucceededFetchCount: ({ count }) => [
-        { count, log: [...model.log, count] },
+        evo(model, { count: () => count, log: Array.append(count) }),
         [],
     ],
     FailedFetchCount: () => [model, []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.span([h.Role('status')], [`count: ${model.count}`]),
         h.button([h.OnClick(StartedThreeFetches()), h.Role('button')], ['Start three fetches']),

package/dist/test/apps/crashOnRender.d.ts

@@ -1,6 +1,6 @@
 import { Effect, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { type Document } from '../../html/index.js';
+import type { Document, HtmlBuilder } from '../../html/index.js';
 export declare const RawSource: S.Struct<{
     readonly kind: S.Literal<"Book">;
     readonly id: S.String;
@@ -60,5 +60,5 @@ export declare const validSources: ReadonlyArray<RawSource>;
 export declare const malformedSources: ReadonlyArray<RawSource>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-export declare const view: (model: Model) => Document;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Document;
 //# sourceMappingURL=crashOnRender.d.ts.map

package/dist/test/apps/crashOnRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"crashOnRender.d.ts","sourceRoot":"","sources":["../../../src/test/apps/crashOnRender.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAE/D,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,KAAK,QAAQ,EAAQ,MAAM,qBAAqB,CAAA;AAMzD,eAAO,MAAM,SAAS;;;EAGpB,CAAA;AACF,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,IAAI,CAAA;AAK7C,eAAO,MAAM,MAAM;;;EAGjB,CAAA;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AAEvC,eAAO,MAAM,KAAK;;;;;EAEhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,aAAa;;;;;EAAsD,CAAA;AAChF,eAAO,MAAM,cAAc;;;;;EAA0C,CAAA;AACrE,eAAO,MAAM,oBAAoB;;EAA8C,CAAA;AAE/E,eAAO,MAAM,OAAO;;;;;;;;;;;;IAKlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAMzC,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,SAAS,CAGpD,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;iBAGoC,CAAA;AAI9D,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,SAAS,CAEjD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,SAAS,CAErD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAiC,CAAA;AAI5D,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAiBxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,QA8BnC,CAAA"}
+{"version":3,"file":"crashOnRender.d.ts","sourceRoot":"","sources":["../../../src/test/apps/crashOnRender.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAE/D,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAMhE,eAAO,MAAM,SAAS;;;EAGpB,CAAA;AACF,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,IAAI,CAAA;AAK7C,eAAO,MAAM,MAAM;;;EAGjB,CAAA;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AAEvC,eAAO,MAAM,KAAK;;;;;EAEhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,aAAa;;;;;EAAsD,CAAA;AAChF,eAAO,MAAM,cAAc;;;;;EAA0C,CAAA;AACrE,eAAO,MAAM,oBAAoB;;EAA8C,CAAA;AAE/E,eAAO,MAAM,OAAO;;;;;;;;;;;;IAKlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAMzC,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,SAAS,CAGpD,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;iBAGoC,CAAA;AAI9D,eAAO,MAAM,YAAY,EAAE,aAAa,CAAC,SAAS,CAEjD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,SAAS,CAErD,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAiC,CAAA;AAI5D,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAiBxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,QA4B5D,CAAA"}

package/dist/test/apps/crashOnRender.js

@@ -1,6 +1,5 @@
 import { Array, Effect, Match as M, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import { evo } from '../../struct/index.js';
 // MODEL
@@ -59,8 +58,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     },
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     const body = h.div([], [
         h.button([h.OnClick(ClickedReload()), h.Role('button')], ['Reload']),
         h.button([h.OnClick(SubmittedNewSourceId({ id: '' })), h.Role('button')], ['Add source']),

package/dist/test/apps/drafts.d.ts

@@ -1,7 +1,7 @@
 import { Effect, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
 import * as Interruptible from '../../command/interruptible/index.js';
-import { type Document } from '../../html/index.js';
+import type { Document, HtmlBuilder } from '../../html/index.js';
 export declare const SaveStatus: S.Literals<readonly ["Editing", "Saving", "Saved"]>;
 export type SaveStatus = typeof SaveStatus.Type;
 export declare const Model: S.Struct<{
@@ -29,5 +29,5 @@ export declare const SaveDraft: Interruptible.DefinitionWithArgsNameKeyed<"SaveD
 }, never, never>>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-export declare const view: (model: Model) => Document;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Document;
 //# sourceMappingURL=drafts.d.ts.map

package/dist/test/apps/drafts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drafts.d.ts","sourceRoot":"","sources":["../../../src/test/apps/drafts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,aAAa,MAAM,sCAAsC,CAAA;AACrE,OAAO,EAAE,KAAK,QAAQ,EAAQ,MAAM,qBAAqB,CAAA;AAMzD,eAAO,MAAM,UAAU,qDAA6C,CAAA;AACpE,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAE/C,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,kBAAkB;;EAE7B,CAAA;AAEF,eAAO,MAAM,OAAO;;IAAkD,CAAA;AACtE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,aAAa;;EAAmC,CAAA;AAC7D,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC,IAAI,CAAA;AAErD,eAAO,MAAM,SAAS;;;;;iBAIwD,CAAA;AAI9E,eAAO,MAAM,YAAY,EAAE,KAA0C,CAAA;AAIrE,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAYxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,QAYnC,CAAA"}
+{"version":3,"file":"drafts.d.ts","sourceRoot":"","sources":["../../../src/test/apps/drafts.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,aAAa,MAAM,sCAAsC,CAAA;AACrE,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAMhE,eAAO,MAAM,UAAU,qDAA6C,CAAA;AACpE,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAE/C,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,gBAAgB,8EAAwB,CAAA;AACrD,eAAO,MAAM,kBAAkB;;EAE7B,CAAA;AAEF,eAAO,MAAM,OAAO;;IAAkD,CAAA;AACtE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,aAAa;;EAAmC,CAAA;AAC7D,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC,IAAI,CAAA;AAErD,eAAO,MAAM,SAAS;;;;;iBAIwD,CAAA;AAI9E,eAAO,MAAM,YAAY,EAAE,KAA0C,CAAA;AAIrE,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAYxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,QAU5D,CAAA"}

package/dist/test/apps/drafts.js

@@ -1,6 +1,5 @@
 import { Effect, Match as M, Schema as S } from 'effect';
 import * as Interruptible from '../../command/interruptible/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 import { evo } from '../../struct/index.js';
 // MODEL
@@ -29,8 +28,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     SucceededSaveDraft: () => [evo(model, { status: () => 'Saved' }), []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     const body = h.div([], [
         h.button([h.OnClick(ClickedSaveDraft())], ['Save draft']),
         h.span([], [`draft: ${model.status}`]),

package/dist/test/apps/feedSocket.d.ts

@@ -0,0 +1,74 @@
+import { Option, Schema as S } from 'effect';
+import type { Html, HtmlBuilder } from '../../html/index.js';
+import * as ManagedResource from '../../managedResource/index.js';
+export declare const Model: S.Struct<{
+    readonly isFeedOpen: S.Boolean;
+    readonly status: S.Literals<readonly ["Disconnected", "Connected", "Failed"]>;
+}>;
+export type Model = typeof Model.Type;
+export declare const ClickedToggleFeed: import("../../schema/index.js").CallableTaggedStruct<"ClickedToggleFeed", {}>;
+export declare const AcquiredFeedSocket: import("../../schema/index.js").CallableTaggedStruct<"AcquiredFeedSocket", {
+    socketId: S.String;
+}>;
+export declare const ReleasedFeedSocket: import("../../schema/index.js").CallableTaggedStruct<"ReleasedFeedSocket", {}>;
+export declare const FailedAcquireFeedSocket: import("../../schema/index.js").CallableTaggedStruct<"FailedAcquireFeedSocket", {
+    error: S.String;
+}>;
+export declare const Message: S.Union<readonly [import("../../schema/index.js").CallableTaggedStruct<"ClickedToggleFeed", {}>, import("../../schema/index.js").CallableTaggedStruct<"AcquiredFeedSocket", {
+    socketId: S.String;
+}>, import("../../schema/index.js").CallableTaggedStruct<"ReleasedFeedSocket", {}>, import("../../schema/index.js").CallableTaggedStruct<"FailedAcquireFeedSocket", {
+    error: S.String;
+}>]>;
+export type Message = typeof Message.Type;
+export type FeedSocket = Readonly<{
+    socketId: string;
+}>;
+export declare const feedResources: {
+    feedSocket: ManagedResource.Entry<{
+        readonly isFeedOpen: boolean;
+        readonly status: "Disconnected" | "Connected" | "Failed";
+    }, {
+        readonly _tag: "ClickedToggleFeed";
+    } | {
+        readonly _tag: "AcquiredFeedSocket";
+        readonly socketId: string;
+    } | {
+        readonly _tag: "ReleasedFeedSocket";
+    } | {
+        readonly _tag: "FailedAcquireFeedSocket";
+        readonly error: string;
+    }, Option.Option<{
+        readonly channel: string;
+    }>, Readonly<{
+        socketId: string;
+    }>, ManagedResource.ManagedResourceService<"FeedSocket">, (socket: Readonly<{
+        socketId: string;
+    }>) => {
+        readonly _tag: "AcquiredFeedSocket";
+        readonly socketId: string;
+    }>;
+    presence: ManagedResource.Entry<{
+        readonly isFeedOpen: boolean;
+        readonly status: "Disconnected" | "Connected" | "Failed";
+    }, {
+        readonly _tag: "ClickedToggleFeed";
+    } | {
+        readonly _tag: "AcquiredFeedSocket";
+        readonly socketId: string;
+    } | {
+        readonly _tag: "ReleasedFeedSocket";
+    } | {
+        readonly _tag: "FailedAcquireFeedSocket";
+        readonly error: string;
+    }, Option.Option<null>, string, ManagedResource.ManagedResourceService<"Presence">, () => {
+        readonly _tag: "AcquiredFeedSocket";
+        readonly socketId: string;
+    }>;
+};
+export declare const initialModel: {
+    readonly isFeedOpen: boolean;
+    readonly status: "Disconnected" | "Connected" | "Failed";
+};
+export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
+//# sourceMappingURL=feedSocket.d.ts.map

package/dist/test/apps/feedSocket.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedSocket.d.ts","sourceRoot":"","sources":["../../../src/test/apps/feedSocket.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+B,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEzE,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAC5D,OAAO,KAAK,eAAe,MAAM,gCAAgC,CAAA;AAMjE,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,iBAAiB,+EAAyB,CAAA;AACvD,eAAO,MAAM,kBAAkB;;EAE7B,CAAA;AACF,eAAO,MAAM,kBAAkB,gFAA0B,CAAA;AACzD,eAAO,MAAM,uBAAuB;;EAElC,CAAA;AAEF,eAAO,MAAM,OAAO;;;;IAKlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAMvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;kBANoB,MAAM;;kBAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;CA2BjD,CAAA;AAIH,eAAO,MAAM,YAAY;;;CAGvB,CAAA;AAIF,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAerC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAU1D,CAAA"}

package/dist/test/apps/feedSocket.js

@@ -0,0 +1,69 @@
+import { Boolean, Effect, Match as M, Option, Schema as S } from 'effect';
+import * as ManagedResource from '../../managedResource/index.js';
+import { m } from '../../message/index.js';
+import { evo } from '../../struct/index.js';
+// MODEL
+export const Model = S.Struct({
+    isFeedOpen: S.Boolean,
+    status: S.Literals(['Disconnected', 'Connected', 'Failed']),
+});
+// MESSAGE
+export const ClickedToggleFeed = m('ClickedToggleFeed');
+export const AcquiredFeedSocket = m('AcquiredFeedSocket', {
+    socketId: S.String,
+});
+export const ReleasedFeedSocket = m('ReleasedFeedSocket');
+export const FailedAcquireFeedSocket = m('FailedAcquireFeedSocket', {
+    error: S.String,
+});
+export const Message = S.Union([
+    ClickedToggleFeed,
+    AcquiredFeedSocket,
+    ReleasedFeedSocket,
+    FailedAcquireFeedSocket,
+]);
+const FeedSocketResource = ManagedResource.tag()('FeedSocket');
+const PresenceResource = ManagedResource.tag()('Presence');
+export const feedResources = ManagedResource.make()(entry => ({
+    feedSocket: entry(S.Option(S.Struct({ channel: S.String })), {
+        resource: FeedSocketResource,
+        modelToMaybeRequirements: model => model.isFeedOpen ? Option.some({ channel: 'general' }) : Option.none(),
+        acquire: () => Effect.succeed({ socketId: 'live' }),
+        release: () => Effect.void,
+        onAcquired: socket => AcquiredFeedSocket({ socketId: socket.socketId }),
+        onReleased: () => ReleasedFeedSocket(),
+        onAcquireError: error => FailedAcquireFeedSocket({ error: String(error) }),
+    }),
+    presence: entry(S.Option(S.Null), {
+        resource: PresenceResource,
+        modelToMaybeRequirements: model => model.isFeedOpen ? Option.some(null) : Option.none(),
+        acquire: () => Effect.succeed('online'),
+        release: () => Effect.void,
+        onAcquired: () => AcquiredFeedSocket({ socketId: 'presence' }),
+        onReleased: () => ReleasedFeedSocket(),
+        onAcquireError: error => FailedAcquireFeedSocket({ error: String(error) }),
+    }),
+}));
+// INIT
+export const initialModel = Model.make({
+    isFeedOpen: false,
+    status: 'Disconnected',
+});
+// UPDATE
+export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
+    ClickedToggleFeed: () => [evo(model, { isFeedOpen: Boolean.not }), []],
+    AcquiredFeedSocket: () => [evo(model, { status: () => 'Connected' }), []],
+    ReleasedFeedSocket: () => [
+        evo(model, { status: () => 'Disconnected' }),
+        [],
+    ],
+    FailedAcquireFeedSocket: () => [
+        evo(model, { status: () => 'Failed' }),
+        [],
+    ],
+}));
+// VIEW
+export const view = (model, h) => h.div([], [
+    h.span([h.Role('status')], [model.status]),
+    h.button([h.OnClick(ClickedToggleFeed()), h.Role('button')], [model.isFeedOpen ? 'Close feed' : 'Open feed']),
+]);

package/dist/test/apps/fileUpload.d.ts

@@ -1,6 +1,6 @@
 import { Schema as S } from 'effect';
 import { File } from '../../file/index.js';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export type Model = Readonly<{
     receivedFiles: ReadonlyArray<File>;
 }>;
@@ -13,5 +13,5 @@ export declare const Message: S.Union<readonly [import("../../schema/index.js").
 }>]>;
 export type Message = typeof Message.Type;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=fileUpload.d.ts.map

package/dist/test/apps/fileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fileUpload.d.ts","sourceRoot":"","sources":["../../../src/test/apps/fileUpload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;CACnC,CAAC,CAAA;AAEF,eAAO,MAAM,YAAY,EAAE,KAA6B,CAAA;AAIxD,eAAO,MAAM,aAAa;;EAA+C,CAAA;AAEzE,eAAO,MAAM,OAAO;;IAA2B,CAAA;AAC/C,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IA8BnC,CAAA"}
+{"version":3,"file":"fileUpload.d.ts","sourceRoot":"","sources":["../../../src/test/apps/fileUpload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,aAAa,CAAC,IAAI,CAAC,CAAA;CACnC,CAAC,CAAA;AAEF,eAAO,MAAM,YAAY,EAAE,KAA6B,CAAA;AAIxD,eAAO,MAAM,aAAa;;EAA+C,CAAA;AAEzE,eAAO,MAAM,OAAO;;IAA2B,CAAA;AAC/C,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IA4B5D,CAAA"}

package/dist/test/apps/fileUpload.js

@@ -1,6 +1,5 @@
 import { Match as M, Schema as S } from 'effect';
 import { File } from '../../file/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 export const initialModel = { receivedFiles: [] };
 // MESSAGE
@@ -11,8 +10,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ReceivedFiles: ({ files }) => [{ ...model, receivedFiles: files }, []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.input([
             h.Key('file-input'),

package/dist/test/apps/interactions.d.ts

@@ -1,5 +1,5 @@
 import { Schema as S } from 'effect';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly clicks: S.Number;
     readonly doubleClicks: S.Number;
@@ -22,5 +22,5 @@ export declare const Message: S.Union<readonly [import("../../schema/index.js").
 export type Message = typeof Message.Type;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=interactions.d.ts.map

package/dist/test/apps/interactions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/test/apps/interactions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,aAAa;;EAA0C,CAAA;AAEpE,eAAO,MAAM,OAAO;;IAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAcrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IA8BnC,CAAA"}
+{"version":3,"file":"interactions.d.ts","sourceRoot":"","sources":["../../../src/test/apps/interactions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AACF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,mBAAmB,iFAA2B,CAAA;AAC3D,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,YAAY,0EAAoB,CAAA;AAC7C,eAAO,MAAM,aAAa;;EAA0C,CAAA;AAEpE,eAAO,MAAM,OAAO;;IAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAcrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IA4B5D,CAAA"}

package/dist/test/apps/interactions.js

@@ -1,5 +1,4 @@
 import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -45,8 +44,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ChangedSelect: ({ value }) => [{ ...model, changed: value }, []],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [
         h.button([
             h.OnClick(ClickedButton()),

package/dist/test/apps/keypress.d.ts

@@ -1,5 +1,5 @@
 import { Schema as S } from 'effect';
-import type { Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly lastKey: S.String;
     readonly isShifted: S.Boolean;
@@ -19,5 +19,5 @@ export declare const Message: S.Union<readonly [import("../../schema/index.js").
 export type Message = typeof Message.Type;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=keypress.d.ts.map

package/dist/test/apps/keypress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keypress.d.ts","sourceRoot":"","sources":["../../../src/test/apps/keypress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAM/C,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,UAAU;;EAAqC,CAAA;AAC5D,eAAO,MAAM,eAAe;;EAA0C,CAAA;AAEtE,eAAO,MAAM,OAAO;;;;IAAyC,CAAA;AAC7D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAarC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAoBnC,CAAA"}
+{"version":3,"file":"keypress.d.ts","sourceRoot":"","sources":["../../../src/test/apps/keypress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,UAAU;;EAAqC,CAAA;AAC5D,eAAO,MAAM,eAAe;;EAA0C,CAAA;AAEtE,eAAO,MAAM,OAAO;;;;IAAyC,CAAA;AAC7D,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAG1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAarC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAkB5D,CAAA"}

package/dist/test/apps/keypress.js

@@ -1,5 +1,4 @@
 import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -27,8 +26,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([
         h.Id('key-app'),
         h.Role('application'),

package/dist/test/apps/login.d.ts

@@ -1,6 +1,6 @@
 import { Effect, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { type Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly email: S.String;
     readonly password: S.String;
@@ -39,5 +39,5 @@ export declare const Authenticate: Command.CommandDefinitionNoArgs<"Authenticate
 }, never, never>>;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<Command.Command<Message>>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=login.d.ts.map

package/dist/test/apps/login.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"login.d.ts","sourceRoot":"","sources":["../../../src/test/apps/login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,KAAK,IAAI,EAAQ,MAAM,qBAAqB,CAAA;AAKrD,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,YAAY;;EAAyC,CAAA;AAClE,eAAO,MAAM,eAAe;;EAA4C,CAAA;AACxE,eAAO,MAAM,cAAc,4EAAsB,CAAA;AACjD,eAAO,MAAM,qBAAqB;;EAEhC,CAAA;AACF,eAAO,MAAM,kBAAkB;;EAA+C,CAAA;AAC9E,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAE/C,eAAO,MAAM,OAAO;;;;;;;;+EAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY;;;iBAIyC,CAAA;AAIlE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAyBxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAgFnC,CAAA"}
+{"version":3,"file":"login.d.ts","sourceRoot":"","sources":["../../../src/test/apps/login.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,OAAO,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;;;;;EAMhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,YAAY;;EAAyC,CAAA;AAClE,eAAO,MAAM,eAAe;;EAA4C,CAAA;AACxE,eAAO,MAAM,cAAc,4EAAsB,CAAA;AACjD,eAAO,MAAM,qBAAqB;;EAEhC,CAAA;AACF,eAAO,MAAM,kBAAkB;;EAA+C,CAAA;AAC9E,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAE/C,eAAO,MAAM,OAAO;;;;;;;;+EAOlB,CAAA;AACF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY;;;iBAIyC,CAAA;AAIlE,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAID,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAyBxD,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IA8E5D,CAAA"}

package/dist/test/apps/login.js

@@ -1,6 +1,5 @@
 import { Effect, Match as M, Schema as S } from 'effect';
 import * as Command from '../../command/index.js';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({
@@ -59,8 +58,7 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     ],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([h.Id('app')], [
         M.value(model.status).pipe(M.withReturnType(), M.when('Submitting', () => h.form([h.Class('login-form'), h.Disabled(true)], [h.button([h.Type('submit'), h.Disabled(true)], ['Signing in...'])])), M.when('LoggedIn', () => h.div([
             h.Class('logged-in'),

package/dist/test/apps/logoutButton.d.ts

@@ -1,5 +1,5 @@
 import { Option, Schema as S } from 'effect';
-import type { Html } from '../../html/index.js';
+import type { Html, HtmlBuilder } from '../../html/index.js';
 export declare const Model: S.Struct<{
     readonly label: S.String;
 }>;
@@ -13,5 +13,5 @@ export declare const OutMessage: S.Union<readonly [import("../../schema/index.js
 export type OutMessage = typeof OutMessage.Type;
 export declare const initialModel: Model;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>, Option.Option<OutMessage>];
-export declare const view: (model: Model) => Html;
+export declare const view: (model: Model, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=logoutButton.d.ts.map

package/dist/test/apps/logoutButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logoutButton.d.ts","sourceRoot":"","sources":["../../../src/test/apps/logoutButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAM/C,eAAO,MAAM,KAAK;;EAAgC,CAAA;AAClD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,OAAO,4KAA4C,CAAA;AAChE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,UAAU,iGAA6B,CAAA;AACpD,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,eAAO,MAAM,YAAY,EAAE,KAA4B,CAAA;AAIvD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAShE,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAOnC,CAAA"}
+{"version":3,"file":"logoutButton.d.ts","sourceRoot":"","sources":["../../../src/test/apps/logoutButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAExD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AAK5D,eAAO,MAAM,KAAK;;EAAgC,CAAA;AAClD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,aAAa,2EAAqB,CAAA;AAC/C,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,OAAO,4KAA4C,CAAA;AAChE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,eAAe,6EAAuB,CAAA;AAEnD,eAAO,MAAM,UAAU,iGAA6B,CAAA;AACpD,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAA;AAI/C,eAAO,MAAM,YAAY,EAAE,KAA4B,CAAA;AAIvD,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAShE,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC,KAAG,IAK5D,CAAA"}

package/dist/test/apps/logoutButton.js

@@ -1,5 +1,4 @@
 import { Match as M, Option, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
 import { m } from '../../message/index.js';
 // MODEL
 export const Model = S.Struct({ label: S.String });
@@ -18,7 +17,6 @@ export const update = (model, message) => M.value(message).pipe(M.withReturnType
     CompletedAction: () => [model, [], Option.none()],
 }));
 // VIEW
-export const view = (model) => {
-    const h = html();
+export const view = (model, h) => {
     return h.div([], [h.button([h.OnClick(ClickedLogout()), h.Role('button')], [model.label])]);
 };