feat: add default theme types

package.json

@@ -30,6 +30,7 @@
     "vite": "^3.0.9"
   },
   "devDependencies": {
+    "@loadable/babel-plugin": "^5.13.2",
     "@types/fs-extra": "^9.0.13",
     "@types/koa": "^2.13.5",
     "@types/koa-router": "^7.4.4",

src/client/app/Content.tsx

@@ -1,5 +1,5 @@
 import { useRoutes } from 'react-router-dom';
-import { routes } from 'island:routes';
+import { routes } from 'virtual:routes';
 import React from 'react';
 
 export const Content = () => {

src/client/app/app.tsx

@@ -1,6 +1,6 @@
 import { Layout } from 'island:theme';
 import React from 'react';
-import { routes } from 'island:routes';
+import { routes } from 'virtual:routes';
 import { matchRoutes } from 'react-router-dom';
 
 export async function waitForApp(path: string) {

src/client/app/client-entry.tsx

@@ -7,7 +7,8 @@ async function renderInBrowser() {
   if (!containerEl) {
     throw new Error('#root element not found');
   }
-  if (import.meta.env.DEV) {
+  // TODO: add SPA mode support
+  if (import.meta.env.DEV || import.meta.env.SPA) {
     // The App code will will be tree-shaking in production
     // So there is no need to worry that the complete hydration will be executed in production
     const { waitForApp, App } = await import('./app');

src/client/type.d.ts

@@ -16,7 +16,7 @@ declare module 'island:client*' {
   export const Content: ComponentType<any>;
 }
 
-declare module 'island:routes' {
+declare module 'virtual:routes' {
   import { Route } from 'react-router-dom';
 
   export const routes: Route[];

src/node/config.ts

@@ -1,11 +1,13 @@
 import { join } from 'path';
-import { SiteData } from '../shared/types/types';
+import { SiteConfig, DefaultTheme } from '../shared/types';
 
-export async function resolveConfig(root: string): Promise<SiteData> {
+export function resolveUserConfig() {}
+
+export async function resolveConfig(root: string): Promise<SiteConfig> {
   // const userConfig = { root };
   // 1. TODO: 解析用户配置文件
   // 2. 与默认配置合并
-  const siteData: SiteData = {
+  const siteData: SiteConfig<DefaultTheme.Config> = {
     root: process.cwd(),
     base: '/',
     outDir: 'dist',

src/node/plugin-routes/RouteService.ts

@@ -1,7 +1,6 @@
 import fastGlob from 'fast-glob';
 import path from 'path';
-import { isProduction, ROUTE_PATH, TEMP_PATH } from '../constants';
-import { writeFile, ensureDir } from 'fs-extra';
+import { isProduction } from '../constants';
 export interface RouteMeta {
   routePath: string;
   basePath: string;
@@ -21,9 +20,9 @@ export class RouteService {
   #routeData: RouteMeta[] = [];
   constructor(
     private scanDir: string,
-    private extensions: string[],
-    private root: string
-  ) {}
+    private extensions: string[]
+  ) // private root: string
+  {}
 
   async init() {
     const files = fastGlob.sync(`**/*.{${this.extensions.join(',')}}`, {
@@ -39,18 +38,19 @@ export class RouteService {
         absolutePath: path.join(this.scanDir, fileRelativePath)
       };
     });
-    const routeCode = this.generateRoutesCode();
-    try {
-      await ensureDir(path.join(this.root, TEMP_PATH));
-      await writeFile(path.join(this.root, ROUTE_PATH), routeCode);
-    } catch (e) {
-      console.log(e);
-    }
+    // const routeCode = this.generateRoutesCode();
+    // try {
+    //   await ensureDir(path.join(this.root, TEMP_PATH));
+    //   await writeFile(path.join(this.root, ROUTE_PATH), routeCode);
+    // } catch (e) {
+    //   console.log(e);
+    // }
   }
 
   generateRoutesCode() {
+    console.log(this.#routeData);
     return `
-${isProduction() ? '' : `import loadable from '@loadable/component';`}
+${isProduction() ? '' : `import loadable from '@loadable/component'`};
 import React from 'react';
 ${this.#routeData
   .map((route, index) => {

src/node/plugin-routes/index.ts

@@ -8,7 +8,7 @@ import { RouteService } from './RouteService';
  * Implementation details:
  * 1. Find all files under src/pages (or the configured directory)
  * 2. Convert the file path to a route object
- * 3. Merge the route objects
+ * 3. Merge the route objects and generate route module code
  */
 interface PluginOptions {
   /**
@@ -42,11 +42,11 @@ export function pluginRoutes(options: PluginOptions = {}): Plugin {
   let routeService: RouteService;
   return {
     name: 'island:vite-plugin-routes',
-    async configResolved(config) {
+    async configResolved(c) {
       scanDir = path.isAbsolute(srcDir)
         ? path.join(srcDir, prefix)
-        : path.join(config.root, srcDir, prefix);
-      routeService = new RouteService(scanDir, extensions, config.root);
+        : path.join(c.root!, srcDir, prefix);
+      routeService = new RouteService(scanDir, extensions);
       await routeService.init();
     },
 

src/node/plugin.ts

@@ -3,22 +3,25 @@ import pluginMdx from 'vite-plugin-mdx';
 import { pluginSvgr } from './plugin-svgr';
 import { pluginIsland } from './plugin-island';
 import { pluginRoutes } from './plugin-routes';
-import pluginInspect from 'vite-plugin-inspect';
+
 export function createIslandPlugins() {
   return [
     // For island internal use
     pluginIsland(),
     // React hmr support
     pluginReact({
-      jsxRuntime: 'classic'
+      jsxRuntime: 'classic',
+      babel: {
+        // plugins: ['@loadable/babel-plugin']
+      }
     }),
     // Svg component support
     pluginSvgr(),
     // Md(x) compile
     pluginMdx(),
     // Conventional Route
-    pluginRoutes({ prefix: '' }),
+    pluginRoutes({ prefix: '' })
     // Inspect transformation
-    pluginInspect({})
+    // pluginInspect({})
   ];
 }