@runbun/astro 0.1.0 → 0.1.1

package/components/Code.astro

@@ -2,9 +2,10 @@
 // A code block highlighted at build time with @pierre/highlights in the page's code theme. Static by default; with
 // `playground` it gets a Run button that turns it into an embed (Playground.astro) with the code as its file, and
 // every embed option passes through. `title` names the file, as in a fence. With `files` the block has a tab per file,
-// and so does the embed.
-import { config } from "virtual:@runbun/astro/config";
-import { codeBlock, codeTabs, cssLink, EXT, langOf, withEntry, withTabs } from "../dist/markup.js";
+// and so does the embed. A static block is HTML and CSS only: no script, no request beyond the page's own stylesheet,
+// which Astro bundles the blocks' CSS into (once per page, in <head>).
+import "virtual:@runbun/astro/blocks.css";
+import { codeBlock, codeTabs, EXT, langOf, withEntry, withTabs } from "../dist/markup.js";
 import Playground, { type Props as PlaygroundProps } from "./Playground.astro";
 
 export type Props = Omit<PlaygroundProps, "title"> & {
@@ -19,7 +20,6 @@ const extra = Object.entries(files).map(([name, text]) => ({ name, code: text, l
 const block = extra.length ? codeTabs([{ name: file, code, lang }, ...extra], options.file ?? file) : codeBlock(code, lang, title);
 ---
 
-<Fragment set:html={cssLink(config.base)} />
 {
   playground ? (
     <Playground

package/dist/index.js

@@ -2,6 +2,10 @@ import { setConfig } from "./config.js";
 import { BLOCK_CSS, themeCss } from "./highlight.js";
 import { CSS_PATH } from "./markup.js";
 const VIRTUAL = "virtual:@runbun/astro/config";
+/** The blocks' stylesheet as a CSS module: <Code> imports it, so Astro bundles it into the page's own CSS. */
+const VIRTUAL_CSS = "virtual:@runbun/astro/blocks.css";
+// Not `\0`-prefixed: Vite's CSS plugins only take ids that end in `.css` and aren't virtual-internal.
+const RESOLVED_CSS = "/@runbun/astro/blocks.css";
 export default function runbun(options = {}) {
     const { playgroundUrl = "https://runbun.dev/", themes = ["pierre-light", "pierre-dark"], themeSelector, sync } = options;
     return {
@@ -18,8 +22,8 @@ export default function runbun(options = {}) {
                         plugins: [
                             {
                                 name: "@runbun/astro:config",
-                                resolveId: (id) => (id === VIRTUAL ? "\0" + VIRTUAL : undefined),
-                                load: (id) => (id === "\0" + VIRTUAL ? source : undefined),
+                                resolveId: (id) => (id === VIRTUAL ? "\0" + VIRTUAL : id === VIRTUAL_CSS ? RESOLVED_CSS : undefined),
+                                load: (id) => (id === "\0" + VIRTUAL ? source : id === RESOLVED_CSS ? css : undefined),
                             },
                         ],
                     },

package/dist/remark.js

@@ -19,6 +19,19 @@ let mdx = false;
 const html = (value) => mdx
     ? { type: "mdxJsxFlowElement", name: "Fragment", attributes: [{ type: "mdxJsxAttribute", name: "set:html", value }], children: [] }
     : { type: "html", value };
+/** `import "virtual:@runbun/astro/blocks.css"` as an MDX ESM node (its estree is what MDX compiles). */
+const CSS_MODULE = "virtual:@runbun/astro/blocks.css";
+const cssImport = () => ({
+    type: "mdxjsEsm",
+    value: `import ${JSON.stringify(CSS_MODULE)};`,
+    data: {
+        estree: {
+            type: "Program",
+            sourceType: "module",
+            body: [{ type: "ImportDeclaration", specifiers: [], attributes: [], source: { type: "Literal", value: CSS_MODULE, raw: JSON.stringify(CSS_MODULE) } }],
+        },
+    },
+});
 function parse(node) {
     const toks = tokens(node.meta ?? "");
     if (!toks.some((t) => t.key === "playground" && t.value === null))
@@ -92,6 +105,10 @@ export default function remarkRunbun(options = {}) {
         if (!transform(tree.children))
             return;
         const { playgroundUrl, base, sync } = { ...CONFIG(), ...options };
-        tree.children.push(html(cssLink(base) + "\n" + embedScripts(playgroundUrl, sync)));
+        // In MDX the blocks' CSS is an import, which Astro bundles into the page's stylesheet as it does for <Code> (one
+        // copy for both); Markdown can't import, so it links the integration's route.
+        if (mdx)
+            tree.children.unshift(cssImport());
+        tree.children.push(html((mdx ? "" : cssLink(base) + "\n") + embedScripts(playgroundUrl, sync)));
     };
 }

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@runbun/astro",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Code blocks highlighted with @pierre/highlights that turn into a runnable Bun playground (runbun.dev) on click.",
   "type": "module",
   "license": "MIT",
   "keywords": ["astro-integration", "astro-component", "bun", "playground", "code", "highlight"],
   "homepage": "https://docs.runbun.dev/guides/astro/",
-  "repository": { "type": "git", "url": "git+https://github.com/oddcelot/bun-webcontainer.git", "directory": "packages/astro" },
-  "bugs": "https://github.com/oddcelot/bun-webcontainer/issues",
   "exports": {
     ".": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
     "./remark": { "types": "./dist/remark.d.ts", "default": "./dist/remark.js" },

package/virtual.d.ts

@@ -2,3 +2,4 @@ declare module "virtual:@runbun/astro/config" {
   export const config: { playgroundUrl: string; base: string; sync?: { scheme?: string; family?: string } };
   export const css: string;
 }
+declare module "virtual:@runbun/astro/blocks.css" {}