@sigmela/router 0.3.7 → 0.5.0

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type RouterShellMode = 'mobile-contained' | 'desktop-fullscreen';
+export type RouterOverlayLayout = RouterShellMode;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,oBAAoB,CAAC;AACxE,MAAM,MAAM,mBAAmB,GAAG,eAAe,CAAC"}

package/dist/utils/id.d.ts

@@ -0,0 +1,2 @@
+export declare function createRouterId(): string;
+//# sourceMappingURL=id.d.ts.map

package/dist/utils/id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../src/utils/id.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,IAAI,MAAM,CAavC"}

package/package.json

@@ -1,192 +1,91 @@
 {
   "name": "@sigmela/router",
-  "version": "0.3.7",
-  "description": "React Native Router",
-  "main": "./lib/module/index.js",
-  "types": "./lib/typescript/src/index.d.ts",
+  "version": "0.5.0",
+  "description": "Native-feeling router for React web apps: screen stacks with gesture-driven back, modals, sheets, tab bars, drawers and split views.",
+  "license": "MIT",
+  "author": "Sigmela",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
-      "types": "./lib/typescript/src/index.d.ts",
-      "default": "./lib/module/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
-    "./package.json": "./package.json",
-    "./styles.css": {
-      "source": "./src/styles.css",
-      "default": "./lib/module/styles.css"
-    }
+    "./router.css": "./dist/router.css",
+    "./package.json": "./package.json"
   },
   "files": [
-    "lib",
-    "android",
-    "ios",
-    "cpp",
-    "*.podspec",
-    "react-native.config.js",
-    "!ios/build",
-    "!android/build",
-    "!android/gradle",
-    "!android/gradlew",
-    "!android/gradlew.bat",
-    "!android/local.properties",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
-    "!**/.*"
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
   ],
