📦 noxify / vite-rsc-ssg-renoun

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117import fs from "node:fs"
import path from "node:path"
import { Readable } from "node:stream"
import type { Plugin, ResolvedConfig } from "vite"
import { defineConfig } from "vite"
import mdx from "@mdx-js/rollup"
import rehypeAddCodeBlock from "@renoun/mdx/rehype/add-code-block"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import rsc from "@vitejs/plugin-rsc"
import remarkFrontmatter from "remark-frontmatter"
import remarkMdxFrontmatter from "remark-mdx-frontmatter"
import tsconfigPaths from "vite-tsconfig-paths"

import RouteTypesPlugin from "./src/framework/route-types"
import { RSC_POSTFIX } from "./src/framework/shared"
import { printTreeView } from "./src/framework/utils"

export default defineConfig(({ command }) => ({
  logLevel: command == "build" ? "warn" : "info",
  optimizeDeps: {
    exclude: ["renoun"],
  },
  resolve: {
    alias: {
      "mdx-components": path.resolve(
        import.meta.dirname,
        "./src/mdx-components.tsx",
      ),
    },
  },
  plugins: [
    RouteTypesPlugin(),
    tsconfigPaths(),
    tailwindcss(),
    // inspect(),
    mdx({
      providerImportSource: "mdx-components",
      rehypePlugins: [rehypeAddCodeBlock],
      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
    }),
    // mdx(),
    react(),
    rsc({
      entries: {
        client: "./src/framework/entry.browser.tsx",
        rsc: "./src/framework/entry.rsc.tsx",
        ssr: "./src/framework/entry.ssr.tsx",
      },
    }),
    rscSsgPlugin(),
  ],
}))

function rscSsgPlugin(): Plugin[] {
  return [
    {
      name: "rsc-ssg",
      config: {
        order: "pre",
        handler(_config, env) {
          return {
            appType: env.isPreview ? "mpa" : undefined,
            rsc: {
              serverHandler: env.isPreview ? false : undefined,
            },
          }
        },
      },
      buildApp: {
        async handler(builder) {
          await renderStatic(builder.config)
          process.exit(0)
        },
      },
    },
  ]
}

async function renderStatic(config: ResolvedConfig) {
  // import server entry
  const entryPath = path.join(config.environments.rsc.build.outDir, "index.js")
  const entry: typeof import("./src/framework/entry.rsc") = await import(
    entryPath
  )

  // get static paths from all pages based on their `generateStaticParamss` export
  const staticPaths = await entry.getStaticRoutes()

  // render rsc and html
  const baseDir = config.environments.client.build.outDir
  for (const staticPatch of staticPaths.generated) {
    const { html, rsc } = await entry.handleSsg(
      new Request(new URL(staticPatch, "http://ssg.local")),
    )
    await writeFileStream(
      path.join(baseDir, normalizeHtmlFilePath(staticPatch)),
      html,
    )
    await writeFileStream(path.join(baseDir, staticPatch + RSC_POSTFIX), rsc)
  }

  printTreeView(staticPaths.tree)
}

async function writeFileStream(filePath: string, stream: ReadableStream) {
  await fs.promises.mkdir(path.dirname(filePath), { recursive: true })
  await fs.promises.writeFile(filePath, Readable.fromWeb(stream as any))
}

function normalizeHtmlFilePath(p: string) {
  if (p.endsWith("/")) {
    return p + "index.html"
  }
  return p + ".html"
}