vzcode 0.17.0 → 0.18.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/README.md +47 -39
- package/dist/assets/index-0053b846.css +1 -0
- package/dist/assets/{index-ab3ae13e.js → index-24635cd2.js} +37 -37
- package/dist/index.html +15 -5
- package/package.json +2 -2
- package/src/client/App.tsx +92 -52
- package/src/client/CodeEditor/getOrCreateEditor.ts +33 -9
- package/src/client/CodeEditor/index.tsx +15 -11
- package/src/client/CodeEditor/json1PresenceBroadcast.js +10 -3
- package/src/client/CodeEditor/json1PresenceDisplay.js +7 -2
- package/src/client/CodeEditor/widgets.ts +5 -1
- package/src/client/Resizer/index.tsx +96 -0
- package/src/client/Resizer/styles.scss +29 -0
- package/src/client/Settings.tsx +29 -21
- package/src/client/Sidebar/DirectoryArrowSVG.jsx +4 -1
- package/src/client/Sidebar/DirectoryListing.tsx +17 -5
- package/src/client/Sidebar/FileListing.tsx +4 -1
- package/src/client/Sidebar/Listing.tsx +9 -2
- package/src/client/Sidebar/index.tsx +30 -8
- package/src/client/Sidebar/styles.scss +0 -1
- package/src/client/SplitPaneResizeContext.tsx +63 -0
- package/src/client/TabList/index.tsx +7 -2
- package/src/client/diff.js +7 -1
- package/src/client/featureFlags.js +2 -1
- package/src/client/sortFileTree.ts +3 -1
- package/src/client/style.scss +18 -12
- package/src/client/themes.ts +10 -8
- package/src/client/useDynamicTheme.ts +5 -2
- package/src/client/useOpenDirectories.ts +11 -8
- package/src/client/usePrettier/index.ts +76 -57
- package/src/client/usePrettier/worker.ts +4 -1
- package/src/client/useTabsState.ts +10 -3
- package/src/randomId.js +14 -1
- package/src/server/computeInitialDocument.js +18 -5
- package/src/server/index.js +7 -2
- package/src/types.ts +11 -4
- package/dist/assets/index-ccd52a89.css +0 -1
package/README.md
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
# VZCode: Multiplayer Code Editor
|
|
2
2
|
|
|
3
|
-
VZCode offers a multiplayer code editing environment that caters to a real-time collaborative development experience.
|
|
3
|
+
VZCode offers a multiplayer code editing environment that caters to a real-time collaborative development experience.
|
|
4
4
|
|
|
5
5
|

