@vixt/react 0.4.0 → 0.4.1

package/dist/index.d.mts

@@ -0,0 +1,47 @@
+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 };

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+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 };

package/dist/index.mjs

@@ -0,0 +1,263 @@
+import { generateClient, generateCss, generateAppConfig, generatePlugins, defineVixtModule, generateIndexHtml, resolveLayersDirs, createVixtPlugin } from '@vixt/core';
+import path from 'pathe';
+import fs from 'fs-extra';
+import React from '@vitejs/plugin-react';
+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 fg from 'fast-glob';
+import { pascalCase } from 'unplugin-vue-components';
+import extractComments from 'extract-comments';
+import { parse } from 'yaml';
+
+function getAppComponentPath(vixt) {
+  for (const layer of vixt._layers) {
+    const appComponentPath = path.resolve(layer.config.srcDir, "App.tsx");
+    if (fs.existsSync(appComponentPath))
+      return appComponentPath;
+  }
+}
+function generateSetupLayouts(vixt) {
+  const { buildImportsDir } = vixt.options;
+  const { defaultLayout = "default" } = vixt.options.layouts ?? {};
+  fs.outputFileSync(path.resolve(buildImportsDir, `layouts.ts`), `// Generated by Vixt
+// @ts-nocheck
+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
+  });
+}
+`);
+}
+function genarateAppComponent(vixt) {
+  generateSetupLayouts(vixt);
+  const { buildDir } = vixt.options;
+  const defaultAppComponentPath = path.resolve(buildDir, `App.tsx`);
+  fs.outputFileSync(defaultAppComponentPath, `// Generated by Vixt
+// @ts-nocheck
+import { StrictMode } from 'react'
+import { useRoutes } from 'react-router'
+import generatedRoutes from '~react-pages'
+
+const routes = setupLayouts(generatedRoutes)
+
+function App() {
+  return (
+    <StrictMode>
+      {useRoutes(routes)}
+    </StrictMode>
+  )
+}
+
+export default App
+`);
+  const appComponentPath = getAppComponentPath(vixt) || defaultAppComponentPath;
+  const appComponentTemplate = `import App from '${appComponentPath}'`;
+  return appComponentTemplate;
+}
+
+function generateMainFile(options, vixt) {
+  const { buildDir, srcDir } = vixt.options;
+  const mainFileName = "main.tsx";
+  const mainTsPath = path.resolve(srcDir, mainFileName);
+  if (!fs.existsSync(mainTsPath))
+    fs.outputFileSync(mainTsPath, `// Generated by Vixt
+// This file transform from '${path.basename(buildDir)}/${mainFileName}'
+`);
+  generateClient(vixt);
+  const appComponentTemplate = genarateAppComponent(vixt);
+  const cssTemplate = generateCss(options);
+  const appConfigTemplate = generateAppConfig(vixt);
+  const pluginsTemplate = generatePlugins(vixt);
+  const code = `// Generated by Vixt
+// This file transform to '${srcDir}/${mainFileName}'
+// @ts-nocheck
+${appComponentTemplate}
+${cssTemplate}
+${appConfigTemplate}
+${pluginsTemplate}
+
+import 'virtual:uno.css'
+import { StrictMode, Suspense } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router'
+import routes from '~react-pages'
+
+const app = createRoot(document.getElementById('${options.rootId}')!)
+app.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+)
+
+usePlugins({ app, routes, appConfig })
+`;
+  fs.outputFileSync(path.resolve(buildDir, mainFileName), code);
+  return code;
+}
+
+const name$1 = "vixt:app-react";
+const defaults$1 = {
+  rootId: "app",
+  rootTag: "div",
+  baseURL: "/",
+  entryFile: "main.tsx",
+  css: [],
+  head: {
+    meta: [
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" }
+    ]
+  }
+};
+const app = defineVixtModule({
+  meta: { name: name$1, configKey: "app" },
+  defaults: defaults$1,
+  setup(options, vixt) {
+    let indexHtmlCode;
+    let mainTsCode;
+    const mainTsPath = path.resolve(vixt.options.srcDir, "main.tsx");
+    return {
+      name: name$1,
+      configResolved() {
+        indexHtmlCode = generateIndexHtml(options, vixt);
+        mainTsCode = generateMainFile(options, vixt);
+      },
+      transformIndexHtml: {
+        order: "pre",
+        handler() {
+          return indexHtmlCode;
+        }
+      },
+      transform: {
+        order: "pre",
+        handler(_, id) {
+          if (id !== mainTsPath)
+            return;
+          return mainTsCode;
+        }
+      }
+    };
+  }
+});
+
+function componentsResolver(vixt) {
+  const { components = [] } = resolveLayersDirs([...vixt._layers].reverse());
+  const root = vixt.options.rootDir;
+  const files = fg.sync(components.map((c) => `${c}/**/*.(t|j)sx`), {
+    ignore: ["node_modules"],
+    onlyFiles: true,
+    cwd: root,
+    absolute: true
+  });
+  const imports = {};
+  files.forEach((componentPath) => {
+    let componentName = componentPath.replace(/\/index\.(t|j)sx$/, "").replace(/\.(t|j)sx$/, "");
+    for (const dir of components) {
+      componentName = componentName.replace(dir, "");
+    }
+    componentName = pascalCase(componentName.replace(/\//g, "-"));
+    imports[componentPath] = [["default", componentName]];
+  });
+  return imports;
+}
+
+const routeJSXReg = /^\s+(route)\s+/gm;
+function parseJSX(code) {
+  return extractComments(code).slice(0, 1).filter((comment) => routeJSXReg.test(comment.value) && comment.value.includes(":") && comment.loc.start.line === 1);
+}
+function parseYamlComment(code, path) {
+  return code.reduce((memo, item) => {
+    const { value } = item;
+    const v = value.replace(routeJSXReg, "");
+    try {
+      const yamlResult = parse(v);
+      return {
+        ...memo,
+        ...yamlResult
+      };
+    } catch (err) {
+      throw new Error(`Invalid YAML format of comment in ${path}
+${err.message}`);
+    }
+  }, {});
+}
+function extendRoute(route) {
+  if (!route.element)
+    return;
+  const codePath = route.element.startsWith("/") ? route.element.slice(1) : route.element;
+  const code = fs.readFileSync(codePath, "utf-8");
+  const jsx = parseJSX(code);
+  const block = parseYamlComment(jsx, codePath);
+  return {
+    ...route,
+    ...block
+  };
+}
+
+const name = "vixt:preset-react";
+const presetReact = defineVixtModule({
+  meta: { name },
+  async setup(_, vixt) {
+    const { constants = [], hooks = [], layouts = [], pages = [], stores = [], utils = [] } = resolveLayersDirs([...vixt._layers].reverse());
+    const { buildTypesDir, buildImportsDir } = vixt.options;
+    const defaultOptions = {
+      react: {},
+      pages: {
+        dirs: pages,
+        extendRoute
+      },
+      layouts: {
+        layoutsDirs: layouts,
+        pagesDirs: pages,
+        extensions: ["jsx", "tsx"],
+        importMode: () => "sync"
+      },
+      imports: {
+        imports: ["react", "react-router", "ahooks", componentsResolver(vixt)],
+        dts: `${buildTypesDir}/auto-imports.d.ts`,
+        dirs: [constants, hooks, stores, utils, buildImportsDir].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;
+  }
+});
+
+const defaults = {
+  modules: [app, presetReact],
+  typescript: {
+    tsConfig: {
+      compilerOptions: {
+        jsxImportSource: "react",
+        types: ["vite-plugin-pages/client-react"]
+      }
+    }
+  }
+};
+const index = createVixtPlugin({ defaults });
+
+export { app, index as default, genarateAppComponent, generateMainFile, generateSetupLayouts, getAppComponentPath, presetReact };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixt/react",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "author": "SoulLyoko<https://github.com/SoulLyoko>",
   "license": "MIT",
   "homepage": "https://github.com/SoulLyoko/vixt#readme",
@@ -33,7 +33,7 @@
     "vite-plugin-pages": "^0.33.0",
     "vite-plugin-vue-layouts": "^0.11.0",
     "yaml": "^2.8.0",
-    "@vixt/core": "0.4.0"
+    "@vixt/core": "0.4.1"
   },
   "scripts": {
     "build": "unbuild",