diff --git a/src/index.html b/index.html similarity index 93% rename from src/index.html rename to index.html index fdac4ce..044aac3 100644 --- a/src/index.html +++ b/index.html @@ -15,5 +15,6 @@
+ diff --git a/package.json b/package.json index ba1c94e..5feccdb 100644 --- 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 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/index.js b/src/index.js index 5fd3a20..6dbce10 100644 --- 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,7 +61,8 @@ if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) { const persistor = persistStore(store) -render( +const root = createRoot(romajsElement) +root.render( @@ -66,5 +70,4 @@ render( , - romajsElement ) diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..e5ede86 --- /dev/null +++ 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) + } +});