Remove-import-meta-glob-eager-true (#928)

* chore(website): remove import.meta.glob eager true

* chore(website): comment out vite config trick to se chunk names

Author: maiieul

apps/component-tests/src/components/showcase-test/component-imports.ts

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { isDev } from '@builder.io/qwik/build';
 
 // The below `/src/routes/docs/**/**/examples/*.tsx` patterns are here so that import.meta.glob works both for styled and headless routes.
 // For example:
@@ -11,7 +10,6 @@ function createMetaGlobComponents() {
     '../../../../website/src/routes/docs/**/**/examples/*.tsx',
     {
       import: 'default',
-      eager: isDev ? false : true,
     },
   );
 

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

@@ -1,6 +1,5 @@
 import { PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
 import { useLocation } from '@builder.io/qwik-city';
-import { isDev } from '@builder.io/qwik/build';
 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.
@@ -12,7 +11,6 @@ import { Highlight } from '../highlight/highlight';
 const codeSnippets: any = import.meta.glob('/src/routes/docs/**/**/snippets/*', {
   query: '?raw',
   import: 'default',
-  eager: isDev ? false : true,
 });
 
 type CodeSnippetProps = PropsOf<'div'> & {
@@ -30,9 +28,7 @@ export const CodeSnippet = component$<CodeSnippetProps>(({ name }) => {
   const codeSnippetSig = useSignal<string>();
 
   useTask$(async () => {
-    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`
+    codeSnippetSig.value = await codeSnippets[snippetPath](); // We need to call `await codeSnippets[snippetPath]()` in development as it is `eager:false`
   });
 
   return (

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

@@ -1,5 +1,3 @@
-import { isDev } from '@builder.io/qwik/build';
-
 // The below `/src/routes/docs/**/**/examples/*.tsx` patterns are here so that import.meta.glob works both for styled and headless routes.
 // For example:
 // /src/routes/docs/components/styled/modal/examples/hero.tsx
@@ -10,7 +8,6 @@ export const metaGlobComponents: Record<string, any> = import.meta.glob(
   '/src/routes/docs/**/**/examples/*.tsx',
   {
     import: 'default',
-    eager: isDev ? false : true,
   },
 );
 
@@ -20,6 +17,5 @@ export const rawComponents: Record<string, any> = import.meta.glob(
   {
     query: '?raw',
     import: 'default',
-    eager: isDev ? false : true,
   },
 );

apps/website/src/components/showcase/showcase.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 { Tabs } from '@qwik-ui/headless';
 import { Highlight } from '../highlight/highlight';
 import { metaGlobComponents, rawComponents } from './component-imports';
@@ -20,12 +19,8 @@ export const Showcase = component$<ShowcaseProps>(({ name, ...props }) => {
 
   useTask$(async () => {
     // eslint-disable-next-line qwik/valid-lexical-scope
-    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];
+    MetaGlobComponentSig.value = await metaGlobComponents[componentPath](); // We need to call `await metaGlobComponents[componentPath]()` in development as it is `eager:false`
+    componentCodeSig.value = await rawComponents[componentPath]();
   });
 
   return (

apps/website/vite.config.ts

@@ -4,29 +4,29 @@ import { qwikNxVite } from 'qwik-nx/plugins';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import { recmaProvideComponents } from './recma-provide-components';
-import { isDev } from '@builder.io/qwik/build';
 
 export default defineConfig(async () => {
   const { default: rehypePrettyCode } = await import('rehype-pretty-code');
   const { visit } = await import('unist-util-visit');
 
-  let output: any = {};
-  if (!isDev) {
-    // Client-specific configuration
-    output = {
-      // Customize the client build structure
-      entryFileNames: ({ name }: any) => {
-        if (name.startsWith('entry')) {
-          return '[name].js';
-        }
-        return `build/[name]-[hash].js`;
-      },
-      chunkFileNames: () => {
-        return `build/[name]-[hash].js`;
-      },
-      assetFileNames: `build/[name]-[hash].[ext]`,
-    };
-  }
+  // commented out as doesn't seem to work with import.meta.glob eager:false in preview
+  // let output: any = {};
+  // if (!isDev) {
+  //   // Client-specific configuration
+  //   output = {
+  //     // Customize the client build structure
+  //     entryFileNames: ({ name }: any) => {
+  //       if (name.startsWith('entry')) {
+  //         return '[name].mjs';
+  //       }
+  //       return `[name]-[hash].js`;
+  //     },
+  //     chunkFileNames: () => {
+  //       return `[name]-[hash].js`;
+  //     },
+  //     assetFileNames: `build/[name]-[hash].[ext]`,
+  //   };
+  // }
 
   return {
     plugins: [
@@ -96,7 +96,7 @@ export default defineConfig(async () => {
     build: {
       target: 'es2022',
       rollupOptions: {
-        output,
+        // output,
       },
     },
     preview: {