Use swc for JSX & TypeScript

Author: moonglum

lib/bundle/babel.js

@@ -2,7 +2,7 @@
 
 let { loadExtension } = require("faucet-pipeline-core/lib/util");
 
-module.exports = function generateTranspiler({ esnext, jsx, exclude }, { browsers }) {
+module.exports = function generateTranspiler({ esnext, exclude }, { browsers }) {
 	let settings = {
 		babelHelpers: "bundled"
 	};
@@ -30,12 +30,6 @@ module.exports = function generateTranspiler({ esnext, jsx, exclude }, { browser
 		];
 	}
 
-	if(jsx) {
-		let { pragma, pragmaFrag } = jsx;
-		plugins.push(["@babel/plugin-transform-react-jsx",
-			{ pragma, pragmaFrag }]);
-	}
-
 	if(plugins.length) {
 		settings.plugins = plugins;
 	}

lib/bundle/config.js

@@ -2,6 +2,7 @@
 "use strict";
 
 let generateTranspiler = require("./babel");
+let { generateSWCConfig } = require("./swc");
 let { loadExtension, abort, repr } = require("faucet-pipeline-core/lib/util");
 let commonjs = require("@rollup/plugin-commonjs");
 let { nodeResolve } = require("@rollup/plugin-node-resolve");
@@ -52,22 +53,24 @@ function generateConfig({ externals, format, exports, // eslint-disable-next-lin
 	let plugins = [];
 	let extensions = [".js"];
 
-	if(esnext || jsx) {
-		let transpiler = Object.assign({}, esnext, jsx);
-		if(esnext) {
-			transpiler.esnext = true;
-		}
+	if(typescript || jsx) {
+		// TODO: Improve error message (correct extension name)
+		let { default: swc } = loadExtension("rollup-plugin-swc",
+				"failed to activate SWC");
+
 		if(jsx) {
 			extensions.push(".jsx");
-			// just to be safe, discard JSX-specifics on parent object
-			delete transpiler.pragma;
-			delete transpiler.fragment;
-
-			transpiler.jsx = selectiveAssign({}, {
-				pragma: jsx.pragma,
-				pragmaFrag: jsx.fragment
-			});
 		}
+		if(typescript) {
+			extensions.push(".ts");
+		}
+		let swcConfig = generateSWCConfig({ typescript, jsx, sourcemaps });
+		plugins.push(swc(swcConfig));
+	}
+
+	if(esnext) {
+		let transpiler = Object.assign({}, esnext);
+		transpiler.esnext = true;
 
 		let { browserslist } = transpiler;
 		browsers = browserslist === false ? null : browsers[browserslist || "defaults"];
@@ -78,13 +81,6 @@ function generateConfig({ externals, format, exports, // eslint-disable-next-lin
 		let { plugin } = generateTranspiler(transpiler, { browsers });
 		plugins.push(plugin);
 	}
-	if(typescript) {
-		let ts = loadExtension("@rollup/plugin-typescript",
-				"failed to activate TypeScript", "faucet-pipeline-typescript");
-		extensions.push(".ts");
-		// TODO: provide defaults and abstractions for low-level options?
-		plugins.push(typescript === true ? ts() : ts(typescript));
-	}
 
 	plugins = plugins.concat([
 		nodeResolve({ extensions }),
@@ -157,13 +153,3 @@ function determineCompacting(type = true) {
 			"failed to activate minification", "faucet-pipeline-jsmin");
 	return terser(options);
 }
-
-// merges `source` properties into `target`, skipping `undefined` values
-function selectiveAssign(target, source) {
-	Object.entries(source).forEach(([key, value]) => {
-		if(value !== undefined) {
-			target[key] = value;
-		}
-	});
-	return target;
-}

lib/bundle/swc.js

@@ -0,0 +1,36 @@
+exports.generateSWCConfig = function({ typescript, jsx, sourcemaps }) {
+	let jsc = {
+		parser: {
+			syntax: typescript ? "typescript" : "ecmascript"
+		},
+		// Disable es3 / es5 / es2015 transforms
+		target: "es2016"
+	};
+
+	if(jsx) {
+		if(typescript) {
+			jsc.parser.tsx = true;
+		} else {
+			jsc.parser.jsx = true;
+		}
+
+		jsc.transform = {
+			react: {
+				pragma: jsx?.pragma,
+				pragmaFrag: jsx?.fragment
+
+				// TODO: Improve JSX Handling
+				// https://github.com/faucet-pipeline/faucet-pipeline-js/issues/144
+				// https://swc.rs/docs/configuration/compilation#jsctransformreact
+			}
+		};
+	}
+
+	if(sourcemaps) {
+		jsc.sourcemaps = "inline";
+	}
+
+	return {
+		jsc
+	};
+};

pkg/faucet-pipeline-jsx/package.json

@@ -13,7 +13,7 @@
 		"url": "https://github.com/faucet-pipeline/faucet-pipeline-js/issues"
 	},
 	"dependencies": {
-		"@babel/plugin-transform-react-jsx": "~7.17.3",
-		"faucet-pipeline-esnext": "2.1.8"
+		"@swc/core": "^1.2.145",
+		"rollup-plugin-swc": "^0.2.1"
 	}
 }

pkg/faucet-pipeline-typescript/package.json

@@ -16,9 +16,7 @@
 		"url": "https://github.com/faucet-pipeline/faucet-pipeline-js/issues"
 	},
 	"dependencies": {
-		"@rollup/plugin-typescript": "~8.3.1",
-		"faucet-pipeline-js": "2.1.8",
-		"tslib": "~2.3.1",
-		"typescript": "~4.6.2"
+		"@swc/core": "^1.2.145",
+		"rollup-plugin-swc": "^0.2.1"
 	}
 }

test/cli/test_jsx/expected.js

@@ -27,7 +27,7 @@ var MyComponent = /*#__PURE__*/_createClass(function MyComponent() {
   _classCallCheck(this, MyComponent);
 });
 
-var el = createElement(MyComponent, {
+var el = /*#__PURE__*/createElement(MyComponent, {
   type: "dummy"
-}, createElement("my-element", null, "lorem ipsum", createElement(Fragment, null, createElement("mark", null, "666"), "dolor sit amet")));
+}, /*#__PURE__*/createElement("my-element", null, "lorem ipsum", /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("mark", null, "666"), "dolor sit amet")));
 console.log(el);

test/cli/test_typescript/expected.js

@@ -1,23 +1,22 @@
 var LogLevel;
-(function (LogLevel) {
+(function(LogLevel) {
     LogLevel[LogLevel["Debug"] = 0] = "Debug";
     LogLevel[LogLevel["Info"] = 1] = "Info";
     LogLevel[LogLevel["Critical"] = 2] = "Critical";
 })(LogLevel || (LogLevel = {}));
 function log(level, msg) {
     if (level === LogLevel.Critical) {
         console.error(msg);
-    }
-    else {
+    } else {
         console.log(msg);
     }
 }
 
-var generateArticle = function (params) {
-    var title = params.title, authors = params.authors;
+let generateArticle = (params)=>{
+    let { title , authors  } = params;
     if (typeof title !== "string") {
         log(LogLevel.Debug, "auto-generating title");
-        title = "".concat(title.main, ": ").concat(title.sub);
+        title = `${title.main}: ${title.sub}`;
     }
     return title + "\n" + authors.join(", ");
 };
@@ -26,5 +25,8 @@ generateArticle({
         main: "Hello World",
         sub: "sup"
     },
-    authors: ["foo", "bar"]
+    authors: [
+        "foo",
+        "bar"
+    ]
 });