Streaming renderer

package.json

@@ -21,6 +21,18 @@
 			"browser": "./dist/jsx.module.js",
 			"require": "./dist/jsx.js"
 		},
+		"./stream": {
+			"types": "./stream.d.ts",
+			"import": "./dist/stream.mjs",
+			"browser": "./dist/stream.module.js",
+			"require": "./dist/stream.js"
+		},
+		"./stream-node": {
+			"types": "./stream-node.d.ts",
+			"import": "./dist/stream-node.mjs",
+			"browser": "./dist/stream-node.module.js",
+			"require": "./dist/stream-node.js"
+		},
 		"./package.json": "./package.json"
 	},
 	"scripts": {
@@ -33,8 +45,8 @@
 		"copy-typescript-definition": "copyfiles -f src/*.d.ts dist",
 		"test": "eslint src test && tsc && npm run test:mocha && npm run test:mocha:compat && npm run test:mocha:debug && npm run bench",
 		"test:mocha": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/*.test.js",
-		"test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/compat.test.js 'test/compat/index.test.js'",
-		"test:mocha:debug": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js test/debug.test.js 'test/debug/index.test.js'",
+		"test:mocha:compat": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/compat/*.test.js'",
+		"test:mocha:debug": "BABEL_ENV=test mocha -r @babel/register -r test/setup.js 'test/debug/index.test.js'",
 		"format": "prettier src/**/*.{d.ts,js} test/**/*.js --write",
 		"prepublishOnly": "npm run build",
 		"release": "npm run build && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish"
@@ -61,7 +73,8 @@
 			"new-cap": 0,
 			"curly": "off",
 			"brace-style": "off",
-			"indent": "off"
+			"indent": "off",
+			"lines-around-comment": "off"
 		},
 		"settings": {
 			"react": {

src/client.js

@@ -0,0 +1,55 @@
+/* eslint-disable no-var, key-spacing, object-curly-spacing, prefer-arrow-callback, semi, keyword-spacing */
+
+function initPreactIslandElement() {
+	class PreactIslandElement extends HTMLElement {
+		connectedCallback() {
+			var d = this;
+			if (!d.isConnected) return;
+
+			let i = this.getAttribute('data-target');
+			if (!i) return;
+
+			var s,
+				e,
+				c = document.createNodeIterator(document, 128);
+			while (c.nextNode()) {
+				let n = c.referenceNode;
+				if (n.data == 'preact-island:' + i) s = n;
+				else if (n.data == '/preact-island:' + i) e = n;
+				if (s && e) break;
+			}
+			if (s && e) {
+				var p = e.previousSibling;
+				while (p != s) {
+					if (!p || p == s) break;
+
+					e.parentNode.removeChild(p);
+					p = e.previousSibling;
+				}
+				while (d.firstChild) e.parentNode.insertBefore(d.firstChild, e);
+
+				d.parentNode.removeChild(d);
+			}
+		}
+	}
+
+	customElements.define('preact-island', PreactIslandElement);
+}
+
+const fn = initPreactIslandElement.toString();
+const INIT_SCRIPT = fn
+	.slice(fn.indexOf('{') + 1, fn.lastIndexOf('}'))
+	.replace(/\n\s+/gm, '');
+
+export function createInitScript() {
+	return `<script>(function(){${INIT_SCRIPT}}())</script>`;
+}
+
+/**
+ * @param {string} id
+ * @param {string} content
+ * @returns {string}
+ */
+export function createSubtree(id, content) {
+	return `<preact-island hidden data-target="${id}">${content}</preact-island>`;
+}

src/constants.js

@@ -4,13 +4,16 @@ export const RENDER = '__r';
 export const DIFFED = 'diffed';
 export const COMMIT = '__c';
 export const SKIP_EFFECTS = '__s';
+export const CATCH_ERROR = '__e';
 
 // VNode properties
 export const COMPONENT = '__c';
 export const CHILDREN = '__k';
 export const PARENT = '__';
+export const MASK = '__m';
 
 // Component properties
 export const VNODE = '__v';
 export const DIRTY = '__d';
 export const NEXT_STATE = '__s';
+export const CHILD_DID_SUSPEND = '__c';

src/index.d.ts

@@ -13,4 +13,16 @@ export function renderToString(
 	options?: Options
 ): string;
 export function shallowRender(vnode: VNode, context?: any): string;
+
+export interface ChunkedOptions {
+	onError(error: unknown): void;
+	onWrite(chunk: string): void;
+	context?: any;
+	abortSignal?: AbortSignal;
+}
+export function renderToChunks(
+	vnode: VNode,
+	options: ChunkedOptions
+): Promise<void>;
+
 export default render;