@arcanejs/toolkit 0.5.1 → 1.0.1

package/dist/frontend/index.d.mts

@@ -0,0 +1,8 @@
+import { FrontendComponentRenderers } from '@arcanejs/toolkit-frontend/types';
+
+type ArcaneFrontendOptions = {
+    renderers: FrontendComponentRenderers;
+};
+declare const startArcaneFrontend: (opts: ArcaneFrontendOptions) => void;
+
+export { type ArcaneFrontendOptions, startArcaneFrontend };

package/dist/frontend/index.d.ts

@@ -0,0 +1,8 @@
+import { FrontendComponentRenderers } from '@arcanejs/toolkit-frontend/types';
+
+type ArcaneFrontendOptions = {
+    renderers: FrontendComponentRenderers;
+};
+declare const startArcaneFrontend: (opts: ArcaneFrontendOptions) => void;
+
+export { type ArcaneFrontendOptions, startArcaneFrontend };

package/dist/frontend/index.js

@@ -0,0 +1,123 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/frontend/index.ts
+var _client = require('react-dom/client');
+var _util = require('@arcanejs/toolkit-frontend/util');
+
+// src/frontend/stage.tsx
+var _diff = require('@arcanejs/diff');
+
+
+
+
+
+
+var _react = require('react');
+var _styledcomponents = require('styled-components');
+
+
+
+
+var _styling = require('@arcanejs/toolkit-frontend/styling');
+var _toolkitfrontend = require('@arcanejs/toolkit-frontend');
+var _jsxruntime = require('react/jsx-runtime');
+var Stage = ({ className, renderers }) => {
+  const [root, setRoot] = _react.useState.call(void 0, 
+    void 0
+  );
+  const socket = _react.useRef.call(void 0, null);
+  const preparedRenderers = _react.useMemo.call(void 0, () => {
+    const prepared = {};
+    for (const renderer of renderers) {
+      prepared[renderer.namespace] = renderer;
+    }
+    return prepared;
+  }, [renderers]);
+  const renderComponent = _react.useCallback.call(void 0, 
+    (info) => {
+      const renderer = preparedRenderers[info.namespace];
+      if (!renderer) {
+        throw new Error(`no renderer for namespace ${info.namespace}`);
+      }
+      return renderer.render(info);
+    },
+    [preparedRenderers]
+  );
+  _react.useEffect.call(void 0, () => {
+    initializeWebsocket();
+  }, []);
+  const initializeWebsocket = async () => {
+    console.log("initializing websocket");
+    const wsUrl = new URL(window.location.href);
+    wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(
+      `ws://${window.location.hostname}:${window.location.port}${window.location.pathname}`
+    );
+    ws.onmessage = (event) => {
+      handleMessage(JSON.parse(event.data));
+    };
+    ws.onclose = () => {
+      console.log("socket closed");
+      socket.current = null;
+    };
+    socket.current = new Promise((resolve, reject) => {
+      ws.onopen = () => {
+        resolve(ws);
+      };
+      ws.onerror = (err) => {
+        reject(err);
+        socket.current = null;
+      };
+    });
+    return ws;
+  };
+  const sendMessage = async (msg) => {
+    (await (socket.current || initializeWebsocket())).send(JSON.stringify(msg));
+  };
+  const handleMessage = (msg) => {
+    switch (msg.type) {
+      case "tree-full":
+        setRoot(msg.root);
+        return;
+      case "tree-diff":
+        setRoot((prevRoot) => _diff.patchJson.call(void 0, prevRoot, msg.diff));
+        return;
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _toolkitfrontend.StageContext.Provider,
+    {
+      value: {
+        sendMessage,
+        renderComponent
+      },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _toolkitfrontend.GroupStateWrapper, { openByDefault: false, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className, children: root ? renderComponent(root) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "no-root", children: "No root has been added to the light desk" }) }) })
+    }
+  );
+};
+var StyledStage = _styledcomponents.styled.call(void 0, Stage)`
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+  color: ${_styling.THEME.textNormal};
+  padding: ${_styling.THEME.sizingPx.spacing}px;
+`;
+function rootComponent(props) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styling.BaseStyle, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styling.GlobalStyle, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styledcomponents.ThemeProvider, { theme: _styling.THEME, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledStage, { ...props }) })
+  ] });
+}
+
+// src/frontend/index.ts
+var startArcaneFrontend = (opts) => {
+  _util.initialiseListeners.call(void 0, );
+  const rootElement = document.getElementById("root");
+  if (!rootElement) {
+    throw new Error("Root element not found");
+  }
+  const root = _client.createRoot.call(void 0, rootElement);
+  root.render(rootComponent(opts));
+};
+
+
+exports.startArcaneFrontend = startArcaneFrontend;

