feat: add client-side

JohnCampionJr · Apr 24, 2023 · c278c0d · c278c0d
1 parent 0ee2819
commit c278c0d
Show file tree

Hide file tree

Showing 24 changed files with 2,004 additions and 1,020 deletions.
diff --git a/README.md b/README.md
@@ -220,3 +220,26 @@ const setBg = (color) => {
   </main>
 </template>
 ```
+
+## ClientSideLayout
+
+The clientSideLayout uses a simpler [virtual file](https://vitejs.dev/guide/api-plugin.html#importing-a-virtual-file) + [glob import](https://vitejs.dev/guide/features.html#glob-import) scheme, This means that its hmr is faster and more accurate, but also more limited
+
+
+### Usage
+
+```js
+// vite.config.js
+import { ClientSideLayout } from 'vite-plugin-vue-layouts'
+
+export default {
+  plugins: [
+    ClientSideLayout({
+      layoutsDir: 'src/mylayouts', // default to 'src/layout'
+      defaultLayout: 'myDefault.vue', // default to 'default.vue'
+      importMode: 'sync' // The default will automatically detect -> ssg is sync，other is async
+    }),
+  ],
+};
+```
+
diff --git a/examples/client-side/index.html b/examples/client-side/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
diff --git a/examples/client-side/package.json b/examples/client-side/package.json
@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nodemon --watch ../../dist/index.js -x \"cross-env DEBUG=vite-plugin-layouts vite\"",
+    "build": "cross-env DEBUG=vite-plugin-layouts vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.2.31",
+    "vue-router": "4.0.3"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.10.2",
+    "@vue/compiler-sfc": "^3.2.31",
+    "cross-env": "^7.0.3",
+    "nodemon": "^2.0.15",
+    "typescript": "^4.6.2",
+    "vite": "^2.8.6",
+    "vite-plugin-md": "^0.6.7",
+    "vite-plugin-pages": "0.12.1",
+    "vite-plugin-vue-layouts": "workspace:*"
+  }
+}
diff --git a/examples/client-side/src/App.vue b/examples/client-side/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view />
+</template>
diff --git a/examples/client-side/src/index.css b/examples/client-side/src/index.css
diff --git a/examples/client-side/src/layouts/default.vue b/examples/client-side/src/layouts/default.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <div class="w-1/4 m-auto text-center text-gray-300 bg-teal-800">
+      Default Layout
+    </div>
+    <router-view />
+  </main>
+</template>
diff --git a/examples/client-side/src/layouts/second.vue b/examples/client-side/src/layouts/second.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <div class="w-1/4 m-auto text-center text-gray-300 bg-teal-800">
+      Second Layout
+    </div>
+    <router-view />
+  </main>
+</template>
diff --git a/examples/client-side/src/layouts/sub/layoutsub.vue b/examples/client-side/src/layouts/sub/layoutsub.vue
@@ -0,0 +1,8 @@
+<template>
+  <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
+    <div class="w-1/4 m-auto text-center text-gray-300 bg-teal-800">
+      Layout Sub Folder
+    </div>
+    <router-view />
+  </main>
+</template>
diff --git a/examples/client-side/src/main.ts b/examples/client-side/src/main.ts
@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import { setupLayouts } from 'virtual:generated-layouts'
+import generatedRoutes from 'virtual:generated-pages'
+import App from './App.vue'
+import './index.css'
+
+const routes = setupLayouts(generatedRoutes)
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+const app = createApp(App)
+
+app.use(router)
+
+app.mount('#app')
diff --git a/examples/client-side/src/pages/about/index.vue b/examples/client-side/src/pages/about/index.vue
@@ -0,0 +1,6 @@
+<template>
+  <p>/about/index.vue</p>
+  <router-link to="/about/who/me">
+    me
+  </router-link>
+</template>
diff --git a/examples/client-side/src/pages/about/who/me.vue b/examples/client-side/src/pages/about/who/me.vue
@@ -0,0 +1,12 @@
+<template>
+  <p>meeeeee</p>
+</template>
+
+<route>
+{
+  name: "who-me-override",
+  meta: {
+    requiresAuth: false
+  }
+}
+</route>
diff --git a/examples/client-side/src/pages/index.vue b/examples/client-side/src/pages/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <p>index.vue</p>
+      <router-link to="/about">
+        about
+      </router-link>
+    <p>
+      <router-link to="/news">
+        news
+      </router-link> | 
+      <router-link :to="{ name: 'named-news-page' }">
+        today's news
+      </router-link>
+    </p>
+    <p>
+      <router-link to="/sublayout">
+        sub layout
+      </router-link>
+    </p>
+    <p>
+      <router-link to="/nolayout">
+        no layout
+      </router-link>
+    </p>
+  </div>
+</template>
+
+<route>
+{
+  name: "name-override",
+  meta: {requiresAuth: false}
+}
+</route>
diff --git a/examples/client-side/src/pages/news.vue b/examples/client-side/src/pages/news.vue
@@ -0,0 +1,11 @@
+<template>
+  <router-view />
+</template>
+
+<route>
+{
+  meta: {
+    layout: "second"
+  }
+}
+</route>
diff --git a/examples/client-side/src/pages/news/Today.vue b/examples/client-side/src/pages/news/Today.vue
@@ -0,0 +1,8 @@
+<template>
+  <p>/news/today.vue</p>
+</template>
+<route>
+{
+  name: 'named-news-page'
+}
+</route>
diff --git a/examples/client-side/src/pages/news/index.vue b/examples/client-side/src/pages/news/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <p>/news/index.vue</p>
+</template>
diff --git a/examples/client-side/src/pages/nolayout.vue b/examples/client-side/src/pages/nolayout.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>nolayout</p>
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: false
+</route>
diff --git a/examples/client-side/src/pages/sublayout.vue b/examples/client-side/src/pages/sublayout.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <p>sublayout</p>
+  </div>
+</template>
+
+<route>
+{meta: {
+  layout: "sub/layoutsub"
+}
+}
+</route>
diff --git a/examples/client-side/src/shims-vue.d.ts b/examples/client-side/src/shims-vue.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/client-side/vite.config.ts b/examples/client-side/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
+import Pages from 'vite-plugin-pages'
+import Markdown from 'vite-plugin-md'
+import { ClientSideLayout } from 'vite-plugin-vue-layouts'
+
+const config = defineConfig({
+  plugins: [
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+    }),
+    Pages({
+      extensions: ['vue', 'md'],
+      syncIndex: false,
+    }),
+    ClientSideLayout(),
+    Markdown(),
+  ],
+})
+
+export default config
diff --git a/package.json b/package.json
@@ -42,9 +42,9 @@
     "example:serve-ssg": "npm -C examples/ssg run serve"
   },
   "dependencies": {
-    "@vue/compiler-sfc": "^3.2.31",
     "debug": "^4.3.3",
-    "fast-glob": "^3.2.11"
+    "fast-glob": "^3.2.11",
+    "local-pkg": "^0.4.3"
   },
   "peerDependencies": {
     "vite": "^2.5.0 || ^3.0.0-0 || ^4.0.0",
@@ -56,6 +56,7 @@
     "@types/debug": "^4.1.7",
     "@types/node": "^16.11.26",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "cross-env": "^7.0.3",
     "eslint": "^7.32.0",
     "rollup": "^2.68.0",
     "tsup": "^4.14.0",