✨Add support for functional elements

Author: cowboyd

jsx-factory.js

@@ -0,0 +1,30 @@
+/**
+ * @typedef {import('./lib/core.js').Element} Element
+ * @typedef {import('./lib/core.js').Root} Root
+ * @typedef {import('./lib/core.js').HResult} HResult
+ * @typedef {import('./lib/core.js').HArrayChild} HArrayChild
+ * @typedef {import('./lib/core.js').HProperties} HProperties
+ * @typedef {import('./lib/core.js').HPropertyValue} HPropertyValue
+ * @typedef {import('./lib/core.js').HStyle} HStyle
+ * @typedef {import('./lib/core.js').core} Core
+ *
+ * @typedef {Record<string, unknown>} JSXProps
+ * @typedef {(props: JSXProps) => HResult } HFn
+ */
+
+import {h as hast} from './index.js'
+
+/**
+ * @param {string | null | HFn} typeOrFn
+ * @param { JSXProps | undefined } props
+ * @param { HArrayChild } children
+ * @returns HResult
+ */
+export function h(typeOrFn, props, ...children) {
+ if (typeof typeOrFn === 'function') {
+ return typeOrFn({...props, children})
+ }
+
+ // @ts-expect-error just doo eeet.
+ return hast(typeOrFn ?? undefined, props, children)
+}

lib/jsx-automatic.d.ts

@@ -1,43 +1,26 @@
 import type {HProperties, HChild, HResult} from './core.js'
 
