@studiocms/wysiwyg 0.1.0-experimental.5 → 0.1.1

package/dist/components/Editor.astro

@@ -0,0 +1,153 @@
+---
+import '@studiocms/ui/css/colors.css';
+import 'grapesjs/dist/css/grapes.min.css';
+import '../styles/editor.css';
+import { getRegistryComponents } from 'studiocms:component-registry/runtime';
+import type { PluginPageTypeEditorProps } from 'studiocms/types';
+
+// Get the component registry for the editor
+const componentRegistry = getRegistryComponents();
+
+interface Props extends PluginPageTypeEditorProps {}
+
+// Extract the content from Astro props
+const { content, id = '' } = Astro.props as Props;
+
+const token = Astro.locals?.StudioCMS?.plugins?.editorCSRFToken;
+---
+
+<div
+    class="scms-grapesjs-container"
+    data-page-id={id}
+    data-component-registry={JSON.stringify(componentRegistry)}
+    data-editor-csrf-token={token}
+>
+    <div class="editor">
+        <div id="gjs"></div>
+    </div>
+</div>
+
+<textarea id="page-content" name="page-content" style="display: none;"
+    >{content}</textarea
+>
+
+<script>
+    const [
+      { toast },
+      { default: grapesjs, usePlugin },
+      { baseConfig },
+      { getEditorElmData, StudioCMSDbStorageAdapter },
+      { astroComponents },
+      { default: grapesBlocks },
+    ] = await Promise.all([
+      import('@studiocms/ui/components/Toast/toast.js'),
+      import('grapesjs'),
+      import('../common/gjs-editor-settings'),
+      import('../common/gjs-editor-utils'),
+      import('../common/gjs-componentRegistry'),
+      import('../common/gjs-blocks'),
+    ]);
+
+    // Get the editor options for Astro components and inline storage
+    // This will be used to initialize the plugins with the correct settings
+    const { astroComponentsOpts, StudioCMSDbStorageAdapterOpts } =
+        getEditorElmData(document, {
+            container: ".scms-grapesjs-container",
+            pageContent: "#page-content",
+        });
+
+    // Initialize the GrapesJS editor with the base configuration and plugins
+    // The plugins include custom components, inline storage, and various editor features
+    // such as blocks, tabs, countdown, custom code, tooltips, image editor,
+    // typed text, forms, rich text editor, and the StudioCMS GrapesJS plugin
+    // This setup allows for a rich editing experience with various functionalities
+    const editor = grapesjs.init({
+        ...baseConfig,
+        plugins: [
+            usePlugin(astroComponents, astroComponentsOpts),
+            usePlugin(StudioCMSDbStorageAdapter, StudioCMSDbStorageAdapterOpts),
+            usePlugin(grapesBlocks),
+        ],
+    });
+
+    // Simple warn notifier
+    const origWarn = console.warn;
+    console.warn = function (msg) {
+        if (msg.indexOf("[undefined]") == -1) {
+            toast({
+                title: "Warning",
+                type: "warning",
+                description: msg,
+                duration: 5000,
+            });
+        }
+        origWarn(msg);
+    };
+
+    // Do stuff on load
+    editor.on("load", function () {
+        const $ = grapesjs.$;
+
+        // Load and show settings and style manager
+        let openTmBtn = editor.Panels.getButton("views", "open-tm");
+        openTmBtn && openTmBtn.set("active", 1);
+        let openSm = editor.Panels.getButton("views", "open-sm");
+        openSm && openSm.set("active", 1);
+
+        // Remove trait view
+        editor.Panels.removeButton("views", "open-tm");
+
+        // Add Settings Sector
+        let traitsSector = $(
+            '<div class="gjs-sm-sector no-select">' +
+                '<div class="gjs-sm-sector-title"><span class="icon-settings fa fa-cog"></span> <span class="gjs-sm-sector-label">Settings</span></div>' +
+                '<div class="gjs-sm-properties" style="display: none;"></div></div>',
+        );
+        let traitsProps = traitsSector.find(".gjs-sm-properties");
+        traitsProps.append($(".gjs-traits-cs"));
+        $(".gjs-sm-sectors").before(traitsSector);
+        traitsSector.find(".gjs-sm-sector-title").on("click", function () {
+            let traitStyle = traitsProps.get(0).style;
+            let hidden = traitStyle.display === "none";
+            if (hidden) {
+                traitStyle.display = "block";
+            } else {
+                traitStyle.display = "none";
+            }
+        });
+
+        // Open block manager
+        let openBlocksBtn = editor.Panels.getButton("views", "open-blocks");
+        openBlocksBtn && openBlocksBtn.set("active", 1);
+    });
+
+    const updateSaveIndicator = () => {
+        const saveIndicator = document.querySelector(
+            ".save-indicator",
+        ) as HTMLElement;
+
+        if (saveIndicator) {
+            const isDirty = editor.getDirtyCount() > 0;
+
+            if (isDirty) {
+                saveIndicator.classList.add("dirty");
+            } else {
+                saveIndicator.classList.remove("dirty");
+            }
+        }
+    };
+
+    const updateIndicatorEvents = [
+        "load",
+        "update",
+        "component:add",
+        "component:remove",
+        "component:update",
+        "undo",
+        "redo",
+    ];
+
+    updateIndicatorEvents.forEach((event) =>
+        editor.on(event, updateSaveIndicator),
+    );
+</script>

