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

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/index.js

@@ -0,0 +1,116 @@
+"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/vue/index.ts
+var vue_exports = {};
+__export(vue_exports, {
+  Router: () => Router
+});
+module.exports = __toCommonJS(vue_exports);
+
+// packages/vue/Router.ts
+var import_reactive_route = require("reactive-route");
+var import_vue = require("vue");
+var Router = (0, import_vue.defineComponent)({
+  name: "ReactiveRouteRouter",
+  props: {
+    // We keep the type generic via TS, but at runtime it's just any
+    router: { type: Object, required: true },
+    beforeSetPageComponent: { type: Function, required: false },
+    beforeUpdatePageComponent: { type: Function, required: false },
+    beforeMount: { type: Function, required: false }
+  },
+  // TS helper, runtime ignored
+  setup(props) {
+    const disposerRef = (0, import_vue.reactive)({ current: null });
+    const config = props.router.adapters.makeObservable({
+      loadedComponentName: void 0,
+      loadedComponentPage: void 0,
+      currentProps: {}
+    });
+    function redirectOnHistoryPop() {
+      if (!import_reactive_route.history) return;
+      import_reactive_route.history.listen((params) => {
+        if (params.action !== "POP") return;
+        const previousRoutePathname = props.router.routesHistory[props.router.routesHistory.length - 2];
+        if (previousRoutePathname === params.location.pathname) {
+          props.router.routesHistory.pop();
+        }
+        void props.router.restoreFromURL({
+          pathname: import_reactive_route.history.location.pathname,
+          noHistoryPush: true
+        });
+      });
+    }
+    function setLoadedComponent() {
+      const currentRouteName = props.router.currentRoute.name;
+      const currentRoutePage = props.router.currentRoute.pageId;
+      const componentConfig = props.router.routes[currentRouteName];
+      let preventRedirect = false;
+      if (props.router.isRedirecting) preventRedirect = true;
+      else if (config.loadedComponentName === currentRouteName) {
+        preventRedirect = true;
+      } else if (config.loadedComponentPage != null && currentRouteName != null) {
+        if (config.loadedComponentPage === currentRoutePage) {
+          props.router.adapters.replaceObject(
+            config.currentProps,
+            "props" in componentConfig ? componentConfig.props : {}
+          );
+          preventRedirect = true;
+        }
+      }
+      if (preventRedirect) return;
+      props.router.adapters.batch(() => {
+        if (config.loadedComponentName) {
+          props.beforeUpdatePageComponent?.();
+        }
+        props.beforeSetPageComponent?.(componentConfig);
+        props.router.adapters.batch(() => {
+          props.router.adapters.replaceObject(
+            config.currentProps,
+            "props" in componentConfig ? componentConfig.props : {}
+          );
+          config.loadedComponentName = currentRouteName;
+          config.loadedComponentPage = componentConfig.pageId;
+        });
+      });
+    }
+    setLoadedComponent();
+    (0, import_vue.onMounted)(() => {
+      props.beforeMount?.();
+      redirectOnHistoryPop();
+      if (props.router.adapters.immediateSetComponent) {
+        props.router.adapters.batch(() => {
+          setLoadedComponent();
+        });
+      }
+      const disposer = props.router.adapters.autorun(() => setLoadedComponent());
+      if (typeof disposer === "function") disposerRef.current = disposer;
+    });
+    (0, import_vue.onBeforeUnmount)(() => {
+      disposerRef.current?.();
+    });
+    return () => {
+      if (!config.loadedComponentName) return null;
+      const LoadedComponent = props.router.routes[config.loadedComponentName]?.component || null;
+      if (!LoadedComponent) return null;
+      return (0, import_vue.h)(LoadedComponent, { ...config.currentProps || {}, router: props.router });
+    };
+  }
+});

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/index.js

