diff --git a/client/admin/admin.less b/client/admin/admin.less index 0fc353194..acb859f50 100644 --- a/client/admin/admin.less +++ b/client/admin/admin.less @@ -1,8 +1,8 @@ -@import 'naturalcrit/styles/reset.less'; -@import 'naturalcrit/styles/elements.less'; -@import 'naturalcrit/styles/animations.less'; -@import 'naturalcrit/styles/colors.less'; -@import 'naturalcrit/styles/tooltip.less'; +@import './shared/naturalcrit/styles/reset.less'; +@import './shared/naturalcrit/styles/elements.less'; +@import './shared/naturalcrit/styles/animations.less'; +@import './shared/naturalcrit/styles/colors.less'; +@import './shared/naturalcrit/styles/tooltip.less'; @import './themes/fonts/iconFonts/fontAwesome.less'; @import 'font-awesome/css/font-awesome.css'; diff --git a/client/components/splitPane/splitPane.jsx b/client/components/splitPane/splitPane.jsx index 78ba59ed3..1506db265 100644 --- a/client/components/splitPane/splitPane.jsx +++ b/client/components/splitPane/splitPane.jsx @@ -1,5 +1,5 @@ -require('./splitPane.less'); -const React = require('react'); +import "./splitPane.less"; +import React from "react"; const { useState, useEffect } = React; const PANE_WIDTH_KEY = 'HB_editor_splitWidth'; @@ -108,4 +108,4 @@ const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, s ); }; -module.exports = SplitPane; +export default SplitPane; diff --git a/client/components/splitPane/splitPane.less b/client/components/splitPane/splitPane.less index 80a8695af..556cd1996 100644 --- a/client/components/splitPane/splitPane.less +++ b/client/components/splitPane/splitPane.less @@ -1,3 +1,5 @@ +@import './shared/naturalcrit/styles/core.less'; + .splitPane { position : relative; diff --git a/client/homebrew/homebrew.less b/client/homebrew/homebrew.less index 2cbc35857..c550b266f 100644 --- a/client/homebrew/homebrew.less +++ b/client/homebrew/homebrew.less @@ -1,4 +1,4 @@ -@import 'naturalcrit/styles/core.less'; +@import './shared/naturalcrit/styles/core.less'; .homebrew { height : 100%; background-color:@steel; diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 463df333b..3e4f2bfe9 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -4,13 +4,13 @@ import './homePage.less'; // Common imports import React, { useState, useEffect, useRef } from 'react'; import request from '../../utils/request-middleware.js'; -import Markdown from 'markdown.js'; +import Markdown from '../../../../shared/naturalcrit/markdown.js'; import _ from 'lodash'; import { DEFAULT_BREW } from '../../../../server/brewDefaults.js'; import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js'; -import SplitPane from 'client/components/splitPane/splitPane.jsx'; +import SplitPane from '../../../components/splitPane/splitPane.jsx'; import Editor from '../../editor/editor.jsx'; import BrewRenderer from '../../brewRenderer/brewRenderer.jsx'; diff --git a/client/homebrew/pages/homePage/homePage.less b/client/homebrew/pages/homePage/homePage.less index b89c2c7dd..9d39bd642 100644 --- a/client/homebrew/pages/homePage/homePage.less +++ b/client/homebrew/pages/homePage/homePage.less @@ -1,3 +1,5 @@ +@import './shared/naturalcrit/styles/core.less'; + .homePage { position : relative; a.floatingNewButton { diff --git a/package.json b/package.json index 4ee36d620..c5b665b23 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,10 @@ "url": "git://github.com/naturalcrit/homebrewery.git" }, "scripts": { + "viteDev": "node scripts/dev.js", + "viteDevAdmin": "vite --config vite.config.js --ssr client/admin/admin.jsx", + "viteBuild":"vite build", + "viteStart":"vite preview", "dev": "node --experimental-require-module scripts/dev.js", "quick": "node --experimental-require-module scripts/quick.js", "build": "node --experimental-require-module scripts/buildHomebrew.js && node --experimental-require-module scripts/buildAdmin.js", @@ -111,7 +115,7 @@ "idb-keyval": "^6.2.2", "js-yaml": "^4.1.1", "jwt-simple": "^0.5.6", - "less": "^3.13.1", + "less": "^4.5.1", "lodash": "^4.17.21", "marked": "15.0.12", "marked-alignment-paragraphs": "^1.0.0", @@ -135,7 +139,7 @@ "romans": "^3.1.0", "sanitize-filename": "1.6.3", "superagent": "^10.2.1", - "vitreum": "git+https://git@github.com/calculuschild/vitreum.git", + "vite": "^7.3.1", "written-number": "^0.11.1" }, "devDependencies": { diff --git a/scripts/dev.js b/scripts/dev.js index 45f6c3d99..df06ac868 100644 --- a/scripts/dev.js +++ b/scripts/dev.js @@ -1,22 +1,44 @@ -const label = 'dev'; -console.time(label); +import express from "express"; +import { createServer as createViteServer } from "vite"; +import path from "path"; +import url from "url"; +import template from "../client/template.js"; -const jsx = require('vitreum/steps/jsx.watch.js'); -const less = require('vitreum/steps/less.watch.js'); -const assets = require('vitreum/steps/assets.watch.js'); -const server = require('vitreum/steps/server.watch.js'); -const livereload = require('vitreum/steps/livereload.js'); +const __dirname = path.dirname(url.fileURLToPath(import.meta.url)); +const app = express(); -const Proj = require('./project.json'); +async function start() { + const vite = await createViteServer({ + server: { middlewareMode: true }, + root: path.resolve(__dirname, "../client"), + appType: "custom", + }); -Promise.resolve() - .then(()=>jsx('homebrew', './client/homebrew/homebrew.jsx', { libs: Proj.libs, shared: ['./shared'] })) - .then((deps)=>less('homebrew', { shared: ['./shared'] }, deps)) - .then(()=>jsx('admin', './client/admin/admin.jsx', { libs: Proj.libs, shared: ['./shared'] })) - .then((deps)=>less('admin', { shared: ['./shared'] }, deps)) + app.use(vite.middlewares); + app.use("/assets", express.static(path.resolve(__dirname, "../client/assets"))); - .then(()=>assets(Proj.assets, ['./shared', './client'])) - .then(()=>livereload()) - .then(()=>server('./server.js', ['server'])) - .then(console.timeEnd.bind(console, label)) - .catch(console.error); \ No newline at end of file + app.use(/(.*)/, async (req, res, next) => { + try { + const parsed = url.parse(req.url); + const pathname = parsed.pathname || "/"; + + // Ignore vite HMR or ping requests + if (pathname.startsWith("/__vite")) return next(); + + const entry = pathname.startsWith("/admin") ? "admin" : "homebrew"; + + const ssrModule = await vite.ssrLoadModule(`/${entry}/${entry}.jsx`); + + const html = await template(entry, "", { path: pathname, ssrModule }); + res.status(200).set({ "Content-Type": "text/html" }).end(html); + } catch (e) { + vite.ssrFixStacktrace(e); + console.error(e); + res.status(500).end(e.message); + } + }); + + app.listen(8000, () => console.log("Dev server running on http://localhost:8000")); +} + +start(); diff --git a/shared/naturalcrit/styles/core.less b/shared/naturalcrit/styles/core.less index 02db5db18..6b02d1e4e 100644 --- a/shared/naturalcrit/styles/core.less +++ b/shared/naturalcrit/styles/core.less @@ -1,9 +1,9 @@ -@import 'naturalcrit/styles/reset.less'; +@import './reset.less'; //@import 'naturalcrit/styles/elements.less'; -@import 'naturalcrit/styles/animations.less'; -@import 'naturalcrit/styles/colors.less'; -@import 'naturalcrit/styles/tooltip.less'; +@import './animations.less'; +@import './colors.less'; +@import './tooltip.less'; @font-face { font-family : 'CodeLight'; src : data-uri('naturalcrit/styles/CODE Light.otf') format('opentype');