Skip to content

Commit 1512585

Browse files
milomgmilomg
committed
backport changes
1 parent a967708 commit 1512585

28 files changed

+728
-806
lines changed

‎.prettierignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
dist/
3+
lib/
4+
src/defaultFiles/
5+
pnpm-lock.yaml

‎.prettierrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
"singleQuote": true,
77
"tabWidth": 2,
88
"trailingComma": "all",
9-
"useTabs": false
9+
"useTabs": false,
10+
"quoteProps": "consistent"
1011
}

‎.vscode/extensions.json

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
{
2-
"recommendations": [
3-
"esbenp.prettier-vscode"
4-
]
2+
"recommendations": ["esbenp.prettier-vscode"]
53
}

‎index.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,7 @@
66
<link rel="manifest" href="/manifest.webmanifest" />
77
<link rel="shortcut icon" href="./playground/assets/logo.png" type="image/png" />
88
<title>Solid Playground</title>
9-
<meta
10-
name="description"
11-
content="Quickly discover what the solid compiler will generate from your JSX template"
12-
/>
9+
<meta name="description" content="Quickly discover what the solid compiler will generate from your JSX template" />
1310
</head>
1411
<body>
1512
<div id="app"></div>

‎package.json

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
"dev": "vite",
1919
"build": "vite build && workbox generateSW workbox-config.js",
2020
"build:lib": "jiti rollup.config.js",
21-
"format": "prettier -w \"{src,playground}/**/*.{js,json,ts,tsx,html,css}\" \"*.{js,ts}\"",
21+
"format": "prettier -w .",
2222
"prepublishOnly": "pnpm build:lib",
2323
"tsc": "tsc"
2424
},
2525
"devDependencies": {
26-
"@babel/core": "^7.18.2",
26+
"@babel/core": "^7.18.5",
2727
"@babel/plugin-syntax-jsx": "^7.17.12",
2828
"@babel/types": "^7.18.4",
2929
"@rollup/plugin-babel": "^5.3.1",
@@ -48,7 +48,7 @@
4848
"rollup-plugin-windicss": "^1.8.4",
4949
"solid-app-router": "^0.3.3",
5050
"typescript": "^4.7.3",
51-
"vite": "^2.9.10",
51+
"vite": "^2.9.12",
5252
"vite-plugin-solid": "^2.2.6",
5353
"vite-plugin-windicss": "^1.8.4",
5454
"windicss": "^3.5.4",
@@ -57,18 +57,19 @@
5757
"dependencies": {
5858
"@amoutonbrady/lz-string": "^0.0.1",
5959
"@babel/preset-typescript": "^7.17.12",
60-
"@babel/standalone": "^7.18.4",
60+
"@babel/standalone": "^7.18.5",
61+
"@solid-primitives/media": "^1.3.0",
6162
"@solid-primitives/scheduled": "^1.0.0",
62-
"babel-preset-solid": "1.4.2",
63+
"babel-preset-solid": "1.4.4",
6364
"dedent": "^0.7.0",
6465
"jszip": "^3.10.0",
6566
"monaco-editor-textmate": "^3.0.0",
6667
"monaco-textmate": "^3.0.1",
6768
"onigasm": "^2.2.5",
68-
"prettier": "^2.6.2",
69+
"prettier": "^2.7.0",
6970
"rollup": "^2.75.6",
7071
"solid-dismiss": "^1.2.1",
7172
"solid-heroicons": "^2.0.3",
72-
"solid-js": "1.4.3"
73+
"solid-js": "1.4.4"
7374
}
7475
}

