foldkit 0.1.0-canary.10

package/README.md

@@ -0,0 +1,91 @@
+# Foldkit
+
+> ⚠️ **Experimental**: Foldkit is in canary release for early adopters and experimenters. APIs are incomplete and may change rapidly.
+
+**Foldkit** is an [Elm](https://elm-lang.org/)-inspired UI framework powered by [Effect](https://effect.website/).
+
+> Like origami: simple parts become intricate when folded together.
+
+## Installation
+
+```bash
+npm install foldkit effect
+```
+
+## Counter Example
+
+```typescript
+import { Effect, Schema } from 'effect'
+import { Fold, Runtime } from 'foldkit'
+import { Class, Html, OnClick, button, div } from 'foldkit/html'
+import { ST, ts } from 'foldkit/schema'
+
+// MODEL
+
+const Model = Schema.Number
+type Model = ST<typeof Model>
+
+// MESSAGE
+
+const Decrement = ts('Decrement')
+const Increment = ts('Increment')
+const Reset = ts('Reset')
+
+const Message = Schema.Union(Decrement, Increment, Reset)
+
+type Decrement = ST<typeof Decrement>
+type Increment = ST<typeof Increment>
+type Reset = ST<typeof Reset>
+
+type Message = ST<typeof Message>
+
+// UPDATE
+
+const update = Fold.fold<Model, Message>({
+  Decrement: (count) => [count - 1, []],
+  Increment: (count) => [count + 1, []],
+  Reset: () => [0, []],
+})
+
+// INIT
+
+const init: Runtime.ElementInit<Model, Message> = () => [0, []]
+
+// VIEW
+
+const view = (count: Model): Html =>
+  div(
+    [Class('min-h-screen bg-white flex flex-col items-center justify-center gap-6 p-6')],
+    [
+      div([Class('text-6xl font-bold text-gray-800')], [count.toString()]),
+      div(
+        [Class('flex flex-wrap justify-center gap-4')],
+        [
+          button([OnClick(Decrement.make()), Class(buttonStyle)], ['-']),
+          button([OnClick(Reset.make()), Class(buttonStyle)], ['Reset']),
+          button([OnClick(Increment.make()), Class(buttonStyle)], ['+']),
+        ],
+      ),
+    ],
+  )
+
+// STYLE
+
+const buttonStyle = 'bg-black text-white hover:bg-gray-700 px-4 py-2 transition'
+
+// RUN
+
+const element = Runtime.makeElement({
+  Model,
+  init,
+  update,
+  view,
+  container: document.getElementById('root')!,
+})
+
+Runtime.run(element)
+```
+
+---
+
+**📚 Full documentation and examples**: https://github.com/devinjameson/foldkit

package/dist/core/fieldValidation.d.ts

@@ -0,0 +1,62 @@
+import { Predicate, Schema as S } from 'effect';
+export declare const FieldSchema: <A, I = A, R = never>(valueSchema: S.Schema<A, I, R>) => S.Union<[S.TaggedStruct<"NotValidated", {
+    value: S.Schema<A, I, R>;
+}>, S.TaggedStruct<"Validating", {
+    value: S.Schema<A, I, R>;
+}>, S.TaggedStruct<"Valid", {
+    value: S.Schema<A, I, R>;
+}>, S.TaggedStruct<"Invalid", {
+    value: S.Schema<A, I, R>;
+    error: typeof S.String;
+}>]>;
+export declare const Field: {
+    NotValidated: <T>(args: {
+        value: T;
+    }) => Field<T>;
+    Validating: <T>(args: {
+        value: T;
+    }) => Field<T>;
+    Valid: <T>(args: {
+        value: T;
+    }) => Field<T>;
+    Invalid: <T>(args: {
+        value: T;
+        error: string;
+    }) => Field<T>;
+    $is: (tag: "NotValidated" | "Validating" | "Valid" | "Invalid") => <T>(field: Field<T>) => boolean;
+    $match: <T, R>(field: Field<T>, matchers: {
+        NotValidated: (args: {
+            value: T;
+        }) => R;
+        Validating: (args: {
+            value: T;
+        }) => R;
+        Valid: (args: {
+            value: T;
+        }) => R;
+        Invalid: (args: {
+            value: T;
+            error: string;
+        }) => R;
+    }) => R;
+};
+export type Field<T> = {
+    readonly _tag: 'NotValidated';
+    readonly value: T;
+} | {
+    readonly _tag: 'Validating';
+    readonly value: T;
+} | {
+    readonly _tag: 'Valid';
+    readonly value: T;
+} | {
+    readonly _tag: 'Invalid';
+    readonly value: T;
+    readonly error: string;
+};
+export type Validation<T> = [Predicate.Predicate<T>, string];
+export declare const required: (fieldName: string) => Validation<string>;
+export declare const minLength: (min: number, message: (min: number) => string) => Validation<string>;
+export declare const regex: (regex: RegExp, message: string) => Validation<string>;
+export declare const validateField: <T>(fieldValidations: Validation<T>[]) => (value: T) => Field<T>;
+//# sourceMappingURL=fieldValidation.d.ts.map

package/dist/core/fieldValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldValidation.d.ts","sourceRoot":"","sources":["../../src/core/fieldValidation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,IAAI,CAAC,EAAgB,MAAM,QAAQ,CAAA;AAE7E,eAAO,MAAM,WAAW,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;;;;;;;;;IAO9E,CAAA;AAED,eAAO,MAAM,KAAK;mBACD,CAAC,QAAQ;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAG,KAAK,CAAC,CAAC,CAAC;iBAClC,CAAC,QAAQ;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAG,KAAK,CAAC,CAAC,CAAC;YACrC,CAAC,QAAQ;QAAE,KAAK,EAAE,CAAC,CAAA;KAAE,KAAG,KAAK,CAAC,CAAC,CAAC;cAC9B,CAAC,QAAQ;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAG,KAAK,CAAC,CAAC,CAAC;eAKjD,cAAc,GAAG,YAAY,GAAG,OAAO,GAAG,SAAS,MACxD,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,CAAC,KAAG,OAAO;aAEtB,CAAC,EAAE,CAAC,SACJ,KAAK,CAAC,CAAC,CAAC,YACL;QACR,YAAY,EAAE,CAAC,IAAI,EAAE;YAAE,KAAK,EAAE,CAAC,CAAA;SAAE,KAAK,CAAC,CAAA;QACvC,UAAU,EAAE,CAAC,IAAI,EAAE;YAAE,KAAK,EAAE,CAAC,CAAA;SAAE,KAAK,CAAC,CAAA;QACrC,KAAK,EAAE,CAAC,IAAI,EAAE;YAAE,KAAK,EAAE,CAAC,CAAA;SAAE,KAAK,CAAC,CAAA;QAChC,OAAO,EAAE,CAAC,IAAI,EAAE;YAAE,KAAK,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,KAAK,CAAC,CAAA;KAClD,KACA,CAAC;CAaL,CAAA;AAED,MAAM,MAAM,KAAK,CAAC,CAAC,IACf;IAAE,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;CAAE,GACpD;IAAE,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;CAAE,GAClD;IAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAA;CAAE,GAC7C;IAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAE3E,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAA;AAE5D,eAAO,MAAM,QAAQ,GAAI,WAAW,MAAM,KAAG,UAAU,CAAC,MAAM,CAG7D,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,KAAK,MAAM,EAAE,SAAS,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,KAAG,UAAU,CAAC,MAAM,CAG1F,CAAA;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,SAAS,MAAM,KAAG,UAAU,CAAC,MAAM,CAGvE,CAAA;AAED,eAAO,MAAM,aAAa,GACvB,CAAC,EAAE,kBAAkB,UAAU,CAAC,CAAC,CAAC,EAAE,MACpC,OAAO,CAAC,KAAG,KAAK,CAAC,CAAC,CAelB,CAAA"}

package/dist/core/fieldValidation.js

@@ -0,0 +1,54 @@
+import { Number, Option, Schema as S, String, flow } from 'effect';
+export const FieldSchema = (valueSchema) => {
+    return S.Union(S.TaggedStruct('NotValidated', { value: valueSchema }), S.TaggedStruct('Validating', { value: valueSchema }), S.TaggedStruct('Valid', { value: valueSchema }), S.TaggedStruct('Invalid', { value: valueSchema, error: S.String }));
+};
+export const Field = {
+    NotValidated: (args) => ({ _tag: 'NotValidated', ...args }),
+    Validating: (args) => ({ _tag: 'Validating', ...args }),
+    Valid: (args) => ({ _tag: 'Valid', ...args }),
+    Invalid: (args) => ({
+        _tag: 'Invalid',
+        ...args,
+    }),
+    $is: (tag) => (field) => field._tag === tag,
+    $match: (field, matchers) => {
+        // TODO: Use Match here (ran into Unify<R> vs. R issues)
+        switch (field._tag) {
+            case 'NotValidated':
+                return matchers.NotValidated({ value: field.value });
+            case 'Validating':
+                return matchers.Validating({ value: field.value });
+            case 'Valid':
+                return matchers.Valid({ value: field.value });
+            case 'Invalid':
+                return matchers.Invalid({ value: field.value, error: field.error });
+        }
+    },
+};
+export const required = (fieldName) => [
+    String.isNonEmpty,
+    `${fieldName} is required`,
+];
+export const minLength = (min, message) => [
+    flow(String.length, Number.greaterThanOrEqualTo(min)),
+    message(min),
+];
+export const regex = (regex, message) => [
+    flow(String.match(regex), Option.isSome),
+    message,
+];
+export const validateField = (fieldValidations) => (value) => {
+    for (const [predicate, message] of fieldValidations) {
+        if (!predicate(value)) {
+            return {
+                _tag: 'Invalid',
+                value,
+                error: message,
+            };
+        }
+    }
+    return {
+        _tag: 'Valid',
+        value,
+    };
+};

package/dist/core/fold.d.ts

@@ -0,0 +1,12 @@
+import { ExtractTag, Tags } from 'effect/Types';
+import { Command } from './runtime';
+type Update<Model, Message> = [Model, Command<Message>[]];
+export type Init<Model, Message> = () => Update<Model, Message>;
+export type FoldReturn<Model, Message> = (model: Model, message: Message) => [Model, Command<Message>[]];
+export declare function fold<Model, Message extends {
+    readonly _tag: string;
+}>(handlers: {
+    [K in Tags<Message>]: (model: Model, message: ExtractTag<Message, K>) => [Model, Command<Message>[]];
+}): FoldReturn<Model, Message>;
+export {};
+//# sourceMappingURL=fold.d.ts.map

package/dist/core/fold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fold.d.ts","sourceRoot":"","sources":["../../src/core/fold.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAEnC,KAAK,MAAM,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;AACzD,MAAM,MAAM,IAAI,CAAC,KAAK,EAAE,OAAO,IAAI,MAAM,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;AAE/D,MAAM,MAAM,UAAU,CAAC,KAAK,EAAE,OAAO,IAAI,CACvC,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,KACb,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;AAEhC,wBAAgB,IAAI,CAAC,KAAK,EAAE,OAAO,SAAS;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,QAAQ,EAAE;KAC9E,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,KAC5B,CAAC,KAAK,EAAE,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;CACjC,GAAG,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAW7B"}

package/dist/core/fold.js

@@ -0,0 +1,9 @@
+export function fold(handlers) {
+    return (model, message) => {
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        const tag = message._tag;
+        return handlers[tag](model, 
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        message);
+    };
+}

package/dist/core/html.d.ts

@@ -0,0 +1,366 @@
+import { Data, Effect } from 'effect';
+import { Dispatch } from './runtime';
+import { VNode } from './vdom';
+export type Html = Effect.Effect<VNode | null, never, Dispatch>;
+export type Child = Html | string;
+export type Attribute<Message> = Data.TaggedEnum<{
+    Class: {
+        readonly value: string;
+    };
+    Id: {
+        readonly value: string;
+    };
+    OnClick: {
+        readonly message: Message;
+    };
+    OnChange: {
+        readonly f: (value: string) => Message;
+    };
+    OnSubmit: {
+        readonly message: Message;
+    };
+    Value: {
+        readonly value: string;
+    };
+    Placeholder: {
+        readonly value: string;
+    };
+    Disabled: {
+        readonly value: boolean;
+    };
+    Type: {
+        readonly value: string;
+    };
+    Min: {
+        readonly value: string;
+    };
+    For: {
+        readonly value: string;
+    };
+    Href: {
+        readonly value: string;
+    };
+}>;
+export declare const Class_: <A>(args: {
+    readonly value: string;
+}) => {
+    readonly _tag: "Class";
+    readonly value: string;
+}, Id_: <A>(args: {
+    readonly value: string;
+}) => {
+    readonly _tag: "Id";
+    readonly value: string;
+}, OnClick_: <A>(args: {
+    readonly message: A;
+}) => {
+    readonly _tag: "OnClick";
+    readonly message: A;
+}, OnChange_: <A>(args: {
+    readonly f: (value: string) => A;
+}) => {
+    readonly _tag: "OnChange";
+    readonly f: (value: string) => A;
+}, OnSubmit_: <A>(args: {
+    readonly message: A;
+}) => {
+    readonly _tag: "OnSubmit";
+    readonly message: A;
+}, Value_: <A>(args: {
+    readonly value: string;
+}) => {
+    readonly _tag: "Value";
+    readonly value: string;
+}, Placeholder_: <A>(args: {
+    readonly value: string;
+}) => {
+    readonly _tag: "Placeholder";
+    readonly value: string;
+}, Disabled_: <A>(args: {
+    readonly value: boolean;
+}) => {
+    readonly _tag: "Disabled";
+    readonly value: boolean;
+}, Type_: <A>(args: {
+    readonly value: string;
+}) => {
+    readonly _tag: "Type";
+    readonly value: string;
+}, Min_: <A>(args: {
+    readonly value: string;
+}) => {
+    readonly _tag: "Min";
+    readonly value: string;
+}, For_: <A>(args: {
+    readonly value: string;
+}) => {
+    readonly _tag: "For";
+    readonly value: string;
+}, Href_: <A>(args: {
+    readonly value: string;
+}) => {
+    readonly _tag: "Href";
+    readonly value: string;
+};
+export declare const Class: (value: string) => {
+    readonly _tag: "Class";
+    readonly value: string;
+};
+export declare const OnClick: <Message>(message: Message) => {
+    readonly _tag: "OnClick";
+    readonly message: Message;
+};
+export declare const Id: (value: string) => {
+    readonly _tag: "Id";
+    readonly value: string;
+};
+export declare const OnChange: <Message>(f: (value: string) => Message) => {
+    readonly _tag: "OnChange";
+    readonly f: (value: string) => Message;
+};
+export declare const OnSubmit: <Message>(message: Message) => {
+    readonly _tag: "OnSubmit";
+    readonly message: Message;
+};
+export declare const Value: (value: string) => {
+    readonly _tag: "Value";
+    readonly value: string;
+};
+export declare const Placeholder: (value: string) => {
+    readonly _tag: "Placeholder";
+    readonly value: string;
+};
+export declare const Type: (value: string) => {
+    readonly _tag: "Type";
+    readonly value: string;
+};
+export declare const Min: (value: string) => {
+    readonly _tag: "Min";
+    readonly value: string;
+};
+export declare const For: (value: string) => {
+    readonly _tag: "For";
+    readonly value: string;
+};
+export declare const Href: (value: string) => {
+    readonly _tag: "Href";
+    readonly value: string;
+};
+export declare const Disabled: (value: boolean) => {
+    readonly _tag: "Disabled";
+    readonly value: boolean;
+};
+export declare const createElement: <Message>(tagName: string, attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const a: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const abbr: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const address: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const area: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const article: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const aside: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const audio: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const b: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const base: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const bdi: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const bdo: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const blockquote: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const body: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const br: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const button: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const canvas: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const caption: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const cite: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const code: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const col: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const colgroup: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const data: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const datalist: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const dd: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const del: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const details: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const dfn: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const dialog: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const div: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const dl: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const dt: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const em: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const embed: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const fieldset: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const figcaption: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const figure: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const footer: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const form: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const h1: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const h2: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const h3: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const h4: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const h5: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const h6: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const head: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const header: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const hgroup: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const hr: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const html: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const i: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const iframe: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const img: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const input: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const ins: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const kbd: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const label: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const legend: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const li: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const link: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const main: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const map: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mark: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const menu: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const meta: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const meter: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const nav: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const noscript: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const object: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const ol: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const optgroup: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const option: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const output: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const p: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const picture: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const portal: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const pre: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const progress: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const q: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const rp: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const rt: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const ruby: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const s: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const samp: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const script: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const search: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const section: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const select: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const slot: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const small: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const source: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const span: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const strong: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const style: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const sub: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const summary: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const sup: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const table: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const tbody: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const td: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const template: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const textarea: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const tfoot: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const th: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const thead: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const time: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const title: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const tr: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const track: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const u: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const ul: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const var_: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const video: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const wbr: <Message>(attributes?: ReadonlyArray<Attribute<Message>>) => Html;
+export declare const animate: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const animateMotion: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const animateTransform: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const circle: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const clipPath: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const defs: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const desc: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const ellipse: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feBlend: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feColorMatrix: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feComponentTransfer: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feComposite: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feConvolveMatrix: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feDiffuseLighting: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feDisplacementMap: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feDistantLight: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feDropShadow: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feFlood: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feFuncA: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feFuncB: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feFuncG: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feFuncR: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feGaussianBlur: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feImage: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feMerge: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feMergeNode: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feMorphology: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feOffset: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const fePointLight: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feSpecularLighting: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feSpotLight: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feTile: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const feTurbulence: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const filter: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const foreignObject: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const g: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const image: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const line: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const linearGradient: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const marker: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mask: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const metadata: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mpath: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const path: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const pattern: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const polygon: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const polyline: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const radialGradient: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const rect: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const stop: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const svg: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const switch_: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const symbol: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const text: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const textPath: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const tspan: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const use: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const view: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const annotation: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const annotationXml: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const math: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const maction: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const menclose: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const merror: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mfenced: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mfrac: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mglyph: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mi: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mlabeledtr: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mlongdiv: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mmultiscripts: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mn: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mo: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mover: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mpadded: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mphantom: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mroot: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mrow: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const ms: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mscarries: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mscarry: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const msgroup: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const msline: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mspace: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const msqrt: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const msrow: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mstack: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mstyle: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const msub: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const msubsup: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const msup: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mtable: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mtd: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mtext: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const mtr: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const munder: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const munderover: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const semantics: <Message>(attributes?: ReadonlyArray<Attribute<Message>>, children?: ReadonlyArray<Child>) => Html;
+export declare const empty: Html;
+//# sourceMappingURL=html.d.ts.map