prototypey.org - atproto lexicon typescript toolkit - mirror https://github.com/tylersayshi/prototypey
types working fr
+79
-45
+2
-3
packages/site/public/types/index.d.ts
+2
-3
packages/site/public/types/index.d.ts
+77
-42
packages/site/src/components/Editor.tsx
+77
-42
packages/site/src/components/Editor.tsx
···
1
1
import MonacoEditor from "@monaco-editor/react";
2
+
import { loader } from "@monaco-editor/react";
3
+
import { useEffect, useState } from "react";
2
4
3
5
interface EditorProps {
4
6
value: string;
···
6
8
}
7
9
8
10
export function Editor({ value, onChange }: EditorProps) {
9
-
const handleEditorWillMount = async (
10
-
monaco: typeof import("monaco-editor"),
11
-
) => {
12
-
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
13
-
noSemanticValidation: false,
14
-
noSyntaxValidation: false,
15
-
});
11
+
const [isReady, setIsReady] = useState(false);
16
12
17
-
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
18
-
target: monaco.languages.typescript.ScriptTarget.ES2020,
19
-
allowNonTsExtensions: true,
20
-
moduleResolution:
21
-
monaco.languages.typescript.ModuleResolutionKind.NodeJs,
22
-
module: monaco.languages.typescript.ModuleKind.ESNext,
23
-
noEmit: true,
24
-
esModuleInterop: true,
25
-
allowSyntheticDefaultImports: true,
26
-
});
13
+
useEffect(() => {
14
+
loader.init().then((monaco) => {
15
+
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
16
+
target: monaco.languages.typescript.ScriptTarget.ES2020,
17
+
allowNonTsExtensions: true,
18
+
moduleResolution:
19
+
monaco.languages.typescript.ModuleResolutionKind.NodeJs,
20
+
module: monaco.languages.typescript.ModuleKind.ESNext,
21
+
noEmit: true,
22
+
esModuleInterop: true,
23
+
allowSyntheticDefaultImports: true,
24
+
strict: false,
25
+
});
26
+
27
+
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
28
+
noSemanticValidation: false,
29
+
noSyntaxValidation: false,
30
+
});
27
31
28
-
try {
29
-
const [typeUtilsDts, inferDts, libDts, indexDts] = await Promise.all([
32
+
Promise.all([
30
33
fetch("/types/type-utils.d.ts").then((r) => r.text()),
31
34
fetch("/types/infer.d.ts").then((r) => r.text()),
32
35
fetch("/types/lib.d.ts").then((r) => r.text()),
33
-
fetch("/types/index.d.ts").then((r) => r.text()),
34
-
]);
36
+
]).then(([typeUtilsDts, inferDts, libDts]) => {
37
+
const stripImportsExports = (content: string) =>
38
+
content
39
+
.replace(/import\s+{[^}]*}\s+from\s+['""][^'"]*['""];?\s*/g, "")
40
+
.replace(/import\s+.*\s+from\s+['""][^'"]*['""];?\s*/g, "")
41
+
.replace(/^export\s+{[^}]*};?\s*/gm, "")
42
+
.replace(/^export\s+/gm, "")
43
+
.replace(/\/\/# sourceMappingURL=.*/g, "")
44
+
.replace(/\/\/#region.*\n?/g, "")
45
+
.replace(/\/\/#endregion.*\n?/g, "");
35
46
36
-
monaco.languages.typescript.typescriptDefaults.addExtraLib(
37
-
typeUtilsDts,
38
-
"file:///node_modules/prototypekit/type-utils.d.ts",
39
-
);
47
+
const combinedTypes = `
48
+
${stripImportsExports(typeUtilsDts)}
49
+
${stripImportsExports(inferDts)}
50
+
${stripImportsExports(libDts)}
51
+
`;
52
+
53
+
const moduleDeclaration = `declare module "prototypekit" {
54
+
${combinedTypes}
55
+
}`;
40
56
41
-
monaco.languages.typescript.typescriptDefaults.addExtraLib(
42
-
inferDts,
43
-
"file:///node_modules/prototypekit/infer.d.ts",
44
-
);
57
+
monaco.languages.typescript.typescriptDefaults.addExtraLib(
58
+
moduleDeclaration,
59
+
"prototypekit.d.ts",
60
+
);
45
61
46
-
monaco.languages.typescript.typescriptDefaults.addExtraLib(
47
-
libDts,
48
-
"file:///node_modules/prototypekit/lib.d.ts",
49
-
);
62
+
setIsReady(true);
63
+
});
64
+
});
65
+
}, []);
50
66
51
-
monaco.languages.typescript.typescriptDefaults.addExtraLib(
52
-
indexDts,
53
-
"file:///node_modules/prototypekit/index.d.ts",
54
-
);
55
-
} catch (error) {
56
-
console.error("Failed to load prototypekit types:", error);
57
-
}
58
-
};
67
+
if (!isReady) {
68
+
return (
69
+
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
70
+
<div
71
+
style={{
72
+
padding: "0.75rem 1rem",
73
+
backgroundColor: "#f9fafb",
74
+
borderBottom: "1px solid #e5e7eb",
75
+
fontSize: "0.875rem",
76
+
fontWeight: "600",
77
+
color: "#374151",
78
+
}}
79
+
>
80
+
Input
81
+
</div>
82
+
<div
83
+
style={{
84
+
flex: 1,
85
+
display: "flex",
86
+
alignItems: "center",
87
+
justifyContent: "center",
88
+
}}
89
+
>
90
+
Loading...
91
+
</div>
92
+
</div>
93
+
);
94
+
}
59
95
60
96
return (
61
97
<div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
···
78
114
value={value}
79
115
onChange={(value) => onChange(value || "")}
80
116
theme="vs-light"
81
-
beforeMount={handleEditorWillMount}
82
117
options={{
83
118
minimap: { enabled: false },
84
119
fontSize: 14,