📦 noxify / renoun-vite-rsc-ssg

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
102import fs from 'node:fs'
import path from 'node:path'
import { Readable } from 'node:stream'
import { pathToFileURL } from 'node:url'
import rsc from '@vitejs/plugin-rsc'
import mdx from '@mdx-js/rollup'
import react from '@vitejs/plugin-react'
import { type Plugin, type ResolvedConfig, defineConfig } from 'vite'
// import inspect from 'vite-plugin-inspect'
import { RSC_POSTFIX } from './src/framework/shared'
import rehypeAddCodeBlock from "@renoun/mdx/rehype/add-code-block";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";
export default defineConfig({
   resolve: {
      alias: {
        "mdx-components": path.resolve(
          import.meta.dirname,
          "./src/mdx-components.tsx"
        ),
      },
    },
  plugins: [
    // inspect(),
    mdx({
        providerImportSource: "mdx-components",
        rehypePlugins: [rehypeAddCodeBlock],
        remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
      }),
    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)
        },
      },
    },
  ]
}

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(
    pathToFileURL(entryPath).href
  )

  // entry provides a list of static paths
  const staticPaths = await entry.getStaticPaths()

  // render rsc and html
  const baseDir = config.environments.client.build.outDir
  for (const staticPatch of staticPaths) {
    config.logger.info('[vite-rsc:ssg] -> ' + staticPatch)
    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)
  }
}

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'
}