diff --git a/packages/@headlessui-vue/examples/index.html b/packages/@headlessui-vue/examples/index.html index 39fdaab..e920593 100644 --- a/packages/@headlessui-vue/examples/index.html +++ b/packages/@headlessui-vue/examples/index.html @@ -7,8 +7,8 @@ Headless UI - Playground - -
- + +
+ diff --git a/packages/@headlessui-vue/examples/src/App.vue b/packages/@headlessui-vue/examples/src/App.vue index d95c331..34a3dd1 100644 --- a/packages/@headlessui-vue/examples/src/App.vue +++ b/packages/@headlessui-vue/examples/src/App.vue @@ -3,17 +3,16 @@
- + Tailwind UI - +
- - +
@@ -21,14 +20,10 @@ diff --git a/packages/@headlessui-vue/examples/src/components/menu-with-popper.vue b/packages/@headlessui-vue/examples/src/components/menu/menu-with-popper.vue similarity index 100% rename from packages/@headlessui-vue/examples/src/components/menu-with-popper.vue rename to packages/@headlessui-vue/examples/src/components/menu/menu-with-popper.vue diff --git a/packages/@headlessui-vue/examples/src/components/menu-with-tailwind.vue b/packages/@headlessui-vue/examples/src/components/menu/menu-with-tailwind.vue similarity index 100% rename from packages/@headlessui-vue/examples/src/components/menu-with-tailwind.vue rename to packages/@headlessui-vue/examples/src/components/menu/menu-with-tailwind.vue diff --git a/packages/@headlessui-vue/examples/src/main.js b/packages/@headlessui-vue/examples/src/main.js index 07a0076..d2785f5 100644 --- a/packages/@headlessui-vue/examples/src/main.js +++ b/packages/@headlessui-vue/examples/src/main.js @@ -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') diff --git a/packages/@headlessui-vue/examples/src/router.js b/packages/@headlessui-vue/examples/src/router.js new file mode 100644 index 0000000..f7bfbdd --- /dev/null +++ b/packages/@headlessui-vue/examples/src/router.js @@ -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), +}) diff --git a/packages/@headlessui-vue/examples/src/routes.json b/packages/@headlessui-vue/examples/src/routes.json new file mode 100644 index 0000000..844cfc1 --- /dev/null +++ b/packages/@headlessui-vue/examples/src/routes.json @@ -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" + } + ] + } +] diff --git a/packages/@headlessui-vue/package.json b/packages/@headlessui-vue/package.json index 2e448cc..3475df8 100644 --- a/packages/@headlessui-vue/package.json +++ b/packages/@headlessui-vue/package.json @@ -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" } } diff --git a/packages/@headlessui-vue/vercel.json b/packages/@headlessui-vue/vercel.json new file mode 100644 index 0000000..0f32683 --- /dev/null +++ b/packages/@headlessui-vue/vercel.json @@ -0,0 +1,3 @@ +{ + "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] +} diff --git a/packages/@headlessui-vue/vite.config.js b/packages/@headlessui-vue/vite.config.js index d414f6d..69ac456 100644 --- a/packages/@headlessui-vue/vite.config.js +++ b/packages/@headlessui-vue/vite.config.js @@ -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], } diff --git a/yarn.lock b/yarn.lock index 40d6bc3..003edb4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"