From 58b6b6ed18ebb874f878f95232f75a9c2273da92 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Sun, 22 Sep 2024 03:40:05 +0200 Subject: [PATCH] some tweaks --- .prettierrc | 9 ++ README.md | 2 +- src/client/components/Ide.jsx | 97 +++++++++------------ src/client/components/Terminal.jsx | 1 + src/client/components/TreeView.jsx | 31 ------- src/client/customFit.ts | 11 +-- src/client/style.css | 134 +++++++++++++++++++++++------ src/client/utils.js | 8 ++ 8 files changed, 173 insertions(+), 120 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..7577b12 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "printWidth": 120, + "singleQuote": true, + "quoteProps": "consistent", + "tabWidth": 4, + "semi": false, + "arrowParens": "avoid", + "proseWrap": "always" +} diff --git a/README.md b/README.md index 41eb8a3..942d89c 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# ReplIt Clone \ No newline at end of file +# ReplIt Clone diff --git a/src/client/components/Ide.jsx b/src/client/components/Ide.jsx index 8aa8b89..3d773ca 100644 --- a/src/client/components/Ide.jsx +++ b/src/client/components/Ide.jsx @@ -1,23 +1,12 @@ -import { useSignal, signal, useComputed, batch, effect } from '@preact/signals' +import { useSignal, signal, useComputed, batch, effect, Signal } from '@preact/signals' +import clsx from 'clsx' -import { TreeView, EXAMPLE_TREE } from '@/client/components/TreeView.jsx' +import { TreeView } from '@/client/components/TreeView.jsx' import { Editor } from '@/client/components/Editor.jsx' -import clsx from 'clsx' -import { useEffect, useState } from 'preact/hooks' -import { fetchJson } from '../utils.js' +import { useEffect } from 'preact/hooks' import { Terminal } from './Terminal.jsx' -function ensurePrefix(s, prefix) { - return s.slice(0, prefix.length) === prefix ? s : prefix + s -} - -function stripPrefix(s, prefix) { - return s.slice(0, prefix.length) === prefix ? s.slice(prefix.length) : s -} - -function clamp(min, value, max) { - return Math.max(min, Math.min(value, max)) -} +import { clamp, fetchJson, stripPrefix } from '@/client/utils.js' export const Ide = ({}) => { const ws = useSignal(null) @@ -38,16 +27,8 @@ export const Ide = ({}) => { const activeTab = useSignal(null) - const tabs = useSignal([ - // { - // id: '/project/main.c', - // content: signal('...main.c...'), - // }, - // { - // id: '/project/data.csv', - // content: signal('...data.csv...'), - // }, - ]) + /** @type {Signal<{ id: string, content: Signal }[]>} */ + const tabs = useSignal([]) const activePath = useComputed(() => { if (activeTab.value === null) return null @@ -61,15 +42,6 @@ export const Ide = ({}) => { return tabs.value[activeTab.value].content }) - effect(() => { - const path = activePath.value - const contentSig = activeContent.value - - if (contentSig === null || path === null) return - - console.log(path, contentSig.value) - }) - return (
@@ -161,27 +133,44 @@ export const Ide = ({}) => { - + if (fullPath.endsWith('.sh')) { + ws.value.send(`sh ${fullPath}\n`) + return + } + if (fullPath.endsWith('.js')) { + ws.value.send(`node ${fullPath}\n`) + return + } + }} + > + Run + + + keyboard_arrow_down + + +
+
+
+
Run
+
Debug
+
Test
+
Profile
+
Bench
+
+
+
diff --git a/src/client/components/Terminal.jsx b/src/client/components/Terminal.jsx index daaea56..b9ded28 100644 --- a/src/client/components/Terminal.jsx +++ b/src/client/components/Terminal.jsx @@ -40,6 +40,7 @@ export const Terminal = memo(({ ws }) => {
{ + if (!el) return console.log('Starting terminal...') term.open(el) diff --git a/src/client/components/TreeView.jsx b/src/client/components/TreeView.jsx index a3062c7..561ffb4 100644 --- a/src/client/components/TreeView.jsx +++ b/src/client/components/TreeView.jsx @@ -1,31 +1,5 @@ -import { useSignal } from '@preact/signals' -import clsx from 'clsx' import { useEffect, useState } from 'preact/hooks' -export const EXAMPLE_TREE = { - type: 'root', - children: [ - { - type: 'folder', - name: 'bin/', - children: [ - { - type: 'file', - name: 'a.out', - }, - ], - }, - { - type: 'file', - name: 'main.c', - }, - { - type: 'file', - name: 'data.csv', - }, - ], -} - const flattenTree = (node, depth = 0, path = []) => { if (node.type === 'root') { return node.children.flatMap(entry => flattenTree(entry, depth, [])) @@ -127,11 +101,6 @@ const TreeViewNode = ({ listDir, actionOpenFile, node, depth, path }) => { } } -const ICONS = { - ['folder']: 'folder', - ['file']: 'description', -} - export const TreeView = ({ listDir, actionOpenFile, rootPath }) => { return (
diff --git a/src/client/customFit.ts b/src/client/customFit.ts index a71e38a..3510483 100644 --- a/src/client/customFit.ts +++ b/src/client/customFit.ts @@ -45,18 +45,13 @@ export class FitAddon implements ITerminalAddon { // Force a full render if (this._terminal.rows !== dims.rows || this._terminal.cols !== dims.cols) { // core._renderCoordinator.clear() - this._terminal.resize(dims.cols, dims.rows) + this._terminal.resize(dims.cols | 0, dims.rows | 0) } } public proposeDimensions(): ITerminalDimensions | undefined { - if (!this._terminal) { - return undefined - } - - if (!this._terminal.element.parentElement) { - return undefined - } + if (!this._terminal) return undefined + if (!this._terminal.element) return undefined const dimEl = this._terminal.element.closest('[xterm-dimensions]') ?? this._terminal.element.parentElement diff --git a/src/client/style.css b/src/client/style.css index 8b9b9da..7a5fd25 100644 --- a/src/client/style.css +++ b/src/client/style.css @@ -117,8 +117,6 @@ input[type='submit'], [role='button'] { appearance: none; outline: none; - border: 1px solid #d9d9d9; - background: #fff; display: grid; place-content: center; @@ -128,13 +126,20 @@ input[type='submit'], font-size: 15px; font-weight: 500; + color: var(--fg, #333); + background: var(--bg, #fff); + border: var(--brd, 1px solid #d9d9d9); + box-shadow: var(--shadow, 0 0.125rem 0.125rem 0 #00000008); + + &:hover { + background: var(--bg-hover, #f8f8f8); + } + padding: 0.25rem 0.5rem; gap: 0.25rem; border-radius: 0.25rem; - box-shadow: 0 0.125rem 0.125rem 0 #00000008; - min-height: 1.75rem; cursor: pointer; @@ -143,43 +148,120 @@ input[type='submit'], padding-left: 0.125rem; } - &:hover { - background: #f8f8f8; - } - &.icon { padding: 0.25rem; aspect-ratio: 1 / 1; } - &.run { - background: hsl(120, 35%, 46%); - border-color: hsl(120, 38%, 41%); - color: #fff; + &.flat { + --bg: none; + --bg-hover: #0002; + --brd: none; - .material-symbols-outlined { - font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20; + min-height: auto; + box-shadow: none; + + &.icon { + padding: 0; } + } - box-shadow: 0 0.125rem 0.2rem 0 hsla(120, 40%, 53%, 0.37); + &.compound { + padding: 0; + gap: 0; - &:hover { - background: hsl(120, 35%, 51%); + > .part { + display: grid; + place-content: center; + + padding: 0.25rem 0.5rem; + + background: var(--bg); + + &:not(:last-child) { + border-right: var(--brd); + } + + &:hover { + background: var(--bg-hover); + } + + &:has(> .material-symbols-outlined:first-child) { + padding-left: 0.25rem; + } + &:has(> .material-symbols-outlined:last-child) { + padding-right: 0.25rem; + } } } +} - &.flat { - min-height: auto; - border: none; - background: none; - box-shadow: none; +.run-style { + --fg: #fff; - &.icon { - padding: 0; + --bg: hsl(120, 35%, 46%); + --bg-hover: hsl(120, 35%, 51%); + + --brd: 1px solid hsl(120, 38%, 41%); + + --shadow: 0 0.125rem 0.2rem 0 hsla(120, 40%, 53%, 0.37); + + .material-symbols-outlined { + font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20; + } +} + +.popup-region { + position: relative; + + display: grid; + + > .region { + display: grid; + } + + > .popup { + position: absolute; + background: #fff; + border: 1px solid #d9d9d9; + border-radius: 0.35rem; + box-shadow: 0 0.125rem 0.25rem 0 #00000030; + + overflow: clip; + + z-index: 1000; + + &.anchor-mode-1 { + top: calc(100% + 0.25rem); + right: 0; + } + } +} + +.menu { + display: grid; + grid-auto-flow: row; + + font-size: 15px; + font-weight: 500; + + border: var(--brd, 1px solid #d9d9d9); + + > .item { + display: grid; + padding: 0.25rem 0.5rem; + + cursor: pointer; + + color: var(--fg, #333); + background: var(--bg, #fff); + + &:not(:last-child) { + border-bottom: var(--brd); } &:hover { - background: #0002; + background: var(--bg-hover, #00000006); } } } @@ -533,7 +615,7 @@ input[type='submit'], > .status { border-top: 1px solid #d9d9d9; - padding: 0.125rem 0.25rem; + padding: 0.25rem 0.25rem; display: flex; flex-direction: row; diff --git a/src/client/utils.js b/src/client/utils.js index 6c1b955..daeab04 100644 --- a/src/client/utils.js +++ b/src/client/utils.js @@ -19,3 +19,11 @@ export function useEventListener(target, event, handler, deps = []) { } }, deps) } + +export function stripPrefix(s, prefix) { + return s.slice(0, prefix.length) === prefix ? s.slice(prefix.length) : s +} + +export function clamp(min, value, max) { + return Math.max(min, Math.min(value, max)) +}