package/dist/components/render.d.ts

@@ -0,0 +1,15 @@
+declare const renderer: {
+    name: string;
+    renderer: (content: string) => Promise<string>;
+    sanitizeOpts: {
+        allowElements?: string[] | undefined;
+        blockElements?: string[] | undefined;
+        dropElements?: string[] | undefined;
+        allowAttributes?: Record<string, string[]> | undefined;
+        dropAttributes?: Record<string, string[]> | undefined;
+        allowComponents?: boolean | undefined;
+        allowCustomElements?: boolean | undefined;
+        allowComments?: boolean | undefined;
+    } | undefined;
+};
+export default renderer;

package/dist/components/render.js

@@ -0,0 +1,11 @@
+import { preRenderer } from "../lib/prerender.js";
+import { shared } from "../lib/shared.js";
+const renderer = {
+  name: "@studiocms/wysiwyg",
+  renderer: preRenderer,
+  sanitizeOpts: shared?.sanitize
+};
+var render_default = renderer;
+export {
+  render_default as default
+};

package/dist/consts.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The endpoint path for the WYSIWYG editor's partial HTML file.
+ * This file contains the structure of the WYSIWYG editor's UI.
+ */
+export declare const PARTIAL_PATH = "/studiocms_api/wysiwyg_editor/partial";
+/**
+ * The endpoint path for the WYSIWYG editor's CSS file.
+ * This file contains styles specific to the WYSIWYG editor.
+ */
+export declare const GRAPES_CSS_PATH = "/studiocms_api/wysiwyg_editor/grapes.css";
+/**
+ * The endpoint path for storing WYSIWYG editor data.
+ * This endpoint is used to save the state of the WYSIWYG editor,
+ * allowing users to persist their content.
+ */
+export declare const STORE_ENDPOINT_PATH = "/studiocms_api/wysiwyg_editor/store";
+/**
+ * The unique identifier for the WYSIWYG plugin within the StudioCMS ecosystem.
+ * Used to register and reference the plugin in the system.
+ */
+export declare const WYSIWYG_TABLE_PLUGIN_ID = "studiocms-wysiwyg";
+/**
+ * The name of the CSRF header used for WYSIWYG editor requests.
+ * This header is used to validate requests and prevent CSRF attacks.
+ */
+export declare const CSRF_HEADER_NAME = "X-CSRF-Token";
+/**
+ * The name of the CSRF cookie used for WYSIWYG editor requests.
+ * This cookie stores the CSRF token to be validated against incoming requests.
+ */
+export declare const CSRF_COOKIE_NAME = "studiocms-editor-csrf-token";

package/dist/consts.js

