@bettercms-ai/astro 0.24.0 → 0.26.0

package/components/BcmsImage.astro

@@ -1,112 +1,131 @@
----
-/**
- * <BcmsImage> — renders an optimized image via the BetterCMS media transform
- * endpoint, with a 1x/2x srcset. Accepts an asset id, a MediaAsset, a URL, or an image
- * VALUE (`{ url, altText, focal?, crop? }`) — whose per-placement crop and focal point are
- * applied by image-url itself (`rect`, and fx/fy inside the crop), the same as on every lane.
- */
-import config from "bettercms:config";
-import imageUrlBuilder, {
-  focalInCrop,
-  normalizeImageCrop,
-  normalizeImageFocal,
-  objectPosition,
-  type ImageSource,
-  type ImageFormat,
-  type ImageFit,
-} from "@bettercms-ai/image-url";
-
-interface Props {
-  src: ImageSource;
-  alt?: string;
-  width?: number;
-  height?: number;
-  format?: ImageFormat;
-  quality?: number;
-  fit?: ImageFit;
-  sizes?: string;
-  loading?: "lazy" | "eager";
-  class?: string;
-  /**
-   * Focal point override, 0–1. Normally omitted — the asset carries its own and the
-   * server applies it. Pass a MediaAsset with focalX/focalY as `src` and it is picked
-   * up automatically.
-   */
-  focalX?: number | null;
-  focalY?: number | null;
-  /** Any other attribute (e.g. `data-bcms-field`) is forwarded to the <img>. */
-  [attr: string]: unknown;
-}
-
-const {
-  src,
-  alt = "",
-  width,
-  height,
-  format = "webp",
-  quality,
-  fit,
-  sizes,
-  loading = "lazy",
-  class: className,
-  focalX,
-  focalY,
-  style,
-  ...rest
-} = Astro.props;
-
-// An explicit prop wins; then the value's own `focal`; then the asset's focalX/focalY. The
-// explicit prop is taken as given (window-relative when the value is cropped); the other two are
-// SOURCE-relative, so with a crop they are re-expressed inside it — image-url's focalInCrop.
-const asset = (typeof src === "object" && src !== null ? src : {}) as Record<string, unknown>;
-const explicit = focalX != null || focalY != null;
-const num = (v: unknown) => (typeof v === "number" && Number.isFinite(v) ? v : undefined);
-const stored =
-  normalizeImageFocal(asset.focal) ??
-  (num(asset.focalX) != null || num(asset.focalY) != null
-    ? { x: num(asset.focalX) ?? 0.5, y: num(asset.focalY) ?? 0.5 }
-    : null);
-const inWindow = stored ? focalInCrop(stored, normalizeImageCrop(asset.crop)) : null;
-const fx = explicit ? focalX : inWindow?.x;
-const fy = explicit ? focalY : inWindow?.y;
-const hasFocal = fx != null || fy != null;
-
-const builder = imageUrlBuilder({ baseUrl: config.mediaUrl });
-const make = () => {
-  let b = builder(src);
-  if (width) b = b.width(width);
-  if (height) b = b.height(height);
-  if (format) b = b.format(format);
-  if (quality) b = b.quality(quality);
-  if (fit) b = b.fit(fit);
-  if (hasFocal) b = b.focal(fx ?? 0.5, fy ?? 0.5);
-  return b;
-};
-
-const src1x = make().url();
-// A pixel width is the author's size for THIS image, so it goes on as a style (a site rule like
-// `img { width: 100% }` beats a bare attribute) — paired with max-width so it never overflows a
-// narrower column, and height:auto so shrinking keeps the aspect ratio.
-const widthStyle = width ? `width:${width}px;max-width:100%;height:auto` : "";
-const src2x = make().dpr(2).url();
-
-// The CSS half of the same idea, and it is free. When only one dimension is pinned the
-// server does not crop, so the browser does — and `object-position` keeps the subject in
-// frame there too, but only if the stylesheet actually set `object-fit: cover`. Emitting
-// it unconditionally is harmless: `object-position` is inert without `object-fit`.
-const focalStyle = hasFocal ? `object-position:${objectPosition({ x: fx, y: fy })}` : "";
-const mergedStyle = [widthStyle, focalStyle, typeof style === "string" ? style : ""].filter(Boolean).join(";");
----
-
-<img
-  src={src1x}
-  srcset={`${src1x} 1x, ${src2x} 2x`}
-  alt={alt}
-  width={width}
-  height={height}
-  sizes={sizes}
-  loading={loading}
-  class={className}
-  style={mergedStyle || undefined}
-  {...rest}
-/>
+---
+/**
+ * <BcmsImage> — renders an optimized image via the BetterCMS media transform
+ * endpoint, with a 1x/2x srcset. Accepts an asset id, a MediaAsset, a URL, or an image
+ * VALUE (`{ url, altText, focal?, crop? }`) — whose per-placement crop and focal point are
+ * applied by image-url itself (`rect`, and fx/fy inside the crop), the same as on every lane.
+ *
+ * Given `path`, the <img> declares its field (`data-bcms-field`, kind `image`), so the visual
+ * editor binds it and a publish writes the new picture into it — and the page reads the value
+ * through this component, so the next build renders that same picture:
+ *
+ *   <BcmsImage path="hero.image" src={page.hero.image} sizes="(min-width: 800px) 50vw, 100vw" />
+ *
+ * With `sizes` and no `width` the srcset is a WIDTH ladder (never wider than the picture), which
+ * is what `sizes` selects from. The value's `altText` is the alt unless `alt` says otherwise.
+ * The same markup as @bettercms-ai/next's <BcmsImage>.
+ */
+import config from "@bettercms-ai/astro/public-config";
+import imageUrlBuilder, {
+  focalInCrop,
+  normalizeImageCrop,
+  normalizeImageFocal,
+  objectPosition,
+  type ImageSource,
+  type ImageFormat,
+  type ImageFit,
+} from "@bettercms-ai/image-url";
+
+interface Props {
+  src: ImageSource;
+  alt?: string;
+  width?: number;
+  height?: number;
+  format?: ImageFormat;
+  quality?: number;
+  fit?: ImageFit;
+  sizes?: string;
+  loading?: "lazy" | "eager";
+  class?: string;
+  /**
+   * Focal point override, 0–1. Normally omitted — the asset carries its own and the
+   * server applies it. Pass a MediaAsset with focalX/focalY as `src` and it is picked
+   * up automatically.
+   */
+  focalX?: number | null;
+  focalY?: number | null;
+  /** The field this image renders, in the editor grammar (`cover`, `hero.image`). */
+  path?: string;
+  /** Any other attribute (e.g. `data-bcms-field`) is forwarded to the <img>. */
+  [attr: string]: unknown;
+}
+
+const {
+  src,
+  alt,
+  width,
+  height,
+  format = "webp",
+  quality,
+  fit,
+  sizes,
+  loading = "lazy",
+  class: className,
+  focalX,
+  focalY,
+  path,
+  style,
+  ...rest
+} = Astro.props;
+
+// An explicit prop wins; then the value's own `focal`; then the asset's focalX/focalY. The
+// explicit prop is taken as given (window-relative when the value is cropped); the other two are
+// SOURCE-relative, so with a crop they are re-expressed inside it — image-url's focalInCrop.
+const asset = (typeof src === "object" && src !== null ? src : {}) as Record<string, unknown>;
+const explicit = focalX != null || focalY != null;
+const num = (v: unknown) => (typeof v === "number" && Number.isFinite(v) ? v : undefined);
+const stored =
+  normalizeImageFocal(asset.focal) ??
+  (num(asset.focalX) != null || num(asset.focalY) != null
+    ? { x: num(asset.focalX) ?? 0.5, y: num(asset.focalY) ?? 0.5 }
+    : null);
+const inWindow = stored ? focalInCrop(stored, normalizeImageCrop(asset.crop)) : null;
+const fx = explicit ? focalX : inWindow?.x;
+const fy = explicit ? focalY : inWindow?.y;
+const hasFocal = fx != null || fy != null;
+
+const builder = imageUrlBuilder({ baseUrl: config.mediaUrl });
+const make = () => {
+  let b = builder(src);
+  if (width) b = b.width(width);
+  if (height) b = b.height(height);
+  if (format) b = b.format(format);
+  if (quality) b = b.quality(quality);
+  if (fit) b = b.fit(fit);
+  if (hasFocal) b = b.focal(fx ?? 0.5, fy ?? 0.5);
+  return b;
+};
+
+const src1x = make().url();
+// The widths a `sizes` image offers: phone to desktop, and never an upscale of the picture.
+const LADDER = [480, 768, 1080, 1440, 1920];
+const own = num(asset.width);
+const ladder = own ? [...new Set([...LADDER.filter((w) => w < own), Math.min(own, LADDER[LADDER.length - 1])])] : LADDER;
+// A pixel width is the author's size for THIS image, so it goes on as a style (a site rule like
+// `img { width: 100% }` beats a bare attribute) — paired with max-width so it never overflows a
+// narrower column, and height:auto so shrinking keeps the aspect ratio.
+const widthStyle = width ? `width:${width}px;max-width:100%;height:auto` : "";
+const src2x = make().dpr(2).url();
+
+// The CSS half of the same idea, and it is free. When only one dimension is pinned the
+// server does not crop, so the browser does — and `object-position` keeps the subject in
+// frame there too, but only if the stylesheet actually set `object-fit: cover`. Emitting
+// it unconditionally is harmless: `object-position` is inert without `object-fit`.
+const focalStyle = hasFocal ? `object-position:${objectPosition({ x: fx, y: fy })}` : "";
+const mergedStyle = [widthStyle, focalStyle, typeof style === "string" ? style : ""].filter(Boolean).join(";");
+---
+
+<img
+  src={src1x}
+  srcset={sizes && !width ? ladder.map((w) => `${make().width(w).url()} ${w}w`).join(", ") : `${src1x} 1x, ${src2x} 2x`}
+  alt={alt ?? (typeof asset.altText === "string" ? asset.altText : typeof asset.alt === "string" ? asset.alt : "")}
+  data-bcms-field={path}
+  data-bcms-kind={path ? "image" : undefined}
+  width={width}
+  height={height}
+  sizes={sizes}
+  loading={loading}
+  class={className}
+  style={mergedStyle || undefined}
+  {...rest}
+/>

