Use swc in dev & prod

.changeset/tall-cars-cough.md

@@ -0,0 +1,5 @@
+---
+'wmr': minor
+---
+
+Use swc to transpile our dfiles

packages/nomodule-plugin/index.js

@@ -87,5 +87,6 @@ function downlevel(code, fileName) {
 			}
 		]
 	});
+
 	return result.code;
 }

packages/wmr/demo/public/index.tsx

@@ -1,4 +1,4 @@
-import { h, render } from 'preact';
+import { render } from 'preact';
 import { LocationProvider, Router } from './lib/loc.js';
 import lazy, { ErrorBoundary } from './lib/lazy.js';
 import Home from './pages/home.js';

packages/wmr/package.json

@@ -92,6 +92,9 @@
 	"jest": {
 		"preset": "jest-puppeteer"
 	},
+	"dependencies": {
+		"@swc/core": "^1.2.49"
+	},
 	"devDependencies": {
 		"@babel/core": "^7.11.6",
 		"@babel/plugin-transform-modules-commonjs": "^7.10.4",
@@ -144,7 +147,6 @@
 		"semver": "^7.3.2",
 		"sirv": "^1.0.6",
 		"stylis": "^4.0.2",
-		"sucrase": "^3.15.0",
 		"tar-stream": "^2.1.3",
 		"terser": "^4.8.0",
 		"tmp-promise": "^3.0.2",

packages/wmr/rollup.config.js

@@ -49,7 +49,7 @@ const config = {
 			}
 		]
 	},
-	external: [...builtins],
+	external: [...builtins, '@swc/core'],
 	// /* Logs all included npm dependencies: */
 	// external(source, importer) {
 	// 	const ch = source[0];

packages/wmr/src/bundler.js

@@ -1,7 +1,5 @@
 import { relative, sep, posix, resolve, dirname } from 'path';
 import * as rollup from 'rollup';
-import htmPlugin from './plugins/htm-plugin.js';
-import sucrasePlugin from './plugins/sucrase-plugin.js';
 import wmrPlugin from './plugins/wmr/plugin.js';
 import wmrStylesPlugin from './plugins/wmr/styles-plugin.js';
 import sassPlugin from './plugins/sass-plugin.js';
@@ -23,6 +21,7 @@ import externalUrlsPlugin from './plugins/external-urls-plugin.js';
 import copyAssetsPlugin from './plugins/copy-assets-plugin.js';
 import nodeBuiltinsPlugin from './plugins/node-builtins-plugin.js';
 import dynamicImportVars from '@rollup/plugin-dynamic-import-vars';
+import swcPlugin from './plugins/swc-plugin.js';
 
 /** @param {string} p */
 const pathToPosix = p => p.split(sep).join(posix.sep);
@@ -36,6 +35,7 @@ const pathToPosix = p => p.split(sep).join(posix.sep);
  * @property {string} [root = ''] cwd without implicit ./public dir
  * @property {string} [publicDir = '']
  * @property {string} [publicPath = '/']
+ * @property {object} [features]
  * @property {string} [out = '.cache']
  * @property {boolean} [sourcemap]
  * @property {boolean} [minify = true]
