feat: added getNextPath

slipmatio · Jan 5, 2024 · af54dc6 · af54dc6
1 parent c58d5ee
commit af54dc6
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 16 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.0 (2024-01-05)
+
+- Feat: added `getNextPath`
+- Refactor: refactored internals
+- Chore: bumped deps.
+
 ## 0.1.2 (2023-07-17)
 
 - CI: create tags and releases on publish.

diff --git a/README.md b/README.md
@@ -5,12 +5,17 @@
 General utilities for Web development
 
 ## Features
+
 ### Browser
 
 - `copyToClipboard(content: string): boolean`
 - `getCookie(name: string): string | null`
 - `storageAvailable(type: 'localStorage' | 'sessionStorage'): boolean`
 
+### Vue
+
+- `getNextPath(): string` - returns the value of `?next` query param or `/`
+
 ## Installation
 
 `pnpm add @slipmatio/toolbelt`

diff --git a/index.html b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Slipmat Toolbelt DEV</title>
-  </head>
-  <body class="bg-slate-950">
-    <div id="app"></div>
-    <script type="module" src="/src/dev.ts"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Slipmat Toolbelt DEV</title>
+</head>
+
+<body class="bg-slate-950">
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>
diff --git a/src/dev.ts b/src/dev.ts
diff --git a/src/index.ts b/src/index.ts
@@ -1 +1,2 @@
 export { storageAvailable, getCookie, copyToClipboard } from './browser'
+export { getNextPath } from './routes'
diff --git a/src/main.ts b/src/main.ts
@@ -0,0 +1,20 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createRouter, createWebHistory } from 'vue-router'
+
+import BrowserPage from './pages/BrowserPage.vue'
+import VuePage from './pages/VuePage.vue'
+
+const routes = [
+  { path: '/', component: BrowserPage },
+  { path: '/vue/', component: VuePage },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
diff --git a/src/Dev.vue → src/pages/BrowserPage.vue b/src/Dev.vue → src/pages/BrowserPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { copyToClipboard, getCookie, storageAvailable } from './browser'
+import { copyToClipboard, getCookie, storageAvailable } from '../browser'
 
 const clipboardText = 'clipboard works'
 

diff --git a/src/pages/VuePage.vue b/src/pages/VuePage.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { getNextPath } from '../routes'
+
+const nextPath = getNextPath()
+console.log(`nextPath: ${nextPath}`)
+</script>
+<template></template>
diff --git a/src/routes.ts b/src/routes.ts
@@ -0,0 +1,20 @@
+import { useRoute } from 'vue-router'
+import { isString } from './type-helpers'
+
+/**
+ * Helper for figuring our ?next= query param in a safe way.
+ */
+export function getNextPath(): string {
+  const route = useRoute()
+
+  let next = '/'
+  if (
+    route.query &&
+    route.query.next &&
+    isString(route.query.next) &&
+    route.query.next.startsWith('/')
+  ) {
+    next = route.query.next as string
+  }
+  return next
+}
diff --git a/src/type-helpers.ts b/src/type-helpers.ts
@@ -0,0 +1,5 @@
+import type { LocationQueryValue } from 'vue-router'
+
+export function isString(value: string | LocationQueryValue[]): value is string {
+  return typeof value === 'string'
+}
diff --git a/tests/e2e/vue.spec.ts b/tests/e2e/vue.spec.ts
@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test'
+
+test('getNextPath with no querypath should return "/"', async ({ page }) => {
+  page.on('console', (msg) => {
+    const text = msg.text()
+    if (!text.startsWith('[vite]')) {
+      expect(text).toBe('nextPath: /')
+    }
+  })
+
+  await page.goto('/vue/')
+})
+
+test('getNextPath with next=foo should return "/"', async ({ page }) => {
+  page.on('console', (msg) => {
+    const text = msg.text()
+    if (!text.startsWith('[vite]')) {
+      expect(text).toBe('nextPath: /')
+    }
+  })
+
+  await page.goto('/vue/?next=foo')
+})
+
+test('getNextPath with next=http://foo.bar should return "/"', async ({ page }) => {
+  page.on('console', (msg) => {
+    const text = msg.text()
+    if (!text.startsWith('[vite]')) {
+      expect(text).toBe('nextPath: /')
+    }
+  })
+
+  await page.goto('/vue/?next=http://foo.bar')
+})
+
+test('getNextPath with next=/next-url/ should return "/next-url/"', async ({ page }) => {
+  page.on('console', (msg) => {
+    const text = msg.text()
+    if (!text.startsWith('[vite]')) {
+      expect(text).toBe('nextPath: /next-url/')
+    }
+  })
+
+  await page.goto('/vue/?next=/next-url/')
+})