|
|
6
6
|
|
|
7
7
|
## Table of Contents
|
|
8
|
+
|
|
8
9
|
- [Development](#development)
|
|
9
10
|
- [Features](#features)
|
|
10
11
|
- [Use Cases](#use-cases)
|
|
@@ -20,17 +21,20 @@ VZCode offers a multiplayer code editing environment that caters to a real-time
|
|
|
20
21
|
- **Backlog & Issues**: Use our [Kanban Board](https://github.com/orgs/vizhub-core/projects/2/views/1) to track the backlog, [good first issues](https://github.com/orgs/vizhub-core/projects/2/views/1?filterQuery=label%3A%22good+first+issue%22), and [known bugs](https://github.com/orgs/vizhub-core/projects/2/views/1?filterQuery=label%3Abug).
|
|
21
22
|
|
|
22
23
|
- **Local Setup**:
|
|
23
|
-
```bash
|
|
24
|
-
cd vzcode
|
|
25
|
-
npm install
|
|
26
|
-
npm run test-interactive
|
|
27
|
-
```
|
|
28
|
-
For hot reloading (client-side only), run:
|
|
29
|
-
```bash
|
|
30
|
-
npm run dev
|
|
31
|
-
```
|
|
32
24
|
|
|
33
|
-
|
|
25
|
+
```bash
|
|
26
|
+
cd vzcode
|
|
27
|
+
npm install
|
|
28
|
+
npm run test-interactive
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
For hot reloading (client-side only), run:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm run dev
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
You can also use [npm link](https://docs.npmjs.com/cli/v8/commands/npm-link) to set up the `vzcode` NPM package in another project to point to your clone of the repository. This can be useful when testing out how `vzcode` functions as a dependency.
|
|
34
38
|
|
|
35
39
|
## Features
|
|
36
40
|
|
|
@@ -47,37 +51,41 @@ VZCode offers a multiplayer code editing environment that caters to a real-time
|
|
|
47
51
|
## Use Cases
|
|
48
52
|
|
|
49
53
|
- **Local Editor**:
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
"
|
|
66
|
-
|
|
67
|
-
|
|
54
|
+
Use VZCode like VSCode or Vim:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npm install -g vzcode
|
|
58
|
+
cd myProject
|
|
59
|
+
vzcode
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
- **Project-specific Editor**:
|
|
63
|
+
Embed VZCode within your project for developers who might not have a preferred IDE, or to provide an editing experience that seamlessly integrates with hot reloading.
|
|
64
|
+
|
|
65
|
+
```json
|
|
66
|
+
{
|
|
67
|
+
"name": "example-project",
|
|
68
|
+
"scripts": {
|
|
69
|
+
"edit": "vzcode"
|
|
70
|
+
},
|
|
71
|
+
"dependencies": {
|
|
72
|
+
"vzcode": "^0.1.0"
|
|
68
73
|
}
|
|
69
|
-
|
|
70
|
-
|
|
74
|
+
}
|
|
75
|
+
```
|
|
71
76
|
|
|
72
|
-
|
|
77
|
+
Run using `npm run edit`.
|
|
78
|
+
|
|
79
|
+
For example, as the editor of [Vite D3 Template](https://github.com/curran/vite-d3-template), which showcases the throttled auto-save behavior of VZCode while using the interactive widgets in the context of editing files served by the Vite dev server which supports hot reloading.
|
|
73
80
|
|
|
74
81
|
- **Hosting with Ngrok**: Allow external collaborators to join your VZCode session.
|
|
75
|
-
|
|
82
|
+
|
|
76
83
|
- **With Ngrok Globally Installed**: (Requires authenticated Ngrok account)
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
84
|
+
|
|
85
|
+
```bash
|
|
86
|
+
vzcode
|
|
87
|
+
ngrok http 3030
|
|
88
|
+
```
|
|
81
89
|
|
|
82
90
|
- **Through VZCode**: Coming soon!
|
|
83
91
|
|
|
@@ -109,7 +117,7 @@ The project aims to:
|
|
|
109
117
|
|
|
110
118
|
## Prior Work
|
|
111
119
|
|
|
112
|
-
VZCode is inspired by [VizHub v2](https://github.com/vizhub-core/vizhub/). VizHub V2's code editor supports real-time collaboration using older versions of libraries such as CodeMirror 5 and JSON0 OT. For VZCode, the aim is to leverage the latest technologies to deliver a more streamlined experience.
|
|
120
|
+
VZCode is inspired by [VizHub v2](https://github.com/vizhub-core/vizhub/). VizHub V2's code editor supports real-time collaboration using older versions of libraries such as CodeMirror 5 and JSON0 OT. For VZCode, the aim is to leverage the latest technologies to deliver a more streamlined experience.
|
|
113
121
|
|
|
114
122
|

|
|
115
123
|
|
|
@@ -129,7 +137,7 @@ For detailed progress, visit the [VZCode Kanban Board](https://github.com/orgs/v
|
|
|
129
137
|
|
|
130
138
|
- **Curran Kelleher**
|
|
131
139
|
- **Anooj Pai** from [RPI RCOS](https://rcos.io/)
|
|
132
|
-
|
|
140
|
+
|
|
133
141
|
We welcome contributions!
|
|
134
142
|
|
|
135
143
|
## Spaces
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.vz-code-editor{flex:1;display:flex;font-family:var(--vzcode-font-family);overflow-x:auto}.vz-code-editor .cm-editor{flex:1}.vz-sidebar{height:100%;background:rgb(54,65,89);display:flex;flex-direction:column;justify-content:space-between}.vz-sidebar .full-box{padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.vz-sidebar .files{overflow:auto}.vz-sidebar .file-or-directory{display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:pointer;margin:0 10px;color:#dbdde1;border-radius:5px}.vz-sidebar .link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;font-size:12px;text-decoration:none}.vz-sidebar .new-btn{justify-content:right;margin-right:10px;cursor:pointer}.vz-sidebar .utils{display:flex}.vz-sidebar .utilities{margin-right:3px}.vz-sidebar .file-or-directory:hover,.vz-sidebar .settings:hover{background-color:#4a5469}.vz-sidebar .name{display:flex;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vz-sidebar .indentation{margin-left:20px}.vz-sidebar .arrow-wrapper{margin-right:4px}.vz-sidebar .settings{height:30px;color:#dbdde1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px 0;margin:10px;border-radius:5px}.vz-tab-list{display:flex;background-color:#252526}.vz-tab-list .tab{background:rgb(45,45,45);color:#fff;font-family:var(--vzcode-font-family);align-items:center;display:flex;padding-top:2px;padding-left:10px;padding-right:10px;border-top-left-radius:10px;border-top-right-radius:10px;margin-top:5px;margin-left:2px;margin-right:2px;cursor:pointer}.vz-tab-list .tab .tab-close{margin-left:5px}.vz-tab-list .tab .tab-close:hover{border-radius:30%;background-color:#252526}.vz-tab-list .tab.active{background-color:#292c34}.vz-resizer{position:absolute;top:0;left:0;bottom:0}.vz-resizer:hover{cursor:col-resize}.vz-resizer .vz-resizer-thumb{position:absolute;top:0;bottom:0;transition:background-color .15s .25s}.vz-resizer:hover .vz-resizer-thumb{background-color:#0078d4}:root{--vzcode-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;--vz-bg-color: rgb( 41, 44, 52 )}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--app-bg-color)}::-webkit-scrollbar-thumb{background:rgb(37,37,38)}::-webkit-scrollbar-thumb:hover{background:#555}html,body,#root,.app{height:100%}.app{background-color:var(--vz-bg-color);font-family:Poppins,sans-serif;display:flex;position:relative}.app .left,.app .right{display:flex}.app .right{flex:1;flex-direction:column;min-width:0}
|