chore: Backport much of #793

Co-authored-by: Marvin Hagemeister <[email protected]>

content/en/tutorial/01-vdom.md

@@ -195,7 +195,7 @@ useResult(function(result) {
   var p = result.output.querySelector('p');
   var hasColor = p && p.style && p.style.color === 'purple';
   if (hasEm && hasColor) {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
   }
 }, []);
 ```

content/en/tutorial/02-events.md

@@ -60,7 +60,7 @@ useRealm(function (realm) {
   var win = realm.globalThis;
   var prevConsoleLog = win.console.log;
   win.console.log = function() {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
     return prevConsoleLog.apply(win.console, arguments);
   };
 

content/en/tutorial/03-components.md

@@ -253,7 +253,7 @@ useRealm(function (realm) {
 
   win.console.log = function() {
     if (hasComponent && check) {
-      store.setState({ solved: true });
+      solutionCtx.setSolved(true);
     }
     return prevConsoleLog.apply(win.console, arguments);
   };

content/en/tutorial/04-state.md

@@ -160,7 +160,7 @@ useResult(function () {
       }
 
       if (Number(text2[1]) === Number(text[1]) + 1) {
-        store.setState({ solved: true });
+        solutionCtx.setSolved(true);
       }
     }, 10);
   }

content/en/tutorial/05-refs.md

@@ -132,7 +132,7 @@ function patch(input) {
   input.__patched = true;
   var old = input.focus;
   input.focus = function() {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
     return old.call(this);
   };
 }

content/en/tutorial/07-side-effects.md

@@ -137,7 +137,7 @@ useRealm(function (realm) {
   var prevConsoleLog = win.console.log;
   win.console.log = function(m, s) {
     if (/Count is now/.test(m) && s === 1) {
-      store.setState({ solved: true });
+      solutionCtx.setSolved(true);
     }
     return prevConsoleLog.apply(win.console, arguments);
   };

content/en/tutorial/08-keys.md

@@ -306,7 +306,7 @@ useRealm(function (realm) {
       /learn preact/i.test(c[0].textContent) &&
       /make an awesome app/i.test(c[1].textContent)
     ) {
-      store.setState({ solved: true });
+      solutionCtx.setSolved(true);
     }
   }
 

content/en/tutorial/09-error-handling.md

@@ -97,7 +97,7 @@ useResult(function(result) {
     oe.apply(this, arguments);
     setTimeout(function() {
       if (result.output.textContent.match(/error/i)) {
-        store.setState({ solved: true });
+        solutionCtx.setSolved(true);
       }
     }, 10);
   };

content/kr/tutorial/01-vdom.md

@@ -144,7 +144,7 @@ useResult(function(result) {
   var p = result.output.querySelector('p');
   var hasColor = p && p.style && p.style.color === 'purple';
   if (hasEm && hasColor) {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
   }
 }, []);
 ```

content/kr/tutorial/02-events.md

