Skip to content

Commit d67ceac

Browse files
milomgmilomg
committed
reorganize
1 parent c97ab57 commit d67ceac

File tree

14 files changed

+196
-184
lines changed

14 files changed

+196
-184
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414
<body>
1515
<div id="app"></div>
1616
<div id="update" class="fixed bottom-10 left-10"></div>
17-
<script src="./playground/index.ts" type="module"></script>
17+
<script src="./playground/index.tsx" type="module"></script>
1818
</body>
1919
</html>

‎playground/app.tsx

Lines changed: 28 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,15 @@
11
import { Show, onCleanup, createEffect, createSignal, JSX } from 'solid-js';
22

3-
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
4-
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
5-
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
6-
3+
import { Routes, Route } from 'solid-app-router';
74
import { eventBus } from './utils/eventBus';
8-
import { createTabList, defaultTabs, processImport, Repl } from '../src';
5+
96
import { Update } from './components/update';
107
import { Header } from './components/header';
11-
import { parseHash } from './utils/parseHash';
12-
import { isValidUrl } from './utils/isValidUrl';
138

14-
import CompilerWorker from '../src/workers/compiler?worker';
15-
import FormatterWorker from '../src/workers/formatter?worker';
16-
import useZoom from '../src/hooks/useZoom';
9+
import { useZoom } from '../src/hooks/useZoom';
1710
import { isDarkTheme } from './utils/isDarkTheme';
18-
import { exportToJSON } from './utils/exportFiles';
19-
20-
(window as any).MonacoEnvironment = {
21-
getWorker(_moduleId: unknown, label: string) {
22-
switch (label) {
23-
case 'css':
24-
return new cssWorker();
25-
case 'typescript':
26-
case 'javascript':
27-
return new tsWorker();
28-
default:
29-
return new editorWorker();
30-
}
31-
},
32-
};
11+
import { Edit } from './edit';
12+
import { Home } from './home';
3313

