@qwik.dev/devtools 0.0.1

package/lib-types/plugin/types/index.d.ts

@@ -0,0 +1,5 @@
+import { ViteDevServer, ResolvedConfig } from 'vite';
+export interface ServerContext {
+    server: ViteDevServer;
+    config: ResolvedConfig;
+}

package/lib-types/root.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("@qwik.dev/core").JSXOutput;
+export default _default;

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@qwik.dev/devtools",
+  "version": "0.0.1",
+  "description": "Qwik devtools package",
+  "main": "./lib/index.qwik.mjs",
+  "exports": {
+    ".": {
+      "import": "./lib/index.qwik.mjs"
+    },
+    "./component": {
+      "import": "./src/devtools.tsx"
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "lib-types"
+  ],
+  "engines": {
+    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+  },
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "build": "qwik build",
+    "build.lib": "vite build --mode lib",
+    "build.types": "tsc --emitDeclarationOnly",
+    "dev:ssr": "vite --mode ssr",
+    "dev": "nodemon --watch src -e tsx,ts,css --exec 'npm run build.lib'",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "release": "np",
+    "start": "vite --open --mode ssr",
+    "test": "echo \"No test specified\" && exit 0",
+    "qwik": "qwik"
+  },
+  "peerDependencies": {
+    "@qwik.dev/core": "^2.0.0-alpha.4",
+    "@qwik.dev/router": "^2.0.0-alpha.4",
+    "vite": "^6.0.0"
+  },
+  "dependencies": {
+    "image-meta": "^0.2.1",
+    "birpc": "^0.2.19",
+    "perfect-debounce": "^1.0.0",
+    "fast-glob": "^3.3.2",
+    "superjson": "^2.2.2",
+    "dree": "^5.1.5",
+    "@qwikest/icons": "^0.0.13",
+    "vite-hot-client": "^0.2.4"
+  },
+  "devDependencies": {
+    "@qwik.dev/core": "^2.0.0-alpha.4",
+    "@qwik.dev/router": "^2.0.0-alpha.4",
+    "@types/eslint": "8.56.10",
+    "@types/node": "20.14.11",
+    "@typescript-eslint/eslint-plugin": "7.16.1",
+    "@typescript-eslint/parser": "7.16.1",
+    "eslint": "8.57.0",
+    "eslint-plugin-qwik": "2.0.0-alpha.3",
+    "np": "^8.0.4",
+    "prettier": "3.3.3",
+    "typescript": "5.4.5",
+    "vite": "5.4.10",
+    "vite-tsconfig-paths": "^4.2.1",
+    "cpy-cli": "^5.0.0"
+  }
+}

package/src/devtools.css