@@ -0,0 +1,15 @@
+const API_BASE = "/studiocms_api/wysiwyg_editor";
+const PARTIAL_PATH = `${API_BASE}/partial`;
+const GRAPES_CSS_PATH = `${API_BASE}/grapes.css`;
+const STORE_ENDPOINT_PATH = `${API_BASE}/store`;
+const WYSIWYG_TABLE_PLUGIN_ID = "studiocms-wysiwyg";
+const CSRF_HEADER_NAME = "X-CSRF-Token";
+const CSRF_COOKIE_NAME = "studiocms-editor-csrf-token";
+export {
+  CSRF_COOKIE_NAME,
+  CSRF_HEADER_NAME,
+  GRAPES_CSS_PATH,
+  PARTIAL_PATH,
+  STORE_ENDPOINT_PATH,
+  WYSIWYG_TABLE_PLUGIN_ID
+};

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * These triple-slash directives defines dependencies to various declaration files that will be
+ * loaded when a user imports the StudioCMS plugin in their Astro configuration file. These
+ * directives must be first at the top of the file and can only be preceded by this comment.
+ */
+import type { AstroIntegration } from 'astro';
+import { type StudioCMSPlugin } from 'studiocms/plugins';
+import { type WYSIWYGSchemaOptions } from './types.js';
+/**
+ * Creates an internal Astro integration for WYSIWYG rendering.
+ * This is used for testing and internal purposes.
+ *
+ * @param {string} packageIdentifier - The package identifier for the integration.
+ * @param {WYSIWYGSchemaOptions} [options] - Optional configuration options for the WYSIWYG plugin.
+ * @returns {AstroIntegration} The configured Astro integration.
+ */
+export declare function internalWysiwygIntegration(packageIdentifier: string, options?: WYSIWYGSchemaOptions): AstroIntegration;
+/**
+ * Creates and configures the StudioCMS WYSIWYG Editor plugin.
+ *
+ * This plugin integrates a WYSIWYG editor into the StudioCMS environment,
+ * registering custom routes, rendering components, and handling configuration hooks.
+ *
+ * @param options - Optional configuration for the WYSIWYG schema, including sanitization options.
+ * @returns A configured StudioCMS plugin instance for the WYSIWYG editor.
+ *
+ * @example
+ * ```typescript
+ * import wysiwyg from '@studiocms/wysiwyg';
+ *
+ * plugins: [
+ *   wysiwyg({
+ *     sanitize: {}
+ *   })
+ * ]
+ * ```
+ */
+declare function wysiwyg(opts?: WYSIWYGSchemaOptions): StudioCMSPlugin;
+export default wysiwyg;

package/dist/index.js

@@ -0,0 +1,71 @@
+import { createResolver } from "astro-integration-kit";
+import { definePlugin } from "studiocms/plugins";
+import { GRAPES_CSS_PATH, PARTIAL_PATH, STORE_ENDPOINT_PATH } from "./consts.js";
+import { shared } from "./lib/shared.js";
+import { WYSIWYGSchema } from "./types.js";
+function internalWysiwygIntegration(packageIdentifier, options) {
+  const resolvedOptions = WYSIWYGSchema.parse(options);
+  const resEntrypoint = (path) => `@studiocms/wysiwyg/routes/${path}`;
+  const routes = [
+    {
+      entrypoint: resEntrypoint("partial.astro"),
+      pattern: PARTIAL_PATH,
+      prerender: false
+    },
+    {
+      entrypoint: resEntrypoint("grapes.css.js"),
+      pattern: GRAPES_CSS_PATH,
+      prerender: false
+    },
+    {
+      entrypoint: resEntrypoint("store.js"),
+      pattern: STORE_ENDPOINT_PATH,
+      prerender: false
+    }
+  ];
+  return {
+    name: packageIdentifier,
+    hooks: {
+      "astro:config:setup": ({ injectRoute }) => {
+        for (const route of routes) {
+          injectRoute(route);
+        }
+      },
+      "astro:config:done": () => {
+        shared.sanitize = resolvedOptions?.sanitize;
+      }
+    }
+  };
+}
+function wysiwyg(opts) {
+  const { resolve } = createResolver(import.meta.url);
+  const options = WYSIWYGSchema.parse(opts);
+  const packageIdentifier = "@studiocms/wysiwyg";
+  return definePlugin({
+    identifier: packageIdentifier,
+    name: "StudioCMS WYSIWYG Editor",
+    studiocmsMinimumVersion: "0.1.0-beta.23",
+    hooks: {
+      "studiocms:astro-config": ({ addIntegrations }) => {
+        addIntegrations(internalWysiwygIntegration(packageIdentifier, options));
+      },
+      "studiocms:rendering": ({ setRendering }) => {
+        setRendering({
+          pageTypes: [
+            {
+              identifier: "studiocms/wysiwyg",
+              label: "WYSIWYG",
+              rendererComponent: resolve("./components/render.js"),
+              pageContentComponent: resolve("./components/Editor.astro")
+            }
+          ]
+        });
+      }
+    }
+  });
+}
+var index_default = wysiwyg;
+export {
+  index_default as default,
+  internalWysiwygIntegration
+};

