@vixt/react 0.5.16 → 0.6.0

package/dist/types/client.d.ts

@@ -0,0 +1,12 @@
+import type { Root } from 'react-dom/client'
+import type { RouteObject } from 'react-router'
+
+declare module '@vixt/core/client' {
+  interface VixtAppConfig { }
+
+  interface VixtApp {
+    app: Root
+    routes: RouteObject[]
+    appConfig: VixtAppConfig
+  }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+import './client.d'
+import './node.d'

package/dist/types/node.d.ts

@@ -0,0 +1,20 @@
+import type React from '@vitejs/plugin-react'
+import type { ExtractPluginOptions } from '@vixt/core'
+import type UnoCSS from 'unocss/vite'
+import type AutoImport from 'unplugin-auto-import/vite'
+import type Pages from 'vite-plugin-pages'
+import type Layouts from 'vite-plugin-vue-layouts'
+
+declare module '@vixt/core' {
+  interface VixtOptions {
+    react?: ExtractPluginOptions<typeof React>
+    /** https://github.com/hannoeru/vite-plugin-pages */
+    pages?: ExtractPluginOptions<typeof Pages>
+    /** https://github.com/JohnCampionJr/vite-plugin-vue-layouts */
+    layouts?: ExtractPluginOptions<typeof Layouts>
+    /** https://github.com/unplugin/unplugin-auto-import */
+    imports?: ExtractPluginOptions<typeof AutoImport>
+    /** https://github.com/unocss/unocss */
+    unocss?: ExtractPluginOptions<typeof UnoCSS>
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixt/react",
   "type": "module",
-  "version": "0.5.16",
+  "version": "0.6.0",
   "author": "SoulLyoko<https://github.com/SoulLyoko>",
   "license": "MIT",
   "homepage": "https://soullyoko.github.io/vixt/",
@@ -12,36 +12,29 @@
     "react"
   ],
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs"
-    }
+    ".": "./dist/index.mjs",
+    "./client/*": "./dist/client/*.js",
+    "./types": "./dist/types/index.d.ts",
+    "./package.json": "./package.json"
   },
-  "main": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "main": "./dist/index.mjs",
+  "types": "./dist/types/index.d.ts",
   "dependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
+    "@vitejs/plugin-react": "^5.1.2",
     "ahooks": "^3.9.6",
     "extract-comments": "^1.1.0",
     "fast-glob": "^3.3.3",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router": "^7.10.0",
-    "unocss": "^66.5.10",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-router": "^7.11.0",
+    "unocss": "^66.5.11",
     "unplugin-auto-import": "^20.3.0",
     "unplugin-vue-components": "28.0.0",
-    "vite-plugin-pages": "^0.33.1",
+    "vite-plugin-pages": "^0.33.2",
     "vite-plugin-vue-layouts": "^0.11.0",
     "yaml": "^2.8.2",
-    "@vixt/core": "0.5.16"
-  },
-  "scripts": {
-    "build": "unbuild",
-    "dev": "unbuild --stub"
+    "@vixt/core": "0.6.0"
   }
 }

package/src/client/App.ts

@@ -0,0 +1,15 @@
+// @ts-expect-error virtual file
+import routes from '~react-pages'
+import { createElement } from 'react'
+import { createBrowserRouter, RouterProvider } from 'react-router'
+// @ts-expect-error virtual file
+import appConfig from 'virtual:vixt:app-config'
+// @ts-expect-error virtual file
+import { setupLayouts } from 'virtual:vixt:setup-layouts'
+
+function App() {
+  const router = createBrowserRouter(setupLayouts(routes), { basename: appConfig.baseURL })
+  return createElement(RouterProvider, { router })
+}
+
+export default App

package/src/client/entry.ts

@@ -0,0 +1,31 @@
+import 'virtual:vixt:css'
+import 'virtual:uno.css'
+import { applyPlugins, createVixtApp } from '@vixt/core/client'
+import { createElement } from 'react'
+import { createRoot } from 'react-dom/client'
+// @ts-expect-error virtual file
+import appConfig from 'virtual:vixt:app-config'
+// @ts-expect-error virtual file
+import plugins from 'virtual:vixt:plugins'
+// @ts-expect-error virtual file
+import RootComponent from 'virtual:vixt:root-component'
+
+async function entry() {
+  const app = createRoot(document.getElementById(appConfig.rootId || 'app')!)
+  const vixt = createVixtApp({ app, appConfig })
+
+  try {
+    await applyPlugins(vixt, plugins)
+  }
+  catch (err) {
+    console.error(err)
+  }
+
+  app.render(createElement(RootComponent))
+
+  return app
+}
+
+entry()
+
+export default entry

