Merge pull request #529 from maiieul/cleanup-mdx-pr

refactor(showcase): cleanup Showcase & CodeSnippet

Author: thejackshelton

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

@@ -3,40 +3,39 @@ import { useLocation } from '@builder.io/qwik-city';
 import { isDev } from '@builder.io/qwik/build';
 import { Highlight } from '../highlight/highlight';
 
-type CodeSnippetProps = QwikIntrinsicElements['div'] & {
-  name: string;
-};
+// The below `/src/routes/docs/**/**/snippets/*.tsx` pattern is here so that import.meta.glob works both for fluffy and headless routes.
+// For example:
+// /src/routes/docs/components/fluffy/modal/snippets/building-blocks.tsx
+// /src/routes/docs/components/headless/modal/snippets/building-blocks.tsx
 
-const rawCodeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*', {
+const codeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*', {
   as: 'raw',
   eager: isDev ? false : true,
 });
 
+type CodeSnippetProps = QwikIntrinsicElements['div'] & {
+  name: string;
+};
+
 export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
   const location = useLocation();
 
-  let lang = '.tsx';
-
-  if (name.endsWith('.tsx')) lang = '';
-  if (name.endsWith('.ts')) lang = '';
-  if (name.endsWith('.css')) lang = '';
+  // 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 snippetPath = `/src/routes${location.url.pathname}snippets/${name}${lang}`;
-
-  const CodeSnippet = useSignal<string>();
+  const codeSnippetSig = useSignal<string>();
 
   useTask$(async () => {
-    if (isDev) {
-      CodeSnippet.value = await rawCodeSnippets[snippetPath]();
-    } else {
-      CodeSnippet.value = rawCodeSnippets[snippetPath];
-    }
+    codeSnippetSig.value = isDev
+      ? await codeSnippets[snippetPath]() // We need to call `await codeSnippets[snippetPath]()` in development as it is `eager:false`
+      : codeSnippets[snippetPath]; // We need to directly access the `codeSnippets[snippetPath]` expression in preview/production as it is `eager:true`
   });
+
   return (
-    <div
-      class={`shadow-3xl shadow-light-medium dark:shadow-dark-medium mb-6 rounded-xl border-2 border-slate-200 dark:border-slate-400`}
-    >
-      <Highlight code={CodeSnippet.value || ''} />
+    <div class="shadow-3xl shadow-light-medium dark:shadow-dark-medium mb-6 rounded-xl border-2 border-slate-200 dark:border-slate-400">
+      <Highlight code={codeSnippetSig.value || ''} />
     </div>
   );
 });

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

@@ -5,7 +5,7 @@ import { AnatomyTable } from '../anatomy-table/anatomy-table';
 import { APITable } from '../api-table/api-table';
 import { KeyboardInteractionTable } from '../keyboard-interaction-table/keyboard-interaction-table';
 import { CodeCopy } from '../code-copy/code-copy';
-import { Showcase } from '../show-example/show-example';
+import { Showcase } from '../showcase/showcase';
 import { CodeSnippet } from '../code-snippet/code-snippet';
 
 export const components: Record<string, any> = {

apps/website/src/components/show-example/show-example.css renamed to apps/website/src/components/showcase/showcase.css

@@ -6,24 +6,26 @@ import {
   useStyles$,
   useTask$,
 } from '@builder.io/qwik';
-import styles from './show-example.css?inline';
-
+import styles from './showcase.css?inline';
 import { Tab, TabList, TabPanel, Tabs } from '@qwik-ui/headless';
 import { useLocation } from '@builder.io/qwik-city';
 import { isDev } from '@builder.io/qwik/build';
 import { Highlight } from '../highlight/highlight';
 
-// The below patterns are here so that import.meta.glob works both for fluffy and headless routes.
+// The below `/src/routes/docs/**/**/examples/*.tsx` patterns are here so that import.meta.glob works both for fluffy and headless routes.
 // For example:
 // /src/routes/docs/components/fluffy/modal/examples/hero.tsx
 // /src/routes/docs/components/headless/modal/examples/hero.tsx
 
-const components: any = import.meta.glob('/src/routes/docs/**/**/examples/*.tsx', {
-  import: 'default',
-  eager: isDev ? false : true,
-});
+const metaGlobComponents: any = import.meta.glob(
+  '/src/routes/docs/**/**/examples/*.tsx',
+  {
+    import: 'default',
+    eager: isDev ? false : true,
+  },
+);
 
-const componentsRaw: any = import.meta.glob('/src/routes/docs/**/**/examples/*.tsx', {
+const rawComponents: any = import.meta.glob('/src/routes/docs/**/**/examples/*.tsx', {
   as: 'raw',
   eager: isDev ? false : true,
 });
@@ -34,25 +36,22 @@ type ShowcaseProps = QwikIntrinsicElements['div'] & {
 
 export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
   const location = useLocation();
-
   const componentPath = `/src/routes${location.url.pathname}examples/${name}.tsx`;
 
-  console.log('componentPath', componentPath);
-
-  const Component = useSignal<Component<any>>();
-  const ComponentRaw = useSignal<string>();
+  const MetaGlobComponentSig = useSignal<Component<any>>();
+  const componentCodeSig = useSignal<string>();
 
   useTask$(async () => {
-    if (isDev) {
-      Component.value = await components[componentPath]();
-      ComponentRaw.value = await componentsRaw[componentPath]();
-    } else {
-      Component.value = components[componentPath];
-      ComponentRaw.value = componentsRaw[componentPath];
-    }
+    MetaGlobComponentSig.value = isDev
+      ? 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`
+    componentCodeSig.value = isDev
+      ? await rawComponents[componentPath]()
+      : rawComponents[componentPath];
   });
 
   useStyles$(styles);
+
   return (
     <Tabs
       {...props}
@@ -67,13 +66,16 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
           Code
         </Tab>
       </TabList>
-      <TabPanel class="shadow-light-medium dark:shadow-dark-medium border-qwikui-blue-300 dark:border-qwikui-purple-200 rounded-b-xl border-[1.5px] bg-slate-200 bg-slate-800  p-4 dark:bg-slate-900 md:p-12">
+      <TabPanel class="shadow-light-medium dark:shadow-dark-medium border-qwikui-blue-300 dark:border-qwikui-purple-200 rounded-b-xl border-[1.5px] bg-slate-200 bg-slate-800 p-4 dark:bg-slate-900 md:p-12">
         <section class="flex flex-col items-center">
-          {Component.value && <Component.value />}
+          {MetaGlobComponentSig.value && <MetaGlobComponentSig.value />}
         </section>
       </TabPanel>
       <TabPanel class="border-qwikui-blue-300 dark:border-qwikui-purple-200 relative rounded-b-xl border-[1.5px]">
-        <Highlight class="rounded-b-xl rounded-t-none" code={ComponentRaw.value || ''} />
+        <Highlight
+          class="rounded-b-xl rounded-t-none"
+          code={componentCodeSig.value || ''}
+        />
       </TabPanel>
     </Tabs>
   );