Skip to content

Commit

Permalink
Support jsx automatic runtime
Browse files Browse the repository at this point in the history
  • Loading branch information
apple-yagi committed Mar 6, 2022
1 parent 0147e38 commit 6d04640
Show file tree
Hide file tree
Showing 10 changed files with 471 additions and 17 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
node_modules
*.bundle.js
*.bundle.js.map
*.bundle.js.LICENSE.txt

.vscode
3 changes: 3 additions & 0 deletions apps/react-esbuild/Makefile
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.PHONY: hosting
hosting:
cp -R dist/* ../../hosting/html/js
26 changes: 21 additions & 5 deletions apps/react-esbuild/build.js
Original file line number Diff line number Diff line change
@@ -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)}`));
2 changes: 0 additions & 2 deletions apps/react-esbuild/dist/indext.js

This file was deleted.

7 changes: 0 additions & 7 deletions apps/react-esbuild/dist/indext.js.map

This file was deleted.

5 changes: 4 additions & 1 deletion apps/react-esbuild/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
5 changes: 5 additions & 0 deletions apps/react-esbuild/src/pages/indext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import ReactDOM from 'react-dom';

const App = () => <h1>Hello World</h1>;

ReactDOM.render(<App />, document.getElementById('root'));
18 changes: 18 additions & 0 deletions apps/react-esbuild/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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"]
}
Loading

0 comments on commit 6d04640

Please sign in to comment.