From c26b1b9db1bf5d2f13fa3f65267318fdf12e65b5 Mon Sep 17 00:00:00 2001 From: BWangy Date: Wed, 2 Oct 2024 14:43:26 -0400 Subject: [PATCH 1/7] Created vite config file --- package.json | 5 ++++- src/index.html | 1 + vite.config.js | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 vite.config.js diff --git a/package.json b/package.json index 756e847..3c3688f 100644 --- a/package.json +++ b/package.json @@ -99,6 +99,9 @@ "xmldom": "^0.6.0" }, "dependencies": { - "react-blockly": "^8.1.1" + "@vitejs/plugin-react": "^4.3.2", + "react-blockly": "^8.1.1", + "sass": "^1.79.4", + "vite": "^5.4.8" } } diff --git a/src/index.html b/src/index.html index fdac4ce..1a694ef 100644 --- a/src/index.html +++ b/src/index.html @@ -15,5 +15,6 @@
+ diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..50cbde8 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,34 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import path from 'path'; + +export default defineConfig({ + plugins: [react()], + resolve: { + alias: { + '@': path.resolve(__dirname, 'src'), + }, + }, + css: { + modules: { + generateScopedName: '[local]', + }, + preprocessorOptions: { + scss: { + additionalData: `@import "src/styles/variables.scss";`, + }, + }, + }, + build: { + outDir: 'dist', + rollupOptions: { + output: { + entryFileNames: 'romajs_[hash].js', + }, + }, + }, + server: { + port: 3000, + open: true, + }, +}); From 4ef93e03a9b1eff665911b4bb9dad5008e324840 Mon Sep 17 00:00:00 2001 From: BWangy Date: Fri, 1 Nov 2024 15:25:41 -0400 Subject: [PATCH 2/7] Configuring vite --- .babelrc | 2 +- src/index.html => index.html | 4 +-- package.json | 7 ++-- server.js | 63 ++++++++++++++++++++++++++++-------- src/entry-server.js | 41 +++++++++++++++++++++++ src/{index.js => index.jsx} | 11 ++++--- vite.config.js | 20 ++++++++++-- 7 files changed, 124 insertions(+), 24 deletions(-) rename src/index.html => index.html (87%) create mode 100644 src/entry-server.js rename src/{index.js => index.jsx} (89%) diff --git a/.babelrc b/.babelrc index 4687bc4..87dc61d 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["es2015", "react", "stage-0"] + "presets": ["@babel/preset-env", "@babel/preset-react", "stage-0"] } diff --git a/src/index.html b/index.html similarity index 87% rename from src/index.html rename to index.html index 1a694ef..b904ac2 100644 --- a/src/index.html +++ b/index.html @@ -14,7 +14,7 @@ -
- +
+ diff --git a/package.json b/package.json index 3c3688f..ca68845 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "romajs", "version": "1.1.1", "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", @@ -10,8 +11,8 @@ "test: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", + "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 +32,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", diff --git a/server.js b/server.js index e1ac2b2..689cc47 100644 --- 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(``, 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/entry-server.js b/src/entry-server.js new file mode 100644 index 0000000..9d6c791 --- /dev/null +++ b/src/entry-server.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { renderToString } from 'react-dom/server'; +import { Provider } from 'react-redux'; +import thunkMiddleware from 'redux-thunk'; +import { createStore, applyMiddleware } from 'redux'; +import { StaticRouter } from 'react-router-dom/server'; +import { routerMiddleware, ConnectedRouter, connectRouter } from 'connected-react-router'; +import { persistStore, persistCombineReducers } from 'redux-persist'; +import localForage from './localForageConfig'; +import { PersistGate } from 'redux-persist/integration/react'; +import reducers from './reducers'; +import App from './components/App'; +import createHistory from 'history/createMemoryHistory'; + +const persistConf = { + key: 'root', + storage: localForage, + blacklist: ['router'], +}; + +export async function render(url, context) { + const history = createHistory(); + const router = { router: connectRouter(history) }; + const romajsApp = persistCombineReducers(persistConf, Object.assign(reducers, router)); + const store = createStore(romajsApp, applyMiddleware(routerMiddleware(history), thunkMiddleware)); + const persistor = persistStore(store); + + const appHtml = renderToString( + + + + + + + + + + ); + + return appHtml; +} diff --git a/src/index.js b/src/index.jsx similarity index 89% rename from src/index.js rename to src/index.jsx index 5fd3a20..2db4829 100644 --- a/src/index.js +++ b/src/index.jsx @@ -2,6 +2,7 @@ import './scss/romajs.scss' import 'babel-polyfill' import React from 'react' +import ReactDOM from 'react-dom/client' import { render } from 'react-dom' import { Provider } from 'react-redux' import thunkMiddleware from 'redux-thunk' @@ -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,7 +61,7 @@ if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) { const persistor = persistStore(store) -render( +root.render( diff --git a/vite.config.js b/vite.config.js index 50cbde8..7b48eed 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,6 +1,10 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; -import path from 'path'; +import path, { dirname } from 'path'; +import { fileURLToPath } from 'url'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); export default defineConfig({ plugins: [react()], @@ -15,13 +19,16 @@ export default defineConfig({ }, preprocessorOptions: { scss: { - additionalData: `@import "src/styles/variables.scss";`, + additionalData: `@import "src/scss/romajs.scss";`, }, }, }, build: { outDir: 'dist', rollupOptions: { + input: { + main: path.resolve(__dirname, 'src/index.html'), + }, output: { entryFileNames: 'romajs_[hash].js', }, @@ -31,4 +38,13 @@ export default defineConfig({ port: 3000, open: true, }, + esbuild: { + loader: { '.js': '.jsx'}, + include: /src\/.*\.js$/, + exclude: [], + }, + publicDir: 'assets', + define: { + 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) + } }); From 7b921f11853b3230108d6a89133edfee7d688dd2 Mon Sep 17 00:00:00 2001 From: BWangy Date: Fri, 1 Nov 2024 16:36:55 -0400 Subject: [PATCH 3/7] Finishing vite config --- index.html | 4 ++-- package.json | 2 +- src/entry-server.js | 41 ------------------------------------- src/{index.jsx => index.js} | 10 ++++----- vite.config.js | 6 +++--- 5 files changed, 11 insertions(+), 52 deletions(-) delete mode 100644 src/entry-server.js rename src/{index.jsx => index.js} (93%) diff --git a/index.html b/index.html index b904ac2..044aac3 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ -
- +
+ diff --git a/package.json b/package.json index ca68845..a52ce80 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "test:watch": "npm test -- --watch", "test:single": "eslint $SCRIPT && mocha --require babel-core/register --require ./test/setup.js $SCRIPT", "echo": "echo", - "start": "node server.js", + "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" diff --git a/src/entry-server.js b/src/entry-server.js deleted file mode 100644 index 9d6c791..0000000 --- a/src/entry-server.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { renderToString } from 'react-dom/server'; -import { Provider } from 'react-redux'; -import thunkMiddleware from 'redux-thunk'; -import { createStore, applyMiddleware } from 'redux'; -import { StaticRouter } from 'react-router-dom/server'; -import { routerMiddleware, ConnectedRouter, connectRouter } from 'connected-react-router'; -import { persistStore, persistCombineReducers } from 'redux-persist'; -import localForage from './localForageConfig'; -import { PersistGate } from 'redux-persist/integration/react'; -import reducers from './reducers'; -import App from './components/App'; -import createHistory from 'history/createMemoryHistory'; - -const persistConf = { - key: 'root', - storage: localForage, - blacklist: ['router'], -}; - -export async function render(url, context) { - const history = createHistory(); - const router = { router: connectRouter(history) }; - const romajsApp = persistCombineReducers(persistConf, Object.assign(reducers, router)); - const store = createStore(romajsApp, applyMiddleware(routerMiddleware(history), thunkMiddleware)); - const persistor = persistStore(store); - - const appHtml = renderToString( - - - - - - - - - - ); - - return appHtml; -} diff --git a/src/index.jsx b/src/index.js similarity index 93% rename from src/index.jsx rename to src/index.js index 2db4829..16d8363 100644 --- a/src/index.jsx +++ b/src/index.js @@ -2,7 +2,7 @@ import './scss/romajs.scss' import 'babel-polyfill' import React from 'react' -import ReactDOM from 'react-dom/client' +/* import ReactDOM from 'react-dom/client' */ import { render } from 'react-dom' import { Provider } from 'react-redux' import thunkMiddleware from 'redux-thunk' @@ -17,12 +17,12 @@ import { PersistGate } from 'redux-persist/integration/react' import reducers from './reducers' import App from './components/App' -if (import.meta.hot) { +/* if (import.meta.hot) { import.meta.hot.accept() -} +} */ const romajsElement = document.getElementById('romajs') -const root = ReactDOM.createRoot(romajsElement); +/* const root = ReactDOM.createRoot(romajsElement); */ const basename = romajsElement.getAttribute('data-basename') @@ -61,7 +61,7 @@ if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) { const persistor = persistStore(store) -root.render( +render( diff --git a/vite.config.js b/vite.config.js index 7b48eed..e5ede86 100644 --- a/vite.config.js +++ b/vite.config.js @@ -17,11 +17,11 @@ export default defineConfig({ modules: { generateScopedName: '[local]', }, - preprocessorOptions: { + /* preprocessorOptions: { scss: { additionalData: `@import "src/scss/romajs.scss";`, }, - }, + }, */ }, build: { outDir: 'dist', @@ -39,7 +39,7 @@ export default defineConfig({ open: true, }, esbuild: { - loader: { '.js': '.jsx'}, + loader: 'jsx', include: /src\/.*\.js$/, exclude: [], }, From 706295f0c70cf671a78f9b71a906819fe8da5d18 Mon Sep 17 00:00:00 2001 From: BWangy Date: Fri, 8 Nov 2024 14:32:31 -0500 Subject: [PATCH 4/7] Revert babel config file --- .babelrc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.babelrc b/.babelrc index 87dc61d..4687bc4 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["@babel/preset-env", "@babel/preset-react", "stage-0"] + "presets": ["es2015", "react", "stage-0"] } From 14076fb941c3d257be162b70a52dd43f483d59d6 Mon Sep 17 00:00:00 2001 From: BWangy Date: Fri, 15 Nov 2024 10:18:39 -0500 Subject: [PATCH 5/7] Upgraded react --- package.json | 4 ++-- src/index.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index a52ce80..9a474fa 100644 --- a/package.json +++ b/package.json @@ -80,9 +80,9 @@ "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", diff --git a/src/index.js b/src/index.js index 16d8363..6dbce10 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import './scss/romajs.scss' import 'babel-polyfill' import React from 'react' /* import ReactDOM from 'react-dom/client' */ -import { render } from 'react-dom' +import { createRoot } from 'react-dom/client' import { Provider } from 'react-redux' import thunkMiddleware from 'redux-thunk' import { createStore, applyMiddleware } from 'redux' @@ -61,7 +61,8 @@ if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) { const persistor = persistStore(store) -render( +const root = createRoot(romajsElement) +root.render( @@ -69,5 +70,4 @@ render( , - romajsElement ) From 33fdbf798dd3ea496bb921d387715731503618af Mon Sep 17 00:00:00 2001 From: BWangy Date: Fri, 15 Nov 2024 16:10:06 -0500 Subject: [PATCH 6/7] Cleaned up dependencies --- package.json | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 9a474fa..7a1a370 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "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": "vite", "build": "rimraf ./dist && npm run test && cross-env NODE_ENV=\"production\" vite build", @@ -75,11 +76,9 @@ "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": "^18.3.1", "react-ace": "^7.0.4", "react-dom": "^18.3.1", @@ -93,18 +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": { "@vitejs/plugin-react": "^4.3.2", "react-blockly": "^8.1.1", - "sass": "^1.79.4", - "vite": "^5.4.8" + "sass": "^1.81.0", + "vite": "^5.4.11" } } From 717fb854533c84db1d83a3ccf448c8b03796d141 Mon Sep 17 00:00:00 2001 From: Raff Viglianti Date: Tue, 19 Nov 2024 10:07:52 -0500 Subject: [PATCH 7/7] fixed build and cleaned up more --- package.json | 8 ---- vite.config.js | 18 ++++---- webpack.config.js | 103 ---------------------------------------------- 3 files changed, 10 insertions(+), 119 deletions(-) delete mode 100644 webpack.config.js diff --git a/package.json b/package.json index 5feccdb..03d4be0 100644 --- a/package.json +++ b/package.json @@ -33,8 +33,6 @@ }, "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", @@ -56,7 +54,6 @@ "axios": "^1.2.2", "babel-core": "^6.26.3", "babel-eslint": "^7.2.3", - "babel-loader": "^7.1.5", "babel-polyfill": "^6.26.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", @@ -64,16 +61,11 @@ "brace": "^0.11.1", "connected-react-router": "^6.5.2", "cross-env": "^5.2.0", - "css-loader": "^3.2.0", "dotenv": "^16.0.3", - "es6-promise": "^4.2.5", "eslint": "^4.19.1", - "eslint-loader": "^1.9.0", "eslint-plugin-react": "^7.11.1", "expect": "^1.20.2", "express": "^4.16.3", - "extract-text-webpack-plugin": "^3.0.0", - "file-loader": "^1.1.11", "file-saver": "^1.3.8", "form-data": "^2.3.2", "linkedom": "0.14.21", diff --git a/vite.config.js b/vite.config.js index e5ede86..8bf3886 100644 --- a/vite.config.js +++ b/vite.config.js @@ -17,21 +17,23 @@ export default defineConfig({ modules: { generateScopedName: '[local]', }, - /* preprocessorOptions: { - scss: { - additionalData: `@import "src/scss/romajs.scss";`, - }, - }, */ }, build: { + minify: true, outDir: 'dist', rollupOptions: { input: { - main: path.resolve(__dirname, 'src/index.html'), + main: path.resolve(__dirname, './index.html'), }, output: { - entryFileNames: 'romajs_[hash].js', - }, + entryFileNames: 'romajs.js', + assetFileNames: (assetInfo) => { + if (assetInfo.name === "main.css") { + return "romajs.css" + } + return assetInfo.name + } + } }, }, server: { diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 734ac96..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,103 +0,0 @@ -let path = require('path'), - glob = require('glob'), - webpack = require('webpack'), - HtmlWebpackPlugin = require('html-webpack-plugin') - -let DIST_DIR = path.join(__dirname, 'dist'), - CLIENT_DIR = path.join(__dirname, 'src') - -const isDevelopment = process.env.NODE_ENV !== 'production' - -const publicPath = isDevelopment ? '/' : '' - -module.exports = { - context: CLIENT_DIR, - - entry: ['./index'], - - output: { - path: DIST_DIR, - publicPath, - filename: 'romajs_[hash].js' - }, - - plugins: [ - new webpack.EnvironmentPlugin(), - new HtmlWebpackPlugin({ - template: 'index.html', - inject: 'body', - filename: 'index.html', - favicon: '../assets/favicon.ico', - }), - ], - - module: { - - rules: [ - { - test: /\.jsx?$/, - exclude: /node_modules/, - use: ['babel-loader', 'eslint-loader'] - }, - { - test: /\.css$/, - exclude: /node_modules/, - use: [ - { - loader: 'style-loader', - }, - { - loader: 'css-loader', - options: { - modules: { - localIdentName: '[local]' - } - } - } - ] - }, - { - test: /\.scss$/, - use: [ - { - loader: 'style-loader' - }, - { - loader: 'css-loader', - options: { - importLoaders: 2, - modules: { - localIdentName: '[local]' - } - } - }, - { - loader: 'sass-loader', - options: { - outputStyle: 'expanded', - sourceMap: true, - sourceMapContents: true, - includePaths: glob.sync('node_modules').map((d) => path.join(__dirname, d)), - } - } - ] - }, - { - test: /\.(png|jpg|ttf|eot)$/, - exclude: /node_modules/, - use: [ - { - loader: 'url-loader', - options: {limit: 10000} - } - ] - } - ] - }, - - resolve: { - modules: ['node_modules', 'vendor'], - extensions: ['.js', '.json', '.css'] - } - -}