@qwik.dev/devtools 0.2.0 → 0.2.1

package/dist/ui/features/CodeBreack/CodeBreack.qwik.mjs

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal } from "@qwik.dev/core";
+import { StateParser } from "./StateParser.qwik.mjs";
+import { HtmlParser } from "./HtmlParser.qwik.mjs";
+const CodeBreack = component$(() => {
+  useStyles$(`
+  .code-output-container {
+    overflow-x: auto;
+    overflow-y: auto;
+  }
+  .code-output-container > div {
+    width: fit-content;
+    min-width: 100%;
+  }
+  .code-output-container pre[class*='language-'] {
+    margin: 0;
+    min-width: max-content;
+  }
+  `);
+  const currentTab = useSignal("state");
+  return /* @__PURE__ */ jsxs("div", {
+    class: "space-y-6 h-full overflow-hidden",
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        class: "flex justify-center",
+        children: /* @__PURE__ */ jsxs("div", {
+          class: "inline-flex rounded-xl border border-border bg-background p-0.5",
+          children: [
+            /* @__PURE__ */ jsx("button", {
+              onClick$: () => currentTab.value = "state",
+              class: {
+                "px-3 md:px-4 py-2 rounded-lg text-sm font-medium transition-colors": true,
+                "bg-accent text-white shadow": currentTab.value === "state",
+                "text-muted-foreground hover:bg-foreground/5": currentTab.value !== "state"
+              },
+              children: "State Parser"
+            }),
+            /* @__PURE__ */ jsx("button", {
+              onClick$: () => currentTab.value = "html",
+              class: {
+                "px-3 md:px-4 py-2 rounded-lg text-sm font-medium transition-colors": true,
+                "bg-accent text-white shadow": currentTab.value === "html",
+                "text-muted-foreground hover:bg-foreground/5": currentTab.value !== "html"
+              },
+              children: "HTML Parser"
+            })
+          ]
+        })
+      }),
+      currentTab.value === "state" && /* @__PURE__ */ jsx(StateParser, {}),
+      currentTab.value === "html" && /* @__PURE__ */ jsx(HtmlParser, {})
+    ]
+  });
+});
+export {
+  CodeBreack
+};

package/dist/ui/features/CodeBreack/HtmlParser.qwik.mjs