package/dist/frontend/index.mjs

@@ -0,0 +1,123 @@
+// src/frontend/index.ts
+import { createRoot } from "react-dom/client";
+import { initialiseListeners } from "@arcanejs/toolkit-frontend/util";
+
+// src/frontend/stage.tsx
+import { patchJson } from "@arcanejs/diff";
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo
+} from "react";
+import { styled, ThemeProvider } from "styled-components";
+import {
+  BaseStyle,
+  GlobalStyle,
+  THEME
+} from "@arcanejs/toolkit-frontend/styling";
+import { GroupStateWrapper, StageContext } from "@arcanejs/toolkit-frontend";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Stage = ({ className, renderers }) => {
+  const [root, setRoot] = useState(
+    void 0
+  );
+  const socket = useRef(null);
+  const preparedRenderers = useMemo(() => {
+    const prepared = {};
+    for (const renderer of renderers) {
+      prepared[renderer.namespace] = renderer;
+    }
+    return prepared;
+  }, [renderers]);
+  const renderComponent = useCallback(
+    (info) => {
+      const renderer = preparedRenderers[info.namespace];
+      if (!renderer) {
+        throw new Error(`no renderer for namespace ${info.namespace}`);
+      }
+      return renderer.render(info);
+    },
+    [preparedRenderers]
+  );
+  useEffect(() => {
+    initializeWebsocket();
+  }, []);
+  const initializeWebsocket = async () => {
+    console.log("initializing websocket");
+    const wsUrl = new URL(window.location.href);
+    wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(
+      `ws://${window.location.hostname}:${window.location.port}${window.location.pathname}`
+    );
+    ws.onmessage = (event) => {
+      handleMessage(JSON.parse(event.data));
+    };
+    ws.onclose = () => {
+      console.log("socket closed");
+      socket.current = null;
+    };
+    socket.current = new Promise((resolve, reject) => {
+      ws.onopen = () => {
+        resolve(ws);
+      };
+      ws.onerror = (err) => {
+        reject(err);
+        socket.current = null;
+      };
+    });
+    return ws;
+  };
+  const sendMessage = async (msg) => {
+    (await (socket.current || initializeWebsocket())).send(JSON.stringify(msg));
+  };
+  const handleMessage = (msg) => {
+    switch (msg.type) {
+      case "tree-full":
+        setRoot(msg.root);
+        return;
+      case "tree-diff":
+        setRoot((prevRoot) => patchJson(prevRoot, msg.diff));
+        return;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    StageContext.Provider,
+    {
+      value: {
+        sendMessage,
+        renderComponent
+      },
+      children: /* @__PURE__ */ jsx(GroupStateWrapper, { openByDefault: false, children: /* @__PURE__ */ jsx("div", { className, children: root ? renderComponent(root) : /* @__PURE__ */ jsx("div", { className: "no-root", children: "No root has been added to the light desk" }) }) })
+    }
+  );
+};
+var StyledStage = styled(Stage)`
+  width: 100%;
+  height: 100%;
+  background-color: #333;
+  color: ${THEME.textNormal};
+  padding: ${THEME.sizingPx.spacing}px;
+`;
+function rootComponent(props) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(BaseStyle, {}),
+    /* @__PURE__ */ jsx(GlobalStyle, {}),
+    /* @__PURE__ */ jsx(ThemeProvider, { theme: THEME, children: /* @__PURE__ */ jsx(StyledStage, { ...props }) })
+  ] });
+}
+
+// src/frontend/index.ts
+var startArcaneFrontend = (opts) => {
+  initialiseListeners();
+  const rootElement = document.getElementById("root");
+  if (!rootElement) {
+    throw new Error("Root element not found");
+  }
+  const root = createRoot(rootElement);
+  root.render(rootComponent(opts));
+};
+export {
+  startArcaneFrontend
+};