@@ -0,0 +1,558 @@
+.devtools-container {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 9999;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+}
+
+.devtools-toggle {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  width: 36px;
+  height: 36px;
+  background: #18181b;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.15),
+    inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform-origin: center;
+  overflow: hidden;
+  backdrop-filter: blur(8px);
+  animation: glow 2s ease-in-out infinite;
+}
+
+@keyframes glow {
+  0% {
+    box-shadow:
+      0 4px 12px rgba(0, 0, 0, 0.15),
+      inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  }
+  50% {
+    box-shadow:
+      0 4px 12px rgba(0, 220, 130, 0.35),
+      inset 0 1px 1px rgba(255, 255, 255, 0.1),
+      0 0 25px rgba(0, 220, 130, 0.25);
+    border-color: rgba(0, 220, 130, 0.5);
+  }
+  100% {
+    box-shadow:
+      0 4px 12px rgba(0, 0, 0, 0.15),
+      inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  }
+}
+
+.devtools-toggle:hover {
+  transform: scale(1.05);
+  box-shadow:
+    0 6px 16px rgba(0, 220, 130, 0.4),
+    inset 0 1px 1px rgba(255, 255, 255, 0.15),
+    0 0 30px rgba(0, 220, 130, 0.3);
+  border-color: rgba(0, 220, 130, 0.6);
+  background: #1c1c1f;
+  animation: none;
+}
+
+.devtools-toggle:active {
+  transform: scale(0.98);
+  box-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.15),
+    inset 0 1px 1px rgba(255, 255, 255, 0.1);
+  animation: none;
+}
+
+.devtools-toggle.is-open {
+  transform: rotate(90deg);
+  background: #1c1c1f;
+  animation: none;
+  border-color: rgba(0, 220, 130, 0.5);
+  box-shadow:
+    0 4px 12px rgba(0, 220, 130, 0.35),
+    inset 0 1px 1px rgba(255, 255, 255, 0.1),
+    0 0 25px rgba(0, 220, 130, 0.25);
+}
+
+.devtools-toggle.is-open:hover {
+  transform: rotate(90deg) scale(1.05);
+  box-shadow:
+    0 6px 16px rgba(0, 220, 130, 0.4),
+    inset 0 1px 1px rgba(255, 255, 255, 0.15),
+    0 0 30px rgba(0, 220, 130, 0.3);
+}
+
+.devtools-panel {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 50vh;
+  background: #18181b;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  color: #fff;
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
+  display: flex;
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(16px);
+}
+
+.devtools-open .devtools-panel {
+  transform: translateY(0);
+}
+
+@media (min-width: 640px) {
+  .devtools-panel {
+    width: 60%;
+    right: 0;
+  }
+}
+
+.devtools-header {
+  padding: 12px;
+  border-bottom: 1px solid #27272a;
+}
+
+.devtools-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border-right: 1px solid #27272a;
+  background: #1c1c1f;
+}
+
+.devtools-tabs button {
+  padding: 4px;
+  background: transparent;
+  border: none;
+  color: #a1a1aa;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+
+.devtools-tabs button:hover {
+  background: #27272a;
+  color: #fff;
+}
+
+.devtools-tabs button.tab-active {
+  background: #3b82f6;
+  color: white;
+}
+
+.devtools-content {
+  padding: 16px;
+  height: 100%;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.tab-content h3 {
+  margin: 0 0 16px 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.info-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.info-item {
+  background: #27272a;
+  padding: 12px;
+  border-radius: 8px;
+}
+
+.info-label {
+  display: block;
+  color: #a1a1aa;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+/* Asset specific styles */
+.assets-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 1.25rem;
+  margin-top: 1.5rem;
+  padding: 0.5rem;
+}
+
+.asset-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.asset-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+.asset-preview {
+  height: 120px;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.asset-preview img {
+  width: 70%;
+  height: 70%;
+  object-fit: contain;
+  padding: 0.5rem;
+}
+
+.file-preview {
+  height: 120px;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.file-ext {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.7);
+  text-transform: uppercase;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.asset-info {
+  padding: 0.75rem;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.asset-path {
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.asset-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.asset-size {
+  color: #94a3b8;
+  font-size: 0.75rem;
+}
+
+.asset-type {
+  color: #94a3b8;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  letter-spacing: 0.025em;
+}
+
+.tab-content.overview {
+  padding: 1.5rem;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.25rem;
+  margin-bottom: 2rem;
+}
+
+.metric-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  transition: all 0.2s ease;
+}
+
+.metric-card:hover {
+  background: rgba(255, 255, 255, 0.05);
+  transform: translateY(-1px);
+}
+
+.metric-icon {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  padding: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.metric-card:hover .metric-icon {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: #10b981;
+}
+
+.metric-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.metric-value {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.2;
+}
+
+.metric-label {
+  color: #94a3b8;
+  font-size: 0.875rem;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.performance-section {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 1.25rem;
+}
+
+.performance-section h3 {
+  margin: 0 0 1.25rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+}
+
+.performance-metrics {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.perf-item {
+  display: flex;
+  justify-content: space-between;
+  color: #94a3b8;
+  font-size: 0.875rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.perf-item:last-child {
+  border-bottom: none;
+}
+
+.perf-value {
+  color: #fff;
+  font-weight: 500;
+}
+
+.header-section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.qwik-logo {
+  width: 2rem;
+  height: 2rem;
+}
+
+.title-container h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #fff;
+  margin: 0;
+}
+
+.version {
+  font-size: 0.875rem;
+  color: #94a3b8;
+  font-weight: 500;
+  padding: 0.25rem 0.75rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.packages-section {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.packages-section h3 {
+  margin: 0 0 1.25rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 0.01em;
+}
+
+.packages-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 0.75rem;
+}
+
+.package-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.package-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.package-name {
+  color: #fff;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.package-version {
+  color: #94a3b8;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.25rem 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.tab-content.assets {
+  padding: 1.5rem;
+}
+
+.assets-stats {
+  display: flex;
+  gap: 1rem;
+}
+
+.stat-item {
+  color: #94a3b8;
+  font-size: 0.875rem;
+  padding: 0.25rem 0.75rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.routes-table {
+  background: #18181b;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.table-header {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  padding: 12px 16px;
+  background: #27272a;
+  font-weight: 500;
+  border-bottom: 1px solid #3f3f46;
+}
+
+.table-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  padding: 12px 16px;
+  border-bottom: 1px solid #27272a;
+  align-items: center;
+}
+
+.table-row:hover {
+  background: #27272a;
+}
+
+.active-route {
+  background: #22c55e20;
+  color: #22c55e;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.col-route {
+  font-family: monospace;
+}
+
+.custom-layout {
+  color: #3b82f6;
+}
+
+.toggle-icon {
+  width: 20px;
+  height: 20px;
+  transition: all 0.3s ease;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+  opacity: 0.9;
+}
+
+.devtools-toggle:hover .toggle-icon {
+  transform: scale(1.1);
+  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
+  opacity: 1;
+}