chore(showcase & codesnippet): refactor to enhance readability

Author: maiieul

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

@@ -8,7 +8,7 @@ import { Highlight } from '../highlight/highlight';
 // /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,
 });
@@ -20,30 +20,23 @@ type CodeSnippetProps = QwikIntrinsicElements['div'] & {
 export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
   const location = useLocation();
 
-  let lang = '.tsx';
+  // 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}`;
 
-  if (name.endsWith('.tsx')) lang = '';
-  if (name.endsWith('.ts')) lang = '';
-  if (name.endsWith('.css')) lang = '';
-
-  const snippetPath = `/src/routes${location.url.pathname}snippets/${name}${lang}`;
-
-  const CodeSnippetSig = useSignal<string>();
+  const codeSnippetSig = useSignal<string>();
 
   useTask$(async () => {
-    // We need to call `await rawCodeSnippets[snippetPath]()` in development as it is `eager:false`
-    if (isDev) {
-      CodeSnippetSig.value = await rawCodeSnippets[snippetPath]();
-      // We need to directly access the `components[componentPath]` expression in preview/production as it is `eager:true`
-    } else {
-      CodeSnippetSig.value = rawCodeSnippets[snippetPath];
-    }
+    const snippet = 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`
+    codeSnippetSig.value = snippet;
   });
+
   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={CodeSnippetSig.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/showcase/showcase.tsx

@@ -7,7 +7,6 @@ import {
   useTask$,
 } from '@builder.io/qwik';
 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';
@@ -18,12 +17,15 @@ import { Highlight } from '../highlight/highlight';
 // /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,27 +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 ComponentSig = useSignal<Component<any>>();
-  const ComponentRawSig = useSignal<string>();
+  const MetaGlobComponentSig = useSignal<Component<any>>();
+  const componentCodeSig = useSignal<string>();
 
   useTask$(async () => {
-    // We need to call `await components[componentPath]()` in development as it is `eager:false`
-    if (isDev) {
-      ComponentSig.value = await components[componentPath]();
-      ComponentRawSig.value = await componentsRaw[componentPath]();
-      // We need to directly access the `components[componentPath]` expression in preview/production as it is `eager:true`
-    } else {
-      ComponentSig.value = components[componentPath];
-      ComponentRawSig.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}
@@ -69,15 +66,15 @@ 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">
-          {ComponentSig.value && <ComponentSig.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={ComponentRawSig.value || ''}
+          code={componentCodeSig.value || ''}
         />
       </TabPanel>
     </Tabs>