chore(showcase & codesnippet): add Sig prefix to signals

Author: maiieul

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

@@ -28,22 +28,22 @@ export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
 
  const snippetPath = `/src/routes${location.url.pathname}snippets/${name}${lang}`;
 
- const CodeSnippet = useSignal<string>();
+ const CodeSnippetSig = useSignal<string>();
 
  useTask$(async () => {
  // We need to call `await rawCodeSnippets[snippetPath]()` in development as it is `eager:false`
  if (isDev) {
- CodeSnippet.value = await rawCodeSnippets[snippetPath]();
+ CodeSnippetSig.value = await rawCodeSnippets[snippetPath]();
  // We need to directly access the `components[componentPath]` expression in preview/production as it is `eager:true`
  } else {
- CodeSnippet.value = rawCodeSnippets[snippetPath];
+ CodeSnippetSig.value = rawCodeSnippets[snippetPath];
  }
  });
  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 || ''} />
+ <Highlight code={CodeSnippetSig.value || ''} />
  </div>
  );
 });

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

@@ -39,18 +39,18 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
 
  console.log('componentPath', componentPath);
 
- const Component = useSignal<Component<any>>();
- const ComponentRaw = useSignal<string>();
+ const ComponentSig = useSignal<Component<any>>();
+ const ComponentRawSig = useSignal<string>();
 
  useTask$(async () => {
  // We need to call `await components[componentPath]()` in development as it is `eager:false`
  if (isDev) {
- Component.value = await components[componentPath]();
- ComponentRaw.value = await componentsRaw[componentPath]();
+ 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 {
- Component.value = components[componentPath];
- ComponentRaw.value = componentsRaw[componentPath];
+ ComponentSig.value = components[componentPath];
+ ComponentRawSig.value = componentsRaw[componentPath];
  }
  });
 
@@ -71,11 +71,14 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
  </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">
  <section class="flex flex-col items-center">
- {Component.value && <Component.value />}
+ {ComponentSig.value && <ComponentSig.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={ComponentRawSig.value || ''}
+ />
  </TabPanel>
  </Tabs>
  );