@studiocms/devapps 0.1.0-beta.10 → 0.1.0-beta.12

package/dist/apps/libsql-viewer.d.ts

@@ -1,46 +1,2 @@
-/**
- * Generates the source URL for an iframe based on the provided database URL.
- *
- * @param dbUrl - The URL of the database.
- * @returns The source URL for the iframe. If the database URL contains 'turso.io',
- *          it returns `tursoURL`. Otherwise, it returns `sqlLiteUrl`.
- */
-export declare function getIFrameSrc(dbUrl: string): "https://studio.outerbase.com/embed/sqlite?theme=dark" | "https://studio.outerbase.com/embed/turso?theme=dark";
-/**
- * Defines a toolbar application for viewing and interacting with a libSQL database.
- *
- * @param {HTMLCanvasElement} canvas - The canvas element where the app will be initialized.
- * @param {EventTarget} eventTarget - The event target for handling outside click events.
- *
- * @returns {void}
- *
- * @example
- * ```typescript
- * import libsqlViewer from './libsql-viewer';
- *
- * const canvas = document.getElementById('appCanvas') as HTMLCanvasElement;
- * const eventTarget = new EventTarget();
- *
- * libsqlViewer.init(canvas, eventTarget);
- * ```
- *
- * @remarks
- * This function creates an iframe to display the libSQL database viewer and sets up
- * event listeners to handle SQL query and transaction requests via postMessage.
- *
- * The iframe's source URL and authentication token are retrieved from the `dbEnv` object.
- *
- * The `createClient` function is used to create a client for executing SQL queries and transactions.
- *
- * The `closeOnOutsideClick` function is used to close the app window when a click is detected outside of it.
- *
- * The `transformTursoResult` function is used to transform the results of SQL queries and transactions.
- *
- * The `biome-ignore` comments are used to suppress linting warnings for non-null assertions.
- *
- * @see {@link createClient}
- * @see {@link closeOnOutsideClick}
- * @see {@link transformTursoResult}
- */
 declare const _default: import("astro").DevToolbarApp;
 export default _default;

package/dist/apps/libsql-viewer.js

@@ -1,95 +1,32 @@
-import { dbEnv } from "virtual:studiocms-devapps/config";
-import { createClient } from "@libsql/client/web";
-import { transformTursoResult } from "@outerbase/sdk-transform";
+import { libsqlEndpoint } from "virtual:studiocms-devapps/endpoints";
 import { defineToolbarApp } from "astro/toolbar";
 import { closeOnOutsideClick } from "../utils/app-utils.js";
-const sqlLiteUrl = "https://studio.outerbase.com/embed/sqlite?theme=dark";
-const tursoURL = "https://studio.outerbase.com/embed/turso?theme=dark";
-function getIFrameSrc(dbUrl) {
-  if (dbUrl.includes("turso.io")) {
-    return tursoURL;
-  }
-  return sqlLiteUrl;
-}
 var libsql_viewer_default = defineToolbarApp({
   init(canvas, eventTarget) {
     const appWindow = document.createElement("astro-dev-toolbar-window");
-    appWindow.style.width = "95%";
-    appWindow.style.height = "95%";
+    appWindow.style.width = "90%";
+    appWindow.style.height = "100%";
+    appWindow.style.marginLeft = "1rem";
+    appWindow.style.marginRight = "1rem";
+    appWindow.style.padding = "0";
+    appWindow.style.border = "none";
+    appWindow.style.overflow = "hidden";
+    appWindow.style.borderRadius = "0.5rem";
+    appWindow.style.boxShadow = "0 0 1rem rgba(0, 0, 0, 0.1)";
     closeOnOutsideClick(eventTarget);
     const viewerIframe = document.createElement("iframe");
-    viewerIframe.src = getIFrameSrc(dbEnv.remoteUrl);
+    viewerIframe.src = libsqlEndpoint;
     viewerIframe.id = "sqlIframe";
     viewerIframe.title = "libSQL Database Viewer";
-    Object.assign(viewerIframe.dataset, {
-      url: dbEnv.remoteUrl,
-      authtoken: dbEnv.token
-    });
     Object.assign(viewerIframe.style, {
       height: "100%",
       width: "100%",
       border: "1px solid rgba(27, 30, 36, 1)"
     });
     appWindow.appendChild(viewerIframe);
-    const client = createClient({
-      // biome-ignore lint/style/noNonNullAssertion: <explanation>
-      url: viewerIframe.dataset.url,
-      // biome-ignore lint/style/noNonNullAssertion: <explanation>
-      authToken: viewerIframe.dataset.authtoken
-    });
-    window.addEventListener("message", async (e) => {
-      const contentWindow = viewerIframe.contentWindow;
-      if (contentWindow && e.data) {
-        const { type, id, statement, statements } = e.data;
-        if (type === "query" && statement) {
-          try {
-            const result = await client.execute(statement);
-            contentWindow.postMessage(
-              {
-                type,
-                id,
-                data: transformTursoResult(result)
-              },
-              "*"
-            );
-          } catch (err) {
-            contentWindow.postMessage(
-              {
-                type,
-                id,
-                error: err.message
-              },
-              "*"
-            );
-          }
-        } else if (type === "transaction" && statements) {
-          try {
-            const result = await client.batch(statements, "write");
-            contentWindow.postMessage(
-              {
-                type,
-                id,
-                data: result.map(transformTursoResult)
-              },
-              "*"
-            );
-          } catch (err) {
-            contentWindow.postMessage(
-              {
-                type,
-                id,
-                error: err.message
-              },
-              "*"
-            );
-          }
-        }
-      }
-    });
     canvas.appendChild(appWindow);
   }
 });
 export {
-  libsql_viewer_default as default,
-  getIFrameSrc
+  libsql_viewer_default as default
 };