package/src/index.ts

@@ -0,0 +1,31 @@
+import { createVixtPlugin } from '@vixt/core'
+import fs from 'fs-extra'
+import { resolvePathSync } from 'mlly'
+
+import presetReact from './modules/preset-react'
+import virtualRootComponent from './modules/virtual-root-component'
+import virtualSetupLayouts from './modules/virtual-setup-layouts'
+
+export default createVixtPlugin({
+  defaults: {
+    modules: [presetReact, virtualRootComponent, virtualSetupLayouts],
+    app: {
+      entryFile: 'main.tsx',
+      entryCode: fs.readFileSync(resolvePathSync('@vixt/react/client/entry'), 'utf-8'),
+      head: {
+        meta: [
+          { charset: 'utf-8' },
+          { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+        ],
+      },
+    },
+    typescript: {
+      tsConfig: {
+        compilerOptions: {
+          jsxImportSource: 'react',
+          types: ['@vixt/react/types', 'vite-plugin-pages/client-react'],
+        },
+      },
+    },
+  },
+})

package/src/modules/components.ts

@@ -0,0 +1,33 @@
+import type { ImportsMap } from 'unplugin-auto-import/types'
+
+import { cwd } from 'node:process'
+
+import fg from 'fast-glob'
+import { pascalCase } from 'unplugin-vue-components'
+
+export interface ComponentResolverOptions {
+  dirs?: string[]
+}
+
+export function componentsResolver(options: ComponentResolverOptions = {}) {
+  const { dirs = ['src/components'] } = options
+
+  const files = fg.sync(dirs.map(c => `${c}/**/*.(t|j)sx`), {
+    ignore: ['node_modules'],
+    onlyFiles: true,
+    cwd: cwd(),
+    absolute: true,
+  })
+
+  const imports: ImportsMap = {}
+  files.forEach((componentPath) => {
+    let componentName = componentPath.replace(/\/index\.(t|j)sx$/, '').replace(/\.(t|j)sx$/, '')
+    for (const dir of dirs) {
+      componentName = componentName.replace(dir, '')
+    }
+    componentName = pascalCase(componentName.replace(/\//g, '-'))
+    imports[componentPath] = [['default', componentName]]
+  })
+
+  return imports
+}

package/src/modules/preset-react.ts

@@ -0,0 +1,53 @@
+import type { VixtOptions } from '@vixt/core'
+
+import React from '@vitejs/plugin-react'
+import { defineVixtModule, resolveLayersDirs, VixtClientAutoImports } from '@vixt/core'
+import defu from 'defu'
+import UnoCSS from 'unocss/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Pages from 'vite-plugin-pages'
+import Layouts from 'vite-plugin-vue-layouts'
+
+import { componentsResolver } from './components'
+import { extendRoute } from './route-block'
+
+const name = 'vixt:preset-react'
+export default defineVixtModule<VixtOptions>({
+  meta: { name },
+  async setup(_, vixt) {
+    const { components = [], constants = [], hooks = [], layouts = [], pages = [], stores = [], utils = [] } = resolveLayersDirs([...vixt._layers].reverse())
+    const { buildTypesDir } = vixt.options
+
+    const defaultOptions: VixtOptions = {
+      react: {},
+      pages: {
+        dirs: pages,
+        extendRoute,
+      },
+      layouts: {
+        layoutsDirs: layouts,
+        pagesDirs: pages,
+        extensions: ['jsx', 'tsx'],
+        importMode: () => 'sync',
+      },
+      imports: {
+        imports: ['react', 'react-router', 'ahooks', componentsResolver({ dirs: components }), VixtClientAutoImports],
+        dts: `${buildTypesDir}/auto-imports.d.ts`,
+        dirs: [constants, hooks, stores, utils].flat(),
+      },
+      unocss: {},
+    }
+
+    const options = vixt.options = defu(vixt.options, defaultOptions)
+
+    const plugins = [
+      UnoCSS(options.unocss),
+      React(options.react),
+      Pages(options.pages),
+      Layouts(options.layouts),
+      AutoImport(options.imports!),
+    ]
+
+    return plugins
+  },
+})

package/src/modules/route-block.ts

@@ -0,0 +1,52 @@
+/**
+ * Support route block in react
+ * @link https://github.com/hannoeru/vite-plugin-pages?tab=readme-ov-file#jsxtsx-yaml-format-comments-for-route-datain-vue
+ * @link https://github.com/hannoeru/vite-plugin-pages/blob/main/src/customBlock.ts
+ */
+import type { CustomBlock, ParsedJSX, ReactRoute } from 'vite-plugin-pages'
+
+// @ts-expect-error
+import extractComments from 'extract-comments'
+import fs from 'fs-extra'
+import { parse as YAMLParser } from 'yaml'
+
+const routeJSXReg = /^\s+(route)\s+/gm
+
+function parseJSX(code: string): ParsedJSX[] {
+  return extractComments(code).slice(0, 1).filter((comment: ParsedJSX) => routeJSXReg.test(comment.value) && comment.value.includes(':') && comment.loc.start.line === 1)
+}
+
+function parseYamlComment(code: ParsedJSX[], path: string): CustomBlock {
+  return code.reduce((memo, item) => {
+    const { value } = item
+    const v = value.replace(routeJSXReg, '')
+    try {
+      const yamlResult = YAMLParser(v)
+
+      return {
+        ...memo,
+        ...yamlResult,
+      }
+    }
+    catch (err: any) {
+      throw new Error(`Invalid YAML format of comment in ${path}\n${err.message}`)
+    }
+  }, {})
+}
+
+function getRouteBlock(path: string) {
+  const code = fs.readFileSync(path, 'utf-8')
+  const parsedJSX = parseJSX(code)
+  const block = parseYamlComment(parsedJSX, path)
+  return block
+}
+
+export function extendRoute(route: ReactRoute) {
+  if (!route.element)
+    return
+
+  const codePath = route.element.startsWith('/') ? route.element.slice(1) : route.element
+  const block = getRouteBlock(codePath)
+
+  return { ...route, ...block }
+}

package/src/modules/virtual-root-component.ts

@@ -0,0 +1,40 @@
+import type { Vixt } from '@vixt/core'
+
+import { defineVixtModule } from '@vixt/core'
+import fs from 'fs-extra'
+import { resolvePathSync } from 'mlly'
+import path from 'pathe'
+
+function resolveRootComponentPath(vixt: Vixt) {
+  for (const layer of vixt._layers) {
+    const layerRootComponentPath = path.resolve(layer.config!.srcDir!, 'App.tsx')
+    if (fs.existsSync(layerRootComponentPath))
+      return layerRootComponentPath
+  }
+
+  return resolvePathSync('@vixt/react/client/App')
+}
+
+const name = 'virtual:vixt:root-component'
+const virtualModuleId = name
+const resolvedVirtualModuleId = `\0${virtualModuleId}`
+export default defineVixtModule({
+  meta: { name },
+  setup(_, vixt) {
+    return {
+      name,
+      resolveId(id) {
+        if (id === virtualModuleId) {
+          return resolvedVirtualModuleId
+        }
+      },
+      load(id) {
+        if (id === resolvedVirtualModuleId) {
+          const rootComponentPath = resolveRootComponentPath(vixt)
+          const rootComponentCode = fs.readFileSync(rootComponentPath, 'utf-8')
+          return rootComponentCode
+        }
+      },
+    }
+  },
+})

package/src/modules/virtual-setup-layouts.ts

@@ -0,0 +1,42 @@
+import { defineVixtModule } from '@vixt/core'
+
+const name = 'virtual:vixt:setup-layouts'
+const virtualModuleId = name
+const resolvedVirtualModuleId = `\0${virtualModuleId}`
+export default defineVixtModule({
+  meta: { name },
+  setup(_, vixt) {
+    return {
+      name,
+      resolveId(id) {
+        if (id === virtualModuleId) {
+          return resolvedVirtualModuleId
+        }
+      },
+      load(id) {
+        if (id === resolvedVirtualModuleId) {
+          const { defaultLayout = 'default' } = vixt.options.layouts ?? {}
+          const setupLayoutCode = `import { createElement } from 'react'
+import { layouts } from 'virtual:generated-layouts'
+
+export function setupLayouts(routes) {
+  return routes.map(route => {
+    if (route.children?.length > 0) {
+      route.children = setupLayouts(route.children)
+    }
+    if(route.element && route.meta?.layout !== false) {
+      return {
+        path: route.path,
+        element: createElement(layouts[route.meta?.layout ?? '${defaultLayout}']),
+        children: [{ ...route, path: '' }]
+      }
+    }
+    return route
+  });
+}`
+          return setupLayoutCode
+        }
+      },
+    }
+  },
+})

package/src/types/client.d.ts

@@ -0,0 +1,12 @@
+import type { Root } from 'react-dom/client'
+import type { RouteObject } from 'react-router'
+
+declare module '@vixt/core/client' {
+  interface VixtAppConfig { }
+
+  interface VixtApp {
+    app: Root
+    routes: RouteObject[]
+    appConfig: VixtAppConfig
+  }
+}

package/src/types/index.d.ts

@@ -0,0 +1,2 @@
+import './client.d'
+import './node.d'

package/src/types/node.d.ts

@@ -0,0 +1,20 @@
+import type React from '@vitejs/plugin-react'
+import type { ExtractPluginOptions } from '@vixt/core'
+import type UnoCSS from 'unocss/vite'
+import type AutoImport from 'unplugin-auto-import/vite'
+import type Pages from 'vite-plugin-pages'
+import type Layouts from 'vite-plugin-vue-layouts'
+
+declare module '@vixt/core' {
+  interface VixtOptions {
+    react?: ExtractPluginOptions<typeof React>
+    /** https://github.com/hannoeru/vite-plugin-pages */
+    pages?: ExtractPluginOptions<typeof Pages>
+    /** https://github.com/JohnCampionJr/vite-plugin-vue-layouts */
+    layouts?: ExtractPluginOptions<typeof Layouts>
+    /** https://github.com/unplugin/unplugin-auto-import */
+    imports?: ExtractPluginOptions<typeof AutoImport>
+    /** https://github.com/unocss/unocss */
+    unocss?: ExtractPluginOptions<typeof UnoCSS>
+  }
+}

package/tsdown.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'tsdown'
+
+export default defineConfig([
+  {
+    entry: 'src/index.ts',
+    platform: 'node',
+    copy: ['src/types'],
+  },
+  {
+    entry: 'src/client/**/*',
+    platform: 'browser',
+    outDir: 'dist/client',
+    external: [/virtual:/],
+  },
+])

package/dist/index.d.ts

@@ -1,47 +0,0 @@
-import * as vite from 'vite';
-import * as _vixt_core from '@vixt/core';
-import { AppOptions, Vixt, PluginOptions, VixtOptions } from '@vixt/core';
-import { Root } from 'react-dom/client';
-import { RouteObject } from 'react-router';
-import React from '@vitejs/plugin-react';
-import UnoCSS from 'unocss/vite';
-import AutoImport from 'unplugin-auto-import/vite';
-import Pages from 'vite-plugin-pages';
-import Layouts from 'vite-plugin-vue-layouts';
-
-declare module '@vixt/core/client' {
-  interface VixtAppConfig { }
-
-  interface VixtApp {
-    app: Root
-    routes: RouteObject[]
-    appConfig: VixtAppConfig
-  }
-}
-
-declare const app: _vixt_core.VixtModule<AppOptions>;
-
-declare function getAppComponentPath(vixt: Vixt): string | undefined;
-declare function generateSetupLayouts(vixt: Vixt): void;
-declare function genarateAppComponent(vixt: Vixt): string;
-
-declare function generateMainFile(options: AppOptions, vixt: Vixt): string;
-
-declare module '@vixt/core' {
-    interface VixtOptions {
-        react?: PluginOptions<typeof React>;
-        /** https://github.com/hannoeru/vite-plugin-pages */
-        pages?: PluginOptions<typeof Pages>;
-        /** https://github.com/JohnCampionJr/vite-plugin-vue-layouts */
-        layouts?: PluginOptions<typeof Layouts>;
-        /** https://github.com/unplugin/unplugin-auto-import */
-        imports?: PluginOptions<typeof AutoImport>;
-        /** https://github.com/unocss/unocss */
-        unocss?: PluginOptions<typeof UnoCSS>;
-    }
-}
-declare const presetReact: _vixt_core.VixtModule<VixtOptions>;
-
-declare const _default: (options?: VixtOptions | undefined) => vite.PluginOption;
-
-export { app, _default as default, genarateAppComponent, generateMainFile, generateSetupLayouts, getAppComponentPath, presetReact };