Support jsx automatic runtime

- evanw/esbuild#334

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 *.bundle.js
+*.bundle.js.map
 *.bundle.js.LICENSE.txt
 
 .vscode

apps/react-esbuild/Makefile

@@ -0,0 +1,3 @@
+.PHONY: hosting
+hosting:
+	cp -R dist/* ../../hosting/html/js

apps/react-esbuild/build.js

@@ -1,14 +1,30 @@
 const { build } = require('esbuild');
 
-const isDev = process.env.NODE_ENV === 'development';
+const jsxPluginReact17 = {
+  name: 'jsx-react-17',
+  setup(build) {
+    const fs = require('fs');
+    const babel = require('@babel/core');
+    const plugin = require('@babel/plugin-transform-react-jsx').default(
+      {},
+      { runtime: 'automatic' },
+    );
+
+    build.onLoad({ filter: /\.[t,j]sx$/ }, async (args) => {
+      const jsx = await fs.promises.readFile(args.path, 'utf8');
+      const result = babel.transformSync(jsx, { plugins: [plugin] });
+      return { contents: result.code };
+    });
+  },
+};
 
 build({
-  define: { 'process.env.NODE_ENV': process.env.NODE_ENV },
-  target: 'es2015',
+  target: 'es2019',
   platform: 'browser',
   entryPoints: ['src/pages/indext.tsx'],
-  outdir: 'dist',
+  outfile: 'dist/react-esbuild.bundle.js',
   bundle: true,
-  minify: !isDev,
+  minify: true,
   sourcemap: true,
+  plugins: [jsxPluginReact17],
 }).catch((err) => console.log(`Error: ${JSON.stringify(err)}`));

apps/react-esbuild/package.json

@@ -3,13 +3,16 @@
   "license": "UNLICENSED",
   "private": true,
   "scripts": {
-    "build": "NODE_ENV=\"production\" node ./build.js"
+    "build": "node build.js && make hosting"
   },
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/plugin-transform-react-jsx": "^7.17.3",
+    "@types/react-dom": "^17.0.13",
     "esbuild": "^0.14.25"
   }
 }

apps/react-esbuild/src/pages/indext.tsx

@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom';
+
+const App = () => <h1>Hello World</h1>;
+
+ReactDOM.render(<App />, document.getElementById('root'));

apps/react-esbuild/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["./*"],
+      "@components/*": ["components/*"]
+    }
+  },
+  "exclude": ["./node_modules"]
+}