Skip to content

Commit ec1d8be

Browse files
rmorshearmorshea
committed
js client with preact works
1 parent dcd799d commit ec1d8be

File tree

6 files changed

+294
-287
lines changed

6 files changed

+294
-287
lines changed

‎scripts/build.sh‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
#!/bin/bash
22
cd src/idom/client
3-
npm install --save-dev snowpack
4-
npx snowpack
3+
npm install
4+
npm run snowpack

‎src/idom/client/html/simple-view.html‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8"/>
4+
<meta charset="utf-8" />
55
<title>Snowpack - Simple Example</title>
66
</head>
77
<body>
88
<div id="app"></div>
99
<script type="module">
10-
import React from "../web_modules/react.js";
11-
import ReactDOM from "../web_modules/react-dom.js";
12-
import Layout from "../js/index.js";
10+
import { h, render } from "../web_modules/preact.js";
11+
import Layout from "../js/index.js";
1312

14-
const uri = document.location.hostname + ":" + document.location.port;
15-
const url = (uri + document.location.pathname).split("/").slice(0, -2);
16-
url[url.length - 1] = "stream";
17-
const secure = document.location.protocol === "https:";
13+
const uri = document.location.hostname + ":" + document.location.port;
14+
const url = (uri + document.location.pathname).split("/").slice(0, -2);
15+
url[url.length - 1] = "stream";
16+
const secure = document.location.protocol === "https:";
1817

19-
let protocol;
20-
if (secure) {
21-
protocol = "wss:";
22-
} else {
23-
protocol = "ws:";
24-
}
25-
let endpoint = protocol + "//" + url.join("/");
18+
let protocol;
19+
if (secure) {
20+
protocol = "wss:";
21+
} else {
22+
protocol = "ws:";
23+
}
24+
let endpoint = protocol + "//" + url.join("/");
2625

27-
const mount = document.getElementById("app");
28-
ReactDOM.render(React.createElement(Layout, {"endpoint": endpoint}), mount);
26+
const mount = document.getElementById("app");
27+
render(h(Layout, { endpoint: endpoint }), mount);
2928
</script>
3029
</body>
3130
</html>

‎src/idom/client/js/event-to-object.js‎

Lines changed: 121 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -1,135 +1,135 @@
11
function serializeEvent(event) {
2-
const data = {};
3-
if (event.target.hasOwnProperty("value")) {
4-
data.value = event.target.value;
5-
}
6-
if (eventTransforms.hasOwnProperty(event.type)) {
7-
Object.assign(data, eventTransforms[event.type](event));
8-
}
9-
return data;
2+
const data = {};
3+
if (event.target.hasOwnProperty("value")) {
4+
data.value = event.target.value;
5+
}
6+
if (eventTransforms.hasOwnProperty(event.type)) {
7+
Object.assign(data, eventTransforms[event.type](event));
8+
}
9+
return data;
1010
}
1111

1212
const eventCategoryTransforms = {
13-
clipboard: event => ({
14-
clipboardData: event.clipboardData
15-
}),
16-
composition: event => ({
17-
data: event.data
18-
}),
19-
keyboard: event => ({
20-
altKey: event.altKey,
21-
charCode: event.charCode,
22-
ctrlKey: event.ctrlKey,
23-
key: event.key,
24-
keyCode: event.keyCode,
25-
locale: event.locale,
26-
location: event.location,
27-
metaKey: event.metaKey,
28-
repeat: event.repeat,
29-
shiftKey: event.shiftKey,
30-
which: event.which
31-
}),
32-
mouse: event => ({
33-
altKey: event.altKey,
34-
button: event.button,
35-
buttons: event.buttons,
36-
clientX: event.clientX,
37-
clientY: event.clientY,
38-
ctrlKey: event.ctrlKey,
39-
metaKey: event.metaKey,
40-
pageX: event.pageX,
41-
pageY: event.pageY,
42-
screenX: event.screenX,
43-
screenY: event.screenY,
44-
shiftKey: event.shiftKey
45-
}),
46-
pointer: event => ({
47-
pointerId: event.pointerId,
48-
width: event.width,
49-
height: event.height,
50-
pressure: event.pressure,
51-
tiltX: event.tiltX,
52-
tiltY: event.tiltY,
53-
pointerType: event.pointerType,
54-
isPrimary: event.isPrimary
55-
}),
56-
touch: event => ({
57-
altKey: event.altKey,
58-
ctrlKey: event.ctrlKey,
59-
metaKey: event.metaKey,
60-
shiftKey: event.shiftKey
61-
}),
62-
ui: event => ({
63-
detail: event.detail
64-
}),
65-
wheel: event => ({
66-
deltaMode: event.deltaMode,
67-
deltaX: event.deltaX,
68-
deltaY: event.deltaY,
69-
deltaZ: event.deltaZ
70-
}),
71-
animation: event => ({
72-
animationName: event.animationName,
73-
pseudoElement: event.pseudoElement,
74-
elapsedTime: event.elapsedTime
75-
}),
76-
transition: event => ({
77-
propertyName: event.propertyName,
78-
pseudoElement: event.pseudoElement,
79-
elapsedTime: event.elapsedTime
80-
})
13+
clipboard: (event) => ({
14+
clipboardData: event.clipboardData,
15+
}),
16+
composition: (event) => ({
17+
data: event.data,
18+
}),
19+
keyboard: (event) => ({
20+
altKey: event.altKey,
21+
charCode: event.charCode,
22+
ctrlKey: event.ctrlKey,
23+
key: event.key,
24+
keyCode: event.keyCode,
25+
locale: event.locale,
26+
location: event.location,
27+
metaKey: event.metaKey,
28+
repeat: event.repeat,
29+
shiftKey: event.shiftKey,
30+
which: event.which,
31+
}),
32+
mouse: (event) => ({
33+
altKey: event.altKey,
34+
button: event.button,
35+
buttons: event.buttons,
36+
clientX: event.clientX,
37+
clientY: event.clientY,
38+
ctrlKey: event.ctrlKey,
39+
metaKey: event.metaKey,
40+
pageX: event.pageX,
41+
pageY: event.pageY,
42+
screenX: event.screenX,
43+
screenY: event.screenY,
44+
shiftKey: event.shiftKey,
45+
}),
46+
pointer: (event) => ({
47+
pointerId: event.pointerId,
48+
width: event.width,
49+
height: event.height,
50+
pressure: event.pressure,
51+
tiltX: event.tiltX,
52+
tiltY: event.tiltY,
53+
pointerType: event.pointerType,
54+
isPrimary: event.isPrimary,
55+
}),
56+
touch: (event) => ({
57+
altKey: event.altKey,
58+
ctrlKey: event.ctrlKey,
59+
metaKey: event.metaKey,
60+
shiftKey: event.shiftKey,
61+
}),
62+
ui: (event) => ({
63+
detail: event.detail,
64+
}),
65+
wheel: (event) => ({
66+
deltaMode: event.deltaMode,
67+
deltaX: event.deltaX,
68+
deltaY: event.deltaY,
69+
deltaZ: event.deltaZ,
70+
}),
71+
animation: (event) => ({
72+
animationName: event.animationName,
73+
pseudoElement: event.pseudoElement,
74+
elapsedTime: event.elapsedTime,
75+
}),
76+
transition: (event) => ({
77+
propertyName: event.propertyName,
78+
pseudoElement: event.pseudoElement,
79+
elapsedTime: event.elapsedTime,
80+
}),
8181
};
8282