‎playground/app.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,14 @@ export const App = (): JSX.Element => {
3939
const [searchParams] = useSearchParams();
4040

4141
return (
42-
<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">
42+
<div class="relative flex bg-white dark:bg-solid-darkbg dark:text-white text-black h-screen text-slate-900 dark:text-slate-50 font-sans flex-col overflow-auto">
4343
<Header
4444
dark={dark()}
4545
toggleDark={() => {
4646
const toggledValue = !dark();
4747
setDark(toggledValue);
4848
localStorage.setItem('dark', String(toggledValue));
4949
}}
50-
tabs={[]}
5150
/>
5251

5352
<Routes>

‎playground/components/header.tsx

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@ import Dismiss from 'solid-dismiss';
22
import { Icon } from 'solid-heroicons';
33
import { Component, onCleanup, createSignal, Show } from 'solid-js';
44
import { download, xCircle, menu, moon, sun } from 'solid-heroicons/outline';
5-
6-
import logo from '../assets/logo.svg?url';
7-
import type { Tab } from '../../src';
85
import { exportToZip } from '../utils/exportFiles';
96
import { ZoomDropdown } from './zoomDropdown';
107
import { API, useAppContext } from '../context';
8+
import logo from '../assets/logo.svg?url';
119

1210
export const Header: Component<{
1311
dark: boolean;
1412
toggleDark: () => void;
15-
tabs: Tab[];
1613
}> = (props) => {
1714
const context = useAppContext()!;
1815
const [showMenu, setShowMenu] = createSignal(false);
@@ -28,7 +25,7 @@ export const Header: Component<{
2825
}
2926

3027
return (
31-
<header class="p-1 flex text-sm justify-between items-center border-slate-200 dark:border-neutral-800 border-b-2px">
28+
<header class="sticky top-0 z-10 bg-white dark:bg-solid-darkbg p-1 flex text-sm justify-between items-center border-slate-200 dark:border-neutral-800 border-b-2px">
3229
<h1 class="flex items-center space-x-4 uppercase leading-0 tracking-widest pl-1">
3330
<a href="/">
3431
<img src={logo} alt="solid-js logo" class="w-8" />
@@ -39,7 +36,7 @@ export const Header: Component<{
3936
</span>
4037
</div>
4138
</h1>
42-
<div class="flex items-center">
39+
<div class="flex items-center gap-3 mr-2">
4340
<Dismiss
4441
classList={{ 'absolute top-[53px] right-[10px] w-[fit-content] z-10': showMenu() }}
4542
menuButton={() => menuBtnEl}
@@ -51,16 +48,15 @@ export const Header: Component<{
5148
class="md:items-center md:space-x-2 md:flex md:flex-row"
5249
classList={{
5350
'shadow-md flex flex-col justify-center bg-white dark:bg-solid-darkbg': showMenu(),
54-
hidden: !showMenu(),
51+
'hidden': !showMenu(),
5552
}}
5653
>
5754
<button
5855
type="button"
5956
onClick={props.toggleDark}
60-
class="flex flex-row space-x-2 items-center md:px-1 px-2 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100"
57+
class="flex flex-row space-x-2 items-center md:px-1 px-2 py-2 rounded opacity-80 hover:opacity-100"
6158
classList={{
62-
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
63-
showMenu(),
59+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black': showMenu(),
6460
}}
6561
title="Toggle dark mode"
6662
>
@@ -70,19 +66,21 @@ export const Header: Component<{
7066
<span class="text-xs md:sr-only">{props.dark ? 'Light' : 'Dark'} mode</span>
7167
</button>
7268

73-
<button
74-
type="button"
75-
onClick={() => exportToZip(props.tabs)}
76-
class="flex flex-row space-x-2 items-center md:px-1 px-2 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100"
77-
classList={{
78-
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
79-
showMenu(),
80-
}}
81-
title="Export to Zip"
82-
>
83-
<Icon path={download} class="h-6" style={{ margin: '0' }} />
84-
<span class="text-xs md:sr-only">Export to Zip</span>
85-
</button>
69+
<Show when={context.tabs()}>
70+
<button
71+
type="button"
72+
onClick={() => exportToZip(context.tabs()!)}
73+
class="flex flex-row space-x-2 items-center md:px-1 px-2 py-2 rounded opacity-80 hover:opacity-100"
74+
classList={{
75+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black': showMenu(),
76+
}}
77+
title="Export to Zip"
78+
>
79+
<Icon path={download} class="h-6" style={{ margin: '0' }} />
80+
<span class="text-xs md:sr-only">Export to Zip</span>
81+
</button>
82+
</Show>
83+
8684
<ZoomDropdown showMenu={showMenu()} />
8785
</div>
8886
</Dismiss>
@@ -92,7 +90,7 @@ export const Header: Component<{
9290
classList={{
9391
'border-white border': showMenu(),
9492
}}
95-
class="px-3 py-2 focus:outline-none focus:ring-1 rounded opacity-80 hover:opacity-100 visible relative md:hidden m-0 mr-[10px]"
93+
class="px-3 py-2 rounded opacity-80 hover:opacity-100 visible relative md:hidden m-0"
9694
title="Mobile Menu Button"
9795
ref={menuBtnEl}
9896
>
@@ -101,16 +99,24 @@ export const Header: Component<{
10199
</Show>
102100
<span class="sr-only">Show menu</span>
103101
</button>
104-
<div class="mx-5 -mb-1 leading-snug cursor-pointer">
102+
<div class="leading-snug cursor-pointer">
105103
<Show
106-
when={context.user()?.display}
104+
when={context.user()?.avatar}
107105
fallback={
108-
<a href={`${API}/auth/login?redirect=${window.location.origin}/login?auth=success`} rel="external">
106+
<a
107+
class="mx-1 -mb-1"
108+
href={`${API}/auth/login?redirect=${window.location.origin}/login?auth=success`}
109+
rel="external"
110+
>
109111
Login
110112
</a>
111113
}
112114
>
113-
{(x) => <a href="/">{x}</a>}
115+
{(x) => (
116+
<a href="/">
117+
<img crossOrigin="anonymous" src={x} class="w-8 h-8 rounded-full" />
118+
</a>
119+
)}
114120
</Show>
115121
</div>
116122
</div>

‎playground/components/zoomDropdown.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,10 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
8787
>
8888
<button
8989
type="button"
90-
class="flex flex-row space-x-2 items-center w-full md:px-1 px-2 py-2 focus:ring-1 rounded opacity-80 hover:opacity-100"
90+
class="flex flex-row space-x-2 items-center md:px-1 px-2 py-2 rounded opacity-80 hover:opacity-100"
9191
classList={{
92+
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black': props.showMenu,
9293
'bg-gray-300 dark:text-black': open() && props.showMenu,
93-
'rounded-none active:bg-gray-300 hover:bg-gray-300 dark:hover:text-black focus:outline-none focus:highlight-none active:highlight-none focus:ring-0 active:outline-none':
94-
props.showMenu,
9594
}}
9695
title="Scale editor to make text larger or smaller"
9796
ref={btnEl}
@@ -101,10 +100,13 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
101100
</button>
102101
<Dismiss menuButton={btnEl} open={open} setOpen={setOpen}>
103102
<div
104-
class="absolute transform -translate-x-1/2 bg-white dark:bg-solid-darkbg rounded shadow-md border-2 border-slate-200 dark:border-neutral-800 p-6 w-min z-10"
103+
class="absolute bg-white dark:bg-solid-darkbg rounded shadow-md border-2 border-slate-200 dark:border-neutral-800 p-6 w-min z-10"
105104
classList={{
106105
'left-1/4': props.showMenu,
107106
}}
107+
style={{
108+
transform: 'translateX(calc(2rem - 100%))',
109+
}}
108110
>
109111
<div class="flex">
110112
<button

‎playground/context.tsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
import { createContext, createResource, createSignal, ParentComponent, Resource, useContext } from 'solid-js';
1+
import { Accessor, createContext, createResource, createSignal, ParentComponent, Resource, useContext } from 'solid-js';
2+
import type { Tab } from '../src';
23

34
interface AppContextType {
45
token: string;
56
user: Resource<{ display: string; avatar: string } | undefined>;
7+
tabs: Accessor<Tab[] | undefined>;
8+
setTabs: (x: Accessor<Tab[] | undefined>) => void;
69
}
710

811
const AppContext = createContext<AppContextType>();
@@ -12,7 +15,7 @@ const AppContext = createContext<AppContextType>();
1215
export const API = 'https://api.solidjs.com';
1316

1417
export const AppContextProvider: ParentComponent = (props) => {
15-
const [token, setToken] = createSignal(localStorage.getItem('token') || '');
18+
let token = localStorage.getItem('token') || '';
1619
const [user] = createResource(token, async (token) => {
1720
if (!token)
1821
return {
@@ -30,17 +33,28 @@ export const AppContextProvider: ParentComponent = (props) => {
3033
avatar: body.avatar,
3134
};
3235
});
36+
37+
let [hasTabs, setHasTabs] = createSignal(false);
38+
let tabs: Accessor<Tab[] | undefined>;
3339
return (
3440
<AppContext.Provider
3541
value={{
3642
get token() {
37-
return token();
43+
return token;
3844
},
3945
set token(x) {
40-
setToken(x);
46+
token = x;
4147
localStorage.setItem('token', x);
4248
},
4349
user,
50+
tabs() {
51+
if (!hasTabs()) return undefined;
52+
return tabs();
53+
},
54+
setTabs(x) {
55+
tabs = x;
56+
setHasTabs(true);
57+
},
4458
}}
4559
>
4660
{props.children}

‎playground/pages/edit.tsx

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
44
import CompilerWorker from '../../src/workers/compiler?worker';
55
import FormatterWorker from '../../src/workers/formatter?worker';
66
import {
7+
batch,
78
createEffect,
89
createResource,
910
createSignal,
@@ -57,32 +58,38 @@ export const Edit = (props: { dark: boolean; horizontal: boolean }) => {
5758
const params = useParams();
5859
const context = useAppContext()!;
5960

61+
let loaded = false;
62+
6063
const [tabs, setTabs] = createTabList([]);
64+
context.setTabs(tabs);
6165
const [current, setCurrent] = createSignal<string>();
6266
const [resource, { mutate }] = createResource<APIRepl, string>(params.repl, async (repl) => {
6367
let output: APIRepl = await fetch(`${API}/repl/${repl}`, {
64-
headers: { authorization: `Bearer ${context.token}` },
68+
headers: { authorization: context.token ? `Bearer ${context.token}` : '' },
6569
}).then((r) => r.json());
6670

67-
setCurrent(output.files[0].name);
68-
setTabs(
69-
output.files.map((x) => {
70-
let dot = x.name.lastIndexOf('.');
71-
return { name: x.name.slice(0, dot), type: x.name.slice(dot + 1), source: x.content.join('\n') };
72-
}),
73-
);
71+
batch(() => {
72+
setTabs(
73+
output.files.map((x) => {
74+
return { name: x.name, source: x.content.join('\n') };
75+
}),
76+
);
77+
setCurrent(output.files[0].name);
78+
});
79+
loaded = true;
80+
7481
return output;
7582
});
7683

77-
const tabMapper = (tabs: Tab[]) => tabs.map((x) => ({ name: `${x.name}.${x.type}`, content: x.source.split('\n') }));
84+
const tabMapper = (tabs: Tab[]) => tabs.map((x) => ({ name: x.name, content: x.source.split('\n') }));
7885
const updateRepl = debounce(() => {
7986
const repl = resource.latest;
80-
if (!repl) return;
87+
if (!repl || !context.token || context.user()?.display != params.user) return;
8188
const files = tabMapper(tabs());
8289
fetch(`${API}/repl/${params.repl}`, {
8390
method: 'PUT',
8491
headers: {
85-
authorization: `Bearer ${context.token}`,
92+
'authorization': `Bearer ${context.token}`,
8693
'Content-Type': 'application/json',
8794
},
8895
body: JSON.stringify({
@@ -95,11 +102,9 @@ export const Edit = (props: { dark: boolean; horizontal: boolean }) => {
95102
});
96103
}, 1000);
97104

98-
let firstRun = true;
99105
createEffect(() => {
100106
tabMapper(tabs()); // use the latest value on debounce, and just throw this value away (but use it to track)
101-
if (firstRun) firstRun = false;
102-
else updateRepl();
107+
if (loaded) updateRepl();
103108
});
104109

105110
return (
@@ -142,7 +147,7 @@ export const Edit = (props: { dark: boolean; horizontal: boolean }) => {
142147
fetch(`${API}/repl/${params.repl}`, {
143148
method: 'PUT',
144149
headers: {
145-
authorization: `Bearer ${context.token}`,
150+
'authorization': `Bearer ${context.token}`,
146151
'Content-Type': 'application/json',
147152
},
148153
body: JSON.stringify({

0 commit comments

Comments
 (0)