3414
let swUpdatedBeforeRender = false;
3515
eventBus.on('sw-update', () => (swUpdatedBeforeRender = true));
@@ -45,94 +25,41 @@ export const App = (): JSX.Element => {
4525
eventBus.on('sw-update', () => setNewUpdate(true));
4626
onCleanup(() => eventBus.all.clear());
4727

48-
const compiler = new CompilerWorker();
49-
const formatter = new FormatterWorker();
50-
51-
const url = new URL(location.href);
52-
const initialTabs = parseHash(url.hash && url.hash.slice(1), defaultTabs) || defaultTabs;
53-
const [tabs, setTabs] = createTabList(initialTabs);
54-
const [current, setCurrent] = createSignal('main.tsx');
55-
56-
const params = Object.fromEntries(url.searchParams.entries());
57-
58-
if (params.data && isValidUrl(params.data)) {
59-
fetch(params.data)
60-
.then((r) => r.json())
61-
.then((data) => {
62-
setTabs(processImport(data));
63-
})
64-
.catch((e) => console.error('Failed to import browser data', e));
65-
}
66-
67-
const noHeader = 'noHeader' in params;
68-
const isHorizontal = 'isHorizontal' in params;
69-
70-
if (params.format === 'json') {
71-
exportToJSON(tabs());
72-
}
73-
7428
const [dark, setDark] = createSignal(isDarkTheme());
29+
createEffect(() => document.body.classList.toggle('dark', dark()));
7530

76-
createEffect(() => {
77-
const action = dark() ? 'add' : 'remove';
78-
document.body.classList[action]('dark');
79-
});
80-
81-
const header = !noHeader;
82-
83-
const { zoomState, updateZoomScale } = useZoom();
84-
31+
const { zoomState, updateZoom } = useZoom();
8532
document.addEventListener('keydown', (e) => {
86-
const key = e.key;
87-
8833
if (!zoomState.overrideNative) return;
89-
90-
if (!((e.ctrlKey || e.metaKey) && (key === '=' || key === '-'))) {
91-
return;
92-
}
93-
94-
e.preventDefault();
95-
96-
if (key === '=') {
97-
updateZoomScale('increase');
98-
} else {
99-
updateZoomScale('decrease');
34+
if (!(e.ctrlKey || e.metaKey)) return;
35+
36+
if (e.key === '=') {
37+
updateZoom('increase');
38+
e.preventDefault();
39+
} else if (e.key == '-') {
40+
updateZoom('decrease');
41+
e.preventDefault();
10042
}
10143
});
10244

10345
return (
10446
<div class="relative flex bg-white dark:bg-solid-darkbg dark:text-white text-black h-screen overflow-hidden text-slate-900 dark:text-slate-50 font-sans flex-col">
105-
<Show
106-
when={header}
107-
children={
108-
<Header
109-
dark={dark()}
110-
toggleDark={() => {
111-
const toggledValue = !dark();
112-
setDark(toggledValue);
113-
localStorage.setItem('dark', String(toggledValue));
114-
}}
115-
isHorizontal={isHorizontal}
116-
tabs={tabs()}
117-
setTabs={setTabs}
118-
setCurrent={setCurrent}
119-
/>
120-
}
121-
fallback={<div classList={{ 'md:col-span-2': !isHorizontal }}></div>}
122-
/>
123-
124-
<Repl
125-
compiler={compiler}
126-
formatter={formatter}
127-
isHorizontal={isHorizontal}
47+
<Header
12848
dark={dark()}
129-
tabs={tabs()}
130-
setTabs={setTabs}
131-
current={current()}
132-
setCurrent={setCurrent}
133-
id="repl"
49+
toggleDark={() => {
50+
const toggledValue = !dark();
51+
setDark(toggledValue);
52+
localStorage.setItem('dark', String(toggledValue));
53+
}}
54+
tabs={[]}
13455
/>
13556

57+
<Routes>
58+
<Route path="/:user/:repl" element={<Edit dark={dark()} />} />
59+
<Route path="/:id" element={<Home />} />
60+
<Route path="/" element={<Home />} />
61+
</Routes>
62+
13663
<Show when={newUpdate()} children={<Update onDismiss={() => setNewUpdate(false)} />} />
13764
</div>
13865
);

‎playground/components/header.tsx

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,7 @@ import { ZoomDropdown } from './zoomDropdown';
1212
export const Header: Component<{
1313
dark: boolean;
1414
toggleDark: () => void;
15-
isHorizontal: boolean;
1615
tabs: Tab[];
17-
setTabs: (tabs: Tab[]) => void;
18-
setCurrent: (tabId: string) => void;
1916
}> = (props) => {
2017
const [copy, setCopy] = createSignal(false);
2118
const [showMenu, setShowMenu] = createSignal(false);
@@ -62,10 +59,7 @@ export const Header: Component<{
6259
}
6360

6461
return (
65-
<header
66-
class="p-1 flex text-sm justify-between items-center border-slate-200 dark:border-neutral-800 border-b-2px"
67-
classList={{ 'md:col-span-3': !props.isHorizontal }}
68-
>
62+
<header class="p-1 flex text-sm justify-between items-center border-slate-200 dark:border-neutral-800 border-b-2px">
6963
<h1 class="flex items-center space-x-4 uppercase leading-0 tracking-widest pl-1">
7064
<a href="https://github.com/solidjs/solid">
7165
<img src={logo} alt="solid-js logo" class="w-8" />
@@ -151,7 +145,7 @@ export const Header: Component<{
151145
</Show>
152146
<span class="sr-only">Show menu</span>
153147
</button>
154-
<div class="mx-2 -mb-1 leading-snug cursor-pointer">
148+
<div class="mx-5 -mb-1 leading-snug cursor-pointer">
155149
<a href={`https://api.solidjs.com/auth/login?redirect=${window.location.origin}/login?auth=success`}>Login</a>
156150
</div>
157151
</div>

‎playground/components/zoomDropdown.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { Icon } from 'solid-heroicons';
22
import { zoomIn } from 'solid-heroicons/outline';
33
import Dismiss from 'solid-dismiss';
44
import { Component, createSignal, createEffect } from 'solid-js';
5-
import useZoom from '../../src/hooks/useZoom';
5+
import { useZoom } from '../../src/hooks/useZoom';
66

77
export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
88
const [open, setOpen] = createSignal(false);
9-
const { zoomState, updateZoomScale, updateZoomSettings } = useZoom();
9+
const { zoomState, updateZoom, setZoomState } = useZoom();
1010
const popupDuration = 1250;
1111
let containerEl!: HTMLDivElement;
1212
let prevZoom = zoomState.zoom;
@@ -110,7 +110,7 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
110110
<button
111111
class="px-3 py-1 rounded-l text-sm uppercase tracking-wide hover:bg-gray-200 dark:hover:bg-neutral-700 border-1 dark:border-gray-700"
112112
aria-label="decrease font size"
113-
onClick={() => updateZoomScale('decrease')}
113+
onClick={() => updateZoom('decrease')}
114114
>
115115
-
116116
</button>
@@ -120,14 +120,14 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
120120
<button
121121
class="px-3 py-1 rounded-r text-sm uppercase tracking-wide mr-4 hover:bg-gray-200 dark:hover:bg-neutral-700 border-1 dark:border-gray-700"
122122
aria-label="increase font size"
123-
onClick={() => updateZoomScale('increase')}
123+
onClick={() => updateZoom('increase')}
124124
>
125125
+
126126
</button>
127127
<button
128128
class="px-3 py-1 rounded text-sm uppercase tracking-wide hover:bg-gray-200 dark:hover:bg-neutral-700 border-1 dark:border-gray-700"
129129
aria-label="reset font size"
130-
onClick={() => updateZoomScale('reset')}
130+
onClick={() => updateZoom('reset')}
131131
>
132132
Reset
133133
</button>
@@ -138,7 +138,7 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
138138
type="checkbox"
139139
class="mr-4 cursor-pointer"
140140
checked={zoomState.overrideNative}
141-
onChange={(e) => updateZoomSettings('overrideNative', e.currentTarget.checked)}
141+
onChange={(e) => setZoomState('overrideNative', e.currentTarget.checked)}
142142
/>
143143
Override browser zoom keyboard shortcut
144144
</label>
@@ -147,7 +147,7 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
147147
type="checkbox"
148148
class="mr-4 cursor-pointer"
149149
checked={zoomState.scaleIframe}
150-
onChange={(e) => updateZoomSettings('scaleIframe', e.currentTarget.checked)}
150+
onChange={(e) => setZoomState('scaleIframe', e.currentTarget.checked)}
151151
/>
152152
Scale iframe <strong>Result</strong>
153153
</label>

‎playground/edit.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
2+
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
3+
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
4+
import { parseHash } from './utils/parseHash';
5+
import { isValidUrl } from './utils/isValidUrl';
6+
7+
import CompilerWorker from '../src/workers/compiler?worker';
8+
import FormatterWorker from '../src/workers/formatter?worker';
9+
import { exportToJSON } from './utils/exportFiles';
10+
import { createTabList, defaultTabs, processImport, Repl, Tab } from '../src';
11+
import { createSignal } from 'solid-js';
12+
13+
(window as any).MonacoEnvironment = {
14+
getWorker(_moduleId: unknown, label: string) {
15+
switch (label) {
16+
case 'css':
17+
return new cssWorker();
18+
case 'typescript':
19+
case 'javascript':
20+
return new tsWorker();
21+
default:
22+
return new editorWorker();
23+
}
24+
},
25+
};
26+
27+
export const Edit = (props: { dark: boolean }) => {
28+
const compiler = new CompilerWorker();
29+
const formatter = new FormatterWorker();
30+
31+
const url = new URL(location.href);
32+
const initialTabs = parseHash<Tab[]>(url.hash && url.hash.slice(1)) || defaultTabs;
33+
34+
const [tabs, setTabs] = createTabList(initialTabs);
35+
const [current, setCurrent] = createSignal('main.tsx');
36+
37+
const params = Object.fromEntries(url.searchParams.entries());
38+
39+
if (params.data && isValidUrl(params.data)) {
40+
fetch(params.data)
41+
.then((r) => r.json())
42+
.then((data) => setTabs(processImport(data)))
43+
.catch((e) => console.error('Failed to import browser data', e));
44+
}
45+
46+
const isHorizontal = 'isHorizontal' in params;
47+
48+
if (params.format === 'json') {
49+
exportToJSON(tabs());
50+
}
51+
52+
return (
53+
<Repl
54+
compiler={compiler}
55+
formatter={formatter}
56+
isHorizontal={isHorizontal}
57+
dark={props.dark}
58+
tabs={tabs()}
59+
setTabs={setTabs}
60+
current={current()}
61+
setCurrent={setCurrent}
62+
id="repl"
63+
/>
64+
);
65+
};

‎playground/home.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useRouteData } from 'solid-app-router';
2+
import { Icon } from 'solid-heroicons';
3+
import { eyeOff, plus, x } from 'solid-heroicons/outline';
4+
5+
export const Home = () => {
6+
const user = useRouteData();
7+
8+
return (
9+
<div class="bg-brand-other h-full m-8">
10+
<button class="bg-solid-lightgray shadow-md dark:bg-solid-darkLighterBg rounded-xl p-4 text-3xl flex mx-auto">
11+
<Icon path={plus} class="w-8" /> Create new REPL
12+
</button>
13+
14+
<table class="w-128 mx-auto my-8">
15+
<thead>
16+
<tr class="border-b border-neutral-600">
17+
<td>Title</td>
18+
<td>Edited</td>
19+
<td>Options</td>
20+
</tr>
21+
</thead>
22+
<tbody>
23+
<tr>
24+
<td>New Suspense Demo</td>
25+
<td>May 17, 2022</td>
26+
<td>
27+
<Icon path={eyeOff} class="w-6 inline m-2 ml-0" />
28+
<Icon path={x} class="w-6 inline m-2 mr-0 text-red-700" />
29+
</td>
30+
</tr>
31+
</tbody>
32+
</table>
33+
</div>
34+
);
35+
};

‎playground/index.ts renamed to ‎playground/index.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
1+
import { Router } from 'solid-app-router';
12
import { render } from 'solid-js/web';
23
import { App } from './app';
34
import { registerServiceWorker } from './utils/serviceWorker';
45

5-
render(App, document.querySelector('#app')!);
6+
render(
7+
() => (
8+
<Router>
9+
<App />
10+
</Router>
11+
),
12+
document.querySelector('#app')!,
13+
);
614

715
registerServiceWorker();

‎playground/utils/parseHash.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { decompressFromURL as decompress } from '@amoutonbrady/lz-string';
22

3-
export function parseHash<T>(hash: string, fallback: T): T {
3+
export function parseHash<T>(hash: string): T | undefined {
44
try {
55
return JSON.parse(decompress(hash)!);
66
} catch {
7-
return fallback;
7+
return;
88
}
99
}

0 commit comments

Comments
 (0)