Merge branch 'main' into iso-router-reset-scroll

.changeset/dull-bags-attack.md

@@ -0,0 +1,5 @@
+---
+"wmr": patch
+---
+
+Bugfix: Fix a crash when prerendering encounters an error, and show pretty-printed stack traces instead.

.changeset/mean-cycles-change.md

@@ -0,0 +1,5 @@
+---
+"wmr": patch
+---
+
+Bugfix: fixes a crash when initializing Chokidar on some systems

.changeset/odd-singers-explode.md

@@ -0,0 +1,5 @@
+---
+"preact-iso": patch
+---
+
+Bugfix: fix route flashing for routes that render fragments

.changeset/yellow-peas-decide.md

@@ -0,0 +1,5 @@
+---
+"preact-iso": patch
+---
+
+[preact-iso] Prevent the Router from intercepting clicks on links with an "external" target (`target="anything"`).

.github/ISSUE_TEMPLATE/bug_report.md

@@ -25,9 +25,10 @@ Steps to reproduce the behavior:
 A clear and concise description of what you expected to happen.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - WMR Version [e.g. 22]
+ - OS: [e.g. MacOS 11.2.3, Windows 10]
+ - Browser: [e.g. chrome, safari]
+ - Node Version: [e.g. 15.8]
+ - WMR Version: [e.g. 1.3.1]
 
 **Additional context**
 Add any other context about the problem here.

.github/workflows/main.yml

@@ -49,6 +49,9 @@ jobs:
       - name: Test wmr
         if: ${{ needs.changes.outputs.wmr == 'true' }}
         run: yarn workspace wmr test
+      - name: Test wmr (production build)
+        if: ${{ needs.changes.outputs.wmr == 'true' }}
+        run: yarn workspace wmr test-prod
       - name: Test preact-iso
         if: ${{ needs.changes.outputs.preact-iso == 'true' }}
         run: yarn workspace preact-iso test

README.md

@@ -1,5 +1,7 @@
 # WMR
 