package/dist/lib/db.d.ts

@@ -0,0 +1,83 @@
+import { Effect } from 'studiocms/effect';
+/**
+ * Provides an SDK for interacting with StudioCMS plugin data using Effect-based operations.
+ *
+ * This generator function yields an object with methods to retrieve, load, and store
+ * WYSIWYG editor plugin data, leveraging schema inference for type safety.
+ *
+ * @remarks
+ * - Utilizes `InferType` to infer types from `studioCMSProjectDataSchema`.
+ * - All operations are effectful and return Effect-based results.
+ *
+ * @returns An object containing methods for plugin data access:
+ * - `getAll`: Retrieves all plugin data entries.
+ * - `load`: Loads a specific plugin data entry by ID.
+ * - `store`: Inserts or updates a plugin data entry by ID.
+ *
+ * @example
+ * ```typescript
+ * const sdk = yield* UseSDK;
+ * const allEntries = sdk.getAll();
+ * const entry = yield* sdk.load('entry-id');
+ * yield* sdk.store('entry-id', { ...data });
+ * ```
+ */
+export declare const UseSDK: Effect.Effect<{
+    /**
+     * Retrieves all entries of the plugin data for the WYSIWYG editor.
+     *
+     * @returns An array of all plugin data entries.
+     */
+    getAll: () => Effect.Effect<import("@withstudiocms/sdk/types").PluginDataEntry<any>[], import("@withstudiocms/sdk/errors.js").StudioCMSSDKError, never>;
+    /**
+     * Retrieves a specific entry of the plugin data by its ID.
+     *
+     * @param id - The unique identifier for the plugin data entry.
+     * @returns An Effect that resolves to the plugin data entry with the specified ID.
+     */
+    load: (id: string) => Effect.Effect<import("@withstudiocms/sdk/types").PluginDataEntry<any> | undefined, import("@withstudiocms/sdk/errors.js").StudioCMSSDKError, never>;
+    /**
+     * Inserts or updates a plugin data entry with the specified ID and data.
+     *
+     * @param id - The unique identifier for the plugin data entry.
+     * @param data - The data to be inserted or updated in the plugin data entry.
+     * @returns An Effect that resolves to the inserted or updated plugin data entry.
+     */
+    store: (id: string, data: {
+        dataSources: unknown[];
+        assets: unknown[];
+        styles: unknown[];
+        symbols: unknown[];
+        pages: unknown[];
+        __STUDIOCMS_HTML?: string | undefined;
+    }) => Effect.Effect<import("@withstudiocms/sdk/types").PluginDataEntry<any>, import("@withstudiocms/sdk/errors.js").StudioCMSSDKError, never>;
+    /**
+     * Returns the inferred type for the plugin data schema.
+     */
+    types: {
+        readonly _Schema: import("effect/Schema").Struct<{
+            dataSources: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            assets: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            styles: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            symbols: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            pages: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            __STUDIOCMS_HTML: import("effect/Schema").optional<import("effect/Schema").mutable<typeof import("effect/Schema").String>>;
+        }>;
+        readonly $UsePluginData: import("effect/Schema").Struct<{
+            dataSources: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            assets: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            styles: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            symbols: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            pages: import("effect/Schema").mutable<import("effect/Schema").Array$<typeof import("effect/Schema").Unknown>>;
+            __STUDIOCMS_HTML: import("effect/Schema").optional<import("effect/Schema").mutable<typeof import("effect/Schema").String>>;
+        }>;
+        readonly $Insert: {
+            dataSources: unknown[];
+            assets: unknown[];
+            styles: unknown[];
+            symbols: unknown[];
+            pages: unknown[];
+            __STUDIOCMS_HTML?: string | undefined;
+        };
+    };
+}, import("studiocms/sdk/base").DBClientInitializationError | import("studiocms/sdk/base").SDKInitializationError, never>;

