diff --git a/.changeset/fancy-hornets-find.md b/.changeset/fancy-hornets-find.md new file mode 100644 index 00000000..2eb920f7 --- /dev/null +++ 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 + +``` + +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. \ No newline at end of file diff --git a/apps/demo/package.json b/apps/demo/package.json index fb683175..cf14429b 100644 --- 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 index 90597e25..c66a382e 100644 --- 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 index 6ff567a9..bb96d07a 100644 --- 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";
- +
diff --git a/libs/qwikdev-astro/server.ts b/libs/qwikdev-astro/server.ts index 463ae48f..d4121af6 100644 --- a/libs/qwikdev-astro/server.ts +++ b/libs/qwikdev-astro/server.ts @@ -61,6 +61,7 @@ export async function renderToStaticMarkup( props: Record, 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