A design system in a box.
hip-ui.tngl.io/docs/introduction
dynamically load modules
+49
-40
+3
-1
.gitignore
+3
-1
.gitignore
+6
-6
apps/docs/src/routes/_docs.invoice-app.tsx
+6
-6
apps/docs/src/routes/_docs.invoice-app.tsx
···
35
35
import { Separator } from "@/components/separator";
36
36
import { Switch } from "@/components/switch";
37
37
import { TextField } from "@/components/text-field";
38
-
import {
39
-
ui,
40
-
primary,
41
-
successColor,
42
-
primaryColor,
43
-
} from "@/components/theme/semantic-color.stylex";
44
38
import { ToggleButton } from "@/components/toggle-button";
45
39
import { Body, Heading5, SmallBody } from "@/components/typography";
46
40
import { Text } from "@/components/typography/text";
47
41
48
42
import { radius } from "../components/theme/radius.stylex";
43
+
import {
44
+
ui,
45
+
primary,
46
+
successColor,
47
+
primaryColor,
48
+
} from "../components/theme/semantic-color.stylex";
49
49
import { spacing } from "../components/theme/spacing.stylex";
50
50
import { fontFamily, typeramp } from "../components/theme/typography.stylex";
51
51
+23
-5
apps/docs/src/routes/docs.$.tsx
+23
-5
apps/docs/src/routes/docs.$.tsx
···
19
19
import * as stylex from "@stylexjs/stylex";
20
20
import { allDocs } from "content-collections";
21
21
import { LinkIcon } from "lucide-react";
22
-
import { createContext, use, useEffect, useRef, useState } from "react";
23
-
import { pages, tableOfContents } from "virtual:content";
22
+
import {
23
+
createContext,
24
+
Suspense,
25
+
use,
26
+
useEffect,
27
+
useRef,
28
+
useState,
29
+
} from "react";
30
+
import { modules, pages } from "virtual:content";
24
31
25
32
import { Flex } from "@/components/flex";
26
33
import { Grid } from "@/components/grid";
···
284
291
285
292
export const Route = createFileRoute("/docs/$")({
286
293
component: RouteComponent,
294
+
loader: async ({ location }) => {
295
+
return {
296
+
toc: await modules[location.pathname].then((mod) => mod.toc),
297
+
};
298
+
},
287
299
});
288
300
289
301
function RouteComponent() {
290
302
const { _splat } = Route.useParams();
291
303
const location = useLocation();
304
+
const { toc } = Route.useLoaderData();
292
305
const doc = allDocs.find((d) => location.pathname.includes(d._meta.path));
293
306
294
307
if (!doc) {
···
296
309
}
297
310
298
311
const Content = pages[location.pathname];
312
+
313
+
if (!Content) {
314
+
throw new Error(`Content not found: ${location.pathname}`);
315
+
}
316
+
299
317
const isShowcase = location.pathname.includes("showcase");
300
318
301
319
if (isShowcase) {
302
320
return <Content components={components} />;
303
321
}
304
-
305
-
const toc = tableOfContents[location.pathname];
306
322
307
323
return (
308
324
<Grid
···
317
333
{doc.description}
318
334
</Text>
319
335
</Flex>
320
-
<Content components={components} />
336
+
<Suspense fallback={<div>Loading...</div>}>
337
+
<Content components={components} />
338
+
</Suspense>
321
339
</div>
322
340
<TableOfContents toc={toc} />
323
341
</Grid>
+5
-5
apps/docs/src/types/virtual.d.ts
+5
-5
apps/docs/src/types/virtual.d.ts
···
3
3
4
4
import { Toc } from "@stefanprobst/rehype-extract-toc";
5
5
6
-
export const pages: Record<
7
-
string,
8
-
React.ComponentType<{ components: MDXComponents }>
9
-
>;
6
+
type Page = React.ComponentType<{
7
+
components: MDXComponents;
8
+
}>;
10
9
11
-
export const tableOfContents: Record<string, Toc>;
10
+
export const pages: Partial<Record<string, React.LazyExoticComponent<Page>>>;
11
+
export const modules: Record<string, Promise<{ default: Page; toc: Toc }>>;
12
12
}
13
13
14
14
declare module "virtual:propDocs" {
+12
-22
apps/docs/vite.config.ts
+12
-22
apps/docs/vite.config.ts
···
20
20
import { defineConfig, PluginOption } from "vite";
21
21
import viteTsConfigPaths from "vite-tsconfig-paths";
22
22
23
+
function toSlug(file: string) {
24
+
return file.replace("src/", "/").replace(".mdx", "");
25
+
}
26
+
23
27
/** Generate a virtual model that imports all the content files. */
24
28
function content() {
25
29
const virtualModuleId = "virtual:content";
···
40
44
load(id) {
41
45
if (id === resolvedVirtualModuleId) {
42
46
return dedent`
43
-
${files
44
-
.map((file) => {
45
-
const slug = file.replace("src/", "/").replace(".mdx", "");
46
-
return `import ${camelCase(slug)} from "${path.resolve(file)}";`;
47
-
})
48
-
.join("\n")}
49
-
${files
50
-
.map((file) => {
51
-
const slug = file.replace("src/", "/").replace(".mdx", "");
52
-
return `import { toc as ${camelCase(`${slug}-toc`)} } from "${path.resolve(file)}";`;
53
-
})
54
-
.join("\n")}
47
+
import { lazy } from "react";
55
48
56
-
export const pages = {
49
+
export const modules = {
57
50
${files
58
-
.map((file) => {
59
-
const slug = file.replace("src/", "/").replace(".mdx", "");
60
-
return `"${slug}": ${camelCase(slug)},`;
61
-
})
51
+
.map((file) => `"${toSlug(file)}": import("/${file}"),`)
62
52
.join("\n")}
63
53
};
64
54
65
-
export const tableOfContents = {
55
+
export const pages = {
66
56
${files
67
-
.map((file) => {
68
-
const slug = file.replace("src/", "/").replace(".mdx", "");
69
-
return `"${slug}": ${camelCase(`${slug}-toc`)},`;
70
-
})
57
+
.map(
58
+
(file) =>
59
+
`"${toSlug(file)}": lazy(() => modules["${toSlug(file)}"]),`,
60
+
)
71
61
.join("\n")}
72
62
};
73
63
`;