diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 1ce675e940..f23bcc1417 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -146,7 +146,6 @@ }, "devDependencies": { "@jridgewell/trace-mapping": "^0.3.25", - "@neodrag/svelte": "^2.3.2", "@playwright/test": "^1.46.1", "@rollup/plugin-commonjs": "^28.0.1", "@rollup/plugin-node-resolve": "^15.3.0", diff --git a/packages/svelte/src/toolbar/ToolBar.svelte b/packages/svelte/src/toolbar/ToolBar.svelte index e69f17df74..a90d523d0b 100644 --- a/packages/svelte/src/toolbar/ToolBar.svelte +++ b/packages/svelte/src/toolbar/ToolBar.svelte @@ -1,6 +1,7 @@ -
+ + + +
diff --git a/packages/svelte/src/toolbar/index.js b/packages/svelte/src/toolbar/index.js index c04c774d6b..cdc92e3fe8 100644 --- a/packages/svelte/src/toolbar/index.js +++ b/packages/svelte/src/toolbar/index.js @@ -1,8 +1,8 @@ -import {mountUI} from './runtime.svelte.js'; +import { mountUI } from './runtime.svelte.js'; import { configureSvelte } from './configure.svelte.js'; import { svelte_inspector } from './tools/inspector/index.js'; +import { svelte_config } from './tools/config/index.js'; export * from './configure.svelte.js'; - -configureSvelte({tools:[svelte_inspector]}); +configureSvelte({ tools: [svelte_inspector, svelte_config] }); mountUI(); diff --git a/packages/svelte/src/toolbar/public.d.ts b/packages/svelte/src/toolbar/public.d.ts index 9e45573595..7cd58e8432 100644 --- a/packages/svelte/src/toolbar/public.d.ts +++ b/packages/svelte/src/toolbar/public.d.ts @@ -1,3 +1,5 @@ +import type { Component } from 'svelte'; + export * from './index.js'; export interface Tool { @@ -7,6 +9,7 @@ export interface Tool { deactivate: () => void; keyCombo?: string; disabled?: boolean; + component?: Component; } type ToolFn = () => Tool; diff --git a/packages/svelte/src/toolbar/runtime.svelte.js b/packages/svelte/src/toolbar/runtime.svelte.js index 84d366a389..ab33faf252 100644 --- a/packages/svelte/src/toolbar/runtime.svelte.js +++ b/packages/svelte/src/toolbar/runtime.svelte.js @@ -1,20 +1,20 @@ import ToolBar from './ToolBar.svelte'; -import { mount } from 'svelte'; -import {getConfig} from './configure.svelte.js'; +import { mount, unmount } from 'svelte'; +import { getConfig } from './configure.svelte.js'; export function mountUI() { - if(typeof window !== 'undefined') { + if (typeof window !== 'undefined') { const id = 'svelte-toolbar-host'; if (document.getElementById(id) != null) { console.debug('svelte-toolbar-host already exists, skipping'); - return + return; } - const props = $state({config: getConfig()}) + const props = $state({ config: getConfig() }); const el = document.createElement('div'); el.setAttribute('id', id); // appending to documentElement adds it outside of body document.documentElement.appendChild(el); - mount(ToolBar, { target: el,props }); + mount(ToolBar, { target: el, props }); } } diff --git a/packages/svelte/src/toolbar/tools/config/Config.svelte b/packages/svelte/src/toolbar/tools/config/Config.svelte new file mode 100644 index 0000000000..31de3c36b4 --- /dev/null +++ b/packages/svelte/src/toolbar/tools/config/Config.svelte @@ -0,0 +1,48 @@ +
+ +
+
+ +
+
+ +
+
+ +
diff --git a/packages/svelte/src/toolbar/tools/config/index.js b/packages/svelte/src/toolbar/tools/config/index.js new file mode 100644 index 0000000000..940f525d31 --- /dev/null +++ b/packages/svelte/src/toolbar/tools/config/index.js @@ -0,0 +1,24 @@ +import Config from './Config.svelte' + +const icon = ` + + `; + +/** @return {import('../../public.d.ts').ResolvedConfig.tools[0]} */ +export function svelte_config() { + /** @type {Record} */ + + return { + name: 'config', + icon, + keyCombo: 'ctrl-c', + component: Config, + activate: () => { + console.log("activate config") + }, + deactivate: () => { + console.log("de-activate config") + } + } +} + \ No newline at end of file diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts index 85e73b8661..730d5790be 100644 --- a/packages/svelte/types/index.d.ts +++ b/packages/svelte/types/index.d.ts @@ -2549,6 +2549,7 @@ declare module 'svelte/events' { } declare module 'svelte/toolbar' { + import type { Component } from 'svelte'; export interface Tool { name: string; icon: string; // url or svg @@ -2556,6 +2557,7 @@ declare module 'svelte/toolbar' { deactivate: () => void; keyCombo?: string; disabled?: boolean; + component?: Component; } type ToolFn = () => Tool; @@ -2565,12 +2567,11 @@ declare module 'svelte/toolbar' { } export interface ResolvedConfig extends Config { - tools: Tool[] + tools: Tool[]; } - export function configure(options: Partial): void; + export function configureSvelte(options: Partial): void; export function getConfig(): ResolvedConfig; - export function mountUI(): void; export {}; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 23b7dbf29c..3518b0e57e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,9 +105,6 @@ importers: '@jridgewell/trace-mapping': specifier: ^0.3.25 version: 0.3.25 - '@neodrag/svelte': - specifier: ^2.3.2 - version: 2.3.2(svelte@5.28.2) '@playwright/test': specifier: ^1.46.1 version: 1.46.1 @@ -480,11 +477,6 @@ packages: '@manypkg/get-packages@1.1.3': resolution: {integrity: sha512-fo+QhuU3qE/2TQMQmbVMqaQ6EWbMhi4ABWP+O4AM1NqPBuy0OrApV5LO6BrrgnhtAHS2NH6RrVk9OL181tTi8A==} - '@neodrag/svelte@2.3.2': - resolution: {integrity: sha512-1aPgnv2LqikkPEoTVgCPCqtXUXOD7OjCHLAIssTv0hkmyHLG9i697Cu+Tzco4/Q4KgOQXCDnLsa4Fvya5wXP9g==} - peerDependencies: - svelte: ^3.0.0 || ^4.0.0 || ^5.0.0 - '@nodelib/fs.scandir@2.1.5': resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -2129,10 +2121,6 @@ packages: svelte: optional: true - svelte@5.28.2: - resolution: {integrity: sha512-FbWBxgWOpQfhKvoGJv/TFwzqb4EhJbwCD17dB0tEpQiw1XyUEKZJtgm4nA4xq3LLsMo7hu5UY/BOFmroAxKTMg==} - engines: {node: '>=18'} - symbol-tree@3.2.4: resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} @@ -2809,10 +2797,6 @@ snapshots: globby: 11.1.0 read-yaml-file: 1.1.0 - '@neodrag/svelte@2.3.2(svelte@5.28.2)': - dependencies: - svelte: 5.28.2 - '@nodelib/fs.scandir@2.1.5': dependencies: '@nodelib/fs.stat': 2.0.5 @@ -3005,10 +2989,6 @@ snapshots: dependencies: acorn: 8.14.0 - '@sveltejs/acorn-typescript@1.0.5(acorn@8.14.1)': - dependencies: - acorn: 8.14.1 - '@sveltejs/eslint-config@8.1.0(@stylistic/eslint-plugin-js@1.8.0(eslint@9.9.1))(eslint-config-prettier@9.1.0(eslint@9.9.1))(eslint-plugin-n@17.16.1(eslint@9.9.1)(typescript@5.5.4))(eslint-plugin-svelte@2.38.0(eslint@9.9.1)(svelte@packages+svelte))(eslint@9.9.1)(typescript-eslint@8.26.0(eslint@9.9.1)(typescript@5.5.4))(typescript@5.5.4)': dependencies: '@stylistic/eslint-plugin-js': 1.8.0(eslint@9.9.1) @@ -4461,23 +4441,6 @@ snapshots: optionalDependencies: svelte: link:packages/svelte - svelte@5.28.2: - dependencies: - '@ampproject/remapping': 2.3.0 - '@jridgewell/sourcemap-codec': 1.5.0 - '@sveltejs/acorn-typescript': 1.0.5(acorn@8.14.1) - '@types/estree': 1.0.7 - acorn: 8.14.1 - aria-query: 5.3.1 - axobject-query: 4.1.0 - clsx: 2.1.1 - esm-env: 1.2.1 - esrap: 1.4.6 - is-reference: 3.0.3 - locate-character: 3.0.0 - magic-string: 0.30.17 - zimmerframe: 1.1.2 - symbol-tree@3.2.4: {} tapable@2.2.1: {}