astro-integration-pocketbase 3.1.1 → 3.1.2-next.2

package/src/pocketbase-integration.ts

@@ -1,75 +0,0 @@
-import { fileURLToPath } from "node:url";
-import type { AstroIntegration } from "astro";
-import type { EventSource } from "eventsource";
-import { handleRefreshCollections, refreshCollectionsRealtime } from "./core";
-import type { ToolbarOptions } from "./toolbar/types/options";
-import type { PocketBaseIntegrationOptions } from "./types/pocketbase-integration-options.type";
-
-export function pocketbaseIntegration(
-  options: PocketBaseIntegrationOptions
-): AstroIntegration {
-  let eventSource: EventSource | undefined = undefined;
-  let initialSetupDone = false;
-
-  return {
-    name: "pocketbase-integration",
-    hooks: {
-      "astro:config:setup": ({
-        addDevToolbarApp,
-        addMiddleware,
-        command
-      }): void => {
-        // This integration is only available in dev mode
-        if (command !== "dev") {
-          return;
-        }
-
-        // Setup Toolbar
-        addDevToolbarApp({
-          name: "PocketBase",
-          id: `pocketbase-entry`,
-          icon: `<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PocketBase</title><path fill="currentColor" d="M5.684 12a.632.632 0 0 1-.631-.632V4.421c0-.349.282-.632.631-.632h2.37c.46 0 .889.047 1.287.139.407.084.758.23 1.053.44.303.202.541.475.715.82.173.335.26.75.26 1.246 0 .479-.092.894-.273 1.247a2.373 2.373 0 0 1-.715.869 3.11 3.11 0 0 1-1.053.503c-.398.11-.823.164-1.273.164h-.46a.632.632 0 0 0-.632.632v1.52a.632.632 0 0 1-.632.631Zm1.279-4.888c0 .349.283.632.632.632h.343c1.04 0 1.56-.437 1.56-1.31 0-.428-.135-.73-.404-.907-.26-.176-.645-.264-1.156-.264h-.343a.632.632 0 0 0-.632.631Zm6.3 13.098a.632.632 0 0 1-.631-.631v-6.947a.63.63 0 0 1 .631-.632h2.203c.44 0 .845.034 1.216.1.38.06.708.169.984.328.276.16.492.37.647.63.164.26.246.587.246.982 0 .185-.03.37-.09.554a1.537 1.537 0 0 1-.26.516 1.857 1.857 0 0 1-1.076.7.031.031 0 0 0-.023.03c0 .015.01.028.025.03.591.111 1.04.32 1.346.626.311.31.466.743.466 1.297 0 .42-.082.78-.246 1.083a2.153 2.153 0 0 1-.685.755 3.4 3.4 0 0 1-1.036.441 5.477 5.477 0 0 1-1.268.139zm1.271-5.542c0 .349.283.631.632.631h.21c.465 0 .802-.088 1.009-.264.207-.176.31-.424.31-.743 0-.302-.107-.516-.323-.642-.207-.135-.535-.202-.984-.202h-.222a.632.632 0 0 0-.632.632Zm0 3.463c0 .349.283.631.632.631h.39c1.019 0 1.528-.369 1.528-1.108 0-.36-.125-.621-.376-.78-.241-.16-.625-.24-1.152-.24h-.39a.632.632 0 0 0-.632.632zM1.389 0C.629 0 0 .629 0 1.389V15.03a1.4 1.4 0 0 0 1.389 1.39H8.21a.632.632 0 0 0 .63-.632.632.632 0 0 0-.63-.63H1.389c-.078 0-.125-.05-.125-.128V1.39c0-.078.047-.125.125-.125H15.03c.078 0 .127.047.127.125v6.82a.632.632 0 0 0 .631.63.632.632 0 0 0 .633-.63V1.389A1.4 1.4 0 0 0 15.032 0ZM15.79 7.578a.632.632 0 0 0-.632.633.632.632 0 0 0 .631.63h6.822c.078 0 .125.05.125.128V22.61c0 .078-.047.125-.125.125H8.97c-.077 0-.127-.047-.127-.125v-6.82a.632.632 0 0 0-.631-.63.632.632 0 0 0-.633.63v6.822A1.4 1.4 0 0 0 8.968 24h13.643c.76 0 1.389-.629 1.389-1.389V8.97a1.4 1.4 0 0 0-1.389-1.39Z"/></svg>`,
-          entrypoint: fileURLToPath(new URL("./toolbar", import.meta.url))
-        });
-
-        // Setup middleware
-        addMiddleware({
-          order: "post",
-          entrypoint: fileURLToPath(new URL("./middleware", import.meta.url))
-        });
-      },
-      "astro:server:setup": (setupOptions): void => {
-        if (!initialSetupDone) {
-          // Listen for the refresh event of the toolbar
-          handleRefreshCollections(setupOptions);
-        }
-
-        // Subscribe to PocketBase realtime API
-        if (eventSource) {
-          eventSource.close();
-          eventSource = undefined;
-        }
-        eventSource = refreshCollectionsRealtime(options, setupOptions);
-
-        // Send settings to the toolbar on initialization
-        setupOptions.toolbar.onAppInitialized("pocketbase-entry", () => {
-          setupOptions.toolbar.send("astro-integration-pocketbase:settings", {
-            hasContentLoader: !!setupOptions.refreshContent,
-            realtime: !!eventSource,
-            baseUrl: options.url
-          } satisfies ToolbarOptions);
-        });
-
-        initialSetupDone = true;
-      },
-      "astro:server:done": ({ logger }): void => {
-        // Close the EventSource connection when the server is done
-        if (eventSource) {
-          logger.info("Closing EventSource connection");
-          eventSource.close();
-          eventSource = undefined;
-        }
-      }
-    }
-  };
-}

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

