swuecho · swuecho · Aug 27, 2021 · Aug 27, 2021 · Aug 27, 2021
diff --git a/.env b/.env
@@ -0,0 +1 @@
+VITE_NAME=My App
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -29,6 +29,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/package.json b/package.json
@@ -9,20 +9,15 @@
     "@testing-library/user-event": "^12.1.10",
     "antd": "^4.16.13",
     "moment": "^2.29.1",
-    "plotly.js": "^2.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-json-view": "^1.21.3",
     "react-plotly.js": "^2.5.1",
-    "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },
-  "proxy": "http://192.168.0.135",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "vite",
+    "build": "vite build"
   },
   "eslintConfig": {
     "extends": [
@@ -44,6 +39,9 @@
   },
   "devDependencies": {
     "@mdx-js/loader": "^1.6.22",
-    "babel-loader": "8.1.0"
+    "@vitejs/plugin-legacy": "^1.5.1",
+    "@vitejs/plugin-react-refresh": "1.3.6",
+    "vite": "2.5.1",
+    "vite-plugin-mdx": "^3.5.6"
   }
 }
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
@@ -3,7 +3,7 @@ import "antd/dist/antd.css";
 
 
 /* eslint-disable import/no-webpack-loader-syntax */
-import Content from '!babel-loader!@mdx-js/loader!./Content.mdx'
+import Content from './Content.mdx'
 
 
 function App() {

diff --git a/src/App.test.js → src/App.test.jsx b/src/App.test.js → src/App.test.jsx
diff --git a/src/Content.mdx b/src/Content.mdx
@@ -1,9 +1,5 @@
-import CbSummary from './components/cb/summary.js'
-import { useRedashQueryData } from "./components/redash/redashData.js";
-import ReactJson from 'react-json-view'
-import CbLessPlot from './components/cb/cbLessPlot';
-import RedashPlot from './components/cb/PlotRedashData.js';
-
+import CbSummary from './components/cb/summary.jsx';
+import CbLessPlot from './components/cb/cbLessPlot.jsx';
 
 export const Box = () => (
   <div style={{padding: 20, backgroundColor: 'tomato'}} />
@@ -12,10 +8,6 @@ export const Box = () => (
 # 可转债观察
 
 <CbSummary/>
-
-<RedashPlot/>
-
-<CbLessPlot></CbLessPlot>
-
+<CbLessPlot/>
 
 <hr/>
diff --git a/src/components/cb/PlotRedashData.js → src/components/cb/PlotRedashData.jsx b/src/components/cb/PlotRedashData.js → src/components/cb/PlotRedashData.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useRedashQueryData } from "../redash/redashData";
 import  RedashRenderer  from "../redash/Renderer";
 

diff --git a/src/components/cb/cbLessPlot.js → src/components/cb/cbLessPlot.jsx b/src/components/cb/cbLessPlot.js → src/components/cb/cbLessPlot.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useRedashQueryData } from "../redash/redashData.js";
 import  RedashRenderer  from "../redash/Renderer";
 

diff --git a/src/components/cb/summary.js → src/components/cb/summary.jsx b/src/components/cb/summary.js → src/components/cb/summary.jsx
diff --git a/src/components/demo/PlotlyDemo.js → src/components/demo/PlotlyDemo.jsx b/src/components/demo/PlotlyDemo.js → src/components/demo/PlotlyDemo.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Plot from 'react-plotly.js';
 
 class BarPlot extends React.Component {

diff --git a/src/components/demo/Redash.js → src/components/demo/Redash.jsx b/src/components/demo/Redash.js → src/components/demo/Redash.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { get } from "lodash";
 import { Editor, Renderer, registeredVisualizations } from "@redash/viz";
 import { Form, Select, Button } from "antd";

diff --git a/src/components/demo/RedashTable.js → src/components/demo/RedashTable.jsx b/src/components/demo/RedashTable.js → src/components/demo/RedashTable.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { useRedashQueryData } from "../redash/redashData";
 import ReactJson from 'react-json-view'
 

diff --git a/...omponents/demo/VisualizationTypeSelect.js → ...mponents/demo/VisualizationTypeSelect.jsx b/...omponents/demo/VisualizationTypeSelect.js → ...mponents/demo/VisualizationTypeSelect.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { filter, sortBy } from "lodash";
 import { Select } from "antd";
 import { registeredVisualizations } from "@redash/viz";

diff --git a/src/components/redash/Renderer.js → src/components/redash/Renderer.jsx b/src/components/redash/Renderer.js → src/components/redash/Renderer.jsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Renderer, updateVisualizationsSettings } from "@redash/viz";
 
 

diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';

diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,36 @@
+import { defineConfig } from "vite";
+import reactRefresh from "@vitejs/plugin-react-refresh";
+
+
+import mdx from 'vite-plugin-mdx'
+
+
+// `options` are passed to `@mdx-js/mdx`
+const mdx_options = {
+  // See https://mdxjs.com/advanced/plugins
+  remarkPlugins: [
+    // E.g. `remark-frontmatter`
+  ],
+  rehypePlugins: [],
+}
+
+
+export default defineConfig({
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://192.168.0.135",
+        changeOrigin: true,
+        secure: false
+      }
+    }
+  },
+  esbuild: {
+    jsxInject: `import React from 'react'`
+  },
+  plugins: [reactRefresh(), mdx(mdx_options),
+  ]
+})
+
+
+
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		import React from "react";
		import { Renderer, updateVisualizationsSettings } from "@redash/viz";


Expand Down