@@ -53,7 +53,7 @@ useRealm(function (realm) {
   var win = realm.globalThis;
   var prevConsoleLog = win.console.log;
   win.console.log = function() {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
     return prevConsoleLog.apply(win.console, arguments);
   };
 

content/ru/tutorial/01-vdom.md

@@ -151,7 +151,7 @@ useResult(function(result) {
   var p = result.output.querySelector('p');
   var hasColor = p && p.style && p.style.color === 'purple';
   if (hasEm && hasColor) {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
   }
 }, []);
 ```

content/ru/tutorial/02-events.md

@@ -47,7 +47,7 @@ useRealm(function (realm) {
   var win = realm.globalThis;
   var prevConsoleLog = win.console.log;
   win.console.log = function() {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
     return prevConsoleLog.apply(win.console, arguments);
   };
 

content/ru/tutorial/03-components.md

@@ -187,7 +187,7 @@ useRealm(function (realm) {
 
   win.console.log = function() {
     if (hasComponent && check) {
-      store.setState({ solved: true });
+      solutionCtx.setSolved(true);
     }
     return prevConsoleLog.apply(win.console, arguments);
   };

content/ru/tutorial/04-state.md

@@ -112,7 +112,7 @@ useResult(function () {
       }
 
       if (Number(text2[1]) === Number(text[1]) + 1) {
-        store.setState({ solved: true });
+        solutionCtx.setSolved(true);
       }
     }, 10);
   }

content/ru/tutorial/05-refs.md

@@ -102,7 +102,7 @@ function patch(input) {
   input.__patched = true;
   var old = input.focus;
   input.focus = function() {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
     return old.call(this);
   };
 }

content/ru/tutorial/07-side-effects.md

@@ -112,7 +112,7 @@ useRealm(function (realm) {
   var prevConsoleLog = win.console.log;
   win.console.log = function(m, s) {
     if (/Счётчик: /.test(m) && s === 1) {
-      store.setState({ solved: true });
+      solutionCtx.setSolved(true);
     }
     return prevConsoleLog.apply(win.console, arguments);
   };

content/ru/tutorial/08-keys.md

@@ -239,7 +239,7 @@ useRealm(function (realm) {
       /изучить preact/i.test(c[0].textContent) &&
       /сделать крутое приложение/i.test(c[1].textContent)
     ) {
-      store.setState({ solved: true });
+      solutionCtx.setSolved(true);
     }
   }
 

content/ru/tutorial/09-error-handling.md

@@ -72,7 +72,7 @@ useResult(function(result) {
     oe.apply(this, arguments);
     setTimeout(function() {
       if (result.output.textContent.match(/ошибка/i)) {
-        store.setState({ solved: true });
+        solutionCtx.setSolved(true);
       }
     }, 10);
   };

content/zh/tutorial/01-vdom.md

@@ -160,7 +160,7 @@ useResult(function(result) {
   var p = result.output.querySelector('p');
   var hasColor = p && p.style && p.style.color === 'purple';
   if (hasEm && hasColor) {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
   }
 }, []);
 ```

content/zh/tutorial/02-events.md

@@ -47,7 +47,7 @@ useRealm(function (realm) {
   var win = realm.globalThis;
   var prevConsoleLog = win.console.log;
   win.console.log = function() {
-    store.setState({ solved: true });
+    solutionCtx.setSolved(true);
     return prevConsoleLog.apply(win.console, arguments);
   };
 

jsconfig.json

@@ -1,8 +1,8 @@
 {
 	"compilerOptions": {
 		"target": "ESNext",
-		"module": "NodeNext",
-		"moduleResolution": "NodeNext",
+		"module": "ESNext",
+		"moduleResolution": "Node",
 		"resolveJsonModule": true,
 		"jsx": "react-jsx",
 		"jsxImportSource": "preact",

package.json

@@ -16,7 +16,8 @@
     "prebuild": "rimraf build/assets && rimraf build/content",
     "lint": "eslint src test",
     "format": "prettier --write \"{src,test}/**/*.{css,js,json}\"",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "postinstall": "patch-package"
   },
   "eslintConfig": {
     "extends": "developit",
@@ -64,6 +65,7 @@
     "jsdom": "^15.2.1",
     "lint-staged": "^15.2.0",
     "netlify-lambda": "^2.0.16",
+    "patch-package": "^8.0.0",
     "postcss-custom-properties": "^13.3.2",
     "postcss-import": "^14.0.0",
     "postcss-nesting": "^12.0.1",
@@ -88,12 +90,11 @@
     "node-fetch": "^2.6.1",
     "preact": "10.15.1",
     "preact-custom-element": "^4.3.0",
+    "preact-iso": "2.2.0",
     "preact-markup": "^2.1.1",
     "preact-render-to-string": "^5.2.6",
-    "preact-router": "^3.2.1",
     "rollup": "^2.79.1",
     "sucrase": "^3.32.0",
-    "unistore": "^3.5.1",
     "yaml": "^1.7.2"
   }
 }

patches/preact-cli+4.0.0-next.6.patch

@@ -0,0 +1,57 @@
+diff --git a/node_modules/preact-cli/src/lib/webpack/prerender.js b/node_modules/preact-cli/src/lib/webpack/prerender.js
+index 945a4e0..e8323d3 100644
+--- a/node_modules/preact-cli/src/lib/webpack/prerender.js
++++ b/node_modules/preact-cli/src/lib/webpack/prerender.js
+@@ -2,7 +2,7 @@ const { red, yellow } = require('kleur');
+ const { resolve } = require('path');
+ const { readFileSync } = require('fs');
+ const stackTrace = require('stack-trace');
+-const URL = require('url');
++const { URL } = require('url');
+ const { SourceMapConsumer } = require('source-map');
+
+ module.exports = async function (config, params) {
+@@ -11,14 +11,14 @@ module.exports = async function (config, params) {
+ 	let entry = resolve(config.dest, './ssr-build/ssr-bundle.js');
+ 	let url = params.url || '/';
+
+-	global.history = {};
+-	global.location = { ...URL.parse(url) };
++	global.history = /** @type {object} */ ({});
++	global.location = /** @type {object} */ (new URL(url, 'http://localhost'));
+
+ 	try {
+ 		let m = require(entry),
+-			app = (m && m.default) || m;
++			vnode = (m && m.default) || m;
+
+-		if (typeof app !== 'function') {
++		if (typeof vnode !== 'function') {
+ 			// eslint-disable-next-line no-console
+ 			console.warn(
+ 				'Entry does not export a Component function/class, aborting prerendering.'
+@@ -29,7 +29,23 @@ module.exports = async function (config, params) {
+ 		const renderToString = require(require.resolve('preact-render-to-string', {
+ 			paths: [config.cwd],
+ 		}));
+-		return renderToString(preact.h(app, { ...params, url }));
++
++		vnode = preact.h(vnode, { ...params, url });
++
++		// Slightly modified version of preact-iso's `prerender()`
++		let tries;
++		const maxDepth = 10;
++		const render = () => {
++			if (++tries > maxDepth) return;
++			try {
++				return renderToString(vnode);
++			} catch (e) {
++				if (e && e.then) return e.then(render);
++				throw e;
++			}
++		};
++
++		return await render();
+ 	} catch (err) {
+ 		let stack = stackTrace.parse(err).filter(s => s.getFileName() === entry)[0];
+ 		if (!stack) {