npm - astro-integration-pocketbase - Versions diffs - 1.4.1 → 1.4.2-next.2 - Mend

astro-integration-pocketbase 1.4.1 → 1.4.2-next.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.

Files changed (6) hide show

package/package.json +27 -16
package/src/middleware/index.ts +6 -0
package/src/toolbar/dom/create-entity.ts +43 -31
package/src/toolbar/dom/create-header.ts +136 -79
package/src/toolbar/dom/create-placeholder.ts +15 -18
package/src/toolbar/init-toolbar.ts +63 -117

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "astro-integration-pocketbase",
-  "version": "1.4.1",
+  "version": "1.4.2-next.2",
   "description": "An Astro integration to support developers working with astro-loader-pocketbase.",
   "keywords": [
     "astro",
@@ -13,6 +13,13 @@
     "tooling"
   ],
   "homepage": "https://github.com/pawcoding/astro-integration-pocketbase",
+  "bugs": {
+    "url": "https://github.com/pawcoding/astro-integration-pocketbase/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pawcoding/astro-integration-pocketbase.git"
+  },
   "license": "MIT",
   "author": "Luis Wolf <development@pawcode.de> (https://pawcode.de)",
   "type": "module",
@@ -31,26 +38,30 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.7.1",
-    "@commitlint/config-conventional": "^19.7.1",
-    "@eslint/js": "^9.20.0",
-    "@stylistic/eslint-plugin": "^3.1.0",
-    "@types/node": "^22.13.4",
-    "astro": "^5.3.0",
-    "eslint": "^9.20.1",
-    "eslint-config-prettier": "^10.0.1",
-    "eventsource": "^3.0.5",
-    "globals": "^15.15.0",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
+    "@eslint/js": "^9.23.0",
+    "@stylistic/eslint-plugin": "^4.2.0",
+    "@types/node": "^22.13.14",
+    "astro": "^5.5.5",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eventsource": "^3.0.6",
+    "globals": "^16.0.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.4.3",
-    "prettier": "^3.5.1",
+    "lint-staged": "^15.5.0",
+    "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-packagejson": "^2.5.8",
-    "typescript": "^5.7.3",
-    "typescript-eslint": "^8.24.0"
+    "prettier-plugin-packagejson": "^2.5.10",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.28.0"
   },
   "peerDependencies": {
     "astro": "^5.0.0",
     "eventsource": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   }
 }

package/src/middleware/index.ts CHANGED Viewed

