Merge pull request #5 from dalurness/du/dynamicSolution

fix dynamically rendered component

src/components/DynamicSolution.tsx

@@ -1,14 +1,14 @@
-import { lazy, Suspense } from "react";
-
 // this component allows us to dynamically import components for question results that are unique to each specific question.
+
+// https://vite.dev/guide/features.html#glob-import
+let x: Record<string, astroHTML.JSX.Element> = import.meta.glob('./solutions/*', { eager: true, import: "default" })
 export function DynamicSolution({ resultComponent }: { resultComponent: string }) {
-  // btw...be aware of footguns when engaging in jank
-  // See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats
-  const Component = lazy(() => import(/* @vite-ignore */`./solutions/${resultComponent}`));
+  let path = `./solutions/${resultComponent}.tsx`
+  let Component = x[path]
+
+  if (!Component) return null
 
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <Component />
-    </Suspense>
-  );
+    <Component client:load />
+  )
 };

src/layouts/Day.astro

@@ -58,10 +58,6 @@ const { day, title, resultComponent } = Astro.props;
   </div>
 
   <div class="flex flex-col max-w-screen-lg w-full mx-auto px-4 md:px-6 my-12">
-    {
-      resultComponent && (
-        <DynamicSolution resultComponent={resultComponent} client:load />
-      )
-    }
+    {resultComponent && <DynamicSolution resultComponent={resultComponent} />}
   </div>
 </Layout>