@vixt/vue 0.1.18 → 0.1.20

package/dist/index.d.mts

@@ -1,15 +1,61 @@
 import * as vite from 'vite';
 import * as _vixt_core from '@vixt/core';
-import { PluginOptions, VixtOptions } from '@vixt/core';
-import { RouterOptions } from 'vue-router';
+import { Vixt, PluginOptions, VixtOptions } from '@vixt/core';
 import { PluginOptions as PluginOptions$1 } from 'pinia-plugin-persistedstate';
+import { RouterOptions } from 'vue-router';
 import Vue from '@vitejs/plugin-vue';
-import Layouts from 'vite-plugin-vue-layouts';
-import Components from 'unplugin-vue-components/vite';
+import UnoCSS from 'unocss/vite';
 import AutoImport from 'unplugin-auto-import/vite';
-import VueDevTools from 'vite-plugin-vue-devtools';
+import Components from 'unplugin-vue-components/vite';
 import VueRouter from 'unplugin-vue-router/vite';
-import UnoCSS from 'unocss/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 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 const appVue: _vixt_core.VixtModule<AppOptions>;
 
 declare module '@vixt/core' {
     interface VixtOptions {
@@ -41,4 +87,4 @@ declare const presetVue: _vixt_core.VixtModule<VixtOptions>;
 
 declare const _default: (options?: VixtOptions | undefined) => vite.PluginOption;
 
-export { _default as default, presetVue };
+export { type AppHead, type AppOptions, appVue, _default as default, genarateAppComponent, generateAppConfig, generateCss, generateIndexHtml, generateMainTs, generatePlugins, getAppComponentPath, presetVue };

package/dist/index.d.ts

@@ -1,15 +1,61 @@
 import * as vite from 'vite';
 import * as _vixt_core from '@vixt/core';
-import { PluginOptions, VixtOptions } from '@vixt/core';
-import { RouterOptions } from 'vue-router';
+import { Vixt, PluginOptions, VixtOptions } from '@vixt/core';
 import { PluginOptions as PluginOptions$1 } from 'pinia-plugin-persistedstate';
+import { RouterOptions } from 'vue-router';
 import Vue from '@vitejs/plugin-vue';
-import Layouts from 'vite-plugin-vue-layouts';
-import Components from 'unplugin-vue-components/vite';
+import UnoCSS from 'unocss/vite';
 import AutoImport from 'unplugin-auto-import/vite';
-import VueDevTools from 'vite-plugin-vue-devtools';
+import Components from 'unplugin-vue-components/vite';
 import VueRouter from 'unplugin-vue-router/vite';
-import UnoCSS from 'unocss/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 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 const appVue: _vixt_core.VixtModule<AppOptions>;
 
 declare module '@vixt/core' {
     interface VixtOptions {
@@ -41,4 +87,4 @@ declare const presetVue: _vixt_core.VixtModule<VixtOptions>;
 
 declare const _default: (options?: VixtOptions | undefined) => vite.PluginOption;
 
-export { _default as default, presetVue };
+export { type AppHead, type AppOptions, appVue, _default as default, genarateAppComponent, generateAppConfig, generateCss, generateIndexHtml, generateMainTs, generatePlugins, getAppComponentPath, presetVue };

package/dist/index.mjs

@@ -1,13 +1,225 @@
 import { defineVixtModule, resolveLayersDirs, createVixtPlugin } from '@vixt/core';
-import defu from 'defu';
+import path from 'pathe';
+import fs from 'fs-extra';
 import Vue from '@vitejs/plugin-vue';
-import Layouts from 'vite-plugin-vue-layouts';
-import Components from 'unplugin-vue-components/vite';
+import defu from 'defu';
+import UnoCSS from 'unocss/vite';
 import AutoImport from 'unplugin-auto-import/vite';
-import VueDevTools from 'vite-plugin-vue-devtools';
-import VueRouter from 'unplugin-vue-router/vite';
+import Components from 'unplugin-vue-components/vite';
 import { VueRouterAutoImports } from 'unplugin-vue-router';
-import UnoCSS from 'unocss/vite';
+import VueRouter from 'unplugin-vue-router/vite';
+import VueDevTools from 'vite-plugin-vue-devtools';
+import Layouts from 'vite-plugin-vue-layouts';
+
+function getAppComponentPath(vixt) {
+  const { srcDirName } = vixt.options;
+  for (const layer of vixt._layers) {
+    const appComponentPath = path.resolve(layer.cwd, srcDirName, "App.vue");
+    if (fs.existsSync(appComponentPath))
+      return appComponentPath;
+  }
+}
+function genarateAppComponent(vixt) {
+  const appComponentPath = getAppComponentPath(vixt) || "@vixt/core/client/App.vue";
+  const appComponentTemplate = `import App from '${appComponentPath}'`;
+  return appComponentTemplate;
+}
+
+function generateAppConfig(vixt) {
+  const { buildImportsDir, srcDir, srcDirName } = vixt.options;
+  let appConfigsImportTemplate = "";
+  let appConfigsMergeTemplate = "";
+  let i = 0;
+  for (const layer of vixt._layers) {
+    const appConfigPath = path.resolve(layer.cwd, srcDirName, "app.config.ts");
+    if (fs.existsSync(appConfigPath)) {
+      const appConfigName = `__app_config_${i}`;
+      appConfigsImportTemplate += `import ${appConfigName} from '${appConfigPath}'
+`;
+      appConfigsMergeTemplate += `${appConfigName}, `;
+      i++;
+    }
+  }
+  const appConfigTemplate = `
+import { defu } from 'defu'
+${appConfigsImportTemplate}
+const appConfig = defu(${appConfigsMergeTemplate}{})
+function useAppConfig() {
+  return appConfig
+} 
+export { useAppConfig }
+`;
+  const mainTsPath = path.resolve(srcDir, "main.ts");
+  fs.outputFileSync(path.resolve(buildImportsDir, `app.config.ts`), `// @ts-nocheck
+export { useAppConfig } from '${mainTsPath}'`);
+  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, buildDirName, rootDir, srcDirName } = vixt.options;
+  const indexHtmlPath = path.resolve(rootDir, "index.html");
+  if (!fs.existsSync(indexHtmlPath))
+    fs.outputFileSync(indexHtmlPath, `<!-- Generated by Vixt -->
+<!-- This file transform from '${buildDirName}/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="/${srcDirName}/main.ts"><\/script>
+${noscriptTemplate}
+  </body>
+</html>
+`;
+  fs.outputFileSync(path.resolve(buildDir, "index.html"), code);
+  return code;
+}
+
+function generatePlugins(vixt) {
+  const { srcDirName } = vixt.options;
+  let pluginsImportTemplate = "";
+  let pluginsMergeTemplate = "";
+  let i = 0;
+  for (const layer of [...vixt._layers].reverse()) {
+    const pluginsDir = path.resolve(layer.cwd, srcDirName, "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, buildDirName, srcDir } = vixt.options;
+  const mainTsPath = path.resolve(srcDir, "main.ts");
+  if (!fs.existsSync(mainTsPath))
+    fs.outputFileSync(mainTsPath, `// Generated by Vixt
+// This file transform from '${buildDirName}/main.ts'
+`);
+  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}/main.ts'
+// @ts-nocheck
+${appComponentTemplate}
+${cssTemplate}
+${appConfigTemplate}
+${pluginsTemplate}
+
+import 'virtual:uno.css' 
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { createPersistedState } from 'pinia-plugin-persistedstate'
+import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'
+import { setupLayouts } from 'virtual:generated-layouts'
+
+const pinia = createPinia()
+pinia.use(createPersistedState(appConfig.piniaPersistedState))
+
+const router = createRouter({
+  routes: setupLayouts(routes),
+  history: createWebHistory('${options.baseURL}'),
+  ...appConfig.router,
+})
+
+const app = createApp(App)
+app.use(pinia).use(router)
+usePlugins({ app, router, routes, pinia, appConfig })
+
+app.mount('#${options.rootId}')
+`;
+  fs.outputFileSync(path.resolve(buildDir, "main.ts"), code);
+  return code;
+}
+
+const name = "vixt:app";
+const defaults$1 = {
+  rootId: "app",
+  rootTag: "div",
+  baseURL: "/",
+  css: [],
+  head: {
+    meta: [
+      { charset: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" }
+    ]
+  }
+};
+const appVue = defineVixtModule({
+  meta: { name, configKey: "app" },
+  defaults: defaults$1,
+  setup(options, vixt) {
+    let indexHtmlCode;
+    let mainTsCode;
+    const mainTsPath = path.resolve(vixt.options.srcDir, "main.ts");
+    return {
+      name,
+      configResolved() {
+        indexHtmlCode = generateIndexHtml(options, vixt);
+        mainTsCode = generateMainTs(options, vixt);
+      },
+      transformIndexHtml: {
+        order: "pre",
+        handler() {
+          return indexHtmlCode;
+        }
+      },
+      transform: {
+        order: "pre",
+        handler(_, id) {
+          if (id !== mainTsPath)
+            return;
+          return mainTsCode;
+        }
+      }
+    };
+  }
+});
 
 const presetVue = defineVixtModule({
   async setup(_, vixt) {
@@ -47,37 +259,7 @@ const presetVue = defineVixtModule({
 });
 
 const defaults = {
-  modules: [presetVue],
-  app: {
-    transformMain(code, vixt) {
-      const { app } = vixt.options;
-      code += `
-import 'virtual:uno.css' 
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import { createPersistedState } from 'pinia-plugin-persistedstate'
-import { createRouter, createWebHistory } from 'vue-router'
-import { routes } from 'vue-router/auto-routes'
-import { setupLayouts } from 'virtual:generated-layouts'
-
-const pinia = createPinia()
-pinia.use(createPersistedState(appConfig.piniaPersistedState))
-
-const router = createRouter({
-  routes: setupLayouts(routes),
-  history: createWebHistory('${app.baseURL}'),
-  ...appConfig.router,
-})
-
-const app = createApp(App)
-app.use(pinia).use(router)
-usePlugins({ app, router, routes, pinia, appConfig })
-
-app.mount('#${app.rootId}')
-`;
-      return code;
-    }
-  },
+  modules: [appVue, presetVue],
   typescript: {
     tsConfig: {
       compilerOptions: {
@@ -88,4 +270,4 @@ app.mount('#${app.rootId}')
 };
 const index = createVixtPlugin({ defaults });
 
-export { index as default, presetVue };
+export { appVue, index as default, genarateAppComponent, generateAppConfig, generateCss, generateIndexHtml, generateMainTs, generatePlugins, getAppComponentPath, presetVue };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vixt/vue",
   "type": "module",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "author": "SoulLyoko<https://github.com/SoulLyoko>",
   "license": "MIT",
   "homepage": "https://github.com/SoulLyoko/vixt#readme",
@@ -18,20 +18,20 @@
     "dist"
   ],
   "dependencies": {
-    "@vitejs/plugin-vue": "^5.1.3",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vitejs/plugin-vue-jsx": "^4.0.1",
-    "@vueuse/core": "^11.0.3",
-    "pinia": "^2.2.2",
-    "pinia-plugin-persistedstate": "^4.0.0",
-    "unocss": "0.61.6",
-    "unplugin-auto-import": "^0.18.2",
+    "@vueuse/core": "^11.1.0",
+    "pinia": "^2.2.4",
+    "pinia-plugin-persistedstate": "^4.1.1",
+    "unocss": "^0.63.4",
+    "unplugin-auto-import": "^0.18.3",
     "unplugin-vue-components": "^0.27.4",
-    "unplugin-vue-router": "^0.10.7",
-    "vite-plugin-vue-devtools": "^7.4.4",
+    "unplugin-vue-router": "^0.10.8",
+    "vite-plugin-vue-devtools": "^7.4.6",
     "vite-plugin-vue-layouts": "^0.11.0",
-    "vue": "^3.5.1",
-    "vue-router": "^4.4.3",
-    "@vixt/core": "0.1.18"
+    "vue": "^3.5.12",
+    "vue-router": "^4.4.5",
+    "@vixt/core": "0.1.20"
   },
   "scripts": {
     "build": "unbuild"