-  "scripts": {
-    "example": "yarn workspace @sigmela/router-example",
-    "test": "jest",
-    "typecheck": "tsc",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "clean": "del-cli lib",
-    "prepare": "bob build && del-cli \"lib/**/*.map\"",
-    "release": "release-it --only-version"
+  "engines": {
+    "node": ">=20"
   },
-  "keywords": [
-    "React Native Router",
-    "react-native-navigation",
-    "react-native-router",
-    "react-native-screens",
-    "react-native-bottom-tabs",
-    "react-native-bottom-sheet"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sigmela/router.git"
+  "scripts": {
+    "build": "tsup && tsc -p tsconfig.build.json",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "prepublishOnly": "yarn clean && yarn typecheck && yarn test && yarn build",
+    "example": "vite --config example/vite.config.ts",
+    "example:build": "vite build --config example/vite.config.ts"
   },
-  "author": "https://github.com/bogoslavskiy <help@sigmela.com> (https://github.com/bogoslavskiy)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/sigmela/router/issues"
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
-  "homepage": "https://github.com/sigmela/router#readme",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+  "dependencies": {
+    "@fluejs/noscroll": "^1.0.0",
+    "motion": "^12.40.0",
+    "react-transition-state": "^2.4.0",
+    "wouter": "^3.10.0"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/compat": "^1.3.2",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.35.0",
-    "@evilmartians/lefthook": "^1.12.3",
-    "@react-native/babel-preset": "0.83.2",
-    "@react-native/eslint-config": "^0.83.2",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@sigmela/native-sheet": "^0.0.1",
-    "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.12",
-    "commitlint": "^19.8.1",
-    "del-cli": "^6.0.0",
-    "eslint": "^9.35.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "jest": "^29.7.0",
-    "prettier": "^3.8.1",
-    "react": "19.2.0",
-    "react-native": "0.83.2",
-    "react-native-builder-bob": "^0.40.18",
-    "react-native-reanimated": "^4.2.2",
-    "react-native-safe-area-context": "^5.7.0",
-    "react-native-screens": "^4.24.0",
-    "react-native-worklets": "^0.7.4",
-    "release-it": "^19.0.4",
-    "typescript": "^5.9.2"
-  },
-  "peerDependencies": {
-    "@sigmela/native-sheet": ">=0.0.1",
-    "react": "*",
-    "react-native": ">=0.72.0",
-    "react-native-reanimated": ">=3.0.0",
-    "react-native-safe-area-context": ">=4.0.0",
-    "react-native-screens": ">=4.18.0"
-  },
-  "peerDependenciesMeta": {
-    "@sigmela/native-sheet": {
-      "optional": true
-    },
-    "react-native-reanimated": {
-      "optional": true
-    },
-    "react-native-safe-area-context": {
-      "optional": true
-    }
+    "@eslint/js": "^9.39.1",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "^26.1.1",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.1.0",
+    "globals": "^16.5.0",
+    "jsdom": "^29.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tsup": "^8.5.0",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.47.0",
+    "vite": "^7.3.6",
+    "vitest": "4.1.10"
   },
-  "workspaces": [
-    "example"
+  "keywords": [
+    "react",
+    "router",
+    "navigation",
+    "modal",
+    "bottom-sheet",
+    "tabs",
+    "drawer",
+    "split-view",
+    "mobile",
+    "spa"
   ],
-  "packageManager": "yarn@3.6.1",
-  "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/lib/",
-      "<rootDir>/.worktrees/"
-    ],
-    "transformIgnorePatterns": [
-      "node_modules/(?!((jest-)?react-native|@react-native|react-native-screens|@sigmela/native-sheet|nanoid|query-string|decode-uri-component|split-on-first|filter-obj)/)"
-    ]
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
-    },
-    "npm": {
-      "publish": true
-    },
-    "github": {
-      "release": true
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": {
-          "name": "angular"
-        }
-      }
-    }
-  },
-  "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
-  },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true,
-          "sourceMaps": false
-        }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
-  },
-  "create-react-native-library": {
-    "languages": "js",
-    "type": "library",
-    "version": "0.54.3"
+  "publishConfig": {
+    "access": "public"
   },
-  "dependencies": {
-    "nanoid": "^5.1.6",
-    "path-to-regexp": "^8.3.0",
-    "query-string": "^9.3.1",
-    "react-transition-state": "^2.3.3"
+  "allowScripts": {
+    "esbuild@0.27.7": true
   }
 }

package/lib/module/Drawer/Drawer.js

@@ -1,250 +0,0 @@
-"use strict";
-
-import React from 'react';
-import { RenderDrawer } from './RenderDrawer';
-export class Drawer {
-  screens = {};
-  stacks = {};
-  nodes = {};
-  listeners = new Set();
-  openListeners = new Set();
-  constructor(options = {}) {
-    this.drawerId = `drawer-${Math.random().toString(36).slice(2)}`;
-    this.width = options.width ?? 280;
-    this.state = {
-      tabs: [],
-      index: options.initialIndex ?? 0,
-      config: {
-        component: options.component
-      },
-      isOpen: false
-    };
-  }
-  getId() {
-    return this.drawerId;
-  }
-  addTab(tab) {
-    const sourcesCount = (tab.stack ? 1 : 0) + (tab.node ? 1 : 0) + (tab.screen ? 1 : 0);
-    if (sourcesCount !== 1) {
-      throw new Error(`Drawer.addTab: exactly one of { stack, node, screen } must be provided (got ${sourcesCount})`);
-    }
-    const {
-      key,
-      ...rest
-    } = tab;
-    const nextIndex = this.state.tabs.length;
-    const tabKey = key ?? `drawer-item-${nextIndex}`;
-    const nextTabs = [...this.state.tabs, {
-      tabKey,
-      tabPrefix: tab.prefix,
-      title: rest.title,
-      icon: rest.icon,
-      selectedIcon: rest.selectedIcon,
-      badgeValue: rest.badgeValue
-    }];
-    this.setState({
-      tabs: nextTabs
-    });
-    if (tab.stack) {
-      this.stacks[tabKey] = tab.stack;
-    } else if (tab.node) {
-      this.nodes[tabKey] = tab.node;
-    } else if (tab.screen) {
-      this.screens[tabKey] = tab.screen;
-    }
-    return this;
-  }
-  setBadge(tabIndex, badge) {
-    this.setState({
-      tabs: this.state.tabs.map((item, index) => index === tabIndex ? {
-        ...item,
-        badgeValue: badge ?? undefined
-      } : item)
-    });
-  }
-  setTabBarConfig(config) {
-    this.setState({
-      config: {
-        ...this.state.config,
-        ...config
-      }
-    });
-  }
-  onIndexChange(index) {
-    this.setState({
-      index
-    });
-  }
-
-  // ---- Open/Close state ----
-
-  open() {
-    if (!this.state.isOpen) {
-      this.setState({
-        isOpen: true
-      });
-      this.notifyOpenListeners(true);
-    }
-  }
-  close() {
-    if (this.state.isOpen) {
-      this.setState({
-        isOpen: false
-      });
-      this.notifyOpenListeners(false);
-    }
-  }
-  toggle() {
-    if (this.state.isOpen) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-  getIsOpen() {
-    return this.state.isOpen;
-  }
-  subscribeOpenState(listener) {
-    this.openListeners.add(listener);
-    return () => {
-      this.openListeners.delete(listener);
-    };
-  }
-  notifyOpenListeners(isOpen) {
-    for (const listener of Array.from(this.openListeners)) {
-      try {
-        listener(isOpen);
-      } catch (e) {
-        if (__DEV__) {
-          console.error('[Drawer] openListener error', e);
-        }
-      }
-    }
-  }
-
-  // ---- Standard TabBar-like methods ----
-
-  getState = () => {
-    return this.state;
-  };
-  setState(state) {
-    this.state = {
-      ...this.state,
-      ...state
-    };
-    this.notifyListeners();
-  }
-  notifyListeners() {
-    for (const listener of Array.from(this.listeners)) {
-      try {
-        listener();
-      } catch (e) {
-        if (__DEV__) {
-          console.error('[Drawer] listener error', e);
-        }
-      }
-    }
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  getTabs() {
-    return this.state.tabs.slice();
-  }
-  getInitialIndex() {
-    return this.state.index ?? 0;
-  }
-  getActiveChildId() {
-    const activeTab = this.state.tabs[this.state.index];
-    if (!activeTab) return undefined;
-    const node = this.nodes[activeTab.tabKey] ?? this.stacks[activeTab.tabKey];
-    return node?.getId();
-  }
-  switchToRoute(routeId) {
-    const idx = this.findTabIndexByRoute(routeId);
-    if (idx === -1) return;
-    if (idx === this.state.index) return;
-    this.setState({
-      index: idx
-    });
-  }
-  hasRoute(routeId) {
-    return this.findTabIndexByRoute(routeId) !== -1;
-  }
-  setActiveChildByRoute(routeId) {
-    this.switchToRoute(routeId);
-  }
-  getNodeRoutes() {
-    return [];
-  }
-  getNodeChildren() {
-    const children = [];
-    for (let idx = 0; idx < this.state.tabs.length; idx++) {
-      const tab = this.state.tabs[idx];
-      const node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
-      if (node) {
-        children.push({
-          prefix: tab?.tabPrefix ?? '',
-          node,
-          onMatch: () => this.onIndexChange(idx)
-        });
-      }
-    }
-    return children;
-  }
-  getRenderer() {
-    const drawerInstance = this;
-    return function DrawerScreen(props) {
-      return /*#__PURE__*/React.createElement(RenderDrawer, {
-        drawer: drawerInstance,
-        appearance: props?.appearance
-      });
-    };
-  }
-  seed() {
-    const activeTab = this.state.tabs[this.state.index];
-    if (!activeTab) return null;
-    const node = this.nodes[activeTab.tabKey];
-    if (node) {
-      return node.seed?.() ?? null;
-    }
-    const stack = this.stacks[activeTab.tabKey];
-    if (!stack) return null;
-    const firstRoute = stack.getFirstRoute();
-    if (!firstRoute) return null;
-    return {
-      routeId: firstRoute.routeId,
-      path: firstRoute.path,
-      stackId: stack.getId()
-    };
-  }
-  findTabIndexByRoute(routeId) {
-    for (let i = 0; i < this.state.tabs.length; i++) {
-      const tab = this.state.tabs[i];
-      const node = tab ? this.nodes[tab.tabKey] ?? this.stacks[tab.tabKey] : undefined;
-      if (!node) continue;
-      const hasRoute = this.nodeHasRoute(node, routeId);
-      if (hasRoute) {
-        return i;
-      }
-    }
-    return -1;
-  }
-  nodeHasRoute(node, routeId) {
-    const routes = node.getNodeRoutes();
-    for (const r of routes) {
-      if (r.routeId === routeId) return true;
-      if (r.childNode) {
-        if (this.nodeHasRoute(r.childNode, routeId)) return true;
-      }
-    }
-    const children = node.getNodeChildren();
-    for (const child of children) {
-      if (this.nodeHasRoute(child.node, routeId)) return true;
-    }
-    return false;
-  }
-}

package/lib/module/Drawer/DrawerContext.js

@@ -1,4 +0,0 @@
-"use strict";
-
-import { createContext } from 'react';
-export const DrawerContext = /*#__PURE__*/createContext(null);

package/lib/module/Drawer/DrawerIcon.web.js

@@ -1,47 +0,0 @@
-"use strict";
-
-import { memo, useMemo } from 'react';
-import { Image } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-const resolveImageUri = source => {
-  if (!source) return undefined;
-  const resolved = typeof Image.resolveAssetSource === 'function' ? Image.resolveAssetSource(source) : undefined;
-  if (resolved?.uri) return resolved.uri;
-  if (Array.isArray(source)) {
-    const first = source[0];
-    if (first && typeof first === 'object' && 'uri' in first) return first.uri;
-  }
-  if (typeof source === 'object' && source && 'uri' in source) return source.uri;
-  return undefined;
-};
-export const DrawerIcon = /*#__PURE__*/memo(({
-  source,
-  tintColor
-}) => {
-  const iconUri = resolveImageUri(source);
-  const useMask = Boolean(tintColor && iconUri);
-  const maskStyle = useMemo(() => {
-    if (!useMask || !iconUri) return undefined;
-    return {
-      backgroundColor: tintColor,
-      WebkitMaskImage: `url(${iconUri})`,
-      WebkitMaskSize: 'contain',
-      WebkitMaskRepeat: 'no-repeat',
-      WebkitMaskPosition: 'center',
-      maskImage: `url(${iconUri})`,
-      maskSize: 'contain',
-      maskRepeat: 'no-repeat',
-      maskPosition: 'center',
-      width: '100%',
-      height: '100%'
-    };
-  }, [tintColor, iconUri, useMask]);
-  if (maskStyle) {
-    return /*#__PURE__*/_jsx("div", {
-      style: maskStyle
-    });
-  }
-  return /*#__PURE__*/_jsx(Image, {
-    source: source
-  });
-});