vzcode 0.43.0 → 0.44.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/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-WNLp-4Rf.js"></script>
28
- <link rel="stylesheet" crossorigin href="/assets/index-vD_kE3p2.css">
27
+ <script type="module" crossorigin src="/assets/index-f4vqBOE4.js"></script>
28
+ <link rel="stylesheet" crossorigin href="/assets/index-7MNYa9sP.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.43.0",
3
+ "version": "0.44.0",
4
4
  "description": "Multiplayer code editor system",
5
5
  "main": "src/index.ts",
6
6
  "type": "module",
@@ -71,11 +71,11 @@
71
71
  "@codemirror/lang-markdown": "^6.2.3",
72
72
  "@codemirror/state": "^6.3.3",
73
73
  "@codemirror/theme-one-dark": "^6.1.2",
74
- "@codemirror/view": "^6.22.2",
74
+ "@codemirror/view": "^6.22.3",
75
75
  "@lezer/highlight": "^1.2.0",
76
76
  "@replit/codemirror-indentation-markers": "^6.5.0",
77
77
  "@replit/codemirror-interact": "^6.3.0",
78
- "@replit/codemirror-minimap": "^0.5.1",
78
+ "@replit/codemirror-minimap": "^0.5.2",
79
79
  "@replit/codemirror-vscode-keymap": "^6.0.2",
80
80
  "@teamwork/websocket-json-stream": "^2.0.0",
81
81
  "@typescript/vfs": "^1.5.0",
@@ -96,26 +96,27 @@
96
96
  "diff-match-patch": "^1.0.5",
97
97
  "dotenv": "^16.3.1",
98
98
  "express": "^4.18.2",
99
+ "ignore": "^5.3.0",
99
100
  "json0-ot-diff": "^1.1.2",
100
101
  "ngrok": "^4.3.3",
101
102
  "open": "^9.1.0",
102
- "openai": "^4.20.1",
103
+ "openai": "^4.23.0",
103
104
  "react": "^18.2.0",
104
105
  "react-bootstrap": "^2.9.1",
105
106
  "react-dom": "^18.2.0",
106
107
  "sharedb": "^4.1.2",
107
108
  "sharedb-client-browser": "^4.4.0",
108
- "vizhub-ui": "^3.10.0",
109
- "ws": "^8.15.0"
109
+ "vizhub-ui": "^3.13.0",
110
+ "ws": "^8.15.1"
110
111
  },
111
112
  "devDependencies": {
112
- "@types/react": "^18.2.43",
113
- "@types/react-dom": "^18.2.17",
113
+ "@types/react": "^18.2.45",
114
+ "@types/react-dom": "^18.2.18",
114
115
  "@vitejs/plugin-react": "^4.2.1",
115
116
  "prettier": "^3.1.1",
116
117
  "sass": "^1.69.5",
117
118
  "typescript": "^5.3.3",
118
- "vite": "^5.0.7",
119
+ "vite": "^5.0.10",
119
120
  "vitest": "^1.0.4"
120
121
  }
121
122
  }
