vzcode 0.54.0 → 0.56.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/assets/{index-7PozlhVS.css → index-mTosxc8C.css} +1 -1
- package/dist/assets/index-pF--hgc_.js +147 -0
- package/dist/assets/{worker-y75r0vyN.js → worker-Cl_j3b6K.js} +3 -2
- package/dist/assets/{worker-VwMsqrhy.js → worker-pDIx6AF9.js} +7 -7
- package/dist/index.html +2 -2
- package/package.json +2 -1
- package/src/client/CodeEditor/style.scss +4 -0
- package/src/client/CodeEditor/typeScriptLinter.ts +2 -2
- package/src/client/Icons/Close.tsx +17 -0
- package/src/client/Icons/Edit.tsx +16 -0
- package/src/client/Icons/Gear.tsx +16 -0
- package/src/client/Icons/New.tsx +16 -0
- package/src/client/Icons/Trash.tsx +17 -0
- package/src/client/Icons/index.tsx +4 -0
- package/src/client/index.ts +1 -1
- package/src/client/shouldTriggerRun.ts +33 -0
- package/src/client/usePrettier/index.ts +2 -30
- package/src/client/usePrettier/worker.ts +15 -14
- package/src/client/useTypeScript/worker.ts +3 -1
- package/dist/assets/index-taoX_YRg.js +0 -147
package/dist/index.html
CHANGED
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css"
|
|
25
25
|
rel="stylesheet"
|
|
26
26
|
/>
|
|
27
|
-
<script type="module" crossorigin src="/assets/index-
|
|
28
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
27
|
+
<script type="module" crossorigin src="/assets/index-pF--hgc_.js"></script>
|
|
28
|
+
<link rel="stylesheet" crossorigin href="/assets/index-mTosxc8C.css">
|
|
29
29
|
</head>
|
|
30
30
|
<body>
|
|
31
31
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vzcode",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.56.0",
|
|
4
4
|
"description": "Multiplayer code editor system",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"type": "module",
|
|
@@ -101,6 +101,7 @@
|
|
|
101
101
|
"ngrok": "^4.3.3",
|
|
102
102
|
"open": "^10.0.3",
|
|
103
103
|
"openai": "^4.26.0",
|
|
104
|
+
"prettier-plugin-svelte": "^3.1.2",
|
|
104
105
|
"react": "^18.2.0",
|
|
105
106
|
"react-bootstrap": "^2.10.0",
|
|
106
107
|
"react-dom": "^18.2.0",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import type { Diagnostic } from 'typescript';
|
|
2
2
|
import {
|
|
3
3
|
LinterResponse,
|
|
4
4
|
LinterRequest,
|
|
@@ -24,7 +24,7 @@ export const typeScriptLinter = ({
|
|
|
24
24
|
typeScriptWorker.postMessage(linterRequest);
|
|
25
25
|
|
|
26
26
|
//An array of diagnostic (CodeMirror) objects.
|
|
27
|
-
const tsErrors:
|
|
27
|
+
const tsErrors: Diagnostic[] = await new Promise(
|
|
28
28
|
(resolve) => {
|
|
29
29
|
typeScriptWorker.onmessage = (message: {
|
|
30
30
|
data: LinterResponse;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export const Close = () => {
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
viewBox="0 0 24 24"
|
|
7
|
+
fill="none"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
d="M6 18L18 6M6 6L18 18"
|
|
11
|
+
stroke="#576786"
|
|
12
|
+
strokeWidth="1.5"
|
|
13
|
+
strokeLinecap="round"
|
|
14
|
+
strokeLinejoin="round"
|
|
15
|
+
/>
|
|
16
|
+
</svg>
|
|
17
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export const Edit = () => {
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
fill="none"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
stroke="#E0E8FF"
|
|
10
|
+
strokeLinecap="round"
|
|
11
|
+
strokeLinejoin="round"
|
|
12
|
+
strokeWidth="1.5"
|
|
13
|
+
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
|
|
14
|
+
/>
|
|
15
|
+
</svg>
|
|
16
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export const Gear = () => {
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
fill="none"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
stroke="#E0E8FF"
|
|
10
|
+
strokeLinecap="round"
|
|
11
|
+
strokeLinejoin="round"
|
|
12
|
+
strokeWidth="1.5"
|
|
13
|
+
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 0 1 0 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 0 1 0-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281Z"/><path stroke="#E0E8FF" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
|
|
14
|
+
/>
|
|
15
|
+
</svg>
|
|
16
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export const New = () => {
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
fill="none"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
stroke="#E0E8FF"
|
|
10
|
+
strokeLinecap="round"
|
|
11
|
+
strokeLinejoin="round"
|
|
12
|
+
strokeWidth="1.5"
|
|
13
|
+
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
|
|
14
|
+
/>
|
|
15
|
+
</svg>
|
|
16
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export const Trash = () => {
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
width="24"
|
|
5
|
+
height="24"
|
|
6
|
+
viewBox="0 0 24 24"
|
|
7
|
+
fill="none"
|
|
8
|
+
>
|
|
9
|
+
<path
|
|
10
|
+
d="M14.7404 9L14.3942 18M9.60577 18L9.25962 9M19.2276 5.79057C19.5696 5.84221 19.9104 5.89747 20.25 5.95629M19.2276 5.79057L18.1598 19.6726C18.0696 20.8448 17.0921 21.75 15.9164 21.75H8.08357C6.90786 21.75 5.93037 20.8448 5.8402 19.6726L4.77235 5.79057M19.2276 5.79057C18.0812 5.61744 16.9215 5.48485 15.75 5.39432M3.75 5.95629C4.08957 5.89747 4.43037 5.84221 4.77235 5.79057M4.77235 5.79057C5.91878 5.61744 7.07849 5.48485 8.25 5.39432M15.75 5.39432V4.47819C15.75 3.29882 14.8393 2.31423 13.6606 2.27652C13.1092 2.25889 12.5556 2.25 12 2.25C11.4444 2.25 10.8908 2.25889 10.3394 2.27652C9.16065 2.31423 8.25 3.29882 8.25 4.47819V5.39432M15.75 5.39432C14.5126 5.2987 13.262 5.25 12 5.25C10.738 5.25 9.48744 5.2987 8.25 5.39432"
|
|
11
|
+
stroke="#E0E8FF"
|
|
12
|
+
strokeWidth="1.5"
|
|
13
|
+
strokeLinecap="round"
|
|
14
|
+
strokeLinejoin="round"
|
|
15
|
+
/>
|
|
16
|
+
</svg>
|
|
17
|
+
};
|
package/src/client/index.ts
CHANGED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// This module is responsible for checking
|
|
2
|
+
// keyboard events and determining whether
|
|
3
|
+
// a run should be triggered or not.
|
|
4
|
+
//
|
|
5
|
+
// The most common case is when the us
|
|
6
|
+
export const shouldTriggerRun = (event: KeyboardEvent) => {
|
|
7
|
+
const isMac = /Mac|iMac|MacBook/i.test(
|
|
8
|
+
navigator.userAgent,
|
|
9
|
+
);
|
|
10
|
+
const ctrlOrCmd = isMac ? event.metaKey : event.ctrlKey;
|
|
11
|
+
|
|
12
|
+
if (ctrlOrCmd && event.key === 's') {
|
|
13
|
+
// Save
|
|
14
|
+
return true;
|
|
15
|
+
} else if (
|
|
16
|
+
event.key === 'F5' || // Run (F5)
|
|
17
|
+
(ctrlOrCmd && event.key === 'Enter') || // Ctrl+Enter or Cmd+Enter
|
|
18
|
+
(event.shiftKey && event.key === 'Enter') || // Shift+Enter
|
|
19
|
+
// Let's not override the browser's default behavior for refresh page.
|
|
20
|
+
// (ctrlOrCmd && event.key === 'r') || // Ctrl+R or Cmd+R
|
|
21
|
+
|
|
22
|
+
(event.altKey && event.key === 'Enter') || // Alt+Enter
|
|
23
|
+
(ctrlOrCmd &&
|
|
24
|
+
event.shiftKey &&
|
|
25
|
+
(event.key === 'B' || event.key === 'b')) || // Ctrl+Shift+B or Cmd+Shift+B
|
|
26
|
+
(ctrlOrCmd && event.shiftKey && event.key === 'F10') || // Ctrl+Shift+F10 or Cmd+Shift+F10
|
|
27
|
+
event.key === 'F8' ||
|
|
28
|
+
event.key === 'F9'
|
|
29
|
+
) {
|
|
30
|
+
return true;
|
|
31
|
+
}
|
|
32
|
+
return false;
|
|
33
|
+
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { shouldTriggerRun } from '../shouldTriggerRun';
|
|
1
2
|
import { JSONOp } from '../../ot';
|
|
2
3
|
import {
|
|
3
4
|
FileId,
|
|
@@ -26,35 +27,6 @@ const extension = (fileName: string) => {
|
|
|
26
27
|
// }
|
|
27
28
|
// }
|
|
28
29
|
|
|
29
|
-
export const shouldTriggerRun = (event: KeyboardEvent) => {
|
|
30
|
-
const isMac = /Mac|iMac|MacBook/i.test(
|
|
31
|
-
navigator.userAgent,
|
|
32
|
-
);
|
|
33
|
-
const ctrlOrCmd = isMac ? event.metaKey : event.ctrlKey;
|
|
34
|
-
|
|
35
|
-
if (ctrlOrCmd && event.key === 's') {
|
|
36
|
-
// Save
|
|
37
|
-
return true;
|
|
38
|
-
} else if (
|
|
39
|
-
event.key === 'F5' || // Run (F5)
|
|
40
|
-
(ctrlOrCmd && event.key === 'Enter') || // Ctrl+Enter or Cmd+Enter
|
|
41
|
-
(event.shiftKey && event.key === 'Enter') || // Shift+Enter
|
|
42
|
-
// Let's not override the browser's default behavior for refresh page.
|
|
43
|
-
// (ctrlOrCmd && event.key === 'r') || // Ctrl+R or Cmd+R
|
|
44
|
-
|
|
45
|
-
(event.altKey && event.key === 'Enter') || // Alt+Enter
|
|
46
|
-
(ctrlOrCmd &&
|
|
47
|
-
event.shiftKey &&
|
|
48
|
-
(event.key === 'B' || event.key === 'b')) || // Ctrl+Shift+B or Cmd+Shift+B
|
|
49
|
-
(ctrlOrCmd && event.shiftKey && event.key === 'F10') || // Ctrl+Shift+F10 or Cmd+Shift+F10
|
|
50
|
-
event.key === 'F8' ||
|
|
51
|
-
event.key === 'F9'
|
|
52
|
-
) {
|
|
53
|
-
return true;
|
|
54
|
-
}
|
|
55
|
-
return false;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
30
|
export const usePrettier = ({
|
|
59
31
|
shareDBDoc,
|
|
60
32
|
submitOperation,
|
|
@@ -184,7 +156,7 @@ export const usePrettier = ({
|
|
|
184
156
|
autoPrettierDebounceTimeMS,
|
|
185
157
|
);
|
|
186
158
|
};
|
|
187
|
-
//Stops prettier from running when you perform a mouse move or a keydown
|
|
159
|
+
// Stops prettier from running when you perform a mouse move or a keydown
|
|
188
160
|
window.addEventListener(
|
|
189
161
|
'mousemove',
|
|
190
162
|
debouncePrettier,
|
|
@@ -4,13 +4,16 @@ import * as prettierPluginEstree from 'prettier/plugins/estree';
|
|
|
4
4
|
import * as prettierPluginHtml from 'prettier/plugins/html';
|
|
5
5
|
import * as prettierPluginMarkdown from 'prettier/plugins/markdown';
|
|
6
6
|
import * as prettierPluginCSS from 'prettier/plugins/postcss';
|
|
7
|
-
// import * as prettierPluginYaml from 'prettier/plugins/yaml';
|
|
8
|
-
// import * as prettierPluginGraphql from 'prettier/plugins/graphql';
|
|
9
|
-
// import * as prettierPluginAngular from 'prettier/plugins/angular';
|
|
10
7
|
import * as prettierPluginTypescript from 'prettier/plugins/typescript';
|
|
11
|
-
|
|
8
|
+
// TODO bring this back when these PRs are merged and released:
|
|
9
|
+
// https://github.com/sveltejs/prettier-plugin-svelte/pull/423
|
|
10
|
+
// https://github.com/sveltejs/prettier-plugin-svelte/pull/417
|
|
11
|
+
// import * as prettierPluginSvelte from 'prettier-plugin-svelte/browser';
|
|
12
12
|
import { FileId } from '../../types';
|
|
13
13
|
|
|
14
|
+
const enableSvelte = false;
|
|
15
|
+
// console.log('Buffer');
|
|
16
|
+
// console.log(Buffer);
|
|
14
17
|
const parsers = {
|
|
15
18
|
js: 'babel',
|
|
16
19
|
jsx: 'babel',
|
|
@@ -24,14 +27,10 @@ const parsers = {
|
|
|
24
27
|
html: 'html',
|
|
25
28
|
json: 'json',
|
|
26
29
|
json5: 'json5',
|
|
27
|
-
// '.graphql': 'graphql',
|
|
28
|
-
// '.gql': 'graphql',
|
|
29
30
|
md: 'markdown',
|
|
30
31
|
markdown: 'markdown',
|
|
31
|
-
// '.yaml': 'yaml',
|
|
32
|
-
// '.yml': 'yaml',
|
|
33
32
|
// '.vue': 'vue',
|
|
34
|
-
|
|
33
|
+
svelte: 'svelte',
|
|
35
34
|
};
|
|
36
35
|
|
|
37
36
|
const plugins = [
|
|
@@ -41,6 +40,8 @@ const plugins = [
|
|
|
41
40
|
prettierPluginMarkdown,
|
|
42
41
|
prettierPluginTypescript,
|
|
43
42
|
prettierPluginCSS,
|
|
43
|
+
// TODO bring this back
|
|
44
|
+
// prettierPluginSvelte,
|
|
44
45
|
];
|
|
45
46
|
|
|
46
47
|
onmessage = async ({
|
|
@@ -52,7 +53,7 @@ onmessage = async ({
|
|
|
52
53
|
|
|
53
54
|
// The file extension
|
|
54
55
|
// Supported extensions: https://prettier.io/docs/en/options.html#parser
|
|
55
|
-
//
|
|
56
|
+
// The editor only supports
|
|
56
57
|
// - JavaScript
|
|
57
58
|
// - TypeScript
|
|
58
59
|
// - HTML
|
|
@@ -69,11 +70,11 @@ onmessage = async ({
|
|
|
69
70
|
const { fileExtension, fileText, fileId } = data;
|
|
70
71
|
const parser = parsers[fileExtension];
|
|
71
72
|
|
|
73
|
+
// If no parser is found, just do nothing.
|
|
74
|
+
// For example, if the user opens a CSV file,
|
|
75
|
+
// then we don't want to run Prettier on it,
|
|
76
|
+
// and we also don't want to show an error.
|
|
72
77
|
if (!parser) {
|
|
73
|
-
postMessage({
|
|
74
|
-
fileId,
|
|
75
|
-
error: `Unsupported file extension for Prettier: ${fileExtension}`,
|
|
76
|
-
});
|
|
77
78
|
return;
|
|
78
79
|
}
|
|
79
80
|
|
|
@@ -38,7 +38,9 @@ const initializeFileSystem = async () => {
|
|
|
38
38
|
if (debug) {
|
|
39
39
|
console.log('initializeFileSystem');
|
|
40
40
|
}
|
|
41
|
-
const compilerOptions: ts.CompilerOptions = {
|
|
41
|
+
const compilerOptions: ts.CompilerOptions = {
|
|
42
|
+
lib: ['dom', 'esnext'],
|
|
43
|
+
};
|
|
42
44
|
|
|
43
45
|
// `true` breaks in a Web Worker because
|
|
44
46
|
// this uses `localStorage` under the hood,
|