')) {
+ expect(result.children[0].count).toBe(3)
+ expect(result.children[0].children).toEqual([])
+ } else {
+ expect(result.children).toEqual([])
+ }
+ })
+
+ it('passes static React children as separate arguments without list-key warnings', () => {
+ const error = vi.spyOn(console, 'error').mockImplementation(() => {})
+ try {
+ const Component = component('
AB
', true)
+ expect(renderToStaticMarkup(React.createElement(Component)))
+ .toBe('
AB
')
+ expect(error).not.toHaveBeenCalled()
+ } finally {
+ error.mockRestore()
+ }
+ })
+})
diff --git a/test/options.test.ts b/test/options.test.ts
new file mode 100644
index 0000000..4490723
--- /dev/null
+++ b/test/options.test.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { compileTemplateToReact } from '../src'
+
+describe('compiler options', () => {
+ it.each(['bad-name', 'return', 'class', '1Component', 'A;throw new Error()'])('rejects invalid component name %s', componentName => {
+ expect(() => compileTemplateToReact('
', { componentName })).toThrow('componentName')
+ })
+
+ it.each([-1, 1.5, NaN, Infinity])('rejects invalid indentation %s', pretty => {
+ expect(() => compileTemplateToReact('
', { pretty })).toThrow('Indentation')
+ })
+
+ it('rejects invalid initial indentation', () => {
+ expect(() => compileTemplateToReact('
', { pretty: { initialIndent: -1, indentSize: 2 } })).toThrow('Indentation')
+ })
+})
diff --git a/test/placeholder-jsx.test.ts b/test/placeholder-jsx.test.ts
index b14bf50..8336c1b 100644
--- a/test/placeholder-jsx.test.ts
+++ b/test/placeholder-jsx.test.ts
@@ -5,20 +5,20 @@ describe('placeholder jsx', () => {
it('html jsx', () => {
const template = `<{p1}>Hello world!`
const result = compileTemplateToReact(template, { jsx: true })
- const expected = `function TemplateComponent(props){const frg=React.Fragment;const jsx=React.createElement;const jsxs=React.createElement;return jsxs(props.p1,null,["Hello world!"])}`
+ const expected = `function TemplateComponent(props){const frg=React.Fragment;const jsx=React.createElement;const jsxs=React.createElement;return jsxs(props.p1,null,...["Hello world!"])}`
expect(result).toBe(expected)
})
it('html jsx', () => {
const template = `<{p1}>Hello world!
123`
const result = compileTemplateToReact(template, { jsx: true })
- const expected = `function TemplateComponent(props){const frg=React.Fragment;const jsx=React.createElement;const jsxs=React.createElement;return jsxs(frg,null,[jsx(props.p1,null,["Hello world!"]),jsx("span",null,["123"])])}`
+ const expected = `function TemplateComponent(props){const frg=React.Fragment;const jsx=React.createElement;const jsxs=React.createElement;return jsxs(frg,null,...[jsx(props.p1,null,...["Hello world!"]),jsx("span",null,...["123"])])}`
expect(result).toBe(expected)
})
it('simple html jsx with attrs', () => {
const template = `
Hello world!
`
const result = compileTemplateToReact(template, { jsx: true })
- const expected = `function TemplateComponent(props){const frg=React.Fragment;const jsx=React.createElement;const jsxs=React.createElement;return jsxs("div",{className:"abc",title:"hello","data-id":"xxx"},["Hello world!",jsx("br",null,[])])}`
+ const expected = `function TemplateComponent(props){const frg=React.Fragment;const jsx=React.createElement;const jsxs=React.createElement;return jsxs("div",{className:"abc",title:"hello","data-id":"xxx"},...["Hello world!",jsx("br",null)])}`
expect(result).toBe(expected)
})
@@ -33,7 +33,7 @@ describe('placeholder jsx', () => {
className: "abc",
title: "hello",
"data-id": "xxx"
- }, [
+ }, ...[
"Hello world!"
])
}`
@@ -44,7 +44,7 @@ describe('placeholder jsx', () => {
it('simple html jsx with attrs', () => {
const template = `
Hello world!abc
`
const result = compileTemplateToReact(template, { jsx: true })
- const expected = `function TemplateComponent(props){const frg=React.Fragment;const jsx=React.createElement;const jsxs=React.createElement;return jsxs("div",null,["Hello world!",jsx("span",null,["abc"])])}`
+ const expected = `function TemplateComponent(props){const frg=React.Fragment;const jsx=React.createElement;const jsxs=React.createElement;return jsxs("div",null,...["Hello world!",jsx("span",null,...["abc"])])}`
expect(result).toBe(expected)
})
})
diff --git a/test/rendering.test.ts b/test/rendering.test.ts
new file mode 100644
index 0000000..3515815
--- /dev/null
+++ b/test/rendering.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import ts from 'typescript'
+import { compileTemplateToReact } from '../src'
+
+function compile(template: string, jsx: boolean, pretty = false) {
+ const source = compileTemplateToReact(template, { jsx, pretty })
+ const { outputText } = ts.transpileModule(`const Component = ${source}`, {
+ compilerOptions: { jsx: ts.JsxEmit.React, target: ts.ScriptTarget.ES2020 },
+ })
+ return new Function('React', `${outputText}; return Component`)(React) as React.ComponentType
>
+}
+
+for (const jsx of [false, true]) {
+ for (const pretty of [false, true]) {
+ describe(`rendering (jsx: ${jsx}, pretty: ${pretty})`, () => {
+ it('renders multiline attributes and whitespace around equals', () => {
+ const Component = compile('Hello, {name}!
-Compiles HTML templates into React components, you may use it to convert HTML templates into React components at build time(or prebuild/predev).
+Compile HTML templates with prop placeholders into React JSX or JavaScript source at build time. Keep simple layouts in template files, pass data or components through React props, and import the generated component into your application. The compiler and PEG.js parser stay in your build dependencies when you use the generated source.
-> [!CAUTION]
-> This package is still in development and may not be stable. Please report any issues you encounter.
+## When to use it
-## Installation
+Use this package for repeatable code generation from simple, trusted templates: reusing a layout with different props, inserting React components into template slots, or converting a collection of controlled templates during a migration.
+
+Choose based on the output you need:
-```bash
-# use npm
-npm install template-to-react -D
+| Need | Tool |
+| --- | --- |
+| Generate component source with `{prop}` bindings and `<{Component}>` slots | `template-to-react` |
+| Render HTML received from a CMS or API at runtime | [html-react-parser](https://github.com/remarkablemark/html-react-parser) or [html-to-react](https://github.com/aknuds1/html-to-react) |
+| Convert ordinary HTML to JSX once | [HTMLtoJSX](https://github.com/reactjs/react-magic/blob/master/README-htmltojsx.md) or a converter in your editor |
+| Author a new React component directly | JSX/TSX |
-# use yarn
-yarn add template-to-react -D
+This package accepts the template syntax described below. Raw HTML copied from a page may need adaptation, especially styles, boolean attributes, and void tags.
+
+## Installation
+
+```sh
+npm install --save-dev template-to-react
+# or
+pnpm add --save-dev template-to-react
```
-## Usage
-Import the `compileTemplateToReact` function from the package:
+The package exports ESM and CommonJS entry points and TypeScript declarations. React is used by the generated component and is supplied by your application. Rendering tests cover React 18 and 19.
+
+## Build-time usage
```js
+import { writeFile } from 'node:fs/promises';
import { compileTemplateToReact } from 'template-to-react';
+
+const template = '