Switch build process from parcel to @iobroker/adapter-dev using `…

…esbuild` (#838)

CHANGELOG.md

@@ -7,6 +7,7 @@
 -->
 ## __WORK IN PROGRESS__
 * (UncleSamSwiss) Switched from `gulp` to `@iobroker/adapter-dev` (#839) · [Migration guide](docs/updates/20211018_adapter-dev.md)
+* (AlCalzone) Switch build process (React, TypeScript) from `parcel` to `@iobroker/adapter-dev` using `esbuild` (#838) · [Migration guide](docs/updates/20220215_esbuild.md)
 * (AlCalzone) Updated the creator's dependencies (#877)
 * (AlCalzone) Suppress npm messages for deprecated packages, audit and funding (#878)
 * (AlCalzone) Add link to generated adapter in console output (#879)

docs/updates/20220215_esbuild.md

@@ -0,0 +1,68 @@
+# Switch build process from Parcel to ESBuild
+
+[ESBuild](https://github.com/evanw/esbuild) is a next-gen JavaScript bundler which is about **100x faster** than Parcel. In addition, it understands some modern patterns that Parcel doesn't, so it makes sense to switch.
+You can also use it to compile TypeScript adapters faster.
+
+Follow these steps to do use ESBuild in your adapter:
+
+1. If you've been using Parcel before: `npm uninstall -D @babel/cli @babel/core parcel-bundler`
+1. If you've been using Parcel before: remove the `.babelrc` file
+1. Edit `admin/tsconfig.json`:
+    ```diff
+    -		// Support React - both must be here because parcel v1 does not
+    -		// evaluate the "extends" option
+    -		"jsx": "react",
+    -		"esModuleInterop": true
+    +		"jsx": "react"
+    	},
+    ```
+1. Install or update `@iobroker/adapter-dev` using `npm i -D @iobroker/adapter-dev`
+
+1. Update package.json scripts:
+    1. If you want to compile TypeScript only (note: you can stick to compiling with `tsc` if you like):
+        ```diff
+        -    "prebuild": "rimraf ./build",
+        -    "build:ts": "tsc -p tsconfig.build.json",
+        -    "build": "npm run build:ts",
+        -    "watch:ts": "tsc -p tsconfig.build.json --watch",
+        -    "watch": "npm run watch:ts",
+        +    "prebuild": "rimraf build",
+        +    "build": "build-adapter ts",
+        +    "watch": "build-adapter ts --watch",
+        +    "prebuild:ts": "rimraf build",
+        +    "build:ts": "build-adapter ts",
+        +    "watch:ts": "build-adapter ts --watch",
+        ```
+        You can omit the duplicate scripts which end in `:ts`, but leaving them in makes it easier to transition to React later.
+    1. If you want to compile React only:
+        ```diff
+        -    "watch:parcel": "parcel admin/src/index.jsx -d admin/build",
+        -    "build:parcel": "parcel build admin/src/index.jsx -d admin/build",
+        -    "build": "npm run build:parcel",
+        +    "prebuild": "rimraf admin/build",
+        +    "build": "build-adapter react",
+        +    "watch": "build-adapter react --watch",
+        +    "prebuild:react": "rimraf admin/build",
+        +    "build:react": "build-adapter react",
+        +    "watch:react": "build-adapter react --watch",
+        ```
+        You can omit the duplicate scripts which end in `:react`, but leaving them in makes it easier to add TypeScript compilation later.
+    1. If you want to compile both TypeScript and React
+        ```diff
+        -    "prebuild": "rimraf ./build",
+        -    "build:parcel": "parcel build admin/src/index.tsx -d admin/build",
+        -    "build:ts": "tsc -p tsconfig.build.json",
+        -    "build": "npm run build:ts && npm run build:parcel",
+        -    "watch:parcel": "parcel admin/src/index.tsx -d admin/build",
+        -    "watch:ts": "tsc -p tsconfig.build.json --watch",
+        -    "watch": "npm run watch:ts",
+        +    "prebuild": "rimraf build admin/build",
+        +    "build": "build-adapter all",
+        +    "watch": "build-adapter all --watch",
+        +    "prebuild:ts": "rimraf build",
+        +    "build:ts": "build-adapter ts",
+        +    "watch:ts": "build-adapter ts --watch",
+        +    "prebuild:react": "rimraf admin/build",
+        +    "build:react": "build-adapter react",
+        +    "watch:react": "build-adapter react --watch",
+        ```

templates/README.md.ts

@@ -19,18 +19,21 @@ export = (answers => {
 	const isGitHub = answers.target === "github";
 
 	const npmScripts: Record<string, string> = {};
-	if (useReact) {
-		npmScripts["build:parcel"] = "Compile the React sources.";
-		npmScripts["watch:parcel"] = "Compile the React sources and watch for changes.";
-	}
-	if (useTypeScript) {
+	if (useTypeScript && !useReact) {
+		npmScripts["build"] = "Compile the TypeScript sources.";
+		npmScripts["watch"] = "Compile the TypeScript sources and watch for changes.";
+	} else if (useReact && !useTypeScript) {
+		npmScripts["build"] = "Compile the React sources.";
+		npmScripts["watch"] = "Compile the React sources and watch for changes.";
+	} else if (useReact && useTypeScript) {
+		npmScripts["build"] = "Compile the TypeScript and React sources.";
+		npmScripts["watch"] = "Compile the TypeScript and React sources and watch for changes.";
 		npmScripts["build:ts"] = "Compile the TypeScript sources.";
 		npmScripts["watch:ts"] = "Compile the TypeScript sources and watch for changes.";
-		npmScripts["watch"] = "Shortcut for `npm run watch:ts`";
-	}
-	if (useTypeScript && useReact) {
-		npmScripts["build"] = "Compile the TypeScript and the React sources.";
+		npmScripts["build:react"] = "Compile the React sources.";
+		npmScripts["watch:react"] = "Compile the React sources and watch for changes.";
 	}
+
 	if (isAdapter) {
 		if (useTypeScript) {
 			npmScripts["test:ts"] = "Executes the tests you defined in \`*.test.ts\` files.";
@@ -129,6 +132,11 @@ ${Object.entries(npmScripts).map(([name, desc]) => (
 	`| \`${name}\` | ${desc} |`
 )).join("\n")}
 
+${useTypeScript || useReact ? `### Configuring the compilation
+The adapter template uses [esbuild](https://esbuild.github.io/) to compile TypeScript and/or React code. You can configure many compilation settings 
+either in \`tsconfig.json\` or by changing options for the build tasks. These options are described in detail in the
+[\`@iobroker/adapter-dev\` documentation](https://github.com/ioBroker/adapter-dev#compile-adapter-files).` : ""}
+
 ${isAdapter ? `### Writing tests
 When done right, testing code is invaluable, because it gives you the 
 confidence to change your code while knowing exactly if and when 

templates/admin/tsconfig_JS-React.raw.json

@@ -12,18 +12,14 @@
 			"es2018",
 			"DOM"
 		],
-
-		// Support React - both must be here because parcel v1 does not
-		// evaluate the "extends" option
-		"jsx": "react",
-		"esModuleInterop": true
+		"jsx": "react"
 	},
 	"include": [
 		"./**/*.d.ts",
 		"./**/*.jsx",
-		"../src/lib/adapter-config.d.ts"
+		"../lib/adapter-config.d.ts"
 	],
 	"exclude": [
 		"./**/*.test.jsx"
 	]
-}
+}

templates/admin/tsconfig_TS-React.raw.json

@@ -12,11 +12,7 @@
 			"es2018",
 			"DOM"
 		],
-
-		// Support React - both must be here because parcel v1 does not
-		// evaluate the "extends" option
-		"jsx": "react",
-		"esModuleInterop": true
+		"jsx": "react"
 	},
 	"include": [
 		"./**/*.ts",
@@ -27,4 +23,4 @@
 		"./**/*.test.ts",
 		"./**/*.test.tsx"
 	]
-}
+}

templates/index.ts

@@ -5,7 +5,6 @@
 import type { TemplateFunction } from "../src/lib/createAdapter";
 
 const templates: { name: string, templateFunction: TemplateFunction }[] = [
-	{ name: "_babelrc.ts", templateFunction: require("./_babelrc") },
 	{ name: "_create-adapter.json.ts", templateFunction: require("./_create-adapter.json") },
 	{ name: "_devcontainer/devcontainer.json.ts", templateFunction: require("./_devcontainer/devcontainer.json") },
 	{ name: "_devcontainer/docker-compose.yml.ts", templateFunction: require("./_devcontainer/docker-compose.yml") },