chore: add example, text-node tree

adds in a few changes for astring-jsx
and an example for handling text node
based children

Author: barelyhuman

lib/ast.js

@@ -1,5 +1,5 @@
 const acorn = require('acorn')
-const generate = require('astring-jsx')
+const generate = require('./astring')
 const jsx = require('acorn-jsx')
 const classFields = require('acorn-class-fields')
 const { importAssertions } = require('acorn-import-assertions')

lib/astring.js

@@ -0,0 +1,43 @@
+// Modified version of astring-jsx to handle
+// certain jsx elements that the upstream astring
+// doesn't handle yet
+// https://github.com/Qard/astring-jsx/issues/8
+
+const astringJSX = require('astring-jsx')
+var extend = require('xtend')
+
+const generator = Object.assign(
+  {
+    JSXFragment: function JSXFragment(node, state) {
+      var output = state.output
+      output.write('<>')
+      for (child of node.children) {
+        this[child.type](child, state)
+      }
+      output.write('</>')
+    },
+    JSXEmptyExpression: function JSXEmptyExpression(node, state) {
+      // do nothing
+    },
+    JSXText: function JSXText(node, state) {
+      var output = state.output
+      output.write(node.value)
+    },
+  },
+  astringJSX.generator
+)
+
+function astring(ast, options) {
+  return astringJSX(
+    ast,
+    extend(
+      {
+        generator: generator,
+      },
+      options
+    )
+  )
+}
+
+astring.generator = generator
+module.exports = astring

lib/plugin.js

@@ -104,15 +104,21 @@ function constructIslandClient(name, importPath) {
   import { render, h } from 'preact';
   
 ${readFileSync(resolve(__dirname, './client/helpers.js'), 'utf8')}
+
+customElements.define("${islandName}", class Island${name} extends HTMLElement {
+  constructor(){
+    super();
+  }
+
+  async connectedCallback() {
+      const c = await import(${JSON.stringify(importPath)});
+      const props = JSON.parse(this.dataset.props  || '{}');
+      mergePropsWithDOM(this,props);
+      render(restoreTree(c.default, props), this, this)
+  }
+})
   
-  customElements.define("${islandName}", class Island${name} extends HTMLElement {
-    async connectedCallback() {
-        const c = await import(${JSON.stringify(importPath)});
-        const props = JSON.parse(this.dataset.props  || '{}');
-        mergePropsWithDOM(this,props);
-        render(restoreTree(c.default, props), this, this)
-    }
-  })`
+  `
 }
 
 /**
@@ -145,7 +151,7 @@ function constructIslandServer(ast, name, options = {}) {
     code = `
     export default function Island${name}(props) {
       return h(Fragment,{},
-        h("${islandName}",{ "data-props": JSON.stringify(props) },h(${name}, props)),
+        h("${islandName}",{ "data-props": JSON.stringify(props) }, h(${name},props)),
         h("script",{async:true, src:"${path.join(
           baseURL,
           scriptBaseName

package-lock.json

@@ -43,7 +43,8 @@
     "acorn-static-class-features": "^1.0.0",
     "astring": "^1.8.6",
     "astring-jsx": "^1.0.1",
-    "esbuild": "^0.18.11"
+    "esbuild": "^0.18.11",
+    "xtend": "^4.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.22.8",

package.json

@@ -0,0 +1,17 @@
+// @island
+
+import { signal } from '@preact/signals'
+import Counter from './Counter'
+import TextIsland from './TextIsland'
+
+const count = signal(0)
+
+export default function Container({ children }) {
+  return (
+    <>
+      <Counter value={count} inc={() => (count.value += 1)} />
+      <Counter value={count} inc={() => (count.value += 1)} />
+      <TextIsland />
+    </>
+  )
+}

playground/Container.js

@@ -1,8 +1,4 @@
 // @island
-import { useState } from 'preact/hooks'
-
-export default function Counter() {
-  const [count, setCount] = useState(0)
-
-  return <button onClick={() => setCount(count + 1)}>{count}</button>
+export default function Counter({ value, inc }) {
+  return <button onClick={inc}>{value}</button>
 }

playground/Counter.js

@@ -0,0 +1,7 @@
+// @island
+import { useState } from 'preact/hooks'
+
+export default function TextIsland() {
+  const [message, setMessage] = useState('Some Text')
+  return <a href="/">{message}</a>
+}

playground/TextIsland.js

@@ -13,19 +13,20 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@preact/signals": "^1.2.0",
     "esbuild": "^0.18.11",
     "express": "^4.18.2",
     "preact": "^10.15.1",
     "preact-render-to-string": "^6.1.0",
     "serve-static": "^1.15.0"
   },
   "devDependencies": {
-    "@rollup/plugin-typescript": "^11.1.2",
-    "rollup": "^3.26.2",
     "@babel/core": "^7.21.0",
+    "@babel/plugin-transform-react-jsx": "^7.21.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@babel/plugin-transform-react-jsx": "^7.21.0",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "rollup": "^3.26.2",
     "tslib": "^2.6.0",
     "typescript": "^5.1.6"
   }