Merge pull request #20395 from marcofugaro/babel

Rollup: replace Bublè with Babel

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
       - name: Install packages
         run: npm ci
 
@@ -39,7 +39,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
       - name: Install packages
         run: npm ci && npm ci --prefix test
       - name: Build
@@ -63,7 +63,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
       - name: Install packages
         run: npm ci && npm ci --prefix test && sudo apt-get install xvfb
       - name: Build
@@ -81,7 +81,7 @@ jobs:
       - name: Install node
         uses: actions/setup-node@v1
         with:
-          node-version: 10
+          node-version: 12
       - name: Install packages
         run: npm ci
 

package.json

@@ -54,10 +54,11 @@
   "scripts": {
     "start": "npm run dev",
     "test": "npm run test-lint && npm run test-unit",
-    "build": "rollup -c utils/build/rollup.config.js",
+    "build": "rollup -c utils/build/rollup.config.js && npm run lint-fix-build",
     "dev": "concurrently --names \"ROLLUP,HTTP\" -c \"bgBlue.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"http-server -c-1 -p 8080\"",
     "dev-test": "concurrently --names \"ROLLUP,ROLLUPTEST,HTTP\" -c \"bgBlue.bold,bgRed.bold,bgGreen.bold\" \"rollup -c utils/build/rollup.config.js -w -m inline\" \"npm run dev --prefix test\" \"http-server -p 8080\"",
     "lint-fix": "eslint src --ext js --ext ts --fix && eslint examples/js/ --ext js --ext ts --ignore-pattern libs --fix",
+    "lint-fix-build": "eslint build/three.js --fix --quiet",
     "lint-docs": "eslint docs --ext html",
     "lint-examples": "eslint examples/jsm --ext js --ext ts --ignore-pattern libs && tsc -p utils/build/tsconfig-examples.lint.json",
     "test-lint": "eslint src --ext js --ext ts && tsc -p utils/build/tsconfig.lint.json",
@@ -88,6 +89,10 @@
   },
   "homepage": "https://threejs.org/",
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/preset-env": "^7.11.5",
+    "@rollup/plugin-babel": "^5.2.1",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^4.0.0",
     "concurrently": "^5.3.0",
@@ -95,8 +100,7 @@
     "eslint-config-mdcs": "^5.0.0",
     "eslint-plugin-html": "^6.0.3",
     "http-server": "^0.12.3",
-    "rollup": "^2.23.1",
-    "rollup-plugin-buble": "^0.19.8",
+    "rollup": "^2.28.1",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.0.2"
   },

utils/build/rollup.config.js

@@ -1,6 +1,16 @@
-import buble from 'rollup-plugin-buble';
+import babel from "@rollup/plugin-babel";
 import { terser } from "rollup-plugin-terser";
 
+if ( ! String.prototype.replaceAll ) {
+
+	String.prototype.replaceAll = function ( find, replace ) {
+
+		return this.split( find ).join( replace );
+
+	};
+
+}
+
 function glconstants() {
 
 	var constants = {
@@ -202,23 +212,30 @@ function glsl() {
 
 }
 
-function bubleCleanup() {
+function babelCleanup() {
 
+	const wrappedClass = /(var\s*(\w+) = \/\*#__PURE__\*\/function \((\w+)?\) {\s*).*(return \2;\s*}\((\w+)?\);)/gs;
+	const inheritsLoose = /_inheritsLoose\((\w+), (\w+)\);\n/;
+
+	const doubleSpaces = / {2}/g;
 	const danglingTabs = /(^\t+$\n)|(\n^\t+$)/gm;
-	const wrappedClass = /(var (\w+) = \/\*@__PURE__*\*\/\(function \((\w+)\) {\n).*(return \2;\s+}\(\3\)\);\n)/s;
-	const unwrap = function ( match, wrapperStart, klass, parentClass, wrapperEnd ) {
+	const commentOutside = /function (\w+)?\(\)\s*\/\*(.*)\*\/\s*{/g;
+
+	function unwrap( match, wrapperStart, klass, _parentClass, wrapperEnd, parentClass ) {
 
 		return match
 			.replace( wrapperStart, '' )
-			.replace( `if ( ${parentClass} ) ${klass}.__proto__ = ${parentClass};`, '' )
-			.replace(
-				`${klass}.prototype = Object.create( ${parentClass} && ${parentClass}.prototype );`,
-				`${klass}.prototype = Object.create( ${parentClass}.prototype );`
-			)
+			.replace( inheritsLoose, '' )
 			.replace( wrapperEnd, '' )
-			.replace( danglingTabs, '' );
+			.replaceAll( _parentClass, parentClass );
 
-	};
+	}
+
+	function commentInside( match, functionName = '', comment ) {
+
+		return `function ${functionName}(/*${comment}*/) {`;
+
+	}
 
 	return {
 
@@ -226,10 +243,18 @@ function bubleCleanup() {
 
 			while ( wrappedClass.test( code ) ) {
 
-				code = code.replace( wrappedClass, unwrap );
+				code = code
+					.replace( wrappedClass, unwrap );
 
 			}
 
+
+			code = code
+				.replace( commentOutside, commentInside )
+				.replace( doubleSpaces, '\t' )
+				.replace( danglingTabs, '' );
+
+
 			return {
 				code: code,
 				map: null
@@ -255,19 +280,43 @@ function header() {
 
 }
 
+const babelrc = {
+	presets: [
+		[
+			'@babel/preset-env',
+			{
+				modules: false,
+				// the supported browsers of the three.js browser bundle
+				// https://browsersl.ist/?q=%3E0.3%25%2C+not+dead
+				targets: '>0.3%, not dead',
+				loose: true,
+				bugfixes: true,
+			},
+		],
+	],
+	plugins: [
+		[
+			'@babel/plugin-proposal-class-properties',
+			{
+				loose: true
+			}
+		]
+	]
+};
+
 export default [
 	{
 		input: 'src/Three.js',
 		plugins: [
 			glconstants(),
 			glsl(),
-			buble( {
-				transforms: {
-					arrow: false,
-					classes: true
-				}
+			babel( {
+				babelHelpers: 'bundled',
+				compact: false,
+				babelrc: false,
+				...babelrc
 			} ),
-			bubleCleanup(),
+			babelCleanup(),
 			header()
 		],
 		output: [
@@ -284,13 +333,12 @@ export default [
 		plugins: [
 			glconstants(),
 			glsl(),
-			buble( {
-				transforms: {
-					arrow: false,
-					classes: true
-				}
+			babel( {
+				babelHelpers: 'bundled',
+				babelrc: false,
+				...babelrc
 			} ),
-			bubleCleanup(),
+			babelCleanup(),
 			terser(),
 			header()
 		],
@@ -299,7 +347,6 @@ export default [
 				format: 'umd',
 				name: 'THREE',
 				file: 'build/three.min.js',
-				indent: '\t'
 			}
 		]
 	},
@@ -314,7 +361,6 @@ export default [
 			{
 				format: 'esm',
 				file: 'build/three.module.js',
-				indent: '\t'
 			}
 		]
 	}