feat: pwa supports, and remove load resume plugin

Author: Dunqing

packages/create-resumejs/template-react-ts/src/main.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import Show from './Show'
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <Show />
   </React.StrictMode>,
-  document.getElementById('root'),
 )

packages/resume/package.json

@@ -44,5 +44,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "vite-plugin-pwa": "^0.16.5"
   }
 }

packages/resume/src/index.ts

@@ -2,9 +2,9 @@ import path, { isAbsolute } from 'node:path'
 import process from 'node:process'
 import type { InlineConfig } from 'vite'
 import { build, createServer, preview } from 'vite'
+import { VitePWA } from 'vite-plugin-pwa'
 import react from '@vitejs/plugin-react'
 import minimist from 'minimist'
-import { loadResume } from './plugins/loadResume'
 import { entry } from './plugins/entry'
 
 const cwd = process.cwd()
@@ -33,7 +33,7 @@ function getViteConfig() {
       entry({
         template,
       }),
-      loadResume(),
+      VitePWA({ registerType: 'autoUpdate' }),
     ],
   }
 

packages/resume/src/plugins/entry.ts

@@ -1,3 +1,5 @@
+import path from 'node:path'
+import { readFileSync } from 'node:fs'
 import type { Plugin } from 'vite'
 import MagicString from 'magic-string'
 
@@ -7,12 +9,24 @@ interface EntryPluginOptions {
 
 export function entry({ template }: EntryPluginOptions = {}): Plugin {
   const RESUME_ENTRY = '/RESUME_ENTRY.tsx'
+  let content = ''
+
   return {
     name: 'resume:entry',
+    configResolved(config) {
+      content = readFileSync(path.resolve(config.root, 'README.md')).toString()
+    },
     transformIndexHtml: {
       enforce: 'pre',
       transform() {
         return [
+          {
+            tag: 'script',
+            injectTo: 'body-prepend',
+            children: `
+              window.__RESUME__ = ${JSON.stringify(content)}
+            `,
+          },
           {
             tag: 'script',
             attrs: {
@@ -36,25 +50,24 @@ export function entry({ template }: EntryPluginOptions = {}): Plugin {
         }
         const ms = new MagicString(`
           import React from 'react'
-          import ReactDOM from 'react-dom'
+          import ReactDOM from 'react-dom/client'
           import { Resume } from '@resumejs/components'
           ${templateId ? `import CustomizeComponents from '${templateId}'` : ''}
-          import md from 'virtual:resume'
 
           const Show = () => {
             return (
               <Resume ${
                 templateId ? 'components={CustomizeComponents}' : ''
-              } className="md">{md}</Resume>
+              } className="md">{window.__RESUME__}</Resume>
             )
           }
 
-          ReactDOM.render(
-            <React.StrictMode>
-              <Show />
-            </React.StrictMode>,
-            document.getElementById('root')
-          )
+          ReactDOM.createRoot(document.getElementById('root'))
+            .render(
+              <React.StrictMode>
+                <Show />
+              </React.StrictMode>
+            )
         `)
 
         return {