astro-integration-pocketbase/dist/toolbar.mjs.map

An Astro integration to support developers working with astro-loader-pocketbase.

{"version":3,"file":"toolbar.mjs","names":["packageJson.version"],"sources":["../src/toolbar/dom/create-entity.ts","../package.json","../src/toolbar/dom/create-header.ts","../src/toolbar/dom/create-placeholder.ts","../src/toolbar/init-toolbar.ts","../src/toolbar/index.ts"],"sourcesContent":["import type { Entity } from \"../types/entity\";\n\n/**\n * Creates cards for the entities.\n */\nexport function createEntities(data: Array<Entity>, baseUrl: string): string {\n  const groupedData = Object.groupBy(data, (data) => data.collectionName);\n  const collections = Object.keys(groupedData);\n\n  return /* HTML */ `\n    <style>\n      .collectionName {\n        text-transform: capitalize;\n      }\n\n      .entity {\n        position: relative;\n\n        pre {\n          margin: 0;\n          overflow: auto;\n        }\n\n        astro-dev-toolbar-button {\n          position: absolute;\n          top: 0;\n          right: 0;\n        }\n      }\n    </style>\n\n    ${collections\n      .map(\n        (collection) => /* HTML */ `\n          <b class=\".collectionName\">${collection}</b>\n          ${groupedData[collection]\n            ?.map((entity) => createEntity(entity, baseUrl))\n            .join(\"\")}\n        `\n      )\n      .join(\"\")}\n  `;\n}\n\n/**\n * Creates a card for a single entity\n */\nfunction createEntity(data: Entity, baseUrl: string): string {\n  return /* HTML */ `\n    <astro-dev-toolbar-card>\n      <div class=\"entity\">\n        <pre>${JSON.stringify(data, undefined, 2).replaceAll(\"<\", \"&lt;\")}</pre>\n\n        ${baseUrl\n          ? /* HTML */ `\n              <astro-dev-toolbar-button\n                size=\"small\"\n                button-style=\"purple\"\n                title=\"View in PocketBase\"\n                onclick=\"window.open('${baseUrl}/_/#/collections?collection=${data.collectionId}&record=${data.id}', '_blank')\"\n              >\n                View in PocketBase\n              </astro-dev-toolbar-button>\n            `\n          : \"\"}\n      </div>\n    </astro-dev-toolbar-card>\n  `;\n}\n","","import type { ToolbarServerHelpers } from \"astro\";\nimport type { DevToolbarButton } from \"astro/runtime/client/dev-toolbar/ui-library/button.js\";\nimport type { DevToolbarWindow } from \"astro/runtime/client/dev-toolbar/ui-library/window.js\";\nimport { default as packageJson } from \"../../../package.json\";\nimport type { ToolbarOptions } from \"../types/options\";\n\n/**\n * Creates the header for the PocketBase toolbar.\n */\n// oxlint-disable-next-line max-lines-per-function\nexport function createHeader(\n  windowElement: DevToolbarWindow,\n  server: ToolbarServerHelpers,\n  { hasContentLoader, realtime }: ToolbarOptions\n): void {\n  const header = windowElement.querySelector(\"header\");\n  if (!header) {\n    throw new Error(\"The header element is missing\");\n  }\n\n  header.innerHTML = /* HTML */ `\n    <style>\n      header {\n        display: grid;\n        grid-template-columns: auto auto 1fr;\n        gap: 0.5rem;\n      }\n\n      h1 {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        font-weight: 600;\n        color: #fff;\n        margin: 0;\n        font-size: 22px;\n      }\n\n      .actions {\n        display: flex;\n        align-items: start;\n        justify-content: flex-end;\n        gap: 0.25rem;\n\n        .toggle-container {\n          display: flex;\n          align-items: center;\n\n          label {\n            font-size: 0.8rem;\n          }\n        }\n      }\n    </style>\n\n    <h1>PocketBase</h1>\n    <astro-dev-toolbar-badge badge-style=\"yellow\">\n      ${packageJson.version}\n    </astro-dev-toolbar-badge>\n\n    <div class=\"actions\">\n      ${realtime\n        ? /* HTML */ `\n            <div class=\"toggle-container\">\n              <label\n                for=\"real-time\"\n                title=\"Enable or disable real-time updates temporarily\"\n              >\n                Real-time updates\n              </label>\n              <!-- real-time-toggle -->\n            </div>\n          `\n        : \"\"}\n      ${hasContentLoader\n        ? /* HTML */ `\n            <astro-dev-toolbar-button\n              id=\"refresh-content\"\n              size=\"small\"\n              button-style=\"green\"\n              title=\"Right click to force refresh every collection\"\n            >\n              Refresh content\n            </astro-dev-toolbar-button>\n          `\n        : \"\"}\n    </div>\n  `;\n\n  if (realtime) {\n    // Create the toggle for real-time updates\n    const realTimeToggle = document.createElement(\"astro-dev-toolbar-toggle\");\n    realTimeToggle.input.id = \"real-time-toggle\";\n    realTimeToggle.input.title =\n      \"Enable or disable real-time updates temporarily\";\n    // Set the toggle state based on the local storage, default to true\n    realTimeToggle.input.checked = !(\n      localStorage.getItem(\"astro-integration-pocketbase:real-time\") === \"false\"\n    );\n    realTimeToggle.input.addEventListener(\"change\", () => {\n      // Store the toggle state in the local storage\n      localStorage.setItem(\n        \"astro-integration-pocketbase:real-time\",\n        realTimeToggle.input.checked.toString()\n      );\n\n      // Send the toggle state to the server\n      server.send(\n        \"astro-integration-pocketbase:real-time\",\n        realTimeToggle.input.checked\n      );\n    });\n    // Send the initial toggle state to the server\n    server.send(\n      \"astro-integration-pocketbase:real-time\",\n      realTimeToggle.input.checked\n    );\n    windowElement.querySelector(\".toggle-container\")?.append(realTimeToggle);\n  }\n\n  if (hasContentLoader) {\n    // Add click listeners to the refresh button\n    const refresh =\n      windowElement.querySelector<DevToolbarButton>(\"#refresh-content\");\n    if (!refresh) {\n      throw new Error(\"The refresh button is missing\");\n    }\n\n    refresh.addEventListener(\"click\", () => {\n      server.send(\"astro-integration-pocketbase:refresh\", { force: false });\n    });\n    refresh.addEventListener(\"contextmenu\", (event) => {\n      event.preventDefault();\n      server.send(\"astro-integration-pocketbase:refresh\", { force: true });\n    });\n\n    server.on(\n      \"astro-integration-pocketbase:refresh\",\n      ({ loading }: { loading?: boolean }) => {\n        // Show loading state while refreshing content\n        if (loading) {\n          refresh.textContent = \"Refreshing content...\";\n          refresh.buttonStyle = \"gray\";\n          refresh.style.pointerEvents = \"none\";\n        } else {\n          refresh.textContent = \"Refresh content\";\n          refresh.buttonStyle = \"green\";\n          refresh.style.pointerEvents = \"unset\";\n        }\n      }\n    );\n  }\n}\n","/**\n * Creates a placeholder card.\n */\nexport function createPlaceholder(): string {\n  return /* HTML */ `\n    <style>\n      #placeholder div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    </style>\n\n    <astro-dev-toolbar-card id=\"placeholder\">\n      <div>\n        <span> Here you will see the raw content of an entity </span>\n      </div>\n    </astro-dev-toolbar-card>\n  `;\n}\n","import {\n  closeOnOutsideClick,\n  createWindowElement,\n  synchronizePlacementOnUpdate\n} from \"astro/runtime/client/dev-toolbar/apps/utils/window.js\";\nimport type {\n  ToolbarAppEventTarget,\n  ToolbarServerHelpers\n} from \"astro/runtime/client/dev-toolbar/helpers.js\";\nimport { createEntities, createHeader, createPlaceholder } from \"./dom\";\nimport type { Entity } from \"./types/entity\";\nimport type { ToolbarOptions } from \"./types/options\";\n\ndeclare global {\n  interface Window {\n    __astro_entities__?: Array<Entity>;\n  }\n}\n\n/**\n * Initializes the PocketBase toolbar.\n */\nexport function initToolbar(\n  canvas: ShadowRoot,\n  app: ToolbarAppEventTarget,\n  server: ToolbarServerHelpers\n): void {\n  // Options for the toolbar\n  let options: ToolbarOptions = {\n    realtime: false,\n    hasContentLoader: false,\n    baseUrl: \"\"\n  };\n\n  // Update the options and refresh the toolbar\n  server.on(\n    \"astro-integration-pocketbase:settings\",\n    (updatedOptions: ToolbarOptions) => {\n      options = updatedOptions;\n      createPocketBaseWindow();\n    }\n  );\n\n  // Create the window (for every page navigation)\n  createPocketBaseWindow();\n  document.addEventListener(\"astro:after-swap\", createPocketBaseWindow);\n\n  // Setup the window\n  closeOnOutsideClick(app);\n  synchronizePlacementOnUpdate(app, canvas);\n\n  function createPocketBaseWindow(): void {\n    // Clear any existing content\n    canvas.innerHTML = \"\";\n\n    const entities = window.__astro_entities__ || [];\n\n    // Create the main window element\n    const windowElement = createWindowElement(/* HTML */ `\n      <style>\n        :host astro-dev-toolbar-window {\n          max-height: 480px;\n        }\n\n        main {\n          display: flex;\n          flex-direction: column;\n          gap: 1rem;\n          overflow-y: auto;\n        }\n      </style>\n\n      <header></header>\n\n      <hr />\n\n      <main>\n        ${entities.length > 0\n          ? createEntities(entities, options.baseUrl)\n          : createPlaceholder()}\n      </main>\n    `);\n\n    // Create and insert the header\n    createHeader(windowElement, server, options);\n\n    // Add the window to the canvas\n    canvas.append(windowElement);\n\n    // Update the toolbar depending on the current state\n    if (entities.length > 0) {\n      app.toggleNotification({ state: true, level: \"info\" });\n    } else {\n      app.toggleNotification({ state: false });\n      app.toggleState({ state: false });\n    }\n  }\n}\n","import { defineToolbarApp } from \"astro/toolbar\";\nimport { initToolbar } from \"./init-toolbar\";\n\nexport default defineToolbarApp({\n  init: initToolbar\n});\n"],"mappings":"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"}