Skip to content

Commit 9123608

Browse files
psd-coderpsd-coder
committed
Keep video demo configuration in the repo (It uses VSCode's presentation buddy extension)
1 parent 343099f commit 9123608

File tree

10 files changed

+360
-1
lines changed

10 files changed

+360
-1
lines changed

‎.oxlintrc.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,5 +106,5 @@
106106
"builtin": true
107107
},
108108
"globals": {},
109-
"ignorePatterns": []
109+
"ignorePatterns": ["demo"]
110110
}

‎demo/.presentation-buddy/instructions.json‎

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
[
2+
{
3+
"type": "createFile",
4+
"path": "src/README.md"
5+
},
6+
{
7+
"type": "typeText",
8+
"text": [
9+
"# Typed Channel demo",
10+
"",
11+
"This is a simple example of using typed channel for communication between the main thread and the worker.",
12+
"1. We setup types for the messages that will be sent between the client and the worker.",
13+
"2. We implement the worker code",
14+
"3. We implement the main thread code"
15+
]
16+
},
17+
{
18+
"type": "wait",
19+
"delay": 2500
20+
},
21+
{
22+
"type": "createFile",
23+
"path": "src/types.ts"
24+
},
25+
{
26+
"type": "typeText",
27+
"text": [
28+
"// Let's first define the types for the messages that will be sent between the client and the worker.",
29+
"// It is a simple ping-pong messages with a string payload.",
30+
"",
31+
"export type ClientMessages = {",
32+
" ping: string;",
33+
"};",
34+
"",
35+
"export type WorkerMessages = {",
36+
" pong: string;",
37+
"};"
38+
]
39+
},
40+
{
41+
"type": "wait",
42+
"delay": 2500
43+
},
44+
{
45+
"type": "createFile",
46+
"path": "src/worker.ts"
47+
},
48+
{
49+
"type": "typeText",
50+
"text": [
51+
"// Now let's implement worker",
52+
"",
53+
"// First we need to create a transport instance",
54+
"// In web worker we use global object as the target for the transport",
55+
"// It takes inbound and outbound message types as generic parameters",
56+
"// In this case ClientMessages are our inbound messages and WorkerMessages are outbound ones",
57+
"const transport = createPost"
58+
]
59+
},
60+
{
61+
"type": "command",
62+
"command": "editor.action.triggerSuggest"
63+
},
64+
{
65+
"type": "wait",
66+
"delay": 500
67+
},
68+
{
69+
"type": "command",
70+
"command": "acceptSelectedSuggestion"
71+
},
72+
{
73+
"type": "typeText",
74+
"text": ["<ClientMessa"],
75+
"delay": 100
76+
},
77+
{
78+
"type": "command",
79+
"command": "editor.action.triggerSuggest"
80+
},
81+
{
82+
"type": "wait",
83+
"delay": 500
84+
},
85+
{
86+
"type": "command",
87+
"command": "acceptSelectedSuggestion"
88+
},
89+
{
90+
"type": "typeText",
91+
"text": [", WorkerMessa"],
92+
"delay": 100
93+
},
94+
{
95+
"type": "command",
96+
"command": "editor.action.triggerSuggest"
97+
},
98+
{
99+
"type": "wait",
100+
"delay": 500
101+
},
102+
{
103+
"type": "command",
104+
"command": "acceptSelectedSuggestion"
105+
},
106+
{
107+
"type": "typeText",
108+
"text": [
109+
">(globalThis);",
110+
"",
111+
"// Then we are creating a channel using the transport.",
112+
"const channel = createTypedChan"
113+
]
114+
},
115+
{
116+
"type": "command",
117+
"command": "editor.action.triggerSuggest"
118+
},
119+
{
120+
"type": "wait",
121+
"delay": 500
122+
},
123+
{
124+
"type": "command",
125+
"command": "acceptSelectedSuggestion"
126+
},
127+
{
128+
"type": "typeText",
129+
"text": [
130+
"(transport);",
131+
"",
132+
"// And finally use it to setup the message handling",
133+
"// Notice that we have our inbound message type in the suggestions",
134+
"// And the message type is inferred from the inbound message type as well",
135+
"channel.on(\""
136+
]
137+
},
138+
{
139+
"type": "command",
140+
"command": "editor.action.triggerSuggest"
141+
},
142+
{
143+
"type": "wait",
144+
"delay": 500
145+
},
146+
{
147+
"type": "command",
148+
"command": "acceptSelectedSuggestion"
149+
},
150+
{
151+
"type": "typeText",
152+
"text": ["\", (message) => {", " channel.emit(\""]
153+
},
154+
{
155+
"type": "command",
156+
"command": "editor.action.triggerSuggest"
157+
},
158+
{
159+
"type": "wait",
160+
"delay": 500
161+
},
162+
{
163+
"type": "command",
164+
"command": "acceptSelectedSuggestion"
165+
},
166+
{
167+
"type": "typeText",
168+
"text": ["\", `Pong from the worker: ${message}`);", "});"]
169+
},
170+
{
171+
"type": "wait",
172+
"delay": 2500
173+
},
174+
{
175+
"type": "createFile",
176+
"path": "src/client.ts"
177+
},
178+
{
179+
"type": "typeText",
180+
"text": [
181+
"// Now let's implement main thread code",
182+
"",
183+
"// First instantiate a worker instance",
184+
"const worker = new Worker(new URL(\"./worker.ts\", import.meta.url), { type: \"module\" });",
185+
"",
186+
"// Then create a transport instance as we did before in the worker, but now",
187+
"// we are using the worker instance as the target for the transport",
188+
"// It treats WorkerMessages as inbound messages and ClientMessages as outbound ones",
189+
"const transport = createPost"
190+
]
191+
},
192+
{
193+
"type": "command",
194+
"command": "editor.action.triggerSuggest"
195+
},
196+
{
197+
"type": "wait",
198+
"delay": 500
199+
},
200+
{
201+
"type": "command",
202+
"command": "acceptSelectedSuggestion"
203+
},
204+
{
205+
"type": "typeText",
206+
"text": ["<WorkerMessa"],
207+
"delay": 100
208+
},
209+
{
210+
"type": "command",
211+
"command": "editor.action.triggerSuggest"
212+
},
213+
{
214+
"type": "wait",
215+
"delay": 500
216+
},
217+
{
218+
"type": "command",
219+
"command": "acceptSelectedSuggestion"
220+
},
221+
{
222+
"type": "typeText",
223+
"text": [", ClientMessa"],
224+
"delay": 100
225+
},
226+
{
227+
"type": "command",
228+
"command": "editor.action.triggerSuggest"
229+
},
230+
{
231+
"type": "wait",
232+
"delay": 500
233+
},
234+
{
235+
"type": "command",
236+
"command": "acceptSelectedSuggestion"
237+
},
238+
{
239+
"type": "typeText",
240+
"text": [
241+
">(worker);",
242+
"",
243+
"// Create a channel using the transport.",
244+
"const channel = createTypedChan"
245+
]
246+
},
247+
{
248+
"type": "command",
249+
"command": "editor.action.triggerSuggest"
250+
},
251+
{
252+
"type": "wait",
253+
"delay": 500
254+
},
255+
{
256+
"type": "command",
257+
"command": "acceptSelectedSuggestion"
258+
},
259+
{
260+
"type": "typeText",
261+
"text": [
262+
"(transport);",
263+
"",
264+
"// And finally use for communicating with the worker",
265+
"// Everything is inferred properly again",
266+
"channel.on(\""
267+
]
268+
},
269+
{
270+
"type": "command",
271+
"command": "editor.action.triggerSuggest"
272+
},
273+
{
274+
"type": "wait",
275+
"delay": 500
276+
},
277+
{
278+
"type": "command",
279+
"command": "acceptSelectedSuggestion"
280+
},
281+
{
282+
"type": "typeText",
283+
"text": ["\", (message) => {", " console.info(message);", "});", ""]
284+
},
285+
{
286+
"type": "typeText",
287+
"text": ["channel.emit(\""]
288+
},
289+
{
290+
"type": "command",
291+
"command": "editor.action.triggerSuggest"
292+
},
293+
{
294+
"type": "wait",
295+
"delay": 500
296+
},
297+
{
298+
"type": "command",
299+
"command": "acceptSelectedSuggestion"
300+
},
301+
{
302+
"type": "typeText",
303+
"text": [
304+
"\", \"Hello from the main thread!\");",
305+
"",
306+
"// Voilà! Now we have typed channel for communicating between the main thread and the worker."
307+
]
308+
},
309+
{
310+
"type": "wait",
311+
"delay": 2500
312+
}
313+
]

‎demo/.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["mauricedebeijer.presentation-buddy"]
3+
}

‎demo/.vscode/settings.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"github.copilot.enable": {
3+
"*": false
4+
}
5+
}

‎demo/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "typed-channel-demo",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"packageManager": "[email protected]",
13+
"dependencies": {
14+
"typed-channel": "^0.9.5"
15+
}
16+
}

‎demo/pnpm-lock.yaml‎

Lines changed: 22 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/src/README.md‎

Whitespace-only changes.

‎demo/src/client.ts‎

Whitespace-only changes.

‎demo/src/types.ts‎

Whitespace-only changes.

‎demo/src/worker.ts‎

Whitespace-only changes.

0 commit comments

Comments
 (0)