+<img src="./docs/public/assets/wmr.svg" alt="wmr logo" width="400">
+
 [![npm](https://img.shields.io/npm/v/wmr.svg)](http://npm.im/wmr)
 [![install size](https://packagephobia.com/badge?p=wmr)](https://packagephobia.com/result?p=wmr)
 [![OpenCollective Backers](https://opencollective.com/preact/backers/badge.svg)](#backers)
@@ -33,7 +35,7 @@ or
 <strong><code>yarn create wmr your-project-name</code></strong>
 
 <p>
-<img width="400" src="https://user-images.githubusercontent.com/105127/100917537-4661e100-34a5-11eb-89bd-565b7bc31919.gif">
+<img width="400" src="https://user-images.githubusercontent.com/105127/100917537-4661e100-34a5-11eb-89bd-565b7bc31919.gif" alt="illustartion of installation to build for wmr">
 </p>
 
 > 💁 If you'd like ESLint to be set up for you, add `--eslint` to the command. _Note: this will use 150mb of disk space._

docs/global.d.ts

@@ -0,0 +1,17 @@
+declare module 'content:*' {
+	interface Item {
+		name: string;
+		nav?: string;
+		title?: string;
+		description?: string;
+		image?: string;
+		[key: string]: string;
+	}
+    const Data: Item[];
+    export = Data;
+}
+
+declare module 'markdown:*' {
+    const Url: string;
+    export = Url;
+}

docs/package.json

@@ -1,11 +1,23 @@
 {
-	"name": "@wmr/docs",
+	"name": "docs",
+	"version": "0.0.0",
+	"private": true,
+	"type": "module",
 	"scripts": {
-		"dev": "wmr",
-		"build": "wmr build --prerender"
+		"start": "wmr",
+		"build": "if-env NETLIFY=true && node --experimental-modules ../packages/wmr/src/cli.js build --prerender || wmr build --prerender",
+		"serve": "wmr serve"
+	},
+	"dependencies": {
+		"preact": "^10.5.13",
+		"preact-iso": "*",
+		"preact-markup": "^2.1.1"
 	},
 	"devDependencies": {
-		"@wmr-plugins/directory-import": "0.1.1",
-		"wmr": "1.3.2"
+		"@wmr-plugins/directory-import": "*",
+		"if-env": "^1.0.4",
+		"marked": "^2.0.1",
+		"wmr": "*",
+		"yaml": "^1.10.2"
 	}
 }

docs/plugins/content.js

@@ -0,0 +1,121 @@
+import marked from 'marked';
+import { promises as fs } from 'fs';
+import path from 'path';
+import yaml from 'yaml';
+
+export default function contentPlugin(config, opts) {
+	config.plugins.push(contentRollupPlugin({ ...config, ...opts }));
+}
+contentPlugin.rollup = contentRollupPlugin;
+
+async function tree(dir, prefix = '') {
+	const entries = await fs.readdir(dir, { withFileTypes: true });
+	const list = await Promise.all(
+		entries.map(entry => {
+			if (entry[0] === '.') return;
+			const name = (prefix ? prefix + '/' : '') + entry.name;
+			if (entry.isDirectory()) return tree(path.join(dir, entry.name), name);
+			return name;
+		})
+	);
+	return list.flat().filter(Boolean);
+}
+
+const FRONT_MATTER_REG = /^\s*---\n\s*([\s\S]*?)\s*\n---\n/i;
+const TITLE_REG = /^\s*#\s+(.+)\n+/;
+async function getMeta(filename) {
+	let meta = {};
+	let content = await fs.readFile(filename, 'utf-8');
+	content = content.replace(FRONT_MATTER_REG, (s, fm) => {
+		meta = yaml.parse('---\n' + fm.replace(/^/gm, '  ') + '\n') || meta;
+		return '';
+	});
+	content = content.replace(TITLE_REG, s => {
+		if (!meta.title) meta.title = s;
+		return '';
+	});
+	content = decodeHtmlEntities(marked(content));
+	if (!meta.description) {
+		let stripped = content.replace(/(?:<(figcaption)[^>]*?>.*?<\/\1>|<.*?>|(?:^|\n)>)/g, '').trim();
+		let desc = stripped.match(/[^\n]+/g)[0];
+		if (desc && desc.length > 200) desc = desc.slice(0, 199) + '…';
+		meta.description = desc;
+	}
+	if (
+		meta.published &&
+		meta.updated &&
+		meta.published.replace(/:\d\d:\d\d/, '') === meta.updated.replace(/:\d\d:\d\d/, '')
+	)
+		delete meta.updated;
+	if (meta.description === meta.meta_description) delete meta.meta_description;
+	if (meta.title === meta.meta_title) delete meta.meta_title;
+	for (let i in meta) if (i[0] === '.' || i[0] === '_') delete meta[i];
+	// we could return all the metadata here, but it's currently unused:
+	// return meta;
+	return {
+		nav: meta.nav || meta.title
+	};
+}
+
+function decodeHtmlEntities(html) {
+	return html.replace(/&(?:#(\d+)|times|apos|quot|amp);/g, (s, n, t) => {
+		switch (t) {
+			case 'times':
+				return '×';
+			case 'apos':
+				return 'ʼ';
+			case 'quot':
+				return '"';
+			case 'amp':
+				return '&';
+		}
+		return String.fromCharCode(n);
+	});
+}
+
+/**
+ *  markdown blog/content plugin for Rollup / WMR
+ */
+function contentRollupPlugin({ cwd, prod, ...opts }) {
+	return {
+		name: 'content',
+		async resolveId(id, importer) {
+			if (id[0] === '\0' || !id.startsWith('content:')) return;
+			id = id.slice(8);
+			if (importer) importer = importer.replace(/^[\0\b]\w+:/g, '');
+			let resolved = await this.resolve(id, importer, { skipSelf: true });
+			if (!resolved) {
+				const r = path.join(path.dirname(importer), id);
+				const s = await fs.stat(r).catch(() => null);
+				if (s && s.isDirectory()) resolved = { id: r };
+			}
+			if (resolved) return '\0content:' + resolved.id.replace(/\/\.$/, '');
+		},
+		async load(id) {
+			if (!id.startsWith('\0content:')) return;
+			id = path.resolve(cwd || '.', id.slice(9));
+			const files = (await tree(id)).filter(file => file.endsWith('.md'));
+			const data = await Promise.all(
+				files.map(async file => {
+					const { slug, ...meta } = await getMeta(path.resolve(id, file));
+					return { name: slug || file.replace(/\.md$/, ''), ...meta };
+				})
+			);
+			data.sort((a, b) => +new Date(b.published) - +new Date(a.published));
+
+			let imports = '';
+
+			const serializeItem = item => {
+				const url = 'markdown:./' + path.posix.relative(path.dirname(id), path.resolve(id, item.name)) + '.md';
+				imports += `import ${JSON.stringify(url)};\n`;
+
+				let str = '{ ';
+				for (let i in item) if (item[i] != null) str += `${i}: ${JSON.stringify(item[i])}, `;
+				return str + '}';
+			};
+
+			const code = 'export default [' + data.map(serializeItem).join(',\n') + '];';
+			return imports + code;
+		}
+	};
+}

docs/plugins/markdown.js

@@ -0,0 +1,58 @@
+import marked from 'marked';
+import yaml from 'yaml';
+import { promises as fs } from 'fs';
+import path from 'path';
+
+export default function markdownPlugin({ plugins, cwd, prod }, opts) {
+	plugins.push(markdownRollupPlugin({ cwd, prod, ...opts }));
+}
+markdownPlugin.rollup = markdownRollupPlugin;
+
+const FRONT_MATTER_REG = /^\s*---\n\s*([\s\S]*?)\s*\n---\n/i;
+const TITLE_REG = /^\s*#\s+(.+)\n+/;
+async function processMarkdown(filename, opts) {
+	let meta = {};
+	let content = await fs.readFile(filename, 'utf-8');
+	content = content.replace(FRONT_MATTER_REG, (s, fm) => {
+		meta = yaml.parse('---\n' + fm.replace(/^/gm, '  ') + '\n') || meta;
+		return '';
+	});
+	// infer title if not specified:
+	content = content.replace(TITLE_REG, s => {
+		if (!meta.title) return (meta.title = s), '';
+		if (meta.title.toLowerCase().trim() === s.toLowerCase().trim()) return '';
+		return s;
+	});
+	// "HTML with JSON frontmatter":
+	return '<!--' + JSON.stringify(meta) + '-->\n' + marked(content, opts);
+}
+
+/**
+ *  markdown plugin for Rollup / WMR
+ *  @example import html from 'markdown:./pages';
+ */
+function markdownRollupPlugin({ cwd, prod, ...opts }) {
+	return {
+		name: 'markdown',
+		async resolveId(id, importer) {
+			if (id[0] === '\0') return;
+			if (id.startsWith('markdown:')) id = id.slice(9);
+			else if (!id.endsWith('.md')) return;
+			if (importer) importer = importer.replace(/^[\0\b]\w+:/g, '');
+			return `\0markdown:${path.join(path.dirname(importer), id)}`;
+		},
+		async load(id) {
+			if (!id.startsWith('\0markdown:')) return;
+			id = path.resolve(cwd || '.', id.slice(10));
+			this.addWatchFile(id);
+
+			const fileId = this.emitFile({
+				type: 'asset',
+				name: path.relative(cwd || '.', id),
+				fileName: path.relative(cwd || '.', id),
+				source: await processMarkdown(id, opts)
+			});
+			return `export default import.meta.ROLLUP_FILE_URL_${fileId}`;
+		}
+	};
+}