refactor: eager import to avoid async render blocks

Author: barelyhuman

runtime/route.js

@@ -1,4 +1,4 @@
-const pages = import.meta.glob("#{__PLUGIN_PAGES_ROOT}");
+const pages = import.meta.glob("#{__PLUGIN_PAGES_ROOT}",{eager: false});
 
 export const routes = normalizeRouteImports(pages, [
   new RegExp("#{__PLUGIN_PAGES_ROOT_REGEX}"),

src/content/data.js

@@ -1,40 +1,44 @@
-import { lazy } from "preact-iso";
+const contentMap = {};
+const posts = import.meta.glob("./**/*.mdx", { eager: true });
+for (let i in posts) {
+  contentMap[i] = "default" in posts[i] ? posts[i].default : posts[i];
+}
 
 export const sideBar = {
   introduction: {
     order: 1,
     label: "Introduction",
-    source: lazy(() => import("./introduction.mdx")),
+    source: contentMap["./introduction.mdx"],
     key: "introduction",
   },
   essentials: {
     order: 2,
     label: "Essentials",
-    source: lazy(() => import("./essentials.mdx")),
+    source: contentMap["./essentials.mdx"],
     key: "essentials",
   },
   aesthetics: {
     order: 3,
     label: "Aesthetics",
-    source: lazy(() => import("./aesthetics.mdx")),
+    source: contentMap["./aesthetics.mdx"],
     key: "aesthetics",
   },
   "developer-experience": {
     order: 4,
     label: "Developer Experience",
-    source: lazy(() => import("./developer-experience.mdx")),
+    source: contentMap["./developer-experience.mdx"],
     key: "developer-experience",
   },
   frameworks: {
     order: 5,
     label: "Frameworks",
-    source: lazy(() => import("./frameworks.mdx")),
+    source: contentMap["./frameworks.mdx"],
     key: "frameworks",
   },
   templates: {
     order: 6,
     label: "Templates",
-    source: lazy(() => import("./templates.mdx")),
+    source: contentMap["./templates.mdx"],
     key: "templates",
   },
 };

src/main.jsx

@@ -1,11 +1,12 @@
-import { hydrate, render } from "preact";
+import { render } from "preact";
 import {
   ErrorBoundary,
   LocationProvider,
   Route,
   Router,
   lazy,
   prerender as ssr,
+  hydrate,
 } from "preact-iso";
 import { routes } from "~routes";
 import "./index.css";

src/pages/index.jsx

@@ -1,18 +1,18 @@
-import { lazy } from "preact-iso";
 import { sideBar } from "../content/data";
 import BaseLayout from "../layouts/base";
-import { Suspense } from "preact/compat";
 
-const AllContent = () =>
-  Object.keys(sideBar).map((d, i) => {
+const AllContent = () => {
+  const components = [];
+  let i = -1;
+  for (let d in sideBar) {
+    i++;
     const Component = sideBar[d].source;
     const classList = i > 0 ? "mt-12 pt-12" : "";
-    return (
-      <Suspense fallback={<div>Loading...</div>}>
-        <Component class={classList} />
-      </Suspense>
-    );
-  });
+    components.push(<Component class={classList} />);
+  }
+
+  return components;
+};
 
 export default function HomePage() {
   return (