TypeScript definitions for 2.0.8

docs/reference.md

@@ -24,7 +24,7 @@ Below is a consice recap of Hyperapp's core APIs and packages. It's geared towar
 ## h()
 
 ```js
-h(type, props, ...children)
+h(type, props, children)
 ```
 
 Hyperscript function to create virtual DOM nodes (VNodes), which are used for [rendering](#rendering).
@@ -33,7 +33,7 @@ A VNode is a simplified representation of an HTML element. It represents an elem
 
 - **type** - Name of the node, eg: div, h1, button, etc.
 - **props** - Object containing HTML or SVG attributes the DOM node will have and [special props](#special-props).
-- **children** - Array of child VNodes.
+- **children** - Array of child VNodes (optional).
 
 ```js
 import { h, text } from "hyperapp"
@@ -322,7 +322,7 @@ const httpFx = (dispatch, props) => {
   // Do side effects
   fetch(props.url, props.options)
     .then((res) => res.json())
-    .then((data) => dispatch(data)) // Optionnally dispatch an action
+    .then((data) => dispatch(props.action, data)) // Optionally dispatch an action
 }
 
 // Helper to easily create the effect tuple for the Http effect

docs/tutorial.md

@@ -1,6 +1,6 @@
 # Tutorial
 
-Welcome! If you're new to Hyperapp, you've found the perfect place to start learning. This tutorial will guide you through your first steps with Hyperapp as we build a simple app. 
+Welcome! If you're new to Hyperapp, you've found the perfect place to start learning. This tutorial will guide you through your first steps with Hyperapp as we build a simple app.
 
 - [The Set-up](#setup)
 - [Hello World](#helloworld)
@@ -101,7 +101,7 @@ Create this html file:
       href="https://hyperapp.dev/tutorial-assets/style.css"
     />
     <script type="module">
-      import { h, app } from "https://unpkg.com/hyperapp"
+      import { h, text, app } from "https://unpkg.com/hyperapp"
 
       // -- EFFECTS & SUBSCRIPTIONS --
 
@@ -111,8 +111,9 @@ Create this html file:
 
       // -- RUN --
       app({
+        init: {},
         node: document.getElementById("app"),
-        view: () => h("h1", {}, ["Hello ", h("i", {}, "World!")]),
+        view: () => h("h1", {}, [text("Hello "), h("i", {}, text("World!"))]),
       })
     </script>
   </head>
@@ -141,7 +142,7 @@ which _represent_ DOM nodes.
 The result of
 
 ```js
-h("h1", {}, ["Hello ", h("i", {}, "World!")])
+h("h1", {}, [text("Hello "), h("i", {}, text("World!"))])
 ```
 
 is a virtual node, representing
@@ -167,51 +168,51 @@ To render the HTML we want, change the `view` to:
 view: () =>
   h("div", { id: "app", class: "container" }, [
     h("div", { class: "filter" }, [
-      " Filter: ",
-      h("span", { class: "filter-word" }, "ocean"),
-      h("button", {}, "\u270E"),
+      text(" Filter: "),
+      h("span", { class: "filter-word" }, text("ocean")),
+      h("button", {}, text("\u270E")),
     ]),
     h("div", { class: "stories" }, [
       h("ul", {}, [
         h("li", { class: "unread" }, [
           h("p", { class: "title" }, [
-            "The ",
-            h("em", {}, "Ocean"),
-            " is Sinking!",
+            text("The "),
+            h("em", {}, text("Ocean")),
+            text(" is Sinking!"),
           ]),
-          h("p", { class: "author" }, "Kat Stropher"),
+          h("p", { class: "author" }, text("Kat Stropher")),
         ]),
         h("li", { class: "reading" }, [
-          h("p", { class: "title" }, [h("em", {}, "Ocean"), " life is brutal"]),
-          h("p", { class: "author" }, "Surphy McBrah"),
+          h("p", { class: "title" }, [h("em", {}, text("Ocean")), text(" life is brutal")]),
+          h("p", { class: "author" }, text("Surphy McBrah")),
         ]),
         h("li", {}, [
           h("p", { class: "title" }, [
-            "Family friendly fun at the ",
-            h("em", {}, "ocean"),
-            " exhibit",
+            text("Family friendly fun at the "),
+            h("em", {}, text("ocean")),
+            text(" exhibit"),
           ]),
-          h("p", { class: "author" }, "Guy Prosales"),
+          h("p", { class: "author" }, text("Guy Prosales")),
         ]),
       ]),
     ]),
     h("div", { class: "story" }, [
-      h("h1", {}, "Ocean life is brutal"),
+      h("h1", {}, text("Ocean life is brutal")),
       h(
         "p",
         {},
-        `
+        text(`
       Lorem ipsum dolor sit amet, consectetur adipiscing
       elit, sed do eiusmod tempor incididunt ut labore et
       dolore magna aliqua. Ut enim ad minim veniam, quis
       nostrud exercitation ullamco laboris nisi ut aliquip
       ex ea commodo consequat.
-    `
+    `)
       ),
-      h("p", { class: "signature" }, "Surphy McBrah"),
+      h("p", { class: "signature" }, text("Surphy McBrah")),
     ]),
     h("div", { class: "autoupdate" }, [
-      "Auto update: ",
+      text("Auto update: "),
       h("input", { type: "checkbox" }),
     ]),
   ])
@@ -239,7 +240,7 @@ const emphasize = (word, string) =>
   string
     .split(" ")
     .map((x) =>
-      x.toLowerCase() === word.toLowerCase() ? h("em", {}, x + " ") : x + " "
+      x.toLowerCase() === word.toLowerCase() ? h("em", {}, text(x + " ")) : text(x + " ")
     )
 ```
 
@@ -248,9 +249,9 @@ It lets you change this:
 ```js
   ...
   h("p", {class: "title"}, [
-    "The ",
-    h("em", {}, "Ocean"),
-    " is Sinking!"
+    text("The "),
+    h("em", {}, text("Ocean")),
+    text(" is Sinking!")
   ]),
   ...
 ```
@@ -261,7 +262,7 @@ into this:
   ...
   h("p", {class: "title"}, emphasize("ocean",
     "The Ocean is Sinking"
-  ))
+  )),
   ...
 ```
 
@@ -280,7 +281,7 @@ const storyThumbnail = (props) =>
     },
     [
       h("p", { class: "title" }, emphasize(props.filter, props.title)),
-      h("p", { class: "author" }, props.author),
+      h("p", { class: "author" }, text(props.author)),
     ]
   )
 ```
@@ -312,32 +313,32 @@ const storyList = (props) =>
 
 const filterView = (props) =>
   h("div", { class: "filter" }, [
-    "Filter:",
-    h("span", { class: "filter-word" }, props.filter),
-    h("button", {}, "\u270E"),
+    text("Filter:"),
+    h("span", { class: "filter-word" }, text(props.filter)),
+    h("button", {}, text("\u270E")),
   ])
 
 const storyDetail = (props) =>
   h("div", { class: "story" }, [
-    props && h("h1", {}, props.title),
+    props && h("h1", {}, text(props.title)),
     props &&
-      h(
-        "p",
-        {},
-        `
+    h(
+      "p",
+      {},
+      text(`
     Lorem ipsum dolor sit amet, consectetur adipiscing
     elit, sed do eiusmod tempor incididunt ut labore et
     dolore magna aliqua. Ut enim ad minim veniam, qui
     nostrud exercitation ullamco laboris nisi ut aliquip
     ex ea commodo consequat.
-  `
-      ),
-    props && h("p", { class: "signature" }, props.author),
+      `)
+    ),
+    props && h("p", { class: "signature" }, text(props.author)),
   ])
 
 const autoUpdateView = (props) =>
   h("div", { class: "autoupdate" }, [
-    "Auto update: ",
+    text("Auto update: "),
     h("input", { type: "checkbox" }),
   ])
 
