vzcode 0.78.0 → 0.79.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 (9) hide show
  1. package/dist/assets/{index-Cv26Z85N.js → index-DZXcjW4O.js} +42 -42
  2. package/dist/assets/{worker-CPGExEr5.js → worker-Bp-D5zJz.js} +63 -63
  3. package/dist/assets/{worker-RqaVTR5D.js → worker-DHoGVnSk.js} +190 -190
  4. package/dist/index.html +1 -1
  5. package/package.json +4 -4
  6. package/src/client/CodeEditor/getOrCreateEditor.ts +41 -25
  7. package/src/client/CodeEditor/index.tsx +24 -56
  8. package/src/client/VZCodeContext.tsx +3 -0
  9. package/src/client/VZMiddle.tsx +1 -15
package/dist/index.html CHANGED
@@ -20,7 +20,7 @@
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-Cv26Z85N.js"></script>
23
+ <script type="module" crossorigin src="/assets/index-DZXcjW4O.js"></script>
24
24
  <link rel="stylesheet" crossorigin href="/assets/index-WtPPom-d.css">
25
25
  </head>
26
26
  <body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vzcode",
3
- "version": "0.78.0",
3
+ "version": "0.79.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
@@ -95,7 +95,7 @@
95
95
  "d3-array": "^3.2.4",
96
96
  "diff-match-patch": "^1.0.5",
97
97
  "dotenv": "^16.4.5",
98
- "express": "^4.19.0",
98
+ "express": "^4.19.1",
99
99
  "ignore": "^5.3.1",
100
100
  "json0-ot-diff": "^1.1.2",
101
101
  "ngrok": "^4.3.3",
@@ -118,8 +118,8 @@
118
118
  "concurrently": "^8.2.2",
119
119
  "prettier": "^3.2.5",
120
120
  "sass": "^1.72.0",
121
- "typescript": "^5.4.2",
122
- "vite": "^5.2.2",
121
+ "typescript": "^5.4.3",
122
+ "vite": "^5.2.3",
123
123
  "vitest": "^1.4.0"
124
124
  }
125
125
  }
