vite-plugin-hyperapp 1.1.2 → 1.3.0

package/README.md

@@ -12,7 +12,7 @@ Use vite as a dev-server and bundler for your hyperapp projects. Supports:
 To get up and running with Hyperapp and Vite in a few seconds, use [create-vite-hyperapp](https://github.com/zaceno/create-vite-hyperapp):
 
 ```sh
-> npm create vite-hyperapp
+> npm create vite-hyperapp@latest
 ```
 
 > Use `npm create vite-hyperapp -- --help` for some command line options.
@@ -39,16 +39,56 @@ export default defineConfig({
 ```
 > Options are passed as an object to `hyperapp({...})`. Available options described below.
 
-Additionally, if you want typescript/TSX support, please add the following options to `compilerOptions` in your `tsconfig.json`:
+In order to enable build TSX files to build, please add the following options to `compilerOptions` in your `tsconfig.json`:
 
 ```json
-/* Necessary for tsx to work with vite-plugin-hyperapp*/
+/* Necessary for tsx to work with vite-plugin-hyperapp */
 "jsx": "preserve",
-"jsxImportSource": "vite-plugin-hyperapp"
+"jsxFactory": "jsx",
+"jsxFragmentFactory": "jsxFragment"
+```
+
+and to make sure your editor's TS language server picks up the right types for JSX/TSX,
+add this line in your `src/vite-env.d.ts`:
+
+```
+/// <reference types="vite-plugin-hyperapp/jsx" />
+```
+
+## JSX/TSX 
+
+Our JSX/TSX works the same as React/Preact, however, note that when you pass children to a component, like:
+
+```jsx
+<MyComponent>
+  <p>foo</p>
+  <p>bar</p>
+</MyComponent>
+```
+
+they will arrive as an array of virtual nodes in the _second_ argument to the component.
+
+```jsx
+const MyComponent = (props, children) => {
+  //children will be: [<p>foo</p>, <p>bar</p>]
+}
+```
+
+It's ok to put this array of children among other children, because the jsx transform will flatten the child-list:
+
+```jsx
+const MyComponent = (props, children) => (
+  <div>
+    <h1>Header</h1>
+    {children} {/* <--- this is fine */}
+  </div>
+)
 ```
 
 ## Hot-module-reloading (HMR)
 
+> The following is taken care of already, when you scaffold your app with `npm create vite-hyperapp`, but it is useful to be aware of
+
 For hot-module-reloading to work, the plugin injects some code in the module where you initiate the app. In order for this to work, the app-initiation module must follow these two rules:
 
 1. It must import `app` from `"hyperapp"` using named imports (i.e. with `{..app...}`, not `*`

package/index.d.ts

@@ -0,0 +1,10 @@
+import { type PluginOption } from "vite"
+
+export interface HyperappPluginOptions {
+  hmr?: boolean
+  dispatchExport?: string
+}
+
+export default function hyperapp(
+  options?: HyperappIntegrationOptions,
+): PluginOption

package/index.js

@@ -32,10 +32,10 @@ export default function injectConsoleLog(options = {}) {
 
     config: () => ({
       esbuild: {
-        jsxFactory: "jsxNode",
+        jsxFactory: "jsx",
         jsxFragment: "jsxFragment",
         jsxInject:
-          "import {jsxNode, jsxFragment} from 'vite-plugin-hyperapp/jsx.js'",
+          "import {jsx, jsxFragment} from 'vite-plugin-hyperapp/jsx.js'",
       },
     }),
 

package/jsx.d.ts

@@ -0,0 +1,59 @@
+import type { Props, MaybeVNode, ElementVNode } from "hyperapp"
+
+type Component<S, P> = (
+  props: P,
+  children: MaybeVNode<S>[],
+) => MaybeVNode<S> | MaybeVNode<S>[]
+
+type _JSXChild<S> = string | number | MaybeVNode<S>
+type JSXChild<S> = _JSXChild<S> | _JSXChild<S>[]
+
+export declare function jsx<S>(
+  type: string,
+  props?: Props<S>,
+  ...children: JSXChild<S>[]
+): ElementVNode<S>
+
+export declare function jsx<S, P>(
+  type: Component<S, P>,
+  props?: P | null,
+  ...children: JSXChild<S>[]
+): ReturnType<Component<S, P>>
+
+export declare function jsxFragment<S>(
+  _: any,
+  children: JSXChild<S>[],
+): MaybeVNode<S>[]
+
+declare global {
+  namespace JSX {
+    /** Result of a JSX expression. Components may return arrays. */
+    type Element = MaybeVNode<any> | MaybeVNode<any>[]
+
+    /** What you can put in the `<X />` position */
+    type ElementType = string | Component<any, any>
+
+    /** Allow `<>...</>` fragments; returns an array */
+    type Fragment = MaybeVNode<any>[]
+
+    /** Intrinsic (HTML/SVG) elements. */
+    interface IntrinsicElements {
+      [elem: string]: Props<any>
+    }
+
+    /** prevents errors about children missing from props in components */
+    type LibraryManagedAttributes<P> = P & { children?: JSXChild<any>[] }
+  }
+}
+
+// make jsx and jsxFragment ambient globals because
+// ts server doesn't know I'll add them later in transform
+type JsxFn = typeof jsx
+type JsxFragmentFn = typeof jsxFragment
+
+declare global {
+  const jsx: JsxFn
+  const jsxFragment: JsxFragmentFn
+}
+
+export {}

package/jsx.js

@@ -1,13 +1,13 @@
 import { h, text } from "hyperapp"
 
-const nodeify = x =>
-  (typeof x === "string") | (typeof x === "number") ? text(x) : x
+const cproc = children =>
+  children
+    .flat()
+    .map(x => ((typeof x === "string") | (typeof x === "number") ? text(x) : x))
 
-export const jsxNode = (tag, props, ...children) =>
+export const jsx = (tag, props, ...children) =>
   typeof tag === "function"
-    ? tag(props, children)
-    : h(tag, props || {}, children.flat(2).map(nodeify))
+    ? tag(props, cproc(children))
+    : h(tag, props || {}, cproc(children))
 
-export const jsxFragment = (_, children) => {
-  return children.flat(2).map(nodeify)
-}
+export const jsxFragment = (_, children) => cproc(children)

package/package.json

@@ -1,16 +1,51 @@
 {
   "name": "vite-plugin-hyperapp",
-  "version": "1.1.2",
+  "version": "1.3.0",
   "type": "module",
   "description": "Plugin and helpers for using Hyperapp with Vite",
-  "main": "index.js",
+  "main": "./index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Zacharias Enochsson",
   "license": "MIT",
+  "files": [
+    "*.js",
+    "*.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./jsx": {
+      "types": "./jsx.d.ts",
+      "import": "./jsx.js",
+      "default": "./jsx.js"
+    },
+    "./jsx.js": {
+      "types": "./jsx.d.ts",
+      "import": "./jsx.js",
+      "default": "./jsx.js"
+    },
+    "./ssr": {
+      "types": "./ssr.d.ts",
+      "import": "./ssr.js",
+      "default": "./ssr.js"
+    },
+    "./ssr.js": {
+      "types": "./ssr.d.ts",
+      "import": "./ssr.js",
+      "default": "./ssr.js"
+    },
+    "./package.json": "./package.json"
+  },
   "dependencies": {
     "jsdom": "^24.1.0",
     "hyperapp": "^2.0.22"
+  },
+  "peerDependencies": {
+    "vite": "^4.5.14"
   }
 }

package/ssr.d.ts

@@ -2,7 +2,7 @@ import { Subscription } from "hyperapp"
 
 type Defs<S = any> = {
   init?: Dispatchable<S>
-  view?: (state: S) => ElementVNode<S>
+  view?: (state: S) => VNode<S>
   subscriptions?: (state: S) => Subscription<S>[]
   dispatch?: (d: Dispatch<S>) => Dispatch<S>
 }

package/jsx-runtime.d.ts

@@ -1,11 +0,0 @@
-/*
-  This type declaration is named 'jsx-runtime.d.tx' even though
-  jsx is compiled in the classic way. It's only named this to make
-  it easier for tsconfig.json to be ok with jsx in .tsx-files.
-*/
-import { Props } from "hyperapp"
-declare global {
-  module JSX {
-    type IntrinsicElements = Record<string, Props<any>>
-  }
-}