@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.
@@ -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
- export * from './class.js';
2
- export * from './panel.js';
3
- export * from './plugin.js';
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 };
@@ -1,9 +1,118 @@
1
- import { constructCoreClass } from "./class.js";
2
- import { createSolidPanel } from "./panel.js";
3
- import { createSolidPlugin } from "./plugin.js";
4
- export {
5
- constructCoreClass,
6
- createSolidPanel,
7
- createSolidPlugin
8
- };
9
- //# sourceMappingURL=index.js.map
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, getNextElement, template, insert } from "solid-js/web";
2
- var _tmpl$ = /* @__PURE__ */ template(`<div>`);
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("solid-js");
17
+ } = await import('solid-js');
15
18
  const {
16
19
  render,
17
20
  Portal
18
- } = await import("solid-js/web");
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("@tanstack/devtools-ui").then((mod) => ({
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
- var _el$ = getNextElement(_tmpl$);
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
- export {
70
- constructCoreClass
71
- };
72
- //# sourceMappingURL=class.js.map
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.1",
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
- "import": {
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
- "default": "./dist/solid/esm/index.js"
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 && vite build --config ./vite.config.solid.ts "
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];
@@ -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
- }];
@@ -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;"}