feat: support render opts on a component basis (#268)

thejackshelton · web-flow · commit 7d7b65608e0b · 2025-07-29T14:22:22.000-05:00
* feat: support render opts on a component basis

* changeset
diff --git a/.changeset/fancy-hornets-find.md b/.changeset/fancy-hornets-find.md
@@ -0,0 +1,17 @@
+---
+"@qwikdev/astro": patch
+---
+
+feat: Support Qwik Render Options at runtime on a per-component basis.
+
+This is useful for scenarios where you want to render a Qwik component in an Astro page, but you want to use a different base URL for the Qwik component, or another configuration.
+
+For example, if you want to render a Qwik component in an Astro page, but you want to use a different base URL for the Qwik component, you can pass the `renderOpts` prop to the Qwik component.
+
+```astro
+<NativeCounter initial={2} renderOpts={{ base: "http://0.0.0.0:4321/build" }} />
+```
+
+Make sure to import the `RenderOptions` type from `@builder.io/qwik/server` and pass it to the component for type safety.
+
+Want to make a change for all components? Create a global object config and pass it to each component.
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -4,11 +4,11 @@
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "astro dev --host 0.0.0.0",
     "dev.debug": "node --inspect ./node_modules/astro/astro.js dev",
     "start": "astro dev --open",
     "build": "astro build",
-    "preview": "astro preview",
+    "preview": "astro preview --host 0.0.0.0",
     "astro": "astro"
   },
   "dependencies": {
diff --git a/apps/demo/src/components/qwik/counter.tsx b/apps/demo/src/components/qwik/counter.tsx
@@ -1,6 +1,7 @@
 import { Slot, component$, useSignal } from "@builder.io/qwik";
+import { type RenderOptions } from "@builder.io/qwik/server";
 
-export const Counter = component$<{ initial: number }>((props) => {
+export const Counter = component$<{ initial: number; renderOpts?: RenderOptions }>((props) => {
   const counter = useSignal(props.initial);
 
   return (
diff --git a/apps/demo/src/pages/index.astro b/apps/demo/src/pages/index.astro
@@ -12,7 +12,7 @@ import { Counter as NativeCounter } from "@components/qwik/counter";
 	</head>
 	<body>
 		<div style={{ height: "1000px" }}>
-			<NativeCounter initial={2} />
+			<NativeCounter initial={2} renderOpts={{ base: "http://192.168.68.76:4321/build" }} />
 		</div>
 	</body>
 </html>
diff --git a/libs/qwikdev-astro/server.ts b/libs/qwikdev-astro/server.ts
@@ -61,6 +61,7 @@ export async function renderToStaticMarkup(
   props: Record<string, unknown>,
   slotted: any
 ) {
+
   try {
     if (!isQwikComponent(component)) {
       return;
@@ -72,6 +73,7 @@ export async function renderToStaticMarkup(
     const isInitialContainer = !containerMap.has(this.result);
 
     const renderToStreamOpts: RenderToStreamOptions = {
+      ...(props.renderOpts ?? {}),
       containerAttributes: {
         style: "display: contents",
         ...(isDev && { "q-astro-marker": "" })
@@ -90,7 +92,7 @@ export async function renderToStaticMarkup(
         write: (chunk) => {
           html += chunk;
         }
-      }
+      },
     };
 
     // https://qwik.dev/docs/components/overview/#inline-components
