Skip to content

Commit

Permalink
Merge pull request #107 from modderme123/signin
Browse files Browse the repository at this point in the history 
Cleanup & Redesign, Add Login 
Fixes #95, #96, #97, #105
  • Loading branch information
Modder Me authored Jul 12, 2022
2 parents e0ea49d + e644e8e commit e27ed28
Show file tree
Hide file tree
Showing 55 changed files with 2,514 additions and 2,602 deletions.
5 changes: 5 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules/
dist/
lib/
src/defaultFiles/
pnpm-lock.yaml
5 changes: 3 additions & 2 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
{
"arrowParens": "always",
"htmlWhitespaceSensitivity": "ignore",
"printWidth": 100,
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false
"useTabs": false,
"quoteProps": "consistent"
}
4 changes: 1 addition & 3 deletions .vscode/extensions.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
{
"recommendations": [
"esbenp.prettier-vscode"
]
"recommendations": ["esbenp.prettier-vscode"]
}
7 changes: 2 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,11 @@
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="shortcut icon" href="./playground/assets/logo.png" type="image/png" />
<title>Solid Playground</title>
<meta
name="description"
content="Quickly discover what the solid compiler will generate from your JSX template"
/>
<meta name="description" content="Quickly discover what the solid compiler will generate from your JSX template" />
</head>
<body>
<div id="app"></div>
<div id="update" class="fixed bottom-10 left-10"></div>
<script src="./playground/index.ts" type="module"></script>
<script src="./playground/index.tsx" type="module"></script>
</body>
</html>
44 changes: 22 additions & 22 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,55 +18,55 @@
"dev": "vite",
"build": "vite build && workbox generateSW workbox-config.js",
"build:lib": "jiti rollup.config.js",
"format": "prettier -w \"{src,playground}/**/*.{js,json,ts,tsx,html,css}\" \"*.{js,ts}\"",
"prepublishOnly": "pnpm build:lib"
"format": "prettier -w .",
"tsc": "tsc"
},
"devDependencies": {
"@babel/core": "^7.17.12",
"@babel/plugin-syntax-jsx": "^7.17.12",
"@babel/types": "^7.17.12",
"@babel/core": "^7.18.6",
"@babel/plugin-syntax-jsx": "^7.18.6",
"@babel/types": "^7.18.8",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^22.0.0",
"@rollup/plugin-commonjs": "^22.0.1",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-replace": "^4.0.0",
"@types/babel__standalone": "^7.1.4",
"@types/dedent": "^0.7.0",
"@types/fs-extra": "^9.0.13",
"@types/workbox-sw": "^4.3.2",
"acorn": "^8.7.1",
"acorn-jsx": "^5.3.2",
"assert": "^2.0.0",
"fs-extra": "^10.1.0",
"jiti": "^1.13.0",
"jiti": "^1.14.0",
"mime": "^3.0.0",
"monaco-editor": "~0.33.0",
"register-service-worker": "^1.7.2",
"rollup-plugin-delete": "^2.0.0",
"rollup-plugin-import-css": "^3.0.3",
"rollup-plugin-windicss": "^1.8.4",
"typescript": "^4.6.4",
"vite": "^2.9.9",
"rollup-plugin-windicss": "^1.8.6",
"solid-app-router": "^0.4.1",
"typescript": "^4.7.4",
"vite": "^2.9.14",
"vite-plugin-solid": "^2.2.6",
"vite-plugin-windicss": "^1.8.4",
"windicss": "^3.5.3",
"vite-plugin-windicss": "^1.8.6",
"windicss": "^3.5.6",
"workbox-cli": "^6.5.3"
},
"dependencies": {
"@amoutonbrady/lz-string": "^0.0.1",
"@babel/preset-typescript": "^7.17.12",
"@babel/standalone": "^7.17.12",
"babel-preset-solid": "1.4.0",
"@babel/preset-typescript": "^7.18.6",
"@babel/standalone": "^7.18.8",
"@solid-primitives/media": "^2.0.0",
"@solid-primitives/scheduled": "^1.0.0",
"babel-preset-solid": "1.4.6",
"dedent": "^0.7.0",
"jszip": "^3.9.1",
"mitt": "^3.0.0",
"jszip": "^3.10.0",
"monaco-editor-textmate": "^3.0.0",
"monaco-textmate": "^3.0.1",
"onigasm": "^2.2.5",
"prettier": "^2.6.2",
"rollup": "^2.73.0",
"prettier": "^2.7.1",
"rollup": "^2.76.0",
"solid-dismiss": "^1.2.1",
"solid-heroicons": "^2.0.3",
"solid-js": "1.4.1"
"solid-js": "1.4.7"
}
}
176 changes: 30 additions & 146 deletions playground/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,11 @@
import { Show, onCleanup, createEffect, createSignal, JSX } from 'solid-js';

import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import type { editor as mEditor } from 'monaco-editor';

import pkg from '../package.json';
import { eventBus } from './utils/eventBus';
import { createTabList, defaultTabs, processImport, Repl } from '../src';
import { Show, createSignal, JSX, on } from 'solid-js';
import { Routes, Route, useSearchParams } from 'solid-app-router';
import { eventBus } from './utils/serviceWorker';
import { Update } from './components/update';
import { Header } from './components/header';
import { parseHash } from './utils/parseHash';
import { isValidUrl } from './utils/isValidUrl';