@@ -72,7 +72,8 @@ export async function bundleProd({
 	plugins,
 	output,
 	minify = true,
-	npmChunks = false
+	npmChunks = false,
+	features
 }) {
 	cwd = cwd || '';
 	root = root || cwd;
@@ -95,19 +96,14 @@ export async function bundleProd({
 		plugins: plugins.concat([
 			nodeBuiltinsPlugin({ production: true }),
 			externalUrlsPlugin(),
-			sucrasePlugin({
-				typescript: true,
-				sourcemap,
-				production: true
-			}),
+			swcPlugin({ jsx: features.jsx, from: features.from }),
 			htmlEntriesPlugin({ cwd, publicDir, publicPath }),
 			(dynamicImportVars.default || dynamicImportVars)({
 				include: /\.(m?jsx?|tsx?)$/,
 				exclude: /\/node_modules\//
 			}),
 			publicPathPlugin({ publicPath }),
 			aliasesPlugin({ aliases, cwd: root }),
-			htmPlugin({ production: true }),
 			sassPlugin({ production: true }),
 			wmrStylesPlugin({ hot: false, cwd }),
 			wmrPlugin({ hot: false }),

packages/wmr/src/lib/compile-single-module.js

@@ -1,7 +1,6 @@
 import * as rollup from 'rollup';
 import wmrPlugin from '../plugins/wmr/plugin.js';
-import htmPlugin from '../plugins/htm-plugin.js';
-import sucrasePlugin from '../plugins/sucrase-plugin.js';
+import swcPlugin from '../plugins/swc-plugin.js';
 // import localNpmPlugin from './plugins/local-npm-plugin.js';
 
 // disabled for now
@@ -47,15 +46,8 @@ export const compileSingleModule = withCache(async (input, { cwd, out }) => {
 					return { id, external: true, moduleSideEffects: true };
 				}
 			},
-			sucrasePlugin({
-				typescript: true,
-				sourcemap: false,
-				production: false
-			}),
-			// localNpmPlugin(),
-			// wmrStylesPlugin({ cwd }),
-			wmrPlugin(),
-			htmPlugin()
+			swcPlugin(),
+			wmrPlugin()
 		]
 	});
 	cache = bundle.cache;

packages/wmr/src/lib/normalize-options.js

@@ -18,7 +18,11 @@ export async function normalizeOptions(options, mode) {
 	options.plugins = [];
 	options.output = [];
 	options.middleware = [];
-	options.features = { preact: true };
+	options.features = {
+		preact: true,
+		jsx: 'h',
+		from: 'preact'
+	};
 
 	// `wmr` / `wmr start` is a development command.
 	// `wmr build` / `wmr serve` are production commands.

packages/wmr/src/plugins/fast-minify.js

@@ -6,6 +6,7 @@ export default function fastMinifyPlugin({ sourcemap = false, warnThreshold = 50
 		name: 'fast-minify',
 		renderChunk(code, chunk) {
 			const start = Date.now();
+
 			const out = terser.minify(code, {
 				sourceMap: sourcemap,
 				mangle: true,

packages/wmr/src/plugins/swc-plugin.js

@@ -0,0 +1,180 @@
+import Visitor from '@swc/core/Visitor.js';
+import swc from '@swc/core';
+
+class JSXImportAppender extends Visitor.default {
+	constructor(options) {
+		super();
+		this.hasJSX = false;
+		this.jsx = options.jsx;
+		this.from = options.from;
+	}
+
+	visitTsType(e) {
+		return e;
+	}
+
+	visitJSXOpeningElement(e) {
+		this.hasJSX = true;
+		return super.visitJSXOpeningElement(e);
+	}
+
+	visitModule(e) {
+		super.visitModule(e);
+
+		if (!this.hasJSX) return e;
+
+		const imports = e.body.filter(d => d.type === 'ImportDeclaration');
+		const preactImport = imports.find(imp => imp.source.value === this.from);
+
+		if (!preactImport) {
+			e.body.unshift({
+				type: 'ImportDeclaration',
+				span: { start: 0, end: 0, ctxt: 0 },
+				specifiers: [
+					{
+						type: 'ImportSpecifier',
+						span: { start: 0, end: 0, ctxt: 0 },
+						local: {
+							type: 'Identifier',
+							span: { start: 0, end: 0, ctxt: 0 },
+							value: this.jsx,
+							typeAnnotation: null,
+							optional: false
+						}
+					},
+					{
+						type: 'ImportSpecifier',
+						span: { start: 0, end: 0, ctxt: 0 },
+						local: {
+							type: 'Identifier',
+							span: { start: 0, end: 0, ctxt: 0 },
+							value: 'Fragment',
+							typeAnnotation: null,
+							optional: false
+						}
+					}
+				],
+				source: {
+					type: 'StringLiteral',
+					span: { start: 0, end: 0, ctxt: 0 },
+					value: this.from,
+					hasEscape: false,
+					kind: { type: 'normal', containsQuote: true }
+				},
+				asserts: null,
+				typeOnly: false
+			});
+
+			return { ...e, body: [...e.body] };
+		}
+
+		const hasH = imports.find(imp => !!imp.specifiers.find(x => x.local.value === this.jsx));
+		if (!hasH) {
+			preactImport.specifiers.push({
+				type: 'ImportSpecifier',
+				span: { start: 0, end: 0, ctxt: 0 },
+				typeAnnotation: null,
+				optional: false,
+				local: {
+					type: 'Identifier',
+					span: { start: 0, end: 0, ctxt: 0 },
+					value: this.jsx,
+					typeAnnotation: null,
+					optional: false
+				}
+			});
+		}
+
+		const hasFrag = imports.find(imp => !!imp.specifiers.find(x => x.local.value === 'Fragment'));
+		if (!hasFrag) {
+			preactImport.specifiers.push({
+				type: 'ImportSpecifier',
+				span: { start: 0, end: 0, ctxt: 0 },
+				typeAnnotation: null,
+				optional: false,
+				local: {
+					type: 'Identifier',
+					span: { start: 0, end: 0, ctxt: 0 },
+					value: 'Fragment',
+					typeAnnotation: null,
+					optional: false
+				}
+			});
+		}
+
+		return { ...e, body: [...e.body] };
+	}
+}
+
+/**
+ * Transform JS/TS files with swc.
+ * @param {object} [opts]
+ * @param {string} [opts.jsx]
+ * @param {string} [opts.from]
+ * @returns {import('rollup').Plugin}
+ */
+const swcPlugin = ({ jsx = 'h', from = 'preact' }) => ({
+	name: 'swc',
+	async transform(code, filename) {
+		if (/^[\0\b]/.test(filename) || !/\.(mjs|jsx?|tsx?)$/.test(filename)) return null;
+
+		let result = { code };
+		if (/tsx?$/.test(filename)) {
+			result = await swc.transform(result.code, {
+				test: '.*.tsx?$',
+				jsc: {
+					loose: true,
+					transform: {
+						react: {
+							pragma: jsx,
+							pragmaFrag: 'Fragment',
+							development: false,
+							throwIfNamespace: false,
+							useBuiltins: false
+						}
+					},
+					parser: {
+						syntax: 'typescript',
+						tsx: true,
+						dynamicImport: true
+					},
+					target: 'es2018'
+				},
+				filename,
+				plugin: m => {
+					return new JSXImportAppender({ jsx, from }).visitModule(m);
+				}
+			});
+		} else {
+			result = await swc.transform(result.code, {
+				test: '.*.jsx?$',
+				jsc: {
+					loose: true,
+					transform: {
+						react: {
+							pragma: jsx,
+							pragmaFrag: 'Fragment',
+							development: false,
+							throwIfNamespace: false,
+							useBuiltins: false
+						}
+					},
+					parser: {
+						syntax: 'ecmascript',
+						jsx: true,
+						dynamicImport: true
+					},
+					target: 'es2018'
+				},
+				filename,
+				plugin: m => {
+					return new JSXImportAppender({ jsx, from }).visitModule(m);
+				}
+			});
+		}
+
+		return result;
+	}
+});
+
+export default swcPlugin;