Merge pull request #182 from bcomnes/jsx

Add support for tsx/jsx defaulting to preact

Author: bcomnes

README.md

@@ -70,7 +70,7 @@ src % tree
 │               ├── client.js # nested pages are just pages, so they also can have a page scoped client and style.
 │               └── style.css
 ├── html-page
-│        ├── client.js
+│        ├── client.jsx # client bundles can also be written in .jsx/.tsx
 │        ├── page.html # Raw html pages are also supported. They support handlebars template blocks.
 │        ├── page.vars.js # pages can define page variables in a page.vars.js.
 │        └── style.css
@@ -316,6 +316,10 @@ await someHelper()
 await funnyLibrary()
 ```
 
+#### .tsx/.jsx
+
+Client bundles support .jsx and .tsx. They default to preact, so if you want mainlain recat, customize your esbuild settings to load that instead.
+
 ### Page variable files
 
 Each page can also have a `page.vars.js` file that exports a `default` function or object that contains page specific variables.
@@ -1184,7 +1188,7 @@ Some notable features are included below, see the [roadmap](https://github.com/u
 - [x] Esbuild settings escape hatch
 - [x] Copy folders
 - [x] Full Typescript support via native type stripping
-- [ ] JSX support in client bundles
+- [x] JSX+TSX support in client bundles
 - ...[See roadmap](https://github.com/users/bcomnes/projects/3/)
 
 ## History

examples/preact/src/README.md

@@ -2,4 +2,5 @@
 
 This is a preact example.
 
-[Isomorphic Component Rendering](./isomorphic/)
+- [Isomorphic Component Rendering](./isomorphic/)
+- [JSX-page](./jsx-page/)

examples/preact/src/jsx-page/client.jsx

@@ -0,0 +1,12 @@
+import { render } from 'preact'
+
+export const page = () => {
+  return (
+    <div>
+      look ma, client side jsx!
+    </div>
+  )
+}
+
+const renderTarget = document.querySelector('.jsx-app')
+render(page(), renderTarget)

examples/preact/src/jsx-page/page.html

@@ -0,0 +1,4 @@
+<div>
+    <h2>This is an html page, with a client.jsx that mounts onto it</h2>
+    <div class="jsx-app"></div>
+</div>

examples/type-stripping/src/README.md

@@ -2,4 +2,5 @@
 
 This is a preact example.
 
-[Isomorphic Component Rendering](./isomorphic/)
+- [Isomorphic Component Rendering](./isomorphic/)
+- [tsx-client]('./isomorphic/')

examples/type-stripping/src/tsx-page/client.tsx

@@ -0,0 +1,14 @@
+import { render } from 'preact'
+
+export const page = () => {
+  return (
+    <div>
+      look ma, client side jsx!
+    </div>
+  )
+}
+
+const renderTarget = document.querySelector('.jsx-app')
+if (renderTarget) {
+ render(page(), renderTarget)
+}

examples/type-stripping/src/tsx-page/page.html

@@ -0,0 +1,4 @@
+<div>
+    <h2>This is an html page, with a client.jsx that mounts onto it</h2>
+    <div class="jsx-app"></div>
+</div>

examples/type-stripping/tsconfig.json

@@ -5,7 +5,9 @@
     "erasableSyntaxOnly": true,
     "allowImportingTsExtensions": true,
     "rewriteRelativeImportExtensions": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
   },
   "include": [
     "**/*",

lib/build-esbuild/index.js

@@ -91,6 +91,8 @@ export async function buildEsbuild (src, dest, siteData, opts) {
     metafile: true,
     entryNames: '[dir]/[name]-[hash]',
     chunkNames: 'chunks/[ext]/[name]-[hash]',
+    jsx: 'automatic',
+    jsxImportSource: 'preact'
   }
 
   const esbuildSettingsExtends = siteData.esbuildSettings

lib/identify-pages.js

@@ -31,8 +31,8 @@ const jsPageDraftNames = hasTS
   : ['page.draft.js', 'page.draft.mjs', 'page.draft.cjs']
 
 const pageClientNames = hasTS
-  ? ['client.ts', 'client.mts', 'client.cts', 'client.js', 'client.mjs', 'client.cjs']
-  : ['client.js', 'client.mjs', 'client.cjs']
+  ? ['client.tsx', 'client.ts', 'client.mts', 'client.cts', 'client.jsx', 'client.js', 'client.mjs', 'client.cjs']
+  : ['client.jsx', 'client.js', 'client.mjs', 'client.cjs']
 
 const pageVarsNames = hasTS
   ? ['page.vars.ts', 'page.vars.mts', 'page.vars.cts',