✨Add support for functional elements

The nice thing about JSX is that it is "just javascript" which means that you can add abstractions to it with simple functions. However, the current implementation of JSX in hastscript stops short of allowing elements to be defined this way. This adds this support so you can make dead simple HTML templates in JavaScript: functions that accept parameters and return a `JSX.Element` TODOs and Open Questions - figure out what to do with the "classic" JSX transform since it is currently just a call through to the native `h()` function. We either need to wrap this function or add support for function expansion inside it as well. - Sort out typings, especially for JSX.ElementChildrenAttribute

Author: cowboyd

lib/jsx-automatic.d.ts

@@ -1,43 +1,48 @@
 import type {HProperties, HChild, HResult} from './core.js'
 
-export namespace JSX {
- /**
- * This defines the return value of JSX syntax.
- */
- type Element = HResult
+declare global {
+ namespace JSX {
+ /**
+ * This defines the return value of JSX syntax.
+ */
+ type Element = HResult
 
- /**
- * This disallows the use of functional components.
- */
- type IntrinsicAttributes = never
+  /**
+  * 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
- | {
+  /**
+  * 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
  }
- }
+  }
 
- /**
- * 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.
+ * The key of this interface defines as what prop children are passed.
  */
- children?: never
+ // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+ interface ElementChildrenAttribute {
+ /**
+ * Only the key matters, not the value.
+ */
+ //TODO: is there a way to make this work?
+ // currently fails with the following error when including `{children}`
+ // -> error TS2322: Type 'HChild' is not assignable to type 'Node | HPrimitiveChild'.
+ 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,16 @@ 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) {
  const {children, ...properties} = props
- return type === null ? f(type, children) : f(type, properties, children)
+ if (typeof typeOrFn === 'function') {
+ return typeOrFn(props);
+ }
+ return typeOrFn === null ? f(typeOrFn, children) : f(typeOrFn, properties, children)
  }
  )
 

test-d/automatic-h.tsx

@@ -51,6 +51,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-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

@@ -125,4 +125,43 @@ 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}
+ */
+ 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'
+ )
 })