Merge c1129d7 into deaa1b5

README.md

@@ -35,7 +35,7 @@ $ npm install -S hyperons
 
 This module provides two functions; one to create elements and one to render them. If you've worked with [React][react] or React-like libraries before then they're the equivalent to `React.createElement()` and `ReactDOM.renderToString()`.
 
-The example below shows how to render a simple component using Hyperons:
+The example below shows how to render a simple component using Hyperons with vanilla JavaScript:
 
 [react]: https://reactjs.org/
 
@@ -129,6 +129,22 @@ const DescriptionList = () => {
 }
 ```
 
+### `Hyperons.Suspense`
+
+`Suspense` is a special component which renders a fallback for lazy-loaded or async children. Hyperons only renders static HTML so this component exists only for compatibility purposes and will not render its children.
+
+```jsx
+import { h, Suspense } from 'hyperons'
+
+const AsyncComponent = () => {
+  return (
+    <Suspense fallback={<Loading />}>
+      <SomeComponent />
+    </Suspense>
+  )
+}
+```
+
 ### `Hyperons.createContext`
 
 Creates a new [context](#context) object. Components which subscribe to this context will read the current context value from the closest matching context provider above it in the tree. Hyperons largely supports the same [context API](https://reactjs.org/docs/context.html) as React including accessing context via the `Class.contextType` property and `useContext()` [hook](#hooks).

src/index.js

@@ -2,12 +2,14 @@ import Component from './component'
 import createContext from './context'
 import createElement from './create-element'
 import Fragment from './fragment'
+import Suspense from './suspense'
 import renderToString from './render-to-string'
 
 export * from './hooks'
 
 export {
   Fragment,
+  Suspense,
   Component,
   createContext,
   createElement,

src/render-to-string.js

@@ -1,6 +1,7 @@
 import stringifyStyles from './stringify-styles'
 import escapeString from './escape-string'
 import Fragment from './fragment'
+import Suspense from './suspense'
 import dispatcher from './dispatcher'
 
 const ATTR_ALIASES = {
@@ -130,6 +131,10 @@ function renderToString(element, context = {}) {
       return renderToString(props.children, context)
     }
 
+    if (type === Suspense) {
+      return renderToString(props.fallback, context)
+    }
+
     if (typeof type === 'string') {
       let html = `<${type}`
 

src/suspense.js

@@ -0,0 +1,2 @@
+const Suspense = Symbol('Suspense')
+export default Suspense

test/async.spec.jsx

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { h, render, Suspense } from '../src'
+
+describe('async', () => {
+  it('renders the provided fallback component', () => {
+    const result = render(
+      <Suspense fallback={<p>Yes</p>}>
+        <p>No</p>
+      </Suspense>
+    )
+    expect(result).toBe('<p>Yes</p>')
+  })
+})