@minar-kotonoha/vite-plugin-miko 0.2.1 → 0.2.3

package/index.ts

@@ -119,10 +119,12 @@ const DEFAULTS = {
 // ===================================================================
 
 function detectTemplate(): string {
+  // 优先项目本地 template/（用户可覆盖）
   const local = resolve(cwd, 'template')
   if (existsSync(local)) return local
-  const pkgRelative = fileURLToPath(new URL('../../template', import.meta.url))
-  if (existsSync(pkgRelative)) return pkgRelative
+  // 回退到插件内置 template/
+  const bundled = fileURLToPath(new URL('./template', import.meta.url))
+  if (existsSync(bundled)) return bundled
   return local
 }
 

package/package.json

@@ -1,19 +1,24 @@
 {
   "name": "@minar-kotonoha/vite-plugin-miko",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "type": "module",
   "exports": {
     ".": "./index.ts",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "vite": "catalog:"
+    "vite": "^8.1.0"
   },
+  "files": [
+    "index.ts",
+    "types.ts",
+    "template/"
+  ],
   "dependencies": {
-    "@minar-kotonoha/linter": "workspace:^",
-    "@minar-kotonoha/vite-plugin-bootstrap": "workspace:^",
-    "@minar-kotonoha/vite-plugin-external": "workspace:^",
-    "@minar-kotonoha/vite-plugin-index-html": "workspace:^",
+    "@minar-kotonoha/linter": "^0.1.0",
+    "@minar-kotonoha/vite-plugin-bootstrap": "^0.1.1",
+    "@minar-kotonoha/vite-plugin-external": "^0.1.0",
+    "@minar-kotonoha/vite-plugin-index-html": "^0.1.0",
     "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-legacy": "^8.2.2",
     "@vitejs/plugin-vue": "^6.0.8",

package/template/App.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router';
+import { useHead } from '@minar-kotonoha/framework/modules/@unhead/vue.ts';
+import skeletonStyles from './styles/skeleton.less?inline';
+import hiddenVCloakStyles from './styles/hiddenVCloak.less?inline';
+import Fallback from './components/Fallback.vue';
+
+const onResolve = () => {
+  if (!import.meta.env.SSR) {
+    document.getElementById('app')!.removeAttribute('v-cloak');
+  }
+};
+const useSkeleton = useRoute().meta.useSkeleton ?? true;
+const isDev = import.meta.env.DEV;
+
+// 此处在预渲染时完成，故加个判断，客户端代码会剔除这块，减小包体积
+if (import.meta.env.SSR) {
+  // 生产环境 Framework CDN 地址，可通过 VITE_FRAMEWORK_CDN 自定义
+  // 默认使用 unpkg CDN，配合 @minar-kotonoha/framework 发布版本
+  const frameworkCDN = import.meta.env.VITE_FRAMEWORK_CDN
+    || `https://unpkg.com/@minar-kotonoha/framework@${import.meta.env.VITE_LIB_VERSION}/dist/framework_v${import.meta.env.VITE_LIB_VERSION}.umd.js`;
+  const framework = frameworkCDN;
+  useHead({
+    style: useSkeleton ? [skeletonStyles] : [hiddenVCloakStyles],
+    script: [
+      {
+        src: framework,
+        tagPosition: 'bodyClose',
+      },
+    ],
+    link: [
+      {
+        rel: 'preload',
+        href: framework,
+        as: 'script',
+      },
+    ],
+  });
+}
+</script>
+
+<template>
+  <RouterView v-slot="{ Component, route }">
+    <Suspense @resolve="onResolve">
+      <ClientOnly v-if="(console.log(`路由${route.fullPath}使用预渲染：${!route.meta.clientOnly}`), route.meta.clientOnly)">
+        <component :is="Component" />
+      </ClientOnly>
+      <component :is="Component" v-else />
+      <template v-if="isDev" #fallback>
+        <!-- 只有在开发环境才会走fallback -->
+        <Fallback />
+      </template>
+    </Suspense>
+  </RouterView>
+</template>
+<style lang="less">
+body {
+  margin: 0;
+}
+
+[v-cloak] > .loading {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  visibility: visible;
+  transform: translate(-50%, -50%);
+  transition-duration: 0.5s;
+  transition-property: opacity;
+  opacity: 0;
+}
+
+/* 同上：https://unocss.dev/integrations/runtime#preventing-fouc */
+[un-cloak] {
+  display: none;
+}
+</style>

package/template/components/Fallback.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="center">加载中</div>
+</template>
+<script setup lang="ts"></script>
+<style scoped>
+.center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

package/template/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="zh-cmn-Hans">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta
+      content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,viewport-fit=cover"
+      name="viewport"
+    />
+  </head>
+  <body>
+    <div id="app" v-cloak="true" data-allow-mismatch=""></div>
+    <script type="module">import 'virtual:index';</script>
+  </body>
+</html>

package/template/layouts/flexible.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { provide } from 'vue'
+import { useRouter, routerKey } from 'vue-router'
+
+// 显式 provide router 确保嵌套 RouterView 内子组件注入可靠
+provide(routerKey, useRouter())
+</script>
+
+<template>
+  <RouterView />
+</template>

package/template/main.ts

@@ -0,0 +1,38 @@
+import App from './App.vue';
+
+// 多语言会让包体积增加100K，默认关闭
+// import { createI18n } from 'vue-i18n';
+// import messages from '@intlify/unplugin-vue-i18n/messages';
+
+import { ViteSSG } from 'vite-ssg';
+
+import { setupLayouts } from 'virtual:generated-layouts';
+import { routes, handleHotUpdate } from 'vue-router/auto-routes';
+
+import { bootstrap } from 'virtual:bootstrap';
+
+import 'virtual:uno.css';
+
+export const createApp = ViteSSG(
+  // the root component
+  App,
+  // vue-router options
+  { routes: setupLayouts(routes) },
+  // function to have custom setups
+  async ({ app, router }) => {
+    // const i18n = createI18n({
+    //   locale: 'zh-CN',
+    //   messages,
+    // });
+    // app.use(i18n);
+
+    if (import.meta.hot) {
+      handleHotUpdate(router);
+    }
+
+    await bootstrap(app, router);
+  },
+  {
+    hydration: import.meta.env.PROD,
+  },
+);

package/template/styles/hiddenVCloak.less

@@ -0,0 +1,3 @@
+[v-cloak] > * {
+  visibility: hidden;
+}

package/template/styles/skeleton.less

@@ -0,0 +1,49 @@
+[v-cloak],
+.skeleton {
+  pointer-events: none !important;
+
+  // 光柱特效
+  &::before {
+    content: '';
+    position: fixed;
+    width: 25vw;
+    height: 100%;
+    top: 0;
+    left: 0;
+    transform: translateX(-25vw);
+    overflow: hidden;
+    background-image: linear-gradient(
+      to left,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 1) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    animation: shimmer 1.25s linear infinite;
+    z-index: 1000;
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-25vw);
+    }
+    100% {
+      transform: translateX(100vw);
+    }
+  }
+
+  * {
+    white-space: nowrap !important;
+    border-color: transparent !important;
+    color: transparent !important;
+    &::first-line {
+      background-color: #e8e6e850;
+    }
+    &::placeholder {
+      color: transparent !important;
+    }
+  }
+  i,
+  img {
+    visibility: hidden !important;
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@minar-kotonoha/linter/tsconfig.json",
+  "include": ["**/*", "**/*.vue", "../packages/plugins/bootstrap/index.d.ts"],
+  "exclude": ["**/__tests__/*", "e2e/**/*", "**/node_modules/*", "**/dist/*"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": [
+      "vite/client",
+      "vite-plugin-vue-layouts-next/client",
+      "vue-macros/macros-global",
+      "@intlify/unplugin-vue-i18n/messages"
+    ]
+  },
+  "vueCompilerOptions": {
+    "plugins": ["vue-macros/volar"]
+  }
+}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "target": "esnext",
-    "lib": ["esnext", "dom"],
-    "strict": true,
-    "types": ["node", "vite/client"]
-  },
-  "include": ["index.ts", "types.ts"]
-}