@vixt/vue 0.3.6 → 0.4.1

package/dist/index.d.mts

@@ -1,8 +1,10 @@
 import * as vite from 'vite';
 import * as _vixt_core from '@vixt/core';
-import { Vixt, PluginOptions as PluginOptions$1, VixtOptions } from '@vixt/core';
+import { AppOptions, Vixt, PluginOptions as PluginOptions$1, VixtOptions } from '@vixt/core';
+import { Pinia } from 'pinia';
 import { PluginOptions } from 'pinia-plugin-persistedstate';
-import { RouterOptions } from 'vue-router';
+import { App } from 'vue';
+import { RouterOptions, Router, RouteRecord } from 'vue-router';
 import Vue from '@vitejs/plugin-vue';
 import VueJsx from '@vitejs/plugin-vue-jsx';
 import UnoCSS from 'unocss/vite';
@@ -12,64 +14,29 @@ import VueRouter from 'unplugin-vue-router/vite';
 import VueDevTools from 'vite-plugin-vue-devtools';
 import Layouts from 'vite-plugin-vue-layouts';
 
-type Property = Record<string, string>;
-interface AppHead {
-    meta?: Property[];
-    link?: Property[];
-    style?: Property[];
-    script?: Property[];
-    title?: Property[];
-    noscript?: Property[];
-}
-interface AppOptions {
-    head?: AppHead;
-    /**
-     * @default /
-     */
-    baseURL?: string;
-    /**
-     * @default 'app'
-     */
-    rootId?: string;
-    /**
-     * @default 'div'
-     */
-    rootTag?: string;
-    /** inject css files */
-    css?: string[];
-    /**
-     * @default './loading.html'
-     */
-    loadingTemplate?: string;
+declare module '@vixt/core/client' {
+  interface VixtAppConfig {
+    router?: Partial<RouterOptions>
+    /** https://github.com/prazdevs/pinia-plugin-persistedstate */
+    piniaPersistedState?: PluginOptions
+  }
+
+  interface VixtApp {
+    app: App
+    router: Router
+    routes: RouteRecord[]
+    pinia: Pinia
+    appConfig: VixtAppConfig
+  }
 }
 
+declare const appVue: _vixt_core.VixtModule<AppOptions>;
+
 declare function getAppComponentPath(vixt: Vixt): string | undefined;
 declare function genarateAppComponent(vixt: Vixt): string;
 
-declare function generateAppConfig(vixt: Vixt): string;
-
-declare function generateCss(options: AppOptions): string;
-
-declare function generateIndexHtml(options: AppOptions, vixt: Vixt): string;
-
 declare function generateMainTs(options: AppOptions, vixt: Vixt): string;
 
-declare function generatePlugins(vixt: Vixt): string;
-
-declare module '@vixt/core' {
-    interface VixtOptions {
-        app?: AppOptions;
-    }
-}
-declare module '@vixt/core/client' {
-    interface VixtAppConfig {
-        router?: Partial<RouterOptions>;
-        /** https://github.com/prazdevs/pinia-plugin-persistedstate */
-        piniaPersistedState?: PluginOptions;
-    }
-}
-declare const appVue: _vixt_core.VixtModule<AppOptions>;
-
 declare module '@vixt/core' {
     interface VixtOptions {
         vue?: PluginOptions$1<typeof Vue>;
@@ -94,4 +61,4 @@ declare const presetVue: _vixt_core.VixtModule<VixtOptions>;
 
 declare const _default: (options?: VixtOptions | undefined) => vite.PluginOption;
 
-export { type AppHead, type AppOptions, appVue, _default as default, genarateAppComponent, generateAppConfig, generateCss, generateIndexHtml, generateMainTs, generatePlugins, getAppComponentPath, presetVue };
+export { appVue, _default as default, genarateAppComponent, generateMainTs, getAppComponentPath, presetVue };

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import * as vite from 'vite';
 import * as _vixt_core from '@vixt/core';
-import { Vixt, PluginOptions as PluginOptions$1, VixtOptions } from '@vixt/core';
+import { AppOptions, Vixt, PluginOptions as PluginOptions$1, VixtOptions } from '@vixt/core';
+import { Pinia } from 'pinia';
 import { PluginOptions } from 'pinia-plugin-persistedstate';
-import { RouterOptions } from 'vue-router';
+import { App } from 'vue';
+import { RouterOptions, Router, RouteRecord } from 'vue-router';
 import Vue from '@vitejs/plugin-vue';
 import VueJsx from '@vitejs/plugin-vue-jsx';
 import UnoCSS from 'unocss/vite';
@@ -12,64 +14,29 @@ import VueRouter from 'unplugin-vue-router/vite';
 import VueDevTools from 'vite-plugin-vue-devtools';
 import Layouts from 'vite-plugin-vue-layouts';
 
-type Property = Record<string, string>;
-interface AppHead {
-    meta?: Property[];
-    link?: Property[];
-    style?: Property[];
-    script?: Property[];
-    title?: Property[];
-    noscript?: Property[];
-}
-interface AppOptions {
-    head?: AppHead;
-    /**
-     * @default /
-     */
-    baseURL?: string;
-    /**
-     * @default 'app'
-     */
-    rootId?: string;
-    /**
-     * @default 'div'
-     */
-    rootTag?: string;
-    /** inject css files */
-    css?: string[];
-    /**
-     * @default './loading.html'
-     */
-    loadingTemplate?: string;
+declare module '@vixt/core/client' {
+  interface VixtAppConfig {
+    router?: Partial<RouterOptions>
+    /** https://github.com/prazdevs/pinia-plugin-persistedstate */
+    piniaPersistedState?: PluginOptions
+  }
+
+  interface VixtApp {
+    app: App
+    router: Router
+    routes: RouteRecord[]
+    pinia: Pinia
+    appConfig: VixtAppConfig
+  }
 }
 
+declare const appVue: _vixt_core.VixtModule<AppOptions>;
+
 declare function getAppComponentPath(vixt: Vixt): string | undefined;
 declare function genarateAppComponent(vixt: Vixt): string;
 
-declare function generateAppConfig(vixt: Vixt): string;
-
-declare function generateCss(options: AppOptions): string;
-
-declare function generateIndexHtml(options: AppOptions, vixt: Vixt): string;
-
 declare function generateMainTs(options: AppOptions, vixt: Vixt): string;
 
-declare function generatePlugins(vixt: Vixt): string;
-
-declare module '@vixt/core' {
-    interface VixtOptions {
-        app?: AppOptions;
-    }
-}
-declare module '@vixt/core/client' {
-    interface VixtAppConfig {
-        router?: Partial<RouterOptions>;
-        /** https://github.com/prazdevs/pinia-plugin-persistedstate */
-        piniaPersistedState?: PluginOptions;
-    }
-}
-declare const appVue: _vixt_core.VixtModule<AppOptions>;
-
 declare module '@vixt/core' {
     interface VixtOptions {
         vue?: PluginOptions$1<typeof Vue>;
@@ -94,4 +61,4 @@ declare const presetVue: _vixt_core.VixtModule<VixtOptions>;
 
 declare const _default: (options?: VixtOptions | undefined) => vite.PluginOption;
 
-export { type AppHead, type AppOptions, appVue, _default as default, genarateAppComponent, generateAppConfig, generateCss, generateIndexHtml, generateMainTs, generatePlugins, getAppComponentPath, presetVue };
+export { appVue, _default as default, genarateAppComponent, generateMainTs, getAppComponentPath, presetVue };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineVixtModule, resolveLayersDirs, createVixtPlugin } from '@vixt/core';
+import { generateClient, generateCss, generateAppConfig, generatePlugins, defineVixtModule, generateIndexHtml, resolveLayersDirs, createVixtPlugin } from '@vixt/core';
 import path from 'pathe';
 import fs from 'fs-extra';
 import Vue from '@vitejs/plugin-vue';
@@ -20,117 +20,17 @@ function getAppComponentPath(vixt) {
   }
 }
 function genarateAppComponent(vixt) {
-  const appComponentPath = getAppComponentPath(vixt) || "@vixt/core/client/App.vue";
+  const { buildDir } = vixt.options;
+  const defaultAppComponentPath = path.resolve(buildDir, `App.vue`);
+  fs.outputFileSync(defaultAppComponentPath, `<template>
+  <RouterView />
+</template>
+`);
+  const appComponentPath = getAppComponentPath(vixt) || defaultAppComponentPath;
   const appComponentTemplate = `import App from '${appComponentPath}'`;
   return appComponentTemplate;
 }
 
-function generateAppConfig(vixt) {
-  const { buildImportsDir } = vixt.options;
-  let appConfigsImportTemplate = "";
-  let appConfigsMergeTemplate = "";
-  let i = 0;
-  for (const layer of vixt._layers) {
-    const appConfigPath = path.resolve(layer.config.srcDir, "app.config.ts");
-    if (fs.existsSync(appConfigPath)) {
-      const appConfigName = `__app_config_${i}`;
-      appConfigsImportTemplate += `import ${appConfigName} from '${appConfigPath}'
-`;
-      appConfigsMergeTemplate += `${appConfigName}, `;
-      i++;
-    }
-  }
-  const globalAppConfigKey = "__VIXT_APP_CONFIG";
-  const appConfigTemplate = `
-import { defu } from 'defu'
-${appConfigsImportTemplate}
-const appConfig = defu(${appConfigsMergeTemplate}{})
-globalThis.${globalAppConfigKey} = appConfig
-`;
-  fs.outputFileSync(path.resolve(buildImportsDir, `app.config.ts`), `// Generated by Vixt
-// @ts-nocheck
-import type { VixtAppConfig } from '@vixt/core/client'
-
-export const useAppConfig = () => globalThis.${globalAppConfigKey} as VixtAppConfig
-`);
-  return appConfigTemplate;
-}
-
-function generateCss(options) {
-  const cssTemplate = options?.css?.map((css) => `import '${css}'`).join("\n") ?? "";
-  return cssTemplate;
-}
-
-function resolveHeadTag(tag, attrs) {
-  const attrsStr = Object.entries(attrs).filter(([k]) => k !== "children").map(([k, v]) => `${k}="${v}"`).join(" ");
-  return attrs?.children ? `<${tag} ${attrsStr}>${attrs.children}</${tag}>` : `<${tag} ${attrsStr} />`;
-}
-function generateIndexHtml(options, vixt) {
-  const { buildDir, rootDir, srcDir } = vixt.options;
-  const indexHtmlPath = path.resolve(rootDir, "index.html");
-  if (!fs.existsSync(indexHtmlPath))
-    fs.outputFileSync(indexHtmlPath, `<!-- Generated by Vixt -->
-<!-- This file transform from '${path.basename(buildDir)}/index.html' -->
-`);
-  const { head = {}, rootTag, rootId } = options;
-  const headTemplate = Object.entries(head).filter(([k]) => k !== "noscript").map(([tag, attrs]) => attrs.map((e) => resolveHeadTag(tag, e))).flat().join("\n");
-  const noscriptTemplate = Object.entries(head).filter(([k]) => k === "noscript").map(([tag, attrs]) => attrs.map((e) => resolveHeadTag(tag, e))).flat().join("\n");
-  let { loadingTemplate = "" } = options;
-  if (!loadingTemplate) {
-    for (const layer of vixt._layers) {
-      const loadingTemplatePath = path.resolve(layer.cwd, "loading.html");
-      if (fs.existsSync(loadingTemplatePath)) {
-        loadingTemplate = fs.readFileSync(loadingTemplatePath, "utf-8");
-        break;
-      }
-    }
-  }
-  const code = `<!DOCTYPE html>
-<html>
-  <head>
-${headTemplate}
-  </head>
-  <body>
-    <${rootTag} id="${rootId}">
-${loadingTemplate}
-    </${rootTag}>
-    <script type="module" src="${srcDir.replace(rootDir, "")}/main.ts"><\/script>
-${noscriptTemplate}
-  </body>
-</html>
-`;
-  fs.outputFileSync(path.resolve(buildDir, "index.html"), code);
-  return code;
-}
-
-function generatePlugins(vixt) {
-  let pluginsImportTemplate = "";
-  let pluginsMergeTemplate = "";
-  let i = 0;
-  for (const layer of [...vixt._layers].reverse()) {
-    const pluginsDir = path.resolve(layer.config.srcDir, "plugins");
-    const files = fs.existsSync(pluginsDir) ? fs.readdirSync(pluginsDir) : [];
-    for (const f of files) {
-      const p = path.resolve(pluginsDir, f);
-      const pluginName = `__plugin_${i}`;
-      pluginsImportTemplate += `import ${pluginName} from '${p}'
-`;
-      pluginsMergeTemplate += `${pluginName}, `;
-      i++;
-    }
-  }
-  const pluginsTemplate = `
-${pluginsImportTemplate}
-const plugins = [${pluginsMergeTemplate}]
-function usePlugins(options) {
-  for (const plugin of plugins) {
-    typeof plugin === 'function' && plugin(options)
-  }
-}
-`;
-  return pluginsTemplate;
-}
-
 function generateMainTs(options, vixt) {
   const { buildDir, srcDir } = vixt.options;
   const mainTsPath = path.resolve(srcDir, "main.ts");
@@ -138,6 +38,7 @@ function generateMainTs(options, vixt) {
     fs.outputFileSync(mainTsPath, `// Generated by Vixt
 // This file transform from '${path.basename(buildDir)}/main.ts'
 `);
+  generateClient(vixt);
   const appComponentTemplate = genarateAppComponent(vixt);
   const cssTemplate = generateCss(options);
   const appConfigTemplate = generateAppConfig(vixt);
@@ -177,11 +78,12 @@ app.mount('#${options.rootId}')
   return code;
 }
 
-const name = "vixt:app";
+const name$1 = "vixt:app-vue";
 const defaults$1 = {
   rootId: "app",
   rootTag: "div",
   baseURL: "/",
+  entryFile: "main.ts",
   css: [],
   head: {
     meta: [
@@ -191,14 +93,14 @@ const defaults$1 = {
   }
 };
 const appVue = defineVixtModule({
-  meta: { name, configKey: "app" },
+  meta: { name: name$1, configKey: "app" },
   defaults: defaults$1,
   setup(options, vixt) {
     let indexHtmlCode;
     let mainTsCode;
     const mainTsPath = path.resolve(vixt.options.srcDir, "main.ts");
     return {
-      name,
+      name: name$1,
       configResolved() {
         indexHtmlCode = generateIndexHtml(options, vixt);
         mainTsCode = generateMainTs(options, vixt);
@@ -221,35 +123,52 @@ const appVue = defineVixtModule({
   }
 });
 
+function genarateGlobalComponents(vixt) {
+  const { buildTypesDir } = vixt.options;
+  const codePath = path.resolve(buildTypesDir, "global-components.d.ts");
+  const code = `
+import type { GlobalComponents as _GlobalComponents } from '@vue/runtime-core'
+
+declare module 'vue'{
+  interface GlobalComponents extends _GlobalComponents {}
+}
+`;
+  fs.outputFileSync(codePath, code);
+}
+
+const name = "vixt:preset-vue";
 const presetVue = defineVixtModule({
+  meta: { name },
   async setup(_, vixt) {
-    const { components = [], composables = [], constants = [], utils = [], stores = [], pages = [], layouts = [] } = resolveLayersDirs(vixt._layers);
+    const { components = [], composables = [], constants = [], utils = [], stores = [], pages = [], layouts = [] } = resolveLayersDirs([...vixt._layers].reverse());
     const { buildTypesDir, buildImportsDir } = vixt.options;
     const defaultOptions = {
       vue: {},
       vueJsx: {},
       router: {
         dts: `${buildTypesDir}/typed-router.d.ts`,
-        routesFolder: pages,
+        routesFolder: pages
         /** Fix overrides priority */
-        extendRoute(route) {
-          const node = route.node.value;
-          const overrides = node._overrides;
-          if (overrides.size <= 1)
-            return;
-          for (const pageDir of pages) {
-            const matched = [...overrides.keys()].find((e) => e.match(pageDir));
-            if (matched) {
-              node.components.set("default", matched);
-              return;
-            }
-          }
-        }
+        // extendRoute(route) {
+        //   // @ts-ignore
+        //   const node: TreeNode['value'] = route.node.value
+        //   // @ts-ignore
+        //   const overrides: Map<string, object> = node._overrides
+        //   if (overrides.size <= 1)
+        //     return
+        //   for (const pageDir of [...pages].reverse()) {
+        //     const matched = [...overrides.keys()].find(e => e.match(pageDir))
+        //     if (matched) {
+        //       node.components.set('default', matched)
+        //       return
+        //     }
+        //   }
+        // },
       },
-      layouts: { layoutsDirs: [...layouts].reverse(), pagesDirs: pages },
+      layouts: { layoutsDirs: layouts, pagesDirs: pages },
       components: {
         dts: `${buildTypesDir}/components.d.ts`,
-        dirs: components,
+        dirs: [...components].reverse(),
         directoryAsNamespace: true,
         collapseSamePrefixes: true
       },
@@ -263,6 +182,7 @@ const presetVue = defineVixtModule({
       devtools: { enabled: false }
     };
     const options = vixt.options = defu(vixt.options, defaultOptions);
+    genarateGlobalComponents(vixt);
     const plugins = [
       VueRouter(options.router),
       Vue(options.vue),
@@ -289,4 +209,4 @@ const defaults = {
 };
 const index = createVixtPlugin({ defaults });
 
-export { appVue, index as default, genarateAppComponent, generateAppConfig, generateCss, generateIndexHtml, generateMainTs, generatePlugins, getAppComponentPath, presetVue };
+export { appVue, index as default, genarateAppComponent, generateMainTs, getAppComponentPath, presetVue };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixt/vue",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "author": "SoulLyoko<https://github.com/SoulLyoko>",
   "license": "MIT",
   "homepage": "https://github.com/SoulLyoko/vixt#readme",
@@ -18,23 +18,25 @@
     "dist"
   ],
   "dependencies": {
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vitejs/plugin-vue-jsx": "^4.1.2",
-    "@vue/compiler-sfc": "^3.5.13",
-    "@vueuse/core": "^13.1.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "@vue/compiler-sfc": "^3.5.14",
+    "@vueuse/core": "^13.2.0",
     "pinia": "^3.0.2",
-    "pinia-plugin-persistedstate": "^4.2.0",
+    "pinia-plugin-persistedstate": "^4.3.0",
     "unocss": "66.0.0",
     "unplugin-auto-import": "^19.2.0",
     "unplugin-vue-components": "28.0.0",
     "unplugin-vue-router": "^0.12.0",
     "vite-plugin-vue-devtools": "^7.7.6",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vue": "^3.5.13",
+    "vue": "^3.5.14",
     "vue-router": "^4.5.1",
-    "@vixt/core": "0.3.6"
+    "vue-tsc": "^2.2.10",
+    "@vixt/core": "0.4.1"
   },
   "scripts": {
-    "build": "unbuild"
+    "build": "unbuild",
+    "dev": "unbuild --stub"
   }
 }