@vixt/react 0.7.0 → 0.7.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixt/react",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "author": "SoulLyoko<https://github.com/SoulLyoko>",
   "license": "MIT",
   "homepage": "https://soullyoko.github.io/vixt/",
@@ -20,6 +20,9 @@
   },
   "main": "./dist/index.mjs",
   "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "dependencies": {
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
@@ -36,6 +39,6 @@
     "vite-plugin-pages": "^0.33.2",
     "vite-plugin-vue-layouts": "^0.11.0",
     "yaml": "^2.8.2",
-    "@vixt/core": "0.7.0"
+    "@vixt/core": "0.7.1"
   }
 }

package/src/client/App.tsx

@@ -1,17 +0,0 @@
-// @ts-nocheck
-import routes from '~react-pages'
-import { BrowserRouter, useRoutes } from 'react-router'
-import appConfig from 'virtual:vixt:app-config'
-import { setupLayouts } from 'virtual:vixt:setup-layouts'
-
-function App() {
-  const routesWithLayouts = setupLayouts(routes)
-  const Routes = () => useRoutes(routesWithLayouts)
-  return (
-    <BrowserRouter basename={appConfig.baseURL}>
-      <Routes />
-    </BrowserRouter>
-  )
-}
-
-export default App

package/src/client/entry.ts

@@ -1,31 +0,0 @@
-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.tsx'
-
-function entry() {
-  const app = createRoot(document.getElementById(appConfig.rootId || 'app')!)
-  const vixt = createVixtApp({ app, appConfig })
-
-  try {
-    applyPlugins(vixt, plugins)
-  }
-  catch (err) {
-    console.error(err)
-  }
-
-  app.render(createElement(RootComponent))
-
-  return app
-}
-
-entry()
-
-export default entry

package/src/index.ts

@@ -1,31 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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 },
-  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(),
-        exclude: [],
-        include: [],
-      },
-      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

@@ -1,52 +0,0 @@
-/**
- * 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

@@ -1,60 +0,0 @@
-import type { Vixt } from '@vixt/core'
-
-import { defineVixtModule } from '@vixt/core'
-import fs from 'fs-extra'
-import { resolvePathSync } from 'mlly'
-import path from 'pathe'
-import { parseAst } from 'vite'
-
-function resolveRootComponent(vixt: Vixt) {
-  for (const layer of vixt._layers) {
-    const layerRootComponentPath = path.resolve(layer.config!.srcDir!, 'App.tsx')
-    const isExists = fs.existsSync(layerRootComponentPath)
-    const layerRootComponentCode = (isExists && fs.readFileSync(layerRootComponentPath, 'utf-8')) || ''
-    if (!isEmptyCode(layerRootComponentCode)) {
-      return {
-        path: layerRootComponentPath,
-        code: layerRootComponentCode,
-      }
-    }
-  }
-
-  const defaultRootComponentPath = resolvePathSync('@vixt/react/client/App')
-  return {
-    path: defaultRootComponentPath,
-    code: fs.readFileSync(defaultRootComponentPath, 'utf-8'),
-  }
-}
-
-export function isEmptyCode(code?: string) {
-  if (!code)
-    return true
-  try {
-    return !parseAst(code, { jsx: true }).body.length
-  }
-  catch {
-    return false
-  }
-}
-
-const name = 'virtual:vixt:root-component.tsx'
-export default defineVixtModule({
-  meta: { name },
-  setup(_, vixt) {
-    return {
-      name,
-      resolveId(id) {
-        if (id === name) {
-          return name
-        }
-      },
-      load(id) {
-        if (id === name) {
-          const { path, code } = resolveRootComponent(vixt)
-          this.addWatchFile(path)
-          return code
-        }
-      },
-    }
-  },
-})

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

@@ -1,42 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

package/src/types/node.d.ts

@@ -1,20 +0,0 @@
-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

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