vzcode 0.65.0 → 0.67.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.
Files changed (13) hide show
  1. package/dist/assets/{index-DqZSunfv.js → index-Bl_XkAQW.js} +35 -35
  2. package/dist/assets/{index-Bh7FzEWq.css → index-KCP-VJlj.css} +1 -1
  3. package/dist/assets/worker-DoodSOTA.js +282 -0
  4. package/dist/index.html +2 -2
  5. package/package.json +6 -6
  6. package/src/client/AIAssist/AIAssistWidget/index.tsx +10 -1
  7. package/src/client/CodeEditor/style.scss +17 -0
  8. package/src/client/VZCodeContext.tsx +9 -1
  9. package/src/client/VZResizer/index.tsx +2 -2
  10. package/src/client/usePrettier/index.ts +47 -42
  11. package/src/client/usePrettier/worker.ts +10 -10
  12. package/dist/assets/worker-wgvEWcGD.js +0 -233
  13. /package/dist/assets/{worker-lwRU8zh4.js → worker-DJL5sCX4.js} +0 -0
package/dist/index.html CHANGED
@@ -20,8 +20,8 @@
20
20
  href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
21
21
  rel="stylesheet"
22
22
  />
23
- <script type="module" crossorigin src="/assets/index-DqZSunfv.js"></script>
24
- <link rel="stylesheet" crossorigin href="/assets/index-Bh7FzEWq.css">
23
+ <script type="module" crossorigin src="/assets/index-Bl_XkAQW.js"></script>
24
+ <link rel="stylesheet" crossorigin href="/assets/index-KCP-VJlj.css">
25
25
  </head>
26
26
  <body>
27
27
  <div id="root"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vzcode",
3
- "version": "0.65.0",
3
+ "version": "0.67.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
@@ -17,7 +17,7 @@
17
17
  "dev": "concurrently \"npm run test-interactive\" \"vite\"",
18
18
  "build": "vite build",
19
19
  "build-release": "vite build --mode release",
20
- "preview": "vite preview",
20
+ "preview": "concurrently \"npm run test-interactive\" \"vite preview\"",
21
21
  "prepublishOnly": "npm run build-release"
22
22
  },
23
23
  "repository": {
@@ -94,14 +94,14 @@
94
94
  "color-hash": "^2.0.2",
95
95
  "d3-array": "^3.2.4",
96
96
  "diff-match-patch": "^1.0.5",
97
- "dotenv": "^16.4.2",
97
+ "dotenv": "^16.4.4",
98
98
  "express": "^4.18.2",
99
99
  "ignore": "^5.3.1",
100
100
  "json0-ot-diff": "^1.1.2",
101
101
  "ngrok": "^4.3.3",
102
102
  "open": "^10.0.3",
103
- "openai": "^4.27.0",
104
- "prettier-plugin-svelte": "^3.1.2",
103
+ "openai": "^4.28.0",
104
+ "prettier-plugin-svelte": "^3.2.1",
105
105
  "react": "^18.2.0",
106
106
  "react-bootstrap": "^2.10.1",
107
107
  "react-dom": "^18.2.0",
@@ -119,7 +119,7 @@
119
119
  "prettier": "^3.2.5",
120
120
  "sass": "^1.70.0",
121
121
  "typescript": "^5.3.3",
122
- "vite": "^5.1.1",
122
+ "vite": "^5.1.2",
123
123
  "vitest": "^1.2.2"
124
124
  }
125
125
  }