import CompilerWorker from '../src/workers/compiler?worker';
import FormatterWorker from '../src/workers/formatter?worker';
import useZoom from '../src/hooks/useZoom';
import { isDarkTheme } from './utils/isDarkTheme';
import { exportToJSON } from './utils/exportFiles';

(window as any).MonacoEnvironment = {
getWorker(_moduleId: unknown, label: string) {
switch (label) {
case 'css':
return new cssWorker();
case 'typescript':
case 'javascript':
return new tsWorker();
default:
return new editorWorker();
}
},
};

let swUpdatedBeforeRender = false;
eventBus.on('sw-update', () => (swUpdatedBeforeRender = true));
import { useZoom } from '../src/hooks/useZoom';
import { Edit } from './pages/edit';
import { Home } from './pages/home';
import { Login } from './pages/login';

export const App = (): JSX.Element => {
/**
Expand All @@ -43,123 +14,36 @@ export const App = (): JSX.Element => {
* via an EventBus initiated in the service worker and
* the couple line above.
*/
const [newUpdate, setNewUpdate] = createSignal(swUpdatedBeforeRender);
eventBus.on('sw-update', () => setNewUpdate(true));
onCleanup(() => eventBus.all.clear());

const compiler = new CompilerWorker();
const formatter = new FormatterWorker();

const url = new URL(location.href);
const initialTabs = parseHash(url.hash && url.hash.slice(1), defaultTabs) || defaultTabs;
const [tabs, setTabs] = createTabList(initialTabs);
const [current, setCurrent] = createSignal('main.tsx');

const params = Object.fromEntries(url.searchParams.entries());
const [version, setVersion] = createSignal(params.version || pkg.dependencies['solid-js']);

const [format, setFormat] = createSignal(false);
let editor: mEditor.IStandaloneCodeEditor | undefined;

if (params.data && isValidUrl(params.data)) {
fetch(params.data)
.then((r) => r.json())
.then((data) => {
setTabs(processImport(data));
})
.catch((e) => console.error('Failed to import browser data', e));
}

const [noHeader, noInteractive, isHorizontal, noEditableTabs] = [
'noHeader',
'noInteractive',
'isHorizontal',
'noEditableTabs',
].map((key) => key in params);

if (params.format === 'json') {
exportToJSON(tabs());
}

const [dark, setDark] = createSignal(isDarkTheme());

createEffect(() => {
const action = dark() ? 'add' : 'remove';
document.body.classList[action]('dark');
});

const header = !noHeader;
const interactive = !noInteractive;
const editableTabs = !noEditableTabs;

const { zoomState, updateZoomScale } = useZoom();
const [newUpdate, setNewUpdate] = createSignal(eventBus() != undefined);
on(eventBus, () => setNewUpdate(true));

const { zoomState, updateZoom } = useZoom();
document.addEventListener('keydown', (e) => {
const key = e.key;

if (!zoomState.overrideNative) return;

if (!((e.ctrlKey || e.metaKey) && (key === '=' || key === '-'))) {
return;
}

e.preventDefault();

if (key === '=') {
updateZoomScale('increase');
} else {
updateZoomScale('decrease');
if (!(e.ctrlKey || e.metaKey)) return;

if (e.key === '=') {
updateZoom('increase');
e.preventDefault();
} else if (e.key == '-') {
updateZoom('decrease');
e.preventDefault();
}
});

return (
<div class="relative flex bg-solid-medium h-screen overflow-hidden text-slate-900 dark:text-slate-50 font-sans flex-col">
<Show
when={header}
children={
<Header
dark={dark()}
toggleDark={() => {
const toggledValue = !dark();
setDark(toggledValue);
localStorage.setItem('dark', String(toggledValue));
}}
formatCode={() => {
if (!format()) {
editor?.getAction('editor.action.formatDocument').run();
editor?.focus();
}
setFormat(true);
setTimeout(setFormat, 750, false);
}}
isHorizontal={isHorizontal}
tabs={tabs()}
setTabs={setTabs}
setCurrent={setCurrent}
onVersionChange={setVersion}
version={version()}
/>
}
fallback={<div classList={{ 'md:col-span-2': !isHorizontal }}></div>}
/>
const [searchParams] = useSearchParams();

<Repl
compiler={compiler}
formatter={formatter}
isHorizontal={isHorizontal}
interactive={interactive}
editableTabs={editableTabs}
dark={dark()}
tabs={tabs()}
setTabs={setTabs}
current={current()}
setCurrent={setCurrent}
version={version()}
id="repl"
onEditorReady={(_editor) => {
editor = _editor;
}}
/>
return (
<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">
<Routes>
<Route
path={['/:user/:repl', '/scratchpad']}
element={<Edit horizontal={searchParams.isHorizontal != undefined} />}
/>
<Route path="/:user" element={<Home />} />
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
</Routes>

<Show when={newUpdate()} children={<Update onDismiss={() => setNewUpdate(false)} />} />
</div>
Expand Down
Loading

0 comments on commit e27ed28

Please sign in to comment.