Refactor to Vite 4, Vitest, vue-tsc, vitepress 1.0 (#385)

.eslintrc.js → .eslintrc.cjs

@@ -3,9 +3,17 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ['plugin:vue/vue3-essential', '@vue/prettier', '@vue/typescript'],
+  extends: ['@linusborg/eslint-config'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
   },
+  overrides: [
+    {
+      files: ['*.cjs', '*.js', '*.mjs', '*.cts', '*.ts', '*.mts'],
+      env: {
+        node: true,
+      },
+    },
+  ],
 }

.github/workflows/ci.yml

@@ -0,0 +1,69 @@
+name: 'ci'
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  contents: read # to fetch code (actions/checkout)
+
+jobs:
+  build-and-typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node version to 14.19
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14.19
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Run Vite build & vue-tsc
+        run: pnpm run build
+
+  unit-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node version to 14.19
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14.19
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Run unit tests
+        run: pnpm run test
+
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node version to 14.19
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14.19
+          cache: 'pnpm'
+
+      - run: pnpm install
+
+      - name: Lint codebase
+        run: pnpm run lint

.gitignore

@@ -30,4 +30,6 @@ TODO.md
 
 *_OLD.ts
 *_OLD.d.ts
-*_OLD.tsx
+*_OLD.tsx
+
+*.tsbuildinfo

.release-it.json

@@ -0,0 +1,13 @@
+{
+  "git": {
+    "commitMessage": "chore: release v${version}"
+  },
+  "github": {
+    "release": true
+  },
+  "hooks": {
+    "before:init": ["pnpm lint", "pnpm test"],
+    "after:bump": ["pnpm build"],
+    "after:release": ["echo 🥳 Successfully released ${name} v${version}."]
+  }
+}

README.md

@@ -15,7 +15,7 @@
 
 For more detailed documentation and additional Information, [please visit the docs](https://next.portal-vue.linusb.org).
 
-> Looking for the version for Vue 2.\*? [Docs for version 1 are here](https://v2.portal-vue.linusb.org)
+> Looking for the version for Vue 2.\*? [Docs for PortalVue 2.*, compatible with Vue 2, are here](https://v2.portal-vue.linusb.org)
 
 ## Installation
 

docs/.vitepress/components/Hero.vue

@@ -44,7 +44,7 @@
     <h1 class="h1">
       PortalVue 
       <Badge>
-        {{ $site.customData.version }}
+        {{ version }}
       </Badge>
     </h1>
     <p style="text-align: center">
@@ -59,11 +59,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Hero',
-})
+export default { name: 'Hero' }
+</script>
+<script lang="ts" setup>
+const version = __PORTAL_VUE_VERSION__
 </script>
 
 <style scoped lang="postcss">

docs/.vitepress/config.js

@@ -1,21 +1,30 @@
+const { defineConfig } = require('vitepress')
 const { version } = require('../../package.json')
-module.exports = {
+
+module.exports = defineConfig({
   title: 'Portal-Vue',
-  customData: {
-    version,
-  },
   description:
     'A set of Vue 3 components to move your content anywhere in the DOM.',
+
   themeConfig: {
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.co/linusborg/portal-vue',
+      },
+    ],
+    siteTitle: 'Portal-Vue',
     repo: 'linusborg/portal-vue',
     repoLabel: 'GitHub',
-    docsDir: 'docs',
-    docsBranch: 'next',
-    editLinks: true,
-    editLinkText: 'Help improve these docs!',
-    lastUpdated: 'Last Updated',
+
+    outline: 'deep',
+    outlineTitle: 'On this page',
+    editLink: {
+      pattern: 'https://github.com/linusborg/portal-vue/edit/docs/:path',
+      text: 'Edit this page on GitHub',
+    },
+    lastUpdatedText: 'Last Updated',
     nav: [
-      { text: 'Installation', link: '/guide/installation' },
       {
         text: 'Guide',
         link: '/guide/getting-started',
@@ -32,14 +41,20 @@ module.exports = {
       },
     ],
     sidebar: {
-      '/guide/': getGuideSidebar(),
-      '/api/': getApiSidebar(),
+      '/guide/': [{ text: 'Guide', items: getGuideSidebar() }],
+      '/api/': [{ text: 'API', items: getApiSidebar() }],
     },
   },
-}
+  vite: {
+    define: {
+      __PORTAL_VUE_VERSION__: JSON.stringify(version),
+    },
+  },
+})
 
 function getGuideSidebar() {
   return [
+    { text: 'Installation', link: '/guide/installation' },
     { text: 'Getting Started', link: '/guide/getting-started' },
     { text: 'Advanced Usage', link: '/guide/advanced' },
     { text: 'Caveats', link: '/guide/caveats' },

docs/.vitepress/env.d.ts

@@ -0,0 +1 @@
+declare const __PORTAL_VUE_VERSION__: string

docs/.vitepress/theme/index.js

@@ -1,10 +1,10 @@
 // import plugin from 'portal-vue'
-import DefaultTheme from 'vitepress/dist/client/theme-default'
+import DefaultTheme from 'vitepress/theme'
 import components from '../components'
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
-    // app.use(plugin)
-    app.use(components)
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    ctx.app.use(components)
   },
 }