@@ -0,0 +1,93 @@
+// packages/vue/Router.ts
+import { history } from "reactive-route";
+import { defineComponent, h, onBeforeUnmount, onMounted, reactive } from "vue";
+var Router = defineComponent({
+  name: "ReactiveRouteRouter",
+  props: {
+    // We keep the type generic via TS, but at runtime it's just any
+    router: { type: Object, required: true },
+    beforeSetPageComponent: { type: Function, required: false },
+    beforeUpdatePageComponent: { type: Function, required: false },
+    beforeMount: { type: Function, required: false }
+  },
+  // TS helper, runtime ignored
+  setup(props) {
+    const disposerRef = reactive({ current: null });
+    const config = props.router.adapters.makeObservable({
+      loadedComponentName: void 0,
+      loadedComponentPage: void 0,
+      currentProps: {}
+    });
+    function redirectOnHistoryPop() {
+      if (!history) return;
+      history.listen((params) => {
+        if (params.action !== "POP") return;
+        const previousRoutePathname = props.router.routesHistory[props.router.routesHistory.length - 2];
+        if (previousRoutePathname === params.location.pathname) {
+          props.router.routesHistory.pop();
+        }
+        void props.router.restoreFromURL({
+          pathname: history.location.pathname,
+          noHistoryPush: true
+        });
+      });
+    }
+    function setLoadedComponent() {
+      const currentRouteName = props.router.currentRoute.name;
+      const currentRoutePage = props.router.currentRoute.pageId;
+      const componentConfig = props.router.routes[currentRouteName];
+      let preventRedirect = false;
+      if (props.router.isRedirecting) preventRedirect = true;
+      else if (config.loadedComponentName === currentRouteName) {
+        preventRedirect = true;
+      } else if (config.loadedComponentPage != null && currentRouteName != null) {
+        if (config.loadedComponentPage === currentRoutePage) {
+          props.router.adapters.replaceObject(
+            config.currentProps,
+            "props" in componentConfig ? componentConfig.props : {}
+          );
+          preventRedirect = true;
+        }
+      }
+      if (preventRedirect) return;
+      props.router.adapters.batch(() => {
+        if (config.loadedComponentName) {
+          props.beforeUpdatePageComponent?.();
+        }
+        props.beforeSetPageComponent?.(componentConfig);
+        props.router.adapters.batch(() => {
+          props.router.adapters.replaceObject(
+            config.currentProps,
+            "props" in componentConfig ? componentConfig.props : {}
+          );
+          config.loadedComponentName = currentRouteName;
+          config.loadedComponentPage = componentConfig.pageId;
+        });
+      });
+    }
+    setLoadedComponent();
+    onMounted(() => {
+      props.beforeMount?.();
+      redirectOnHistoryPop();
+      if (props.router.adapters.immediateSetComponent) {
+        props.router.adapters.batch(() => {
+          setLoadedComponent();
+        });
+      }
+      const disposer = props.router.adapters.autorun(() => setLoadedComponent());
+      if (typeof disposer === "function") disposerRef.current = disposer;
+    });
+    onBeforeUnmount(() => {
+      disposerRef.current?.();
+    });
+    return () => {
+      if (!config.loadedComponentName) return null;
+      const LoadedComponent = props.router.routes[config.loadedComponentName]?.component || null;
+      if (!LoadedComponent) return null;
+      return h(LoadedComponent, { ...config.currentProps || {}, router: props.router });
+    };
+  }
+});
+export {
+  Router
+};

package/dist/esm/vue/package.json

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

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.27",
   "description": "Reactive Router for different frameworks",
   "repository": {
     "type": "git",
@@ -11,8 +11,6 @@
   "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",
@@ -21,9 +19,14 @@
     "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",
+    "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 +46,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",
@@ -102,6 +107,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 +156,4 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/core/index.d.ts"
-}
+}

package/playwright.config.ts

@@ -0,0 +1,52 @@
+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' },
+];
+
+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' },
+];
+
+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"
+    }
+  }
+}