package/src/client/CodeEditor/getOrCreateEditor.ts CHANGED
@@ -80,6 +80,7 @@ const getAtPath = (obj, path) => {
80
80
  export const getOrCreateEditor = ({
81
81
  fileId,
82
82
  shareDBDoc,
83
+ content,
83
84
  filesPath,
84
85
  localPresence,
85
86
  docPresence,
@@ -98,7 +99,13 @@ export const getOrCreateEditor = ({
98
99
  // based on the file extension.
99
100
  // It's also passed into the `json1Sync` extension,
100
101
  // which is used for multiplayer editing.
101
- shareDBDoc: ShareDBDoc<VZCodeContent>;
102
+ // This can be `undefined` in the case where we are
103
+ // viewing files read-only, in which case multiplayer
104
+ // editing is not enabled.
105
+ shareDBDoc: ShareDBDoc<VZCodeContent> | undefined;
106
+
107
+ // The initial content to present.
108
+ content: VZCodeContent;
102
109
 
103
110
  filesPath: string[];
104
111
  localPresence: any;
@@ -118,11 +125,10 @@ export const getOrCreateEditor = ({
118
125
  // Cache miss
119
126
 
120
127
  // Compute `text` and `fileExtension` from the ShareDB document.
121
- const data = shareDBDoc.data;
122
128
  const textPath = [...filesPath, fileId, 'text'];
123
129
  const namePath = [...filesPath, fileId, 'name'];
124
- const text = getAtPath(data, textPath);
125
- const name = getAtPath(data, namePath);
130
+ const text = getAtPath(content, textPath);
131
+ const name = getAtPath(content, namePath);
126
132
  const fileExtension = name.split('.').pop();
127
133
 
128
134
  // Create a compartment for the theme so that it can be changed dynamically.
@@ -135,31 +141,41 @@ export const getOrCreateEditor = ({
135
141
  // This plugin implements multiplayer editing,
136
142
  // real-time synchronozation of changes across clients.
137
143
  // Does not deal with showing others' cursors.
138
- extensions.push(
139
- json1Sync({
140
- shareDBDoc,
141
- path: textPath,
142
- json1: json1Presence,
143
- textUnicode,
144
- }),
145
- );
146
-
147
- // Deals with broadcasting changes in cursor location and selection.
148
- if (localPresence) {
144
+ if (shareDBDoc) {
149
145
  extensions.push(
150
- json1PresenceBroadcast({
146
+ json1Sync({
147
+ shareDBDoc,
151
148
  path: textPath,
152
- localPresence,
153
- usernameRef,
149
+ json1: json1Presence,
150
+ textUnicode,
154
151
  }),
155
152
  );
156
- }
157
153
 
158
- // Deals with receiving the broadcas from other clients and displaying them.
159
- if (docPresence)
160
- extensions.push(
161
- json1PresenceDisplay({ path: textPath, docPresence }),
162
- );
154
+ // Deals with broadcasting changes in cursor location and selection.
155
+ if (localPresence) {
156
+ extensions.push(
157
+ json1PresenceBroadcast({
158
+ path: textPath,
159
+ localPresence,
160
+ usernameRef,
161
+ }),
162
+ );
163
+ }
164
+
165
+ // Deals with receiving the broadcas from other clients and displaying them.
166
+ if (docPresence) {
167
+ extensions.push(
168
+ json1PresenceDisplay({
169
+ path: textPath,
170
+ docPresence,
171
+ }),
172
+ );
173
+ }
174
+ } else {
175
+ // If the ShareDB document is not provided,
176
+ // then we do not allow editing.
177
+ extensions.push(EditorView.editable.of(false));
178
+ }
163
179
 
164
180
  extensions.push(colorsInTextPlugin);
165
181
 
@@ -247,7 +263,7 @@ export const getOrCreateEditor = ({
247
263
  }),
248
264
  );
249
265
  }
250
- if (enableTypeScriptLinter) {
266
+ if (shareDBDoc && enableTypeScriptLinter) {
251
267
  extensions.push(
252
268
  linter(
253
269
  typeScriptLinter({
package/src/client/CodeEditor/index.tsx CHANGED
@@ -3,66 +3,33 @@ import {
3
3
  useLayoutEffect,
4
4
  useCallback,
5
5
  useMemo,
6
+ useContext,
6
7
  } from 'react';
7
- import {
8
- FileId,
9
- ShareDBDoc,
10
- Username,
11
- VZCodeContent,
12
- } from '../../types';
13
- import { ThemeLabel, defaultTheme } from '../themes';
14
- import {
15
- EditorCache,
16
- EditorCacheValue,
17
- } from '../useEditorCache';
8
+ import { Username } from '../../types';
9
+ import { EditorCacheValue } from '../useEditorCache';
18
10
  import { getOrCreateEditor } from './getOrCreateEditor';
11
+ import { VZCodeContext } from '../VZCodeContext';
19
12
  import './style.scss';
20
13
 
21
- export const CodeEditor = ({
22
- activeFileId,
23
- shareDBDoc,
24
- submitOperation,
25
- localPresence,
26
- docPresence,
27
- theme = defaultTheme,
28
- filesPath = ['files'],
29
- editorCache,
30
- editorWantsFocus,
31
- editorNoLongerWantsFocus,
32
- username,
33
- typeScriptWorker,
34
- }: {
35
- activeFileId: FileId;
36
- shareDBDoc: ShareDBDoc<VZCodeContent> | null;
37
- submitOperation: (
38
- next: (content: VZCodeContent) => VZCodeContent,
39
- ) => void;
40
- localPresence?: any;
41
- docPresence?: any;
42
- theme?: ThemeLabel;
43
-
44
- // The path of the files object in the ShareDB document.
45
- // Defaults to `files` if not provided.
46
- filesPath?: string[];
47
- editorCache: EditorCache;
48
-
49
- // Whether the editor should be focused.
50
- editorWantsFocus: boolean;
51
-
52
- // Signals that the editor no longer wants focus.
53
- editorNoLongerWantsFocus: () => void;
54
- username: Username;
55
-
56
- // The server endpoint for the AI Assist service.
57
- aiAssistEndpoint?: string;
14
+ // The path in the ShareDB document where the files live.
15
+ const filesPath = ['files'];
16
+
17
+ export const CodeEditor = () => {
18
+ const {
19
+ activeFileId,
20
+ shareDBDoc,
21
+ content,
22
+ submitOperation,
23
+ localPresence,
24
+ docPresence,
25
+ username,
26
+ editorCache,
27
+ editorWantsFocus,
28
+ editorNoLongerWantsFocus,
29
+ typeScriptWorker,
30
+ theme,
31
+ } = useContext(VZCodeContext);
58
32
 
59
- // Additional options to pass to the AI Assist service,
60
- // an object with string values.
61
- aiAssistOptions?: {
62
- [key: string]: string;
63
- };
64
- typeScriptWorker: Worker;
65
- }) => {
66
33
  const ref = useRef<HTMLDivElement>(null);
67
34
 
68
35
  // Set `doc.data.isInteracting` to `true` when the user is interacting
@@ -103,6 +70,7 @@ export const CodeEditor = ({
103
70
  getOrCreateEditor({
104
71
  fileId: activeFileId,
105
72
  shareDBDoc,
73
+ content,
106
74
  filesPath,
107
75
  localPresence,
108
76
  docPresence,
@@ -132,7 +100,7 @@ export const CodeEditor = ({
132
100
  useLayoutEffect(() => {
133
101
  // Guard against cases where page is still loading.
134
102
  if (!ref.current) return;
135
- if (!shareDBDoc) return;
103
+ if (!content) return;
136
104
 
137
105
  // Add the editor to the DOM.
138
106
  ref.current.appendChild(editorCacheValue.editor.dom);
package/src/client/VZCodeContext.tsx CHANGED
@@ -91,7 +91,10 @@ export type VZCodeContextValue = {
91
91
  toggleDirectory: (path: string) => void;
92
92
 
93
93
  editorCache: EditorCache;
94
+
95
+ // Whether the editor should be focused.
94
96
  editorWantsFocus: boolean;
97
+ // Signals that the editor no longer wants focus.
95
98
  editorNoLongerWantsFocus: () => void;
96
99
 
97
100
  errorMessage: string | null;
package/src/client/VZMiddle.tsx CHANGED
@@ -76,21 +76,7 @@ export const VZMiddle = ({
76
76
  createFile={createFile}
77
77
  />
78
78
  {isClient && content && activeFileId && (
79
- <CodeEditor
80
- shareDBDoc={shareDBDoc}
81
- submitOperation={submitOperation}
82
- localPresence={localPresence}
83
- docPresence={docPresence}
84
- activeFileId={activeFileId}
85
- theme={theme}
86
- editorCache={editorCache}
87
- editorWantsFocus={editorWantsFocus}
88
- editorNoLongerWantsFocus={
89
- editorNoLongerWantsFocus
90
- }
91
- username={username}
92
- typeScriptWorker={typeScriptWorker}
93
- />
79
+ <CodeEditor />
94
80
  )}
95
81
  {isClient &&
96
82
  enableAIAssist &&