reactive-route 0.0.1-alpha.26 → 0.0.1-alpha.28

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Dmitry
+Copyright (c) 2025-present Dmitry
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/cjs/adapters/vue/index.js

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/adapters/vue.ts
+var vue_exports = {};
+__export(vue_exports, {
+  adapters: () => adapters
+});
+module.exports = __toCommonJS(vue_exports);
+var import_vue = require("vue");
+var adapters = {
+  batch: (cb) => cb(),
+  autorun: import_vue.watchEffect,
+  replaceObject: (obj, newObj) => {
+    for (const variableKey in obj) {
+      if (obj.hasOwnProperty(variableKey)) {
+        delete obj[variableKey];
+      }
+    }
+    Object.assign(obj, newObj);
+  },
+  makeObservable: import_vue.reactive
+};

package/dist/cjs/adapters/vue/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/dist/cjs/vue/package.json

@@ -0,0 +1 @@
+{"type": "commonjs"}

package/dist/esm/adapters/vue/index.js

@@ -0,0 +1,18 @@
+// packages/adapters/vue.ts
+import { reactive, watchEffect } from "vue";
+var adapters = {
+  batch: (cb) => cb(),
+  autorun: watchEffect,
+  replaceObject: (obj, newObj) => {
+    for (const variableKey in obj) {
+      if (obj.hasOwnProperty(variableKey)) {
+        delete obj[variableKey];
+      }
+    }
+    Object.assign(obj, newObj);
+  },
+  makeObservable: reactive
+};
+export {
+  adapters
+};

package/dist/esm/adapters/vue/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/dist/esm/vue/package.json

@@ -0,0 +1 @@
+{"type": "module"}

package/dist/tsconfig.types.react.tsbuildinfo

@@ -1 +1 @@
-{"root":["../packages/declarations.d.ts","../packages/adapters/kr-observable-preact.ts","../packages/adapters/kr-observable-react.ts","../packages/adapters/kr-observable-solid.ts","../packages/adapters/mobx-preact.ts","../packages/adapters/mobx-react.ts","../packages/adapters/mobx-solid.ts","../packages/adapters/solid.ts","../packages/adapters/vue.ts","../packages/core/createRouter.ts","../packages/core/createRoutes.ts","../packages/core/index.ts","../packages/core/types/TypeAdapters.ts","../packages/core/types/TypeCurrentRoute.ts","../packages/core/types/TypeLifecycleConfig.ts","../packages/core/types/TypePropsRouter.ts","../packages/core/types/TypeRedirectParams.ts","../packages/core/types/TypeRoute.ts","../packages/core/types/TypeRouteRaw.ts","../packages/core/types/TypeRouter.ts","../packages/core/types/TypeValidator.ts","../packages/core/utils/PreventError.ts","../packages/core/utils/RedirectError.ts","../packages/core/utils/addNames.ts","../packages/core/utils/constants.ts","../packages/core/utils/dynamic.ts","../packages/core/utils/findRouteByPathname.ts","../packages/core/utils/getDynamicValues.ts","../packages/core/utils/getInitialRoute.ts","../packages/core/utils/getQueryValues.ts","../packages/core/utils/getTypedEntries.ts","../packages/core/utils/history.ts","../packages/core/utils/loadComponentToConfig.ts","../packages/core/utils/queryString.ts","../packages/core/utils/replaceDynamicValues.ts","../packages/preact/Router.tsx","../packages/preact/index.ts","../packages/react/Router.tsx","../packages/react/index.ts","../packages/vue/Router.ts","../packages/vue/index.ts"],"version":"5.9.2"}
+{"root":["../packages/declarations.d.ts","../packages/adapters/kr-observable-preact.ts","../packages/adapters/kr-observable-react.ts","../packages/adapters/kr-observable-solid.ts","../packages/adapters/mobx-preact.ts","../packages/adapters/mobx-react.ts","../packages/adapters/mobx-solid.ts","../packages/adapters/solid.ts","../packages/adapters/vue.ts","../packages/core/createRouter.ts","../packages/core/createRoutes.ts","../packages/core/index.ts","../packages/core/types/TypeAdapters.ts","../packages/core/types/TypeCurrentRoute.ts","../packages/core/types/TypeLifecycleConfig.ts","../packages/core/types/TypePropsRouter.ts","../packages/core/types/TypeRedirectParams.ts","../packages/core/types/TypeRoute.ts","../packages/core/types/TypeRouteRaw.ts","../packages/core/types/TypeRouter.ts","../packages/core/types/TypeValidator.ts","../packages/core/utils/PreventError.ts","../packages/core/utils/RedirectError.ts","../packages/core/utils/addNames.ts","../packages/core/utils/constants.ts","../packages/core/utils/dynamic.ts","../packages/core/utils/findRouteByPathname.ts","../packages/core/utils/getDynamicValues.ts","../packages/core/utils/getInitialRoute.ts","../packages/core/utils/getQueryValues.ts","../packages/core/utils/getTypedEntries.ts","../packages/core/utils/history.ts","../packages/core/utils/loadComponentToConfig.ts","../packages/core/utils/queryString.ts","../packages/core/utils/replaceDynamicValues.ts","../packages/preact/Router.tsx","../packages/preact/index.ts","../packages/react/Router.tsx","../packages/react/index.ts","../packages/vue/index.ts"],"version":"5.9.2"}

