@tanstack/devtools-utils 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/solid/esm/dev.js +118 -0
- package/dist/solid/esm/index.d.ts +51 -3
- package/dist/solid/esm/index.js +118 -9
- package/dist/solid/esm/{class.js → server.js} +44 -14
- package/package.json +17 -5
- package/dist/solid/esm/class.d.ts +0 -30
- package/dist/solid/esm/class.js.map +0 -1
- package/dist/solid/esm/index.js.map +0 -1
- package/dist/solid/esm/panel.d.ts +0 -5
- package/dist/solid/esm/panel.js +0 -32
- package/dist/solid/esm/panel.js.map +0 -1
- package/dist/solid/esm/plugin.d.ts +0 -9
- package/dist/solid/esm/plugin.js +0 -24
- package/dist/solid/esm/plugin.js.map +0 -1
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
import { createComponent, template, insert, use } from 'solid-js/web';
|
|
2
|
+
import { onMount, onCleanup } from 'solid-js';
|
|
3
|
+
|
|
4
|
+
// src/solid/class.tsx
|
|
5
|
+
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
|
|
6
|
+
function constructCoreClass(Component) {
|
|
7
|
+
class DevtoolsCore {
|
|
8
|
+
#isMounted = false;
|
|
9
|
+
#dispose;
|
|
10
|
+
#Component;
|
|
11
|
+
#ThemeProvider;
|
|
12
|
+
constructor() {
|
|
13
|
+
}
|
|
14
|
+
async mount(el, theme) {
|
|
15
|
+
const {
|
|
16
|
+
lazy
|
|
17
|
+
} = await import('solid-js');
|
|
18
|
+
const {
|
|
19
|
+
render,
|
|
20
|
+
Portal
|
|
21
|
+
} = await import('solid-js/web');
|
|
22
|
+
if (this.#isMounted) {
|
|
23
|
+
throw new Error("Devtools is already mounted");
|
|
24
|
+
}
|
|
25
|
+
const mountTo = el;
|
|
26
|
+
const dispose = render(() => {
|
|
27
|
+
this.#Component = lazy(async () => ({
|
|
28
|
+
default: Component
|
|
29
|
+
}));
|
|
30
|
+
this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
|
|
31
|
+
default: mod.ThemeContextProvider
|
|
32
|
+
})));
|
|
33
|
+
const Devtools = this.#Component;
|
|
34
|
+
const ThemeProvider = this.#ThemeProvider;
|
|
35
|
+
return createComponent(Portal, {
|
|
36
|
+
mount: mountTo,
|
|
37
|
+
get children() {
|
|
38
|
+
var _el$ = _tmpl$();
|
|
39
|
+
_el$.style.setProperty("height", "100%");
|
|
40
|
+
insert(_el$, createComponent(ThemeProvider, {
|
|
41
|
+
theme,
|
|
42
|
+
get children() {
|
|
43
|
+
return createComponent(Devtools, {});
|
|
44
|
+
}
|
|
45
|
+
}));
|
|
46
|
+
return _el$;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}, mountTo);
|
|
50
|
+
this.#isMounted = true;
|
|
51
|
+
this.#dispose = dispose;
|
|
52
|
+
}
|
|
53
|
+
unmount() {
|
|
54
|
+
if (!this.#isMounted) {
|
|
55
|
+
throw new Error("Devtools is not mounted");
|
|
56
|
+
}
|
|
57
|
+
this.#dispose?.();
|
|
58
|
+
this.#isMounted = false;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
class NoOpDevtoolsCore extends DevtoolsCore {
|
|
62
|
+
constructor() {
|
|
63
|
+
super();
|
|
64
|
+
}
|
|
65
|
+
async mount(_el, _theme) {
|
|
66
|
+
}
|
|
67
|
+
unmount() {
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
return [DevtoolsCore, NoOpDevtoolsCore];
|
|
71
|
+
}
|
|
72
|
+
var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
|
|
73
|
+
function createSolidPanel(CoreClass) {
|
|
74
|
+
function Panel(props) {
|
|
75
|
+
let devToolRef;
|
|
76
|
+
onMount(() => {
|
|
77
|
+
const devtools = new CoreClass();
|
|
78
|
+
if (devToolRef) {
|
|
79
|
+
devtools.mount(devToolRef, props?.theme ?? "dark");
|
|
80
|
+
onCleanup(() => {
|
|
81
|
+
devtools.unmount();
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
return (() => {
|
|
86
|
+
var _el$ = _tmpl$2();
|
|
87
|
+
var _ref$ = devToolRef;
|
|
88
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
|
|
89
|
+
_el$.style.setProperty("height", "100%");
|
|
90
|
+
return _el$;
|
|
91
|
+
})();
|
|
92
|
+
}
|
|
93
|
+
function NoOpPanel(_props) {
|
|
94
|
+
return [];
|
|
95
|
+
}
|
|
96
|
+
return [Panel, NoOpPanel];
|
|
97
|
+
}
|
|
98
|
+
function createSolidPlugin(name, Component) {
|
|
99
|
+
function Plugin() {
|
|
100
|
+
return {
|
|
101
|
+
name,
|
|
102
|
+
render: (_el, theme) => {
|
|
103
|
+
return createComponent(Component, {
|
|
104
|
+
theme
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
function NoOpPlugin() {
|
|
110
|
+
return {
|
|
111
|
+
name,
|
|
112
|
+
render: (_el, _theme) => []
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
return [Plugin, NoOpPlugin];
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export { constructCoreClass, createSolidPanel, createSolidPlugin };
|
|
@@ -1,3 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import * as solid_js from 'solid-js';
|
|
2
|
+
import { JSX } from 'solid-js';
|
|
3
|
+
|
|
4
|
+
/** @jsxImportSource solid-js - we use Solid.js as JSX here */
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Constructs the core class for the Devtools.
|
|
8
|
+
* This utility is used to construct a lazy loaded Solid component for the Devtools.
|
|
9
|
+
* It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.
|
|
10
|
+
* The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude
|
|
11
|
+
* the Devtools from your application.
|
|
12
|
+
* @param importPath The path to the Solid component to be lazily imported
|
|
13
|
+
* @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
|
|
14
|
+
*/
|
|
15
|
+
declare function constructCoreClass(Component: () => JSX.Element): readonly [{
|
|
16
|
+
new (): {
|
|
17
|
+
#isMounted: boolean;
|
|
18
|
+
#dispose?: () => void;
|
|
19
|
+
#Component: any;
|
|
20
|
+
#ThemeProvider: any;
|
|
21
|
+
mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
|
|
22
|
+
unmount(): void;
|
|
23
|
+
};
|
|
24
|
+
}, {
|
|
25
|
+
new (): {
|
|
26
|
+
mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
|
|
27
|
+
unmount(): void;
|
|
28
|
+
#isMounted: boolean;
|
|
29
|
+
#dispose?: () => void;
|
|
30
|
+
#Component: any;
|
|
31
|
+
#ThemeProvider: any;
|
|
32
|
+
};
|
|
33
|
+
}];
|
|
34
|
+
type ClassType = ReturnType<typeof constructCoreClass>[0];
|
|
35
|
+
|
|
36
|
+
interface DevtoolsPanelProps {
|
|
37
|
+
theme?: 'light' | 'dark';
|
|
38
|
+
}
|
|
39
|
+
declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(CoreClass: ClassType): readonly [(props: TComponentProps) => solid_js.JSX.Element, (_props: TComponentProps) => solid_js.JSX.Element];
|
|
40
|
+
|
|
41
|
+
/** @jsxImportSource solid-js - we use Solid.js as JSX here */
|
|
42
|
+
|
|
43
|
+
declare function createSolidPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
|
|
44
|
+
name: string;
|
|
45
|
+
render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
|
|
46
|
+
}, () => {
|
|
47
|
+
name: string;
|
|
48
|
+
render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
|
|
49
|
+
}];
|
|
50
|
+
|
|
51
|
+
export { type ClassType, type DevtoolsPanelProps, constructCoreClass, createSolidPanel, createSolidPlugin };
|
package/dist/solid/esm/index.js
CHANGED
|
@@ -1,9 +1,118 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { createComponent, template, insert, use } from 'solid-js/web';
|
|
2
|
+
import { onMount, onCleanup } from 'solid-js';
|
|
3
|
+
|
|
4
|
+
// src/solid/class.tsx
|
|
5
|
+
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
|
|
6
|
+
function constructCoreClass(Component) {
|
|
7
|
+
class DevtoolsCore {
|
|
8
|
+
#isMounted = false;
|
|
9
|
+
#dispose;
|
|
10
|
+
#Component;
|
|
11
|
+
#ThemeProvider;
|
|
12
|
+
constructor() {
|
|
13
|
+
}
|
|
14
|
+
async mount(el, theme) {
|
|
15
|
+
const {
|
|
16
|
+
lazy
|
|
17
|
+
} = await import('solid-js');
|
|
18
|
+
const {
|
|
19
|
+
render,
|
|
20
|
+
Portal
|
|
21
|
+
} = await import('solid-js/web');
|
|
22
|
+
if (this.#isMounted) {
|
|
23
|
+
throw new Error("Devtools is already mounted");
|
|
24
|
+
}
|
|
25
|
+
const mountTo = el;
|
|
26
|
+
const dispose = render(() => {
|
|
27
|
+
this.#Component = lazy(async () => ({
|
|
28
|
+
default: Component
|
|
29
|
+
}));
|
|
30
|
+
this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
|
|
31
|
+
default: mod.ThemeContextProvider
|
|
32
|
+
})));
|
|
33
|
+
const Devtools = this.#Component;
|
|
34
|
+
const ThemeProvider = this.#ThemeProvider;
|
|
35
|
+
return createComponent(Portal, {
|
|
36
|
+
mount: mountTo,
|
|
37
|
+
get children() {
|
|
38
|
+
var _el$ = _tmpl$();
|
|
39
|
+
_el$.style.setProperty("height", "100%");
|
|
40
|
+
insert(_el$, createComponent(ThemeProvider, {
|
|
41
|
+
theme,
|
|
42
|
+
get children() {
|
|
43
|
+
return createComponent(Devtools, {});
|
|
44
|
+
}
|
|
45
|
+
}));
|
|
46
|
+
return _el$;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}, mountTo);
|
|
50
|
+
this.#isMounted = true;
|
|
51
|
+
this.#dispose = dispose;
|
|
52
|
+
}
|
|
53
|
+
unmount() {
|
|
54
|
+
if (!this.#isMounted) {
|
|
55
|
+
throw new Error("Devtools is not mounted");
|
|
56
|
+
}
|
|
57
|
+
this.#dispose?.();
|
|
58
|
+
this.#isMounted = false;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
class NoOpDevtoolsCore extends DevtoolsCore {
|
|
62
|
+
constructor() {
|
|
63
|
+
super();
|
|
64
|
+
}
|
|
65
|
+
async mount(_el, _theme) {
|
|
66
|
+
}
|
|
67
|
+
unmount() {
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
return [DevtoolsCore, NoOpDevtoolsCore];
|
|
71
|
+
}
|
|
72
|
+
var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
|
|
73
|
+
function createSolidPanel(CoreClass) {
|
|
74
|
+
function Panel(props) {
|
|
75
|
+
let devToolRef;
|
|
76
|
+
onMount(() => {
|
|
77
|
+
const devtools = new CoreClass();
|
|
78
|
+
if (devToolRef) {
|
|
79
|
+
devtools.mount(devToolRef, props?.theme ?? "dark");
|
|
80
|
+
onCleanup(() => {
|
|
81
|
+
devtools.unmount();
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
return (() => {
|
|
86
|
+
var _el$ = _tmpl$2();
|
|
87
|
+
var _ref$ = devToolRef;
|
|
88
|
+
typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
|
|
89
|
+
_el$.style.setProperty("height", "100%");
|
|
90
|
+
return _el$;
|
|
91
|
+
})();
|
|
92
|
+
}
|
|
93
|
+
function NoOpPanel(_props) {
|
|
94
|
+
return [];
|
|
95
|
+
}
|
|
96
|
+
return [Panel, NoOpPanel];
|
|
97
|
+
}
|
|
98
|
+
function createSolidPlugin(name, Component) {
|
|
99
|
+
function Plugin() {
|
|
100
|
+
return {
|
|
101
|
+
name,
|
|
102
|
+
render: (_el, theme) => {
|
|
103
|
+
return createComponent(Component, {
|
|
104
|
+
theme
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
function NoOpPlugin() {
|
|
110
|
+
return {
|
|
111
|
+
name,
|
|
112
|
+
render: (_el, _theme) => []
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
return [Plugin, NoOpPlugin];
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
export { constructCoreClass, createSolidPanel, createSolidPlugin };
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import { createComponent,
|
|
2
|
-
|
|
1
|
+
import { createComponent, ssr, escape } from 'solid-js/web';
|
|
2
|
+
import { onMount } from 'solid-js';
|
|
3
|
+
|
|
4
|
+
// src/solid/class.tsx
|
|
5
|
+
var _tmpl$ = ['<div style="', '">', "</div>"];
|
|
3
6
|
function constructCoreClass(Component) {
|
|
4
7
|
class DevtoolsCore {
|
|
5
8
|
#isMounted = false;
|
|
@@ -11,11 +14,11 @@ function constructCoreClass(Component) {
|
|
|
11
14
|
async mount(el, theme) {
|
|
12
15
|
const {
|
|
13
16
|
lazy
|
|
14
|
-
} = await import(
|
|
17
|
+
} = await import('solid-js');
|
|
15
18
|
const {
|
|
16
19
|
render,
|
|
17
20
|
Portal
|
|
18
|
-
} = await import(
|
|
21
|
+
} = await import('solid-js/web');
|
|
19
22
|
if (this.#isMounted) {
|
|
20
23
|
throw new Error("Devtools is already mounted");
|
|
21
24
|
}
|
|
@@ -24,7 +27,7 @@ function constructCoreClass(Component) {
|
|
|
24
27
|
this.#Component = lazy(async () => ({
|
|
25
28
|
default: Component
|
|
26
29
|
}));
|
|
27
|
-
this.#ThemeProvider = lazy(() => import(
|
|
30
|
+
this.#ThemeProvider = lazy(() => import('@tanstack/devtools-ui').then((mod) => ({
|
|
28
31
|
default: mod.ThemeContextProvider
|
|
29
32
|
})));
|
|
30
33
|
const Devtools = this.#Component;
|
|
@@ -32,15 +35,12 @@ function constructCoreClass(Component) {
|
|
|
32
35
|
return createComponent(Portal, {
|
|
33
36
|
mount: mountTo,
|
|
34
37
|
get children() {
|
|
35
|
-
|
|
36
|
-
_el$.style.setProperty("height", "100%");
|
|
37
|
-
insert(_el$, createComponent(ThemeProvider, {
|
|
38
|
+
return ssr(_tmpl$, "height:100%", escape(createComponent(ThemeProvider, {
|
|
38
39
|
theme,
|
|
39
40
|
get children() {
|
|
40
41
|
return createComponent(Devtools, {});
|
|
41
42
|
}
|
|
42
|
-
}));
|
|
43
|
-
return _el$;
|
|
43
|
+
})));
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
46
|
}, mountTo);
|
|
@@ -66,7 +66,37 @@ function constructCoreClass(Component) {
|
|
|
66
66
|
}
|
|
67
67
|
return [DevtoolsCore, NoOpDevtoolsCore];
|
|
68
68
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
var _tmpl$2 = ['<div style="', '"></div>'];
|
|
70
|
+
function createSolidPanel(CoreClass) {
|
|
71
|
+
function Panel(props) {
|
|
72
|
+
onMount(() => {
|
|
73
|
+
new CoreClass();
|
|
74
|
+
});
|
|
75
|
+
return ssr(_tmpl$2, "height:100%");
|
|
76
|
+
}
|
|
77
|
+
function NoOpPanel(_props) {
|
|
78
|
+
return [];
|
|
79
|
+
}
|
|
80
|
+
return [Panel, NoOpPanel];
|
|
81
|
+
}
|
|
82
|
+
function createSolidPlugin(name, Component) {
|
|
83
|
+
function Plugin() {
|
|
84
|
+
return {
|
|
85
|
+
name,
|
|
86
|
+
render: (_el, theme) => {
|
|
87
|
+
return createComponent(Component, {
|
|
88
|
+
theme
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
function NoOpPlugin() {
|
|
94
|
+
return {
|
|
95
|
+
name,
|
|
96
|
+
render: (_el, _theme) => []
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
return [Plugin, NoOpPlugin];
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
export { constructCoreClass, createSolidPanel, createSolidPlugin };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/devtools-utils",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "TanStack Devtools utilities for creating your own devtools.",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,10 +26,20 @@
|
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
"./solid": {
|
|
29
|
-
"
|
|
29
|
+
"browser": {
|
|
30
|
+
"development": {
|
|
31
|
+
"types": "./dist/solid/esm/index.d.ts",
|
|
32
|
+
"import": "./dist/solid/esm/dev.js"
|
|
33
|
+
},
|
|
30
34
|
"types": "./dist/solid/esm/index.d.ts",
|
|
31
|
-
"
|
|
32
|
-
}
|
|
35
|
+
"import": "./dist/solid/esm/index.js"
|
|
36
|
+
},
|
|
37
|
+
"node": {
|
|
38
|
+
"types": "./dist/solid/esm/index.d.ts",
|
|
39
|
+
"import": "./dist/solid/esm/server.js"
|
|
40
|
+
},
|
|
41
|
+
"types": "./dist/solid/esm/index.d.ts",
|
|
42
|
+
"import": "./dist/solid/esm/index.js"
|
|
33
43
|
},
|
|
34
44
|
"./package.json": "./package.json"
|
|
35
45
|
},
|
|
@@ -61,6 +71,8 @@
|
|
|
61
71
|
"src"
|
|
62
72
|
],
|
|
63
73
|
"devDependencies": {
|
|
74
|
+
"tsup": "^8.5.0",
|
|
75
|
+
"tsup-preset-solid": "^2.2.0",
|
|
64
76
|
"vite-plugin-solid": "^2.11.8"
|
|
65
77
|
},
|
|
66
78
|
"scripts": {
|
|
@@ -71,6 +83,6 @@
|
|
|
71
83
|
"test:lib:dev": "pnpm test:lib --watch",
|
|
72
84
|
"test:types": "tsc",
|
|
73
85
|
"test:build": "publint --strict",
|
|
74
|
-
"build": "vite build &&
|
|
86
|
+
"build": "vite build && tsup "
|
|
75
87
|
}
|
|
76
88
|
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { JSX } from 'solid-js';
|
|
2
|
-
/**
|
|
3
|
-
* Constructs the core class for the Devtools.
|
|
4
|
-
* This utility is used to construct a lazy loaded Solid component for the Devtools.
|
|
5
|
-
* It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.
|
|
6
|
-
* The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude
|
|
7
|
-
* the Devtools from your application.
|
|
8
|
-
* @param importPath The path to the Solid component to be lazily imported
|
|
9
|
-
* @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class
|
|
10
|
-
*/
|
|
11
|
-
export declare function constructCoreClass(Component: () => JSX.Element): readonly [{
|
|
12
|
-
new (): {
|
|
13
|
-
#isMounted: boolean;
|
|
14
|
-
#dispose?: () => void;
|
|
15
|
-
#Component: any;
|
|
16
|
-
#ThemeProvider: any;
|
|
17
|
-
mount<T extends HTMLElement>(el: T, theme: "light" | "dark"): Promise<void>;
|
|
18
|
-
unmount(): void;
|
|
19
|
-
};
|
|
20
|
-
}, {
|
|
21
|
-
new (): {
|
|
22
|
-
mount<T extends HTMLElement>(_el: T, _theme: "light" | "dark"): Promise<void>;
|
|
23
|
-
unmount(): void;
|
|
24
|
-
#isMounted: boolean;
|
|
25
|
-
#dispose?: () => void;
|
|
26
|
-
#Component: any;
|
|
27
|
-
#ThemeProvider: any;
|
|
28
|
-
};
|
|
29
|
-
}];
|
|
30
|
-
export type ClassType = ReturnType<typeof constructCoreClass>[0];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"class.js","sources":["../../../src/solid/class.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport type { JSX } from 'solid-js'\n\n/**\n * Constructs the core class for the Devtools.\n * This utility is used to construct a lazy loaded Solid component for the Devtools.\n * It returns a tuple containing the main DevtoolsCore class and a NoOpDevtoolsCore class.\n * The NoOpDevtoolsCore class is a no-op implementation that can be used for production if you want to explicitly exclude\n * the Devtools from your application.\n * @param importPath The path to the Solid component to be lazily imported\n * @returns Tuple containing the DevtoolsCore class and a NoOpDevtoolsCore class\n */\nexport function constructCoreClass(Component: () => JSX.Element) {\n class DevtoolsCore {\n #isMounted = false\n #dispose?: () => void\n #Component: any\n #ThemeProvider: any\n\n constructor() {}\n\n async mount<T extends HTMLElement>(el: T, theme: 'light' | 'dark') {\n const { lazy } = await import('solid-js')\n const { render, Portal } = await import('solid-js/web')\n if (this.#isMounted) {\n throw new Error('Devtools is already mounted')\n }\n const mountTo = el\n const dispose = render(() => {\n // eslint-disable-next-line @typescript-eslint/require-await\n this.#Component = lazy(async () => ({ default: Component }))\n\n this.#ThemeProvider = lazy(() =>\n import('@tanstack/devtools-ui').then((mod) => ({\n default: mod.ThemeContextProvider,\n })),\n )\n const Devtools = this.#Component\n const ThemeProvider = this.#ThemeProvider\n\n return (\n <Portal mount={mountTo}>\n <div style={{ height: '100%' }}>\n <ThemeProvider theme={theme}>\n <Devtools />\n </ThemeProvider>\n </div>\n </Portal>\n )\n }, mountTo)\n this.#isMounted = true\n this.#dispose = dispose\n }\n\n unmount() {\n if (!this.#isMounted) {\n throw new Error('Devtools is not mounted')\n }\n this.#dispose?.()\n this.#isMounted = false\n }\n }\n class NoOpDevtoolsCore extends DevtoolsCore {\n constructor() {\n super()\n }\n async mount<T extends HTMLElement>(_el: T, _theme: 'light' | 'dark') {}\n unmount() {}\n }\n return [DevtoolsCore, NoOpDevtoolsCore] as const\n}\n\nexport type ClassType = ReturnType<typeof constructCoreClass>[0]\n"],"names":["constructCoreClass","Component","DevtoolsCore","constructor","mount","el","theme","lazy","render","Portal","Error","mountTo","dispose","default","then","mod","ThemeContextProvider","Devtools","ThemeProvider","_$createComponent","children","_el$","_$getNextElement","_tmpl$","style","setProperty","_$insert","unmount","NoOpDevtoolsCore","_el","_theme"],"mappings":";;AAaO,SAASA,mBAAmBC,WAA8B;AAAA,EAC/D,MAAMC,aAAa;AAAA,IACjB,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IAEAC,cAAc;AAAA,IAAC;AAAA,IAEf,MAAMC,MAA6BC,IAAOC,OAAyB;AACjE,YAAM;AAAA,QAAEC;AAAAA,MAAAA,IAAS,MAAM,OAAO,UAAU;AACxC,YAAM;AAAA,QAAEC;AAAAA,QAAQC;AAAAA,MAAAA,IAAW,MAAM,OAAO,cAAc;AACtD,UAAI,KAAK,YAAY;AACnB,cAAM,IAAIC,MAAM,6BAA6B;AAAA,MAC/C;AACA,YAAMC,UAAUN;AAChB,YAAMO,UAAUJ,OAAO,MAAM;AAE3B,aAAK,aAAaD,KAAK,aAAa;AAAA,UAAEM,SAASZ;AAAAA,QAAAA,EAAY;AAE3D,aAAK,iBAAiBM,KAAK,MACzB,OAAO,uBAAuB,EAAEO,KAAMC,CAAAA,SAAS;AAAA,UAC7CF,SAASE,IAAIC;AAAAA,QAAAA,EACb,CACJ;AACA,cAAMC,WAAW,KAAK;AACtB,cAAMC,gBAAgB,KAAK;AAE3B,eAAAC,gBACGV,QAAM;AAAA,UAACL,OAAOO;AAAAA,UAAO,IAAAS,WAAA;AAAA,gBAAAC,OAAAC,eAAAC,MAAA;AAAAF,iBAAAG,MAAAC,YAAA,UAAA,MAAA;AAAAC,mBAAAL,MAAAF,gBAEjBD,eAAa;AAAA,cAACZ;AAAAA,cAAY,IAAAc,WAAA;AAAA,uBAAAD,gBACxBF,UAAQ,EAAA;AAAA,cAAA;AAAA,YAAA,CAAA,CAAA;AAAA,mBAAAI;AAAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAKnB,GAAGV,OAAO;AACV,WAAK,aAAa;AAClB,WAAK,WAAWC;AAAAA,IAClB;AAAA,IAEAe,UAAU;AACR,UAAI,CAAC,KAAK,YAAY;AACpB,cAAM,IAAIjB,MAAM,yBAAyB;AAAA,MAC3C;AACA,WAAK,WAAA;AACL,WAAK,aAAa;AAAA,IACpB;AAAA,EAAA;AAAA,EAEF,MAAMkB,yBAAyB1B,aAAa;AAAA,IAC1CC,cAAc;AACZ,YAAA;AAAA,IACF;AAAA,IACA,MAAMC,MAA6ByB,KAAQC,QAA0B;AAAA,IAAC;AAAA,IACtEH,UAAU;AAAA,IAAC;AAAA,EAAA;AAEb,SAAO,CAACzB,cAAc0B,gBAAgB;AACxC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ClassType } from './class.js';
|
|
2
|
-
export interface DevtoolsPanelProps {
|
|
3
|
-
theme?: 'light' | 'dark';
|
|
4
|
-
}
|
|
5
|
-
export declare function createSolidPanel<TComponentProps extends DevtoolsPanelProps | undefined>(CoreClass: ClassType): readonly [(props: TComponentProps) => import("solid-js").JSX.Element, (_props: TComponentProps) => import("solid-js").JSX.Element];
|
package/dist/solid/esm/panel.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { getNextElement, template, use } from "solid-js/web";
|
|
2
|
-
import { onMount, onCleanup } from "solid-js";
|
|
3
|
-
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
|
|
4
|
-
function createSolidPanel(CoreClass) {
|
|
5
|
-
function Panel(props) {
|
|
6
|
-
let devToolRef;
|
|
7
|
-
onMount(() => {
|
|
8
|
-
const devtools = new CoreClass();
|
|
9
|
-
if (devToolRef) {
|
|
10
|
-
devtools.mount(devToolRef, props?.theme ?? "dark");
|
|
11
|
-
onCleanup(() => {
|
|
12
|
-
devtools.unmount();
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
return (() => {
|
|
17
|
-
var _el$ = getNextElement(_tmpl$);
|
|
18
|
-
var _ref$ = devToolRef;
|
|
19
|
-
typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
|
|
20
|
-
_el$.style.setProperty("height", "100%");
|
|
21
|
-
return _el$;
|
|
22
|
-
})();
|
|
23
|
-
}
|
|
24
|
-
function NoOpPanel(_props) {
|
|
25
|
-
return [];
|
|
26
|
-
}
|
|
27
|
-
return [Panel, NoOpPanel];
|
|
28
|
-
}
|
|
29
|
-
export {
|
|
30
|
-
createSolidPanel
|
|
31
|
-
};
|
|
32
|
-
//# sourceMappingURL=panel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"panel.js","sources":["../../../src/solid/panel.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport { onCleanup, onMount } from 'solid-js'\nimport type { ClassType } from './class'\n\nexport interface DevtoolsPanelProps {\n theme?: 'light' | 'dark'\n}\n\nexport function createSolidPanel<\n TComponentProps extends DevtoolsPanelProps | undefined,\n>(CoreClass: ClassType) {\n function Panel(props: TComponentProps) {\n let devToolRef: HTMLDivElement | undefined\n\n onMount(() => {\n const devtools = new CoreClass()\n\n if (devToolRef) {\n devtools.mount(devToolRef, props?.theme ?? 'dark')\n\n onCleanup(() => {\n devtools.unmount()\n })\n }\n })\n\n return <div style={{ height: '100%' }} ref={devToolRef} />\n }\n\n function NoOpPanel(_props: TComponentProps) {\n return <></>\n }\n\n return [Panel, NoOpPanel] as const\n}\n"],"names":["createSolidPanel","CoreClass","Panel","props","devToolRef","onMount","devtools","mount","theme","onCleanup","unmount","_el$","_$getNextElement","_tmpl$","_ref$","_$use","style","setProperty","NoOpPanel","_props"],"mappings":";;;AASO,SAASA,iBAEdC,WAAsB;AACtB,WAASC,MAAMC,OAAwB;AACrC,QAAIC;AAEJC,YAAQ,MAAM;AACZ,YAAMC,WAAW,IAAIL,UAAAA;AAErB,UAAIG,YAAY;AACdE,iBAASC,MAAMH,YAAYD,OAAOK,SAAS,MAAM;AAEjDC,kBAAU,MAAM;AACdH,mBAASI,QAAAA;AAAAA,QACX,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAED,YAAA,MAAA;AAAA,UAAAC,OAAAC,eAAAC,MAAA;AAAA,UAAAC,QAA4CV;AAAU,aAAAU,UAAA,aAAAC,IAAAD,OAAAH,IAAA,IAAVP,aAAUO;AAAAA,WAAAK,MAAAC,YAAA,UAAA,MAAA;AAAA,aAAAN;AAAAA,IAAA,GAAA;AAAA,EACxD;AAEA,WAASO,UAAUC,QAAyB;AAC1C,WAAA,CAAA;AAAA,EACF;AAEA,SAAO,CAACjB,OAAOgB,SAAS;AAC1B;"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { JSX } from 'solid-js';
|
|
2
|
-
import { DevtoolsPanelProps } from './panel.js';
|
|
3
|
-
export declare function createSolidPlugin(name: string, Component: (props: DevtoolsPanelProps) => JSX.Element): readonly [() => {
|
|
4
|
-
name: string;
|
|
5
|
-
render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
|
|
6
|
-
}, () => {
|
|
7
|
-
name: string;
|
|
8
|
-
render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
|
|
9
|
-
}];
|
package/dist/solid/esm/plugin.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { createComponent } from "solid-js/web";
|
|
2
|
-
function createSolidPlugin(name, Component) {
|
|
3
|
-
function Plugin() {
|
|
4
|
-
return {
|
|
5
|
-
name,
|
|
6
|
-
render: (_el, theme) => {
|
|
7
|
-
return createComponent(Component, {
|
|
8
|
-
theme
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
function NoOpPlugin() {
|
|
14
|
-
return {
|
|
15
|
-
name,
|
|
16
|
-
render: (_el, _theme) => []
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
return [Plugin, NoOpPlugin];
|
|
20
|
-
}
|
|
21
|
-
export {
|
|
22
|
-
createSolidPlugin
|
|
23
|
-
};
|
|
24
|
-
//# sourceMappingURL=plugin.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.js","sources":["../../../src/solid/plugin.tsx"],"sourcesContent":["/** @jsxImportSource solid-js - we use Solid.js as JSX here */\n\nimport type { JSX } from 'solid-js'\nimport type { DevtoolsPanelProps } from './panel'\n\nexport function createSolidPlugin(\n name: string,\n Component: (props: DevtoolsPanelProps) => JSX.Element,\n) {\n function Plugin() {\n return {\n name: name,\n render: (_el: HTMLElement, theme: 'light' | 'dark') => {\n return <Component theme={theme} />\n },\n }\n }\n function NoOpPlugin() {\n return {\n name: name,\n render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,\n }\n }\n return [Plugin, NoOpPlugin] as const\n}\n"],"names":["createSolidPlugin","name","Component","Plugin","render","_el","theme","_$createComponent","NoOpPlugin","_theme"],"mappings":";AAKO,SAASA,kBACdC,MACAC,WACA;AACA,WAASC,SAAS;AAChB,WAAO;AAAA,MACLF;AAAAA,MACAG,QAAQA,CAACC,KAAkBC,UAA4B;AACrD,eAAAC,gBAAQL,WAAS;AAAA,UAACI;AAAAA,QAAAA,CAAY;AAAA,MAChC;AAAA,IAAA;AAAA,EAEJ;AACA,WAASE,aAAa;AACpB,WAAO;AAAA,MACLP;AAAAA,MACAG,QAAQA,CAACC,KAAkBI,WAAwB,CAAA;AAAA,IAAA;AAAA,EAEvD;AACA,SAAO,CAACN,QAAQK,UAAU;AAC5B;"}
|