From 4d807c961df835db6000e49102e051994827a212 Mon Sep 17 00:00:00 2001 From: Damian Tarnawski Date: Thu, 16 Nov 2023 16:30:58 +0100 Subject: [PATCH] Update eslint and prettier --- .eslintrc | 50 +++++- .prettierrc | 36 ++--- examples/sandbox/src/App.tsx | 28 ++-- examples/sandbox/src/DevtoolsOverlay.tsx | 2 +- examples/sandbox/src/Overlay.tsx | 2 +- examples/sandbox/src/Recursive.tsx | 14 +- examples/sandbox/src/Theme.tsx | 8 +- examples/sandbox/src/Todos.tsx | 14 +- examples/sandbox/src/main.tsx | 6 +- examples/sandbox/vite.config.ts | 6 +- examples/start/src/components/comment.tsx | 8 +- examples/start/src/components/nav.tsx | 2 +- examples/start/src/components/story.tsx | 8 +- examples/start/src/components/toggle.tsx | 6 +- examples/start/src/entry-client.tsx | 2 +- examples/start/src/entry-server.tsx | 2 +- examples/start/src/lib/api.ts | 12 +- examples/start/src/root.tsx | 2 +- examples/start/src/routes/[...stories].tsx | 12 +- examples/start/src/routes/stories/[id].tsx | 6 +- examples/start/src/routes/users/[id].tsx | 4 +- examples/start/vite.config.ts | 2 +- .../pages/about/index.page.tsx | 4 +- .../vite-plugin-ssr/pages/index/Counter.tsx | 4 +- .../pages/index/index.page.tsx | 6 +- examples/vite-plugin-ssr/renderer/Link.tsx | 4 +- .../vite-plugin-ssr/renderer/PageLayout.tsx | 14 +- .../renderer/_default.page.client.tsx | 14 +- .../renderer/_default.page.server.tsx | 14 +- .../vite-plugin-ssr/renderer/_error.page.tsx | 6 +- examples/vite-plugin-ssr/renderer/types.ts | 4 +- .../renderer/usePageContext.tsx | 10 +- examples/vite-plugin-ssr/vite.config.ts | 6 +- package.json | 3 +- packages/debugger/src/dependency/collect.ts | 12 +- packages/debugger/src/dependency/index.ts | 22 +-- .../src/dependency/test/collect.test.ts | 60 +++---- packages/debugger/src/index.ts | 4 +- packages/debugger/src/inspector/index.ts | 37 ++--- packages/debugger/src/inspector/inspector.ts | 52 +++---- packages/debugger/src/inspector/serialize.ts | 6 +- packages/debugger/src/inspector/store.ts | 12 +- .../src/inspector/test/index.test.tsx | 74 +++++---- .../src/inspector/test/serialize.test.ts | 97 ++++++------ .../debugger/src/inspector/test/store.test.ts | 77 +++++---- packages/debugger/src/inspector/types.ts | 14 +- .../debugger/src/locator/element-overlay.tsx | 14 +- .../debugger/src/locator/find-components.ts | 16 +- packages/debugger/src/locator/index.ts | 38 ++--- .../debugger/src/locator/test/index.test.ts | 2 +- packages/debugger/src/locator/types.ts | 12 +- .../debugger/src/main/component-registry.ts | 28 ++-- packages/debugger/src/main/get-id.ts | 2 +- packages/debugger/src/main/id.ts | 8 +- packages/debugger/src/main/index.ts | 40 ++--- packages/debugger/src/main/observe.ts | 8 +- packages/debugger/src/main/roots.ts | 18 +-- .../debugger/src/main/test/update.test.ts | 8 +- packages/debugger/src/main/test/utils.test.ts | 10 +- packages/debugger/src/main/types.ts | 16 +- packages/debugger/src/main/utils.ts | 21 +-- packages/debugger/src/setup.ts | 10 +- packages/debugger/src/structure/index.ts | 18 +-- .../src/structure/test/walker.test.tsx | 82 ++++++---- packages/debugger/src/structure/walker.ts | 20 +-- packages/debugger/src/types.ts | 6 +- packages/debugger/tsup.config.ts | 12 +- packages/debugger/vite.config.ts | 2 +- packages/extension/background/background.ts | 22 +-- packages/extension/content/content.ts | 8 +- packages/extension/content/debugger.ts | 12 +- packages/extension/content/detector.ts | 6 +- packages/extension/devtools/devtools.ts | 10 +- packages/extension/panel/panel.tsx | 16 +- packages/extension/popup/popup.tsx | 16 +- packages/extension/shared/bridge.ts | 31 ++-- packages/extension/vite.config.ts | 12 +- packages/frontend/src/App.tsx | 14 +- packages/frontend/src/SidePanel.tsx | 16 +- packages/frontend/src/controller.tsx | 36 ++--- packages/frontend/src/index.tsx | 8 +- .../src/modules/dependency/dgraph-view.tsx | 28 ++-- .../frontend/src/modules/dependency/dgraph.ts | 18 +-- .../src/modules/inspector/Inspector.tsx | 31 ++-- .../frontend/src/modules/inspector/decode.ts | 61 ++++---- .../frontend/src/modules/inspector/index.ts | 52 +++---- .../src/modules/inspector/test/decode.test.ts | 146 +++++++++--------- .../src/modules/inspector/value-node.tsx | 86 +++++------ .../frontend/src/modules/structure/index.ts | 20 +-- .../src/modules/structure/owner-node.tsx | 16 +- .../src/modules/structure/owner-path.tsx | 24 +-- .../src/modules/structure/reconcile.ts | 22 +-- .../src/modules/structure/structure-tree.tsx | 120 +++++++------- .../frontend/src/modules/structure/styles.tsx | 2 +- .../modules/structure/test/structure.test.ts | 102 ++++++------ .../modules/structure/test/virtual.test.ts | 14 +- .../frontend/src/modules/structure/virtual.ts | 4 +- packages/frontend/src/ui/components/badge.tsx | 4 +- .../error-overlay/error-overlay-headless.ts | 67 ++++---- .../error-overlay/error-overlay.tsx | 8 +- .../frontend/src/ui/components/highlight.tsx | 4 +- packages/frontend/src/ui/components/icons.tsx | 48 +++--- .../frontend/src/ui/components/owner-name.tsx | 39 +++-- .../frontend/src/ui/components/scrollable.tsx | 10 +- .../frontend/src/ui/components/skeleton.tsx | 8 +- .../frontend/src/ui/components/splitter.tsx | 42 ++--- .../src/ui/components/toggle-button.tsx | 12 +- .../src/ui/components/toggle-tabs.tsx | 16 +- packages/frontend/src/ui/index.ts | 14 +- packages/frontend/src/ui/styles.tsx | 19 +-- packages/frontend/src/ui/transitions.ts | 11 +- packages/frontend/vite.config.ts | 4 +- packages/logger/src/index.ts | 36 ++--- packages/logger/src/log.ts | 38 ++--- packages/logger/src/server.ts | 2 +- packages/logger/src/utils.ts | 4 +- packages/logger/test/exports.test.ts | 2 +- packages/logger/tsup.config.ts | 2 +- packages/logger/vite.config.ts | 2 +- packages/main/src/index.ts | 2 +- packages/main/src/setup-noop.ts | 10 +- packages/main/src/setup.ts | 4 +- packages/main/src/vite.ts | 4 +- packages/main/src/vite/index.ts | 14 +- packages/main/src/vite/location.ts | 22 +-- packages/main/src/vite/name.ts | 6 +- packages/main/src/vite/test/location.test.ts | 17 +- packages/main/src/vite/test/name.test.ts | 4 +- packages/main/src/vite/test/setup.ts | 14 +- packages/main/src/vite/utils.ts | 2 +- packages/main/tsup.config.ts | 8 +- packages/main/vite.config.ts | 2 +- packages/overlay/env.d.ts | 2 +- packages/overlay/scripts/build.ts | 16 +- packages/overlay/scripts/dts.ts | 4 +- packages/overlay/scripts/dts_worker.ts | 4 +- packages/overlay/src/controller.tsx | 12 +- packages/overlay/src/index.tsx | 26 ++-- packages/shared/src/detect.ts | 16 +- packages/shared/src/primitives.ts | 38 ++--- packages/shared/src/utils.ts | 17 +- packages/shared/tsup.config.ts | 4 +- packages/shared/vite.config.ts | 2 +- packages/theme/theme.ts | 6 +- pnpm-lock.yaml | 16 ++ 145 files changed, 1433 insertions(+), 1363 deletions(-) diff --git a/.eslintrc b/.eslintrc index 0cda6ea6..79b0cb59 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,7 +1,7 @@ { "root": true, "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint", "no-only-tests", "eslint-comments"], + "plugins": ["@typescript-eslint", "no-only-tests", "eslint-comments", "@nothing-but"], "ignorePatterns": ["node_modules", "dist", "scripts", "examples"], "parserOptions": { "project": "./tsconfig.json", @@ -9,9 +9,13 @@ "sourceType": "module" }, "rules": { - "prefer-const": "warn", + /* + forgot to remove/implement + */ "no-console": "warn", "no-debugger": "warn", + "prefer-const": "warn", + "require-await": "warn", "@typescript-eslint/no-unused-vars": [ "warn", { @@ -20,10 +24,46 @@ "caughtErrorsIgnorePattern": "^_" } ], - "@typescript-eslint/no-unnecessary-type-assertion": "warn", + "@typescript-eslint/no-unnecessary-boolean-literal-compare": "warn", "@typescript-eslint/no-unnecessary-condition": "warn", + "@typescript-eslint/no-unnecessary-qualifier": "warn", + "@typescript-eslint/no-unnecessary-type-arguments": "warn", + "@typescript-eslint/no-unnecessary-type-assertion": "warn", + "@typescript-eslint/no-unnecessary-type-constraint": "warn", "@typescript-eslint/no-useless-empty-export": "warn", - "no-only-tests/no-only-tests": "warn", - "eslint-comments/no-unused-disable": "warn" + "@typescript-eslint/no-empty-function": "warn", + "no-empty": "warn", + "@typescript-eslint/no-unused-expressions": [ + "warn", + {"allowShortCircuit": true, "allowTernary": true} + ], + "eslint-comments/no-unused-disable": "warn", + /* + code style | readability + */ + // to many voids + // "@typescript-eslint/explicit-function-return-type": [ + // "warn", + // { + // "allowExpressions": true, + // "allowTypedFunctionExpressions": true, + // "allowHigherOrderFunctions": true, + // "allowDirectConstAssertionInArrowFunctions": true, + // "allowConciseArrowFunctionExpressionsStartingWithVoid": true, + // "allowIIFEs": true + // } + // ], + /* + prevent unexpected behavior + */ + "@typescript-eslint/ban-types": "warn", + "@typescript-eslint/switch-exhaustiveness-check": "warn", + "no-fallthrough": ["warn", {"allowEmptyCase": true}], + // "@nothing-but/no-ignored-return": "warn", + // "@nothing-but/no-return-to-void": "warn", + /* + tests + */ + "no-only-tests/no-only-tests": "warn" } } diff --git a/.prettierrc b/.prettierrc index c0eafdfe..099988ae 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,20 +1,20 @@ { - "trailingComma": "all", - "tabWidth": 4, - "printWidth": 100, - "semi": false, - "singleQuote": true, - "useTabs": false, - "arrowParens": "avoid", - "bracketSpacing": true, - "endOfLine": "lf", - "plugins": ["prettier-plugin-organize-imports"], - "overrides": [ - { - "files": "*.yml", - "options": { - "tabWidth": 2 - } - } - ] + "trailingComma": "all", + "tabWidth": 4, + "printWidth": 100, + "semi": false, + "singleQuote": true, + "useTabs": false, + "arrowParens": "avoid", + "bracketSpacing": false, + "endOfLine": "lf", + "plugins": ["prettier-plugin-organize-imports"], + "overrides": [ + { + "files": "*.yml", + "options": { + "tabWidth": 2 + } + } + ] } diff --git a/examples/sandbox/src/App.tsx b/examples/sandbox/src/App.tsx index 8d1bd6f3..ab19e211 100644 --- a/examples/sandbox/src/App.tsx +++ b/examples/sandbox/src/App.tsx @@ -14,13 +14,13 @@ import { Show, Suspense, } from 'solid-js' -import { createMutable } from 'solid-js/store' +import {createMutable} from 'solid-js/store' import Recursive from './Recursive' -import { ThemeExample } from './Theme' +import {ThemeExample} from './Theme' import Todos from './Todos' const doMediumCalc = () => { - Array.from({ length: 1000000 }, (_, i) => i).sort(() => Math.random() - 5) + Array.from({length: 1000000}, (_, i) => i).sort(() => Math.random() - 5) } let setRootCount: Setter @@ -48,7 +48,7 @@ createRoot(dispose => { }, undefined) }) -const Button = (props: { text: string; onClick: VoidFunction }) => { +const Button = (props: {text: string; onClick: VoidFunction}) => { const text = createMemo(() => {props.text}) return (
-
+
-
+
diff --git a/examples/sandbox/src/DevtoolsOverlay.tsx b/examples/sandbox/src/DevtoolsOverlay.tsx index ba500a75..9b20d4b8 100644 --- a/examples/sandbox/src/DevtoolsOverlay.tsx +++ b/examples/sandbox/src/DevtoolsOverlay.tsx @@ -1,4 +1,4 @@ -import { attachDevtoolsOverlay } from '@solid-devtools/overlay' +import {attachDevtoolsOverlay} from '@solid-devtools/overlay' declare global { interface Window { diff --git a/examples/sandbox/src/Overlay.tsx b/examples/sandbox/src/Overlay.tsx index a29cacf0..c9566243 100644 --- a/examples/sandbox/src/Overlay.tsx +++ b/examples/sandbox/src/Overlay.tsx @@ -1,4 +1,4 @@ -import { Show, lazy } from 'solid-js' +import {Show, lazy} from 'solid-js' const DevtoolsOverlay = lazy(() => import('./DevtoolsOverlay')) export function Overlay() { diff --git a/examples/sandbox/src/Recursive.tsx b/examples/sandbox/src/Recursive.tsx index d221cfb5..5cebc721 100644 --- a/examples/sandbox/src/Recursive.tsx +++ b/examples/sandbox/src/Recursive.tsx @@ -1,5 +1,5 @@ -import { Component, createContext, For, mergeProps, splitProps, useContext } from 'solid-js' -import { createStore } from 'solid-js/store' +import {Component, createContext, For, mergeProps, splitProps, useContext} from 'solid-js' +import {createStore} from 'solid-js/store' type NodeType = { id: number @@ -14,7 +14,7 @@ interface genNodePathInterface { parentsPath?: Array accessKey?: string } -function genNodePath({ nodeId, parentsPath = [], accessKey = 'children' }: genNodePathInterface) { +function genNodePath({nodeId, parentsPath = [], accessKey = 'children'}: genNodePathInterface) { let path = parentsPath.concat(nodeId) let nodePath: Array = [] path.forEach(id => { @@ -77,8 +77,8 @@ const Recursive: Component = props => { { id: 0, children: [ - { id: 1, children: [{ id: 2, children: [] }] }, - { id: 3, children: [] }, + {id: 1, children: [{id: 2, children: []}]}, + {id: 3, children: []}, ], }, ]) @@ -86,8 +86,8 @@ const Recursive: Component = props => { const addNode = (nodeId: number, parentsPath: number[]) => { setData( // @ts-ignore - ...genNodePath({ nodeId, parentsPath }), - (children: any) => [...children, { id: ++id, children: [] }], + ...genNodePath({nodeId, parentsPath}), + (children: any) => [...children, {id: ++id, children: []}], ) } diff --git a/examples/sandbox/src/Theme.tsx b/examples/sandbox/src/Theme.tsx index 7874d920..bb8d612d 100644 --- a/examples/sandbox/src/Theme.tsx +++ b/examples/sandbox/src/Theme.tsx @@ -1,5 +1,5 @@ -import { Component, createContext, ParentComponent, useContext } from 'solid-js' -import { createStore } from 'solid-js/store' +import {Component, createContext, ParentComponent, useContext} from 'solid-js' +import {createStore} from 'solid-js/store' export type ThemeContextState = { readonly color: string @@ -39,7 +39,7 @@ export const ThemeProvider: ParentComponent<{ const changeTitle = (title: string) => setTheme('title', title) return ( - + {props.children} ) @@ -48,7 +48,7 @@ export const ThemeProvider: ParentComponent<{ export const useTheme = () => useContext(ThemeContext) export const ThemeExample: Component = props => { - const [theme, { changeColor }] = useTheme() + const [theme, {changeColor}] = useTheme() return ( <> diff --git a/examples/sandbox/src/Todos.tsx b/examples/sandbox/src/Todos.tsx index 19adb132..1f5c5a2f 100644 --- a/examples/sandbox/src/Todos.tsx +++ b/examples/sandbox/src/Todos.tsx @@ -8,7 +8,7 @@ import { For, Show, } from 'solid-js' -import { createStore, produce, SetStoreFunction, Store, unwrap } from 'solid-js/store' +import {createStore, produce, SetStoreFunction, Store, unwrap} from 'solid-js/store' export function createLocalStore( name: string, @@ -16,7 +16,7 @@ export function createLocalStore( ): [Store, SetStoreFunction] { const localState = localStorage.getItem(name) // const localState = undefined - const [state, setState] = createStore(localState ? JSON.parse(localState) : init, { name }) + const [state, setState] = createStore(localState ? JSON.parse(localState) : init, {name}) createEffect(() => localStorage.setItem(name, JSON.stringify(state))) return [state, setState] } @@ -25,7 +25,7 @@ export function removeIndex(array: readonly T[], index: number): T[] { return [...array.slice(0, index), ...array.slice(index + 1)] } -type TodoItem = { title: string; done: boolean } +type TodoItem = {title: string; done: boolean} const Todo: Component<{ done: boolean @@ -59,7 +59,7 @@ const Todos: Component = () => { other: { name: 'todos', get newTitle() { - return { value: newTitle() } + return {value: newTitle()} }, countOuter: { countInner: { @@ -69,7 +69,7 @@ const Todos: Component = () => { }, }) - const valuesInASignal = createMemo(() => ({ values: todos.values })) + const valuesInASignal = createMemo(() => ({values: todos.values})) // @ts-ignore setTodos('other', 'else', unwrap(todos.values)) @@ -103,7 +103,7 @@ const Todos: Component = () => { {v => { createRoot(d => { - createEffect(newTitle, undefined, { name: 'newTitle effect' }) + createEffect(newTitle, undefined, {name: 'newTitle effect'}) }) return (
@@ -120,7 +120,7 @@ const Todos: Component = () => { {(todo, i) => { - createEffect(i, undefined, { name: 'todo index' }) + createEffect(i, undefined, {name: 'todo index'}) return ( { componentLocation: true, }, }), - solid({ hot: true, dev: true }), + solid({hot: true, dev: true}), Unocss({ presets: [presetTypography()], }), diff --git a/examples/start/src/components/comment.tsx b/examples/start/src/components/comment.tsx index 7315f0b5..7d970ee8 100644 --- a/examples/start/src/components/comment.tsx +++ b/examples/start/src/components/comment.tsx @@ -1,9 +1,9 @@ -import { Component, For, Show } from 'solid-js' -import { A } from 'solid-start' -import { IComment } from '~/types' +import {Component, For, Show} from 'solid-js' +import {A} from 'solid-start' +import {IComment} from '~/types' import Toggle from './toggle' -const Comment: Component<{ comment: IComment }> = props => { +const Comment: Component<{comment: IComment}> = props => { return (
  • diff --git a/examples/start/src/components/nav.tsx b/examples/start/src/components/nav.tsx index e0544fd7..15723e84 100644 --- a/examples/start/src/components/nav.tsx +++ b/examples/start/src/components/nav.tsx @@ -1,4 +1,4 @@ -import { A } from 'solid-start' +import {A} from 'solid-start' function Nav() { return ( diff --git a/examples/start/src/components/story.tsx b/examples/start/src/components/story.tsx index b09cb041..782c4ea4 100644 --- a/examples/start/src/components/story.tsx +++ b/examples/start/src/components/story.tsx @@ -1,9 +1,9 @@ -import { Component, Show } from 'solid-js' -import { A } from 'solid-start' +import {Component, Show} from 'solid-js' +import {A} from 'solid-start' -import type { IStory } from '../types' +import type {IStory} from '../types' -const Story: Component<{ story: IStory }> = props => { +const Story: Component<{story: IStory}> = props => { return (
  • {props.story.points} diff --git a/examples/start/src/components/toggle.tsx b/examples/start/src/components/toggle.tsx index 2c79247e..918c165f 100644 --- a/examples/start/src/components/toggle.tsx +++ b/examples/start/src/components/toggle.tsx @@ -1,14 +1,14 @@ -import { createSignal } from 'solid-js' +import {createSignal} from 'solid-js' export default function Toggle(props) { const [open, setOpen] = createSignal(true) return ( <> -
    +
    setOpen(o => !o)}>{open() ? '[-]' : '[+] comments collapsed'}
    -
      +
        {props.children}
      diff --git a/examples/start/src/entry-client.tsx b/examples/start/src/entry-client.tsx index 7a5a9c06..1a025115 100644 --- a/examples/start/src/entry-client.tsx +++ b/examples/start/src/entry-client.tsx @@ -1,4 +1,4 @@ -import { mount, StartClient } from 'solid-start/entry-client' +import {mount, StartClient} from 'solid-start/entry-client' // import { attachDevtoolsOverlay } from '@solid-devtools/overlay' // attachDevtoolsOverlay({}) diff --git a/examples/start/src/entry-server.tsx b/examples/start/src/entry-server.tsx index ce37a649..9df864ec 100644 --- a/examples/start/src/entry-server.tsx +++ b/examples/start/src/entry-server.tsx @@ -1,3 +1,3 @@ -import { createHandler, renderAsync, StartServer } from 'solid-start/entry-server' +import {createHandler, renderAsync, StartServer} from 'solid-start/entry-server' export default createHandler(renderAsync(event => )) diff --git a/examples/start/src/lib/api.ts b/examples/start/src/lib/api.ts index e29467a8..2e325b5b 100644 --- a/examples/start/src/lib/api.ts +++ b/examples/start/src/lib/api.ts @@ -1,26 +1,26 @@ -import { isServer } from 'solid-js/web' +import {isServer} from 'solid-js/web' const story = (path: string) => `https://node-hnapi.herokuapp.com/${path}` const user = (path: string) => `https://hacker-news.firebaseio.com/v0/${path}.json` export default async function fetchAPI(path: string) { const url = path.startsWith('user') ? user(path) : story(path) - const headers = isServer ? { 'User-Agent': 'chrome' } : {} + const headers = isServer ? {'User-Agent': 'chrome'} : {} try { - let response = await fetch(url, { headers }) + let response = await fetch(url, {headers}) let text = await response.text() try { if (text === null) { - return { error: 'Not found' } + return {error: 'Not found'} } return JSON.parse(text) } catch (e) { console.error(`Recevied from API: ${text}`) console.error(e) - return { error: e } + return {error: e} } } catch (error) { - return { error } + return {error} } } diff --git a/examples/start/src/root.tsx b/examples/start/src/root.tsx index dde3e9eb..494499ee 100644 --- a/examples/start/src/root.tsx +++ b/examples/start/src/root.tsx @@ -1,5 +1,5 @@ // @refresh reload -import { Suspense } from 'solid-js' +import {Suspense} from 'solid-js' import { Body, ErrorBoundary, diff --git a/examples/start/src/routes/[...stories].tsx b/examples/start/src/routes/[...stories].tsx index a1b908dc..87b28583 100644 --- a/examples/start/src/routes/[...stories].tsx +++ b/examples/start/src/routes/[...stories].tsx @@ -1,8 +1,8 @@ -import { Component, createResource, For, Show } from 'solid-js' -import { A, RouteDataArgs, useRouteData } from 'solid-start' +import {Component, createResource, For, Show} from 'solid-js' +import {A, RouteDataArgs, useRouteData} from 'solid-start' import Story from '~/components/story' import fetchAPI from '~/lib/api' -import { IStory } from '~/types' +import {IStory} from '~/types' const mapStories = { top: 'news', @@ -12,7 +12,7 @@ const mapStories = { job: 'jobs', } as const -export const routeData = ({ location, params }: RouteDataArgs) => { +export const routeData = ({location, params}: RouteDataArgs) => { const page = () => +location.query.page || 1 const type = () => params.stories || 'top' @@ -21,11 +21,11 @@ export const routeData = ({ location, params }: RouteDataArgs) => { fetchAPI, ) - return { type, stories, page } + return {type, stories, page} } const Stories: Component = () => { - const { page, type, stories } = useRouteData() + const {page, type, stories} = useRouteData() return (
      diff --git a/examples/start/src/routes/stories/[id].tsx b/examples/start/src/routes/stories/[id].tsx index bd584971..860e519c 100644 --- a/examples/start/src/routes/stories/[id].tsx +++ b/examples/start/src/routes/stories/[id].tsx @@ -1,8 +1,8 @@ -import { Component, createResource, For, Show } from 'solid-js' -import { A, RouteDataArgs, useRouteData } from 'solid-start' +import {Component, createResource, For, Show} from 'solid-js' +import {A, RouteDataArgs, useRouteData} from 'solid-start' import Comment from '~/components/comment' import fetchAPI from '~/lib/api' -import { IStory } from '~/types' +import {IStory} from '~/types' export const routeData = (props: RouteDataArgs) => { const [story] = createResource(() => `item/${props.params.id}`, fetchAPI) diff --git a/examples/start/src/routes/users/[id].tsx b/examples/start/src/routes/users/[id].tsx index 6cec0298..08f769d6 100644 --- a/examples/start/src/routes/users/[id].tsx +++ b/examples/start/src/routes/users/[id].tsx @@ -1,5 +1,5 @@ -import { Component, createResource, Show } from 'solid-js' -import { RouteDataArgs, useRouteData } from 'solid-start' +import {Component, createResource, Show} from 'solid-js' +import {RouteDataArgs, useRouteData} from 'solid-start' import fetchAPI from '~/lib/api' interface IUser { diff --git a/examples/start/vite.config.ts b/examples/start/vite.config.ts index 406f8294..9318a8fc 100644 --- a/examples/start/vite.config.ts +++ b/examples/start/vite.config.ts @@ -1,6 +1,6 @@ import devtools from 'solid-devtools/vite' import solid from 'solid-start/vite' -import { defineConfig } from 'vite' +import {defineConfig} from 'vite' export default defineConfig({ plugins: [ diff --git a/examples/vite-plugin-ssr/pages/about/index.page.tsx b/examples/vite-plugin-ssr/pages/about/index.page.tsx index 00005049..0ac32ca5 100644 --- a/examples/vite-plugin-ssr/pages/about/index.page.tsx +++ b/examples/vite-plugin-ssr/pages/about/index.page.tsx @@ -1,6 +1,6 @@ -export { Page } +export {Page} -import type { Component } from 'solid-js' +import type {Component} from 'solid-js' import './code.css' const Page: Component = () => { diff --git a/examples/vite-plugin-ssr/pages/index/Counter.tsx b/examples/vite-plugin-ssr/pages/index/Counter.tsx index 6e47bd3a..7b23354a 100644 --- a/examples/vite-plugin-ssr/pages/index/Counter.tsx +++ b/examples/vite-plugin-ssr/pages/index/Counter.tsx @@ -1,6 +1,6 @@ -import { Component, createSignal } from 'solid-js' +import {Component, createSignal} from 'solid-js' -export { Counter } +export {Counter} const Counter: Component = () => { const [count, setCount] = createSignal(0) diff --git a/examples/vite-plugin-ssr/pages/index/index.page.tsx b/examples/vite-plugin-ssr/pages/index/index.page.tsx index 1f15cd82..5b08ee66 100644 --- a/examples/vite-plugin-ssr/pages/index/index.page.tsx +++ b/examples/vite-plugin-ssr/pages/index/index.page.tsx @@ -1,5 +1,5 @@ -import type { Component } from 'solid-js' -import { Counter } from './Counter' +import type {Component} from 'solid-js' +import {Counter} from './Counter' const Page: Component = () => { return ( @@ -18,4 +18,4 @@ const Page: Component = () => { ) } -export { Page } +export {Page} diff --git a/examples/vite-plugin-ssr/renderer/Link.tsx b/examples/vite-plugin-ssr/renderer/Link.tsx index f2df5c2b..bc67e5a8 100644 --- a/examples/vite-plugin-ssr/renderer/Link.tsx +++ b/examples/vite-plugin-ssr/renderer/Link.tsx @@ -1,6 +1,6 @@ -import { usePageContext } from './usePageContext' +import {usePageContext} from './usePageContext' -export function Link(props: { href: string; children: string }) { +export function Link(props: {href: string; children: string}) { const pageContext = usePageContext() const isActive = () => props.href === '/' diff --git a/examples/vite-plugin-ssr/renderer/PageLayout.tsx b/examples/vite-plugin-ssr/renderer/PageLayout.tsx index 6760632f..09557961 100644 --- a/examples/vite-plugin-ssr/renderer/PageLayout.tsx +++ b/examples/vite-plugin-ssr/renderer/PageLayout.tsx @@ -1,13 +1,13 @@ -import type { Component, JSX } from 'solid-js' -import type { Store } from 'solid-js/store' -import { Dynamic } from 'solid-js/web' -import { Link } from './Link' +import type {Component, JSX} from 'solid-js' +import type {Store} from 'solid-js/store' +import {Dynamic} from 'solid-js/web' +import {Link} from './Link' import './PageLayout.css' import logo from './logo.svg' -import type { PageContext } from './types' -import { PageContextProvider, usePageContext } from './usePageContext' +import type {PageContext} from './types' +import {PageContextProvider, usePageContext} from './usePageContext' -export { PageLayout } +export {PageLayout} interface Props { pageContext: Store diff --git a/examples/vite-plugin-ssr/renderer/_default.page.client.tsx b/examples/vite-plugin-ssr/renderer/_default.page.client.tsx index 6a2c85fb..b281f7ab 100644 --- a/examples/vite-plugin-ssr/renderer/_default.page.client.tsx +++ b/examples/vite-plugin-ssr/renderer/_default.page.client.tsx @@ -1,11 +1,11 @@ export const clientRouting = true -export { render } +export {render} -import { createStore, reconcile } from 'solid-js/store' -import { hydrate, render as render_ } from 'solid-js/web' -import type { PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient } from 'vite-plugin-ssr/types' -import { PageLayout } from './PageLayout' -import type { PageContext } from './types' +import {createStore, reconcile} from 'solid-js/store' +import {hydrate, render as render_} from 'solid-js/web' +import type {PageContextBuiltInClientWithClientRouting as PageContextBuiltInClient} from 'vite-plugin-ssr/types' +import {PageLayout} from './PageLayout' +import type {PageContext} from './types' import 'solid-devtools' @@ -46,7 +46,7 @@ async function render(pageContext: PageContextClient) { // TODO/v1-release: remove workaround since _pageFilesAll and _pageFilesLoaded aren't used by the V1 design function removeUnmergableInternals(pageContext: T): T { // Remove pageContext properties that cannot be reassigned by reconcile() - const pageContextFixed = { ...pageContext } + const pageContextFixed = {...pageContext} // @ts-ignore delete pageContextFixed._pageFilesAll // @ts-ignore diff --git a/examples/vite-plugin-ssr/renderer/_default.page.server.tsx b/examples/vite-plugin-ssr/renderer/_default.page.server.tsx index 4cb3f81c..14dad522 100644 --- a/examples/vite-plugin-ssr/renderer/_default.page.server.tsx +++ b/examples/vite-plugin-ssr/renderer/_default.page.server.tsx @@ -1,20 +1,20 @@ -import { generateHydrationScript, renderToStream } from 'solid-js/web' -import { dangerouslySkipEscape, escapeInject, stampPipe } from 'vite-plugin-ssr/server' -import { PageLayout } from './PageLayout' +import {generateHydrationScript, renderToStream} from 'solid-js/web' +import {dangerouslySkipEscape, escapeInject, stampPipe} from 'vite-plugin-ssr/server' +import {PageLayout} from './PageLayout' import logoUrl from './logo.svg' -import { PageContext } from './types' +import {PageContext} from './types' -export { passToClient, render } +export {passToClient, render} // See https://vite-plugin-ssr.com/data-fetching const passToClient = ['pageProps', 'documentProps'] function render(pageContext: PageContext) { - const { pipe } = renderToStream(() => ) + const {pipe} = renderToStream(() => ) stampPipe(pipe, 'node-stream') // See https://vite-plugin-ssr.com/head - const { documentProps } = pageContext + const {documentProps} = pageContext const title = (documentProps && documentProps.title) || 'Vite SSR app' const description = (documentProps && documentProps.description) || 'App using Vite + vite-plugin-ssr' diff --git a/examples/vite-plugin-ssr/renderer/_error.page.tsx b/examples/vite-plugin-ssr/renderer/_error.page.tsx index 2d616393..24250ca7 100644 --- a/examples/vite-plugin-ssr/renderer/_error.page.tsx +++ b/examples/vite-plugin-ssr/renderer/_error.page.tsx @@ -1,8 +1,8 @@ -export { Page } +export {Page} -import type { Component } from 'solid-js' +import type {Component} from 'solid-js' -const Page: Component<{ is404: boolean }> = ({ is404 }) => { +const Page: Component<{is404: boolean}> = ({is404}) => { if (is404) { return ( <> diff --git a/examples/vite-plugin-ssr/renderer/types.ts b/examples/vite-plugin-ssr/renderer/types.ts index 201d9893..fa2df3b4 100644 --- a/examples/vite-plugin-ssr/renderer/types.ts +++ b/examples/vite-plugin-ssr/renderer/types.ts @@ -1,5 +1,5 @@ -import { Component } from 'solid-js' -import type { PageContextBuiltIn } from 'vite-plugin-ssr/types' +import {Component} from 'solid-js' +import type {PageContextBuiltIn} from 'vite-plugin-ssr/types' export type PageProps = {} type Page = Component export type PageContext = PageContextBuiltIn & { diff --git a/examples/vite-plugin-ssr/renderer/usePageContext.tsx b/examples/vite-plugin-ssr/renderer/usePageContext.tsx index 6665cadd..2d94ae0e 100644 --- a/examples/vite-plugin-ssr/renderer/usePageContext.tsx +++ b/examples/vite-plugin-ssr/renderer/usePageContext.tsx @@ -1,12 +1,12 @@ -export { PageContextProvider, usePageContext } +export {PageContextProvider, usePageContext} -import { createContext, useContext, type JSX } from 'solid-js' -import { type Store } from 'solid-js/store' -import type { PageContext } from './types' +import {createContext, useContext, type JSX} from 'solid-js' +import {type Store} from 'solid-js/store' +import type {PageContext} from './types' const Context = createContext>() -function PageContextProvider(props: { pageContext: Store; children: JSX.Element }) { +function PageContextProvider(props: {pageContext: Store; children: JSX.Element}) { if (!props.pageContext) throw new Error('Argument pageContext missing') return {props.children} } diff --git a/examples/vite-plugin-ssr/vite.config.ts b/examples/vite-plugin-ssr/vite.config.ts index 0fb0ea81..a8d4b8ee 100644 --- a/examples/vite-plugin-ssr/vite.config.ts +++ b/examples/vite-plugin-ssr/vite.config.ts @@ -1,15 +1,15 @@ import devtools from 'solid-devtools/vite' -import { defineConfig } from 'vite' +import {defineConfig} from 'vite' +import inspect from 'vite-plugin-inspect' import solid from 'vite-plugin-solid' import ssr from 'vite-plugin-ssr/plugin' -import inspect from 'vite-plugin-inspect' export default defineConfig({ plugins: [ devtools({ autoname: true, }), - solid({ ssr: true }), + solid({ssr: true}), ssr(), inspect(), ], diff --git a/package.json b/package.json index 60ced842..2dbe67e6 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "----------------------TEST----------------------": "", "test:unit": "turbo run test --filter=./packages/*", "test:types": "turbo run test:types --filter=./packages/*", - "test:lint": "eslint --ignore-path .gitignore --max-warnings 0 packages/**/*.{js,ts,tsx,jsx} --rule \"@typescript-eslint/no-unnecessary-type-assertion: off\"", + "test:lint": "eslint --ignore-path .gitignore --max-warnings 0 packages/**/*.{js,ts,tsx,jsx}", "test:e2e": "cross-env PW_CHROMIUM_ATTACH_TO_OTHER=1 playwright test -c e2e/playwright.config.ts", "----------------------UTILS----------------------": "", "build-test:packages": "turbo run build test:unit test:types --filter=./packages/*", @@ -29,6 +29,7 @@ }, "devDependencies": { "@changesets/cli": "^2.26.2", + "@nothing-but/eslint-plugin": "^0.1.3", "@playwright/test": "^1.39.0", "@solid-devtools/theme": "file:packages/theme", "@total-typescript/ts-reset": "^0.5.1", diff --git a/packages/debugger/src/dependency/collect.ts b/packages/debugger/src/dependency/collect.ts index e43e0bc5..373f99f5 100644 --- a/packages/debugger/src/dependency/collect.ts +++ b/packages/debugger/src/dependency/collect.ts @@ -1,13 +1,13 @@ -import { getSdtId, ObjectType } from '../main/id' +import {getSdtId, ObjectType} from '../main/id' import { observeComputationUpdate, observeValueUpdate, removeComputationUpdateObserver, removeValueUpdateObserver, } from '../main/observe' -import { NodeID, Solid } from '../main/types' -import { getNodeName, getNodeType, getOwnerType, isSolidOwner } from '../main/utils' -import { NodeType } from '../types' +import {NodeID, Solid} from '../main/types' +import {getNodeName, getNodeType, getOwnerType, isSolidOwner} from '../main/utils' +import {NodeType} from '../types' export namespace SerializedDGraph { export type Node = { @@ -123,7 +123,7 @@ function lookupDepth(node: Solid.Owner | Solid.Signal): number { export function collectDependencyGraph( node: Solid.Computation | Solid.Memo | Solid.Signal, - config: { onNodeUpdate: OnNodeUpdate }, + config: {onNodeUpdate: OnNodeUpdate}, ): { graph: SerializedDGraph.Graph clearListeners: VoidFunction @@ -147,5 +147,5 @@ export function collectDependencyGraph( Graph = VisitedObservers = VisitedSources = DepthMap = OnNodeUpdate = undefined! - return { graph, clearListeners } + return {graph, clearListeners} } diff --git a/packages/debugger/src/dependency/index.ts b/packages/debugger/src/dependency/index.ts index 30a428b9..26ab3047 100644 --- a/packages/debugger/src/dependency/index.ts +++ b/packages/debugger/src/dependency/index.ts @@ -1,15 +1,15 @@ -import { EmitterEmit, Listen } from '@solid-primitives/event-bus' -import { throttle } from '@solid-primitives/scheduled' -import { defer } from '@solid-primitives/utils' -import { Accessor, createEffect, createMemo } from 'solid-js' -import type { Debugger } from '../main' -import { DevtoolsMainView, NodeType } from '../main/constants' -import { ObjectType, getObjectById } from '../main/id' -import { NodeID, Solid } from '../main/types' -import { getNodeType } from '../main/utils' -import { OnNodeUpdate, SerializedDGraph, collectDependencyGraph } from './collect' +import {EmitterEmit, Listen} from '@solid-primitives/event-bus' +import {throttle} from '@solid-primitives/scheduled' +import {defer} from '@solid-primitives/utils' +import {Accessor, createEffect, createMemo} from 'solid-js' +import type {Debugger} from '../main' +import {DevtoolsMainView, NodeType} from '../main/constants' +import {ObjectType, getObjectById} from '../main/id' +import {NodeID, Solid} from '../main/types' +import {getNodeType} from '../main/utils' +import {OnNodeUpdate, SerializedDGraph, collectDependencyGraph} from './collect' -export { SerializedDGraph } from './collect' +export {SerializedDGraph} from './collect' export type DGraphUpdate = SerializedDGraph.Graph | null diff --git a/packages/debugger/src/dependency/test/collect.test.ts b/packages/debugger/src/dependency/test/collect.test.ts index 8a72bd94..9579b5a4 100644 --- a/packages/debugger/src/dependency/test/collect.test.ts +++ b/packages/debugger/src/dependency/test/collect.test.ts @@ -1,38 +1,38 @@ -import { batch, createComputed, createMemo, createRoot, createSignal } from 'solid-js' -import { beforeEach, describe, expect, it, vi } from 'vitest' -import { NodeType } from '../../main/constants' -import { ObjectType, getSdtId } from '../../main/id' +import {batch, createComputed, createMemo, createRoot, createSignal} from 'solid-js' +import {beforeEach, describe, expect, it, vi} from 'vitest' +import {NodeType} from '../../main/constants' +import {ObjectType, getSdtId} from '../../main/id' import SolidApi from '../../main/solid-api' -import type { NodeID, Solid } from '../../main/types' -import { SerializedDGraph, collectDependencyGraph } from '../collect' +import type {NodeID, Solid} from '../../main/types' +import {SerializedDGraph, collectDependencyGraph} from '../collect' -const { getOwner } = SolidApi +const {getOwner} = SolidApi let mockLAST_ID = 0 beforeEach(() => { mockLAST_ID = 0 }) -vi.mock('../../main/get-id', () => ({ getNewSdtId: () => '#' + mockLAST_ID++ })) +vi.mock('../../main/get-id', () => ({getNewSdtId: () => '#' + mockLAST_ID++})) describe('collectDependencyGraph', () => { it('should collect dependency graph', () => { let rootOwner!: Solid.Root let subRootOwner!: Solid.Root - const [e] = createSignal(0, { name: 's-e' }) + const [e] = createSignal(0, {name: 's-e'}) createRoot(() => { - const [a] = createSignal(0, { name: 's-a' }) - const [b] = createSignal(0, { name: 's-b' }) - const [c] = createSignal(0, { name: 's-c' }) + const [a] = createSignal(0, {name: 's-a'}) + const [b] = createSignal(0, {name: 's-b'}) + const [c] = createSignal(0, {name: 's-c'}) - const memoA = createMemo(() => a() + e(), null, { name: 'm-a' }) + const memoA = createMemo(() => a() + e(), null, {name: 'm-a'}) rootOwner = getOwner()! as Solid.Root createRoot(_ => { - const [d] = createSignal(0, { name: 's-d' }) - const memoB = createMemo(() => b() + c(), null, { name: 'm-b' }) + const [d] = createSignal(0, {name: 's-d'}) + const memoB = createMemo(() => b() + c(), null, {name: 'm-b'}) subRootOwner = getOwner()! as Solid.Root @@ -44,7 +44,7 @@ describe('collectDependencyGraph', () => { d() }, null, - { name: 'c' }, + {name: 'c'}, ) }) }) @@ -75,7 +75,11 @@ describe('collectDependencyGraph', () => { } })() - let result = collectDependencyGraph(nodes.computed, { onNodeUpdate: () => {} }) + let result = collectDependencyGraph(nodes.computed, { + onNodeUpdate: () => { + /**/ + }, + }) expect(result.graph, 'graph of computedOwner').toEqual({ [nodes.computedId]: { @@ -148,7 +152,11 @@ describe('collectDependencyGraph', () => { JSON.parse(JSON.stringify(result.graph)) as any, ) - result = collectDependencyGraph(nodes.memoA, { onNodeUpdate: () => {} }) + result = collectDependencyGraph(nodes.memoA, { + onNodeUpdate: () => { + /**/ + }, + }) expect(result.graph).toEqual({ [nodes.computedId]: { @@ -195,12 +203,12 @@ describe('collectDependencyGraph', () => { const cb = vi.fn(a => captured.push(a)) createRoot(() => { - const [a, setA] = createSignal(0, { name: 's-a' }) - const [b, setB] = createSignal(0, { name: 's-b' }) - const [c, setC] = createSignal(0, { name: 's-c' }) - const [d, setD] = createSignal(0, { name: 's-d' }) + const [a, setA] = createSignal(0, {name: 's-a'}) + const [b, setB] = createSignal(0, {name: 's-b'}) + const [c, setC] = createSignal(0, {name: 's-c'}) + const [d, setD] = createSignal(0, {name: 's-d'}) - const mA = createMemo(() => a() + b(), undefined, { name: 'm-a' }) + const mA = createMemo(() => a() + b(), undefined, {name: 'm-a'}) createComputed( () => { @@ -208,7 +216,7 @@ describe('collectDependencyGraph', () => { d() }, undefined, - { name: 'c-a' }, + {name: 'c-a'}, ) createComputed( @@ -217,7 +225,7 @@ describe('collectDependencyGraph', () => { c() }, undefined, - { name: 'c-b' }, + {name: 'c-b'}, ) const nodes = (() => { @@ -246,7 +254,7 @@ describe('collectDependencyGraph', () => { } })() - const result = collectDependencyGraph(nodes.computedB, { onNodeUpdate: cb }) + const result = collectDependencyGraph(nodes.computedB, {onNodeUpdate: cb}) expect(result.graph).toEqual({ [nodes.computedBId]: { diff --git a/packages/debugger/src/index.ts b/packages/debugger/src/index.ts index b42bb1e6..17798af1 100644 --- a/packages/debugger/src/index.ts +++ b/packages/debugger/src/index.ts @@ -1,4 +1,4 @@ -export { useDebugger, useLocator } from './main' +export {useDebugger, useLocator} from './main' export { addSolidUpdateListener, interceptComputationRerun, @@ -6,7 +6,7 @@ export { observeValueUpdate, removeValueUpdateObserver, } from './main/observe' -export { attachDebugger, createInternalRoot, unobserveAllRoots } from './main/roots' +export {attachDebugger, createInternalRoot, unobserveAllRoots} from './main/roots' export { getNodeName, getNodeType, diff --git a/packages/debugger/src/inspector/index.ts b/packages/debugger/src/inspector/index.ts index 27466cdc..79f63c1f 100644 --- a/packages/debugger/src/inspector/index.ts +++ b/packages/debugger/src/inspector/index.ts @@ -1,25 +1,20 @@ -import { warn } from '@solid-devtools/shared/utils' -import { EmitterEmit } from '@solid-primitives/event-bus' -import { scheduleIdle, throttle } from '@solid-primitives/scheduled' -import { Accessor, createEffect, onCleanup } from 'solid-js' -import type { Debugger } from '../main' -import { ObjectType, getObjectById } from '../main/id' -import { addSolidUpdateListener } from '../main/observe' -import { Mapped, NodeID, Solid, ValueItemID } from '../main/types' -import { onOwnerDispose } from '../main/utils' -import { - ObservedPropsMap, - ValueNodeMap, - clearOwnerObservers, - collectOwnerDetails, -} from './inspector' -import { encodeValue } from './serialize' -import { StoreNodeProperty, StoreUpdateData, observeStoreNode, setOnStoreNodeUpdate } from './store' -import { InspectorUpdate, InspectorUpdateMap, PropGetterState } from './types' +import {warn} from '@solid-devtools/shared/utils' +import {EmitterEmit} from '@solid-primitives/event-bus' +import {scheduleIdle, throttle} from '@solid-primitives/scheduled' +import {Accessor, createEffect, onCleanup} from 'solid-js' +import type {Debugger} from '../main' +import {ObjectType, getObjectById} from '../main/id' +import {addSolidUpdateListener} from '../main/observe' +import {Mapped, NodeID, Solid, ValueItemID} from '../main/types' +import {onOwnerDispose} from '../main/utils' +import {ObservedPropsMap, ValueNodeMap, clearOwnerObservers, collectOwnerDetails} from './inspector' +import {encodeValue} from './serialize' +import {StoreNodeProperty, StoreUpdateData, observeStoreNode, setOnStoreNodeUpdate} from './store' +import {InspectorUpdate, InspectorUpdateMap, PropGetterState} from './types' export * from './types' -export type ToggleInspectedValueData = { id: ValueItemID; selected: boolean } +export type ToggleInspectedValueData = {id: ValueItemID; selected: boolean} /** * Plugin module @@ -39,7 +34,7 @@ export function createInspector(props: { // Batch and dedupe inspector updates // these will include updates to signals, stores, props, and node value - const { pushPropState, pushValueUpdate, pushInspectToggle, triggerPropsCheck, clearUpdates } = + const {pushPropState, pushValueUpdate, pushInspectToggle, triggerPropsCheck, clearUpdates} = (() => { const valueUpdates = new Map() let storeUpdates: [storeProperty: StoreNodeProperty, data: StoreUpdateData][] = [] @@ -184,7 +179,7 @@ export function createInspector(props: { return { getLastDetails: () => lastDetails, - toggleValueNode({ id, selected }: ToggleInspectedValueData): void { + toggleValueNode({id, selected}: ToggleInspectedValueData): void { const node = valueMap.get(id) if (!node) return warn('Could not find value node:', id) node.setSelected(selected) diff --git a/packages/debugger/src/inspector/inspector.ts b/packages/debugger/src/inspector/inspector.ts index 54e239e1..5cbfce58 100644 --- a/packages/debugger/src/inspector/inspector.ts +++ b/packages/debugger/src/inspector/inspector.ts @@ -1,11 +1,11 @@ -import { misc } from '@nothing-but/utils' -import { untrackedCallback } from '@solid-devtools/shared/primitives' -import { parseLocationString } from '../locator' -import { NodeType, ValueItemType } from '../main/constants' -import { ObjectType, getSdtId } from '../main/id' -import { observeValueUpdate, removeValueUpdateObserver } from '../main/observe' +import {misc} from '@nothing-but/utils' +import {untrackedCallback} from '@solid-devtools/shared/primitives' +import {parseLocationString} from '../locator' +import {NodeType, ValueItemType} from '../main/constants' +import {ObjectType, getSdtId} from '../main/id' +import {observeValueUpdate, removeValueUpdateObserver} from '../main/observe' import SolidAPI from '../main/solid-api' -import type { Mapped, NodeID, Solid, ValueItemID } from '../main/types' +import type {Mapped, NodeID, Solid, ValueItemID} from '../main/types' import { getComponentRefreshNode, getNodeName, @@ -16,8 +16,8 @@ import { isSolidStore, markOwnerType, } from '../main/utils' -import { encodeValue } from './serialize' -import { InspectorUpdateMap, PropGetterState } from './types' +import {encodeValue} from './serialize' +import {InspectorUpdateMap, PropGetterState} from './types' export class ValueNode { private trackedStores: VoidFunction[] = [] @@ -75,7 +75,7 @@ export class ObservedProps { private onPropStateChange?: Inspector.OnPropStateChange | undefined private onValueUpdate?: Inspector.OnValueUpdate | undefined - private observedGetters = {} as Record + private observedGetters = {} as Record observe( onPropStateChange: Inspector.OnPropStateChange, @@ -93,10 +93,10 @@ export class ObservedProps { key: string, id: ValueItemID, get: () => unknown, - ): { getValue: () => unknown | typeof $NOT_SET; isStale: boolean } { + ): {getValue: () => unknown | typeof $NOT_SET; isStale: boolean} { if (this.observedGetters[key]) { const o = this.observedGetters[key]! - return { getValue: () => o.v, isStale: o.n === 0 } + return {getValue: () => o.v, isStale: o.n === 0} } const self = this @@ -122,7 +122,7 @@ export class ObservedProps { enumerable: true, }) - return { getValue: () => o.v, isStale: true } + return {getValue: () => o.v, isStale: true} } } @@ -141,7 +141,7 @@ const compareProxyPropKeys = ( } } if (!changed && !added.size) return null - return { added: Array.from(added), removed } + return {added: Array.from(added), removed} } /** @@ -187,14 +187,14 @@ function mapSourceValue( const type = isMemo ? NodeType.Memo : isSolidStore(node) - ? NodeType.Store - : isSolidSignal(node) - ? NodeType.Signal - : null + ? NodeType.Store + : isSolidSignal(node) + ? NodeType.Signal + : null if (!type) return null - const { value } = node, + const {value} = node, id = getSdtId(node, typeToObjectTypeMap[type]) ValueMap.add(`${ValueItemType.Signal}:${id}`, () => node.value) @@ -220,7 +220,7 @@ function mapProps(props: Solid.Component['props']) { if (isProxy) { let propsKeys = Object.keys(props) - for (const key of propsKeys) record[key] = { getter: PropGetterState.Stale, value: null } + for (const key of propsKeys) record[key] = {getter: PropGetterState.Stale, value: null} checkProxyProps = () => { const _oldKeys = propsKeys @@ -238,7 +238,7 @@ function mapProps(props: Solid.Component['props']) { const id: ValueItemID = `prop:${key}` // GETTER if (desc.get) { - const { getValue, isStale } = observed.observeProp(key, id, desc.get) + const {getValue, isStale} = observed.observeProp(key, id, desc.get) ValueMap.add(id, getValue) const lastValue = getValue() record[key] = { @@ -259,7 +259,7 @@ function mapProps(props: Solid.Component['props']) { } } - return { props: { proxy: isProxy, record }, checkProxyProps } + return {props: {proxy: isProxy, record}, checkProxyProps} } export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function ( @@ -270,7 +270,7 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function ( observedPropsMap: ObservedPropsMap }, ) { - const { onValueUpdate } = config + const {onValueUpdate} = config // Set globals ValueMap = new ValueNodeMap() @@ -280,10 +280,10 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function ( const id = getSdtId(owner, ObjectType.Owner) const type = markOwnerType(owner) - let { sourceMap, owned } = owner + let {sourceMap, owned} = owner let getValue = () => owner.value - const details = { id, name: getNodeName(owner), type, signals: [] } as Mapped.OwnerDetails + const details = {id, name: getNodeName(owner), type, signals: []} as Mapped.OwnerDetails // handle context node specially if (type === NodeType.Context) { @@ -311,7 +311,7 @@ export const collectOwnerDetails = /*#__PURE__*/ untrackedCallback(function ( getValue = () => refresh.value } - ;({ checkProxyProps, props: details.props } = mapProps(owner.props)) + ;({checkProxyProps, props: details.props} = mapProps(owner.props)) let location = (owner.component as any).location if ( diff --git a/packages/debugger/src/inspector/serialize.ts b/packages/debugger/src/inspector/serialize.ts index 4962005f..a7d5412d 100644 --- a/packages/debugger/src/inspector/serialize.ts +++ b/packages/debugger/src/inspector/serialize.ts @@ -1,7 +1,7 @@ -import { FalsyValue } from '@solid-primitives/utils' -import { getSdtId, ObjectType } from '../main/id' +import {FalsyValue} from '@solid-primitives/utils' +import {getSdtId, ObjectType} from '../main/id' import SolidAPI from '../main/solid-api' -import { isStoreNode } from '../main/utils' +import {isStoreNode} from '../main/utils' import { EncodedValue, INFINITY, diff --git a/packages/debugger/src/inspector/store.ts b/packages/debugger/src/inspector/store.ts index 2bb6807d..963c792b 100644 --- a/packages/debugger/src/inspector/store.ts +++ b/packages/debugger/src/inspector/store.ts @@ -1,8 +1,8 @@ -import { getSdtId, ObjectType } from '../main/id' +import {getSdtId, ObjectType} from '../main/id' import SolidAPI from '../main/solid-api' -import type { NodeID, Solid } from '../types' +import type {NodeID, Solid} from '../types' -const { isWrappable } = SolidAPI.STORE_DEV +const {isWrappable} = SolidAPI.STORE_DEV export type StoreNodeProperty = `${NodeID}:${string}` /** @@ -10,7 +10,7 @@ export type StoreNodeProperty = `${NodeID}:${string}` * - `{ value: unknown }` - property updated/added; * - `number` - array length updated; */ -export type StoreUpdateData = { value: unknown } | number | undefined +export type StoreUpdateData = {value: unknown} | number | undefined type ParentProperty = StoreNodeProperty | symbol /** @@ -46,7 +46,7 @@ SolidAPI.STORE_DEV.hooks.onStoreNodeUpdate = (node, property, value, prev) => } // Update/Set property else { - OnNodeUpdate(storeProperty, { value }) + OnNodeUpdate(storeProperty, {value}) isWrappable(value) && trackStore(value, storeProperty) } }) @@ -92,7 +92,7 @@ function forEachStoreProp( } } else { for (const key in node) { - const { value, get } = Object.getOwnPropertyDescriptor(node, key)! + const {value, get} = Object.getOwnPropertyDescriptor(node, key)! if (!get && isWrappable(value)) fn(key, value) } } diff --git a/packages/debugger/src/inspector/test/index.test.tsx b/packages/debugger/src/inspector/test/index.test.tsx index fe36915d..b569654e 100644 --- a/packages/debugger/src/inspector/test/index.test.tsx +++ b/packages/debugger/src/inspector/test/index.test.tsx @@ -6,24 +6,24 @@ import { createSignal, JSX, } from 'solid-js' -import { beforeEach, describe, expect, it, vi } from 'vitest' -import { getObjectById, getSdtId, ObjectType } from '../../main/id' +import {beforeEach, describe, expect, it, vi} from 'vitest' +import {getObjectById, getSdtId, ObjectType} from '../../main/id' import SolidApi from '../../main/solid-api' -import { Mapped, NodeType, PropGetterState, Solid, ValueType } from '../../types' -import { collectOwnerDetails } from '../inspector' +import {Mapped, NodeType, PropGetterState, Solid, ValueType} from '../../types' +import {collectOwnerDetails} from '../inspector' -const { getOwner } = SolidApi +const {getOwner} = SolidApi let mockLAST_ID = 0 beforeEach(() => { mockLAST_ID = 0 }) -vi.mock('../../main/get-id', () => ({ getNewSdtId: () => '#' + mockLAST_ID++ })) +vi.mock('../../main/get-id', () => ({getNewSdtId: () => '#' + mockLAST_ID++})) describe('collectOwnerDetails', () => { it('collects focused owner details', () => { createRoot(dispose => { - const [s] = createSignal(0, { name: 'source' }) + const [s] = createSignal(0, {name: 'source'}) let memo!: Solid.Owner const div = document.createElement('div') @@ -34,27 +34,31 @@ describe('collectOwnerDetails', () => { () => { memo = getOwner()! s() - createSignal(div, { name: 'element' }) - const m = createMemo(() => 0, undefined, { name: 'memo' }) - createRenderEffect(m, undefined, { name: 'render' }) + createSignal(div, {name: 'element'}) + const m = createMemo(() => 0, undefined, {name: 'memo'}) + createRenderEffect(m, undefined, {name: 'render'}) return 'value' }, undefined, - { name: 'focused' }, + {name: 'focused'}, ) focused() }, undefined, - { name: 'WRAPPER' }, + {name: 'WRAPPER'}, ) const [signalB] = memo.sourceMap as [Solid.Signal] const [innerMemo] = memo.owned as [Solid.Memo, Solid.Computation] - const { details, valueMap } = collectOwnerDetails(memo, { + const {details, valueMap} = collectOwnerDetails(memo, { observedPropsMap: new WeakMap(), - onPropStateChange: () => {}, - onValueUpdate: () => {}, + onPropStateChange: () => { + /**/ + }, + onValueUpdate: () => { + /**/ + }, }) expect(details).toEqual({ @@ -93,21 +97,25 @@ describe('collectOwnerDetails', () => { const TestComponent = (props: { count: number children: JSX.Element - nested: { foo: number; bar: string } + nested: {foo: number; bar: string} }) => { owner = getOwner()! return
      {props.children}
      } createRenderEffect(() => ( - + )) - const { details } = collectOwnerDetails(owner, { + const {details} = collectOwnerDetails(owner, { observedPropsMap: new WeakMap(), - onPropStateChange: () => {}, - onValueUpdate: () => {}, + onPropStateChange: () => { + /**/ + }, + onValueUpdate: () => { + /**/ + }, }) dispose() @@ -149,14 +157,24 @@ describe('collectOwnerDetails', () => { return } createRenderEffect(() => { - const props = () => ({ onClick: () => {}, role: 'button' }) as const + const props = () => + ({ + onClick: () => { + /**/ + }, + role: 'button', + }) as const return ) }} - +
      )} @@ -358,7 +352,7 @@ export const ValueNode: Component<{ {/* provide context if one isn't already provided or if the value is a store (so that the ctx.underStore could be overwritten) */} - } @@ -73,7 +73,7 @@ export function getNodePath(node: Structure.Node): Structure.Node[] { export default function createStructure() { const ctx = useController() - const { inspector, bridge } = ctx + const {inspector, bridge} = ctx const cachedInitialState = ctx.viewCache.get(DevtoolsMainView.Structure) const [mode, setMode] = createSignal( @@ -89,11 +89,11 @@ export default function createStructure() { } const [state, setState] = createSignal( - cachedInitialState.short || { nodeList: [], roots: [] }, + cachedInitialState.short || {nodeList: [], roots: []}, ) ctx.viewCache.set(DevtoolsMainView.Structure, () => ({ short: state(), - long: { mode: mode() }, + long: {mode: mode()}, })) const inspectedNode = createMemo(() => { @@ -103,7 +103,7 @@ export default function createStructure() { function updateStructure(update: StructureUpdates | null): void { setState(prev => - update ? reconcileStructure(prev.roots, update) : { nodeList: [], roots: [] }, + update ? reconcileStructure(prev.roots, update) : {nodeList: [], roots: []}, ) } diff --git a/packages/frontend/src/modules/structure/owner-node.tsx b/packages/frontend/src/modules/structure/owner-node.tsx index 02fdbbfa..822add64 100644 --- a/packages/frontend/src/modules/structure/owner-node.tsx +++ b/packages/frontend/src/modules/structure/owner-node.tsx @@ -1,7 +1,7 @@ -import { Badge, CollapseToggle, createHighlightedOwnerName, theme } from '@/ui' -import { createHover } from '@solid-devtools/shared/primitives' -import { Component } from 'solid-js' -import type { Structure } from '.' +import {Badge, CollapseToggle, createHighlightedOwnerName, theme} from '@/ui' +import {createHover} from '@solid-devtools/shared/primitives' +import {Component} from 'solid-js' +import type {Structure} from '.' import { background_gradient, padding_mask, @@ -20,12 +20,12 @@ export const OwnerNode: Component<{ listenToUpdate(cb: VoidFunction): VoidFunction toggleCollapsed(node: Structure.Node): void }> = props => { - const { onHoverChange, listenToUpdate, onInspectChange } = props - const { name, type, hmr } = props.owner + const {onHoverChange, listenToUpdate, onInspectChange} = props + const {name, type, hmr} = props.owner - const { toggleCollapsed } = props + const {toggleCollapsed} = props - const { pingUpdated, OwnerName } = createHighlightedOwnerName() + const {pingUpdated, OwnerName} = createHighlightedOwnerName() listenToUpdate(pingUpdated) const hoverProps = createHover(onHoverChange) diff --git a/packages/frontend/src/modules/structure/owner-path.tsx b/packages/frontend/src/modules/structure/owner-path.tsx index 7b3f5acc..8f7854ea 100644 --- a/packages/frontend/src/modules/structure/owner-path.tsx +++ b/packages/frontend/src/modules/structure/owner-path.tsx @@ -1,22 +1,22 @@ -import { useController } from '@/controller' -import { Icon, styles, theme } from '@/ui' -import { Node_Type_Icon } from '@/ui/components/owner-name' -import { NodeType, UNKNOWN } from '@solid-devtools/debugger/types' -import { createHover } from '@solid-devtools/shared/primitives' -import { createElementSize } from '@solid-primitives/resize-observer' -import { useRemSize } from '@solid-primitives/styles' -import { Component, createMemo } from 'solid-js' -import { useStructure } from './structure-tree' -import { path_height_class, path_height_in_rem, path_min_height_class } from './styles' +import {useController} from '@/controller' +import {Icon, styles, theme} from '@/ui' +import {Node_Type_Icon} from '@/ui/components/owner-name' +import {NodeType, UNKNOWN} from '@solid-devtools/debugger/types' +import {createHover} from '@solid-devtools/shared/primitives' +import {createElementSize} from '@solid-primitives/resize-observer' +import {useRemSize} from '@solid-primitives/styles' +import {Component, createMemo} from 'solid-js' +import {useStructure} from './structure-tree' +import {path_height_class, path_height_in_rem, path_min_height_class} from './styles' export const OwnerPath: Component = () => { - const { inspector, hovered } = useController() + const {inspector, hovered} = useController() const structure = useStructure() let container!: HTMLDivElement const rem = useRemSize() const containerSize = createElementSize(() => container) - const expandable = () => (containerSize.height ?? 0) > rem() * path_height_in_rem + const expandable = (): boolean => (containerSize.height ?? 0) > rem() * path_height_in_rem const path = createMemo(() => { const node = structure.inspectedNode() diff --git a/packages/frontend/src/modules/structure/reconcile.ts b/packages/frontend/src/modules/structure/reconcile.ts index ba8b6b85..96d3a0a9 100644 --- a/packages/frontend/src/modules/structure/reconcile.ts +++ b/packages/frontend/src/modules/structure/reconcile.ts @@ -1,6 +1,6 @@ -import { Mapped, NodeID, NodeType, StructureUpdates } from '@solid-devtools/debugger/types' -import { entries } from '@solid-primitives/utils' -import type { Structure } from '.' +import {Mapped, NodeID, NodeType, StructureUpdates} from '@solid-devtools/debugger/types' +import {entries} from '@solid-primitives/utils' +import type {Structure} from '.' let Updated: StructureUpdates['updated'] let NewNodeList: Structure.Node[] @@ -10,10 +10,10 @@ function createNode( parent: Structure.Node | null, level: number, ): Structure.Node { - const { id, name, type, children: rawChildren } = raw + const {id, name, type, children: rawChildren} = raw const children: Structure.Node[] = [] - const node: Structure.Node = { id, type, children, parent, level } + const node: Structure.Node = {id, type, children, parent, level} if (name) node.name = name if (type === NodeType.Component && raw.hmr) node.hmr = raw.hmr @@ -33,7 +33,7 @@ function updateNode( raw: Mapped.Owner | undefined, level: number, ): Structure.Node { - const { id, children } = node + const {id, children} = node NewNodeList.push(node) node.level = level @@ -43,7 +43,7 @@ function updateNode( // update frozen computations if ('frozen' in raw && raw.frozen) node.frozen = true - const { children: rawChildren } = raw + const {children: rawChildren} = raw const newChildren: Structure.Node[] = (node.children = []) if (rawChildren.length) { @@ -70,7 +70,7 @@ function updateNode( function reconcileStructure( prevRoots: Structure.Node[], - { removed, updated, partial }: StructureUpdates, + {removed, updated, partial}: StructureUpdates, ): Structure.State { Updated = updated NewNodeList = [] @@ -78,7 +78,7 @@ function reconcileStructure( const upatedTopLevelRoots = new Set() for (const root of prevRoots) { - const { id } = root + const {id} = root // skip removed roots for partial updates // and for full updates skip roots that were not sent if (partial ? removed.includes(id) : !(id in Updated)) continue @@ -92,7 +92,7 @@ function reconcileStructure( nextRoots.push(createNode(root, null, 0)) } - return { roots: nextRoots, nodeList: NewNodeList } + return {roots: nextRoots, nodeList: NewNodeList} } -export { reconcileStructure } +export {reconcileStructure} diff --git a/packages/frontend/src/modules/structure/structure-tree.tsx b/packages/frontend/src/modules/structure/structure-tree.tsx index 767696db..874d822c 100644 --- a/packages/frontend/src/modules/structure/structure-tree.tsx +++ b/packages/frontend/src/modules/structure/structure-tree.tsx @@ -1,39 +1,31 @@ -import { hover_background, panel_header_el_border } from '@/SidePanel' -import { useController, useDevtoolsOptions } from '@/controller' -import { Icon, Scrollable, ToggleButton, ToggleTabs, theme } from '@/ui' -import { toggle_tab_color_var } from '@/ui/components/toggle-tabs' -import { NodeID, NodeType, TreeWalkerMode } from '@solid-devtools/debugger/types' -import { Atom, atom } from '@solid-devtools/shared/primitives' -import { makeEventListener } from '@solid-primitives/event-listener' -import { createShortcut } from '@solid-primitives/keyboard' -import { createResizeObserver } from '@solid-primitives/resize-observer' -import { useRemSize } from '@solid-primitives/styles' -import { defer } from '@solid-primitives/utils' -import { - Component, - For, - createContext, - createEffect, - createMemo, - createSignal, - useContext, -} from 'solid-js' -import type { Structure } from '.' +import {hover_background, panel_header_el_border} from '@/SidePanel' +import {useController, useDevtoolsOptions} from '@/controller' +import {Icon, Scrollable, ToggleButton, ToggleTabs, theme} from '@/ui' +import {toggle_tab_color_var} from '@/ui/components/toggle-tabs' +import {NodeID, NodeType, TreeWalkerMode} from '@solid-devtools/debugger/types' +import {Atom, atom} from '@solid-devtools/shared/primitives' +import {makeEventListener} from '@solid-primitives/event-listener' +import {createShortcut} from '@solid-primitives/keyboard' +import {createResizeObserver} from '@solid-primitives/resize-observer' +import {useRemSize} from '@solid-primitives/styles' +import {defer} from '@solid-primitives/utils' +import * as s from 'solid-js' +import type {Structure} from '.' import createStructure from '.' -import { OwnerNode } from './owner-node' -import { OwnerPath } from './owner-path' -import { path_height, row_height, row_height_in_rem, row_padding, v_margin_in_rem } from './styles' -import { getVirtualVars } from './virtual' +import {OwnerNode} from './owner-node' +import {OwnerPath} from './owner-path' +import {path_height, row_height, row_height_in_rem, row_padding, v_margin_in_rem} from './styles' +import {getVirtualVars} from './virtual' -const StructureContext = createContext() +const StructureContext = s.createContext() -export function useStructure() { - const ctx = useContext(StructureContext) +export function useStructure(): Structure.Module { + const ctx = s.useContext(StructureContext) if (!ctx) throw new Error('Structure context not found') return ctx } -export default function StructureView() { +export default function StructureView(): s.JSXElement { const structure = createStructure() return ( @@ -58,8 +50,8 @@ export default function StructureView() { ) } -const LocatorButton: Component = () => { - const { locator } = useController() +const LocatorButton: s.Component = () => { + const {locator} = useController() return ( { ) } -const Search: Component = () => { +const Search: s.Component = () => { const options = useDevtoolsOptions() const structure = useStructure() - const [value, setValue] = createSignal('') + const [value, setValue] = s.createSignal('') - const handleChange = (v: string) => { + const handleChange = (v: string): void => { setValue(v) structure.search('') } @@ -138,7 +130,7 @@ const Search: Component = () => { ) } -const ToggleMode: Component = () => { +const ToggleMode: s.Component = () => { const structure = useStructure() const tabsContentMap: Readonly> = { @@ -165,8 +157,8 @@ const ToggleMode: Component = () => { mode === TreeWalkerMode.Owners ? theme.vars.text.DEFAULT : mode === TreeWalkerMode.DOM - ? theme.vars.dom - : theme.vars.component, + ? theme.vars.dom + : theme.vars.component, }} >
      { - const [containerScroll, setContainerScroll] = createSignal({ top: 0, height: 0 }) +const DisplayStructureTree: s.Component = () => { + const [containerScroll, setContainerScroll] = s.createSignal({top: 0, height: 0}) const remSize = useRemSize() - const getContainerTopMargin = () => remSize() * v_margin_in_rem - const getRowHeight = () => remSize() * row_height_in_rem + const getContainerTopMargin = (): number => remSize() * v_margin_in_rem + const getRowHeight = (): number => remSize() * row_height_in_rem - const updateScrollData = (el: HTMLElement) => { + const updateScrollData = (el: HTMLElement): void => { setContainerScroll({ top: Math.max(el.scrollTop - getContainerTopMargin(), 0), height: el.clientHeight, }) } - const [collapsed, setCollapsed] = createSignal(new WeakSet(), { equals: false }) + const [collapsed, setCollapsed] = s.createSignal(new WeakSet(), {equals: false}) - const isCollapsed = (node: Structure.Node) => collapsed().has(node) + const isCollapsed = (node: Structure.Node): boolean => collapsed().has(node) - const toggleCollapsed = (node: Structure.Node) => { + const toggleCollapsed = (node: Structure.Node): void => { setCollapsed(set => { set.delete(node) || set.add(node) return set @@ -228,7 +220,7 @@ const DisplayStructureTree: Component = () => { } const ctx = useController() - const { inspector, hovered } = ctx + const {inspector, hovered} = ctx const structure = useStructure() let lastVirtualStart = 0 @@ -236,12 +228,12 @@ const DisplayStructureTree: Component = () => { let lastInspectedIndex = 0 let lastFocusedNodeData: ReturnType - createEffect(() => { - ;({ start: lastVirtualStart, end: lastVirtualEnd } = virtual()) + s.createEffect(() => { + ;({start: lastVirtualStart, end: lastVirtualEnd} = virtual()) lastInspectedIndex = inspectedIndex() }) - const collapsedList = createMemo((prev: Structure.Node[] = []) => { + const collapsedList = s.createMemo((prev: Structure.Node[] = []) => { // position of focused component needs to be calculated right before the collapsed list is recalculated // to be compated with it after the changes // `list data` has to be updated in an effect, so that this memo can run before it, instead of reading it here @@ -275,17 +267,17 @@ const DisplayStructureTree: Component = () => { return collapsed_list }) - const virtual = createMemo<{ + const virtual = s.createMemo<{ start: number end: number fullLength: number list: readonly Atom[] nodeList: readonly Structure.Node[] minLevel: number - }>((prev = { start: 0, end: 0, fullLength: 0, list: [], nodeList: [], minLevel: 0 }) => { + }>((prev = {start: 0, end: 0, fullLength: 0, list: [], nodeList: [], minLevel: 0}) => { const nodeList = collapsedList() - const { top, height } = containerScroll() - const { start, end, length } = getVirtualVars(nodeList.length, top, height, getRowHeight()) + const {top, height} = containerScroll() + const {start, end, length} = getVirtualVars(nodeList.length, top, height, getRowHeight()) if (prev.nodeList === nodeList && prev.start === start && prev.end === end) return prev @@ -308,28 +300,28 @@ const DisplayStructureTree: Component = () => { } } - return { list: next, start, end, nodeList, fullLength: nodeList.length, minLevel } + return {list: next, start, end, nodeList, fullLength: nodeList.length, minLevel} }) - const minLevel = createMemo(() => Math.max(virtual().minLevel - 7, 0), 0, { + const minLevel = s.createMemo(() => Math.max(virtual().minLevel - 7, 0), 0, { equals: (a, b) => a == b || (Math.abs(b - a) < 7 && b != 0), }) // calculate node indexP in the collapsed list - const getNodeIndexById = (id: NodeID) => { + const getNodeIndexById = (id: NodeID): number => { const nodeList = collapsedList() for (let i = 0; i < nodeList.length; i++) if (nodeList[i]!.id === id) return i return -1 } // Index of the inspected node in the collapsed list - const inspectedIndex = createMemo(() => { + const inspectedIndex = s.createMemo(() => { const id = inspector.inspected.treeWalkerOwnerId return id ? getNodeIndexById(id) : -1 }) // Seep the inspected or central node in view when the list is changing - createEffect( + s.createEffect( defer(collapsedList, () => { if (!lastFocusedNodeData) return const [nodeId, lastPosition] = lastFocusedNodeData @@ -342,7 +334,7 @@ const DisplayStructureTree: Component = () => { // Scroll to selected node when it changes // listen to inspected ID, instead of node, because node reference can change - createEffect(() => { + s.createEffect(() => { if (!inspector.inspected.treeWalkerOwnerId) return // Run in next tick to ensure the scroll data is updated and virtual list recalculated // inspect node -> open inspector -> container changes height -> scroll data changes -> virtual list changes -> scroll to node @@ -365,7 +357,7 @@ const DisplayStructureTree: Component = () => { } else return } - const { start, end } = virtual() + const {start, end} = virtual() const rowHeight = getRowHeight() let top: number if (index <= start) top = (index - 1) * rowHeight @@ -383,7 +375,7 @@ const DisplayStructureTree: Component = () => { makeEventListener(document.body, 'keydown', e => { if (e.target !== document.body) return - const { key } = e + const {key} = e if ( key !== 'ArrowDown' && @@ -483,9 +475,9 @@ const DisplayStructureTree: Component = () => { 'margin-left': `calc(${minLevel()} * -${row_padding})`, }} > - + {node => { - const { id } = node.value + const {id} = node.value return ( { /> ) }} - +
    diff --git a/packages/frontend/src/modules/structure/styles.tsx b/packages/frontend/src/modules/structure/styles.tsx index aa70b64a..7b984edd 100644 --- a/packages/frontend/src/modules/structure/styles.tsx +++ b/packages/frontend/src/modules/structure/styles.tsx @@ -1,4 +1,4 @@ -import { theme } from '@/ui' +import {theme} from '@/ui' export const path_height = theme.spacing[4.5] export const row_height = theme.spacing[4.5] diff --git a/packages/frontend/src/modules/structure/test/structure.test.ts b/packages/frontend/src/modules/structure/test/structure.test.ts index 0917c023..87aa1fe6 100644 --- a/packages/frontend/src/modules/structure/test/structure.test.ts +++ b/packages/frontend/src/modules/structure/test/structure.test.ts @@ -1,7 +1,7 @@ -import { NodeID, NodeType, StructureUpdates } from '@solid-devtools/debugger/types' -import { describe, expect, test } from 'vitest' -import type { Structure } from '..' -import { reconcileStructure } from '../reconcile' +import {NodeID, NodeType, StructureUpdates} from '@solid-devtools/debugger/types' +import {describe, expect, test} from 'vitest' +import type {Structure} from '..' +import {reconcileStructure} from '../reconcile' describe('reconcileStructure', () => { let updated: StructureUpdates['updated'] = { @@ -10,13 +10,13 @@ describe('reconcileStructure', () => { id: '#1', type: NodeType.Root, children: [ - { id: '#2', name: 'child', type: NodeType.Component, children: [] }, + {id: '#2', name: 'child', type: NodeType.Component, children: []}, { id: '#3', name: 'child2', type: NodeType.Effect, children: [ - { id: '#4', name: 'child3', type: NodeType.Component, children: [] }, + {id: '#4', name: 'child3', type: NodeType.Component, children: []}, { id: '#5', type: NodeType.Root, @@ -40,7 +40,7 @@ describe('reconcileStructure', () => { let prevRoots: Structure.Node[] = [] test('initial', () => { - const { roots, nodeList } = reconcileStructure(prevRoots, { + const {roots, nodeList} = reconcileStructure(prevRoots, { updated, removed, partial: false, @@ -48,20 +48,20 @@ describe('reconcileStructure', () => { prevRoots = roots expect(nodeList).toMatchObject([ - { id: '#1', parent: null, level: 0, children: [{ id: '#2' }, { id: '#3' }] }, - { id: '#2', parent: { id: '#1' }, level: 1, children: [] }, + {id: '#1', parent: null, level: 0, children: [{id: '#2'}, {id: '#3'}]}, + {id: '#2', parent: {id: '#1'}, level: 1, children: []}, { id: '#3', - parent: { id: '#1' }, + parent: {id: '#1'}, level: 1, - children: [{ id: '#4' }, { id: '#5' }], + children: [{id: '#4'}, {id: '#5'}], }, - { id: '#4', parent: { id: '#3' }, level: 2, children: [] }, - { id: '#5', parent: { id: '#3' }, level: 2, children: [{ id: '#6' }] }, - { id: '#6', parent: { id: '#5' }, level: 3, children: [] }, + {id: '#4', parent: {id: '#3'}, level: 2, children: []}, + {id: '#5', parent: {id: '#3'}, level: 2, children: [{id: '#6'}]}, + {id: '#6', parent: {id: '#5'}, level: 3, children: []}, ]) - expect(roots).toMatchObject([{ id: '#1' }]) + expect(roots).toMatchObject([{id: '#1'}]) }) test('update', () => { @@ -105,7 +105,7 @@ describe('reconcileStructure', () => { }, } - const { roots, nodeList } = reconcileStructure(prevRoots, { + const {roots, nodeList} = reconcileStructure(prevRoots, { updated, removed, partial: true, @@ -114,20 +114,20 @@ describe('reconcileStructure', () => { expect(nodeList).toHaveLength(5) expect(nodeList).toMatchObject([ - { id: '#1', parent: null, level: 0, children: [{ id: '#3' }] }, + {id: '#1', parent: null, level: 0, children: [{id: '#3'}]}, { id: '#3', - parent: { id: '#1' }, + parent: {id: '#1'}, level: 1, - children: [{ id: '#4' }, { id: '#5' }], + children: [{id: '#4'}, {id: '#5'}], frozen: true, }, - { id: '#4', parent: { id: '#3' }, level: 2, children: [] }, - { id: '#5', parent: { id: '#3' }, level: 2, children: [] }, - { id: '#10', parent: null, level: 0, children: [] }, + {id: '#4', parent: {id: '#3'}, level: 2, children: []}, + {id: '#5', parent: {id: '#3'}, level: 2, children: []}, + {id: '#10', parent: null, level: 0, children: []}, ]) - expect(roots).toMatchObject([{ id: '#1' }, { id: '#10' }]) + expect(roots).toMatchObject([{id: '#1'}, {id: '#10'}]) }) test('attach to a different node', () => { @@ -140,7 +140,7 @@ describe('reconcileStructure', () => { type: NodeType.Effect, frozen: true, children: [ - { id: '#4', name: 'child3', type: NodeType.Component, children: [] }, + {id: '#4', name: 'child3', type: NodeType.Component, children: []}, // removed attachment (5) ], }, @@ -151,7 +151,7 @@ describe('reconcileStructure', () => { id: '#8', type: NodeType.Root, children: [ - { id: '#9', name: 'child6', type: NodeType.Component, children: [] }, + {id: '#9', name: 'child6', type: NodeType.Component, children: []}, { // changed attachment from 3 to 8 id: '#5', @@ -164,7 +164,7 @@ describe('reconcileStructure', () => { type: NodeType.Component, children: [], }, - { id: '#7', name: 'child5', type: NodeType.Effect, children: [] }, + {id: '#7', name: 'child5', type: NodeType.Effect, children: []}, ], }, ], @@ -174,7 +174,7 @@ describe('reconcileStructure', () => { removed = ['#10'] - const { roots, nodeList } = reconcileStructure(prevRoots, { + const {roots, nodeList} = reconcileStructure(prevRoots, { updated, removed, partial: true, @@ -183,14 +183,14 @@ describe('reconcileStructure', () => { expect(nodeList).toHaveLength(8) expect(nodeList).toMatchObject([ - { id: '#1', parent: null, level: 0, children: [{ id: '#3' }] }, - { id: '#3', parent: { id: '#1' }, level: 1, children: [{ id: '#4' }] }, - { id: '#4', parent: { id: '#3' }, level: 2, children: [] }, - { id: '#8', parent: null, level: 0, children: [{ id: '#9' }, { id: '#5' }] }, - { id: '#9', parent: { id: '#8' }, level: 1, children: [] }, - { id: '#5', parent: { id: '#8' }, level: 1, children: [{ id: '#6' }, { id: '#7' }] }, - { id: '#6', parent: { id: '#5' }, level: 2, children: [] }, - { id: '#7', parent: { id: '#5' }, level: 2, children: [] }, + {id: '#1', parent: null, level: 0, children: [{id: '#3'}]}, + {id: '#3', parent: {id: '#1'}, level: 1, children: [{id: '#4'}]}, + {id: '#4', parent: {id: '#3'}, level: 2, children: []}, + {id: '#8', parent: null, level: 0, children: [{id: '#9'}, {id: '#5'}]}, + {id: '#9', parent: {id: '#8'}, level: 1, children: []}, + {id: '#5', parent: {id: '#8'}, level: 1, children: [{id: '#6'}, {id: '#7'}]}, + {id: '#6', parent: {id: '#5'}, level: 2, children: []}, + {id: '#7', parent: {id: '#5'}, level: 2, children: []}, ]) expect(roots).toHaveLength(2) @@ -230,7 +230,7 @@ describe('reconcileStructure', () => { id: '#5', type: NodeType.Root, children: [ - { id: '#6', name: 'child4', type: NodeType.Component, children: [] }, + {id: '#6', name: 'child4', type: NodeType.Component, children: []}, { id: '#7', name: 'child5', @@ -250,7 +250,7 @@ describe('reconcileStructure', () => { }, } - const { roots, nodeList } = reconcileStructure(prevRoots, { + const {roots, nodeList} = reconcileStructure(prevRoots, { updated, removed, partial: true, @@ -259,13 +259,13 @@ describe('reconcileStructure', () => { expect(nodeList).toHaveLength(7) expect(nodeList).toMatchObject([ - { id: '#8', parent: null, level: 0, children: [{ id: '#9' }] }, - { id: '#9', parent: { id: '#8' }, level: 1, children: [{ id: '#12' }] }, - { id: '#12', parent: { id: '#9' }, level: 2, children: [] }, - { id: '#5', parent: null, level: 0, children: [{ id: '#6' }, { id: '#7' }] }, - { id: '#6', parent: { id: '#5' }, level: 1, children: [] }, - { id: '#7', parent: { id: '#5' }, level: 1, children: [{ id: '#11' }] }, - { id: '#11', parent: { id: '#7' }, level: 2, children: [] }, + {id: '#8', parent: null, level: 0, children: [{id: '#9'}]}, + {id: '#9', parent: {id: '#8'}, level: 1, children: [{id: '#12'}]}, + {id: '#12', parent: {id: '#9'}, level: 2, children: []}, + {id: '#5', parent: null, level: 0, children: [{id: '#6'}, {id: '#7'}]}, + {id: '#6', parent: {id: '#5'}, level: 1, children: []}, + {id: '#7', parent: {id: '#5'}, level: 1, children: [{id: '#11'}]}, + {id: '#11', parent: {id: '#7'}, level: 2, children: []}, ]) expect(roots).toHaveLength(2) @@ -288,7 +288,7 @@ describe('reconcileStructure', () => { }, } - const { roots, nodeList } = reconcileStructure(prevRoots, { + const {roots, nodeList} = reconcileStructure(prevRoots, { updated, removed, partial: true, @@ -297,12 +297,12 @@ describe('reconcileStructure', () => { expect(nodeList).toHaveLength(6) expect(nodeList).toMatchObject([ - { id: '#8', parent: null, level: 0, children: [{ id: '#9' }] }, - { id: '#9', parent: { id: '#8' }, level: 1, children: [] }, - { id: '#5', parent: null, level: 0, children: [{ id: '#6' }, { id: '#7' }] }, - { id: '#6', parent: { id: '#5' }, level: 1, children: [] }, - { id: '#7', parent: { id: '#5' }, level: 1, children: [{ id: '#11' }] }, - { id: '#11', parent: { id: '#7' }, level: 2, children: [] }, + {id: '#8', parent: null, level: 0, children: [{id: '#9'}]}, + {id: '#9', parent: {id: '#8'}, level: 1, children: []}, + {id: '#5', parent: null, level: 0, children: [{id: '#6'}, {id: '#7'}]}, + {id: '#6', parent: {id: '#5'}, level: 1, children: []}, + {id: '#7', parent: {id: '#5'}, level: 1, children: [{id: '#11'}]}, + {id: '#11', parent: {id: '#7'}, level: 2, children: []}, ]) expect(roots).toHaveLength(2) diff --git a/packages/frontend/src/modules/structure/test/virtual.test.ts b/packages/frontend/src/modules/structure/test/virtual.test.ts index dab3be39..08611e10 100644 --- a/packages/frontend/src/modules/structure/test/virtual.test.ts +++ b/packages/frontend/src/modules/structure/test/virtual.test.ts @@ -1,12 +1,12 @@ -import { describe, expect, test } from 'vitest' -import { getVirtualVars } from '../virtual' +import {describe, expect, test} from 'vitest' +import {getVirtualVars} from '../virtual' describe('getVirtualVars', () => { test('no scroll', () => { const fullLength = 100 const vh = 20 const scroll = 0 - const { end, length, start } = getVirtualVars(fullLength, scroll, vh, 1) + const {end, length, start} = getVirtualVars(fullLength, scroll, vh, 1) expect(start).toBe(0) expect(end).toBe(21) expect(length).toBe(21) @@ -16,7 +16,7 @@ describe('getVirtualVars', () => { const fullLength = 100 const vh = 20 const scroll = 10 - const { end, length, start } = getVirtualVars(fullLength, scroll, vh, 1) + const {end, length, start} = getVirtualVars(fullLength, scroll, vh, 1) expect(start).toBe(10) expect(end).toBe(31) expect(length).toBe(21) @@ -26,7 +26,7 @@ describe('getVirtualVars', () => { const fullLength = 10 const vh = 20 const scroll = 0 - const { end, length, start } = getVirtualVars(fullLength, scroll, vh, 1) + const {end, length, start} = getVirtualVars(fullLength, scroll, vh, 1) expect(start).toBe(0) expect(end).toBe(10) expect(length).toBe(10) @@ -36,7 +36,7 @@ describe('getVirtualVars', () => { const fullLength = 100 const vh = 20 const scroll = 90 - const { end, length, start } = getVirtualVars(fullLength, scroll, vh, 1) + const {end, length, start} = getVirtualVars(fullLength, scroll, vh, 1) expect(start).toBe(79) expect(end).toBe(100) expect(length).toBe(21) @@ -46,7 +46,7 @@ describe('getVirtualVars', () => { const fullLength = 15 const vh = 20 const scroll = 10 - const { end, length, start } = getVirtualVars(fullLength, scroll, vh, 1) + const {end, length, start} = getVirtualVars(fullLength, scroll, vh, 1) expect(start).toBe(0) expect(end).toBe(15) expect(length).toBe(15) diff --git a/packages/frontend/src/modules/structure/virtual.ts b/packages/frontend/src/modules/structure/virtual.ts index 2ce940a4..61526759 100644 --- a/packages/frontend/src/modules/structure/virtual.ts +++ b/packages/frontend/src/modules/structure/virtual.ts @@ -3,7 +3,7 @@ export function getVirtualVars( scroll: number, containerHeight: number, rowHeight: number, -): { start: number; end: number; length: number } { +): {start: number; end: number; length: number} { let start = Math.floor(scroll / rowHeight) let length = Math.ceil(containerHeight / rowHeight + 1) let end = start + length @@ -13,5 +13,5 @@ export function getVirtualVars( length = Math.min(length, listLength) if (start < 0) start = 0 } - return { start, end, length } + return {start, end, length} } diff --git a/packages/frontend/src/ui/components/badge.tsx b/packages/frontend/src/ui/components/badge.tsx index ca47147d..c8e55a2b 100644 --- a/packages/frontend/src/ui/components/badge.tsx +++ b/packages/frontend/src/ui/components/badge.tsx @@ -1,6 +1,6 @@ -import { JSX } from 'solid-js' +import {JSX} from 'solid-js' -export function Badge(props: { children: JSX.Element }): JSX.Element { +export function Badge(props: {children: JSX.Element}): JSX.Element { return (
    {props.children} diff --git a/packages/frontend/src/ui/components/error-overlay/error-overlay-headless.ts b/packages/frontend/src/ui/components/error-overlay/error-overlay-headless.ts index 18397dd1..af818d89 100644 --- a/packages/frontend/src/ui/components/error-overlay/error-overlay-headless.ts +++ b/packages/frontend/src/ui/components/error-overlay/error-overlay-headless.ts @@ -1,18 +1,5 @@ -import { makeEventListener } from '@solid-primitives/event-listener' -import { - batch, - ComponentProps, - createComputed, - createMemo, - createSignal, - ErrorBoundary, - JSX, - mergeProps, - onError, - ParentComponent, - Show, - untrack, -} from 'solid-js' +import {makeEventListener} from '@solid-primitives/event-listener' +import * as s from 'solid-js' export type HeadlessErrorOverlayRenderProps = { error: unknown @@ -24,16 +11,16 @@ export type HeadlessErrorOverlayRenderProps = { } function ErrorOverlayInternal(props: { - render: JSX.Element | ((props: HeadlessErrorOverlayRenderProps) => JSX.Element) + render: s.JSX.Element | ((props: HeadlessErrorOverlayRenderProps) => s.JSX.Element) errors: unknown[] resetError: () => void -}): JSX.Element { - const [currentPage, setCurrentPage] = createSignal(1) +}): s.JSX.Element { + const [currentPage, setCurrentPage] = s.createSignal(1) - const length = createMemo(() => props.errors.length) - const currentError = createMemo(() => props.errors[currentPage() - 1]) + const length = s.createMemo(() => props.errors.length) + const currentError = s.createMemo(() => props.errors[currentPage() - 1]) - createComputed((currentLength: number) => { + s.createComputed((currentLength: number) => { const newLength = length() if (currentLength < newLength) { setCurrentPage(current => current + 1) @@ -41,7 +28,7 @@ function ErrorOverlayInternal(props: { return newLength }, length()) - function goPrev() { + function goPrev(): void { setCurrentPage(c => { if (c > 1) { return c - 1 @@ -49,7 +36,7 @@ function ErrorOverlayInternal(props: { return length() }) } - function goNext() { + function goNext(): void { setCurrentPage(c => { if (c < length()) { return c + 1 @@ -58,10 +45,10 @@ function ErrorOverlayInternal(props: { }) } - const { render } = props + const {render} = props if (typeof render === 'function') { - return untrack(() => + return s.untrack(() => render({ goPrev, goNext, @@ -82,28 +69,28 @@ function ErrorOverlayInternal(props: { return render } -export const HeadlessErrorOverlay: ParentComponent<{ - render?: JSX.Element | ((props: HeadlessErrorOverlayRenderProps) => JSX.Element) +export const HeadlessErrorOverlay: s.ParentComponent<{ + render?: s.JSX.Element | ((props: HeadlessErrorOverlayRenderProps) => s.JSX.Element) onError?: (error: unknown) => void catchWindowErrors?: boolean }> = props => { - const [errors, setErrors] = createSignal([]) - const [fallback, setFallback] = createSignal(false) + const [errors, setErrors] = s.createSignal([]) + const [fallback, setFallback] = s.createSignal(false) - function resetError() { + function resetError(): void { setErrors([]) setFallback(false) } - function pushError(error: unknown) { + function pushError(error: unknown): void { props.onError?.(error) setErrors(current => [error, ...current]) } props.catchWindowErrors && makeEventListener(window, 'error', pushError) - onError(pushError) + s.onError(pushError) - const errorOverlayInternalProps: ComponentProps = { + const errorOverlayInternalProps: s.ComponentProps = { get errors() { return errors() }, @@ -114,18 +101,18 @@ export const HeadlessErrorOverlay: ParentComponent<{ } return [ - ErrorBoundary({ + s.ErrorBoundary({ fallback(err, reset) { - batch(() => { + s.batch(() => { setFallback(true) pushError(err) }) - return untrack(() => + return s.untrack(() => ErrorOverlayInternal( - mergeProps(errorOverlayInternalProps, { + s.mergeProps(errorOverlayInternalProps, { resetError() { - batch(() => { + s.batch(() => { resetError() reset() }) @@ -138,12 +125,12 @@ export const HeadlessErrorOverlay: ParentComponent<{ return props.children }, }), - Show({ + s.Show({ get when() { return !fallback() && errors().length }, get children() { - return untrack(() => ErrorOverlayInternal(errorOverlayInternalProps)) + return s.untrack(() => ErrorOverlayInternal(errorOverlayInternalProps)) }, }), ] diff --git a/packages/frontend/src/ui/components/error-overlay/error-overlay.tsx b/packages/frontend/src/ui/components/error-overlay/error-overlay.tsx index 257d1f54..daafbd01 100644 --- a/packages/frontend/src/ui/components/error-overlay/error-overlay.tsx +++ b/packages/frontend/src/ui/components/error-overlay/error-overlay.tsx @@ -1,6 +1,6 @@ -import { Icon } from '@/ui' -import { Component, JSX, ParentComponent } from 'solid-js' -import { HeadlessErrorOverlay, HeadlessErrorOverlayRenderProps } from './error-overlay-headless' +import {Icon} from '@/ui' +import {Component, JSX, ParentComponent} from 'solid-js' +import {HeadlessErrorOverlay, HeadlessErrorOverlayRenderProps} from './error-overlay-headless' const button = 'w-8 h-8 center-child rounded-md bg-panel-8 hover:bg-panel-7 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-panel-7 active:bg-panel-6 active:ring-offset-0 active:ring-0' @@ -8,7 +8,7 @@ const button = const icon = 'w-4 h-4 text-current' const RenderErrorOverlay: Component< - HeadlessErrorOverlayRenderProps & { footer?: JSX.Element } + HeadlessErrorOverlayRenderProps & {footer?: JSX.Element} > = props => (
    diff --git a/packages/frontend/src/ui/components/highlight.tsx b/packages/frontend/src/ui/components/highlight.tsx index 73d41ff2..5bb494c0 100644 --- a/packages/frontend/src/ui/components/highlight.tsx +++ b/packages/frontend/src/ui/components/highlight.tsx @@ -1,6 +1,6 @@ -import { theme } from '@/ui' +import {theme} from '@/ui' import clsx from 'clsx' -import { ParentComponent } from 'solid-js' +import {ParentComponent} from 'solid-js' export const highlight_color_var = '--highlight_color_var' export const highlight_opacity_var = '--highlight_opacity_var' diff --git a/packages/frontend/src/ui/components/icons.tsx b/packages/frontend/src/ui/components/icons.tsx index 769d9563..59acf73d 100644 --- a/packages/frontend/src/ui/components/icons.tsx +++ b/packages/frontend/src/ui/components/icons.tsx @@ -2,13 +2,13 @@ * Some icons taken from https://phosphoricons.com */ -import { Component } from 'solid-js' +import {Component} from 'solid-js' -export type ProxyIconComponent = Component<{ id: ID }> +export type ProxyIconComponent = Component<{id: ID}> -export type IconComponent = Component<{ class?: string }> +export type IconComponent = Component<{class?: string}> -const ArrowRight: ProxyIconComponent<'ArrowRight'> = ({ id }) => ( +const ArrowRight: ProxyIconComponent<'ArrowRight'> = ({id}) => ( = ({ id }) => ( ) -const ArrowLeft: ProxyIconComponent<'ArrowLeft'> = ({ id }) => ( +const ArrowLeft: ProxyIconComponent<'ArrowLeft'> = ({id}) => ( = ({ id }) => ( ) -const CarretRight: ProxyIconComponent<'CarretRight'> = ({ id }) => ( +const CarretRight: ProxyIconComponent<'CarretRight'> = ({id}) => ( = ({ id }) => ( ) -const Eye: ProxyIconComponent<'Eye'> = ({ id }) => ( +const Eye: ProxyIconComponent<'Eye'> = ({id}) => ( = ({ id }) => ( ) -const EyeSlash: ProxyIconComponent<'EyeSlash'> = ({ id }) => ( +const EyeSlash: ProxyIconComponent<'EyeSlash'> = ({id}) => ( = ({ id }) => ( ) -const Refresh: ProxyIconComponent<'Refresh'> = ({ id }) => ( +const Refresh: ProxyIconComponent<'Refresh'> = ({id}) => ( = ({ id }) => ( ) -const Select: ProxyIconComponent<'Select'> = ({ id }) => ( +const Select: ProxyIconComponent<'Select'> = ({id}) => ( = ({ id }) => ( ) -const Options: ProxyIconComponent<'Options'> = ({ id }) => ( +const Options: ProxyIconComponent<'Options'> = ({id}) => ( @@ -233,7 +233,7 @@ const Options: ProxyIconComponent<'Options'> = ({ id }) => ( ) -const Close: ProxyIconComponent<'Close'> = ({ id }) => ( +const Close: ProxyIconComponent<'Close'> = ({id}) => ( = ({ id }) => ( ) -const Triangle: ProxyIconComponent<'Triangle'> = ({ id }) => ( +const Triangle: ProxyIconComponent<'Triangle'> = ({id}) => ( = ({ id }) => ( ) -const Signal: ProxyIconComponent<'Signal'> = ({ id }) => ( +const Signal: ProxyIconComponent<'Signal'> = ({id}) => ( = ({ id }) => ( ) -const Root: ProxyIconComponent<'Root'> = ({ id }) => ( +const Root: ProxyIconComponent<'Root'> = ({id}) => ( = ({ id }) => ( ) -const Memo: ProxyIconComponent<'Memo'> = ({ id }) => ( +const Memo: ProxyIconComponent<'Memo'> = ({id}) => ( = ({ id }) => ( ) -const Effect: ProxyIconComponent<'Effect'> = ({ id }) => ( +const Effect: ProxyIconComponent<'Effect'> = ({id}) => ( = ({ id }) => ( ) -const RenderEffect: ProxyIconComponent<'RenderEffect'> = ({ id }) => ( +const RenderEffect: ProxyIconComponent<'RenderEffect'> = ({id}) => ( = ({ id }) => ( ) -const Computation: ProxyIconComponent<'Computation'> = ({ id }) => ( +const Computation: ProxyIconComponent<'Computation'> = ({id}) => ( = ({ id }) => ( ) -const Context: ProxyIconComponent<'Context'> = ({ id }) => ( +const Context: ProxyIconComponent<'Context'> = ({id}) => ( @@ -483,7 +483,7 @@ const Context: ProxyIconComponent<'Context'> = ({ id }) => ( ) -const Code: ProxyIconComponent<'Code'> = ({ id }) => ( +const Code: ProxyIconComponent<'Code'> = ({id}) => ( = ({ id }) => ( ) -const Graph: ProxyIconComponent<'Graph'> = ({ id }) => ( +const Graph: ProxyIconComponent<'Graph'> = ({id}) => ( = ({ id }) => ( ) -const Search: ProxyIconComponent<'Search'> = ({ id }) => ( +const Search: ProxyIconComponent<'Search'> = ({id}) => ( ( + ;(Icon as any)[name] = (props: {class?: string}) => ( diff --git a/packages/frontend/src/ui/components/owner-name.tsx b/packages/frontend/src/ui/components/owner-name.tsx index 9d1b7fd6..a0e2176d 100644 --- a/packages/frontend/src/ui/components/owner-name.tsx +++ b/packages/frontend/src/ui/components/owner-name.tsx @@ -1,20 +1,21 @@ -import { styles } from '@/ui' -import { NodeType, UNKNOWN } from '@solid-devtools/debugger/types' -import { createPingedSignal } from '@solid-devtools/shared/primitives' +import {styles} from '@/ui' +import {NodeType, UNKNOWN} from '@solid-devtools/debugger/types' +import {createPingedSignal} from '@solid-devtools/shared/primitives' import clsx from 'clsx' -import { Component, JSX, createMemo } from 'solid-js' -import { Highlight } from './highlight' -import Icon, { IconComponent } from './icons' +import * as s from 'solid-js' +import {Highlight} from './highlight' +import Icon, {IconComponent} from './icons' export function Node_Type_Icon(props: { type: NodeType | undefined | null class?: string -}): JSX.Element { +}): s.JSX.Element { let prev_icon: IconComponent | undefined - let prev_rendered: JSX.Element | undefined + let prev_rendered: s.JSX.Element | undefined - const fn = () => { + const fn = (): s.JSX.Element => { let IconComp: IconComponent | undefined + // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check switch (props.type) { case NodeType.Memo: IconComp = Icon.Memo @@ -46,7 +47,7 @@ export function Node_Type_Icon(props: { prev_rendered = IconComp ? : null return prev_rendered } - return fn as any as JSX.Element + return fn as any as s.JSX.Element } const strike_through_line = @@ -66,13 +67,13 @@ const element_classes = (frozen: boolean): string => const signal_classes = (frozen: boolean): string => clsx(name_classes(frozen), 'text-dom') -export const Node_Name: Component<{ +export const Node_Name: s.Component<{ name: string | undefined | null type: NodeType | undefined | null frozen: boolean }> = props => { - const name = () => props.name || UNKNOWN - return createMemo(() => { + const name = (): string => props.name || UNKNOWN + return s.createMemo(() => { switch (props.type) { case NodeType.Root: return Root @@ -89,10 +90,10 @@ export const Node_Name: Component<{ default: return {name()} } - }) as unknown as JSX.Element + }) as unknown as s.JSX.Element } -export const Owner_Name: Component<{ +export const Owner_Name: s.Component<{ name: string | undefined | null type: NodeType | undefined | null is_title?: boolean @@ -106,7 +107,13 @@ export const Owner_Name: Component<{ ) } -export function createHighlightedOwnerName() { +export type HighlightedOwnerName = { + isUpdated: s.Accessor + pingUpdated: VoidFunction + OwnerName: typeof Owner_Name +} + +export function createHighlightedOwnerName(): HighlightedOwnerName { const [isUpdated, pingUpdated] = createPingedSignal() return { isUpdated, diff --git a/packages/frontend/src/ui/components/scrollable.tsx b/packages/frontend/src/ui/components/scrollable.tsx index 23c1a2a3..7f299e10 100644 --- a/packages/frontend/src/ui/components/scrollable.tsx +++ b/packages/frontend/src/ui/components/scrollable.tsx @@ -1,10 +1,10 @@ -import { theme } from '@/ui' -import { color } from '@nothing-but/utils' -import { combineProps } from '@solid-primitives/props' +import {theme} from '@/ui' +import {color} from '@nothing-but/utils' +import {combineProps} from '@solid-primitives/props' import clsx from 'clsx' import * as s from 'solid-js' -const thumb_color = (opacity: number) => +const thumb_color = (opacity: number): string => color.rgb_to_rgba(color.hex_to_rgb(theme.colors.gray[500]), opacity).toString() export const custom_scrollbar = 'custom_scrollbar' @@ -37,7 +37,7 @@ export const custom_scrollbar_styles = /*css*/ ` ` export const Scrollable: s.ParentComponent< - s.ComponentProps<'div'> & { contentProps?: s.ComponentProps<'div'> } + s.ComponentProps<'div'> & {contentProps?: s.ComponentProps<'div'>} > = props => { const container_props = combineProps(props, { class: clsx( diff --git a/packages/frontend/src/ui/components/skeleton.tsx b/packages/frontend/src/ui/components/skeleton.tsx index 699c6827..c51b57d6 100644 --- a/packages/frontend/src/ui/components/skeleton.tsx +++ b/packages/frontend/src/ui/components/skeleton.tsx @@ -1,12 +1,12 @@ -import { createPolled } from '@solid-primitives/timer' -import { Component } from 'solid-js' +import {createPolled} from '@solid-primitives/timer' +import {Component} from 'solid-js' -export const Skeleton: Component<{}> = () => { +export const Skeleton: Component = () => { const nDots = createPolled((p: number = 0) => (p === 3 ? 1 : ++p), 800) return (
    - Loading{Array.from({ length: nDots() }, () => '.')} + Loading{Array.from({length: nDots()}, () => '.')}
    ) } diff --git a/packages/frontend/src/ui/components/splitter.tsx b/packages/frontend/src/ui/components/splitter.tsx index 40f90088..269f6402 100644 --- a/packages/frontend/src/ui/components/splitter.tsx +++ b/packages/frontend/src/ui/components/splitter.tsx @@ -1,15 +1,15 @@ -import { createBodyCursor } from '@solid-primitives/cursor' -import { makeEventListener } from '@solid-primitives/event-listener' -import { createToken, resolveTokens } from '@solid-primitives/jsx-tokenizer' -import { createMediaQuery } from '@solid-primitives/media' -import { getPositionInElement } from '@solid-primitives/mouse' -import { scheduleIdle } from '@solid-primitives/scheduled' -import { useRemSize } from '@solid-primitives/styles' -import { clamp } from '@solid-primitives/utils' +import {createBodyCursor} from '@solid-primitives/cursor' +import {makeEventListener} from '@solid-primitives/event-listener' +import {createToken, resolveTokens} from '@solid-primitives/jsx-tokenizer' +import {createMediaQuery} from '@solid-primitives/media' +import {getPositionInElement} from '@solid-primitives/mouse' +import {scheduleIdle} from '@solid-primitives/scheduled' +import {useRemSize} from '@solid-primitives/styles' +import {clamp} from '@solid-primitives/utils' import clsx from 'clsx' -import { Index, JSX, batch, createComputed, createMemo, createSignal } from 'solid-js' +import * as s from 'solid-js' -export type PanelProps = { children: JSX.Element } +export type PanelProps = {children: s.JSX.Element} const SplitterPanel = createToken() @@ -17,21 +17,21 @@ const MIN_SIZE_IN_REM = 8 const MIN_SIZE = `${MIN_SIZE_IN_REM}rem` const SPLIT_SIZE = '1px' -function SplitterRoot(props: { children: JSX.Element }) { +function SplitterRoot(props: {children: s.JSX.Element}): s.JSX.Element { const tokens = resolveTokens(SplitterPanel, () => props.children) const isMobile = createMediaQuery('(max-width: 640px)') const isTouch = createMediaQuery('(hover: none)') - const [progress, setProgress] = createSignal([]) - const [dragging, setDragging] = createSignal(false) + const [progress, setProgress] = s.createSignal([]) + const [dragging, setDragging] = s.createSignal(false) - createComputed((p: ReturnType = []) => { + s.createComputed((p: ReturnType = []) => { const panels = tokens() // stop dragging if the number of panels changes if (panels.length !== p.length) { - batch(() => { - setProgress(Array.from({ length: panels.length - 1 }, () => 1 / panels.length)) + s.batch(() => { + setProgress(Array.from({length: panels.length - 1}, () => 1 / panels.length)) setDragging(false) }) } @@ -71,7 +71,7 @@ function SplitterRoot(props: { children: JSX.Element }) { createBodyCursor(() => dragging() !== false && (isMobile() ? 'row-resize' : 'col-resize')) - const template = createMemo(() => { + const template = s.createMemo(() => { const p = progress() let t = '' @@ -86,10 +86,10 @@ function SplitterRoot(props: { children: JSX.Element }) { return (
    - + {(panel, i) => ( <>
    {panel().data.children}
    @@ -113,9 +113,9 @@ function SplitterRoot(props: { children: JSX.Element }) { )} )} -     +
    ) } -export { SplitterPanel as Panel, SplitterRoot as Root } +export {SplitterPanel as Panel, SplitterRoot as Root} diff --git a/packages/frontend/src/ui/components/toggle-button.tsx b/packages/frontend/src/ui/components/toggle-button.tsx index c01b56bb..33d28809 100644 --- a/packages/frontend/src/ui/components/toggle-button.tsx +++ b/packages/frontend/src/ui/components/toggle-button.tsx @@ -1,8 +1,8 @@ -import { color } from '@nothing-but/utils' -import { combineProps } from '@solid-primitives/props' +import {color} from '@nothing-but/utils' +import {combineProps} from '@solid-primitives/props' import clsx from 'clsx' import * as s from 'solid-js' -import { theme } from '..' +import {theme} from '..' import Icon from './icons' export const toggle_button = 'toggle-button' @@ -47,7 +47,7 @@ export const toggle_button_styles = /*css*/ ` ` export const ToggleButton: s.ParentComponent< - s.ComponentProps<'button'> & { onToggle: (selected: boolean) => void; selected: boolean } + s.ComponentProps<'button'> & {onToggle: (selected: boolean) => void; selected: boolean} > = props => { props = combineProps(props, { class: toggle_button, @@ -73,7 +73,7 @@ export const CollapseToggle: s.Component<{ default_collapsed?: boolean name?: string }> = props => { - const { onToggle } = props + const {onToggle} = props return ( ; } globalThis.${WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`, - { jsx: false, components: true }, + {jsx: false, components: true}, ], [ 'arrow component', @@ -41,7 +38,7 @@ const Button = props => { return ; }; globalThis.${WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`, - { jsx: false, components: true }, + {jsx: false, components: true}, ], [ 'jsx', @@ -52,7 +49,7 @@ globalThis.${WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`, return ; } globalThis.${WINDOW_PROJECTPATH_PROPERTY} = "${cwd}";`, - { jsx: true, components: false }, + {jsx: true, components: false}, ], ] diff --git a/packages/main/src/vite/test/name.test.ts b/packages/main/src/vite/test/name.test.ts index b385249e..81b8fa56 100644 --- a/packages/main/src/vite/test/name.test.ts +++ b/packages/main/src/vite/test/name.test.ts @@ -1,6 +1,6 @@ -import { describe, test } from 'vitest' +import {describe, test} from 'vitest' import plugin from '../name' -import { assertTransform, testTransform } from './setup' +import {assertTransform, testTransform} from './setup' describe('returning primitives', () => { // Positive tests diff --git a/packages/main/src/vite/test/setup.ts b/packages/main/src/vite/test/setup.ts index eeca4b62..79c73642 100644 --- a/packages/main/src/vite/test/setup.ts +++ b/packages/main/src/vite/test/setup.ts @@ -1,13 +1,13 @@ -import { PluginObj, traverse } from '@babel/core' +import {PluginObj, traverse} from '@babel/core' import generate from '@babel/generator' -import { parse } from '@babel/parser' -import { expect, test } from 'vitest' +import {parse} from '@babel/parser' +import {expect, test} from 'vitest' export const cwd = 'root/src' export const file = 'test.tsx' process.cwd = () => cwd -const removeExtraSpaces = (str: string) => { +const removeExtraSpaces = (str: string): string => { return str.replace(/ {2,}/g, ' ').replace(/[\t\n] ?/g, '') } @@ -16,13 +16,13 @@ export function assertTransform( expected: string, plugin: PluginObj, trim = false, -) { +): void { const ast = parse(src, { sourceType: 'module', plugins: ['jsx'], }) - traverse(ast, plugin.visitor, undefined, { filename: `${cwd}/${file}` }) + traverse(ast, plugin.visitor, undefined, {filename: `${cwd}/${file}`}) const res = generate(ast) const output = trim ? removeExtraSpaces(res.code) : res.code const expectedOutput = trim ? removeExtraSpaces(expected) : expected @@ -36,7 +36,7 @@ export function testTransform( expected: string, plugin: PluginObj, trim = false, -) { +): void { test(name, () => { assertTransform(src, expected, plugin, trim) }) diff --git a/packages/main/src/vite/utils.ts b/packages/main/src/vite/utils.ts index f4cb1891..b5318639 100644 --- a/packages/main/src/vite/utils.ts +++ b/packages/main/src/vite/utils.ts @@ -1,4 +1,4 @@ -import { NodePath } from '@babel/traverse' +import {NodePath} from '@babel/traverse' import * as t from '@babel/types' export function getProgram(path: NodePath): NodePath { diff --git a/packages/main/tsup.config.ts b/packages/main/tsup.config.ts index 34bf9ac4..06067b80 100644 --- a/packages/main/tsup.config.ts +++ b/packages/main/tsup.config.ts @@ -1,13 +1,13 @@ -import solidPkg from 'solid-js/package.json' assert { type: 'json' } -import { defineConfig } from 'tsup' -import { version as clientVersion, peerDependencies } from './package.json' +import solidPkg from 'solid-js/package.json' assert {type: 'json'} +import {defineConfig} from 'tsup' +import {version as clientVersion, peerDependencies} from './package.json' const solidVersion = solidPkg.version export default defineConfig([ { entryPoints: ['src/index.ts', 'src/setup-noop.ts', 'src/setup.ts'], - dts: { entry: ['src/index.ts', 'src/setup.ts'] }, + dts: {entry: ['src/index.ts', 'src/setup.ts']}, format: 'esm', target: 'esnext', platform: 'browser', diff --git a/packages/main/vite.config.ts b/packages/main/vite.config.ts index 9e8ec37a..ac68d598 100644 --- a/packages/main/vite.config.ts +++ b/packages/main/vite.config.ts @@ -1,3 +1,3 @@ -import { vitestFullConfig } from '../../configs/vitest.config' +import {vitestFullConfig} from '../../configs/vitest.config' export default vitestFullConfig() diff --git a/packages/overlay/env.d.ts b/packages/overlay/env.d.ts index 4fd97b51..bfcb68e8 100644 --- a/packages/overlay/env.d.ts +++ b/packages/overlay/env.d.ts @@ -3,4 +3,4 @@ declare module '*.css' { export default exportString } -declare const process: { env: Record } +declare const process: {env: Record} diff --git a/packages/overlay/scripts/build.ts b/packages/overlay/scripts/build.ts index ceb34645..1373ecfc 100644 --- a/packages/overlay/scripts/build.ts +++ b/packages/overlay/scripts/build.ts @@ -1,12 +1,12 @@ import chokidar from 'chokidar' import CleanCSS from 'clean-css' import esbuild from 'esbuild' -import { solidPlugin } from 'esbuild-plugin-solid' +import {solidPlugin} from 'esbuild-plugin-solid' import fs from 'fs' -import { readFile } from 'fs/promises' +import {readFile} from 'fs/promises' import path from 'path' -import { fileURLToPath } from 'url' -import { Worker } from 'worker_threads' +import {fileURLToPath} from 'url' +import {Worker} from 'worker_threads' // import { dependencies, peerDependencies } from '../package.json' const __filename = fileURLToPath(import.meta.url) @@ -46,7 +46,7 @@ function customPlugin(output: string): esbuild.Plugin { // minify css during build if (!isDev) { - build.onLoad({ filter: /\.css$/ }, async args => { + build.onLoad({filter: /\.css$/}, async args => { const finename = path.basename(args.path) let time = Date.now() let text = await readFile(args.path, 'utf-8') @@ -56,7 +56,7 @@ function customPlugin(output: string): esbuild.Plugin { Date.now() - time, )}ms`, ) - return { loader: 'text', contents: text } + return {loader: 'text', contents: text} }) } @@ -75,7 +75,7 @@ function customPlugin(output: string): esbuild.Plugin { // clear dist before build if (!isDev) { - fs.rmSync(path.resolve(cwd, `dist`), { recursive: true, force: true }) + fs.rmSync(path.resolve(cwd, `dist`), {recursive: true, force: true}) } // generate type declarations @@ -98,7 +98,7 @@ const commonOptions: esbuild.BuildOptions = { target: 'esnext', format: 'esm', bundle: true, - loader: { '.css': 'text' }, + loader: {'.css': 'text'}, color: true, external: externals, treeShaking: true, diff --git a/packages/overlay/scripts/dts.ts b/packages/overlay/scripts/dts.ts index df4cb02e..07667d4f 100644 --- a/packages/overlay/scripts/dts.ts +++ b/packages/overlay/scripts/dts.ts @@ -3,8 +3,8 @@ import ts from 'typescript' export function getTscOptions(): ts.CompilerOptions { const configFile = ts.findConfigFile(process.cwd(), ts.sys.fileExists, 'tsconfig.json') if (!configFile) throw Error('tsconfig.json not found') - const { config } = ts.readConfigFile(configFile, ts.sys.readFile) - const { options } = ts.parseJsonConfigFileContent(config, ts.sys, process.cwd()) + const {config} = ts.readConfigFile(configFile, ts.sys.readFile) + const {options} = ts.parseJsonConfigFileContent(config, ts.sys, process.cwd()) return { ...options, diff --git a/packages/overlay/scripts/dts_worker.ts b/packages/overlay/scripts/dts_worker.ts index d4d4285f..26ded529 100644 --- a/packages/overlay/scripts/dts_worker.ts +++ b/packages/overlay/scripts/dts_worker.ts @@ -1,7 +1,7 @@ import path from 'path' import ts from 'typescript' -import { parentPort } from 'worker_threads' -import { emitDts, getTscOptions } from './dts' +import {parentPort} from 'worker_threads' +import {emitDts, getTscOptions} from './dts' const isDev = process.argv.includes('--watch') const entryFile = path.resolve(process.cwd(), `src/index.tsx`) diff --git a/packages/overlay/src/controller.tsx b/packages/overlay/src/controller.tsx index c54bd7be..88168d8b 100644 --- a/packages/overlay/src/controller.tsx +++ b/packages/overlay/src/controller.tsx @@ -1,6 +1,6 @@ -import { useDebugger } from '@solid-devtools/debugger/bundled' -import { createDevtools, DevtoolsProps } from '@solid-devtools/frontend' -import { onCleanup } from 'solid-js' +import {useDebugger} from '@solid-devtools/debugger/bundled' +import {createDevtools, DevtoolsProps} from '@solid-devtools/frontend' +import * as solid from 'solid-js' function clone(data: T): T { return typeof data === 'object' ? (JSON.parse(JSON.stringify(data)) as T) : data @@ -12,14 +12,14 @@ function separate(data: T, callback: (value: T) => void): void { }) } -export function Devtools(props: DevtoolsProps) { +export function Devtools(props: DevtoolsProps): solid.JSX.Element { const debug = useDebugger() debug.emit('ResetState') - onCleanup(() => debug.emit('InspectNode', null)) + solid.onCleanup(() => debug.emit('InspectNode', null)) - const { bridge, Devtools: Frontend } = createDevtools() + const {bridge, Devtools: Frontend} = createDevtools() bridge.output.listen(e => { separate(e.details, details => debug.emit(e.name, details as never)) diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx index dc91845b..af8b49fe 100644 --- a/packages/overlay/src/index.tsx +++ b/packages/overlay/src/index.tsx @@ -1,11 +1,11 @@ import '@solid-devtools/debugger/setup' -import { num } from '@nothing-but/utils' -import { useDebugger } from '@solid-devtools/debugger/bundled' -import { Icon, MountIcons } from '@solid-devtools/frontend' -import { useIsMobile, useIsTouch } from '@solid-devtools/shared/primitives' -import { createBodyCursor } from '@solid-primitives/cursor' -import { makeEventListener } from '@solid-primitives/event-listener' +import {num} from '@nothing-but/utils' +import {useDebugger} from '@solid-devtools/debugger/bundled' +import {Icon, MountIcons} from '@solid-devtools/frontend' +import {useIsMobile, useIsTouch} from '@solid-devtools/shared/primitives' +import {createBodyCursor} from '@solid-primitives/cursor' +import {makeEventListener} from '@solid-primitives/event-listener' import { Component, ComponentProps, @@ -15,8 +15,8 @@ import { createRoot, createSignal, } from 'solid-js' -import { Dynamic, Portal } from 'solid-js/web' -import { Devtools } from './controller' +import {Dynamic, Portal} from 'solid-js/web' +import {Devtools} from './controller' import frontendStyles from '@solid-devtools/frontend/dist/styles.css' import overlayStyles from './styles.css' @@ -40,12 +40,14 @@ const Overlay: Component<{ defaultOpen?: boolean alwaysOpen?: boolean noPadding?: boolean -}> = ({ defaultOpen, alwaysOpen, noPadding }) => { +}> = ({defaultOpen, alwaysOpen, noPadding}) => { const debug = useDebugger() if (defaultOpen || alwaysOpen) debug.toggleEnabled(true) const [isOpen, _setOpen] = createSignal(alwaysOpen || debug.enabled()) const setOpen = alwaysOpen - ? () => {} + ? () => { + /**/ + } : (enabled: boolean) => { batch(() => { debug.toggleEnabled(enabled) @@ -73,9 +75,9 @@ const Overlay: Component<{
    diff --git a/packages/shared/src/detect.ts b/packages/shared/src/detect.ts index 8175fa0f..ff4a1b3f 100644 --- a/packages/shared/src/detect.ts +++ b/packages/shared/src/detect.ts @@ -1,5 +1,5 @@ import 'solid-js' -import { interceptPropertySet } from './utils' +import {interceptPropertySet} from './utils' // // SolidJS detection @@ -49,13 +49,13 @@ export function detectSolidDev(): boolean { } export function onSolidDevDetect(callback: () => void): void { - if (detectSolidDev()) queueMicrotask(callback) - else - interceptPropertySet( - window, - SOLID_DEV_GLOBAL, - value => value === true && queueMicrotask(callback), - ) + if (detectSolidDev()) { + queueMicrotask(callback) + } else { + interceptPropertySet(window, SOLID_DEV_GLOBAL, value => { + value && queueMicrotask(callback) + }) + } } // diff --git a/packages/shared/src/primitives.ts b/packages/shared/src/primitives.ts index e732d8ae..41d2ee56 100644 --- a/packages/shared/src/primitives.ts +++ b/packages/shared/src/primitives.ts @@ -1,7 +1,7 @@ -import { makeEventListener } from '@solid-primitives/event-listener' -import { createMediaQuery } from '@solid-primitives/media' -import { createSingletonRoot } from '@solid-primitives/rootless' -import { tryOnCleanup, type AnyFunction, type PrimitiveValue } from '@solid-primitives/utils' +import {makeEventListener} from '@solid-primitives/event-listener' +import {createMediaQuery} from '@solid-primitives/media' +import {createSingletonRoot} from '@solid-primitives/rootless' +import {tryOnCleanup, type AnyFunction, type PrimitiveValue} from '@solid-primitives/utils' import { batch, createMemo, @@ -19,10 +19,10 @@ import { export type WritableDeep = 0 extends 1 & T ? T : T extends PrimitiveValue - ? T - : unknown extends T - ? T - : { -readonly [K in keyof T]: WritableDeep } + ? T + : unknown extends T + ? T + : {-readonly [K in keyof T]: WritableDeep} export const untrackedCallback = (fn: Fn): Fn => ((...a: Parameters) => untrack>(fn.bind(void 0, ...a))) as any @@ -38,14 +38,14 @@ export function createHover(handle: (hovering: boolean) => void): { let mounted = true const mql = window.matchMedia('(hover: none)') let isTouch = mql.matches - makeEventListener(mql, 'change', ({ matches }) => { + makeEventListener(mql, 'change', ({matches}) => { if ((isTouch = matches)) handle((state = false)) }) onCleanup(() => { mounted = false if (state) handle((state = false)) }) - const onChange = (newState: boolean) => { + const onChange = (newState: boolean): void => { if (isTouch || !mounted) return state !== newState && handle((state = newState)) } @@ -63,7 +63,7 @@ export function createHover(handle: (hovering: boolean) => void): { export function createConsumers( initial: readonly Accessor[] = [], ): [needed: Accessor, addConsumer: (consumer: Accessor) => void] { - const [consumers, setConsumers] = createSignal([...initial], { name: 'consumers' }) + const [consumers, setConsumers] = createSignal([...initial], {name: 'consumers'}) const enabled = createMemo(() => consumers().some(consumer => consumer())) return [ enabled, @@ -112,13 +112,13 @@ export function createDerivedSignal(fallback?: T, options?: MemoOptions): export function makeHoverElementListener(onHover: (el: HTMLElement | null) => void): void { let last: HTMLElement | null = null - const handleHover = (e: { target: unknown }) => { - const { target } = e + const handleHover = (e: {target: unknown}): void => { + const {target} = e if (target === last || (!(target instanceof HTMLElement) && target !== null)) return onHover((last = target)) } makeEventListener(window, 'mouseover', handleHover) - makeEventListener(document, 'mouseleave', handleHover.bind(void 0, { target: null })) + makeEventListener(document, 'mouseleave', handleHover.bind(void 0, {target: null})) } export type Atom = Accessor & { @@ -148,7 +148,7 @@ export function atom(initialValue: T, options?: SignalOptions): Atom { atom.set = value => setter(() => value) atom.peak = () => untrack(atom) - Object.defineProperty(atom, 'value', { get: atom }) + Object.defineProperty(atom, 'value', {get: atom}) return atom } @@ -162,7 +162,7 @@ export function createPingedSignal( const [isUpdated, setIsUpdated] = createSignal(false) let timeoutId: ReturnType | undefined - const ping = () => { + const ping = (): void => { setIsUpdated(true) clearTimeout(timeoutId) timeoutId = setTimeout(() => setIsUpdated(false), timeout) @@ -174,16 +174,16 @@ export function createPingedSignal( export function handleTupleUpdate< T extends readonly [PropertyKey, any], - O = { readonly [K in T as K[0]]: (value: K[1]) => void }, + O = {readonly [K in T as K[0]]: (value: K[1]) => void}, >(handlers: O): (update: T) => void { return update => (handlers as any)[update[0]](update[1]) } export function handleTupleUpdates< T extends readonly [PropertyKey, any], - O = { readonly [K in T as K[0]]: (value: K[1]) => void }, + O = {readonly [K in T as K[0]]: (value: K[1]) => void}, >(handlers: O): (updates: T[]) => void { - function runUpdates(updates: T[]) { + function runUpdates(updates: T[]): void { for (const [key, value] of updates) (handlers as any)[key](value) } return updates => batch(runUpdates.bind(void 0, updates)) diff --git a/packages/shared/src/utils.ts b/packages/shared/src/utils.ts index 58c0472f..2b8e3b8e 100644 --- a/packages/shared/src/utils.ts +++ b/packages/shared/src/utils.ts @@ -1,4 +1,4 @@ -const getLogLabel = () => [ +const getLogLabel = (): string[] => [ `%csolid-devtools`, 'color: #fff; background: #2c4f7c; padding: 1px 4px;', ] @@ -55,7 +55,7 @@ export function interceptPropertySet void, Args extends unknown[], ->(object: { [_ in K]?: T[] }, key: K, ...args: Args): void { +>(object: {[_ in K]?: T[]}, key: K, ...args: Args): void { const arr = object[key] if (arr) for (const cb of arr) cb(...args) } export function pushToArrayProp( - object: { [_ in K]?: T[] }, + object: {[_ in K]?: T[]}, key: K, value: T, ): T[] { @@ -98,12 +98,12 @@ export function trimString(str: string, maxLength: number): string { return str.slice(0, maxLength) + '…' } -export function findIndexById(array: T[], id: string): number { +export function findIndexById(array: T[], id: string): number { for (let i = 0; i < array.length; i++) if (array[i]!.id === id) return i return -1 } -export function findItemById(array: T[], id: string): T | undefined { +export function findItemById(array: T[], id: string): T | undefined { for (let i = 0; i < array.length; i++) { const item = array[i]! if (item.id === id) return item @@ -132,14 +132,15 @@ export function whileArray( } export type ToDyscriminatedUnion< + // eslint-disable-next-line @typescript-eslint/ban-types T extends {}, TK extends PropertyKey = 'type', DK extends void | PropertyKey = void, > = { - [K in keyof T]: { [k in TK]: K } & (DK extends PropertyKey ? { [k in DK]: T[K] } : T[K]) + [K in keyof T]: {[k in TK]: K} & (DK extends PropertyKey ? {[k in DK]: T[K]} : T[K]) }[keyof T] -export function dedupeArrayById(input: T[]): T[] { +export function dedupeArrayById(input: T[]): T[] { const ids = new Set() const deduped: T[] = [] for (let i = input.length - 1; i >= 0; i--) { diff --git a/packages/shared/tsup.config.ts b/packages/shared/tsup.config.ts index ef648a94..c5f30a54 100644 --- a/packages/shared/tsup.config.ts +++ b/packages/shared/tsup.config.ts @@ -2,7 +2,7 @@ import fs from 'fs' import path from 'path' import * as tsup from 'tsup' import * as preset from 'tsup-preset-solid' -import { CI } from '../../configs/tsup.config' +import {CI} from '../../configs/tsup.config' const src = path.resolve(__dirname, 'src') const entries = fs.readdirSync(src) @@ -12,7 +12,7 @@ export default tsup.defineConfig(config => { const parsed_options = preset.parsePresetOptions( { - entries: entries.map(entry => ({ entry: path.join('src', entry) })), + entries: entries.map(entry => ({entry: path.join('src', entry)})), }, watching, ) diff --git a/packages/shared/vite.config.ts b/packages/shared/vite.config.ts index ace0e2b5..42e93c3a 100644 --- a/packages/shared/vite.config.ts +++ b/packages/shared/vite.config.ts @@ -1,2 +1,2 @@ -import { vitestFullConfig } from '../../configs/vitest.config' +import {vitestFullConfig} from '../../configs/vitest.config' export default vitestFullConfig() diff --git a/packages/theme/theme.ts b/packages/theme/theme.ts index d0f0fb87..11a2c843 100644 --- a/packages/theme/theme.ts +++ b/packages/theme/theme.ts @@ -2,8 +2,8 @@ // colors: https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js // spacing and other values: https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js -import { misc } from '@nothing-but/utils' -import type { Prettify, UnionToIntersection } from '@nothing-but/utils/types' +import {misc} from '@nothing-but/utils' +import type {Prettify, UnionToIntersection} from '@nothing-but/utils/types' const cyan = { 50: '#ecfeff', @@ -189,7 +189,7 @@ export const vars = { dom: cssvar('dom-color', amber[600], amber[500]), } as const -export function make_var_styles(root_class: string) { +export function make_var_styles(root_class: string): string { return /*css*/ ` .${root_class} { ${css_vars.map(css_var => `${css_var.name}: ${css_var.light};`).join('')} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e912bd74..51b0e3c4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@changesets/cli': specifier: ^2.26.2 version: 2.26.2 + '@nothing-but/eslint-plugin': + specifier: ^0.1.3 + version: 0.1.3(eslint@8.53.0)(typescript@5.2.2) '@playwright/test': specifier: ^1.39.0 version: 1.39.0 @@ -2538,6 +2541,19 @@ packages: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 + /@nothing-but/eslint-plugin@0.1.3(eslint@8.53.0)(typescript@5.2.2): + resolution: {integrity: sha512-AdJWLQbCOZCUJGzqY7Mp4N9MjMbtL6BLsaxnEH6+JvhATopyDa/+xHYMmNfrSkQS1hKM8L3nDQJ317D3eQyzKQ==} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 + typescript: ~5.2.0 + dependencies: + '@typescript-eslint/utils': 6.11.0(eslint@8.53.0)(typescript@5.2.2) + eslint: 8.53.0 + typescript: 5.2.2 + transitivePeerDependencies: + - supports-color + dev: true + /@nothing-but/utils@0.12.0: resolution: {integrity: sha512-9MPLeulw4SAHkfksn4uZWbxiaGXYqgFu63jlU83NsjxPC0ecYsAgReFGyiyC0INCjpe7p/cZgSGRtxJETyRupw==}