-export namespace JSX {
- /**
- * This defines the return value of JSX syntax.
- */
- type Element = HResult
-
- /**
- * This disallows the use of functional components.
- */
- type IntrinsicAttributes = never
-
- /**
- * This defines the prop types for known elements.
- *
- * For `hastscript` this defines any string may be used in combination with `hast` `Properties`.
- *
- * This **must** be an interface.
- */
- // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style, @typescript-eslint/consistent-type-definitions
- interface IntrinsicElements {
- [name: string]:
- | HProperties
- | {
- /**
- * The prop that matches `ElementChildrenAttribute` key defines the type of JSX children, defines the children type.
- */
- children?: HChild
- }
- }
+declare global {
+ namespace JSX {
+ /**
+ * This defines the return value of JSX syntax.
+ */
+ type Element = HResult
 
- /**
- * The key of this interface defines as what prop children are passed.
- */
- // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
- interface ElementChildrenAttribute {
  /**
- * Only the key matters, not the value.
+ * This defines the prop types for known elements.
+ *
+ * For `hastscript` this defines any string may be used in combination with `hast` `Properties`.
+ *
+ * This **must** be an interface.
  */
- children?: never
+ // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style, @typescript-eslint/consistent-type-definitions
+ interface IntrinsicElements {
+ [name: string]:
+ | HProperties
+ | {
+ children?: HChild
+ }
+ }
  }
 }

lib/runtime.js

@@ -9,6 +9,7 @@
  * @typedef {import('./core.js').core} Core
  *
  * @typedef {Record<string, HPropertyValue | HStyle | HChild>} JSXProps
+ * @typedef {(props: JSXProps) => HResult } HFn
  */
 
 /**
@@ -26,13 +27,19 @@ export function runtime(f) {
  */
  (
  /**
- * @param {string | null} type
+ * @param {string | null | HFn} typeOrFn
  * @param {HProperties & {children?: HChild}} props
  * @returns {HResult}
  */
- function (type, props) {
+ function (typeOrFn, props) {
+ if (typeof typeOrFn === 'function') {
+ return typeOrFn(props)
+ }
+
  const {children, ...properties} = props
- return type === null ? f(type, children) : f(type, properties, children)
+ return typeOrFn === null
+ ? f(typeOrFn, children)
+ : f(typeOrFn, properties, children)
  }
  )
 

package.json

@@ -36,6 +36,7 @@
  "./index.js": "./index.js",
  "./html.js": "./html.js",
  "./svg.js": "./svg.js",
+ "./jsx-factory": "./jsx-factory.js",
  "./jsx-runtime": "./jsx-runtime.js",
  "./jsx-dev-runtime": "./jsx-runtime.js",
  "./html/jsx-runtime": "./html/jsx-runtime.js",

readme.md

@@ -257,20 +257,13 @@ The syntax tree is [hast][].
 
 ## JSX
 
-This package can be used with JSX.
-You should use the automatic JSX runtime set to `hastscript` (also available as
-the more explicit name `hastscript/html`) or `hastscript/svg`.
+This package can be used with JSX by setting your
+[`jsxImportSource`][jsx-import-source] to `hastscript`
 
 > 👉 **Note**: while `h` supports dots (`.`) for classes or number signs (`#`)
 > for IDs in `selector`, those are not supported in JSX.
 
-> 🪦 **Legacy**: you can also use the classic JSX runtime, but this is not
-> recommended.
-> To do so, import `h` (or `s`) yourself and define it as the pragma (plus
-> set the fragment to `null`).
-
-The Use example above can then be written like so, using inline pragmas, so
-that SVG can be used too:
+For example, to write the hastscript example provided earlier u
 
 `example-html.jsx`:
 
@@ -287,6 +280,8 @@ console.log(
 )
 ```
 
+SVG can be used too by setting `jxsImportSource` to `hastscript/svg`:
+
 `example-svg.jsx`:
 
 ```jsx
@@ -299,6 +294,15 @@ console.log(
 )
 ```
 
+> 🪦 **Legacy**: you can also use the classic JSX runtime by importing either
+> `h` (or `s`) manually from `hastscript/jsx-factory` and setting it as the
+> `jsxFactory` in your transpiler, but it is not recommended. For example:
+
+```jsx
+/** @jsxFactory h */
+import { h } from "hastscript/jsx-factory";
+```
+
 ## Types
 
 This package is fully typed with [TypeScript][].
@@ -466,3 +470,5 @@ abide by its terms.
 [properties]: #properties-1
 
 [result]: #result
+
+[jsx-import-source]: https://react.dev/jsx-transform

script/generate-jsx.js

@@ -16,7 +16,7 @@ await fs.writeFile(
  plugins: [acornJsx()],
  module: true
  }),
- {pragma: 'h', pragmaFrag: 'null'}
+ {pragma: 'createElement', pragmaFrag: 'null'}
  )
  ).value
 )

test-d/automatic-h.tsx

@@ -52,5 +52,11 @@ expectError(<a invalid={[true]} />)
 
 expectType<Result>(<a children={<b />} />)
 
-declare function Bar(props?: Record<string, unknown>): Element
-expectError(<Bar />)
+// You can't use nonprimitive attribute values for primitive elements
+expectError(<a children={() => null} />)
+
+export function F1({children}: {children: () => string}) {
+ return <p>{children()}</p>
+}
+
+expectType<Result>(<F1 children={() => 'Hello World'} />)

test-d/automatic-s.tsx

@@ -41,6 +41,3 @@ expectError(<a invalid={[true]} />)
 // The automatic runtime the children prop to define JSX children, whereas it’s used as an attribute in the classic runtime.
 
 expectType<Result>(<a children={<b />} />)
-
-declare function Bar(props?: Record<string, unknown>): Element
-expectError(<Bar />)

test/jsx.jsx

@@ -4,6 +4,8 @@ import assert from 'node:assert/strict'
 import test from 'node:test'
 import {u} from 'unist-builder'
 import {h} from '../index.js'
+// eslint-disable-next-line no-unused-vars
+import {h as createElement} from '../jsx-factory.js'
 
 test('name', () => {
  assert.deepEqual(<a />, h('a'), 'should support a self-closing element')
@@ -125,4 +127,41 @@ test('name', () => {
  ]),
  'should support a fragment in an element (#2)'
  )
+
+ /**
+ * @typedef {import('../lib/core.js').HChild} HChild
+
+ * @param {{title: string; definition: string, children?: HChild}} options
+ * @returns {JSX.Element}
+ */
+ // eslint-disable-next-line no-unused-vars
+ const Dl = ({title, definition, children}) => (
+ <dl>
+ <dt>{title}</dt>
+ <dd>{definition}</dd>
+ {children}
+ </dl>
+ )
+
+ assert.deepEqual(
+ <Dl title={'Firefox'} definition={'A red panda.'} />,
+ h('dl', [h('dt', 'Firefox'), h('dd', 'A red panda.')]),
+ 'should support functional elements'
+ )
+
+ assert.deepEqual(
+ <Dl title={'Firefox'} definition={'A red panda.'}>
+ <>
+ <dt>Chrome</dt>
+ <dd>A chemical element.</dd>
+ </>
+ </Dl>,
+ h('dl', [
+ h('dt', 'Firefox'),
+ h('dd', 'A red panda.'),
+ h('dt', 'Chrome'),
+ h('dd', 'A chemical element.')
+ ]),
+ 'should support functional elements that render their children'
+ )
 })