xxgen

xxgen (the X X Generator) allows you to generate any form of content from JSX/TSX files. It is designed to generate static sites, but you could use it for anything.

For an example on how to use xxgen, please see the example folder.

How it works

In your package.json file you add the following: "xxgen": { "input": "pages", "output": "generated-pages" }, which tells xxgen to look in a folder called pages for any & all JSX & TSX files, evaluate them, and take whatever the default export is and fs.writeFile that to a file with the same name, removing the .jsx/.tsx suffix from their file name.

so if you have the file pages/hello.txt.tsx with the content export default ("Hello " + (new Date()).toLocaleString()), running xxgen will give you a file generated-pages/hello.txt with the content Hello 01/01/1970, 00:00:00 (or whatever time you ran the build process).

Recommended TSConfig

{
    "compilerOptions": {
        "module": "preserve",
        "jsx": "react",
        "jsxFactory": "jsx",
        "jsxFragmentFactory": "Fragment",
        "noEmit": true,
        "allowImportingTsExtensions": true
    },
    "include": ["./**/*.ts", "./**/*.tsx"]
}

This will also configure the use of jsxxg as the JSX factory:

jsxxg

jsxxg (JSX X Generator) is a utility module intended for use with xxgen (but is not tied to in anyway so you don't have to), that allows you to write HTML strings as JSX.

Use

To use jsxxg, you can configure your TSConfig (take the jsx, jsxFactory & jsxFragmentFactory from the above recommended TSConfig)

Alternatively, you can apply the configuration on a per-file basis by placing this at the top of your file:

/** @jsxRuntime classic **/
/** @jsx jsx */
/** @jsxFrag Fragment */

API surface

jsxxg only exposes 3 functions:

• jsx(tag, props, ...children)
  • If tag is a function (JSX component), it will return tag({ children, ...props })
  • if tag is a string, it returns a RawHTMLObject. For example jsx("b", { id: 'foo' }, ["Hello, world. JSX > all"]) will return a RawHTMLObject that represents the string <b id="foo">Hello, world. JSX &gt; all</b>
• Fragment({ children })
  • Returns a RawHTMLObject with all the elements of the flattened children array joined (ensuring to escape HTML where necessary)
• unsafeHTML(html)
  • Returns a RawHTMLObject that represents html, to allow for specific markup to be emitted directly in the output, without any escaping.

RawHTMLObject

A raw HTML object is a wrapper object for a string, to mark that the content inside has already been escaped and is safe to include in a HTML document. These are created with the factory function unsafeHTML. The only public member of a RawHTMLObject is toString() which returns the encapsulated HTML string.