package/components/BcmsLive.astro

@@ -1,66 +1,66 @@
----
-/**
- * <BcmsLive> — opens the BetterCMS delivery live SSE stream in the browser and
- * keeps the page current. Drop it once, e.g. in your layout. Build `src` with
- * `liveSrc({ apiUrl, workspace, apiKey })` from `@bettercms-ai/astro` (use a
- * content:read key — it is browser-exposed).
- *
- * Every change frame is dispatched on `window` as a cancelable `bcms:change`
- * CustomEvent whose `detail` is the frame — including `detail.doc`, the finished
- * delivery document the server already hydrated for you. Patch the DOM from it
- * and call `preventDefault()` to keep the page as it is:
- *
- *   window.addEventListener("bcms:change", (e) => {
- *     if (e.detail.slug !== "home") return;
- *     document.querySelector("h1").textContent = e.detail.doc.data.title;
- *     e.preventDefault();          // handled — skip the reload
- *   });
- *
- * Nothing handles it → the page reloads, as it always did. That fallback is why
- * this is safe to drop into an existing site unchanged.
- *
- * `tags` narrows which changes count at all. Without it a publish anywhere in the
- * workspace reloads every open tab, including pages that render none of it.
- */
-interface Props {
-  src: string;
-  /** Only react to changes carrying one of these tags. Omit = react to all. */
-  tags?: string[];
-}
-const { src, tags } = Astro.props;
----
-
-<script is:inline define:vars={{ src, tags }}>
-  try {
-    const es = new EventSource(src);
-    es.addEventListener("change", (e) => {
-      let detail;
-      try {
-        detail = JSON.parse(e.data);
-      } catch {
-        return;
-      }
-      if (tags?.length && !detail.tags?.some((t) => tags.includes(t))) return;
-      const handled = !window.dispatchEvent(
-        new CustomEvent("bcms:change", { detail, cancelable: true }),
-      );
-      if (!handled) window.location.reload();
-    });
-  } catch (e) {
-    /* EventSource unsupported — no live refresh */
-  }
-
-  // Soft refresh for the BetterCMS canvas. The editor knows which of its writes are
-  // STRUCTURAL and asks for a re-render only for those; the ack is what tells it this page
-  // answered, so it does not remount the iframe (which throws away an inline text session).
-  // Same acceptance predicate as the Next draft bridge: own origin, and the parent frame.
-  if (window.parent !== window) {
-    window.addEventListener("message", (e) => {
-      if (e.origin !== location.origin || e.source !== window.parent) return;
-      if (e.data?.type !== "bcms:refresh") return;
-      // Ack BEFORE reloading — after it, this frame is gone and the editor has timed out.
-      window.parent.postMessage({ type: "bcms:refreshed" }, location.origin);
-      window.location.reload();
-    });
-  }
-</script>
+---
+/**
+ * <BcmsLive> — opens the BetterCMS delivery live SSE stream in the browser and
+ * keeps the page current. Drop it once, e.g. in your layout. Build `src` with
+ * `liveSrc({ apiUrl, workspace, apiKey })` from `@bettercms-ai/astro` (use a
+ * content:read key — it is browser-exposed).
+ *
+ * Every change frame is dispatched on `window` as a cancelable `bcms:change`
+ * CustomEvent whose `detail` is the frame — including `detail.doc`, the finished
+ * delivery document the server already hydrated for you. Patch the DOM from it
+ * and call `preventDefault()` to keep the page as it is:
+ *
+ *   window.addEventListener("bcms:change", (e) => {
+ *     if (e.detail.slug !== "home") return;
+ *     document.querySelector("h1").textContent = e.detail.doc.data.title;
+ *     e.preventDefault();          // handled — skip the reload
+ *   });
+ *
+ * Nothing handles it → the page reloads, as it always did. That fallback is why
+ * this is safe to drop into an existing site unchanged.
+ *
+ * `tags` narrows which changes count at all. Without it a publish anywhere in the
+ * workspace reloads every open tab, including pages that render none of it.
+ */
+interface Props {
+  src: string;
+  /** Only react to changes carrying one of these tags. Omit = react to all. */
+  tags?: string[];
+}
+const { src, tags } = Astro.props;
+---
+
+<script is:inline define:vars={{ src, tags }}>
+  try {
+    const es = new EventSource(src);
+    es.addEventListener("change", (e) => {
+      let detail;
+      try {
+        detail = JSON.parse(e.data);
+      } catch {
+        return;
+      }
+      if (tags?.length && !detail.tags?.some((t) => tags.includes(t))) return;
+      const handled = !window.dispatchEvent(
+        new CustomEvent("bcms:change", { detail, cancelable: true }),
+      );
+      if (!handled) window.location.reload();
+    });
+  } catch (e) {
+    /* EventSource unsupported — no live refresh */
+  }
+
+  // Soft refresh for the BetterCMS canvas. The editor knows which of its writes are
+  // STRUCTURAL and asks for a re-render only for those; the ack is what tells it this page
+  // answered, so it does not remount the iframe (which throws away an inline text session).
+  // Same acceptance predicate as the Next draft bridge: own origin, and the parent frame.
+  if (window.parent !== window) {
+    window.addEventListener("message", (e) => {
+      if (e.origin !== location.origin || e.source !== window.parent) return;
+      if (e.data?.type !== "bcms:refresh") return;
+      // Ack BEFORE reloading — after it, this frame is gone and the editor has timed out.
+      window.parent.postMessage({ type: "bcms:refreshed" }, location.origin);
+      window.location.reload();
+    });
+  }
+</script>