@@ -1,69 +0,0 @@
-import type { Entity } from "../types/entity";
-
-/**
- * Creates cards for the entities.
- */
-export function createEntities(data: Array<Entity>, baseUrl: string): string {
-  const groupedData = Object.groupBy(data, (data) => data.collectionName);
-  const collections = Object.keys(groupedData);
-
-  return /* HTML */ `
-    <style>
-      .collectionName {
-        text-transform: capitalize;
-      }
-
-      .entity {
-        position: relative;
-
-        pre {
-          margin: 0;
-          overflow: auto;
-        }
-
-        astro-dev-toolbar-button {
-          position: absolute;
-          top: 0;
-          right: 0;
-        }
-      }
-    </style>
-
-    ${collections
-      .map(
-        (collection) => /* HTML */ `
-          <b class=".collectionName">${collection}</b>
-          ${groupedData[collection]
-            ?.map((entity) => createEntity(entity, baseUrl))
-            .join("")}
-        `
-      )
-      .join("")}
-  `;
-}
-
-/**
- * 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, undefined, 2).replaceAll("<", "&lt;")}</pre>
-
-        ${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}&record=${data.id}', '_blank')"
-              >
-                View in PocketBase
-              </astro-dev-toolbar-button>
-            `
-          : ""}
-      </div>
-    </astro-dev-toolbar-card>
-  `;
-}

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

@@ -1,153 +0,0 @@
-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";
-import type { ToolbarOptions } from "../types/options";
-
-/**
- * Creates the header for the PocketBase toolbar.
- */
-// oxlint-disable-next-line max-lines-per-function
-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;
-      }
-
-      .actions {
-        display: flex;
-        align-items: start;
-        justify-content: flex-end;
-        gap: 0.25rem;
-
-        .toggle-container {
-          display: flex;
-          align-items: center;
-
-          label {
-            font-size: 0.8rem;
-          }
-        }
-      }
-    </style>
-
-    <h1>PocketBase</h1>
-    <astro-dev-toolbar-badge badge-style="yellow">
-      ${packageJson.version}
-    </astro-dev-toolbar-badge>
-
-    <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>
-  `;
-
-  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",
-      realTimeToggle.input.checked
-    );
-    windowElement.querySelector(".toggle-container")?.append(realTimeToggle);
-  }
-
-  if (hasContentLoader) {
-    // Add click listeners to the refresh button
-    const refresh =
-      windowElement.querySelector<DevToolbarButton>("#refresh-content");
-    if (!refresh) {
-      throw new Error("The refresh button is missing");
-    }
-
-    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 });
-    });
-
-    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

@@ -1,20 +0,0 @@
-/**
- * Creates a placeholder card.
- */
-export function createPlaceholder(): string {
-  return /* HTML */ `
-    <style>
-      #placeholder div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    </style>
-
-    <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/dom/index.ts