package/dist/index.js

@@ -16,11 +16,13 @@ function studioCMSDevApps(opts) {
         options.verbose && logger.info("Setting up StudioCMS DevApps");
         if (command === "dev") {
           const wpAPIPath = makeEndpointPath(options.appsConfig.wpImporter.endpoint);
+          const libsqlIFrame = makeEndpointPath(options.appsConfig.libSQLViewer.endpoint);
           addVirtualImports(params, {
             name: "@studiocms/devapps",
             imports: {
               "virtual:studiocms-devapps/endpoints": `
 								export const wpAPIEndpoint = "${wpAPIPath}";
+								export const libsqlEndpoint = "${libsqlIFrame}";
 							`,
               "virtual:studiocms-devapps/config": `
 								export const userProjectRoot = "${config.root.pathname}";
@@ -34,11 +36,15 @@ function studioCMSDevApps(opts) {
           });
           if (options.appsConfig.libSQLViewer.enabled) {
             options.verbose && logger.info("Adding Dev Toolbar App: LibSQL Viewer");
+            injectDevRoute(params, {
+              entrypoint: resolve("./routes/outerbase.astro"),
+              pattern: libsqlIFrame
+            });
             addDevToolbarApp({
-              name: "LibSQL Viewer",
+              name: "Outerbase Studio Embedded",
               id: "studiocms-devapps-libsql-viewer",
               entrypoint: resolve("./apps/libsql-viewer.js"),
-              icon: '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125" /></svg>'
+              icon: '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="mb-4 hidden size-4 md:block"><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0C8.97048 0 0 8.96666 0 19.9999C0 31.0227 8.97048 40 20 40C31.0294 40 40 31.0333 40 19.9999C40 8.96666 31.0294 0 20 0ZM27.4346 33.7676L27.3343 33.8966C26.2881 35.1776 25.0082 35.5974 24.1178 35.7158C23.8841 35.748 23.6504 35.759 23.4056 35.759C20.9794 35.759 18.5308 34.112 16.3272 30.9795C14.5353 28.4284 12.9771 25.027 11.9421 21.3992C10.1057 14.9299 10.3172 9.03117 12.4763 6.36169C13.5225 5.08067 14.8024 4.66086 15.6928 4.5425C18.2192 4.19787 20.8013 5.67267 23.1385 8.79421C25.0749 11.3779 26.7445 14.9408 27.8576 18.8481C29.6716 25.2207 29.4935 31.0549 27.4346 33.7676Z" fill="currentColor"></path></svg>'
             });
           }
           if (options.appsConfig.wpImporter.enabled) {

package/dist/routes/outerbase.astro

@@ -0,0 +1,118 @@
+---
+import { dbEnv } from 'virtual:studiocms-devapps/config';
+
+/**
+ * Generates the source URL for an iframe based on the provided database URL.
+ *
+ * @param dbUrl - The URL of the database.
+ * @returns The source URL for the iframe. If the database URL contains 'turso.io',
+ *          it returns `tursoURL`. Otherwise, it returns `sqlLiteUrl`.
+ */
+function getIFrameSrc(dbUrl: string) {
+	if (dbUrl.includes('turso.io')) {
+		return 'https://studio.outerbase.com/embed/turso?theme=dark';
+	}
+	return 'https://studio.outerbase.com/embed/turso?theme=dark';
+}
+---
+<html>
+    <head>
+        <style is:global>
+            astro-dev-toolbar {
+                display: none;
+            }
+        </style>
+    </head>
+    <body style="margin: 0; padding: 0; overflow: hidden;">
+        <iframe id="sqlIframe"
+            style="width: 100%; height: 100vh; border: none;"
+            src={getIFrameSrc(dbEnv.remoteUrl)}
+            title="Outerbase Studio"
+            allow="clipboard-read; clipboard-write"
+            data-dburl={dbEnv.remoteUrl}
+            data-dbtoken={dbEnv.token}
+            />
+
+        <script>
+            // @ts-ignore
+            import { createClient } from 'https://esm.sh/@libsql/client@0.14.0/web';
+            // @ts-ignore
+            import { transformTursoResult } from 'https://esm.sh/@outerbase/sdk-transform@1.0.7';
+
+            interface ClientRequest {
+                type: 'query' | 'transaction';
+                id: number;
+                statement?: string;
+                statements?: string[];
+            }
+
+            const iframe = document.querySelector('#sqlIframe') as HTMLIFrameElement;
+
+            const dbUrl = iframe.dataset.dburl;
+            const dbToken = iframe.dataset.dbtoken;
+
+            const client = createClient({
+                // biome-ignore lint/style/noNonNullAssertion: <explanation>
+                url: dbUrl!,
+                // biome-ignore lint/style/noNonNullAssertion: <explanation>
+                authToken: dbToken!,
+                intMode: 'bigint',
+            });
+
+            // Event listener to handle postMessage events
+            window.addEventListener('message', async (e: MessageEvent<ClientRequest>) => {
+                const contentWindow = iframe.contentWindow;
+
+                if (contentWindow && e.data) {
+                    const { type, id, statement, statements } = e.data;
+
+                    if (type === 'query' && statement) {
+                        // Execute a single SQL query
+                        try {
+                            const result = await client.execute(statement);
+                            contentWindow.postMessage(
+                                {
+                                    type,
+                                    id,
+                                    data: transformTursoResult(result),
+                                },
+                                '*'
+                            );
+                        } catch (err) {
+                            contentWindow.postMessage(
+                                {
+                                    type,
+                                    id,
+                                    error: (err as Error).message,
+                                },
+                                '*'
+                            );
+                        }
+                    } else if (type === 'transaction' && statements) {
+                        // Execute a batch of SQL statements in a transaction
+                        try {
+                            const result = await client.batch(statements, 'write');
+                            contentWindow.postMessage(
+                                {
+                                    type,
+                                    id,
+                                    data: result.map(transformTursoResult),
+                                },
+                                '*'
+                            );
+                        } catch (err) {
+                            contentWindow.postMessage(
+                                {
+                                    type,
+                                    id,
+                                    error: (err as Error).message,
+                                },
+                                '*'
+                            );
+                        }
+                    }
+                }
+            });
+        </script>
+    </body>
+</html>

package/dist/schema/index.d.ts

@@ -26,7 +26,13 @@ export declare const AppsConfigSchema: z.ZodEffects<z.ZodDefault<z.ZodOptional<z
     /**
      * Astro DB LibSQL Viewer App Config
      */
-    libSQLViewer: z.ZodDefault<z.ZodBoolean>;
+    libSQLViewer: z.ZodUnion<[z.ZodBoolean, z.ZodObject<{
+        endpoint: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+    }, "strip", z.ZodTypeAny, {
+        endpoint: string;
+    }, {
+        endpoint?: string | undefined;
+    }>]>;
     /**
      * StudioCMS WP API Importer App Config
      */
@@ -38,28 +44,35 @@ export declare const AppsConfigSchema: z.ZodEffects<z.ZodDefault<z.ZodOptional<z
         endpoint?: string | undefined;
     }>]>;
 }, "strip", z.ZodTypeAny, {
-    libSQLViewer: boolean;
+    libSQLViewer: boolean | {
+        endpoint: string;
+    };
     wpImporter: boolean | {
         endpoint: string;
     };
 }, {
+    libSQLViewer: boolean | {
+        endpoint?: string | undefined;
+    };
     wpImporter: boolean | {
         endpoint?: string | undefined;
     };
-    libSQLViewer?: boolean | undefined;
 }>>>, {
     libSQLViewer: {
         enabled: boolean;
+        endpoint: string;
     };
     wpImporter: {
         enabled: boolean;
         endpoint: string;
     };
 }, {
+    libSQLViewer: boolean | {
+        endpoint?: string | undefined;
+    };
     wpImporter: boolean | {
         endpoint?: string | undefined;
     };
-    libSQLViewer?: boolean | undefined;
 } | undefined>;
 /**
  * Schema definition for StudioCMS development applications configuration.
@@ -82,7 +95,13 @@ export declare const StudioCMSDevAppsSchema: z.ZodDefault<z.ZodOptional<z.ZodObj
         /**
          * Astro DB LibSQL Viewer App Config
          */
-        libSQLViewer: z.ZodDefault<z.ZodBoolean>;
+        libSQLViewer: z.ZodUnion<[z.ZodBoolean, z.ZodObject<{
+            endpoint: z.ZodDefault<z.ZodOptional<z.ZodString>>;
+        }, "strip", z.ZodTypeAny, {
+            endpoint: string;
+        }, {
+            endpoint?: string | undefined;
+        }>]>;
         /**
          * StudioCMS WP API Importer App Config
          */
@@ -94,28 +113,35 @@ export declare const StudioCMSDevAppsSchema: z.ZodDefault<z.ZodOptional<z.ZodObj
             endpoint?: string | undefined;
         }>]>;
     }, "strip", z.ZodTypeAny, {
-        libSQLViewer: boolean;
+        libSQLViewer: boolean | {
+            endpoint: string;
+        };
         wpImporter: boolean | {
             endpoint: string;
         };
     }, {
+        libSQLViewer: boolean | {
+            endpoint?: string | undefined;
+        };
         wpImporter: boolean | {
             endpoint?: string | undefined;
         };
-        libSQLViewer?: boolean | undefined;
     }>>>, {
         libSQLViewer: {
             enabled: boolean;
+            endpoint: string;
         };
         wpImporter: {
             enabled: boolean;
             endpoint: string;
         };
     }, {
+        libSQLViewer: boolean | {
+            endpoint?: string | undefined;
+        };
         wpImporter: boolean | {
             endpoint?: string | undefined;
         };
-        libSQLViewer?: boolean | undefined;
     } | undefined>;
 }, "strip", z.ZodTypeAny, {
     endpoint: string;
@@ -123,6 +149,7 @@ export declare const StudioCMSDevAppsSchema: z.ZodDefault<z.ZodOptional<z.ZodObj
     appsConfig: {
         libSQLViewer: {
             enabled: boolean;
+            endpoint: string;
         };
         wpImporter: {
             enabled: boolean;
@@ -133,10 +160,12 @@ export declare const StudioCMSDevAppsSchema: z.ZodDefault<z.ZodOptional<z.ZodObj
     endpoint?: string | undefined;
     verbose?: boolean | undefined;
     appsConfig?: {
+        libSQLViewer: boolean | {
+            endpoint?: string | undefined;
+        };
         wpImporter: boolean | {
             endpoint?: string | undefined;
         };
-        libSQLViewer?: boolean | undefined;
     } | undefined;
 }>>>;
 /**

package/dist/schema/index.js

@@ -3,7 +3,12 @@ const AppsConfigSchema = z.object({
   /**
    * Astro DB LibSQL Viewer App Config
    */
-  libSQLViewer: z.boolean().default(true),
+  libSQLViewer: z.union([
+    z.boolean(),
+    z.object({
+      endpoint: z.string().optional().default("outerbase")
+    })
+  ]),
   /**
    * StudioCMS WP API Importer App Config
    */
@@ -15,14 +20,14 @@ const AppsConfigSchema = z.object({
   ])
 }).optional().default({
   wpImporter: { endpoint: "wp-api-importer" },
-  libSQLViewer: true
+  libSQLViewer: { endpoint: "outerbase" }
 }).transform((val) => {
   let libSQL;
   let wpAPI;
   if (typeof val.libSQLViewer === "boolean") {
-    libSQL = { enabled: val.libSQLViewer };
+    libSQL = { enabled: val.libSQLViewer, endpoint: "outerbase" };
   } else {
-    libSQL = { enabled: true };
+    libSQL = { enabled: true, endpoint: val.libSQLViewer.endpoint };
   }
   if (typeof val.wpImporter === "boolean") {
     wpAPI = { enabled: val.wpImporter, endpoint: "wp-api-importer" };

package/dist/schema/wp-api.d.ts

@@ -87,10 +87,6 @@ export declare const PageSchema: z.ZodObject<{
     title: {
         rendered: string;
     };
-    content: {
-        rendered: string;
-        protected: boolean;
-    };
     id: number;
     date_gmt: Date;
     guid: {
@@ -99,6 +95,10 @@ export declare const PageSchema: z.ZodObject<{
     modified: Date;
     modified_gmt: Date;
     slug: string;
+    content: {
+        rendered: string;
+        protected: boolean;
+    };
     excerpt: {
         rendered: string;
         protected: boolean;
@@ -118,10 +118,6 @@ export declare const PageSchema: z.ZodObject<{
     title: {
         rendered: string;
     };
-    content: {
-        rendered: string;
-        protected: boolean;
-    };
     id: number;
     date_gmt: Date;
     guid: {
@@ -130,6 +126,10 @@ export declare const PageSchema: z.ZodObject<{
     modified: Date;
     modified_gmt: Date;
     slug: string;
+    content: {
+        rendered: string;
+        protected: boolean;
+    };
     excerpt: {
         rendered: string;
         protected: boolean;
@@ -224,10 +224,6 @@ export declare const PostSchema: z.ZodObject<z.objectUtil.extendShape<{
     title: {
         rendered: string;
     };
-    content: {
-        rendered: string;
-        protected: boolean;
-    };
     id: number;
     date_gmt: Date;
     guid: {
@@ -236,6 +232,10 @@ export declare const PostSchema: z.ZodObject<z.objectUtil.extendShape<{
     modified: Date;
     modified_gmt: Date;
     slug: string;
+    content: {
+        rendered: string;
+        protected: boolean;
+    };
     excerpt: {
         rendered: string;
         protected: boolean;
@@ -258,10 +258,6 @@ export declare const PostSchema: z.ZodObject<z.objectUtil.extendShape<{
     title: {
         rendered: string;
     };
-    content: {
-        rendered: string;
-        protected: boolean;
-    };
     id: number;
     date_gmt: Date;
     guid: {
@@ -270,6 +266,10 @@ export declare const PostSchema: z.ZodObject<z.objectUtil.extendShape<{
     modified: Date;
     modified_gmt: Date;
     slug: string;
+    content: {
+        rendered: string;
+        protected: boolean;
+    };
     excerpt: {
         rendered: string;
         protected: boolean;

package/dist/utils/wp-api/converters.js

@@ -10,7 +10,7 @@ import {
   downloadAndUpdateImages,
   downloadPostImage,
   stripHtml
-} from "./utils";
+} from "./utils.js";
 const ASTROPUBLICFOLDER = path.resolve(userProjectRoot, "public");
 const WPImportFolder = path.resolve(ASTROPUBLICFOLDER, "wp-import");
 const pagesImagesFolder = path.resolve(WPImportFolder, "pages");

package/dist/virt.d.ts

@@ -2,6 +2,7 @@
 
 declare module 'virtual:studiocms-devapps/endpoints' {
 	export const wpAPIEndpoint: string;
+	export const libsqlEndpoint: string;
 }
 
 declare module 'virtual:studiocms-devapps/config' {
@@ -11,3 +12,8 @@ declare module 'virtual:studiocms-devapps/config' {
 		token: string;
 	};
 }
+
+declare module 'virtual:studiocms-devapps/db' {
+	const client: import('@libsql/client/web').Client;
+	export { client };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/devapps",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.12",
   "description": "A dedicated CMS for Astro DB. Built from the ground up by the Astro community.",
   "author": {
     "name": "Adam Matthiesen | Jacob Jenkins | Paul Valladares",
@@ -54,11 +54,9 @@
   "type": "module",
   "dependencies": {
     "astro-integration-kit": "^0.18",
-    "@libsql/client": "^0.14.0",
     "cheerio": "^1.0.0",
     "turndown": "^7.2.0",
-    "html-entities": "^2.5.2",
-    "@outerbase/sdk-transform": "^1.0.5"
+    "html-entities": "^2.5.2"
   },
   "devDependencies": {
     "@types/cheerio": "^0.22.35",
@@ -67,9 +65,9 @@
   },
   "peerDependencies": {
     "@astrojs/db": "^0.14.7",
-    "astro": "^5.4.0",
+    "astro": "^5.4.3",
     "vite": "^6.2.0",
-    "studiocms": "0.1.0-beta.10"
+    "studiocms": "0.1.0-beta.12"
   },
   "peerDependenciesMeta": {
     "studiocms": {