package/components/BcmsLiveBlocks.astro

@@ -1,72 +1,72 @@
----
-/**
- * <BcmsLiveBlocks> — <BcmsBlocks>, but as a hydrated island that speaks the visual editor's
- * draft bridge (E5 / FLO-1178).
- *
- * WHY IT IS NOT A .astro RENDERER. An .astro component is server-only: once the page is built
- * there is nothing on the client to hand a new document to, so an Astro site can only show the
- * editor a STATIC build and the canvas falls back to the platform's approximate renderer for
- * every draft. The bridge needs a live component tree, and the only one that already exists,
- * is at parity with this package, and speaks the protocol is <BcmsDraftBridge> from
- * @bettercms-ai/next — which imports nothing from `next/*` (React and @bettercms-ai/* only),
- * so it mounts here unchanged. Reused rather than reimplemented: one protocol, one twin to
- * keep in step instead of two.
- *
- * RUNTIME: Preact + `compat`, verified by the P2-1 spike (see ../SPIKE.md — SSR and hydration
- * of a heading + PortableText richtext + BcmsForm tree, both clean). The cost is real and worth
- * naming: preact plus its compat aliases on the island (~10 kB of runtime, so `react` itself is
- * never bundled even though @bettercms-ai/ui declares React peers), and `@bettercms-ai/next` as a
- * dependency of this package.
- *
- * 🔴 THE CLASS NAMES ARE THE REACT GRAMMAR, NOT THIS PACKAGE'S. <BcmsBlocks> in @bettercms-ai/next
- * emits `bcms-block bcms-block--text`, `bcms-button--primary`, `bcms-column`; BcmsBlocks.astro
- * emits `bcms-text`, `bcms-btn-primary`, `bcms-cols`. Same markup shape, different hooks — a
- * stylesheet written against the .astro grammar styles NOTHING here, and swapping a page from
- * <BcmsBlocks> to <BcmsLiveBlocks> unstyles it. Either cover both spellings (the starters use
- * `:is()` for exactly this) or read the React classes off @bettercms-ai/next's src/blocks.tsx.
- *
- * The consumer supplies the renderer, because an integration cannot be added from a component:
- *
- *   // astro.config.mjs
- *   import preact from "@astrojs/preact";
- *   export default defineConfig({ integrations: [bettercms(), preact({ compat: true })] });
- *
- *   ---
- *   import BcmsLiveBlocks from "@bettercms-ai/astro/components/BcmsLiveBlocks.astro";
- *   const page = await getPage(Astro.params.slug);
- *   ---
- *   <BcmsLiveBlocks slug={page.slug} blocks={page.blocks} forms={forms} />
- *
- * Standalone the island renders exactly what <BcmsBlocks> renders (inside the
- * `data-bcms-canvas="bridge"` marker <div> that <BcmsDraftBridge> emits); the bridge only
- * wakes when the editor frames the page and pushes a draft. This only helps pages whose body
- * IS a block tree — a hand-written .astro layout is unreachable from here by construction.
- */
-import { BcmsDraftBridge } from "@bettercms-ai/next/draft-bridge";
-import type { ContentBlock } from "@bettercms-ai/types";
-import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
-
-interface Props {
-  /** The page's slug. A pushed draft is applied only when its slug matches. */
-  slug: string;
-  blocks: ContentBlock[];
-  forms?: DeliveryForm[];
-  components?: DeliveryComponent[];
-  turnstileSiteKey?: string;
-  apiBase?: string;
-  class?: string;
-}
-
-const { slug, blocks, forms, components, turnstileSiteKey, apiBase, class: className } = Astro.props;
----
-
-<BcmsDraftBridge
-  client:load
-  slug={slug}
-  blocks={blocks}
-  forms={forms}
-  components={components}
-  turnstileSiteKey={turnstileSiteKey}
-  apiBase={apiBase}
-  className={className}
-/>
+---
+/**
+ * <BcmsLiveBlocks> — <BcmsBlocks>, but as a hydrated island that speaks the visual editor's
+ * draft bridge (E5 / FLO-1178).
+ *
+ * WHY IT IS NOT A .astro RENDERER. An .astro component is server-only: once the page is built
+ * there is nothing on the client to hand a new document to, so an Astro site can only show the
+ * editor a STATIC build and the canvas falls back to the platform's approximate renderer for
+ * every draft. The bridge needs a live component tree, and the only one that already exists,
+ * is at parity with this package, and speaks the protocol is <BcmsDraftBridge> from
+ * @bettercms-ai/next — which imports nothing from `next/*` (React and @bettercms-ai/* only),
+ * so it mounts here unchanged. Reused rather than reimplemented: one protocol, one twin to
+ * keep in step instead of two.
+ *
+ * RUNTIME: Preact + `compat`, verified by the P2-1 spike (see ../SPIKE.md — SSR and hydration
+ * of a heading + PortableText richtext + BcmsForm tree, both clean). The cost is real and worth
+ * naming: preact plus its compat aliases on the island (~10 kB of runtime, so `react` itself is
+ * never bundled even though @bettercms-ai/ui declares React peers), and `@bettercms-ai/next` as a
+ * dependency of this package.
+ *
+ * 🔴 THE CLASS NAMES ARE THE REACT GRAMMAR, NOT THIS PACKAGE'S. <BcmsBlocks> in @bettercms-ai/next
+ * emits `bcms-block bcms-block--text`, `bcms-button--primary`, `bcms-column`; BcmsBlocks.astro
+ * emits `bcms-text`, `bcms-btn-primary`, `bcms-cols`. Same markup shape, different hooks — a
+ * stylesheet written against the .astro grammar styles NOTHING here, and swapping a page from
+ * <BcmsBlocks> to <BcmsLiveBlocks> unstyles it. Either cover both spellings (the starters use
+ * `:is()` for exactly this) or read the React classes off @bettercms-ai/next's src/blocks.tsx.
+ *
+ * The consumer supplies the renderer, because an integration cannot be added from a component:
+ *
+ *   // astro.config.mjs
+ *   import preact from "@astrojs/preact";
+ *   export default defineConfig({ integrations: [bettercms(), preact({ compat: true })] });
+ *
+ *   ---
+ *   import BcmsLiveBlocks from "@bettercms-ai/astro/components/BcmsLiveBlocks.astro";
+ *   const page = await getPage(Astro.params.slug);
+ *   ---
+ *   <BcmsLiveBlocks slug={page.slug} blocks={page.blocks} forms={forms} />
+ *
+ * Standalone the island renders exactly what <BcmsBlocks> renders (inside the
+ * `data-bcms-canvas="bridge"` marker <div> that <BcmsDraftBridge> emits); the bridge only
+ * wakes when the editor frames the page and pushes a draft. This only helps pages whose body
+ * IS a block tree — a hand-written .astro layout is unreachable from here by construction.
+ */
+import { BcmsDraftBridge } from "@bettercms-ai/next/draft-bridge";
+import type { ContentBlock } from "@bettercms-ai/types";
+import type { DeliveryComponent, DeliveryForm } from "@bettercms-ai/sdk";
+
+interface Props {
+  /** The page's slug. A pushed draft is applied only when its slug matches. */
+  slug: string;
+  blocks: ContentBlock[];
+  forms?: DeliveryForm[];
+  components?: DeliveryComponent[];
+  turnstileSiteKey?: string;
+  apiBase?: string;
+  class?: string;
+}
+
+const { slug, blocks, forms, components, turnstileSiteKey, apiBase, class: className } = Astro.props;
+---
+
+<BcmsDraftBridge
+  client:load
+  slug={slug}
+  blocks={blocks}
+  forms={forms}
+  components={components}
+  turnstileSiteKey={turnstileSiteKey}
+  apiBase={apiBase}
+  className={className}
+/>

