docs: add TS with Babel example [skip ci] (#532)

pmmmwh · web-flow · commit b10f81977024 · 2021-11-08T20:43:31.000+01:00
diff --git a/examples/typescript-with-babel/babel.config.js b/examples/typescript-with-babel/babel.config.js
@@ -0,0 +1,14 @@
+module.exports = (api) => {
+  // This caches the Babel config
+  api.cache.using(() => process.env.NODE_ENV);
+  return {
+    presets: [
+      '@babel/preset-env',
+      '@babel/preset-typescript',
+      // Enable development transform of React with new automatic runtime
+      ['@babel/preset-react', { development: !api.env('production'), runtime: 'automatic' }],
+    ],
+    // Applies the react-refresh Babel plugin on non-production modes only
+    ...(!api.env('production') && { plugins: ['react-refresh/babel'] }),
+  };
+};
diff --git a/examples/typescript-with-babel/package.json b/examples/typescript-with-babel/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "using-typescript-with-babel",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0",
+    "@types/react": "^17.0.20",
+    "@types/react-dom": "^17.0.9",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "fork-ts-checker-webpack-plugin": "^6.3.3",
+    "html-webpack-plugin": "^5.3.2",
+    "react-refresh": "^0.10.0",
+    "typescript": "4.4.3",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.1.1"
+  },
+  "scripts": {
+    "start": "webpack serve --hot",
+    "build": "cross-env NODE_ENV=production webpack"
+  }
+}
diff --git a/examples/typescript-with-babel/public/index.html b/examples/typescript-with-babel/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TS React App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/typescript-with-babel/src/App.tsx b/examples/typescript-with-babel/src/App.tsx
@@ -0,0 +1,25 @@
+import { lazy, Suspense } from 'react';
+import { ArrowFunction } from './ArrowFunction';
+import ClassDefault from './ClassDefault';
+import { ClassNamed } from './ClassNamed';
+import FunctionDefault from './FunctionDefault';
+import { FunctionNamed } from './FunctionNamed';
+
+const LazyComponent = lazy(() => import('./LazyComponent'));
+
+function App() {
+  return (
+    <div>
+      <ClassDefault />
+      <ClassNamed />
+      <FunctionDefault />
+      <FunctionNamed />
+      <ArrowFunction />
+      <Suspense fallback={<h1>Loading</h1>}>
+        <LazyComponent />
+      </Suspense>
+    </div>
+  );
+}
+
+export default App;
diff --git a/examples/typescript-with-babel/src/ArrowFunction.tsx b/examples/typescript-with-babel/src/ArrowFunction.tsx
@@ -0,0 +1 @@
+export const ArrowFunction = () => <h1>Arrow Function</h1>;
diff --git a/examples/typescript-with-babel/src/ClassDefault.tsx b/examples/typescript-with-babel/src/ClassDefault.tsx
@@ -0,0 +1,9 @@
+import { Component } from 'react';
+
+class ClassDefault extends Component {
+  render() {
+    return <h1>Default Export Class</h1>;
+  }
+}
+
+export default ClassDefault;
diff --git a/examples/typescript-with-babel/src/ClassNamed.tsx b/examples/typescript-with-babel/src/ClassNamed.tsx
@@ -0,0 +1,7 @@
+import { Component } from 'react';
+
+export class ClassNamed extends Component {
+  render() {
+    return <h1>Named Export Class</h1>;
+  }
+}
diff --git a/examples/typescript-with-babel/src/FunctionDefault.tsx b/examples/typescript-with-babel/src/FunctionDefault.tsx
@@ -0,0 +1,5 @@
+function FunctionDefault() {
+  return <h1>Default Export Function</h1>;
+}
+
+export default FunctionDefault;
diff --git a/examples/typescript-with-babel/src/FunctionNamed.tsx b/examples/typescript-with-babel/src/FunctionNamed.tsx
@@ -0,0 +1,3 @@
+export function FunctionNamed() {
+  return <h1>Named Export Function</h1>;
+}
diff --git a/examples/typescript-with-babel/src/LazyComponent.tsx b/examples/typescript-with-babel/src/LazyComponent.tsx
@@ -0,0 +1,5 @@
+function LazyComponent() {
+  return <h1>Lazy Component</h1>;
+}
+
+export default LazyComponent;
diff --git a/examples/typescript-with-babel/src/index.tsx b/examples/typescript-with-babel/src/index.tsx
@@ -0,0 +1,4 @@
+import { render } from 'react-dom';
+import App from './App';
+
+render(<App />, document.getElementById('app'));
diff --git a/examples/typescript-with-babel/tsconfig.json b/examples/typescript-with-babel/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "target": "ESNext",
+    "sourceMap": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/typescript-with-babel/webpack.config.js b/examples/typescript-with-babel/webpack.config.js
@@ -0,0 +1,33 @@
+const path = require('path');
+const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const isDevelopment = process.env.NODE_ENV !== 'production';
+
+module.exports = {
+  mode: isDevelopment ? 'development' : 'production',
+  entry: {
+    main: './src/index.tsx',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        include: path.join(__dirname, 'src'),
+        use: 'babel-loader',
+      },
+    ],
+  },
+  plugins: [
+    isDevelopment && new ReactRefreshPlugin(),
+    new ForkTsCheckerWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      filename: './index.html',
+      template: './public/index.html',
+    }),
+  ].filter(Boolean),
+  resolve: {
+    extensions: ['.js', '.ts', '.tsx'],
+  },
+};
diff --git a/examples/typescript-with-babel/yarn.lock b/examples/typescript-with-babel/yarn.lock
diff --git a/examples/typescript-with-swc/webpack.config.js b/examples/typescript-with-swc/webpack.config.js
diff --git a/examples/typescript-with-tsc/webpack.config.js b/examples/typescript-with-tsc/webpack.config.js

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const ArrowFunction = () => <h1>Arrow Function</h1>;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function FunctionNamed() {`
	`2`	`+ return <h1>Named Export Function</h1>;`
	`3`	`+}`