8383
const eventTypeCategories = {
84-
clipboard: ["copy", "cut", "paste"],
85-
composition: ["compositionend", "compositionstart", "compositionupdate"],
86-
keyboard: ["keydown", "keypress", "keyup"],
87-
mouse: [
88-
"click",
89-
"contextmenu",
90-
"doubleclick",
91-
"drag",
92-
"dragend",
93-
"dragenter",
94-
"dragexit",
95-
"dragleave",
96-
"dragover",
97-
"dragstart",
98-
"drop",
99-
"mousedown",
100-
"mouseenter",
101-
"mouseleave",
102-
"mousemove",
103-
"mouseout",
104-
"mouseover",
105-
"mouseup"
106-
],
107-
pointer: [
108-
"pointerdown",
109-
"pointermove",
110-
"pointerup",
111-
"pointercancel",
112-
"gotpointercapture",
113-
"lostpointercapture",
114-
"pointerenter",
115-
"pointerleave",
116-
"pointerover",
117-
"pointerout"
118-
],
119-
selection: ["select"],
120-
touch: ["touchcancel", "touchend", "touchmove", "touchstart"],
121-
ui: ["scroll"],
122-
wheel: ["wheel"],
123-
animation: ["animationstart", "animationend", "animationiteration"],
124-
transition: ["transitionend"]
84+
clipboard: ["copy", "cut", "paste"],
85+
composition: ["compositionend", "compositionstart", "compositionupdate"],
86+
keyboard: ["keydown", "keypress", "keyup"],
87+
mouse: [
88+
"click",
89+
"contextmenu",
90+
"doubleclick",
91+
"drag",
92+
"dragend",
93+
"dragenter",
94+
"dragexit",
95+
"dragleave",
96+
"dragover",
97+
"dragstart",
98+
"drop",
99+
"mousedown",
100+
"mouseenter",
101+
"mouseleave",
102+
"mousemove",
103+
"mouseout",
104+
"mouseover",
105+
"mouseup",
106+
],
107+
pointer: [
108+
"pointerdown",
109+
"pointermove",
110+
"pointerup",
111+
"pointercancel",
112+
"gotpointercapture",
113+
"lostpointercapture",
114+
"pointerenter",
115+
"pointerleave",
116+
"pointerover",
117+
"pointerout",
118+
],
119+
selection: ["select"],
120+
touch: ["touchcancel", "touchend", "touchmove", "touchstart"],
121+
ui: ["scroll"],
122+
wheel: ["wheel"],
123+
animation: ["animationstart", "animationend", "animationiteration"],
124+
transition: ["transitionend"],
125125
};
126126

127127
const eventTransforms = {};
128128

129-
Object.keys(eventTypeCategories).forEach(category => {
130-
eventTypeCategories[category].forEach(type => {
131-
eventTransforms[type] = eventCategoryTransforms[category];
132-
});
129+
Object.keys(eventTypeCategories).forEach((category) => {
130+
eventTypeCategories[category].forEach((type) => {
131+
eventTransforms[type] = eventCategoryTransforms[category];
132+
});
133133
});
134134

135135
export default serializeEvent;

0 commit comments

Comments
 (0)