@@ -1,3 +0,0 @@
-export * from "./create-entity";
-export * from "./create-header";
-export * from "./create-placeholder";

package/src/toolbar/index.ts

@@ -1,6 +0,0 @@
-import { defineToolbarApp } from "astro/toolbar";
-import { initToolbar } from "./init-toolbar";
-
-export default defineToolbarApp({
-  init: initToolbar
-});

package/src/toolbar/init-toolbar.ts

@@ -1,98 +0,0 @@
-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 { createEntities, createHeader, createPlaceholder } from "./dom";
-import type { Entity } from "./types/entity";
-import type { ToolbarOptions } from "./types/options";
-
-declare global {
-  interface Window {
-    __astro_entities__?: Array<Entity>;
-  }
-}
-
-/**
- * Initializes the PocketBase toolbar.
- */
-export function initToolbar(
-  canvas: ShadowRoot,
-  app: ToolbarAppEventTarget,
-  server: ToolbarServerHelpers
-): 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();
-    }
-  );
-
-  // Create the window (for every page navigation)
-  createPocketBaseWindow();
-  document.addEventListener("astro:after-swap", createPocketBaseWindow);
-
-  // Setup the window
-  closeOnOutsideClick(app);
-  synchronizePlacementOnUpdate(app, canvas);
-
-  function createPocketBaseWindow(): void {
-    // Clear any existing content
-    canvas.innerHTML = "";
-
-    const entities = window.__astro_entities__ || [];
-
-    // Create the main window element
-    const windowElement = createWindowElement(/* HTML */ `
-      <style>
-        :host astro-dev-toolbar-window {
-          max-height: 480px;
-        }
-
-        main {
-          display: flex;
-          flex-direction: column;
-          gap: 1rem;
-          overflow-y: auto;
-        }
-      </style>
-
-      <header></header>
-
-      <hr />
-
-      <main>
-        ${entities.length > 0
-          ? createEntities(entities, options.baseUrl)
-          : createPlaceholder()}
-      </main>
-    `);
-
-    // Create and insert the header
-    createHeader(windowElement, server, options);
-
-    // Add the window to the canvas
-    canvas.append(windowElement);
-
-    // 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 });
-    }
-  }
-}

package/src/toolbar/types/entity.ts

@@ -1,8 +0,0 @@
-/**
- * Minimal entity interface
- */
-export interface Entity {
-  id: string;
-  collectionId: string;
-  collectionName: string;
-}

package/src/toolbar/types/options.ts

@@ -1,17 +0,0 @@
-/**
- * Options for the toolbar.
- */
-export interface ToolbarOptions {
-  /**
-   * Whether a content loader is active.
-   */
-  hasContentLoader: boolean;
-  /**
-   * Whether a realtime connection to PocketBase is active.
-   */
-  realtime: boolean;
-  /**
-   * Base URL of the PocketBase instance.
-   */
-  baseUrl: string;
-}

package/src/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "noUncheckedIndexedAccess": true
-  }
-}

package/src/types/pocketbase-api-response.type.ts

@@ -1,21 +0,0 @@
-import { z } from "astro/zod";
-
-/**
- * The schema for a PocketBase error response.
- */
-export const pocketBaseErrorResponse = z.object({
-  /**
-   * The error message returned by PocketBase.
-   */
-  message: z.string()
-});
-
-/**
- * The schema for a PocketBase login response.
- */
-export const pocketBaseLoginResponse = z.object({
-  /**
-   * The authentication token returned by PocketBase.
-   */
-  token: z.string()
-});

package/src/utils/get-superuser-token.ts