package/dist/vue/index.d.ts

@@ -1,2 +1,2 @@
-export { Router } from './Router';
+export { default as Router } from './Router.vue';
 //# sourceMappingURL=index.d.ts.map

package/dist/vue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,cAAc,CAAC"}

package/e2e/app.test.ts

@@ -0,0 +1,130 @@
+import { expect, test } from '@playwright/test';
+
+const h1 = 'h1';
+
+test.describe('App routing E2E', () => {
+  test('home redirects to /static', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('/static');
+
+    await expect(page.locator(h1)).toHaveText('Static Page');
+  });
+
+  test('redirect from /static to /page/example works', async ({ page }) => {
+    await page.goto('/static');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('/static');
+
+    await expect(page.locator(h1)).toHaveText('Static Page');
+
+    await page.getByText('Go to Dynamic Page').click();
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('/page/example');
+
+    await expect(page.locator(h1)).toHaveText('Dynamic Page');
+  });
+
+  test('dynamic route with valid param renders and shows params', async ({ page }) => {
+    await page.goto('/page/example');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('/page/example');
+
+    const preLocator = page.locator('.dynamic-page pre').nth(1);
+
+    await expect(page.locator(h1)).toHaveText('Dynamic Page');
+    await expect(preLocator).toContainText('"foo": "example"');
+
+    await page.getByText('Go to random dynamic value').click();
+
+    const randomFoo = ((await preLocator.textContent()) || '').match(/foo": "(\d+)"/)?.[1];
+
+    await expect(preLocator).toContainText(`"foo": "${randomFoo}"`);
+    await expect(page).toHaveURL(`/page/${randomFoo}`);
+  });
+
+  test('redirect from /static to /query works', async ({ page }) => {
+    await page.goto('/static');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('/static');
+
+    await expect(page.locator(h1)).toHaveText('Static Page');
+
+    await page.getByText('Go to Query Page').click();
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('/query?foo=example');
+
+    await expect(page.locator(h1)).toHaveText('Query Page');
+  });
+
+  test('query route shows params', async ({ page }) => {
+    await page.goto('/query?foo=1');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('/query');
+
+    const preLocator = page.locator('.query-page pre').nth(1);
+
+    await expect(page.locator(h1)).toHaveText('Query Page');
+    await expect(preLocator).toContainText('{}');
+
+    await page.getByText('Go to random query value').click();
+
+    const randomFoo = ((await preLocator.textContent()) || '').match(/foo": "(\d+)"/)?.[1];
+
+    await expect(preLocator).toContainText(`"foo": "${randomFoo}"`);
+    await expect(page).toHaveURL(`/query?foo=${randomFoo}`);
+
+    await page.goto('/query?foo=bar');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveURL('/query?foo=bar');
+  });
+
+  test('invalid routes redirect to 404', async ({ page }) => {
+    await page.goto('/page/ab');
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.locator('.error-code')).toHaveText('404');
+    await expect(page.locator(h1)).toHaveText('Page Not Found');
+    await expect(page).toHaveURL('/error404');
+
+    await page.goto('/ab');
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.locator('.error-code')).toHaveText('404');
+    await expect(page.locator(h1)).toHaveText('Page Not Found');
+    await expect(page).toHaveURL('/error404');
+  });
+
+  test('prevent: coming from Dynamic to Prevent redirects to Static (beforeEnter)', async ({
+    page,
+  }) => {
+    await page.goto('/page/example');
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.locator(h1)).toHaveText('Dynamic Page');
+
+    await page
+      .getByRole('button', { name: 'Go to Prevent Page (will redirect to Static)' })
+      .click();
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.locator(h1)).toHaveText('Static Page');
+    await expect(page).toHaveURL('/static');
+  });
+
+  test('prevent: from Prevent trying to go to Query is blocked (beforeLeave) and URL remains the same', async ({
+    page,
+  }) => {
+    await page.goto('/prevent');
+    await page.waitForLoadState('networkidle');
+
+    await expect(page.locator(h1)).toHaveText('Prevent Redirect Page');
+
+    await page.getByRole('button', { name: 'Try to go to Query Page (will be blocked)' }).click();
+
+    await page.waitForTimeout(100);
+
+    await expect(page.locator(h1)).toHaveText('Prevent Redirect Page');
+    await expect(page).toHaveURL('/prevent');
+  });
+});

