@arcanejs/toolkit 0.5.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/backend/components/base.d.mts +25 -22
- package/dist/backend/components/base.d.ts +25 -22
- package/dist/backend/components/base.js +2 -2
- package/dist/backend/components/base.mjs +1 -1
- package/dist/backend/components/button.d.mts +5 -3
- package/dist/backend/components/button.d.ts +5 -3
- package/dist/backend/components/button.js +3 -3
- package/dist/backend/components/button.mjs +2 -2
- package/dist/backend/components/group.d.mts +6 -4
- package/dist/backend/components/group.d.ts +6 -4
- package/dist/backend/components/group.js +3 -3
- package/dist/backend/components/group.mjs +2 -2
- package/dist/backend/components/label.d.mts +4 -3
- package/dist/backend/components/label.d.ts +4 -3
- package/dist/backend/components/label.js +3 -3
- package/dist/backend/components/label.mjs +2 -2
- package/dist/backend/components/rect.d.mts +4 -3
- package/dist/backend/components/rect.d.ts +4 -3
- package/dist/backend/components/rect.js +3 -3
- package/dist/backend/components/rect.mjs +2 -2
- package/dist/backend/components/slider-button.d.mts +6 -4
- package/dist/backend/components/slider-button.d.ts +6 -4
- package/dist/backend/components/slider-button.js +3 -3
- package/dist/backend/components/slider-button.mjs +2 -2
- package/dist/backend/components/switch.d.mts +6 -4
- package/dist/backend/components/switch.d.ts +6 -4
- package/dist/backend/components/switch.js +3 -3
- package/dist/backend/components/switch.mjs +2 -2
- package/dist/backend/components/tabs.d.mts +9 -8
- package/dist/backend/components/tabs.d.ts +9 -8
- package/dist/backend/components/tabs.js +3 -3
- package/dist/backend/components/tabs.mjs +2 -2
- package/dist/backend/components/text-input.d.mts +6 -4
- package/dist/backend/components/text-input.d.ts +6 -4
- package/dist/backend/components/text-input.js +3 -3
- package/dist/backend/components/text-input.mjs +2 -2
- package/dist/backend/components/timeline.d.mts +4 -3
- package/dist/backend/components/timeline.d.ts +4 -3
- package/dist/backend/components/timeline.js +3 -3
- package/dist/backend/components/timeline.mjs +2 -2
- package/dist/backend/util/index.d.mts +1 -1
- package/dist/backend/util/index.d.ts +1 -1
- package/dist/{chunk-Q5TEM6MM.js → chunk-25LALCAN.js} +17 -7
- package/dist/{chunk-IQ4SDDYP.js → chunk-5JPYL5IU.js} +3 -2
- package/dist/{chunk-KBPQZJKE.mjs → chunk-5TGGF5UJ.mjs} +17 -5
- package/dist/{chunk-PW7QVLLF.mjs → chunk-7SZA6JUN.mjs} +34 -3
- package/dist/{chunk-CFO5PSSK.js → chunk-ADH7RZG5.js} +54 -23
- package/dist/{chunk-C2TVGO43.js → chunk-ARRRZPUK.js} +5 -3
- package/dist/{chunk-ESMRIWOM.mjs → chunk-BDBRQJSI.mjs} +2 -1
- package/dist/{chunk-G5QXW2L3.mjs → chunk-EFNFSHV3.mjs} +16 -4
- package/dist/chunk-HNFNG5MD.js +55 -0
- package/dist/{chunk-SN2XKRYX.mjs → chunk-IBIEYR3L.mjs} +14 -4
- package/dist/{chunk-KR6LSBBX.mjs → chunk-ISHGZXPO.mjs} +14 -3
- package/dist/{chunk-DBSYI5Z4.mjs → chunk-LX5IL6WX.mjs} +2 -1
- package/dist/{chunk-JOW3XRQI.mjs → chunk-OAPIVG6M.mjs} +2 -1
- package/dist/{chunk-H734NV65.mjs → chunk-PXYXUWXE.mjs} +3 -1
- package/dist/{chunk-Q3NG5UUN.mjs → chunk-SBHNIFAS.mjs} +14 -4
- package/dist/{chunk-53DEDXHG.js → chunk-SIXWXDZW.js} +17 -7
- package/dist/{chunk-FUINWM5H.js → chunk-T4TMVBFM.js} +3 -2
- package/dist/{chunk-4HHKW7VA.js → chunk-TOPIQUBZ.js} +21 -9
- package/dist/{chunk-FLRGYURV.js → chunk-V5T44HCM.js} +3 -2
- package/dist/{chunk-4X3QY5EP.js → chunk-ZLJECS4H.js} +19 -7
- package/dist/{frontend.js → frontend/entrypoint.js} +20292 -20253
- package/dist/frontend/entrypoint.js.map +7 -0
- package/dist/frontend/index.d.mts +8 -0
- package/dist/frontend/index.d.ts +8 -0
- package/dist/frontend/index.js +143 -0
- package/dist/frontend/index.mjs +143 -0
- package/dist/index.d.mts +16 -3
- package/dist/index.d.ts +16 -3
- package/dist/index.js +33 -22
- package/dist/index.mjs +32 -21
- package/package.json +55 -29
- package/dist/chunk-DONU33U4.js +0 -44
- package/dist/frontend.js.map +0 -7
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FrontendComponentRenderers } from '@arcanejs/toolkit-frontend/types';
|
|
2
|
+
|
|
3
|
+
type ArcaneFrontendOptions = {
|
|
4
|
+
renderers: FrontendComponentRenderers;
|
|
5
|
+
};
|
|
6
|
+
declare const startArcaneFrontend: (opts: ArcaneFrontendOptions) => void;
|
|
7
|
+
|
|
8
|
+
export { type ArcaneFrontendOptions, startArcaneFrontend };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FrontendComponentRenderers } from '@arcanejs/toolkit-frontend/types';
|
|
2
|
+
|
|
3
|
+
type ArcaneFrontendOptions = {
|
|
4
|
+
renderers: FrontendComponentRenderers;
|
|
5
|
+
};
|
|
6
|
+
declare const startArcaneFrontend: (opts: ArcaneFrontendOptions) => void;
|
|
7
|
+
|
|
8
|
+
export { type ArcaneFrontendOptions, startArcaneFrontend };
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/frontend/index.ts
|
|
2
|
+
var _client = require('react-dom/client');
|
|
3
|
+
var _util = require('@arcanejs/toolkit-frontend/util');
|
|
4
|
+
|
|
5
|
+
// src/frontend/stage.tsx
|
|
6
|
+
var _diff = require('@arcanejs/diff');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
var _react = require('react');
|
|
14
|
+
var _styledcomponents = require('styled-components');
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
var _styling = require('@arcanejs/toolkit-frontend/styling');
|
|
20
|
+
var _toolkitfrontend = require('@arcanejs/toolkit-frontend');
|
|
21
|
+
|
|
22
|
+
// src/frontend/styling.ts
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
// src/shared/static.ts
|
|
26
|
+
var FONTS = {
|
|
27
|
+
materialSymbolsOutlined: "material-symbols-outlined.woff2"
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
// src/frontend/styling.ts
|
|
31
|
+
var MaterialFontStyle = _styledcomponents.createGlobalStyle`
|
|
32
|
+
@font-face {
|
|
33
|
+
font-family: 'Material Symbols Outlined';
|
|
34
|
+
font-style: normal;
|
|
35
|
+
src: url(${FONTS.materialSymbolsOutlined}) format('woff');
|
|
36
|
+
}
|
|
37
|
+
`;
|
|
38
|
+
|
|
39
|
+
// src/frontend/stage.tsx
|
|
40
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
41
|
+
var Stage = ({ className, renderers }) => {
|
|
42
|
+
const [root, setRoot] = _react.useState.call(void 0,
|
|
43
|
+
void 0
|
|
44
|
+
);
|
|
45
|
+
const socket = _react.useRef.call(void 0, null);
|
|
46
|
+
const preparedRenderers = _react.useMemo.call(void 0, () => {
|
|
47
|
+
const prepared = {};
|
|
48
|
+
for (const renderer of renderers) {
|
|
49
|
+
prepared[renderer.namespace] = renderer;
|
|
50
|
+
}
|
|
51
|
+
return prepared;
|
|
52
|
+
}, [renderers]);
|
|
53
|
+
const renderComponent = _react.useCallback.call(void 0,
|
|
54
|
+
(info) => {
|
|
55
|
+
const renderer = preparedRenderers[info.namespace];
|
|
56
|
+
if (!renderer) {
|
|
57
|
+
throw new Error(`no renderer for namespace ${info.namespace}`);
|
|
58
|
+
}
|
|
59
|
+
return renderer.render(info);
|
|
60
|
+
},
|
|
61
|
+
[preparedRenderers]
|
|
62
|
+
);
|
|
63
|
+
_react.useEffect.call(void 0, () => {
|
|
64
|
+
initializeWebsocket();
|
|
65
|
+
}, []);
|
|
66
|
+
const initializeWebsocket = async () => {
|
|
67
|
+
console.log("initializing websocket");
|
|
68
|
+
const wsUrl = new URL(window.location.href);
|
|
69
|
+
wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
|
|
70
|
+
const ws = new WebSocket(
|
|
71
|
+
`ws://${window.location.hostname}:${window.location.port}${window.location.pathname}`
|
|
72
|
+
);
|
|
73
|
+
ws.onmessage = (event) => {
|
|
74
|
+
handleMessage(JSON.parse(event.data));
|
|
75
|
+
};
|
|
76
|
+
ws.onclose = () => {
|
|
77
|
+
console.log("socket closed");
|
|
78
|
+
socket.current = null;
|
|
79
|
+
};
|
|
80
|
+
socket.current = new Promise((resolve, reject) => {
|
|
81
|
+
ws.onopen = () => {
|
|
82
|
+
resolve(ws);
|
|
83
|
+
};
|
|
84
|
+
ws.onerror = (err) => {
|
|
85
|
+
reject(err);
|
|
86
|
+
socket.current = null;
|
|
87
|
+
};
|
|
88
|
+
});
|
|
89
|
+
return ws;
|
|
90
|
+
};
|
|
91
|
+
const sendMessage = async (msg) => {
|
|
92
|
+
(await (socket.current || initializeWebsocket())).send(JSON.stringify(msg));
|
|
93
|
+
};
|
|
94
|
+
const handleMessage = (msg) => {
|
|
95
|
+
switch (msg.type) {
|
|
96
|
+
case "tree-full":
|
|
97
|
+
setRoot(msg.root);
|
|
98
|
+
return;
|
|
99
|
+
case "tree-diff":
|
|
100
|
+
setRoot((prevRoot) => _diff.patchJson.call(void 0, prevRoot, msg.diff));
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
105
|
+
_toolkitfrontend.StageContext.Provider,
|
|
106
|
+
{
|
|
107
|
+
value: {
|
|
108
|
+
sendMessage,
|
|
109
|
+
renderComponent
|
|
110
|
+
},
|
|
111
|
+
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" }) }) })
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
};
|
|
115
|
+
var StyledStage = _styledcomponents.styled.call(void 0, Stage)`
|
|
116
|
+
width: 100%;
|
|
117
|
+
height: 100%;
|
|
118
|
+
background-color: #333;
|
|
119
|
+
color: ${_styling.THEME.textNormal};
|
|
120
|
+
padding: ${_styling.THEME.sizingPx.spacing}px;
|
|
121
|
+
`;
|
|
122
|
+
function rootComponent(props) {
|
|
123
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
124
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styling.BaseStyle, {}),
|
|
125
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styling.GlobalStyle, {}),
|
|
126
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, MaterialFontStyle, {}),
|
|
127
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _styledcomponents.ThemeProvider, { theme: _styling.THEME, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledStage, { ...props }) })
|
|
128
|
+
] });
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// src/frontend/index.ts
|
|
132
|
+
var startArcaneFrontend = (opts) => {
|
|
133
|
+
_util.initialiseListeners.call(void 0, );
|
|
134
|
+
const rootElement = document.getElementById("root");
|
|
135
|
+
if (!rootElement) {
|
|
136
|
+
throw new Error("Root element not found");
|
|
137
|
+
}
|
|
138
|
+
const root = _client.createRoot.call(void 0, rootElement);
|
|
139
|
+
root.render(rootComponent(opts));
|
|
140
|
+
};
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
exports.startArcaneFrontend = startArcaneFrontend;
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
// src/frontend/index.ts
|
|
2
|
+
import { createRoot } from "react-dom/client";
|
|
3
|
+
import { initialiseListeners } from "@arcanejs/toolkit-frontend/util";
|
|
4
|
+
|
|
5
|
+
// src/frontend/stage.tsx
|
|
6
|
+
import { patchJson } from "@arcanejs/diff";
|
|
7
|
+
import {
|
|
8
|
+
useState,
|
|
9
|
+
useRef,
|
|
10
|
+
useCallback,
|
|
11
|
+
useEffect,
|
|
12
|
+
useMemo
|
|
13
|
+
} from "react";
|
|
14
|
+
import { styled, ThemeProvider } from "styled-components";
|
|
15
|
+
import {
|
|
16
|
+
BaseStyle,
|
|
17
|
+
GlobalStyle,
|
|
18
|
+
THEME
|
|
19
|
+
} from "@arcanejs/toolkit-frontend/styling";
|
|
20
|
+
import { GroupStateWrapper, StageContext } from "@arcanejs/toolkit-frontend";
|
|
21
|
+
|
|
22
|
+
// src/frontend/styling.ts
|
|
23
|
+
import { createGlobalStyle } from "styled-components";
|
|
24
|
+
|
|
25
|
+
// src/shared/static.ts
|
|
26
|
+
var FONTS = {
|
|
27
|
+
materialSymbolsOutlined: "material-symbols-outlined.woff2"
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
// src/frontend/styling.ts
|
|
31
|
+
var MaterialFontStyle = createGlobalStyle`
|
|
32
|
+
@font-face {
|
|
33
|
+
font-family: 'Material Symbols Outlined';
|
|
34
|
+
font-style: normal;
|
|
35
|
+
src: url(${FONTS.materialSymbolsOutlined}) format('woff');
|
|
36
|
+
}
|
|
37
|
+
`;
|
|
38
|
+
|
|
39
|
+
// src/frontend/stage.tsx
|
|
40
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
41
|
+
var Stage = ({ className, renderers }) => {
|
|
42
|
+
const [root, setRoot] = useState(
|
|
43
|
+
void 0
|
|
44
|
+
);
|
|
45
|
+
const socket = useRef(null);
|
|
46
|
+
const preparedRenderers = useMemo(() => {
|
|
47
|
+
const prepared = {};
|
|
48
|
+
for (const renderer of renderers) {
|
|
49
|
+
prepared[renderer.namespace] = renderer;
|
|
50
|
+
}
|
|
51
|
+
return prepared;
|
|
52
|
+
}, [renderers]);
|
|
53
|
+
const renderComponent = useCallback(
|
|
54
|
+
(info) => {
|
|
55
|
+
const renderer = preparedRenderers[info.namespace];
|
|
56
|
+
if (!renderer) {
|
|
57
|
+
throw new Error(`no renderer for namespace ${info.namespace}`);
|
|
58
|
+
}
|
|
59
|
+
return renderer.render(info);
|
|
60
|
+
},
|
|
61
|
+
[preparedRenderers]
|
|
62
|
+
);
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
initializeWebsocket();
|
|
65
|
+
}, []);
|
|
66
|
+
const initializeWebsocket = async () => {
|
|
67
|
+
console.log("initializing websocket");
|
|
68
|
+
const wsUrl = new URL(window.location.href);
|
|
69
|
+
wsUrl.protocol = wsUrl.protocol === "https:" ? "wss:" : "ws:";
|
|
70
|
+
const ws = new WebSocket(
|
|
71
|
+
`ws://${window.location.hostname}:${window.location.port}${window.location.pathname}`
|
|
72
|
+
);
|
|
73
|
+
ws.onmessage = (event) => {
|
|
74
|
+
handleMessage(JSON.parse(event.data));
|
|
75
|
+
};
|
|
76
|
+
ws.onclose = () => {
|
|
77
|
+
console.log("socket closed");
|
|
78
|
+
socket.current = null;
|
|
79
|
+
};
|
|
80
|
+
socket.current = new Promise((resolve, reject) => {
|
|
81
|
+
ws.onopen = () => {
|
|
82
|
+
resolve(ws);
|
|
83
|
+
};
|
|
84
|
+
ws.onerror = (err) => {
|
|
85
|
+
reject(err);
|
|
86
|
+
socket.current = null;
|
|
87
|
+
};
|
|
88
|
+
});
|
|
89
|
+
return ws;
|
|
90
|
+
};
|
|
91
|
+
const sendMessage = async (msg) => {
|
|
92
|
+
(await (socket.current || initializeWebsocket())).send(JSON.stringify(msg));
|
|
93
|
+
};
|
|
94
|
+
const handleMessage = (msg) => {
|
|
95
|
+
switch (msg.type) {
|
|
96
|
+
case "tree-full":
|
|
97
|
+
setRoot(msg.root);
|
|
98
|
+
return;
|
|
99
|
+
case "tree-diff":
|
|
100
|
+
setRoot((prevRoot) => patchJson(prevRoot, msg.diff));
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
return /* @__PURE__ */ jsx(
|
|
105
|
+
StageContext.Provider,
|
|
106
|
+
{
|
|
107
|
+
value: {
|
|
108
|
+
sendMessage,
|
|
109
|
+
renderComponent
|
|
110
|
+
},
|
|
111
|
+
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" }) }) })
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
};
|
|
115
|
+
var StyledStage = styled(Stage)`
|
|
116
|
+
width: 100%;
|
|
117
|
+
height: 100%;
|
|
118
|
+
background-color: #333;
|
|
119
|
+
color: ${THEME.textNormal};
|
|
120
|
+
padding: ${THEME.sizingPx.spacing}px;
|
|
121
|
+
`;
|
|
122
|
+
function rootComponent(props) {
|
|
123
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
124
|
+
/* @__PURE__ */ jsx(BaseStyle, {}),
|
|
125
|
+
/* @__PURE__ */ jsx(GlobalStyle, {}),
|
|
126
|
+
/* @__PURE__ */ jsx(MaterialFontStyle, {}),
|
|
127
|
+
/* @__PURE__ */ jsx(ThemeProvider, { theme: THEME, children: /* @__PURE__ */ jsx(StyledStage, { ...props }) })
|
|
128
|
+
] });
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// src/frontend/index.ts
|
|
132
|
+
var startArcaneFrontend = (opts) => {
|
|
133
|
+
initialiseListeners();
|
|
134
|
+
const rootElement = document.getElementById("root");
|
|
135
|
+
if (!rootElement) {
|
|
136
|
+
throw new Error("Root element not found");
|
|
137
|
+
}
|
|
138
|
+
const root = createRoot(rootElement);
|
|
139
|
+
root.render(rootComponent(opts));
|
|
140
|
+
};
|
|
141
|
+
export {
|
|
142
|
+
startArcaneFrontend
|
|
143
|
+
};
|
package/dist/index.d.mts
CHANGED
|
@@ -7,7 +7,7 @@ import { WebSocket } from 'ws';
|
|
|
7
7
|
import { ClientMessage, ServerMessage } from '@arcanejs/protocol';
|
|
8
8
|
import { Group } from './backend/components/group.mjs';
|
|
9
9
|
export { GroupHeader } from './backend/components/group.mjs';
|
|
10
|
-
import { Parent,
|
|
10
|
+
import { Parent, AnyComponent } from './backend/components/base.mjs';
|
|
11
11
|
export { Button } from './backend/components/button.mjs';
|
|
12
12
|
export { Label } from './backend/components/label.mjs';
|
|
13
13
|
export { Rect } from './backend/components/rect.mjs';
|
|
@@ -16,6 +16,7 @@ export { Switch } from './backend/components/switch.mjs';
|
|
|
16
16
|
export { Tab, Tabs } from './backend/components/tabs.mjs';
|
|
17
17
|
export { TextInput } from './backend/components/text-input.mjs';
|
|
18
18
|
export { Timeline } from './backend/components/timeline.mjs';
|
|
19
|
+
import '@arcanejs/protocol/core';
|
|
19
20
|
import '@arcanejs/protocol/styles';
|
|
20
21
|
import './id-map-DxQ3_gyA.mjs';
|
|
21
22
|
|
|
@@ -28,6 +29,8 @@ declare class Server {
|
|
|
28
29
|
private readonly onClosedConnection;
|
|
29
30
|
private readonly onMessage;
|
|
30
31
|
private readonly log?;
|
|
32
|
+
private readonly staticFiles;
|
|
33
|
+
private readonly entrypointFilename;
|
|
31
34
|
constructor(options: LightDeskOptions, onNewConnection: (connection: Connection) => void, onClosedConnection: (connection: Connection) => void, onMessage: (connection: Connection, message: ClientMessage) => void, log?: Logger | undefined);
|
|
32
35
|
handleHttpRequest: (req: http.IncomingMessage, res: http.ServerResponse) => Promise<void>;
|
|
33
36
|
private sendStaticFile;
|
|
@@ -50,6 +53,16 @@ interface LightDeskOptions {
|
|
|
50
53
|
* but this will be quite verbose.
|
|
51
54
|
*/
|
|
52
55
|
log?: Logger;
|
|
56
|
+
/**
|
|
57
|
+
* The entrypoint file that should be used to serve the light desk.
|
|
58
|
+
*
|
|
59
|
+
* This is only needed if you have defined custom extensions,
|
|
60
|
+
* and need to load custom frontend code that includes your extensions.
|
|
61
|
+
*
|
|
62
|
+
* This will allow access to both the js file and the `.map.js` file,
|
|
63
|
+
* that matches this name.
|
|
64
|
+
*/
|
|
65
|
+
entrypointJsFile?: string;
|
|
53
66
|
}
|
|
54
67
|
type InitializationOptions =
|
|
55
68
|
/** automatically start a simple */
|
|
@@ -87,10 +100,10 @@ declare class Toolkit implements Parent {
|
|
|
87
100
|
setRoot: (group: Group) => void;
|
|
88
101
|
log(): _arcanejs_protocol_logging.Logger | null;
|
|
89
102
|
updateTree: _.DebouncedFuncLeading<() => void>;
|
|
90
|
-
removeChild: (component:
|
|
103
|
+
removeChild: (component: AnyComponent) => void;
|
|
91
104
|
private onNewConnection;
|
|
92
105
|
private onClosedConnection;
|
|
93
106
|
private onMessage;
|
|
94
107
|
}
|
|
95
108
|
|
|
96
|
-
export {
|
|
109
|
+
export { AnyComponent, Group, Toolkit };
|
package/dist/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ import { WebSocket } from 'ws';
|
|
|
7
7
|
import { ClientMessage, ServerMessage } from '@arcanejs/protocol';
|
|
8
8
|
import { Group } from './backend/components/group.js';
|
|
9
9
|
export { GroupHeader } from './backend/components/group.js';
|
|
10
|
-
import { Parent,
|
|
10
|
+
import { Parent, AnyComponent } from './backend/components/base.js';
|
|
11
11
|
export { Button } from './backend/components/button.js';
|
|
12
12
|
export { Label } from './backend/components/label.js';
|
|
13
13
|
export { Rect } from './backend/components/rect.js';
|
|
@@ -16,6 +16,7 @@ export { Switch } from './backend/components/switch.js';
|
|
|
16
16
|
export { Tab, Tabs } from './backend/components/tabs.js';
|
|
17
17
|
export { TextInput } from './backend/components/text-input.js';
|
|
18
18
|
export { Timeline } from './backend/components/timeline.js';
|
|
19
|
+
import '@arcanejs/protocol/core';
|
|
19
20
|
import '@arcanejs/protocol/styles';
|
|
20
21
|
import './id-map-DxQ3_gyA.js';
|
|
21
22
|
|
|
@@ -28,6 +29,8 @@ declare class Server {
|
|
|
28
29
|
private readonly onClosedConnection;
|
|
29
30
|
private readonly onMessage;
|
|
30
31
|
private readonly log?;
|
|
32
|
+
private readonly staticFiles;
|
|
33
|
+
private readonly entrypointFilename;
|
|
31
34
|
constructor(options: LightDeskOptions, onNewConnection: (connection: Connection) => void, onClosedConnection: (connection: Connection) => void, onMessage: (connection: Connection, message: ClientMessage) => void, log?: Logger | undefined);
|
|
32
35
|
handleHttpRequest: (req: http.IncomingMessage, res: http.ServerResponse) => Promise<void>;
|
|
33
36
|
private sendStaticFile;
|
|
@@ -50,6 +53,16 @@ interface LightDeskOptions {
|
|
|
50
53
|
* but this will be quite verbose.
|
|
51
54
|
*/
|
|
52
55
|
log?: Logger;
|
|
56
|
+
/**
|
|
57
|
+
* The entrypoint file that should be used to serve the light desk.
|
|
58
|
+
*
|
|
59
|
+
* This is only needed if you have defined custom extensions,
|
|
60
|
+
* and need to load custom frontend code that includes your extensions.
|
|
61
|
+
*
|
|
62
|
+
* This will allow access to both the js file and the `.map.js` file,
|
|
63
|
+
* that matches this name.
|
|
64
|
+
*/
|
|
65
|
+
entrypointJsFile?: string;
|
|
53
66
|
}
|
|
54
67
|
type InitializationOptions =
|
|
55
68
|
/** automatically start a simple */
|
|
@@ -87,10 +100,10 @@ declare class Toolkit implements Parent {
|
|
|
87
100
|
setRoot: (group: Group) => void;
|
|
88
101
|
log(): _arcanejs_protocol_logging.Logger | null;
|
|
89
102
|
updateTree: _.DebouncedFuncLeading<() => void>;
|
|
90
|
-
removeChild: (component:
|
|
103
|
+
removeChild: (component: AnyComponent) => void;
|
|
91
104
|
private onNewConnection;
|
|
92
105
|
private onClosedConnection;
|
|
93
106
|
private onMessage;
|
|
94
107
|
}
|
|
95
108
|
|
|
96
|
-
export {
|
|
109
|
+
export { AnyComponent, Group, Toolkit };
|
package/dist/index.js
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
"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;
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
var
|
|
4
|
+
var _chunkARRRZPUKjs = require('./chunk-ARRRZPUK.js');
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
var
|
|
7
|
+
var _chunkHNFNG5MDjs = require('./chunk-HNFNG5MD.js');
|
|
8
8
|
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _chunkT4TMVBFMjs = require('./chunk-T4TMVBFM.js');
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
var _chunkEABM5X65js = require('./chunk-EABM5X65.js');
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
var
|
|
16
|
+
var _chunkZLJECS4Hjs = require('./chunk-ZLJECS4H.js');
|
|
17
17
|
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
var
|
|
20
|
+
var _chunkTOPIQUBZjs = require('./chunk-TOPIQUBZ.js');
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
var
|
|
23
|
+
var _chunkV5T44HCMjs = require('./chunk-V5T44HCM.js');
|
|
24
24
|
|
|
25
25
|
|
|
26
|
-
var
|
|
26
|
+
var _chunk5JPYL5IUjs = require('./chunk-5JPYL5IU.js');
|
|
27
27
|
|
|
28
28
|
|
|
29
|
-
var
|
|
29
|
+
var _chunkSIXWXDZWjs = require('./chunk-SIXWXDZW.js');
|
|
30
30
|
|
|
31
31
|
|
|
32
|
-
var
|
|
33
|
-
require('./chunk-
|
|
32
|
+
var _chunk25LALCANjs = require('./chunk-25LALCAN.js');
|
|
33
|
+
require('./chunk-ADH7RZG5.js');
|
|
34
34
|
|
|
35
35
|
|
|
36
36
|
var _chunk3RG5ZIWIjs = require('./chunk-3RG5ZIWI.js');
|
|
@@ -66,14 +66,6 @@ var DIST_DIR = (() => {
|
|
|
66
66
|
}
|
|
67
67
|
})();
|
|
68
68
|
var STATIC_FILES = {
|
|
69
|
-
"/frontend.js": {
|
|
70
|
-
path: path.join(DIST_DIR, "frontend.js"),
|
|
71
|
-
contentType: "text/javascript"
|
|
72
|
-
},
|
|
73
|
-
"/frontend.js.map": {
|
|
74
|
-
path: path.join(DIST_DIR, "frontend.js.map"),
|
|
75
|
-
contentType: "text/plain"
|
|
76
|
-
},
|
|
77
69
|
[`/${FONTS.materialSymbolsOutlined}`]: {
|
|
78
70
|
path: _chunk3RG5ZIWIjs.__require.resolve("material-symbols/material-symbols-outlined.woff2"),
|
|
79
71
|
contentType: "font/woff2"
|
|
@@ -86,8 +78,27 @@ var Server = (_class = class {
|
|
|
86
78
|
this.onClosedConnection = onClosedConnection;
|
|
87
79
|
this.onMessage = onMessage;
|
|
88
80
|
this.log = log;
|
|
89
|
-
|
|
81
|
+
const entrypoint = _nullishCoalesce(this.options.entrypointJsFile, () => ( path.join(DIST_DIR, "frontend", "entrypoint.js")));
|
|
82
|
+
if (!entrypoint.endsWith(".js")) {
|
|
83
|
+
throw new Error("Entrypoint file must be a .js file");
|
|
84
|
+
}
|
|
85
|
+
const entrypointMap = entrypoint + ".map";
|
|
86
|
+
this.entrypointFilename = path.basename(entrypoint);
|
|
87
|
+
this.staticFiles = {
|
|
88
|
+
...STATIC_FILES,
|
|
89
|
+
[`/${this.entrypointFilename}`]: {
|
|
90
|
+
path: entrypoint,
|
|
91
|
+
contentType: "text/javascript"
|
|
92
|
+
},
|
|
93
|
+
[`/${path.basename(entrypointMap)}`]: {
|
|
94
|
+
path: entrypointMap,
|
|
95
|
+
contentType: "text/plain"
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
_optionalChain([log, 'optionalAccess', _14 => _14.debug, 'call', _15 => _15("Static Assets: %o", this.staticFiles)]);
|
|
90
99
|
}
|
|
100
|
+
|
|
101
|
+
|
|
91
102
|
__init() {this.handleHttpRequest = async (req, res) => {
|
|
92
103
|
_optionalChain([this, 'access', _16 => _16.log, 'optionalAccess', _17 => _17.debug, 'call', _18 => _18("handleHttpRequest %s", req.url)]);
|
|
93
104
|
if (req.url === this.options.path) {
|
|
@@ -99,7 +110,7 @@ var Server = (_class = class {
|
|
|
99
110
|
</head>
|
|
100
111
|
<body>
|
|
101
112
|
<div id="root"></div>
|
|
102
|
-
<script type="text/javascript" src="${this.options.path}
|
|
113
|
+
<script type="text/javascript" src="${this.options.path}${this.entrypointFilename}"></script>
|
|
103
114
|
</body>
|
|
104
115
|
</html>`;
|
|
105
116
|
res.writeHead(200, { "Content-Type": "text/html" });
|
|
@@ -108,7 +119,7 @@ var Server = (_class = class {
|
|
|
108
119
|
}
|
|
109
120
|
if (req.url && req.url.startsWith(this.options.path)) {
|
|
110
121
|
const relativePath = req.url.substr(this.options.path.length - 1);
|
|
111
|
-
const f =
|
|
122
|
+
const f = this.staticFiles[relativePath];
|
|
112
123
|
if (f) {
|
|
113
124
|
return fs.promises.stat(f.path).then(
|
|
114
125
|
() => {
|
|
@@ -279,4 +290,4 @@ var Toolkit = (_class2 = class {
|
|
|
279
290
|
|
|
280
291
|
|
|
281
292
|
|
|
282
|
-
exports.Button =
|
|
293
|
+
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
CHANGED
|
@@ -1,36 +1,36 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Tab,
|
|
3
3
|
Tabs
|
|
4
|
-
} from "./chunk-
|
|
4
|
+
} from "./chunk-PXYXUWXE.mjs";
|
|
5
5
|
import {
|
|
6
6
|
TextInput
|
|
7
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-ISHGZXPO.mjs";
|
|
8
8
|
import {
|
|
9
9
|
Timeline
|
|
10
|
-
} from "./chunk-
|
|
10
|
+
} from "./chunk-LX5IL6WX.mjs";
|
|
11
11
|
import {
|
|
12
12
|
IDMap
|
|
13
13
|
} from "./chunk-RGHJEMWG.mjs";
|
|
14
14
|
import {
|
|
15
15
|
Button
|
|
16
|
-
} from "./chunk-
|
|
16
|
+
} from "./chunk-EFNFSHV3.mjs";
|
|
17
17
|
import {
|
|
18
18
|
Group,
|
|
19
19
|
GroupHeader
|
|
20
|
-
} from "./chunk-
|
|
20
|
+
} from "./chunk-5TGGF5UJ.mjs";
|
|
21
21
|
import {
|
|
22
22
|
Label
|
|
23
|
-
} from "./chunk-
|
|
23
|
+
} from "./chunk-OAPIVG6M.mjs";
|
|
24
24
|
import {
|
|
25
25
|
Rect
|
|
26
|
-
} from "./chunk-
|
|
26
|
+
} from "./chunk-BDBRQJSI.mjs";
|
|
27
27
|
import {
|
|
28
28
|
SliderButton
|
|
29
|
-
} from "./chunk-
|
|
29
|
+
} from "./chunk-IBIEYR3L.mjs";
|
|
30
30
|
import {
|
|
31
31
|
Switch
|
|
32
|
-
} from "./chunk-
|
|
33
|
-
import "./chunk-
|
|
32
|
+
} from "./chunk-SBHNIFAS.mjs";
|
|
33
|
+
import "./chunk-7SZA6JUN.mjs";
|
|
34
34
|
import {
|
|
35
35
|
__require
|
|
36
36
|
} from "./chunk-Y6FXYEAI.mjs";
|
|
@@ -66,14 +66,6 @@ var DIST_DIR = (() => {
|
|
|
66
66
|
}
|
|
67
67
|
})();
|
|
68
68
|
var STATIC_FILES = {
|
|
69
|
-
"/frontend.js": {
|
|
70
|
-
path: path.join(DIST_DIR, "frontend.js"),
|
|
71
|
-
contentType: "text/javascript"
|
|
72
|
-
},
|
|
73
|
-
"/frontend.js.map": {
|
|
74
|
-
path: path.join(DIST_DIR, "frontend.js.map"),
|
|
75
|
-
contentType: "text/plain"
|
|
76
|
-
},
|
|
77
69
|
[`/${FONTS.materialSymbolsOutlined}`]: {
|
|
78
70
|
path: __require.resolve("material-symbols/material-symbols-outlined.woff2"),
|
|
79
71
|
contentType: "font/woff2"
|
|
@@ -86,8 +78,27 @@ var Server = class {
|
|
|
86
78
|
this.onClosedConnection = onClosedConnection;
|
|
87
79
|
this.onMessage = onMessage;
|
|
88
80
|
this.log = log;
|
|
89
|
-
|
|
81
|
+
const entrypoint = this.options.entrypointJsFile ?? path.join(DIST_DIR, "frontend", "entrypoint.js");
|
|
82
|
+
if (!entrypoint.endsWith(".js")) {
|
|
83
|
+
throw new Error("Entrypoint file must be a .js file");
|
|
84
|
+
}
|
|
85
|
+
const entrypointMap = entrypoint + ".map";
|
|
86
|
+
this.entrypointFilename = path.basename(entrypoint);
|
|
87
|
+
this.staticFiles = {
|
|
88
|
+
...STATIC_FILES,
|
|
89
|
+
[`/${this.entrypointFilename}`]: {
|
|
90
|
+
path: entrypoint,
|
|
91
|
+
contentType: "text/javascript"
|
|
92
|
+
},
|
|
93
|
+
[`/${path.basename(entrypointMap)}`]: {
|
|
94
|
+
path: entrypointMap,
|
|
95
|
+
contentType: "text/plain"
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
log?.debug("Static Assets: %o", this.staticFiles);
|
|
90
99
|
}
|
|
100
|
+
staticFiles;
|
|
101
|
+
entrypointFilename;
|
|
91
102
|
handleHttpRequest = async (req, res) => {
|
|
92
103
|
this.log?.debug("handleHttpRequest %s", req.url);
|
|
93
104
|
if (req.url === this.options.path) {
|
|
@@ -99,7 +110,7 @@ var Server = class {
|
|
|
99
110
|
</head>
|
|
100
111
|
<body>
|
|
101
112
|
<div id="root"></div>
|
|
102
|
-
<script type="text/javascript" src="${this.options.path}
|
|
113
|
+
<script type="text/javascript" src="${this.options.path}${this.entrypointFilename}"></script>
|
|
103
114
|
</body>
|
|
104
115
|
</html>`;
|
|
105
116
|
res.writeHead(200, { "Content-Type": "text/html" });
|
|
@@ -108,7 +119,7 @@ var Server = class {
|
|
|
108
119
|
}
|
|
109
120
|
if (req.url && req.url.startsWith(this.options.path)) {
|
|
110
121
|
const relativePath = req.url.substr(this.options.path.length - 1);
|
|
111
|
-
const f =
|
|
122
|
+
const f = this.staticFiles[relativePath];
|
|
112
123
|
if (f) {
|
|
113
124
|
return fs.promises.stat(f.path).then(
|
|
114
125
|
() => {
|