@@ -444,9 +445,9 @@ Add an `onclick` property to the button in `filterView`:
 ```js
 const filterView = (props) =>
   h("div", { class: "filter" }, [
-    "Filter:",
-    h("span", { class: "filter-word" }, props.filter),
-    h("button", { onclick: StartEditingFilter }, "\u270E"), // <---
+    text("Filter:"),
+    h("span", { class: "filter-word" }, text(props.filter)),
+    h("button", { onclick: StartEditingFilter }, text("\u270E")), // <---
   ])
 ```
 
@@ -473,13 +474,13 @@ ternary operator (`a ? b : c`).
 ```js
 const filterView = (props) =>
   h("div", { class: "filter" }, [
-    "Filter:",
+    text("Filter:"),
 
     props.editingFilter // <---
       ? h("input", { type: "text", value: props.filter }) // <---
-      : h("span", { class: "filter-word" }, props.filter),
+      : h("span", { class: "filter-word" }, text(props.filter)),
 
-    h("button", { onclick: StartEditingFilter }, "\u270E"),
+    h("button", { onclick: StartEditingFilter }, text("\u270E")),
   ])
 ```
 
@@ -497,15 +498,15 @@ and update `filterView` again:
 ```js
 const filterView = (props) =>
   h("div", { class: "filter" }, [
-    "Filter:",
+    text("Filter:"),
 
     props.editingFilter
       ? h("input", { type: "text", value: props.filter })
-      : h("span", { class: "filter-word" }, props.filter),
+      : h("span", { class: "filter-word" }, text(props.filter)),
 
     props.editingFilter // <---
-      ? h("button", { onclick: StopEditingFilter }, "\u2713")
-      : h("button", { onclick: StartEditingFilter }, "\u270E"), // <---
+      ? h("button", { onclick: StopEditingFilter }, text("\u2713"))
+      : h("button", { onclick: StartEditingFilter }, text("\u270E")), // <---
   ])
 ```
 
