make the vue playground buildable for Vercel

2020-09-18 23:14:49 +02:00
parent 62243344e3
commit 110a01790b
12 changed files with 153 additions and 18 deletions
@@ -7,8 +7,8 @@
    <title>Headless UI - Playground</title>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
  </head>
-  <body class="w-full h-full antialiased text-gray-900 font-sans">
-    <div class="h-full w-full" id="app"></div>
-    <script type="module" src="/examples/src/main.js"></script>
+  <body class="w-full h-full font-sans antialiased text-gray-900">
+    <div class="w-full h-full" id="app"></div>
+    <script type="module" src="./src/main.js"></script>
  </body>
 </html>
@@ -3,17 +3,16 @@
    <header
      class="relative z-10 flex items-center justify-between flex-shrink-0 px-4 py-4 bg-white border-b border-gray-200 sm:px-6 lg:px-8"
    >
-      <a href="/">
+      <router-link to="/">
        <img
          class="w-auto h-6"
          src="https://tailwindui.com/img/tailwindui-logo.svg"
          alt="Tailwind UI"
        />
-      </a>
+      </router-link>
    </header>
    <main class="flex-1 overflow-auto bg-gray-50">
-      <MenuWithPopper />
-      <!-- <MenuWithTailwind /> -->
+      <router-view />
      <KeyCaster />
    </main>
  </div>
@@ -21,14 +20,10 @@

 <script>
 import KeyCaster from './KeyCaster.vue'
-import MenuWithPopper from './components/menu-with-popper.vue'
-import MenuWithTailwind from './components/menu-with-tailwind.vue'

 export default {
  name: 'App',
  components: {
-    MenuWithPopper,
-    MenuWithTailwind,
    KeyCaster,
  },
 }
@@ -0,0 +1,44 @@
+<template>
+  <div className="container my-24">
+    <div className="prose">
+      <h2>Examples</h2>
+      <Examples :examples="examples" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, h } from 'vue'
+import { RouterLink } from 'vue-router'
+import routes from '../routes.json'
+
+const Examples = defineComponent({
+  props: ['examples'],
+  setup(props) {
+    return () => {
+      return h(
+        'ul',
+        props.examples.map(example =>
+          h(
+            'li',
+            { key: example.path },
+            example.children
+              ? h('h3', { class: 'text-xl' }, example.name)
+              : [h(RouterLink, { to: example.path }, () => example.name)],
+            example.children && h(Examples, { examples: example.children })
+          )
+        )
+      )
+    }
+  },
+})
+
+export default {
+  components: { Examples },
+  setup() {
+    return {
+      examples: routes,
+    }
+  },
+}
+</script>
@@ -1,6 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'

 import 'tailwindcss/tailwind.css'

-createApp(App).mount('#app')
+createApp(App)
+  .use(router)
+  .mount('#app')
@@ -0,0 +1,49 @@
+import { createWebHistory, createRouter, RouterView } from 'vue-router'
+
+// import routes from './routes.json'
+
+// TODO: build this using the routes - so that it works. Currently the vite build tool doesn't know
+// what components to include because the budilRoutes() function uses dynamic imports.
+const builtRoutes = [
+  {
+    path: '/',
+    component: () => import('./components/Home.vue'),
+  },
+  {
+    name: 'Menu',
+    path: '/menu',
+    component: RouterView,
+    children: [
+      {
+        name: 'Menu with Popper',
+        path: '/menu/menu-with-popper',
+        component: () => import('./components/menu/menu-with-popper.vue'),
+      },
+      {
+        name: 'Menu with Tailwind',
+        path: '/menu/menu-with-tailwind',
+        component: () => import('./components/menu/menu-with-tailwind.vue'),
+      },
+    ],
+  },
+]
+
+// function buildRoutes(routes) {
+//   return routes.map(route => {
+//     const definition = {
+//       path: route.path,
+//       component: route.component ? () => import(route.component) : RouterView,
+//     }
+
+//     if (route.children) {
+//       definition.children = buildRoutes(route.children)
+//     }
+
+//     return definition
+//   })
+// }
+
+export default createRouter({
+  history: createWebHistory(),
+  routes: builtRoutes, // buildRoutes(routes),
+})
@@ -0,0 +1,22 @@
+[
+  {
+    "path": "/",
+    "component": "./components/Home.vue"
+  },
+  {
+    "name": "Menu",
+    "path": "/menu",
+    "children": [
+      {
+        "name": "Menu with Popper",
+        "path": "/menu/menu-with-popper",
+        "component": "./components/menu/menu-with-popper.vue"
+      },
+      {
+        "name": "Menu with Tailwind",
+        "path": "/menu/menu-with-tailwind",
+        "component": "./components/menu/menu-with-tailwind.vue"
+      }
+    ]
+  }
+]
@@ -20,7 +20,8 @@
    "access": "public"
  },
  "scripts": {
-    "playground": "vite",
+    "playground": "vite serve examples",
+    "playground:build": "vite build examples",
    "build": "../../scripts/build.sh",
    "test": "../../scripts/test.sh",
    "lint": "../../scripts/lint.sh"
@@ -40,6 +41,7 @@
    "tailwindcss": "^1.8.10",
    "tsdx": "^0.13.3",
    "vite": "^1.0.0-rc.4",
-    "vue": "^3.0.0-rc.13"
+    "vue": "^3.0.0-rc.13",
+    "vue-router": "^4.0.0-beta.10"
  }
 }
@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}
@@ -1,3 +1,12 @@
+const path = require('path')
+const routes = require('./examples/src/routes')
+
+function flattenPaths(routes) {
+  return routes
+    .map(route => (route.children ? flattenPaths(route.children) : route.path))
+    .flat(Infinity)
+}
+
 const TailwindUIPlugin = ({
  root, // project root directory, absolute path
  app, // Koa app instance
@@ -5,11 +14,11 @@ const TailwindUIPlugin = ({
  watcher, // chokidar file watcher instance
  resolver, // chokidar file watcher instance
 }) => {
+  const routePaths = flattenPaths(routes)
+
  app.use(async (ctx, next) => {
-    if (ctx.path === '/') ctx.path = '/examples'
-    if (ctx.path.endsWith('@headlessui/vue')) {
-      ctx.type = 'ts'
-      ctx.path = '/src/index.ts'
+    if (routePaths.includes(ctx.path)) {
+      ctx.path = './index.html'
    }

    await next()
@@ -17,5 +26,8 @@ const TailwindUIPlugin = ({
 }

 module.exports = {
+  alias: {
+    '@headlessui/vue': path.resolve(__dirname, './src/index.ts'),
+  },
  configureServer: [TailwindUIPlugin],
 }
@@ -11052,6 +11052,11 @@ vue-router@^3.0:
  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa"
  integrity sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A==

+vue-router@^4.0.0-beta.10:
+  version "4.0.0-beta.10"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.0-beta.10.tgz#45f9e6fee6fcc7094b696e90c2c9f76c3aaf40ed"
+  integrity sha512-y3YxV8rO9e4mgFqdyskytRMLzwbxR65ZaAW59xZL+T3M3kHX5p+/XB6j7K5cVm/EgZFOLRb+Zht3ShVaEonn/A==
+
 vue@^2.6.10:
  version "2.6.12"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"