Merge branch 'dev' of https://github.com/BWangy/romajs into BWangy-dev

TEIC · Nov 19, 2024 · 14b97ee · 14b97ee
2 parents ae8981d + 33fdbf7
commit 14b97ee
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 34 deletions.
diff --git a/src/index.html → index.html b/src/index.html → index.html
@@ -15,5 +15,6 @@
   </head>
   <body>
     <div id="romajs" data-basename=""></div>
+    <script type="module" src="/src/index.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -2,16 +2,18 @@
   "name": "romajs",
   "version": "1.2.0",
   "description": "Roma: a TEI customization tool in React+Redux",
+  "type": "module",
   "main": "index.js",
   "scripts": {
     "test": "npm run eslint && mocha --recursive --require babel-core/register --require ./test/setup.js",
     "test:nolint": "mocha --recursive --require babel-core/register --require ./test/setup.js",
     "test:watch": "npm test -- --watch",
     "test:single": "eslint $SCRIPT && mocha --require babel-core/register --require ./test/setup.js $SCRIPT",
+    "testw:single": "eslint %SCRIPT% && mocha --require babel-core/register --require ./test/setup.js %SCRIPT%",
     "echo": "echo",
-    "start": "node server.js",
-    "build": "rimraf ./dist && npm run test && cross-env NODE_ENV=\"production\" webpack",
-    "lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
+    "start": "vite",
+    "build": "rimraf ./dist && npm run test && cross-env NODE_ENV=\"production\" vite build",
+    "lint-break-on-errors": "eslint ./source/js ./vite.config.js -f table --ext .js --ext .jsx",
     "eslint": "eslint src test"
   },
   "repository": {
@@ -31,6 +33,8 @@
   },
   "homepage": "https://github.com/TEIC/romajs#readme",
   "devDependencies": {
+    "@babel/preset-env": "^7.25.8",
+    "@babel/preset-react": "^7.25.7",
     "@material/button": "0.43.0",
     "@material/card": "0.43.0",
     "@material/checkbox": "0.43.0",
@@ -72,14 +76,12 @@
     "file-loader": "^1.1.11",
     "file-saver": "^1.3.8",
     "form-data": "^2.3.2",
-    "html-webpack-plugin": "^2.30.1",
     "linkedom": "0.14.21",
     "localforage": "^1.10.0",
     "mocha": "^6.2.0",
-    "node-sass": "^7.0.3",
-    "react": "^16.9.0",
+    "react": "^18.3.1",
     "react-ace": "^7.0.4",
-    "react-dom": "^16.9.0",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.1.1",
     "react-resize-detector": "^4.0.5",
     "react-router": "^5.0.1",
@@ -90,15 +92,12 @@
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
     "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.7",
-    "style-loader": "^0.18.2",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.12.0",
-    "webpack-dev-middleware": "^1.12.0",
-    "webpack-hot-middleware": "^2.23.1",
     "xmldom": "^0.6.0"
   },
   "dependencies": {
-    "react-blockly": "^8.1.1"
+    "@vitejs/plugin-react": "^4.3.2",
+    "react-blockly": "^8.1.1",
+    "sass": "^1.81.0",
+    "vite": "^5.4.11"
   }
 }
diff --git a/server.js b/server.js
@@ -1,19 +1,53 @@
-const path = require('path')
-const webpack = require('webpack')
+import path from 'path'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+import express from 'express'
+import { createServer as createViteServer } from 'vite'
+/* const webpack = require('webpack')
 const webpackDevMiddleware = require('webpack-dev-middleware')
 const webpackHotMiddleware = require('webpack-hot-middleware')
-const config = require('./webpack.config')
+const config = require('./webpack.config') */
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 const distDir = path.join(__dirname, 'dist')
 const htmlFile = path.join(distDir, 'index.html')
 
 const isDevelopment = process.env.NODE_ENV !== 'production'
-const express = require('express')
 const app = express()
 const port = 3000
 
 app.use('/fakeData', express.static('test/fakeData'))
 
