docs: remove import.meta.glob for faster docs and less bugs (#1076)

* chore: small fixes

* chore: remove non-planned components

* refactor: showcase-components without import meta glob

* refactor: code-snippets without import meta glob

* chore: remove compoent-imports.ts

* fix: typo

* chore: remove showcase references in contributing.mdx

Author: maiieul

apps/component-tests/src/components/showcase-test/showcase-test.tsx

@@ -1,6 +1,5 @@
 import { Component, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
-import { isDev } from '@builder.io/qwik/build';
 import { metaGlobComponents } from './component-imports';
 
 export const ShowcaseTest = component$(() => {
@@ -12,12 +11,9 @@ export const ShowcaseTest = component$(() => {
   const MetaGlobComponentSig = useSignal<Component<any>>();
 
   useTask$(async () => {
-    // eslint-disable-next-line qwik/valid-lexical-scope
-    MetaGlobComponentSig.value = isDev
-      ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        await metaGlobComponents[componentPath]() // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
-      : metaGlobComponents[componentPath]; // We need to directly access the `metaGlobComponents[componentPath]` expression in preview/production as it is `eager:true`
+    MetaGlobComponentSig.value =
+      await // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (metaGlobComponents[componentPath] as () => Promise<Component<any>>)();
   });
 
   return (

apps/website/src/components/code-snippet/code-snippet.tsx

@@ -1,39 +1,14 @@
-import { PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
+import { PropsOf, component$ } from '@builder.io/qwik';
 import { Highlight } from '../highlight/highlight';
 
-// The below `/src/routes/docs/**/**/snippets/*.tsx` pattern is here so that import.meta.glob works both for styled and headless routes.
-// For example:
-// /src/routes/docs/components/styled/modal/snippets/building-blocks.tsx
-// /src/routes/docs/components/headless/modal/snippets/building-blocks.tsx
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const codeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*', {
-  query: '?raw',
-  import: 'default',
-});
-
 type CodeSnippetProps = PropsOf<'div'> & {
-  name: string;
+  code: string;
 };
 
-export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
-  const location = useLocation();
-
-  // Determine the file extension if not specified
-  const fileExtension =
-    name.endsWith('.tsx') || name.endsWith('.ts') || name.endsWith('.css') ? '' : '.tsx';
-  const snippetPath = `/src/routes${location.url.pathname}snippets/${name}${fileExtension}`;
-
-  const codeSnippetSig = useSignal<string>();
-
-  useTask$(async () => {
-    codeSnippetSig.value = await codeSnippets[snippetPath](); // We need to call `await codeSnippets[snippetPath]()` in development as it is `eager:false`
-  });
-
+export const CodeSnippet = component$<CodeSnippetProps>(({ code }) => {
   return (
     <div class="shadow-3xl mb-6 rounded-md border shadow-lg">
-      <Highlight code={codeSnippetSig.value || ''} />
+      <Highlight code={code} />
     </div>
   );
 });

apps/website/src/components/mdx-components/index.tsx

@@ -9,7 +9,6 @@ import { FeatureList } from '../feature-list/feature-list';
 import { InstallSnippet } from '../install-snippet/install-snippet';
 import { KeyboardInteractionTable } from '../keyboard-interaction-table/keyboard-interaction-table';
 import { Note } from '../note/note';
-import { Showcase } from '../showcase/showcase';
 import { StatusBanner } from '../status-banner/status-banner';
 import { TopLayerAnimationsCaveats } from '../animations/caveats';
 import { BrowserAnimationsCompatability } from '../animations/compatability';
@@ -137,7 +136,6 @@ export const components: Record<string, Component> = {
   KeyboardInteractionTable,
   Note,
   StatusBanner,
-  Showcase,
   AutoAPI,
   TopLayerAnimationsCaveats,
   BrowserAnimationsCompatability,

apps/website/src/components/search/search.tsx

@@ -128,10 +128,17 @@ export const Search = component$(({ isOpen }: { isOpen: Signal<boolean> }) => {
       class="w-full"
       mode="inline"
       filter={false}
-      onChange$={(value: string) => {
-        window.location.href = value;
-        isOpen.value = false;
-      }}
+      onChange$={$(
+        (value: string | string[]) => {
+          if (typeof value === 'string') {
+            window.location.href = value;
+            isOpen.value = false;
+          } else {
+            window.location.href = value[0];
+            isOpen.value = false;
+          }
+        },
+      )}
     >
       <Combobox.Input
         onInput$={handleInput}

apps/website/src/components/showcase/component-imports.ts

@@ -1,32 +1,13 @@
-import { Component, component$, useSignal, useTask$ } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
+import { component$, Slot } from '@builder.io/qwik';
 import { Tabs } from '@qwik-ui/headless';
 import { Highlight } from '../highlight/highlight';
-import { metaGlobComponents, rawComponents } from './component-imports';
 
 type ShowcaseProps = {
-  name?: string;
   vertical?: boolean;
+  rawCode: string;
 };
 
-export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
-  const location = useLocation();
-  const componentPath = `/src/routes${location.url.pathname}examples/${name}.tsx`;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const MetaGlobComponentSig = useSignal<Component<any>>();
-  const componentCodeSig = useSignal<string>();
-
-  useTask$(async () => {
-    try {
-      // eslint-disable-next-line qwik/valid-lexical-scope
-      MetaGlobComponentSig.value = await metaGlobComponents[componentPath](); // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
-      componentCodeSig.value = await rawComponents[componentPath]();
-    } catch (e) {
-      throw new Error(`Unable to load path ${componentPath}`);
-    }
-  });
-
+export const Showcase = component$<ShowcaseProps>(({ rawCode, ...props }) => {
   return (
     <div class="mb-12 rounded-xl shadow-lg">
       {!props.vertical ? (
@@ -44,22 +25,19 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
           </Tabs.List>
           <Tabs.Panel class="rounded-b-md border px-8 py-32 md:px-32">
             <section class="flex flex-col items-center">
-              {MetaGlobComponentSig.value && <MetaGlobComponentSig.value />}
+              <Slot />
             </section>
           </Tabs.Panel>
           <Tabs.Panel class="relative rounded-b-md border">
-            <Highlight class="rounded-t-none" code={componentCodeSig.value || ''} />
+            <Highlight class="rounded-t-none" code={rawCode || ''} />
           </Tabs.Panel>
         </Tabs.Root>
       ) : (
         <div data-pagefind-ignore="all">
           <section class="flex justify-center space-x-6 rounded-t-md border p-8">
-            {MetaGlobComponentSig.value && <MetaGlobComponentSig.value />}
+            <Slot />
           </section>
-          <Highlight
-            class="rounded-none rounded-b-md border p-8"
-            code={componentCodeSig.value || ''}
-          />
+          <Highlight class="rounded-none rounded-b-md border p-8" code={rawCode || ''} />
         </div>
       )}
     </div>

apps/website/src/components/showcase/showcase.tsx

@@ -8,6 +8,8 @@ import { InfoPopup } from '~/components/info-popup/info-popup';
 
 import { statusByComponent } from '~/_state/component-statuses';
 
+import { ShowcaseTheProblem, ShowcaseInline, ShowcaseServer } from './showcase-components';
+
 # Contributing
 
 Thinking about contributing to the project, but don't know where to start? You're in the right place!
@@ -83,12 +85,6 @@ Qwik UI uses [MDX](https://mdxjs.com/docs/what-is-mdx/) for interactive markdown
 
 Here is a quick link to the [headless docs in github](https://github.com/qwikifiers/qwik-ui/tree/main/apps/website/src/routes/docs/headless).
 
-One of the most import components in the docs is the `showcase` component, which gives typescript support, a component preview of your example, and **automatically** updates the code example as you edit it! 🤯
-
-> Here's [an example](https://github.com/qwikifiers/qwik-ui/blob/main/apps/website/src/routes/docs/headless/modal/examples/hero.tsx) of someone consuming a headless component! In `index.mdx` we can use `<Showcase name="hero" />`, because `hero.tsx` is the file path.
-
-The same thing goes for the `snippet` component, which is for showing code blocks only.
-
 ### Docs Components
 
 There are more [docs components](https://github.com/qwikifiers/qwik-ui/tree/main/apps/website/src/components) to make your life easier! Some examples being:
@@ -152,7 +148,9 @@ We strongly recommend TDD development for the headless library.
 
 ### Getting started w/ testing
 
-Using what we've learned with the showcase component, let's create a new example to test:
+
+
+We use the components showcased in the docs to test the headless library. Let's create a new example to test:
 
 ```tsx
 import { component$ } from '@builder.io/qwik';
@@ -168,14 +166,6 @@ export default component$(() => {
 });
 ```
 
-Above is a new file called `hero.tsx` in our `examples` folder. In the collapsible pages `index.mdx` file add the following:
-
-```shell
-  <Showcase name="hero" />
-```
-
-Adding the showcase component to the website MDX will automatically create a new isolated environment in playwright as well.
-
 Each headless component also needs a "driver file", or the reusable component pieces we will need throughout the test.
 
 In the headless folder, create a new file with the convention of `<component-name>.driver.tsx`.
@@ -319,13 +309,13 @@ A more detailed explanation:
 
 In client-side rendered environments, such as dashboards, Qwik components can render asynchronously and even out of order.
 
-<Showcase name="the-problem" />
+<ShowcaseTheProblem />
 
 The above demonstrates the problem. The conditional JSX added is rendered on the client when the button is clicked, and the items are not rendered in the correct order.
 
 By contrast, when it is rendered on the server, we get the expected order.
 
-<Showcase name="server" />
+<ShowcaseServer />
 
 This has to do with the entrypoints of the application. The current and previous generation of frameworks execute from the root entrypoint down in a tree-like structure, which is O(n) complexity.
 
@@ -356,7 +346,7 @@ In our case, the tradeoff is negligible, but it's something to keep in mind.
 
 To use an inline component, create a standard function that returns JSX. In the below example, the inline component is called ExampleRoot.
 
-<Showcase name="inline" />
+<ShowcaseInline />
 
 The root component uses two utilities from Qwik UI.
 

apps/website/src/routes/docs/contributing/index.mdx

@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik';
+import { Showcase } from '~/components/showcase/showcase';
+
+import TheProblem from './examples/the-problem';
+import TheProblemRawCode from './examples/the-problem.tsx?raw';
+export const ShowcaseTheProblem = component$(() => {
+  return (
+    <Showcase rawCode={TheProblemRawCode}>
+      <TheProblem />
+    </Showcase>
+  );
+});
+
+import Inline from './examples/inline';
+import InlineRawCode from './examples/inline.tsx?raw';
+export const ShowcaseInline = component$(() => {
+  return (
+    <Showcase rawCode={InlineRawCode}>
+      <Inline />
+    </Showcase>
+  );
+});
+
+import Server from './examples/server';
+import ServerRawCode from './examples/server.tsx?raw';
+export const ShowcaseServer = component$(() => {
+  return (
+    <Showcase rawCode={ServerRawCode}>
+      <Server />
+    </Showcase>
+  );
+});

apps/website/src/routes/docs/contributing/showcase-components.tsx

@@ -0,0 +1,17 @@
+import { component$ } from '@builder.io/qwik';
+import { CodeSnippet } from '~/components/code-snippet/code-snippet';
+
+import BuildingBlocksSnippet from './snippets/building-blocks.tsx?raw';
+export const CodeSnippetBuildingBlocks = component$(() => {
+  return <CodeSnippet code={BuildingBlocksSnippet} />;
+});
+
+import AnimationCssSnippet from './snippets/animation.css?raw';
+export const CodeSnippetAnimationCss = component$(() => {
+  return <CodeSnippet code={AnimationCssSnippet} />;
+});
+
+import AccordionCssSnippet from './snippets/accordion.css?raw';
+export const CodeSnippetAccordionCss = component$(() => {
+  return <CodeSnippet code={AccordionCssSnippet} />;
+});

apps/website/src/routes/docs/headless/accordion/code-snippets.tsx

@@ -4,7 +4,7 @@ import { Accordion } from '@qwik-ui/headless';
 interface DynamicAccordionProps {
   itemIndexToDelete?: number;
   itemIndexToAdd?: number;
-  itemsLength: number;
+  itemsLength?: number;
 }
 
 export default component$(({ itemsLength = 3 }: DynamicAccordionProps) => {