Skip to content

Commit 4a2bb71

Browse files
velzievelzie
committed
[core] upgrade demo frontend to dreamland v2
1 parent 1c6760c commit 4a2bb71

File tree

6 files changed

+261
-225
lines changed

6 files changed

+261
-225
lines changed

‎packages/scramjet/static/index.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,19 +48,20 @@
4848
}
4949
}
5050
</style>
51-
<script
52-
defer
53-
data-domain="scramjet.mercurywork.shop"
54-
src="https://analytics.proudparrot2.com/js/script.js"
55-
></script>
56-
<script src="https://cdn.jsdelivr.net/npm/dreamland"></script>
51+
<script type="importmap">
52+
{
53+
"imports": {
54+
"dreamland/core": "https://unpkg.com/dreamland/core",
55+
"dreamland/js-runtime": "https://unpkg.com/dreamland/js-runtime"
56+
}
57+
}
58+
</script>
5759
<script src="/scram/scramjet.all.js"></script>
5860
<script src="config.js"></script>
59-
<script src="store.js"></script>
6061
</head>
6162

6263
<body>
6364
<div id="app"></div>
64-
<script src="ui.js"></script>
65+
<script type="module" src="ui.js"></script>
6566
</body>
6667
</html>

‎packages/scramjet/static/playground.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,16 @@
4848
}
4949
}
5050
</style>
51-
<script src="https://cdn.jsdelivr.net/npm/dreamland"></script>
51+
<script type="importmap">
52+
{
53+
"imports": {
54+
"dreamland/core": "https://cdn.jsdelivr.net/npm/dreamland/core",
55+
"dreamland/js-runtime": "https://cdn.jsdelivr.net/npm/dreamland/js-runtime"
56+
}
57+
}
58+
</script>
59+
<script src="https://cdn.jsdelivr.net/npm/dreamland/core"></script>
60+
<script src="https://cdn.jsdelivr.net/npm/dreamland/js-runtime"></script>
5261
<script src="/baremux/index.js"></script>
5362
<script src="/scram/scramjet.all.js"></script>
5463
<script src="config.js"></script>

‎packages/scramjet/static/playground.js‎

Lines changed: 57 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -11,67 +11,18 @@ const scramjet = new ScramjetController({
1111
scramjet.init();
1212
navigator.serviceWorker.register("./sw.js");
1313

14+
import { css } from "dreamland/core";
15+
1416
const flex = css`
1517
display: flex;
1618
`;
1719
const col = css`
1820
flex-direction: column;
1921
`;
2022

21-
function PlaygroundApp() {
22-
this.css = `
23-
width: 100%;
24-
height: 100%;
25-
color: #f0fef4;
26-
display: flex;
27-
padding: 0.5em;
28-
box-sizing: border-box;
29-
gap: 0.5em;
30-
31-
32-
.codesplit {
33-
width: 50%;
34-
height: 100%;
35-
display: flex;
36-
flex-direction: column;
37-
38-
gap: 0.5em;
39-
}
40-
41-
.mcontainer {
42-
background: #1e1e1e;
43-
h2 {
44-
margin: 0.1em;
45-
}
46-
47-
border: 1px solid #313131;
48-
flex-basis: 100%;
49-
display: flex;
50-
flex-direction: column;
51-
}
52-
.monaco {
53-
flex: 1;
54-
}
55-
56-
.frame {
57-
height: 100%;
58-
display: flex;
59-
flex-direction: column;
60-
gap: 0.5em;
61-
iframe {
62-
width: 100%;
63-
border: 1px solid #313131;
64-
}
65-
}
66-
.config {
67-
border: 1px solid #313131;
68-
background: #1e1e1e;
69-
padding: 0.5em;
70-
}
71-
`;
72-
73-
this.fakeorigin = "https://sandboxedorigin.com";
74-
this.mount = async () => {
23+
function PlaygroundApp(cx) {
24+
cx.fakeorigin = "https://sandboxedorigin.com";
25+
cx.mount = async () => {
7526
const monaco = await import(
7627
"https://cdn.jsdelivr.net/npm/monaco-editor/+esm"
7728
);
@@ -220,3 +171,55 @@ window.addEventListener("load", async () => {
220171
throw e;
221172
}
222173
});
174+
175+
PlaygroundApp.style = css`
176+
:scope {
177+
width: 100%;
178+
height: 100%;
179+
color: #f0fef4;
180+
display: flex;
181+
padding: 0.5em;
182+
box-sizing: border-box;
183+
gap: 0.5em;
184+
}
185+
186+
.codesplit {
187+
width: 50%;
188+
height: 100%;
189+
display: flex;
190+
flex-direction: column;
191+
192+
gap: 0.5em;
193+
}
194+
195+
.mcontainer {
196+
background: #1e1e1e;
197+
h2 {
198+
margin: 0.1em;
199+
}
200+
201+
border: 1px solid #313131;
202+
flex-basis: 100%;
203+
display: flex;
204+
flex-direction: column;
205+
}
206+
.monaco {
207+
flex: 1;
208+
}
209+
210+
.frame {
211+
height: 100%;
212+
display: flex;
213+
flex-direction: column;
214+
gap: 0.5em;
215+
iframe {
216+
width: 100%;
217+
border: 1px solid #313131;
218+
}
219+
}
220+
.config {
221+
border: 1px solid #313131;
222+
background: #1e1e1e;
223+
padding: 0.5em;
224+
}
225+
`;

‎packages/scramjet/static/store.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
const store = $store(
1+
import { createStore } from "dreamland/core";
2+
3+
export const store = createStore(
24
{
35
url: "https://google.com",
46
wispurl:
@@ -18,4 +20,3 @@ const store = $store(
1820
},
1921
{ ident: "settings", backing: "localstorage", autosave: "auto" }
2022
);
21-
self.store = store;

‎packages/scramjet/static/sw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ scramjet.addEventListener("request", async (e) => {
9292
forwardToInspector(requestData);
9393
}
9494

95-
let resp = await e.currentTarget.client.fetch(e.url, {
95+
let resp = await e.client.fetch(e.url, {
9696
method: e.method,
9797
body: fetchBody,
9898
headers: e.requestHeaders,

0 commit comments

Comments
 (0)