-if (isDevelopment) {
+async function startServer() {
+  /* if (isDevelopment) { */
+    const vite = await createViteServer({
+      server: { middlewareMode: 'html' }
+    });
+    app.use(vite.middlewares);
+
+    app.get('*', async (req, res, next) => {
+      console.log("H")
+      try {
+        const url = req.originalUrl;
+        let template = fs.readFileSync(
+          path.resolve(__dirname, 'index.html'),
+          'utf-8',
+        )
+        const { render } = await vite.ssrLoadModule('/src/entry-server.js');
+        const appHtml = await render(url);
+        const html = template.replace(`<!--ssr-outlet-->`, appHtml);
+        res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
+      } catch (e) {
+        vite.ssrFixStacktrace(e);
+        next(e);
+      }
+    });
+  /* } else {
+    app.use(express.static(distDir));
+    app.get('*', (req, res) => {console.log("Here"); res.sendFile(path.join(distDir, 'index.html'))});
+  } */
+
+/* if (isDevelopment) {
   config.devtool = 'inline-source-map'
   config.entry.push('webpack-hot-middleware/client')
   config.plugins.push(new webpack.HotModuleReplacementPlugin())
@@ -30,13 +64,16 @@ if (isDevelopment) {
 } else {
   app.use(express.static(distDir))
   app.get('*', (req, res) => res.sendFile(path.join(distDir, 'index.html')))
-}
+} */
 
 
-app.listen(port, function(error) {
-  if (error) {
-    console.error(error)
-  } else {
-    console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
-  }
-})
+  app.listen(port, function(error) {
+    if (error) {
+      console.error(error)
+    } else {
+      console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
+    }
+  });
+}
+
+startServer();
diff --git a/src/index.js b/src/index.js
@@ -2,7 +2,8 @@ import './scss/romajs.scss'
 
 import 'babel-polyfill'
 import React from 'react'
-import { render } from 'react-dom'
+/* import ReactDOM from 'react-dom/client' */
+import { createRoot } from 'react-dom/client'
 import { Provider } from 'react-redux'
 import thunkMiddleware from 'redux-thunk'
 import { createStore, applyMiddleware } from 'redux'
@@ -12,15 +13,17 @@ import createHistory from 'history/createBrowserHistory'
 import { persistStore, persistCombineReducers } from 'redux-persist'
 /* import storage from 'redux-persist/es/storage' */
 import localForage from './localForageConfig'
-import { PersistGate } from 'redux-persist/es/integration/react'
+import { PersistGate } from 'redux-persist/integration/react'
 import reducers from './reducers'
 import App from './components/App'
 
-if (module.hot) {
-  module.hot.accept()
-}
+/* if (import.meta.hot) {
+  import.meta.hot.accept()
+} */
 
 const romajsElement = document.getElementById('romajs')
+/* const root = ReactDOM.createRoot(romajsElement); */
+
 const basename = romajsElement.getAttribute('data-basename')
 
 const history = createHistory({ basename })
@@ -58,13 +61,13 @@ if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
 
 const persistor = persistStore(store)
 
-render(
+const root = createRoot(romajsElement)
+root.render(
   <Provider store={store}>
     <PersistGate persistor={persistor}>
       <ConnectedRouter history={history}>
         <App/>
       </ConnectedRouter>
     </PersistGate>
   </Provider>,
-  romajsElement
 )
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,50 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  css: {
+    modules: {
+      generateScopedName: '[local]',
+    },
+    /* preprocessorOptions: {
+      scss: {
+        additionalData: `@import "src/scss/romajs.scss";`,
+      },
+    }, */
+  },
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      input: {
+        main: path.resolve(__dirname, 'src/index.html'),
+      },
+      output: {
+        entryFileNames: 'romajs_[hash].js',
+      },
+    },
+  },
+  server: {
+    port: 3000,
+    open: true,
+  },
+  esbuild: {
+    loader: 'jsx',
+    include: /src\/.*\.js$/,
+    exclude: [],
+  },
+  publicDir: 'assets',
+  define: {
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+  }
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,5 +15,6 @@ @@
       </head>
       <body>
         <div id="romajs" data-basename=""></div>
+        <script type="module" src="/src/index.js"></script>
       </body>
     </html>