@valbuild/ui 0.22.0 → 0.23.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/valbuild-ui.cjs.js +2 -7
- package/dist/valbuild-ui.esm.js +2 -7
- package/fix-server-hack.js +24 -15
- package/fullscreen.vite.config.ts +1 -3
- package/index.html +2 -3
- package/package.json +2 -2
- package/server/dist/valbuild-ui-main.cjs.js +2 -7
- package/server/dist/valbuild-ui-main.esm.js +2 -7
- package/server/dist/valbuild-ui-server.cjs.js +32 -15
- package/server/dist/valbuild-ui-server.esm.js +32 -15
- package/src/components/ValFormField.tsx +4 -6
- package/src/components/ValFullscreen.tsx +0 -5
- package/src/server.ts +6 -14
- package/src/vite-server.ts +38 -15
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
} from "@valbuild/core";
|
|
12
12
|
import type { PatchJSON } from "@valbuild/core/patch";
|
|
13
13
|
import { LexicalEditor } from "lexical";
|
|
14
|
-
import { useState, useEffect, useRef
|
|
14
|
+
import { useState, useEffect, useRef } from "react";
|
|
15
15
|
import { RichTextEditor } from "../exports";
|
|
16
16
|
import { lexicalToRichTextSource } from "../richtext/conversion/lexicalToRichTextSource";
|
|
17
17
|
import { LexicalRootNode } from "../richtext/conversion/richTextSourceToLexical";
|
|
@@ -22,12 +22,11 @@ import {
|
|
|
22
22
|
Select,
|
|
23
23
|
SelectContent,
|
|
24
24
|
SelectItem,
|
|
25
|
-
SelectLabel,
|
|
26
25
|
SelectTrigger,
|
|
27
26
|
SelectValue,
|
|
28
27
|
} from "./ui/select";
|
|
29
28
|
import { PatchCallback } from "./usePatch";
|
|
30
|
-
import { useValModuleFromPath
|
|
29
|
+
import { useValModuleFromPath } from "./ValFullscreen";
|
|
31
30
|
|
|
32
31
|
type ImageSource = FileSource<ImageMetadata>;
|
|
33
32
|
export type OnSubmit = (callback: PatchCallback) => Promise<void>;
|
|
@@ -357,7 +356,7 @@ function KeyOfField({
|
|
|
357
356
|
};
|
|
358
357
|
};
|
|
359
358
|
const typeAndValues = getValuesFromModule(valModule);
|
|
360
|
-
const [value, setValue] = useState(defaultValue
|
|
359
|
+
const [value, setValue] = useState(defaultValue ?? typeAndValues.values[0]);
|
|
361
360
|
const [loading, setLoading] = useState(false);
|
|
362
361
|
useEffect(() => {
|
|
363
362
|
setLoading(disabled);
|
|
@@ -389,7 +388,6 @@ function KeyOfField({
|
|
|
389
388
|
});
|
|
390
389
|
}
|
|
391
390
|
}, [value]);
|
|
392
|
-
|
|
393
391
|
return (
|
|
394
392
|
<div className="flex flex-col justify-between h-full gap-y-4">
|
|
395
393
|
<Select
|
|
@@ -405,7 +403,7 @@ function KeyOfField({
|
|
|
405
403
|
<SelectContent>
|
|
406
404
|
{typeAndValues.values.map((value) => (
|
|
407
405
|
<SelectItem key={value} value={value.toString()}>
|
|
408
|
-
{value}
|
|
406
|
+
{value.toString()}
|
|
409
407
|
</SelectItem>
|
|
410
408
|
))}
|
|
411
409
|
</SelectContent>
|
|
@@ -131,11 +131,6 @@ export const ValFullscreen: FC<ValFullscreenProps> = ({ valApi }) => {
|
|
|
131
131
|
}, [pathFromParams]);
|
|
132
132
|
|
|
133
133
|
const [hmrHash, setHmrHash] = useState(null);
|
|
134
|
-
useEffect(() => {
|
|
135
|
-
if (modules) {
|
|
136
|
-
console.log("->", hmrHash);
|
|
137
|
-
}
|
|
138
|
-
}, [modules]);
|
|
139
134
|
useEffect(() => {
|
|
140
135
|
try {
|
|
141
136
|
// use websocket to update modules
|
package/src/server.ts
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
import type { RequestHandler } from "express";
|
|
11
|
+
import fs from "fs";
|
|
11
12
|
|
|
12
13
|
type Vite = typeof import("vite");
|
|
13
14
|
export function createRequestHandler(): RequestHandler {
|
|
@@ -35,22 +36,13 @@ export function createRequestHandler(): RequestHandler {
|
|
|
35
36
|
res.setHeader("Content-Type", "text/css");
|
|
36
37
|
return res.end(style);
|
|
37
38
|
} else if (req.url.startsWith("/edit")) {
|
|
39
|
+
const { URL: URL_noresolve } = await import("node:url");
|
|
38
40
|
const html = (await vite).transformIndexHtml(
|
|
39
41
|
req.url,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
<meta charset="UTF-8" />
|
|
45
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
46
|
-
<title>Val</title>
|
|
47
|
-
</head>
|
|
48
|
-
<body>
|
|
49
|
-
<div id="root"></div>
|
|
50
|
-
<script type="module" src="/src/main.jsx"></script>
|
|
51
|
-
</body>
|
|
52
|
-
</html>
|
|
53
|
-
`
|
|
42
|
+
fs.readFileSync(
|
|
43
|
+
new URL_noresolve("../index.html", import.meta.url),
|
|
44
|
+
"utf-8"
|
|
45
|
+
)
|
|
54
46
|
);
|
|
55
47
|
return res.end(await html);
|
|
56
48
|
} else {
|
package/src/vite-server.ts
CHANGED
|
@@ -1,25 +1,48 @@
|
|
|
1
1
|
import type { RequestHandler } from "express";
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const files: Record<string, string> = JSON.parse(
|
|
4
|
+
`BUILD_REPLACE_THIS_WITH_RECORD`
|
|
5
|
+
) as unknown as Record<string, string>;
|
|
4
6
|
|
|
5
7
|
export function createRequestHandler(): RequestHandler {
|
|
8
|
+
if (typeof files !== "object") {
|
|
9
|
+
throw new Error("Files is not an object! Your Val build is corrupted!");
|
|
10
|
+
}
|
|
6
11
|
return (req, res, next) => {
|
|
12
|
+
if (!files["/index.html"]) {
|
|
13
|
+
console.error(
|
|
14
|
+
"No index.html found! Your Val build is corrupted!",
|
|
15
|
+
Object.keys(files)
|
|
16
|
+
);
|
|
17
|
+
next();
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
7
20
|
if (req.url.startsWith("/edit")) {
|
|
8
|
-
res
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<meta charset="UTF-8" />
|
|
12
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
13
|
-
<title>Val</title>
|
|
14
|
-
<script>${Buffer.from(script, "base64").toString("utf-8")}</script>
|
|
15
|
-
</head>
|
|
16
|
-
<body>
|
|
17
|
-
<div id="root"></div>
|
|
18
|
-
</body>
|
|
19
|
-
</html>
|
|
20
|
-
`);
|
|
21
|
+
res
|
|
22
|
+
.header({ "Content-Type": "text/html" })
|
|
23
|
+
.end(Buffer.from(files["/index.html"], "base64").toString("utf-8"));
|
|
21
24
|
} else {
|
|
22
|
-
|
|
25
|
+
if (Object.keys(files).includes(req.url)) {
|
|
26
|
+
if (req.url.endsWith(".js")) {
|
|
27
|
+
res
|
|
28
|
+
.header({ "Content-Type": "application/javascript" })
|
|
29
|
+
.end(
|
|
30
|
+
Buffer.from(files[(files[req.url], "base64")]).toString("utf-8")
|
|
31
|
+
);
|
|
32
|
+
} else if (req.url.endsWith(".css")) {
|
|
33
|
+
res
|
|
34
|
+
.header({ "Content-Type": "text/css" })
|
|
35
|
+
.end(
|
|
36
|
+
Buffer.from(files[(files[req.url], "base64")]).toString("utf-8")
|
|
37
|
+
);
|
|
38
|
+
} else {
|
|
39
|
+
res.end(
|
|
40
|
+
Buffer.from(files[(files[req.url], "base64")]).toString("utf-8")
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
} else {
|
|
44
|
+
next();
|
|
45
|
+
}
|
|
23
46
|
}
|
|
24
47
|
};
|
|
25
48
|
}
|