package/e2e/teardown.ts

@@ -0,0 +1,12 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+export default function teardown() {
+  fs.readdirSync(path.resolve('examples')).map((project) =>
+    fs
+      .readdirSync(path.resolve('examples', project))
+      .filter((folderName) => folderName.startsWith('dist'))
+      .map((folderName) => path.resolve('examples', project, folderName))
+      .forEach((folderPath) => fs.rmSync(folderPath, { recursive: true, force: true }))
+  );
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "reactive-route",
   "author": "Dmitry Kazakov",
   "license": "MIT",
-  "version": "0.0.1-alpha.26",
+  "version": "0.0.1-alpha.28",
   "description": "Reactive Router for different frameworks",
   "repository": {
     "type": "git",
@@ -11,19 +11,23 @@
   "scripts": {
     "upd": "rm -rf ./node_modules&&pnpm i --prefer-offline",
     "build": "rm -rf ./dist&&node --import tsx ./scripts/build.ts&&tsc -b ./tsconfig.types.react.json&&tsc -b ./tsconfig.types.solid.json",
-    "test": "vitest run&&node --import tsx ./scripts/genCoverageBadge.ts",
-    "test-watch": "vitest --coverage=false",
     "npm-publish": "pnpm run build&&pnpm run test&&npm publish --access public",
     "analyze:js": "biome check --no-errors-on-unmatched .",
     "format:js": "biome check --no-errors-on-unmatched --write",
     "check-types": "tsc --project tsconfig.json&&tsc --project tsconfig.solid.json",
-    "check-types-example": "tsc --project examples/react/tsconfig.json",
+    "check-types-example": "tsc --project examples/react/tsconfig.json&&tsc --project examples/preact/tsconfig.json&&tsc --project examples/solid/tsconfig.json&&tsc --project examples/vue/tsconfig.json",
     "prepare": "husky",
     "upgrade-examples": "pnpm upgrade -r reactive-route@latest",
     "upgrade-lib": "bash -c 'pnpm upgrade -r $@' bash",
-    "docs:dev": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "test": "vitest run&&node --import tsx ./scripts/genCoverageBadge.ts",
+    "test-watch": "vitest --coverage=false",
+    "test-vue": "vitest run --config ./vitest.vue.config.mjs --coverage=false",
+    "e2e": "playwright test",
+    "e2e:ui": "playwright test --ui",
+    "e2e:install": "playwright install --with-deps",
+    "docs:dev": "vitepress dev vitepress",
+    "docs:build": "vitepress build vitepress --outDir docs",
+    "docs:preview": "vitepress preview vitepress"
   },
   "lint-staged": {
     "(*.js|*.ts|*.tsx|*.mjs)": [
@@ -43,6 +47,8 @@
     "@biomejs/biome": "2.2.5",
     "@espcom/esbuild-plugin-compress": "1.2.0",
     "@espcom/esbuild-plugin-replace": "1.3.2",
+    "playwright": "1.56.1",
+    "@playwright/test": "1.56.1",
     "@preact/preset-vite": "2.10.2",
     "@solidjs/testing-library": "0.8.10",
     "@testing-library/preact": "3.2.4",
@@ -51,7 +57,7 @@
     "@types/babel__core": "7.20.5",
     "@types/lodash": "4.17.20",
     "@types/node": "24.7.2",
-    "@vitejs/plugin-vue": "6.0.1",
+    "unplugin-vue": "7.0.2",
     "@vitest/coverage-istanbul": "3.2.4",
     "@vue/test-utils": "2.4.6",
     "babel-preset-solid": "1.9.9",
@@ -102,6 +108,16 @@
       "require": "./dist/cjs/solid/index.js",
       "import": "./dist/esm/solid/index.js"
     },
+    "./vue": {
+      "types": "./dist/vue/index.d.ts",
+      "require": "./dist/cjs/vue/index.js",
+      "import": "./dist/esm/vue/index.js"
+    },
+    "./adapters/vue": {
+      "types": "./dist/adapters/vue.d.ts",
+      "require": "./dist/cjs/adapters/vue/index.js",
+      "import": "./dist/esm/adapters/vue/index.js"
+    },
     "./adapters/mobx-react": {
       "types": "./dist/adapters/mobx-react.d.ts",
       "require": "./dist/cjs/adapters/mobx-react/index.js",
@@ -141,4 +157,4 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/core/index.d.ts"
-}
+}

package/playwright.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const csrVariants: Array<{ name: string; scriptName: string }> = [
+  { name: '[React+Mobx]', scriptName: './examples/react mobx' },
+  { name: '[React+Observable]', scriptName: './examples/react observable' },
+  { name: '[Preact+Mobx]', scriptName: './examples/preact mobx' },
+  { name: '[Preact+Observable]', scriptName: './examples/preact observable' },
+  { name: '[Solid+Mobx]', scriptName: './examples/solid mobx' },
+  { name: '[Solid+Observable]', scriptName: './examples/solid observable' },
+  { name: '[Solid+Solid]', scriptName: './examples/solid solid' },
+  { name: '[Vue+Vue]', scriptName: './examples/vue vue' },
+];
+
+const ssrVariants: Array<{ name: string; scriptName: string }> = [
+  { name: '[React+Mobx+SSR]', scriptName: './examples/react ssr-mobx' },
+  { name: '[React+Observable+SSR]', scriptName: './examples/react ssr-observable' },
+  { name: '[Preact+Mobx+SSR]', scriptName: './examples/preact ssr-mobx' },
+  { name: '[Preact+Observable+SSR]', scriptName: './examples/preact ssr-observable' },
+  { name: '[Solid+Mobx+SSR]', scriptName: './examples/solid ssr-mobx' },
+  { name: '[Solid+Observable+SSR]', scriptName: './examples/solid ssr-observable' },
+  { name: '[Solid+Solid+SSR]', scriptName: './examples/solid ssr-solid' },
+  { name: '[Vue+Vue+SSR]', scriptName: './examples/vue ssr-vue' },
+];
+
+const variants: Array<{ name: string; port: number; scriptName: string }> = [
+  ...csrVariants,
+  ...ssrVariants,
+].map((variant, i) => ({ ...variant, port: 8002 + i * 2 }));
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: false,
+  retries: 0,
+  // workers: 10,
+  reporter: [['list']],
+  webServer: variants.map((variant) => ({
+    name: variant.name,
+    command: `pnpm --filter ${variant.scriptName} ${variant.port} test`,
+    port: variant.port,
+    reuseExistingServer: false,
+    timeout: 10000,
+    cwd: __dirname,
+    stdout: 'pipe',
+  })),
+  projects: variants.map((variant) => ({
+    name: variant.name,
+    use: {
+      baseURL: `http://localhost:${variant.port}`,
+      ...devices['Desktop Chrome'],
+    },
+  })),
+  globalTeardown: require.resolve('./e2e/teardown'),
+});

