feat: 通过context共享编译时信息

.eslintignore

@@ -5,4 +5,5 @@ pnpm-lock.yaml
 dist
 bin
 esm-cjs
-docs
+docs
+*.d.ts

.eslintrc.cjs

@@ -21,6 +21,7 @@ module.exports = {
     semi: ["error", "always"],
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
+    "react/no-unknown-property": "off"
   },
   settings: {
     react: {

docs/index.mdx

@@ -8,6 +8,8 @@ import Counter from './counter.tsx';
 
 <Counter />
 
+## 123
+
 ## GFM
 
 ### Autolink

package.json

@@ -80,6 +80,7 @@
     "remark-rehype": "^10.1.0",
     "shiki": "^0.12.1",
     "unified": "^10.1.2",
+    "unocss": "^0.48.4",
     "vite": "3.1.4"
   },
   "lint-staged": {

src/node/plugin-routes/RouteService.ts

@@ -51,7 +51,8 @@ export class RouteService {
           .map((route, index) => {
             return `{
             path: '${route.routePath}',
-            element: React.createElement(Route${index})
+            element: React.createElement(Route${index}),
+            preload: () => import('${route.absolutePath}')
           }`;
           })
           .join(',\n')}

src/node/plugin-routes/index.ts

@@ -1,10 +1,12 @@
+import { PageModule } from 'shared/types';
 import { Plugin } from 'vite';
 import { RouteService } from './RouteService';
 
 export interface Route {
   path: string;
   element: React.ReactElement;
   filePath: string;
+  preload: () => Promise<PageModule>;
 }
 
 interface PluginOptions {

src/node/unocssOptions.ts

@@ -0,0 +1,8 @@
+import { VitePluginConfig } from 'unocss/vite';
+import { presetAttributify, presetWind, presetMini } from 'unocss';
+
+const options: VitePluginConfig = {
+  presets: [presetAttributify(), presetWind(), presetMini()]
+};
+
+export default options;

src/node/vitePlugins.ts

@@ -4,13 +4,16 @@ import pluginReact from '@vitejs/plugin-react';
 import { pluginRoutes } from './plugin-routes';
 import { SiteConfig } from 'shared/types';
 import { createMdxPlugins } from './plugin-mdx';
+import pluginUnocss from 'unocss/vite';
+import unocssOptions from './unocssOptions';
 
 export async function createVitePlugins(
   config: SiteConfig,
   restart?: () => Promise<void>,
   isSSR = false
 ) {
   return [
+    pluginUnocss(unocssOptions),
     pluginIndexHtml(),
     pluginReact({ jsxRuntime: 'automatic' }),
     pluginConfig(config, restart),

src/runtime/app.tsx

@@ -1,4 +1,33 @@
+import { routes } from 'island:routes';
+import { Route } from 'node/plugin-routes';
+import { matchRoutes } from 'react-router-dom';
+import { PageData } from 'shared/types';
 import { Layout } from '../theme-default';
+import siteData from 'island:site-data';
+
+export async function initPageData(routePath: string): Promise<PageData> {
+  const matched = matchRoutes(routes, routePath);
+
+  if (matched) {
+    const route = matched[0].route as Route;
+    const moduleInfo = await route.preload();
+    console.log(moduleInfo);
+    return {
+      pageType: 'doc',
+      siteData,
+      frontmatter: moduleInfo.frontmatter,
+      pagePath: routePath,
+      toc: moduleInfo.toc
+    };
+    // 获取路由组件编译后的模块内容
+  }
+
+  return {
+    pageType: '404',
+    siteData,
+    pagePath: routePath
+  };
+}
 
 export function App() {
   return <Layout />;

src/runtime/client-entry.tsx

@@ -1,18 +1,20 @@
 import { createRoot } from 'react-dom/client';
-import { App } from './app';
-import siteData from 'island:site-data';
+import { App, initPageData } from './app';
+import { DataContext } from './hooks';
 import { BrowserRouter } from 'react-router-dom';
 
-function renderInBrowser() {
-  console.log(siteData);
+async function renderInBrowser() {
   const containerEl = document.getElementById('root');
   if (!containerEl) {
     throw new Error('#root element not found');
   }
+  const pageData = await initPageData(location.pathname);
   createRoot(containerEl).render(
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <DataContext.Provider value={pageData}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </DataContext.Provider>
   );
 }
 

src/runtime/hooks.ts

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+import { PageData } from 'shared/types';
+
+export const DataContext = createContext({} as PageData);
+
+export const usePageData = () => useContext(DataContext);

src/runtime/index.ts

@@ -1 +1,2 @@
 export { Content } from './Content';
+export * from './hooks';

src/shared/types/attributify-shims.d.ts

@@ -0,0 +1,5 @@
+import type { AttributifyAttributes } from 'unocss/preset-attributify';
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends AttributifyAttributes {}
+}

src/shared/types/index.ts

@@ -1,3 +1,4 @@
+import { ComponentType } from 'react';
 import { UserConfig as ViteConfiguration } from 'vite';
 
 export type NavItemWithLink = {
@@ -47,3 +48,34 @@ export interface SiteConfig {
   configPath: string;
   siteData: UserConfig;
 }
+
+export type PageType = 'home' | 'doc' | 'custom' | '404';
+
+export interface FrontMatter {
+  title?: string;
+  description?: string;
+  pageType?: PageType;
+  sidebar?: boolean;
+  outline?: boolean;
+}
+
+export interface Header {
+  id: string;
+  text: string;
+  depth: number;
+}
+
+export interface PageData {
+  siteData: UserConfig;
+  pagePath: string;
+  frontmatter?: FrontMatter;
+  pageType: PageType;
+  toc?: Header[];
+}
+
+export interface PageModule {
+  default: ComponentType;
+  frontmatter?: FrontMatter;
+  toc?: Header[];
+  [key: string]: unknown;
+}

src/theme-default/Layout/index.tsx

@@ -1,11 +1,23 @@
-import { useState } from 'react';
 import { Content } from '@runtime';
+import { usePageData } from '@runtime';
+import 'uno.css';
 
 export function Layout() {
+  const pageData = usePageData();
+  const { pageType } = pageData;
+  const getContent = () => {
+    if (pageType === 'home') {
+      return <div>主页</div>;
+    } else if (pageType === 'doc') {
+      return <Content />;
+    } else {
+      return <div>404</div>;
+    }
+  };
   return (
     <div>
-      <h1>Common Content</h1>
-      <Content />
+      <div>头部</div>
+      {getContent()}
     </div>
   );
 }