feat: support preload assets

Daydreamer-riri · Jul 24, 2023 · 10484ca · 10484ca
1 parent a587673
commit 10484ca
Show file tree

Hide file tree

Showing 14 changed files with 454 additions and 283 deletions.
diff --git a/examples/multiple-pages/src/App.tsx b/examples/multiple-pages/src/App.tsx
@@ -1,23 +1,29 @@
 import React from 'react'
-import { Layout } from './Layout'
 import './App.css'
 
+// import { Layout } from './Layout'
+
+const Layout = React.lazy(() => import('./Layout'))
+
 const pages = import.meta.glob<any>('./pages/**/*.tsx')
 console.log('🚀 ~ file: App.tsx:7 ~ pages:', pages)
 
 const children = Object.entries(pages).map(([filepath, component]) => {
   let path = filepath.split('/pages')[1]
   path = path.split('.')[0].replace('index', '')
+  const entry = `src${filepath.slice(1)}`
 
   if (path.endsWith('/')) {
     return {
       index: true,
       Component: React.lazy(component),
+      entry,
     }
   }
   return {
     path,
     Component: React.lazy(component),
+    entry,
   }
 })
 
@@ -26,6 +32,7 @@ export const routes = [
     path: '/',
     element: <Layout />,
     children,
+    entry: 'src/Layout.tsx',
   },
 ]
 

diff --git a/examples/multiple-pages/src/Layout.tsx b/examples/multiple-pages/src/Layout.tsx
@@ -1,7 +1,8 @@
 import { Suspense } from 'react'
 import { Outlet } from 'react-router-dom'
+import './layout.css'
 
-export function Layout() {
+export default function Layout() {
   return (
     <>
       {/* <Head>
@@ -11,7 +12,7 @@ export function Layout() {
         <title>head test</title>
       </Head> */}
       <main>
-        <h1>Layout</h1>
+        <h1 className="layout">Layout</h1>
         <Suspense>
           <Outlet />
         </Suspense>

diff --git a/examples/multiple-pages/src/components/a-count.css b/examples/multiple-pages/src/components/a-count.css
@@ -0,0 +1,3 @@
+.a-count {
+  color: pink;
+}
diff --git a/examples/multiple-pages/src/components/a-count.tsx b/examples/multiple-pages/src/components/a-count.tsx
@@ -0,0 +1,10 @@
+import { useState } from 'react'
+import './a-count.css'
+
+export default function ACount() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <button className="a-count" onClick={() => setCount(prev => ++prev)}>{count}</button>
+  )
+}
diff --git a/examples/multiple-pages/src/layout.css b/examples/multiple-pages/src/layout.css
@@ -0,0 +1,3 @@
+.layout {
+  color: #333;
+}
diff --git a/examples/multiple-pages/src/pages/a.tsx b/examples/multiple-pages/src/pages/a.tsx
@@ -1,12 +1,16 @@
+import { lazy } from 'react'
 import { useNavigate } from 'react-router-dom'
 import './a.css'
 
+const ACount = lazy(() => import('../components/a-count'))
+
 export default function A() {
   const navigate = useNavigate()
   return (
     <>
       <h1 className="a">Page A</h1>
       <button onClick={() => navigate('/')}>to index</button>
+      <ACount />
     </>
   )
 }
diff --git a/examples/multiple-pages/vite.config.ts b/examples/multiple-pages/vite.config.ts
@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react-swc'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  ssgOptions: {
+    formatting: 'minify',
+  },
 })
diff --git a/package.json b/package.json
@@ -80,23 +80,24 @@
     "html5parser": "^2.0.2",
     "jsdom": "^22.1.0",
     "kolorist": "^1.8.0",
+    "prettier": "^3.0.0",
     "react-helmet-async": "^1.3.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@ririd/eslint-config": "0.5.1",
+    "@ririd/eslint-config": "0.6.0",
     "@types/fs-extra": "^11.0.1",
     "@types/html-minifier": "^4.0.2",
     "@types/jsdom": "^21.1.1",
     "@types/node": "^18.15.11",
+    "@types/prettier": "^2.7.3",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@types/react-helmet-async": "^1.0.3",
     "@types/yargs": "^17.0.24",
     "bumpp": "^9.1.0",
     "critters": "^0.0.19",
-    "eslint": "^8.40.0",
-    "esno": "^0.16.3",
+    "eslint": "^8.45.0",
+    "esno": "^0.17.0",
     "p-queue": "^7.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",