@@ -294,7 +294,20 @@ export const getOrCreateEditor = ({
294
294
 
295
295
  // VSCode keybindings
296
296
  // See https://github.com/replit/codemirror-vscode-keymap#usage
297
- extensions.push(keymap.of(vscodeKeymap));
297
+ // extensions.push(keymap.of(vscodeKeymap));
298
+ extensions.push(
299
+ keymap.of(
300
+ vscodeKeymap.map((binding) => {
301
+ // Here we override the Shift+Enter behavior specifically,
302
+ // as that can be used to trigger a manual save/Prettier,
303
+ // and the default behavior from the keymap interferes.
304
+ if (binding.key === 'Enter') {
305
+ delete binding.shift;
306
+ }
307
+ return binding;
308
+ }),
309
+ ),
310
+ );
298
311
 
299
312
  const editor = new EditorView({
300
313
  state: EditorState.create({
@@ -94,6 +94,7 @@ export const VZCodeProvider = ({
94
94
  initialUsername,
95
95
  children,
96
96
  codeError = null,
97
+ enableManualPretter = false,
97
98
  }: {
98
99
  content: VZCodeContent;
99
100
  shareDBDoc: ShareDBDoc<VZCodeContent>;
@@ -107,17 +108,19 @@ export const VZCodeProvider = ({
107
108
  initialUsername: Username;
108
109
  children: React.ReactNode;
109
110
  codeError?: string | null;
111
+ enableManualPretter?: boolean;
110
112
  }) => {
111
113
  // Auto-run Pretter after local changes.
112
114
  const {
113
115
  prettierError,
114
116
  }: {
115
117
  prettierError: string | null;
116
- } = usePrettier(
118
+ } = usePrettier({
117
119
  shareDBDoc,
118
120
  submitOperation,
119
121
  prettierWorker,
120
- );
122
+ enableManualPretter,
123
+ });
121
124
 
122
125
  // The error message shows either:
123
126
  // * `prettierError` - errors from Prettier, client-side only
@@ -6,7 +6,7 @@ import { VZCodeContext } from './VZCodeContext';
6
6
  // The middle portion of the VZCode environment, containing:
7
7
  // * The sidebar
8
8
  // * The settings modal
9
- export const VZLeft = () => {
9
+ export const VZLeft = ({ enableUsernameField = true }) => {
10
10
  // TODO leverage this context in deeper levels of the component tree.
11
11
  const {
12
12
  files,
@@ -50,6 +50,7 @@ export const VZLeft = () => {
50
50
  setTheme={setTheme}
51
51
  username={username}
52
52
  setUsername={setUsername}
53
+ enableUsernameField={enableUsernameField}
53
54
  />
54
55
  </div>
55
56
  );
@@ -13,7 +13,7 @@ import { VZCodeContext } from './VZCodeContext';
13
13
  // * The code error overlay
14
14
  // * The presence notifications
15
15
  // * The UI for AI Assist
16
- export const VZMiddle = () => {
16
+ export const VZMiddle = ({ enableAIAssist = true }) => {
17
17
  const { codeEditorWidth } = useContext(
18
18
  SplitPaneResizeContext,
19
19
  );
@@ -78,7 +78,7 @@ export const VZMiddle = () => {
78
78
  docPresence={docPresence}
79
79
  localPresence={localPresence}
80
80
  />
81
- {content && activeFileId ? (
81
+ {enableAIAssist && content && activeFileId ? (
82
82
  <AIAssistWidget
83
83
  activeFileId={activeFileId}
84
84
  shareDBDoc={shareDBDoc}
@@ -12,3 +12,4 @@ export {
12
12
  SplitPaneResizeContext,
13
13
  } from './SplitPaneResizeContext';
14
14
  export { useSubmitOperation } from './useSubmitOperation';
15
+ export { shouldTriggerRun } from './usePrettier';
@@ -1,4 +1,4 @@
1
- import { JSONOp } from 'ot-json1';
1
+ import { JSONOp } from '../../ot';
2
2
  import {
3
3
  FileId,
4
4
  ShareDBDoc,
@@ -20,16 +20,58 @@ const extension = (fileName: string) => {
20
20
  }
21
21
  };
22
22
 
23
- export const usePrettier = (
24
- shareDBDoc: ShareDBDoc<VZCodeContent> | null,
23
+ // export const shouldTriggerRun = (event: KeyboardEvent) => {
24
+ // if(event.ctrlKey && event.key === 's') {
25
+ // return true;
26
+ // }
27
+ // }
28
+
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
+ export const usePrettier = ({
59
+ shareDBDoc,
60
+ submitOperation,
61
+ prettierWorker,
62
+ enableManualPretter,
63
+ }: {
64
+ shareDBDoc: ShareDBDoc<VZCodeContent> | null;
25
65
  submitOperation: (
26
66
  next: (content: VZCodeContent) => VZCodeContent,
27
- ) => void,
28
- prettierWorker: Worker,
29
- ) => {
67
+ ) => void;
68
+ prettierWorker: Worker;
69
+ enableManualPretter: boolean;
70
+ }) => {
30
71
  // The set of files that have been modified
31
72
  // since the last Prettier run.
32
- const dirtyFiles: Set<FileId> = new Set<FileId>();
73
+ // const dirtyFiles: Set<FileId> = new Set<FileId>();
74
+ const dirtyFilesRef = useRef<Set<FileId>>(new Set());
33
75
 
34
76
  // State to hold the error from Prettier
35
77
  // `null` means no errors
@@ -95,6 +137,9 @@ export const usePrettier = (
95
137
  // Get the files
96
138
  const files = content.files;
97
139
 
140
+ // Get the set of dirty files
141
+ const dirtyFiles = dirtyFilesRef.current;
142
+
98
143
  // Get the dirty files
99
144
  const dirtyFileIds = Array.from(dirtyFiles);
100
145
 
@@ -118,20 +163,35 @@ export const usePrettier = (
118
163
  }
119
164
  };
120
165
 
121
- // Function to debounce running Prettier
166
+ let debouncePrettier;
122
167
  let debounceTimeout;
123
- function debouncePrettier() {
124
- clearTimeout(debounceTimeout);
125
- debounceTimeout = setTimeout(
126
- runPrettier,
127
- autoPrettierDebounceTimeMS,
168
+ let handleKeyDown;
169
+ if (enableManualPretter) {
170
+ handleKeyDown = (event: KeyboardEvent) => {
171
+ if (shouldTriggerRun(event)) {
172
+ event.preventDefault();
173
+ runPrettier();
174
+ }
175
+ };
176
+ document.addEventListener('keydown', handleKeyDown);
177
+ } else {
178
+ // Function to debounce running Prettier
179
+
180
+ debouncePrettier = () => {
181
+ clearTimeout(debounceTimeout);
182
+ debounceTimeout = setTimeout(
183
+ runPrettier,
184
+ autoPrettierDebounceTimeMS,
185
+ );
186
+ };
187
+ //Stops prettier from running when you perform a mouse move or a keydown
188
+ window.addEventListener(
189
+ 'mousemove',
190
+ debouncePrettier,
128
191
  );
192
+ window.addEventListener('keydown', debouncePrettier);
129
193
  }
130
194
 
131
- //Stops prettier from running when you perform a mouse move or a keydown
132
- window.addEventListener('mousemove', debouncePrettier);
133
- window.addEventListener('keydown', debouncePrettier);
134
-
135
195
  // Listen for changes
136
196
  shareDBDoc.on(
137
197
  'op batch',
@@ -170,11 +230,12 @@ export const usePrettier = (
170
230
  const fileId: FileId = op[1];
171
231
 
172
232
  // Add the file id to the set of dirty files
173
- dirtyFiles.add(fileId);
233
+ dirtyFilesRef.current.add(fileId);
174
234
 
175
235
  // Debounce running Prettier
176
- debouncePrettier();
177
-
236
+ if (!enableManualPretter) {
237
+ debouncePrettier();
238
+ }
178
239
  // console.log('Op is for file', fileId);
179
240
  }
180
241
  } else {
@@ -190,17 +251,24 @@ export const usePrettier = (
190
251
  'message',
191
252
  handleMessage,
192
253
  );
193
- window.removeEventListener(
194
- 'keydown',
195
- debouncePrettier,
196
- );
197
- window.removeEventListener(
198
- 'mousemove',
199
- debouncePrettier,
200
- );
254
+ if (enableManualPretter) {
255
+ document.removeEventListener(
256
+ 'keydown',
257
+ handleKeyDown,
258
+ );
259
+ } else {
260
+ window.removeEventListener(
261
+ 'keydown',
262
+ debouncePrettier,
263
+ );
264
+ window.removeEventListener(
265
+ 'mousemove',
266
+ debouncePrettier,
267
+ );
201
268
 
202
- // Clear the timeout
203
- clearTimeout(debounceTimeout);
269
+ // Clear the timeout
270
+ clearTimeout(debounceTimeout);
271
+ }
204
272
  };
205
273
  }, [shareDBDoc]);
206
274
  return { prettierError }; // Return the errors for use in other files
package/src/index.ts CHANGED
@@ -21,4 +21,5 @@ export {
21
21
  SplitPaneResizeProvider,
22
22
  SplitPaneResizeContext,
23
23
  useSubmitOperation,
24
+ shouldTriggerRun,
24
25
  } from './client';
@@ -5,9 +5,65 @@ import {
5
5
  enableDirectories,
6
6
  debugDirectories,
7
7
  } from './featureFlags.js';
8
+ import createIgnore from 'ignore';
8
9
 
9
10
  const isDirectory = (file) => file.endsWith('/');
10
11
 
12
+ /**
13
+ * @param {string} fullPath - absolut path of the workspace root
14
+ * @param {string} currentDirectoryPath - path where the ignore file is found, relative to fullPath
15
+ * @param {string} fileName - name of the ignore file
16
+ * @returns {string[]} parsed lines
17
+ */
18
+ const parseIgnoreFile = (
19
+ fullPath,
20
+ currentDirectory,
21
+ fileName,
22
+ ) => {
23
+ const filePath = path.join(
24
+ fullPath,
25
+ currentDirectory,
26
+ fileName,
27
+ );
28
+ const content = fs.readFileSync(filePath, 'utf8');
29
+ const globs = content
30
+ .split(/(?:[\n\r])+/)
31
+ .filter(
32
+ // remove blank line and comments
33
+ (line) => line.length > 0 && !line.startsWith('#'),
34
+ )
35
+ .map((line) => {
36
+ const { bang, slash, glob } = line.match(
37
+ /^(?<bang>!?)(?<slash>\/?)(?<glob>.*)$/,
38
+ ).groups;
39
+ const hasSlash =
40
+ Boolean(slash) || /\/.*\S/.test(glob);
41
+ const relativeGlob = path.posix.join(
42
+ currentDirectory.replace(
43
+ // escape characters ith special meaning in glob expressions
44
+ /[*?!# \[\]\\]/g,
45
+ (char) => '\\' + char,
46
+ ),
47
+ // a pattern that doesn't include a slash (not counting a trailing one) matches files in any descendant directory od the current one
48
+ hasSlash ? '' : '**',
49
+ glob,
50
+ );
51
+ // preserve leading ! and / characters
52
+ return bang + slash + relativeGlob;
53
+ });
54
+ if (debugDirectories) {
55
+ console.debug(
56
+ 'at',
57
+ currentDirectory,
58
+ 'parsing',
59
+ fileName,
60
+ 'obtained globs',
61
+ globs,
62
+ );
63
+ }
64
+ return globs;
65
+ };
66
+
11
67
  // Lists files from the file system,
12
68
  // converts them into the VZCode internal
13
69
  // ShareDB-compatible data structure.
@@ -15,8 +71,6 @@ export const computeInitialDocument = ({ fullPath }) => {
15
71
  // Isolate files, not directories.
16
72
  // Inspired by https://stackoverflow.com/questions/41472161/fs-readdir-ignore-directories
17
73
 
18
- const unsearchedDirectories = [''];
19
-
20
74
  // Initialize the document using our data structure for representing files.
21
75
  const initialDocument = {
22
76
  // `files`
@@ -34,39 +88,105 @@ export const computeInitialDocument = ({ fullPath }) => {
34
88
  isInteracting: false,
35
89
  };
36
90
 
37
- // Stack for recursively traversing directories.
91
+ /**
92
+ * Stack for recursively traversing directories.
93
+ * @type {string[]}
94
+ */
38
95
  let files = [];
39
96
 
97
+ // default paths to ignore
98
+ const globs = ['.git'];
99
+ const ignoreStack = [
100
+ { ignore: createIgnore().add('globs'), globs },
101
+ ];
102
+
103
+ const unsearchedDirectories = [
104
+ { currentDirectory: '.', ignoreStack },
105
+ ];
106
+
40
107
  while (unsearchedDirectories.length !== 0) {
41
- const currentDirectory = unsearchedDirectories.pop();
108
+ const { currentDirectory, ignoreStack } =
109
+ unsearchedDirectories.pop();
42
110
  const currentDirectoryPath = path.join(
43
111
  fullPath,
44
112
  currentDirectory,
45
113
  );
46
- const newFiles = fs
114
+ const dirEntries = fs
47
115
  .readdirSync(currentDirectoryPath, {
48
116
  withFileTypes: true,
49
117
  })
50
118
  .filter((dirent) =>
51
119
  enableDirectories ? true : dirent.isFile(),
120
+ );
121
+ // find .ignore or .gitignore files in the current directory
122
+ const ignoreFiles = dirEntries
123
+ .filter(
124
+ (dirent) =>
125
+ dirent.isFile() &&
126
+ /^\.(?:git)?ignore$/.test(dirent.name),
52
127
  )
53
-
128
+ .map((file) => file.name);
129
+ const ignoreEntry = ignoreStack.at(-1);
130
+ let { ignore } = ignoreEntry;
131
+ let newIgnoreStack = ignoreStack;
132
+ if (ignoreFiles.length > 0) {
133
+ const globs = ignoreFiles.flatMap((fileName) =>
134
+ parseIgnoreFile(
135
+ fullPath,
136
+ currentDirectory,
137
+ fileName,
138
+ ),
139
+ );
140
+ const newEntry = { ignore, globs };
141
+ newIgnoreStack = ignoreStack.slice();
142
+ newIgnoreStack.push(newEntry);
143
+ ignore = createIgnore().add(
144
+ newIgnoreStack.flatMap((entry) => entry.globs),
145
+ );
146
+ newEntry.ignore = ignore;
147
+ if (debugDirectories) {
148
+ console.debug(
149
+ 'at',
150
+ currentDirectory,
151
+ 'ignoring globs',
152
+ newIgnoreStack.map((item) => item.globs),
153
+ );
154
+ }
155
+ }
156
+ const newFiles = dirEntries
157
+ .filter((dirent) => {
158
+ let keep = !ignore.ignores(
159
+ path.posix.join(currentDirectory, dirent.name),
160
+ );
161
+ if (debugDirectories && !keep) {
162
+ console.debug(
163
+ 'at',
164
+ currentDirectory,
165
+ 'ignoring',
166
+ dirent.name,
167
+ );
168
+ }
169
+ return keep;
170
+ })
54
171
  // Add a trailing slash for directories
55
172
  .map((dirent) => {
56
- const relativePath =
57
- currentDirectory === ''
58
- ? dirent.name
59
- : currentDirectory + '/' + dirent.name;
173
+ const relativePath = path.posix.join(
174
+ currentDirectory,
175
+ dirent.name,
176
+ );
60
177
 
61
- if (dirent.isFile()) {
178
+ if (!dirent.isDirectory()) {
62
179
  return relativePath;
63
180
  }
64
- unsearchedDirectories.push(relativePath);
181
+ unsearchedDirectories.push({
182
+ currentDirectory: relativePath,
183
+ ignoreStack: newIgnoreStack,
184
+ });
65
185
  return relativePath + '/';
66
186
  });
67
187
  // console.log(currentDirectory);
68
188
 
69
- files = [...files, ...newFiles];
189
+ files.push(...newFiles);
70
190
  }
71
191
 
72
192
  files.forEach((file) => {