package/vitepress/.vitepress/cache/deps/_metadata.json

@@ -0,0 +1,52 @@
+{
+  "hash": "5a633cf9",
+  "configHash": "c2aca7c2",
+  "lockfileHash": "81207e34",
+  "browserHash": "ffb49e63",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/.pnpm/vue@3.5.22_typescript@5.9.2/node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "acc43dc7",
+      "needsInterop": false
+    },
+    "vitepress > @vue/devtools-api": {
+      "src": "../../../../node_modules/.pnpm/@vue+devtools-api@8.0.1/node_modules/@vue/devtools-api/dist/index.js",
+      "file": "vitepress___@vue_devtools-api.js",
+      "fileHash": "f6e97e3d",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/core": {
+      "src": "../../../../node_modules/.pnpm/@vueuse+core@13.9.0_vue@3.5.22_typescript@5.9.2_/node_modules/@vueuse/core/index.mjs",
+      "file": "vitepress___@vueuse_core.js",
+      "fileHash": "10a3e7ca",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/integrations/useFocusTrap": {
+      "src": "../../../../node_modules/.pnpm/@vueuse+integrations@13.9.0_focus-trap@7.6.5_vue@3.5.22_typescript@5.9.2_/node_modules/@vueuse/integrations/useFocusTrap.mjs",
+      "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
+      "fileHash": "a8fdd658",
+      "needsInterop": false
+    },
+    "vitepress > mark.js/src/vanilla.js": {
+      "src": "../../../../node_modules/.pnpm/mark.js@8.11.1/node_modules/mark.js/src/vanilla.js",
+      "file": "vitepress___mark__js_src_vanilla__js.js",
+      "fileHash": "be042848",
+      "needsInterop": false
+    },
+    "vitepress > minisearch": {
+      "src": "../../../../node_modules/.pnpm/minisearch@7.1.2/node_modules/minisearch/dist/es/index.js",
+      "file": "vitepress___minisearch.js",
+      "fileHash": "f4e7a04e",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "chunk-VGAXUAUJ": {
+      "file": "chunk-VGAXUAUJ.js"
+    },
+    "chunk-FL23S3EK": {
+      "file": "chunk-FL23S3EK.js"
+    }
+  }
+}