package/dist/index.d.mts

@@ -7,7 +7,7 @@ import { WebSocket } from 'ws';
 import { ClientMessage, ServerMessage } from '@arcanejs/protocol';
 import { Group } from './backend/components/group.mjs';
 export { GroupHeader } from './backend/components/group.mjs';
-import { Parent, Component } from './backend/components/base.mjs';
+import { Parent, AnyComponent } from './backend/components/base.mjs';
 export { Button } from './backend/components/button.mjs';
 export { Label } from './backend/components/label.mjs';
 export { Rect } from './backend/components/rect.mjs';
@@ -16,6 +16,7 @@ export { Switch } from './backend/components/switch.mjs';
 export { Tab, Tabs } from './backend/components/tabs.mjs';
 export { TextInput } from './backend/components/text-input.mjs';
 export { Timeline } from './backend/components/timeline.mjs';
+import '@arcanejs/protocol/core';
 import '@arcanejs/protocol/styles';
 import './id-map-DxQ3_gyA.mjs';
 
@@ -28,6 +29,8 @@ declare class Server {
     private readonly onClosedConnection;
     private readonly onMessage;
     private readonly log?;
+    private readonly staticFiles;
+    private readonly entrypointFilename;
     constructor(options: LightDeskOptions, onNewConnection: (connection: Connection) => void, onClosedConnection: (connection: Connection) => void, onMessage: (connection: Connection, message: ClientMessage) => void, log?: Logger | undefined);
     handleHttpRequest: (req: http.IncomingMessage, res: http.ServerResponse) => Promise<void>;
     private sendStaticFile;
@@ -50,6 +53,16 @@ interface LightDeskOptions {
      * but this will be quite verbose.
      */
     log?: Logger;
+    /**
+     * The entrypoint file that should be used to serve the light desk.
+     *
+     * This is only needed if you have defined custom extensions,
+     * and need to load custom frontend code that includes your extensions.
+     *
+     * This will allow access to both the js file and the `.map.js` file,
+     * that matches this name.
+     */
+    entrypointJsFile?: string;
 }
 type InitializationOptions = 
 /** automatically start a simple  */
@@ -87,10 +100,10 @@ declare class Toolkit implements Parent {
     setRoot: (group: Group) => void;
     log(): _arcanejs_protocol_logging.Logger | null;
     updateTree: _.DebouncedFuncLeading<() => void>;
-    removeChild: (component: Component) => void;
+    removeChild: (component: AnyComponent) => void;
     private onNewConnection;
     private onClosedConnection;
     private onMessage;
 }
 
-export { Component, Group, Toolkit };
+export { AnyComponent, Group, Toolkit };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import { WebSocket } from 'ws';
 import { ClientMessage, ServerMessage } from '@arcanejs/protocol';
 import { Group } from './backend/components/group.js';
 export { GroupHeader } from './backend/components/group.js';
-import { Parent, Component } from './backend/components/base.js';
+import { Parent, AnyComponent } from './backend/components/base.js';
 export { Button } from './backend/components/button.js';
 export { Label } from './backend/components/label.js';
 export { Rect } from './backend/components/rect.js';
@@ -16,6 +16,7 @@ export { Switch } from './backend/components/switch.js';
 export { Tab, Tabs } from './backend/components/tabs.js';
 export { TextInput } from './backend/components/text-input.js';
 export { Timeline } from './backend/components/timeline.js';
+import '@arcanejs/protocol/core';
 import '@arcanejs/protocol/styles';
 import './id-map-DxQ3_gyA.js';
 
@@ -28,6 +29,8 @@ declare class Server {
     private readonly onClosedConnection;
     private readonly onMessage;
     private readonly log?;
+    private readonly staticFiles;
+    private readonly entrypointFilename;
     constructor(options: LightDeskOptions, onNewConnection: (connection: Connection) => void, onClosedConnection: (connection: Connection) => void, onMessage: (connection: Connection, message: ClientMessage) => void, log?: Logger | undefined);
     handleHttpRequest: (req: http.IncomingMessage, res: http.ServerResponse) => Promise<void>;
     private sendStaticFile;
@@ -50,6 +53,16 @@ interface LightDeskOptions {
      * but this will be quite verbose.
      */
     log?: Logger;
+    /**
+     * The entrypoint file that should be used to serve the light desk.
+     *
+     * This is only needed if you have defined custom extensions,
+     * and need to load custom frontend code that includes your extensions.
+     *
+     * This will allow access to both the js file and the `.map.js` file,
+     * that matches this name.
+     */
+    entrypointJsFile?: string;
 }
 type InitializationOptions = 
 /** automatically start a simple  */
@@ -87,10 +100,10 @@ declare class Toolkit implements Parent {
     setRoot: (group: Group) => void;
     log(): _arcanejs_protocol_logging.Logger | null;
     updateTree: _.DebouncedFuncLeading<() => void>;
-    removeChild: (component: Component) => void;
+    removeChild: (component: AnyComponent) => void;
     private onNewConnection;
     private onClosedConnection;
     private onMessage;
 }
 
-export { Component, Group, Toolkit };
+export { AnyComponent, Group, Toolkit };

package/dist/index.js

@@ -1,36 +1,36 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2;
 
 
-var _chunkC2TVGO43js = require('./chunk-C2TVGO43.js');
+var _chunkARRRZPUKjs = require('./chunk-ARRRZPUK.js');
 
 
-var _chunkDONU33U4js = require('./chunk-DONU33U4.js');
+var _chunkHNFNG5MDjs = require('./chunk-HNFNG5MD.js');
 
 
-var _chunkFUINWM5Hjs = require('./chunk-FUINWM5H.js');
+var _chunkT4TMVBFMjs = require('./chunk-T4TMVBFM.js');
 
 
 var _chunkEABM5X65js = require('./chunk-EABM5X65.js');
 
 
-var _chunk4X3QY5EPjs = require('./chunk-4X3QY5EP.js');
+var _chunkZLJECS4Hjs = require('./chunk-ZLJECS4H.js');
 
 
 
-var _chunk4HHKW7VAjs = require('./chunk-4HHKW7VA.js');
+var _chunkTOPIQUBZjs = require('./chunk-TOPIQUBZ.js');
 
 
-var _chunkFLRGYURVjs = require('./chunk-FLRGYURV.js');
+var _chunkV5T44HCMjs = require('./chunk-V5T44HCM.js');
 
 
-var _chunkIQ4SDDYPjs = require('./chunk-IQ4SDDYP.js');
+var _chunk5JPYL5IUjs = require('./chunk-5JPYL5IU.js');
 
 
-var _chunk53DEDXHGjs = require('./chunk-53DEDXHG.js');
+var _chunkSIXWXDZWjs = require('./chunk-SIXWXDZW.js');
 
 
-var _chunkQ5TEM6MMjs = require('./chunk-Q5TEM6MM.js');
-require('./chunk-CFO5PSSK.js');
+var _chunk25LALCANjs = require('./chunk-25LALCAN.js');
+require('./chunk-ADH7RZG5.js');
 
 
 var _chunk3RG5ZIWIjs = require('./chunk-3RG5ZIWI.js');
@@ -66,14 +66,6 @@ var DIST_DIR = (() => {
   }
 })();
 var STATIC_FILES = {
-  "/frontend.js": {
-    path: path.join(DIST_DIR, "frontend.js"),
-    contentType: "text/javascript"
-  },
-  "/frontend.js.map": {
-    path: path.join(DIST_DIR, "frontend.js.map"),
-    contentType: "text/plain"
-  },
   [`/${FONTS.materialSymbolsOutlined}`]: {
     path: _chunk3RG5ZIWIjs.__require.resolve("material-symbols/material-symbols-outlined.woff2"),
     contentType: "font/woff2"
@@ -86,8 +78,27 @@ var Server = (_class = class {
     this.onClosedConnection = onClosedConnection;
     this.onMessage = onMessage;
     this.log = log;
-    _optionalChain([log, 'optionalAccess', _14 => _14.debug, 'call', _15 => _15("Static Assets: %o", STATIC_FILES)]);
+    const entrypoint = _nullishCoalesce(this.options.entrypointJsFile, () => ( path.join(DIST_DIR, "frontend", "entrypoint.js")));
+    if (!entrypoint.endsWith(".js")) {
+      throw new Error("Entrypoint file must be a .js file");
+    }
+    const entrypointMap = entrypoint + ".map";
+    this.entrypointFilename = path.basename(entrypoint);
+    this.staticFiles = {
+      ...STATIC_FILES,
+      [`/${this.entrypointFilename}`]: {
+        path: entrypoint,
+        contentType: "text/javascript"
+      },
+      [`/${path.basename(entrypointMap)}`]: {
+        path: entrypointMap,
+        contentType: "text/plain"
+      }
+    };
+    _optionalChain([log, 'optionalAccess', _14 => _14.debug, 'call', _15 => _15("Static Assets: %o", this.staticFiles)]);
   }
+  
+  
   __init() {this.handleHttpRequest = async (req, res) => {
     _optionalChain([this, 'access', _16 => _16.log, 'optionalAccess', _17 => _17.debug, 'call', _18 => _18("handleHttpRequest %s", req.url)]);
     if (req.url === this.options.path) {
@@ -96,10 +107,17 @@ var Server = (_class = class {
             <head>
               <title>Light Desk</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
+              <style type="text/css">
+                @font-face {
+                  font-family: 'Material Symbols Outlined';
+                  font-style: normal;
+                  src: url(${FONTS.materialSymbolsOutlined}) format('woff');
+                }
+              </style>
             </head>
             <body>
               <div id="root"></div>
-              <script type="text/javascript" src="${this.options.path}frontend.js"></script>
+              <script type="text/javascript" src="${this.options.path}${this.entrypointFilename}"></script>
             </body>
           </html>`;
       res.writeHead(200, { "Content-Type": "text/html" });
@@ -108,7 +126,7 @@ var Server = (_class = class {
     }
     if (req.url && req.url.startsWith(this.options.path)) {
       const relativePath = req.url.substr(this.options.path.length - 1);
-      const f = STATIC_FILES[relativePath];
+      const f = this.staticFiles[relativePath];
       if (f) {
         return fs.promises.stat(f.path).then(
           () => {
@@ -279,4 +297,4 @@ var Toolkit = (_class2 = class {
 
 
 
-exports.Button = _chunk4X3QY5EPjs.Button; exports.Group = _chunk4HHKW7VAjs.Group; exports.GroupHeader = _chunk4HHKW7VAjs.GroupHeader; exports.Label = _chunkFLRGYURVjs.Label; exports.Rect = _chunkIQ4SDDYPjs.Rect; exports.SliderButton = _chunk53DEDXHGjs.SliderButton; exports.Switch = _chunkQ5TEM6MMjs.Switch; exports.Tab = _chunkC2TVGO43js.Tab; exports.Tabs = _chunkC2TVGO43js.Tabs; exports.TextInput = _chunkDONU33U4js.TextInput; exports.Timeline = _chunkFUINWM5Hjs.Timeline; exports.Toolkit = Toolkit;
+exports.Button = _chunkZLJECS4Hjs.Button; exports.Group = _chunkTOPIQUBZjs.Group; exports.GroupHeader = _chunkTOPIQUBZjs.GroupHeader; exports.Label = _chunkV5T44HCMjs.Label; exports.Rect = _chunk5JPYL5IUjs.Rect; exports.SliderButton = _chunkSIXWXDZWjs.SliderButton; exports.Switch = _chunk25LALCANjs.Switch; exports.Tab = _chunkARRRZPUKjs.Tab; exports.Tabs = _chunkARRRZPUKjs.Tabs; exports.TextInput = _chunkHNFNG5MDjs.TextInput; exports.Timeline = _chunkT4TMVBFMjs.Timeline; exports.Toolkit = Toolkit;

package/dist/index.mjs

@@ -1,36 +1,36 @@
 import {
   Tab,
   Tabs
-} from "./chunk-H734NV65.mjs";
+} from "./chunk-PXYXUWXE.mjs";
 import {
   TextInput
-} from "./chunk-KR6LSBBX.mjs";
+} from "./chunk-ISHGZXPO.mjs";
 import {
   Timeline
-} from "./chunk-DBSYI5Z4.mjs";
+} from "./chunk-LX5IL6WX.mjs";
 import {
   IDMap
 } from "./chunk-RGHJEMWG.mjs";
 import {
   Button
-} from "./chunk-G5QXW2L3.mjs";
+} from "./chunk-EFNFSHV3.mjs";
 import {
   Group,
   GroupHeader
-} from "./chunk-KBPQZJKE.mjs";
+} from "./chunk-5TGGF5UJ.mjs";
 import {
   Label
-} from "./chunk-JOW3XRQI.mjs";
+} from "./chunk-OAPIVG6M.mjs";
 import {
   Rect
-} from "./chunk-ESMRIWOM.mjs";
+} from "./chunk-BDBRQJSI.mjs";
 import {
   SliderButton
-} from "./chunk-SN2XKRYX.mjs";
+} from "./chunk-IBIEYR3L.mjs";
 import {
   Switch
-} from "./chunk-Q3NG5UUN.mjs";
-import "./chunk-PW7QVLLF.mjs";
+} from "./chunk-SBHNIFAS.mjs";
+import "./chunk-7SZA6JUN.mjs";
 import {
   __require
 } from "./chunk-Y6FXYEAI.mjs";
@@ -66,14 +66,6 @@ var DIST_DIR = (() => {
   }
 })();
 var STATIC_FILES = {
-  "/frontend.js": {
-    path: path.join(DIST_DIR, "frontend.js"),
-    contentType: "text/javascript"
-  },
-  "/frontend.js.map": {
-    path: path.join(DIST_DIR, "frontend.js.map"),
-    contentType: "text/plain"
-  },
   [`/${FONTS.materialSymbolsOutlined}`]: {
     path: __require.resolve("material-symbols/material-symbols-outlined.woff2"),
     contentType: "font/woff2"
@@ -86,8 +78,27 @@ var Server = class {
     this.onClosedConnection = onClosedConnection;
     this.onMessage = onMessage;
     this.log = log;
-    log?.debug("Static Assets: %o", STATIC_FILES);
+    const entrypoint = this.options.entrypointJsFile ?? path.join(DIST_DIR, "frontend", "entrypoint.js");
+    if (!entrypoint.endsWith(".js")) {
+      throw new Error("Entrypoint file must be a .js file");
+    }
+    const entrypointMap = entrypoint + ".map";
+    this.entrypointFilename = path.basename(entrypoint);
+    this.staticFiles = {
+      ...STATIC_FILES,
+      [`/${this.entrypointFilename}`]: {
+        path: entrypoint,
+        contentType: "text/javascript"
+      },
+      [`/${path.basename(entrypointMap)}`]: {
+        path: entrypointMap,
+        contentType: "text/plain"
+      }
+    };
+    log?.debug("Static Assets: %o", this.staticFiles);
   }
+  staticFiles;
+  entrypointFilename;
   handleHttpRequest = async (req, res) => {
     this.log?.debug("handleHttpRequest %s", req.url);
     if (req.url === this.options.path) {
@@ -96,10 +107,17 @@ var Server = class {
             <head>
               <title>Light Desk</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
+              <style type="text/css">
+                @font-face {
+                  font-family: 'Material Symbols Outlined';
+                  font-style: normal;
+                  src: url(${FONTS.materialSymbolsOutlined}) format('woff');
+                }
+              </style>
             </head>
             <body>
               <div id="root"></div>
-              <script type="text/javascript" src="${this.options.path}frontend.js"></script>
+              <script type="text/javascript" src="${this.options.path}${this.entrypointFilename}"></script>
             </body>
           </html>`;
       res.writeHead(200, { "Content-Type": "text/html" });
@@ -108,7 +126,7 @@ var Server = class {
     }
     if (req.url && req.url.startsWith(this.options.path)) {
       const relativePath = req.url.substr(this.options.path.length - 1);
-      const f = STATIC_FILES[relativePath];
+      const f = this.staticFiles[relativePath];
       if (f) {
         return fs.promises.stat(f.path).then(
           () => {