vzcode 0.14.0 → 0.16.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 +98 -130
- package/dist/assets/index-0818f26e.js +115 -0
- package/dist/assets/worker-d5f0575a.js +237 -0
- package/dist/index.html +1 -1
- package/package.json +6 -6
- package/src/client/App.tsx +55 -34
- package/src/client/CodeEditor/getOrCreateEditor.ts +100 -42
- package/src/client/CodeEditor/index.tsx +22 -10
- package/src/client/Settings.tsx +17 -3
- package/src/client/main.jsx +3 -3
- package/src/client/themes.ts +30 -7
- package/src/client/useDynamicTheme.ts +26 -0
- package/src/client/useEditorCache.ts +21 -0
- package/src/client/vizhubTheme.js +1 -0
- package/dist/assets/index-176d73ed.js +0 -115
- package/dist/assets/worker-aa634fce.js +0 -237
package/README.md
CHANGED
|
@@ -1,103 +1,93 @@
|
|
|
1
|
-
# VZCode
|
|
1
|
+
# VZCode: Multiplayer Code Editor
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
VZCode offers a multiplayer code editing environment that caters to a real-time collaborative development experience.
|
|
4
4
|
|
|
5
|
-
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Table of Contents
|
|
8
|
+
- [Development](#development)
|
|
9
|
+
- [Features](#features)
|
|
10
|
+
- [Use Cases](#use-cases)
|
|
11
|
+
- [Stack](#stack)
|
|
12
|
+
- [Goals](#goals)
|
|
13
|
+
- [Prior Work](#prior-work)
|
|
14
|
+
- [Milestones](#milestones)
|
|
15
|
+
- [Team](#team)
|
|
16
|
+
- [Spaces](#spaces)
|
|
8
17
|
|
|
9
|
-
|
|
18
|
+
## Development
|
|
10
19
|
|
|
11
|
-
|
|
12
|
-
cd vzcode
|
|
13
|
-
npm install
|
|
14
|
-
npm run test-interactive #This starts the server
|
|
15
|
-
```
|
|
20
|
+
- **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).
|
|
16
21
|
|
|
17
|
-
|
|
22
|
+
- **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
|
+
```
|
|
18
32
|
|
|
19
|
-
|
|
20
|
-
npm run dev
|
|
21
|
-
```
|
|
33
|
+
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.
|
|
22
34
|
|
|
23
35
|
## Features
|
|
24
36
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
|
|
30
|
-
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
-
|
|
34
|
-
- Operatons on files (create file, rename file, delete file)
|
|
35
|
-
- Syntax highlighting for several Web languages
|
|
36
|
-
- Auto-saves changes back to the file system
|
|
37
|
+
- Browser-based editing environment
|
|
38
|
+
- Sidebar with file listings (directories support pending)
|
|
39
|
+
- Real-time collaboration via LAN or using services like [NGrok](https://ngrok.com/)
|
|
40
|
+
- File management through tabs
|
|
41
|
+
- Basic file operations: create, rename, delete
|
|
42
|
+
- Syntax highlighting for web languages
|
|
43
|
+
- Interactive widgets for editing numbers (Alt+drag on numbers)
|
|
44
|
+
- Auto-save, debounced after code changes
|
|
45
|
+
- Auto-save, throttled while using interactive widgets to support hot reloading environments
|
|
37
46
|
|
|
38
47
|
## Use Cases
|
|
39
48
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
```bash
|
|
78
|
-
vzcode
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
Next while the local host session is running, in the terminal run
|
|
82
|
-
|
|
83
|
-
```bash
|
|
84
|
-
ngrok http 3030
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
This will give you a link that can be shared to collaborators who then can join from anywhere.
|
|
88
|
-
|
|
89
|
-
## Host With Ngrok Through VZCode
|
|
90
|
-
|
|
91
|
-
Coming Soon
|
|
92
|
-
|
|
93
|
-
### Staging Site Editor
|
|
94
|
-
|
|
95
|
-
[Experimental idea]
|
|
96
|
-
|
|
97
|
-
VZCode could be hosted on a long-running server. The idea here is that an individual or team that is developing a product can make code changes, leveraging multiplayer mode remotely, and have those changes appear instantly on a "staging site" (a server hosting the latest version of the work) running something like the Vite dev server. This would allow collaborators to, for example, make minor tweaks live on client calls and have the client see the updates in real time.
|
|
49
|
+
- **Local Editor**:
|
|
50
|
+
Use VZCode like VSCode or Vim:
|
|
51
|
+
```bash
|
|
52
|
+
npm install -g vzcode
|
|
53
|
+
cd myProject
|
|
54
|
+
vzcode
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
- **Project-specific Editor**:
|
|
58
|
+
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.
|
|
59
|
+
```json
|
|
60
|
+
{
|
|
61
|
+
"name": "example-project",
|
|
62
|
+
"scripts": {
|
|
63
|
+
"edit": "vzcode"
|
|
64
|
+
},
|
|
65
|
+
"dependencies": {
|
|
66
|
+
"vzcode": "^0.1.0"
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
Run using `npm run edit`.
|
|
71
|
+
|
|
72
|
+
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
|
+
|
|
74
|
+
- **Hosting with Ngrok**: Allow external collaborators to join your VZCode session.
|
|
75
|
+
|
|
76
|
+
- **With Ngrok Globally Installed**: (Requires authenticated Ngrok account)
|
|
77
|
+
```bash
|
|
78
|
+
vzcode
|
|
79
|
+
ngrok http 3030
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
- **Through VZCode**: Coming soon!
|
|
83
|
+
|
|
84
|
+
- **Staging Site Editor (Experimental)**:
|
|
85
|
+
Use VZCode on a persistent server, making code changes with multiplayer mode remotely, reflecting instantly on a staging site.
|
|
98
86
|
|
|
99
87
|
## Stack
|
|
100
88
|
|
|
89
|
+
Built using technologies such as:
|
|
90
|
+
|
|
101
91
|
- [NodeJS](https://nodejs.org/en/)
|
|
102
92
|
- [Express](https://expressjs.com/)
|
|
103
93
|
- [ShareDB](https://github.com/share/sharedb)
|
|
@@ -108,63 +98,41 @@ VZCode could be hosted on a long-running server. The idea here is that an indivi
|
|
|
108
98
|
|
|
109
99
|
## Goals
|
|
110
100
|
|
|
111
|
-
|
|
112
|
-
- Enable developers to "enable" the VSCode editor on their projects via NPM
|
|
113
|
-
- Have the `npm run edit` command start a local server
|
|
114
|
-
- Develop a sidebar panel that lists files in the file system
|
|
115
|
-
- Develop a code editor panel using CodeMirror that lets users navigate between files
|
|
116
|
-
- Have the server auto-save files to disk when changes are made
|
|
117
|
-
- Synchronize code edits across multiple clients using Operational Transform (JSON1 and ShareDB)
|
|
118
|
-
- Ensure that the editor works well on top of the Vite dev server
|
|
119
|
-
- Dogfood the product to identify ways it can be improved
|
|
120
|
-
- Iterate based on feedback
|
|
121
|
-
- Share the project with the world
|
|
122
|
-
- Core component of [VizHub](https://vizhub.com/) next generation editor
|
|
101
|
+
The project aims to:
|
|
123
102
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
103
|
+
- Offer a feasible alternative to VSCode + Live Share for frontend development
|
|
104
|
+
- Facilitate easy project-specific IDE embedding
|
|
105
|
+
- Enhance user experience with advanced features
|
|
106
|
+
- Support instant feedback through hot reloading
|
|
107
|
+
- Keep improving based on feedback
|
|
108
|
+
- Serve as a core for [VizHub's](https://vizhub.com/) next-gen editor
|
|
127
109
|
|
|
128
|
-
|
|
110
|
+
## Prior Work
|
|
129
111
|
|
|
130
|
-
|
|
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.
|
|
131
113
|
|
|
132
|
-
|
|
114
|
+
|
|
133
115
|
|
|
134
116
|
## Milestones
|
|
135
117
|
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
February 2023
|
|
139
|
-
|
|
140
|
-
- [x] Get the first version working, including:
|
|
141
|
-
- [x] ShareDB server
|
|
142
|
-
- [x] Auto-save
|
|
143
|
-
- [x] Edit the content of multiple files (no support for folders initially)
|
|
144
|
-
|
|
145
|
-
March 2023
|
|
146
|
-
|
|
147
|
-
- [x] Make it usable, including:
|
|
148
|
-
- [x] UX for adding new files, renaming files, deleting files
|
|
149
|
-
- [x] Implement presence (the ability to see the cursors of others in real time)
|
|
150
|
-
- [x] Publish an early release to NPM
|
|
151
|
-
- [x] Test out how it works using tunneling services such as NGrok
|
|
152
|
-
|
|
153
|
-
April 2023
|
|
118
|
+
For detailed progress, visit the [VZCode Kanban Board](https://github.com/orgs/vizhub-core/projects/2/views/1)
|
|
154
119
|
|
|
155
|
-
-
|
|
156
|
-
-
|
|
157
|
-
-
|
|
158
|
-
-
|
|
159
|
-
-
|
|
120
|
+
- **February 2023**: Initial setup, server, and basic features
|
|
121
|
+
- **March 2023**: Enhancements, UX improvements, and NPM release
|
|
122
|
+
- **April 2023**: Directory support, feedback iterations, and promotion
|
|
123
|
+
- **May - August 2023**: Themes, overhaul CSS, adopt TypeScript, interactive widgets
|
|
124
|
+
- **September 2023**: Auto-run Prettier, AI-Assisted coding, TypeScript Autocomplete
|
|
125
|
+
- **October 2023**: Draggable split pane, deep linking, presence enhancements
|
|
126
|
+
- **November 2023**: Directory manipulation UX, implementing VSCode features
|
|
160
127
|
|
|
161
128
|
## Team
|
|
162
129
|
|
|
163
|
-
- Curran Kelleher
|
|
164
|
-
- Anooj Pai from [RPI RCOS](https://rcos.io/)
|
|
165
|
-
|
|
130
|
+
- **Curran Kelleher**
|
|
131
|
+
- **Anooj Pai** from [RPI RCOS](https://rcos.io/)
|
|
132
|
+
|
|
133
|
+
We welcome contributions!
|
|
166
134
|
|
|
167
135
|
## Spaces
|
|
168
136
|
|
|
169
|
-
- https://github.com/vizhub-core/vzcode
|
|
170
|
-
- [Discord
|
|
137
|
+
- [GitHub Repository](https://github.com/vizhub-core/vzcode)
|
|
138
|
+
- [Discord Channel within RCOS](https://discord.com/channels/738593165438746634/1066068656045441044)
|