Merge pull request #149 from QwikDev/inline-comps

inline component support
QwikDev · Aug 2, 2024 · 6db7dc5 · 6db7dc5
2 parents d2617cf + ecffa03
commit 6db7dc5
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 22 deletions.
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -15,6 +15,7 @@
     "@astrojs/react": "^3.6.0",
     "@builder.io/qwik": "^1.7.2",
     "@qwikdev/astro": "workspace:*",
+    "@qwikest/icons": "^0.0.13",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "astro": "^4.12.2",

diff --git a/apps/demo/src/pages/index.astro b/apps/demo/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import { Counter } from "@components/qwik/counter";
 import { SayHi } from "@components/qwik/say-hi";
+import { LuCheck } from '@qwikest/icons/lucide'
 ---
 
 <html lang="en">
@@ -16,6 +17,7 @@ import { SayHi } from "@components/qwik/say-hi";
 			<Counter initial={5}>Yo</Counter>
 			<SayHi>John</SayHi>
 			<a href="/test">test</a>
+			<LuCheck />
 		</div>
 	</body>
 </html>
diff --git a/libs/qwikdev-astro/server.ts b/libs/qwikdev-astro/server.ts
@@ -7,7 +7,7 @@ import {
   jsx
 } from "@builder.io/qwik";
 import { isDev } from "@builder.io/qwik/build";
-import { type QwikManifest } from "@builder.io/qwik/optimizer";
+import type { QwikManifest } from "@builder.io/qwik/optimizer";
 import { getQwikLoaderScript, renderToString } from "@builder.io/qwik/server";
 import { manifest } from "@qwik-client-manifest";
 
@@ -17,17 +17,23 @@ type RendererContext = {
   result: SSRResult;
 };
 
-async function check(this: RendererContext, component: unknown) {
-  try {
-    if (typeof component !== "function") {
-      return false;
-    }
+function isInlineComponent(component: unknown): boolean {
+  const codeStr = component!.toString().toLowerCase();
 
-    if (component.name !== "QwikComponent") {
-      return false;
-    }
+  return codeStr.includes("_jsxq") || codeStr.includes("jsxSplit");
+}
+
+function isQwikComponent(component: unknown) {
+  if (typeof component !== "function") return false;
+  if (isInlineComponent(component)) return true;
+  if (component.name !== "QwikComponent") return false;
+
+  return true;
+}
 
-    return true;
+async function check(this: RendererContext, component: unknown) {
+  try {
+    return isQwikComponent(component);
   } catch (error) {
     console.error("Error in check function of @qwikdev/astro: ", error);
     return false;
@@ -43,17 +49,44 @@ export async function renderToStaticMarkup(
   slotted: any
 ) {
   try {
-    if (component.name !== "QwikComponent") {
+    if (!isQwikComponent(component)) {
       return;
     }
 
+    const isInline = isInlineComponent(component);
+    const base = (props["q:base"] || process.env.Q_BASE) as string;
+    const renderConfig = {
+      base,
+      containerTagName: "div",
+      containerAttributes: { style: "display: contents" },
+      ...(isDev
+        ? {
+            manifest: {} as QwikManifest,
+            symbolMapper: (globalThis as any).symbolMapperGlobal
+          }
+        : { manifest }),
+      qwikLoader: { include: "never" }
+    } as const;
+
+    // Handle inline components
+    if (isInline) {
+      const inlineComponentJSX = component(props);
+
+      const result = await renderToString(inlineComponentJSX, renderConfig);
+
+      return {
+        html: result.html
+      };
+    }
+
     const shouldAddQwikLoader = !qwikLoaderAdded.has(this.result);
     const qwikLoader =
       shouldAddQwikLoader &&
       jsx("script", {
         "qwik-loader": "",
         dangerouslySetInnerHTML: getQwikLoaderScript()
       });
+
     // we want to add the sw script only on the first container.
     const serviceWorkerScript =
       !isDev && shouldAddQwikLoader && jsx(PrefetchServiceWorker, {});
@@ -97,20 +130,10 @@ export async function renderToStaticMarkup(
       qwikLoaderAdded.set(this.result, true);
     }
 
-    const base = (props["q:base"] || process.env.Q_BASE) as string;
-
     // TODO: `jsx` must correctly be imported.
     // Currently the vite loads `core.mjs` and `core.prod.mjs` at the same time and this causes issues.
     // WORKAROUND: ensure that `npm postinstall` is run to patch the `@builder.io/qwik/package.json` file.
-    const result = await renderToString(app, {
-      base,
-      containerTagName: "div",
-      containerAttributes: { style: "display: contents" },
-      ...(isDev
-        ? { manifest: {} as QwikManifest, symbolMapper: globalThis.symbolMapperGlobal }
-        : { manifest }),
-      qwikLoader: { include: "never" }
-    });
+    const result = await renderToString(app, renderConfig);
 
     const { html } = result;
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml