feat: builtin minimal JSX runtime (#737)

Author: sanman1k98

README.md

@@ -51,6 +51,27 @@ Under the hood, it handles layout calculation, font, typography and more, to gen
 Satori only accepts JSX elements that are pure and stateless. You can use a subset of HTML
 elements (see section below), or custom React components, but React APIs such as `useState`, `useEffect`, `dangerouslySetInnerHTML` are not supported.
 
+#### Experimental: builtin JSX support
+
+Satori has an experimental JSX runtime that you can use without having to install React. You can enable it on a per-file basis with [`@jsxImportSource` pragmas](https://www.typescriptlang.org/tsconfig/#jsxImportSource). In the future, it will autocomplete only the subset of HTML elements and CSS properties that Satori supports for better type-safety.
+
+```tsx
+/** @jsxRuntime automatic */
+/** @jsxImportSource satori/jsx */
+
+import satori from 'satori';
+import { FC, JSXNode } from 'satori/jsx';
+
+const MyComponent: FC<{ children: JSXNode }> = ({ children }) => (
+  <div style={{ color: 'black' }}>{children}</div>
+)
+
+const svg = await satori(
+  <MyComponent>hello, world</MyComponent>,
+  options,
+)
+```
+
 #### Use without JSX
 
 If you don't have JSX transpiler enabled, you can simply pass [React-elements-like objects](https://reactjs.org/docs/introducing-jsx.html) that have `type`, `props.children` and `props.style` (and other properties too) directly:
@@ -351,8 +372,6 @@ Multiple fonts can be passed to Satori and used in `fontFamily`.
 > [!TIP]
 > We recommend you define global fonts instead of creating a new object and pass it to satori for better performance, if your fonts do not change. [Read it for more detail](https://github.com/vercel/satori/issues/590)
 
-
-
 #### Emojis
 
 To render custom images for specific graphemes, you can use `graphemeImages` option to map the grapheme to an image source:

package.json

@@ -18,6 +18,10 @@
     "dist/**",
     "yoga.wasm"
   ],
+  "imports": {
+    "#satori/jsx/jsx-runtime": "./src/jsx/jsx-runtime.ts",
+    "#satori/jsx/jsx-dev-runtime": "./src/jsx/jsx-runtime.ts"
+  },
   "exports": {
     "./package.json": "./package.json",
     "./yoga.wasm": "./yoga.wasm",
@@ -34,6 +38,21 @@
         "types": "./dist/standalone.d.cts",
         "default": "./dist/standalone.cjs"
       }
+    },
+    "./jsx": {
+      "types": "./dist/jsx/index.d.ts",
+      "import": "./dist/jsx/index.js",
+      "require": "./dist/jsx/index.cjs"
+    },
+    "./jsx/jsx-runtime": {
+      "types": "./dist/jsx/jsx-runtime.d.ts",
+      "import": "./dist/jsx/jsx-runtime.js",
+      "require": "./dist/jsx/jsx-runtime.cjs"
+    },
+    "./jsx/jsx-dev-runtime": {
+      "types": "./dist/jsx/jsx-runtime.d.ts",
+      "import": "./dist/jsx/jsx-runtime.js",
+      "require": "./dist/jsx/jsx-runtime.cjs"
     }
   },
   "scripts": {

src/jsx/index.ts

@@ -0,0 +1,34 @@
+import { jsx } from './jsx-runtime.js'
+import type { JSXNode, JSXElement, JSXKey, FC } from './types.js'
+
+export type * from './types.js'
+export { Fragment, type JSX } from './jsx-runtime.js'
+
+/**
+ * Create a `ReactElement`-like object.
+ *
+ * @param type - Tag name string or a function component.
+ * @param props - Optional props to create the element with.
+ * @param children - Zero or more child nodes.
+ * @returns A `ReactElement`-like object with properties like `type`, `key`, `props`, and `props.children`.
+ */
+export function createElement<P extends {}>(
+  type: string | FC<P>,
+  props?: P | null,
+  ...children: JSXNode[]
+): JSXElement<P> {
+  if (!props) {
+    const newProps = children.length ? { children } : {}
+    return jsx(type, newProps, null) as JSXElement<P>
+  }
+
+  // Destructure key from props.
+  const { key, ...restProps } = props as {
+    key?: JSXKey | undefined | null
+    [x: string]: unknown
+  }
+  // Pass children as props.
+  if (children.length) restProps.children = children
+
+  return jsx(type, restProps, key) as JSXElement<P>
+}