@@ -1,68 +0,0 @@
-import type { AstroIntegrationLogger } from "astro";
-import {
-  pocketBaseErrorResponse,
-  pocketBaseLoginResponse
-} from "../types/pocketbase-api-response.type";
-
-/**
- * This function will get a superuser token from the given PocketBase instance.
- *
- * @param url URL of the PocketBase instance
- * @param superuserCredentials Credentials of the superuser
- *
- * @returns A superuser token to access all resources of the PocketBase instance.
- */
-export async function getSuperuserToken(
-  url: string,
-  superuserCredentials: {
-    email: string;
-    password: string;
-  },
-  logger: AstroIntegrationLogger
-): Promise<string | undefined> {
-  // Build the URL for the login endpoint
-  const loginUrl = new URL(
-    `api/collections/_superusers/auth-with-password`,
-    url
-  ).href;
-
-  // Create a new FormData object to send the login data
-  const loginData = new FormData();
-  loginData.set("identity", superuserCredentials.email);
-  loginData.set("password", superuserCredentials.password);
-
-  // Send the login request to get a token
-  const loginRequest = await fetch(loginUrl, {
-    method: "POST",
-    body: loginData
-  });
-
-  // If the login request was not successful, print the error message and return undefined
-  if (!loginRequest.ok) {
-    if (loginRequest.status === 429) {
-      const info =
-        "A rate limit was hit while trying to authenticate with PocketBase. Consider using an `impersonateToken` as credentials to avoid this issue.";
-      logger.info(info);
-
-      // Random wait between 3 (default rate limit interval) and 8 seconds
-      const retryAfter = Math.random() * 5 + 3;
-      // oxlint-disable-next-line promise/avoid-new
-      await new Promise((resolve) => {
-        setTimeout(resolve, retryAfter * 1000);
-      });
-
-      return getSuperuserToken(url, superuserCredentials, logger);
-    }
-
-    const errorResponse = pocketBaseErrorResponse.parse(
-      await loginRequest.json()
-    );
-    const errorMessage = `The given email / password for ${url} was not correct. Astro can't generate type definitions automatically and may not have access to all resources.\nReason: ${errorResponse.message}`;
-    logger.error(errorMessage);
-    return undefined;
-  }
-
-  // Return the token
-  const response = pocketBaseLoginResponse.parse(await loginRequest.json());
-  return response.token;
-}

package/src/utils/map-collections-to-watch.ts

@@ -1,56 +0,0 @@
-import type { PocketBaseIntegrationOptions } from "../types/pocketbase-integration-options.type";
-import { pushToMapArray } from "./push-to-map-array";
-
-/**
- * Create a map of remote collections to watch.
- * Each key in the map represents a remote collection to subscribe to.
- * The value is an array of local collections that should be refreshed when an entry in the remote collection changes.
- */
-export function mapCollectionsToWatch(
-  collectionsToWatch: PocketBaseIntegrationOptions["collectionsToWatch"]
-): Map<string, Array<string>> | undefined {
-  // Check if collections should be watched
-  if (!collectionsToWatch) {
-    return undefined;
-  }
-
-  // Check if collectionsToWatch is an array
-  if (Array.isArray(collectionsToWatch)) {
-    // Check if the array is empty
-    if (collectionsToWatch.length === 0) {
-      return undefined;
-    }
-
-    // Create a map where each collection is watched by itself
-    return new Map(
-      collectionsToWatch.map((collection) => [collection, [collection]])
-    );
-  }
-
-  // Check if collectionsToWatch is an empty object
-  if (Object.keys(collectionsToWatch).length === 0) {
-    return undefined;
-  }
-
-  // Map collections to watch
-  const collectionsMap = new Map<string, Array<string>>();
-  for (const localCollection in collectionsToWatch) {
-    const watch = collectionsToWatch[localCollection];
-    if (!watch) {
-      continue;
-    }
-
-    // Check if collection should be watched by itself
-    if (watch === true) {
-      pushToMapArray(collectionsMap, localCollection, localCollection);
-      continue;
-    }
-
-    // Collection should be watched by multiple collections
-    for (const remoteCollection of watch) {
-      pushToMapArray(collectionsMap, remoteCollection, localCollection);
-    }
-  }
-
-  return collectionsMap;
-}

package/src/utils/push-to-map-array.ts

@@ -1,16 +0,0 @@
-/**
- * Adds a value to an array in a map. If the key does not exist, it will be created.
- */
-export function pushToMapArray<TKey, TArray>(
-  map: Map<TKey, Array<TArray>>,
-  key: TKey,
-  value: TArray
-): void {
-  const array = map.get(key);
-  if (array) {
-    array.push(value);
-    return;
-  }
-
-  map.set(key, [value]);
-}