package/dist/lib/db.js

@@ -0,0 +1,50 @@
+import { SDKCore } from "studiocms:sdk";
+import { Effect } from "studiocms/effect";
+import { WYSIWYG_TABLE_PLUGIN_ID } from "../consts.js";
+import { studioCMSProjectDataSchema } from "../schema.js";
+const UseSDK = Effect.gen(function* () {
+  const {
+    PLUGINS: { usePluginData, InferType }
+  } = yield* SDKCore;
+  const infer = new InferType(studioCMSProjectDataSchema);
+  const { getEntries, getEntry } = usePluginData(
+    WYSIWYG_TABLE_PLUGIN_ID,
+    {
+      validator: { effectSchema: studioCMSProjectDataSchema }
+    }
+  );
+  const updateOrInsert = (entry) => (id, data) => {
+    if (entry) return getEntry(id).update(data);
+    return getEntry(id).insert(data);
+  };
+  return {
+    /**
+     * Retrieves all entries of the plugin data for the WYSIWYG editor.
+     *
+     * @returns An array of all plugin data entries.
+     */
+    getAll: () => getEntries((data) => data.filter((entry) => entry.data.__STUDIOCMS_HTML)),
+    /**
+     * Retrieves a specific entry of the plugin data by its ID.
+     *
+     * @param id - The unique identifier for the plugin data entry.
+     * @returns An Effect that resolves to the plugin data entry with the specified ID.
+     */
+    load: (id) => getEntry(id).select(),
+    /**
+     * Inserts or updates a plugin data entry with the specified ID and data.
+     *
+     * @param id - The unique identifier for the plugin data entry.
+     * @param data - The data to be inserted or updated in the plugin data entry.
+     * @returns An Effect that resolves to the inserted or updated plugin data entry.
+     */
+    store: (id, data) => getEntry(id).select().pipe(Effect.flatMap((entry) => updateOrInsert(entry)(id, data))),
+    /**
+     * Returns the inferred type for the plugin data schema.
+     */
+    types: infer
+  };
+});
+export {
+  UseSDK
+};

package/dist/lib/prerender.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Asynchronously pre-renders HTML content from a serialized string.
+ *
+ * Attempts to parse the provided content string and extract the `__STUDIOCMS_HTML` property.
+ * If the content is missing, invalid, or parsing fails, returns an appropriate error message as HTML.
+ *
+ * @param content - The serialized content string to be parsed and rendered.
+ * @returns A promise that resolves to the rendered HTML string or an error message in HTML format.
+ */
+export declare const preRenderer: (content: string) => Promise<string>;

package/dist/lib/prerender.js

@@ -0,0 +1,22 @@
+import { parse } from "./utils.js";
+const preRenderer = async (content) => {
+  let parsedContent = "<h1>Error: No content found</h1>";
+  if (!content) {
+    return parsedContent;
+  }
+  try {
+    const { __STUDIOCMS_HTML } = parse(content);
+    if (__STUDIOCMS_HTML) {
+      parsedContent = __STUDIOCMS_HTML;
+    } else {
+      parsedContent = "<h1>Error: Content found but invalid format</h1>";
+    }
+  } catch (error) {
+    console.error("Error parsing content:", error);
+    parsedContent = "<h1>Error parsing content</h1>";
+  }
+  return parsedContent;
+};
+export {
+  preRenderer
+};