docs/guide/SSR.md

@@ -2,7 +2,7 @@
 
 When using [Vue's SSR capabilities](https://ssr.vuejs.org), portal-vue can't work reliably for a couple of reasons:
 
-1. The internal Store (the [Wormhole](../api/wormhole.md)) that's caching vnodes and connecting `<portal>` components to their `<portal-target>` counterparts, is a singleton. As such, changes to the Wormhole persist between requests, leading to all sorts of problems.
+1. The internal Store (the "Wormhole") that's caching vnodes and connecting `<portal>` components to their `<portal-target>` counterparts, is a singleton. As such, changes to the Wormhole persist between requests, leading to all sorts of problems.
 2. In SSR, Vue renders the page directly to a string, there are not reactive updates applied. Consequently, a `<portal-target>` appearing before a `<portal>` will render an empty div on the server whereas it will render the sent content on the client, resulting in a hydration vdom mismatch error, while a `<portal-target>` _following_ a `<portal>` would technically work.
 
 ## Solutions

docs/guide/caveats.md

@@ -41,4 +41,4 @@ this.$nextTick().then(
 )
 ```
 
-The reason is that depending on the scenario, it _can_ take one tick for the content to be sent to the [Wormhole](../api/wormhole.md) (the middleman between `Portal` and `PortalTarget`), and another one to be picked up by the `PortalTarget`.
+The reason is that depending on the scenario, it _can_ take one tick for the content to be sent to the Wormhole (the middleman between `Portal` and `PortalTarget`), and another one to be picked up by the `PortalTarget`.

docs/guide/migration.md

@@ -48,15 +48,15 @@ The bread-and-butter use case should be fairly easy to migrate, as the `Portal`
 Notable breaking changes that do need some revamping affect two use cases:
 
 1. Transitions defined on the `PortalTarget` side
-2. Removal of `MountingPortal`, which is now better solved with `Teleport`, save for one edge case (`multiple` prop) for which we will cover a migration path futher down.
+2. Removal of `MountingPortal`, which is now better solved with `Teleport`, save for one edge case (`multiple` prop) for which we will cover a migration path further down.
 
 ## List of Changes
 
 ### Installation
 
 As the global API of creating a Vue app and registering Plugins changed a bit, you also need to adapt your Plugin installation a bit.
 
-See the chapter on [Installation](./guide/installation.md) for further instructions.
+See the chapter on [Installation](./installation.md) for further instructions.
 ### Portal Component
 
 #### `slim` prop removed
@@ -107,11 +107,11 @@ You can now pass an additional named slot to `PortalTarget` that can be used  to
 </portal-target>
 ```
 
-See: [PortalTarget API: Wrapper slot](./api/portal-target.md/#wrapper)
+See: [PortalTarget API: Wrapper slot](../api/portal-target.md#wrapper)
 
 #### `transition`, `transition-events` props removed.
 
-Instead of these props, you can now use the new `v-slot:wrapper` to wrap content in `<transition>` or `<transition-group>` components. [See the docs for more info here](./guide/advanced.md#portaltarget-transitions)
+Instead of these props, you can now use the new `v-slot:wrapper` to wrap content in `<transition>` or `<transition-group>` components. [See the docs for more info here](./advanced.md#portaltarget-transitions)
 
 ### Removed: MountingPortal
 
@@ -152,7 +152,7 @@ The wormhole is the connecting "store" between the `Portal` and `PortalTarget` c
 
 PortalVue 3 still provides a default instance to all components in an app when installing the plugin, but now you can optionally create your own instance and use that instead of the default one.
 
-[Read more here](./guide/installation.md#custom-wormhole-instance)
+[Read more here](./installation.md#custom-wormhole-instance)
 
 
 ### Testing

docs/index.md

@@ -1,5 +1,6 @@
 ---
 sidebar: false
+outline: false
 ---
 
 <Hero />

example/components/App.vue

@@ -25,9 +25,7 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-@import '../styles/variables';
-
+<style lang="postcss">
 .main-container {
   display: flex;
   height: 100vh;
@@ -36,7 +34,7 @@ export default defineComponent({
 .sidebar {
   padding: 10px;
   flex: 0 0 300px;
-  border-right: 3px solid $vueColor;
+  border-right: 3px solid var(--vue-color);
 }
 
 .viewport {