@@ -523,19 +524,19 @@ Update `filterView` yet again:
 ```js
 const filterView = (props) =>
   h("div", { class: "filter" }, [
-    "Filter:",
+    text("Filter:"),
 
     props.editingFilter
       ? h("input", {
           type: "text",
           value: props.filter,
           oninput: SetFilter, // <----
         })
-      : h("span", { class: "filter-word" }, props.filter),
+      : h("span", { class: "filter-word" }, text(props.filter)),
 
     props.editingFilter
-      ? h("button", { onclick: StopEditingFilter }, "\u2713")
-      : h("button", { onclick: StartEditingFilter }, "\u270E"),
+      ? h("button", { onclick: StopEditingFilter }, text("\u2713"))
+      : h("button", { onclick: StartEditingFilter }, text("\u270E")),
   ])
 ```
 
@@ -579,7 +580,7 @@ const storyThumbnail = (props) =>
     },
     [
       h("p", { class: "title" }, emphasize(props.filter, props.title)),
-      h("p", { class: "author" }, props.author),
+      h("p", { class: "author" }, text(props.author)),
     ]
   )
 ```
@@ -629,21 +630,16 @@ const filterView = (props) =>
       ? h("input", {
           type: "text",
           value: props.filter,
-          oninput: [SetFilter, (event) => event.target.value], // <----
+          oninput: (state, event) => SetFilter(state, event.target.value), // <----
         })
-      : h("span", { class: "filter-word" }, props.filter),
+      : h("span", { class: "filter-word" }, text(props.filter)),
 
     props.editingFilter
-      ? h("button", { onclick: StopEditingFilter }, "\u2713")
-      : h("button", { onclick: StartEditingFilter }, "\u270E"),
+      ? h("button", { onclick: StopEditingFilter }, text("\u2713"))
+      : h("button", { onclick: StartEditingFilter }, text("\u270E")),
   ])
 ```
 
-When we give a _function_ as the custom payload, Hyperapp considers it a _payload filter_ and passes the default
-payload through it, providing the returned value as payload to the action.
-
-> Payload filters are also useful when you need a payload that is a combination of custom data and event data
-
 If you'd like to see a working example of the code so far, have a look [here](https://codesandbox.io/s/hyperapp-tutorial-step-2-5yv34)
 
 ## Effects <a name="effects"></a>
@@ -917,7 +913,7 @@ Dispatch it in response to checking the checkbox in `autoUpdateView`:
 ```js
 const autoUpdateView = (props) =>
   h("div", { class: "autoupdate" }, [
-    "Auto update: ",
+    text("Auto update: "),
     h("input", {
       type: "checkbox",
       checked: props.autoUpdate, // <---

package.json

@@ -3,12 +3,13 @@
   "description": "The tiny framework for building hypertext applications",
   "version": "2.0.8",
   "type": "module",
-  "main": "hyperapp.js",
+  "main": "index.js",
   "license": "MIT",
   "repository": "jorgebucaran/hyperapp",
   "homepage": "https://hyperapp.dev",
   "files": [
-    "*.js*"
+    "*.js*",
+    "types/index.d.ts"
   ],
   "author": "Jorge Bucaran",
   "funding": "https://github.com/sponsors/jorgebucaran",
@@ -27,11 +28,15 @@
     "minify": "terser ${prefix}index.js -o ${prefix}$out -mc --source-map url=$out.map --module",
     "create": "npm run build && git commit -am $msg && git tag -s $msg -m $msg && git push && git push --tags",
     "message": "echo ${pkg:+@$npm_package_name/$pkg@}$(node -p \"require('./${pkg:+pkg/$pkg/}package').version\")",
-    "release": "env msg=$(npm run -s message) npm run create && cd ./${pkg:+pkg/$pkg} && npm publish --access public"
+    "release": "env msg=$(npm run -s message) npm run create && cd ./${pkg:+pkg/$pkg} && npm publish --access public",
+    "dts": "dtslint types"
   },
   "devDependencies": {
     "c8": "*",
+    "dtslint": "*",
+    "terser": "*",
     "twist": "*",
-    "terser": "*"
-  }
+    "typescript": "*"
+  },
+  "types": "types/index.d.ts"
 }

pkg/html/index.js

@@ -1,6 +1,6 @@
-const EMPTY_ARR = []
+const NO_CHILDREN = []
 
-const h = (type) => (props, children = EMPTY_ARR) => ({
+const h = (type) => (props, children = NO_CHILDREN) => ({
   type,
   props,
   children: Array.isArray(children) ? children : [children],