first stage, unfinished

client/admin/admin.less

@@ -1,8 +1,8 @@
-@import 'naturalcrit/styles/reset.less';
+@import './shared/naturalcrit/styles/reset.less';
-@import 'naturalcrit/styles/elements.less';
+@import './shared/naturalcrit/styles/elements.less';
-@import 'naturalcrit/styles/animations.less';
+@import './shared/naturalcrit/styles/animations.less';
-@import 'naturalcrit/styles/colors.less';
+@import './shared/naturalcrit/styles/colors.less';
-@import 'naturalcrit/styles/tooltip.less';
+@import './shared/naturalcrit/styles/tooltip.less';
 @import './themes/fonts/iconFonts/fontAwesome.less';
 
 @import 'font-awesome/css/font-awesome.css';

client/components/splitPane/splitPane.jsx

@@ -1,5 +1,5 @@
-require('./splitPane.less');
+import "./splitPane.less";
-const React = require('react');
+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;

client/components/splitPane/splitPane.less

@@ -1,3 +1,5 @@
+@import './shared/naturalcrit/styles/core.less';
+
 
 .splitPane {
 	position       : relative;

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;

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';
 

client/homebrew/pages/homePage/homePage.less

@@ -1,3 +1,5 @@
+@import './shared/naturalcrit/styles/core.less';
+
 .homePage {
 	position : relative;
 	a.floatingNewButton {

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": {

scripts/dev.js

@@ -1,22 +1,44 @@
-const label = 'dev';
+import express from "express";
-console.time(label);
+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 __dirname = path.dirname(url.fileURLToPath(import.meta.url));
-const less = require('vitreum/steps/less.watch.js');
+const app = express();
-const assets = require('vitreum/steps/assets.watch.js');
-const server = require('vitreum/steps/server.watch.js');
-const livereload = require('vitreum/steps/livereload.js');
 
-const Proj = require('./project.json');
+async function start() {
+	const vite = await createViteServer({
+		server: { middlewareMode: true },
+		root: path.resolve(__dirname, "../client"),
+		appType: "custom",
+	});
 
-Promise.resolve()
+	app.use(vite.middlewares);
-	.then(()=>jsx('homebrew', './client/homebrew/homebrew.jsx', { libs: Proj.libs, shared: ['./shared'] }))
+	app.use("/assets", express.static(path.resolve(__dirname, "../client/assets")));
-	.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))
 
-	.then(()=>assets(Proj.assets, ['./shared', './client']))
+	app.use(/(.*)/, async (req, res, next) => {
-	.then(()=>livereload())
+		try {
-	.then(()=>server('./server.js', ['server']))
+			const parsed = url.parse(req.url);
-	.then(console.timeEnd.bind(console, label))
+			const pathname = parsed.pathname || "/";
-	.catch(console.error);
+
+			// 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();

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 './animations.less';
-@import 'naturalcrit/styles/colors.less';
+@import './colors.less';
-@import 'naturalcrit/styles/tooltip.less';
+@import './tooltip.less';
 @font-face {
 	font-family : 'CodeLight';
 	src         : data-uri('naturalcrit/styles/CODE Light.otf') format('opentype');