@@ -0,0 +1,155 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal, $, useVisibleTask$ } from "@qwik.dev/core";
+import { _getDomContainer, _vnode_toString } from "@qwik.dev/core/internal";
+import { createHighlighter } from "../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.mjs";
+const HtmlParser = component$(() => {
+  useStyles$(`
+    pre.shiki { overflow: auto; padding: 10px; height: 100%; }
+  `);
+  const inputHtml = useSignal("");
+  const parsingTime = useSignal(null);
+  const htmlResult = useSignal("");
+  const highlightedHtml = useSignal("");
+  const onParseHtml$ = $(() => {
+    if (!inputHtml.value.trim()) {
+      parsingTime.value = null;
+      htmlResult.value = "// Paste HTML on the left to parse";
+      return;
+    }
+    const startTime = performance.now();
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(inputHtml.value, "text/html");
+      let output = "";
+      try {
+        const container = _getDomContainer(doc.documentElement);
+        if (container) {
+          output += "// Qwik Container Found:\n";
+          output += `- Container Type: ${container.qContainer}
+`;
+          output += `- Manifest Hash: ${container.qManifestHash}
+
+`;
+          try {
+            const vdomTree = _vnode_toString.call(container.rootVNode, Number.MAX_SAFE_INTEGER, "", true, false, false);
+            output += "// VNode Tree:\n" + vdomTree + "\n\n";
+          } catch (vnodeErr) {
+            output += "// VNode parsing error: " + vnodeErr + "\n\n";
+          }
+        } else {
+          output = "// No Qwik container found in the HTML";
+        }
+      } catch (containerErr) {
+        output = "// No Qwik container found or error: " + containerErr;
+      }
+      parsingTime.value = performance.now() - startTime;
+      htmlResult.value = output;
+      return;
+    } catch (error) {
+      parsingTime.value = performance.now() - startTime;
+      htmlResult.value = `// Error parsing HTML: ${error instanceof Error ? error.message : "Invalid HTML format"}
+
+// Raw input:
+${inputHtml.value}`;
+      return;
+    }
+  });
+  const shikiRef = useSignal(null);
+  useVisibleTask$(async ({ track }) => {
+    track(() => htmlResult.value);
+    if (!htmlResult.value) {
+      highlightedHtml.value = "";
+      return;
+    }
+    if (!shikiRef.value) {
+      shikiRef.value = await createHighlighter({
+        themes: [
+          "nord"
+        ],
+        langs: [
+          "html"
+        ]
+      });
+    }
+    highlightedHtml.value = shikiRef.value.codeToHtml(htmlResult.value, {
+      lang: "html",
+      theme: "nord"
+    });
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "grid grid-cols-1 gap-4 md:grid-cols-2",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "rounded-xl border border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between border-b border-border p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Input HTML"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "p-3 space-y-3 flex-1 min-h-0 flex-col",
+            children: [
+              /* @__PURE__ */ jsx("textarea", {
+                value: inputHtml.value,
+                onInput$: (e, t) => inputHtml.value = t.value,
+                placeholder: "Paste HTML and click to parse/format.",
+                class: "h-full min-h-0 w-full flex-1 resize-none rounded-md border border-border bg-background p-3 font-mono text-sm"
+              }),
+              /* @__PURE__ */ jsx("div", {
+                class: "flex items-center gap-3",
+                children: /* @__PURE__ */ jsx("button", {
+                  onClick$: onParseHtml$,
+                  class: "bg-accent hover:opacity-90 rounded-md px-3 py-1.5 text-sm text-white",
+                  children: "Parse HTML"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "rounded-xl border border-border bg-card-item-bg overflow-hidden flex h-[60vh] min-h-0 flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between border-b border-border p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "VNode Tree"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "flex-1 min-h-0 h-full",
+            children: /* @__PURE__ */ jsx("pre", {
+              class: "overflow-auto h-full",
+              dangerouslySetInnerHTML: highlightedHtml.value || ""
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  HtmlParser
+};

package/dist/ui/features/CodeBreack/StateParser.qwik.mjs

@@ -0,0 +1,168 @@
+import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
+import { component$, useStyles$, useSignal, $, useVisibleTask$ } from "@qwik.dev/core";
+import { _preprocessState, _dumpState } from "@qwik.dev/core/internal";
+import { createHighlighter } from "../../node_modules/.pnpm/shiki@3.8.1/node_modules/shiki/dist/bundle-full.qwik.mjs";
+const StateParser = component$(() => {
+  useStyles$(`
+    pre.shiki { overflow: auto; padding: 10px;  height: 100%; }
+  `);
+  const inputState = useSignal("");
+  const parsingTime = useSignal(null);
+  const stateResult = useSignal("");
+  const highlightedState = useSignal("");
+  const onParseState$ = $(() => {
+    if (!inputState.value.trim()) {
+      parsingTime.value = null;
+      stateResult.value = "// Paste state on the left to parse";
+      return;
+    }
+    const startTime = performance.now();
+    try {
+      const stateData = JSON.parse(inputState.value);
+      const container = {
+        $getObjectById$: (id) => id,
+        element: null,
+        getSyncFn: () => () => {
+        },
+        $storeProxyMap$: /* @__PURE__ */ new WeakMap(),
+        $forwardRefs$: null,
+        $initialQRLsIndexes$: null,
+        $scheduler$: null
+      };
+      _preprocessState(stateData, container);
+      const dumpedState = _dumpState(stateData, false, "", null).replace(/\n/, "");
+      parsingTime.value = performance.now() - startTime;
+      stateResult.value = dumpedState;
+      return;
+    } catch (error) {
+      try {
+        const cleanInput = inputState.value.replace(/<script[^>]*>/gi, "").replace(/<\/script>/gi, "").trim();
+        if (cleanInput) {
+          const stateData = JSON.parse(cleanInput);
+          const container = {
+            $getObjectById$: (id) => id,
+            element: null,
+            getSyncFn: () => () => {
+            },
+            $storeProxyMap$: /* @__PURE__ */ new WeakMap(),
+            $forwardRefs$: null,
+            $initialQRLsIndexes$: null,
+            $scheduler$: null
+          };
+          _preprocessState(stateData, container);
+          const dumpedState = _dumpState(stateData, false, "", null);
+          parsingTime.value = performance.now() - startTime;
+          stateResult.value = dumpedState;
+          return;
+        }
+      } catch (secondError) {
+        parsingTime.value = performance.now() - startTime;
+        stateResult.value = `// Error parsing state: ${error instanceof Error ? error.message : "Invalid state format"}
+
+// Raw input:
+${inputState.value}`;
+        return;
+      }
+    }
+    parsingTime.value = performance.now() - startTime;
+    stateResult.value = "// Unable to parse the provided state";
+  });
+  const shikiRef = useSignal(null);
+  useVisibleTask$(async ({ track }) => {
+    track(() => stateResult.value);
+    if (!stateResult.value) {
+      highlightedState.value = "";
+      return;
+    }
+    if (!shikiRef.value) {
+      shikiRef.value = await createHighlighter({
+        themes: [
+          "nord"
+        ],
+        langs: [
+          "json"
+        ]
+      });
+    }
+    highlightedState.value = shikiRef.value.codeToHtml(stateResult.value, {
+      lang: "json",
+      theme: "nord"
+    });
+  });
+  return /* @__PURE__ */ jsxs("div", {
+    class: "grid grid-cols-1 gap-4 md:grid-cols-2",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        class: "rounded-xl border border-border bg-card-item-bg flex h-[60vh] min-h-0 flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between border-b border-border p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Input State"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "p-3 space-y-3 flex-1 min-h-0 flex-col",
+            children: [
+              /* @__PURE__ */ jsx("textarea", {
+                value: inputState.value,
+                onInput$: (e, t) => inputState.value = t.value,
+                placeholder: "Paste Qwik state and click to parse/format.",
+                class: "h-full min-h-0 w-full flex-1 resize-none rounded-md border border-border bg-background p-3 font-mono text-sm"
+              }),
+              /* @__PURE__ */ jsx("div", {
+                class: "flex items-center gap-3",
+                children: /* @__PURE__ */ jsx("button", {
+                  onClick$: onParseState$,
+                  class: "bg-accent hover:opacity-90 rounded-md px-3 py-1.5 text-sm text-white",
+                  children: "Parse State"
+                })
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        class: "rounded-xl border border-border bg-card-item-bg overflow-hidden flex h-[60vh] min-h-0 flex-col",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center justify-between border-b border-border p-3",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "text-sm font-medium",
+                children: "Parsed State"
+              }),
+              parsingTime.value !== null && /* @__PURE__ */ jsxs("span", {
+                class: "rounded-full border border-border px-2 py-0.5 text-xs text-muted-foreground",
+                children: [
+                  parsingTime.value,
+                  "ms"
+                ]
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx("div", {
+            class: "flex-1 min-h-0 h-full",
+            children: /* @__PURE__ */ jsx("pre", {
+              class: "overflow-auto h-full",
+              dangerouslySetInnerHTML: highlightedState.value || ""
+            })
+          })
+        ]
+      })
+    ]
+  });
+});
+export {
+  StateParser
+};

package/dist/ui/features/Overview/Overview.qwik.mjs

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "@qwik.dev/core/jsx-runtime";
 import { component$, $, sync$ } from "@qwik.dev/core";
-import { HiCubeOutline, HiPhotoOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
-import { LuFolderTree } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.4.2_tsx@4.19.2_yaml@2.7.0__/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
+import { HiCubeOutline, HiPhotoOutline } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/hi.qwik.qwik.mjs";
+import { LuFolderTree } from "../../node_modules/.pnpm/@qwikest_icons@0.0.13_@builder.io_qwik@1.11.0_vite@7.1.3_@types_node@20.14.11_jiti@2.6._02d306fcbd9f637dd624291702bff9c0/node_modules/@qwikest/icons/lib/lu.qwik.qwik.mjs";
 const Overview = component$(({ state }) => {
   const pageJump = $((pageName) => {
     state.activeTab = pageName;
@@ -102,7 +102,7 @@ const Overview = component$(({ state }) => {
           $(() => pageJump("packages")),
           stopPropagation
         ],
-        class: "cursor-pointer space-y-4 rounded-xl border border-border bg-card-item-bg p-5 hover:-translate-y-0.5 hover:bg-card-item-hover-bg",
+        class: "cursor-pointer space-y-4 rounded-xl border border-border bg-card-item-bg p-5 hover:-translate-y-0.5 hover:bg-card-item-hover-bg mt-6 md:mt-6",
         children: [
           /* @__PURE__ */ jsx("h3", {
             class: "text-lg font-semibold",
@@ -127,7 +127,7 @@ const Overview = component$(({ state }) => {
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        class: "space-y-4 rounded-xl border border-border bg-card-item-bg p-5",
+        class: "space-y-4 rounded-xl border border-border bg-card-item-bg p-5 mt-6 md:mt-6",
         children: [
           /* @__PURE__ */ jsx("h3", {
             class: "text-lg font-semibold",

package/dist/ui/features/Packages/Packages.qwik.mjs

@@ -1,93 +1,53 @@
-import { jsxs, jsx } from "@qwik.dev/core/jsx-runtime";
-import { component$, useSignal, $, useResource$, Resource } from "@qwik.dev/core";
-import { useDebouncer } from "../../hooks/useDebouncer.qwik.mjs";
-import { InstallButton } from "./components/InstallButton/InstallButton.qwik.mjs";
-const Packages = component$(() => {
-  const debouncedQuery = useSignal("");
-  const installingPackage = useSignal(null);
-  const debounceSearch = useDebouncer($((value) => {
-    debouncedQuery.value = value;
-  }), 300);
-  const searchResults = useResource$(async ({ track }) => {
-    const query = track(() => debouncedQuery.value);
-    if (!query || query.length < 2) {
-      return [];
-    }
-    const response = await fetch(`https://registry.npmjs.org/-/v1/search?text=${query}`);
-    const data = await response.json();
-    const packages = data.objects.map((obj) => ({
-      name: obj.package.name,
-      version: obj.package.version,
-      description: obj.package.description || "No description available"
-    }));
-    return packages;
-  });
-  return /* @__PURE__ */ jsxs("div", {
-    class: "space-y-4",
-    children: [
-      /* @__PURE__ */ jsx("div", {
-        class: "relative",
-        children: /* @__PURE__ */ jsx("input", {
-          type: "text",
-          onInput$: (_, target) => {
-            debounceSearch(target.value);
-          },
-          placeholder: "Search npm packages...",
-          class: "w-full rounded-lg border border-border bg-input px-4 py-2 text-sm text-foreground placeholder-muted-foreground outline-none focus:border-ring"
-        })
-      }),
-      /* @__PURE__ */ jsx(Resource, {
-        value: searchResults,
-        onPending: () => /* @__PURE__ */ jsx("div", {
-          class: "absolute right-3 top-1",
-          children: /* @__PURE__ */ jsx("div", {
-            class: "border-t-foreground/40 animate-spin h-5 w-5 rounded-full border-2 border-border"
+import { jsx, jsxs } from "@qwik.dev/core/jsx-runtime";
+import { component$ } from "@qwik.dev/core";
+import { DependencyCard } from "./components/DependencyCard/DependencyCard.qwik.mjs";
+const Packages = component$(({ state }) => {
+  const packages = state.allDependencies;
+  const isLoading = state.isLoadingDependencies;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", {
+      class: "flex items-center justify-center py-8",
+      children: /* @__PURE__ */ jsxs("div", {
+        class: "flex flex-col items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            class: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx("div", {
+                class: "border-t-foreground/40 animate-spin h-5 w-5 rounded-full border-2 border-border"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                class: "text-sm text-muted-foreground",
+                children: "Loading dependencies..."
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            class: "text-center text-xs text-muted-foreground",
+            children: [
+              "Dependencies are being preloaded in the background...",
+              /* @__PURE__ */ jsx("br", {}),
+              "This should only take a moment"
+            ]
           })
-        }),
-        onRejected: (error) => /* @__PURE__ */ jsx("div", {
-          class: "mt-2 text-xs text-red-400",
-          children: error.message || "Failed to fetch packages"
-        }),
-        onResolved: (packages) => {
-          return /* @__PURE__ */ jsx("div", {
-            class: "grid gap-3 md:grid-cols-2",
-            children: packages.map((pkg) => {
-              return /* @__PURE__ */ jsxs("div", {
-                class: "bg-foreground/5 flex flex-col gap-2 rounded-lg p-3",
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "flex items-center justify-between",
-                    children: [
-                      /* @__PURE__ */ jsx("div", {
-                        class: "text-sm",
-                        children: pkg.name
-                      }),
-                      /* @__PURE__ */ jsxs("div", {
-                        class: "flex items-center gap-2",
-                        children: [
-                          /* @__PURE__ */ jsx("div", {
-                            class: "bg-foreground/5 rounded-full border border-border px-2 py-1 text-xs text-muted-foreground",
-                            children: pkg.version
-                          }),
-                          /* @__PURE__ */ jsx(InstallButton, {
-                            pkg,
-                            installingPackage
-                          })
-                        ]
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx("div", {
-                    class: "line-clamp-2 text-xs text-muted-foreground",
-                    children: pkg.description
-                  })
-                ]
-              }, pkg.name);
-            })
-          });
-        }
+        ]
+      })
+    });
+  }
+  if (!packages || packages.length === 0) {
+    return /* @__PURE__ */ jsx("div", {
+      class: "py-8 text-center",
+      children: /* @__PURE__ */ jsx("div", {
+        class: "text-sm text-muted-foreground",
+        children: "No dependencies found in package.json"
       })
-    ]
+    });
+  }
+  return /* @__PURE__ */ jsx("div", {
+    class: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+    children: packages.map((pkg) => /* @__PURE__ */ jsx(DependencyCard, {
+      pkg
+    }, pkg.name))
   });
 });
 export {