package/components/BcmsSearch.astro

@@ -1,23 +1,23 @@
----
-/**
- * <BcmsSearch> — an instant, typo-tolerant site-search box for Astro.
- *
- * Renders the search container and loads the hosted widget bundle, so the markup
- * and behaviour are identical to the universal HTML embed (DRY — one widget, one
- * place). No API key — `project` (from the dashboard's Site Search settings) is
- * the only scope. Styling is class-driven (`bcms-search-*`); the host can override.
- */
-import config from "bettercms:config";
-
-interface Props {
-  project: string;
-  placeholder?: string;
-  class?: string;
-}
-
-const { project, placeholder = "Search…", class: className } = Astro.props;
-const widgetSrc = `${config.apiUrl}/widgets/search.js`;
----
-
-<div data-bcms-search data-project={project} data-placeholder={placeholder} class={className}></div>
-<script is:inline src={widgetSrc} async></script>
+---
+/**
+ * <BcmsSearch> — an instant, typo-tolerant site-search box for Astro.
+ *
+ * Renders the search container and loads the hosted widget bundle, so the markup
+ * and behaviour are identical to the universal HTML embed (DRY — one widget, one
+ * place). No API key — `project` (from the dashboard's Site Search settings) is
+ * the only scope. Styling is class-driven (`bcms-search-*`); the host can override.
+ */
+import config from "bettercms:config";
+
+interface Props {
+  project: string;
+  placeholder?: string;
+  class?: string;
+}
+
+const { project, placeholder = "Search…", class: className } = Astro.props;
+const widgetSrc = `${config.apiUrl}/widgets/search.js`;
+---
+
+<div data-bcms-search data-project={project} data-placeholder={placeholder} class={className}></div>
+<script is:inline src={widgetSrc} async></script>