package/dist/{wysiwyg → lib}/shared.d.ts

@@ -1,8 +1,6 @@
-type Shared = {
-    sanitize: import('ultrahtml/transformers/sanitize').SanitizeOptions;
-};
+import type { WYSIWYGSchemaOptions } from '../types.js';
 declare global {
-    var studiocmsWYSIWYG: Shared;
+    var studiocmsWYSIWYG: WYSIWYGSchemaOptions;
 }
 /**
  * A shared object used across the WYSIWYG module. This object is either retrieved
@@ -13,5 +11,4 @@ declare global {
  * The `sanitize` property is initialized as an empty object and can be used to store
  * sanitization-related configurations or utilities.
  */
-export declare const shared: Shared;
-export {};
+export declare const shared: WYSIWYGSchemaOptions;

package/dist/lib/shared.js

@@ -0,0 +1,6 @@
+const shared = globalThis.studiocmsWYSIWYG || (globalThis.studiocmsWYSIWYG = {
+  sanitize: void 0
+});
+export {
+  shared
+};

package/dist/{utils.d.ts → lib/utils.d.ts}

@@ -13,4 +13,4 @@ export declare function firstUpperCase(text: string): string;
  * @returns The parsed object of type `T`.
  * @throws {SyntaxError} If the input string is not valid JSON.
  */
-export declare function parse<T extends object>(data: string): T;
+export declare function parse<T>(data: string): T;

package/dist/lib/utils.js

@@ -0,0 +1,10 @@
+function firstUpperCase(text) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+function parse(data) {
+  return JSON.parse(data);
+}
+export {
+  firstUpperCase,
+  parse
+};

package/dist/routes/grapes.css.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Handles all HTTP methods for serving a CSS stylesheet.
+ *
+ * @returns {Promise<Response>} A promise that resolves to a Response object containing the CSS stylesheet,
+ * with appropriate headers for content type and CORS.
+ */
+export declare function ALL(): Promise<Response>;

package/dist/routes/grapes.css.js

@@ -0,0 +1,13 @@
+import stylesheet from "../styles/grapes.css?raw";
+async function ALL() {
+  return new Response(stylesheet, {
+    headers: {
+      "Content-Type": "text/css",
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "GET, HEAD, OPTIONS"
+    }
+  });
+}
+export {
+  ALL
+};

package/dist/routes/partial.astro

@@ -0,0 +1,44 @@
+---
+export const partial = true;
+
+import { getRendererComponents } from 'studiocms:component-registry/runtime';
+import { apiResponseLogger } from 'studiocms:logger';
+
+// Define the PropData type
+type PropData = {
+	componentKey: string;
+	// biome-ignore lint/suspicious/noExplicitAny: this is a dynamic prop type
+	props?: Record<string, any>;
+	slot?: string;
+};
+
+// Import components
+const componentRegistry = await getRendererComponents();
+
+// Parse the request body as JSON
+let data: PropData;
+try {
+	data = await Astro.request.json();
+} catch (error) {
+	return apiResponseLogger(400, 'Invalid JSON in request body', error);
+}
+
+// Validate the data
+if (!data || typeof data.componentKey !== 'string' || !data.componentKey.trim()) {
+	return apiResponseLogger(400, 'Missing or invalid componentKey');
+}
+
+// Destructure the componentKey, props, and slot from the data
+const { componentKey, props = {}, slot } = data;
+
+// Check if the component exists in the registry
+const Component = componentRegistry[componentKey];
+
+// Handle case where component doesn't exist
+if (!Component) {
+	return apiResponseLogger(404, `Component "${componentKey}" not found`);
+}
+---
+<Component {...props}>
+	{slot && <Fragment set:html={slot} />}
+</Component>

package/dist/routes/store.d.ts

@@ -0,0 +1 @@
+export declare const GET: import("astro").APIRoute, POST: import("astro").APIRoute, OPTIONS: import("astro").APIRoute, ALL: import("astro").APIRoute;