package/src/client/AIAssist/AIAssistWidget/index.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { useCallback, useState } from 'react';
1
+ import { useCallback, useContext, useState } from 'react';
2
2
  import {
3
3
  FileId,
4
4
  ShareDBDoc,
@@ -15,6 +15,7 @@ import { SparklesSVG, StopSVG } from '../../Icons';
15
15
  import { startAIAssist } from '../startAIAssist';
16
16
  import './style.scss';
17
17
  import { Spinner } from '../Spinner';
18
+ import { VZCodeContext } from '../../VZCodeContext';
18
19
 
19
20
  const enableStopGeneration = false;
20
21
 
@@ -44,6 +45,8 @@ export const AIAssistWidget = ({
44
45
  const [aiStreamId, setAiStreamId] =
45
46
  useState<RequestId | null>(null);
46
47
 
48
+ const { runPrettierRef } = useContext(VZCodeContext);
49
+
47
50
  const handleClick = useCallback(async () => {
48
51
  const isCurrentlyGenerationg = aiStreamId !== null;
49
52
  if (isCurrentlyGenerationg) {
@@ -63,6 +66,12 @@ export const AIAssistWidget = ({
63
66
  aiAssistOptions,
64
67
  });
65
68
 
69
+ // Trigger a Prettier run after the AI Assist.
70
+ const runPrettier = runPrettierRef.current;
71
+ if (runPrettier !== null) {
72
+ runPrettier();
73
+ }
74
+
66
75
  // Handles the case that the user has started,
67
76
  // stopped, and started again before the first request
68
77
  // has finished, bu comparing the current stream ID
package/src/client/CodeEditor/style.scss CHANGED
@@ -24,4 +24,21 @@
24
24
  .cm-tooltip-lint {
25
25
  max-width: 500px;
26
26
  }
27
+
28
+ /* Style the completion tooltip container */
29
+ .cm-tooltip.cm-tooltip-autocomplete {
30
+ border: 1px solid #888;
31
+ background-color: #1F2022;
32
+ }
33
+
34
+ /* Style the individual completion items */
35
+ .cm-tooltip-autocomplete .cm-completionLabel {
36
+ color: #BDC7DC;
37
+ }
38
+
39
+ /* Style the selected completion item */
40
+ .cm-tooltip-autocomplete .cm-completionLabel .cm-completion-active {
41
+ background-color: #0077cc;
42
+ color: white;
43
+ }
27
44
  }
package/src/client/VZCodeContext.tsx CHANGED
@@ -95,6 +95,9 @@ export type VZCodeContextValue = {
95
95
  handleOpenCreateFileModal: () => void;
96
96
  handleCloseCreateFileModal: () => void;
97
97
  handleCreateFileClick: (newFileName: string) => void;
98
+ runPrettierRef: React.MutableRefObject<
99
+ null | (() => void)
100
+ >;
98
101
  };
99
102
 
100
103
  export const VZCodeProvider = ({
@@ -108,7 +111,7 @@ export const VZCodeProvider = ({
108
111
  initialUsername,
109
112
  children,
110
113
  codeError = null,
111
- enableManualPretter = false,
114
+ enableManualPretter = true,
112
115
  }: {
113
116
  content: VZCodeContent;
114
117
  shareDBDoc: ShareDBDoc<VZCodeContent>;
@@ -127,8 +130,12 @@ export const VZCodeProvider = ({
127
130
  // Auto-run Pretter after local changes.
128
131
  const {
129
132
  prettierError,
133
+ runPrettierRef,
130
134
  }: {
131
135
  prettierError: string | null;
136
+ runPrettierRef: React.MutableRefObject<
137
+ null | (() => void)
138
+ >;
132
139
  } = usePrettier({
133
140
  shareDBDoc,
134
141
  submitOperation,
@@ -301,6 +308,7 @@ export const VZCodeProvider = ({
301
308
  handleOpenCreateFileModal,
302
309
  handleCloseCreateFileModal,
303
310
  handleCreateFileClick,
311
+ runPrettierRef,
304
312
  };
305
313
 
306
314
  return (
package/src/client/VZResizer/index.tsx CHANGED
@@ -112,14 +112,14 @@ export const VZResizer = ({
112
112
  className="vz-resizer"
113
113
  onMouseDown={onMouseDown}
114
114
  style={{
115
- left,
115
+ left: left + resizerWidth / 2 - 1.5,
116
116
  width: resizerWidth,
117
117
  }}
118
118
  >
119
119
  <div
120
120
  className="vz-resizer-thumb"
121
121
  style={{
122
- left: resizerWidth / 2 - resizerThumbWidth / 2,
122
+ left: resizerThumbWidth / 2 - 1.5,
123
123
  width: resizerThumbWidth,
124
124
  }}
125
125
  />
package/src/client/usePrettier/index.ts CHANGED
@@ -58,6 +58,9 @@ export const usePrettier = ({
58
58
  // when the op is coming from Prettier itself.
59
59
  const isApplyingOpRef = useRef(false);
60
60
 
61
+ // We use a ref to keep track of the runPrettier function.
62
+ const runPrettierRef = useRef(null);
63
+
61
64
  useEffect(() => {
62
65
  if (!shareDBDoc) {
63
66
  return;
@@ -134,6 +137,7 @@ export const usePrettier = ({
134
137
  prettierWorker.postMessage(data);
135
138
  }
136
139
  };
140
+ runPrettierRef.current = runPrettier;
137
141
 
138
142
  let debouncePrettier;
139
143
  let debounceTimeout;
@@ -169,50 +173,51 @@ export const usePrettier = ({
169
173
  'op batch',
170
174
  (op: JSONOp, isLocal: boolean) => {
171
175
  // Only act on changes coming from the client
172
- if (isLocal) {
173
- // If the op is coming from Prettier itself,
174
- // then do nothing.
175
- if (isApplyingOpRef.current) {
176
- // console.log('ignoring op from Prettier');
177
- return;
178
- }
176
+ // OR changes coming from the AI Assist that we
177
+ // if (isLocal) {
178
+ // If the op is coming from Prettier itself,
179
+ // then do nothing.
180
+ if (isApplyingOpRef.current) {
181
+ // console.log('ignoring op from Prettier');
182
+ return;
183
+ }
179
184
 
180
- // Example op that we want to act on:
181
- // op [
182
- // "files",
183
- // "2514857669",
184
- // "text",
185
- // {
186
- // "es": [
187
- // 18,
188
- // "d"
189
- // ]
190
- // }
191
- // ]
192
-
193
- // Check if the path of this op is the text content of a file
194
- if (
195
- op &&
196
- op.length === 4 &&
197
- op[0] === 'files' &&
198
- typeof op[1] === 'string' &&
199
- op[2] === 'text'
200
- ) {
201
- // Get the file id
202
- const fileId: FileId = op[1];
203
-
204
- // Add the file id to the set of dirty files
205
- dirtyFilesRef.current.add(fileId);
206
-
207
- // Debounce running Prettier
208
- if (!enableManualPretter) {
209
- debouncePrettier();
210
- }
211
- // console.log('Op is for file', fileId);
185
+ // Example op that we want to act on:
186
+ // op [
187
+ // "files",
188
+ // "2514857669",
189
+ // "text",
190
+ // {
191
+ // "es": [
192
+ // 18,
193
+ // "d"
194
+ // ]
195
+ // }
196
+ // ]
197
+
198
+ // Check if the path of this op is the text content of a file
199
+ if (
200
+ op &&
201
+ op.length === 4 &&
202
+ op[0] === 'files' &&
203
+ typeof op[1] === 'string' &&
204
+ op[2] === 'text'
205
+ ) {
206
+ // Get the file id
207
+ const fileId: FileId = op[1];
208
+
209
+ // Add the file id to the set of dirty files
210
+ dirtyFilesRef.current.add(fileId);
211
+
212
+ // Debounce running Prettier
213
+ if (!enableManualPretter) {
214
+ debouncePrettier();
212
215
  }
213
- } else {
214
- // console.log('ignoring op from remote', op, isLocal);
216
+ // console.log('Op is for file', fileId);
215
217
  }
218
+ // } else {
219
+ // // console.log('ignoring op from remote', op, isLocal);
220
+ // }
216
221
  },
217
222
  );
218
223
 
@@ -243,5 +248,5 @@ export const usePrettier = ({
243
248
  }
244
249
  };
245
250
  }, [shareDBDoc]);
246
- return { prettierError }; // Return the errors for use in other files
251
+ return { prettierError, runPrettierRef }; // Return the errors for use in other files
247
252
  };
package/src/client/usePrettier/worker.ts CHANGED
@@ -5,15 +5,12 @@ 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
7
  import * as prettierPluginTypescript from 'prettier/plugins/typescript';
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';
8
+ import * as prettierPluginSvelte from 'prettier-plugin-svelte/browser';
9
+
12
10
  import { FileId } from '../../types';
13
11
 
14
- const enableSvelte = false;
15
- // console.log('Buffer');
16
- // console.log(Buffer);
12
+ const enableSvelte = true;
13
+
17
14
  const parsers = {
18
15
  js: 'babel',
19
16
  jsx: 'babel',
@@ -30,7 +27,6 @@ const parsers = {
30
27
  md: 'markdown',
31
28
  markdown: 'markdown',
32
29
  // '.vue': 'vue',
33
- // svelte: 'svelte',
34
30
  };
35
31
 
36
32
  if (enableSvelte) {
@@ -45,10 +41,13 @@ const plugins = [
45
41
  prettierPluginMarkdown,
46
42
  prettierPluginTypescript,
47
43
  prettierPluginCSS,
48
- // TODO bring this back
49
- // prettierPluginSvelte,
50
44
  ];
51
45
 
46
+ if (enableSvelte) {
47
+ // @ts-ignore
48
+ plugins.push(prettierPluginSvelte);
49
+ }
50
+
52
51
  onmessage = async ({
53
52
  data,
54
53
  }: {
@@ -101,6 +100,7 @@ onmessage = async ({
101
100
  fileTextPrettified,
102
101
  });
103
102
  } catch (error) {
103
+ console.error(error);
104
104
  postMessage({
105
105
  fileId,
106
106
  error: error.toString(),