@@ -7,6 +7,12 @@ export const onRequest = defineMiddleware(async (context, next) => {
   const entities = findEntitiesRecursive(props).map((entity) => entity.data);
   const response = await next();
+  const contentType = response.headers.get("content-type");
+  if (!contentType?.includes("text/html")) {
+    // Pass through non-HTML responses unchanged
+    return response;
+  }
   const body = await response.text();
   // Append the entities to the <head>

package/src/toolbar/dom/create-entity.ts CHANGED Viewed

@@ -1,41 +1,53 @@
-import type { DevToolbarCard } from "astro/runtime/client/dev-toolbar/ui-library/card.js";
 import type { Entity } from "../types/entity";
 /**
- * Creates a card for an entity.
+ * Creates cards for the entities.
  */
-export function createEntity(data: Entity, baseUrl?: string): DevToolbarCard {
-  // Create the main card
-  const main = document.createElement("astro-dev-toolbar-card");
+export function createEntities(data: Array<Entity>, baseUrl: string): string {
+  return /* HTML */ `
+    <style>
+      .entity {
+        position: relative;
-  // Create the main content container
-  const content = document.createElement("div");
-  content.style.position = "relative";
-  main.appendChild(content);
+        pre {
+          margin: 0;
+          overflow: auto;
+        }
-  // Add the "View in PocketBase" button
-  if (baseUrl) {
-    const url = `${baseUrl}/_/#/collections?collection=${data.collectionId}&recordId=${data.id}`;
+        astro-dev-toolbar-button {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+    </style>
-    const viewInPocketbase = document.createElement("astro-dev-toolbar-button");
-    viewInPocketbase.size = "small";
-    viewInPocketbase.buttonStyle = "purple";
-    viewInPocketbase.textContent = "View in PocketBase";
-    viewInPocketbase.style.position = "absolute";
-    viewInPocketbase.style.top = "0";
-    viewInPocketbase.style.right = "0";
-    viewInPocketbase.addEventListener("click", () => {
-      window.open(url, "_blank");
-    });
-    content.appendChild(viewInPocketbase);
-  }
+    ${data.map((entity) => createEntity(entity, baseUrl)).join("")}
+  `;
+}
-  // Add the entity data
-  const entity = document.createElement("pre");
-  entity.style.margin = "0";
-  entity.style.overflow = "auto";
-  entity.textContent = JSON.stringify(data, null, 2);
-  content.appendChild(entity);
+/**
+ * Creates a card for a single entity
+ */
+function createEntity(data: Entity, baseUrl: string): string {
+  return /* HTML */ `
+    <astro-dev-toolbar-card>
+      <div class="entity">
+        <pre>${JSON.stringify(data, null, 2).replaceAll(/</g, "&lt;")}</pre>
-  return main;
+        ${baseUrl
+          ? /* HTML */ `
+              <astro-dev-toolbar-button
+                size="small"
+                button-style="purple"
+                title="View in PocketBase"
+                onclick="window.open('${baseUrl}/_/#/collections?collection=${data.collectionId}&recordId=${data.id}', '_blank')"
+              >
+                View in PocketBase
+              </astro-dev-toolbar-button>
+            `
+          : ""}
+      </div>
+    </astro-dev-toolbar-card>
+  `;
 }

package/src/toolbar/dom/create-header.ts CHANGED Viewed

@@ -1,98 +1,155 @@
 import type { ToolbarServerHelpers } from "astro";
 import type { DevToolbarButton } from "astro/runtime/client/dev-toolbar/ui-library/button.js";
+import type { DevToolbarWindow } from "astro/runtime/client/dev-toolbar/ui-library/window.js";
 import { default as packageJson } from "../../../package.json";
-export interface HeaderElements {
-  header: HTMLElement;
-  refresh: DevToolbarButton;
-  toggleContainer: HTMLDivElement;
-}
+import type { ToolbarOptions } from "../types/options";
 /**
  * Creates the header for the PocketBase toolbar.
  */
-export function createHeader(server: ToolbarServerHelpers): HeaderElements {
-  // Create the header
-  const header = document.createElement("header");
-  header.style.display = "grid";
-  header.style.gap = "0.25rem";
-  header.style.gridTemplateColumns = "auto auto 1fr";
+export function createHeader(
+  windowElement: DevToolbarWindow,
+  server: ToolbarServerHelpers,
+  { hasContentLoader, realtime }: ToolbarOptions
+): void {
+  const header = windowElement.querySelector("header");
+  if (!header) {
+    throw new Error("The header element is missing");
+  }
+  header.innerHTML = /* HTML */ `
+    <style>
+      header {
+        display: grid;
+        grid-template-columns: auto auto 1fr;
+        gap: 0.5rem;
+      }
+      h1 {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+        color: #fff;
+        margin: 0;
+        font-size: 22px;
+      }
-  // Create the title
-  const title = document.createElement("h3");
-  title.style.marginTop = "0.25rem";
-  title.textContent = "PocketBase";
-  header.appendChild(title);
+      .actions {
+        display: flex;
+        align-items: start;
+        justify-content: flex-end;
+        gap: 0.25rem;
-  // Create the version badge
-  const version = document.createElement("astro-dev-toolbar-badge");
-  version.textContent = packageJson.version;
-  version.badgeStyle = "yellow";
-  header.appendChild(version);
+        .toggle-container {
+          display: flex;
+          align-items: center;
-  // Create the actions container
-  const actions = document.createElement("div");
-  actions.style.display = "flex";
-  actions.style.alignItems = "start";
-  actions.style.justifyContent = "flex-end";
-  actions.style.gap = "0.25rem";
-  header.appendChild(actions);
+          label {
+            font-size: 0.8rem;
+          }
+        }
+      }
+    </style>
-  // Create the real-time toggle
-  const toggleContainer = document.createElement("div");
-  toggleContainer.style.alignItems = "center";
-  // The toggle container is hidden by default
-  toggleContainer.style.display = "none";
-  actions.appendChild(toggleContainer);
+    <h1>PocketBase</h1>
+    <astro-dev-toolbar-badge badge-style="yellow">
+      ${packageJson.version}
+    </astro-dev-toolbar-badge>
-  const toggleLabel = document.createElement("label");
-  toggleLabel.textContent = "Real-time updates";
-  toggleLabel.htmlFor = "real-time-toggle";
-  toggleLabel.title = "Enable or disable real-time updates temporarily";
-  toggleLabel.style.fontSize = "0.8rem";
-  toggleContainer.appendChild(toggleLabel);
+    <div class="actions">
+      ${realtime
+        ? /* HTML */ `
+            <div class="toggle-container">
+              <label
+                for="real-time"
+                title="Enable or disable real-time updates temporarily"
+              >
+                Real-time updates
+              </label>
+              <!-- real-time-toggle -->
+            </div>
+          `
+        : ""}
+      ${hasContentLoader
+        ? /* HTML */ `
+            <astro-dev-toolbar-button
+              id="refresh-content"
+              size="small"
+              button-style="green"
+              title="Right click to force refresh every collection"
+            >
+              Refresh content
+            </astro-dev-toolbar-button>
+          `
+        : ""}
+    </div>
+  `;
-  const toggle = document.createElement("astro-dev-toolbar-toggle");
-  toggle.input.id = "real-time-toggle";
-  toggle.input.title = "Enable or disable real-time updates temporarily";
-  // Set the toggle state based on the local storage, default to true
-  toggle.input.checked = !(
-    localStorage.getItem("astro-integration-pocketbase:real-time") === "false"
-  );
-  toggle.input.addEventListener("change", () => {
-    // Store the toggle state in the local storage
-    localStorage.setItem(
+  if (realtime) {
+    // Create the toggle for real-time updates
+    const realTimeToggle = document.createElement("astro-dev-toolbar-toggle");
+    realTimeToggle.input.id = "real-time-toggle";
+    realTimeToggle.input.title =
+      "Enable or disable real-time updates temporarily";
+    // Set the toggle state based on the local storage, default to true
+    realTimeToggle.input.checked = !(
+      localStorage.getItem("astro-integration-pocketbase:real-time") === "false"
+    );
+    realTimeToggle.input.addEventListener("change", () => {
+      // Store the toggle state in the local storage
+      localStorage.setItem(
+        "astro-integration-pocketbase:real-time",
+        realTimeToggle.input.checked.toString()
+      );
+      // Send the toggle state to the server
+      server.send(
+        "astro-integration-pocketbase:real-time",
+        realTimeToggle.input.checked
+      );
+    });
+    // Send the initial toggle state to the server
+    server.send(
       "astro-integration-pocketbase:real-time",
-      toggle.input.checked.toString()
+      realTimeToggle.input.checked
     );
+    windowElement
+      .querySelector(".toggle-container")
+      ?.appendChild(realTimeToggle);
+  }
-    // Send the toggle state to the server
-    server.send("astro-integration-pocketbase:real-time", toggle.input.checked);
-  });
-  // Send the initial toggle state to the server
-  server.send("astro-integration-pocketbase:real-time", toggle.input.checked);
-  toggleContainer.appendChild(toggle);
+  if (hasContentLoader) {
+    // Add click listeners to the refresh button
+    const refresh = windowElement.querySelector(
+      "#refresh-content"
+    ) as DevToolbarButton | null;
+    if (!refresh) {
+      throw new Error("The refresh button is missing");
+    }
-  // Create the refresh button
-  const refresh = document.createElement("astro-dev-toolbar-button");
-  refresh.size = "small";
-  refresh.buttonStyle = "green";
-  refresh.textContent = "Refresh content";
-  refresh.title = "Right click to force refresh every collection";
-  // The refresh button is hidden by default
-  refresh.style.display = "none";
-  refresh.addEventListener("click", () => {
-    server.send("astro-integration-pocketbase:refresh", { force: false });
-  });
-  refresh.addEventListener("contextmenu", (event) => {
-    event.preventDefault();
-    server.send("astro-integration-pocketbase:refresh", { force: true });
-  });
-  actions.appendChild(refresh);
+    refresh.addEventListener("click", () => {
+      server.send("astro-integration-pocketbase:refresh", { force: false });
+    });
+    refresh.addEventListener("contextmenu", (event) => {
+      event.preventDefault();
+      server.send("astro-integration-pocketbase:refresh", { force: true });
+    });
-  return {
-    header,
-    refresh,
-    toggleContainer
-  };
+    server.on(
+      "astro-integration-pocketbase:refresh",
+      ({ loading }: { loading?: boolean }) => {
+        // Show loading state while refreshing content
+        if (loading) {
+          refresh.textContent = "Refreshing content...";
+          refresh.buttonStyle = "gray";
+          refresh.style.pointerEvents = "none";
+        } else {
+          refresh.textContent = "Refresh content";
+          refresh.buttonStyle = "green";
+          refresh.style.pointerEvents = "unset";
+        }
+      }
+    );
+  }
 }

package/src/toolbar/dom/create-placeholder.ts CHANGED Viewed

@@ -1,23 +1,20 @@
-import type { DevToolbarCard } from "astro/runtime/client/dev-toolbar/ui-library/card.js";
 /**
  * Creates a placeholder card.
  */
-export function createPlaceholder(): DevToolbarCard {
-  // Create the main card
-  const main = document.createElement("astro-dev-toolbar-card");
-  // Create the main content container
-  const content = document.createElement("div");
-  content.style.display = "flex";
-  content.style.alignItems = "center";
-  content.style.justifyContent = "center";
-  main.appendChild(content);
-  // Add the placeholder text
-  const placeholder = document.createElement("span");
-  placeholder.textContent = "Here you will see the raw content of an entity";
-  content.appendChild(placeholder);
+export function createPlaceholder(): string {
+  return /* HTML */ `
+    <style>
+      #placeholder div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
-  return main;
+    <astro-dev-toolbar-card id="placeholder">
+      <div>
+        <span> Here you will see the raw content of an entity </span>
+      </div>
+    </astro-dev-toolbar-card>
+  `;
 }

package/src/toolbar/init-toolbar.ts CHANGED Viewed

@@ -1,9 +1,13 @@
+import {
+  closeOnOutsideClick,
+  createWindowElement,
+  synchronizePlacementOnUpdate
+} from "astro/runtime/client/dev-toolbar/apps/utils/window.js";
 import type {
   ToolbarAppEventTarget,
   ToolbarServerHelpers
 } from "astro/runtime/client/dev-toolbar/helpers.js";
-import { createEntity, createHeader, createPlaceholder } from "./dom/";
-import { listenToNavigation } from "./page-navigation-listener";
+import { createEntities, createHeader, createPlaceholder } from "./dom";
 import type { Entity } from "./types/entity";
 import type { ToolbarOptions } from "./types/options";
@@ -16,137 +20,79 @@ declare global {
 /**
  * Initializes the PocketBase toolbar.
  */
-export async function initToolbar(
+export function initToolbar(
   canvas: ShadowRoot,
   app: ToolbarAppEventTarget,
   server: ToolbarServerHelpers
-): Promise<void> {
-  // Base url of the PocketBase instance
-  let pbUrl: string | undefined = undefined;
-  const container = document.createElement("astro-dev-toolbar-window");
-  const { header, refresh, toggleContainer } = createHeader(server);
-  container.appendChild(header);
-  // Container for the main content
-  const contentContainer = document.createElement("div");
-  contentContainer.style.display = "flex";
-  contentContainer.style.flexDirection = "column";
-  contentContainer.style.gap = "8px";
-  contentContainer.style.maxHeight = "400px";
-  contentContainer.style.overflowY = "auto";
-  container.appendChild(contentContainer);
-  const placeholder = createPlaceholder();
-  contentContainer.appendChild(placeholder);
-  app.onToggled(({ state }) => {
-    // Clear the container
-    contentContainer.innerHTML = "";
-    if (!state) {
-      // Clear the dev-window
-      canvas.innerHTML = "";
-      return;
+): void {
+  // Options for the toolbar
+  let options: ToolbarOptions = {
+    realtime: false,
+    hasContentLoader: false,
+    baseUrl: ""
+  };
+  // Update the options and refresh the toolbar
+  server.on(
+    "astro-integration-pocketbase:settings",
+    (updatedOptions: ToolbarOptions) => {
+      options = updatedOptions;
+      createPocketBaseWindow();
     }
+  );
-    // Append the dev-window
-    canvas.appendChild(container);
+  // Create the window (for every page navigation)
+  createPocketBaseWindow();
+  document.addEventListener("astro:after-swap", createPocketBaseWindow);
-    // Check if entities are present
-    const entities = window.__astro_entities__;
-    if (!entities || entities.length === 0) {
-      // No entities to display, show a placeholder
-      contentContainer.appendChild(createPlaceholder());
-      return;
-    }
+  // Setup the window
+  closeOnOutsideClick(app);
+  synchronizePlacementOnUpdate(app, canvas);
-    // Display the information about the entities
-    for (const entity of entities) {
-      contentContainer.appendChild(createEntity(entity, pbUrl));
-    }
-  });
+  function createPocketBaseWindow(): void {
+    // Clear any existing content
+    canvas.innerHTML = "";
-  // Update the toolbar placement based on the user's preference
-  function updateToolbarPlacement(
-    placement: "bottom-left" | "bottom-right" | "bottom-center"
-  ): void {
-    if (placement === "bottom-left") {
-      container.style.left = "16px";
-      container.style.right = "unset";
-      container.style.transform = "translateX(0)";
-    } else if (placement === "bottom-right") {
-      container.style.left = "unset";
-      container.style.right = "16px";
-      container.style.transform = "translateX(0)";
-    } else {
-      container.style.left = "50%";
-      container.style.right = "unset";
-      container.style.transform = "translateX(-50%)";
-    }
-  }
+    const entities = window.__astro_entities__ || [];
-  // Read the initial toolbar placement from local storage
-  // This is a workaround since the initial toolbar placement is not available via any API
-  const settings = localStorage.getItem("astro:dev-toolbar:settings");
-  if (settings) {
-    const { placement } = JSON.parse(settings);
-    updateToolbarPlacement(placement);
-  }
+    // Create the main window element
+    const windowElement = createWindowElement(/* HTML */ `
+      <style>
+        :host astro-dev-toolbar-window {
+          max-height: 480px;
+        }
-  // Listen for toolbar placement updates
-  app.onToolbarPlacementUpdated(({ placement }) => {
-    updateToolbarPlacement(placement);
-  });
+        main {
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          overflow-y: auto;
+        }
+      </style>
-  server.on(
-    "astro-integration-pocketbase:settings",
-    ({ hasContentLoader, realtime, baseUrl }: ToolbarOptions) => {
-      // Show the refresh button if a loader is available
-      if (hasContentLoader) {
-        refresh.style.display = "unset";
-      }
+      <header></header>
-      // Show the real-time toggle if real-time updates are available
-      if (realtime) {
-        toggleContainer.style.display = "flex";
-      }
+      <hr />
-      // Store the base URL for later use
-      pbUrl = baseUrl;
-    }
-  );
+      <main>
+        ${entities.length > 0
+          ? createEntities(entities, options.baseUrl)
+          : createPlaceholder()}
+      </main>
+    `);
-  server.on(
-    "astro-integration-pocketbase:refresh",
-    ({ loading }: { loading?: boolean }) => {
-      // Show loading state while refreshing content
-      if (loading) {
-        refresh.textContent = "Refreshing content...";
-        refresh.buttonStyle = "gray";
-        refresh.style.pointerEvents = "none";
-      } else {
-        refresh.textContent = "Refresh content";
-        refresh.buttonStyle = "green";
-        refresh.style.pointerEvents = "unset";
-      }
-    }
-  );
+    // Create and insert the header
+    createHeader(windowElement, server, options);
-  // Toggle the notification based on the presence of entities
-  listenToNavigation(() => {
-    // Check if entities are present
-    const entities = window.__astro_entities__;
-    if (!entities || entities.length === 0) {
-      app.toggleNotification({ state: false });
+    // Add the window to the canvas
+    canvas.append(windowElement);
-      // Hide the toolbar if no entities are present
+    // Update the toolbar depending on the current state
+    if (entities.length > 0) {
+      app.toggleNotification({ state: true, level: "info" });
+    } else {
+      app.toggleNotification({ state: false });
       app.toggleState({ state: false });
-      return;
     }
-    // Show the notification
-    app.toggleNotification({ state: true, level: "info" });
-  });
+  }
 }