Merge pull request #14 from script-development/feat/fs-router

feat: add @script-development/fs-router package

Author: Goosterhof

package-lock.json

@@ -0,0 +1 @@
+# @script-development/fs-router

packages/router/CHANGELOG.md

@@ -0,0 +1,52 @@
+{
+  "name": "@script-development/fs-router",
+  "version": "0.1.0",
+  "description": "Type-safe router service factory with CRUD navigation, middleware pipeline, and custom components for Vue Router",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/script-development/fs-packages.git",
+    "directory": "packages/router"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "lint:pkg": "publint && attw --pack",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:mutation": "stryker run"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.8.9",
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "vue-router": "^4.5.0"
+  }
+}

packages/router/package.json

@@ -0,0 +1,71 @@
+import type { Ref } from "vue";
+import type { LocationQueryRaw, RouteLocationNormalizedLoaded, RouteRecordRaw } from "vue-router";
+
+import { computed, defineComponent, h } from "vue";
+
+import type { RouteName, RouterLinkComponent, RouterService, RouterViewComponent } from "./types";
+
+const buildRouteKey = (route: RouteLocationNormalizedLoaded, depth: number): string => {
+  let key = route.matched[depth].path;
+  for (const [paramName, paramValue] of Object.entries(route.params)) {
+    const value = Array.isArray(paramValue) ? paramValue[0] : paramValue;
+    if (value) key = key.replace(`:${paramName}`, value);
+  }
+
+  return key;
+};
+
+export const createRouterView = (
+  currentRouteRef: Ref<RouteLocationNormalizedLoaded>,
+): RouterViewComponent =>
+  defineComponent<{ depth?: number }>(
+    ({ depth = 0 }) => {
+      const component = computed(() => {
+        const matched = currentRouteRef.value.matched[depth];
+        return matched?.components?.default ?? null;
+      });
+
+      return () => {
+        if (!component.value) return h("p", ["404"]);
+
+        return h(component.value, {
+          key: buildRouteKey(currentRouteRef.value, depth),
+        });
+      };
+    },
+    // https://vuejs.org/api/general.html#function-signature
+    // manual runtime props declaration is currently still needed
+    { props: ["depth"] },
+  );
+
+export const createRouterLink = <Routes extends RouteRecordRaw[]>(
+  getUrlForRouteName: RouterService<Routes>["getUrlForRouteName"],
+  goToRoute: RouterService<Routes>["goToRoute"],
+): RouterLinkComponent<Routes> =>
+  defineComponent<{
+    to: {
+      name: RouteName<Routes>;
+      query?: LocationQueryRaw;
+      id?: number | string;
+      parentId?: number;
+    };
+  }>(
+    (props, { slots }) =>
+      () =>
+        h(
+          "a",
+          {
+            href: getUrlForRouteName(props.to.name, props.to.id, props.to.query, props.to.parentId),
+            onClick: (event: MouseEvent) => {
+              if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+
+              event.preventDefault();
+              goToRoute(props.to.name, props.to.id, props.to.query, props.to.parentId);
+            },
+          },
+          slots.default?.(),
+        ),
+    // https://vuejs.org/api/general.html#function-signature
+    // manual runtime props declaration is currently still needed
+    { props: ["to"] },
+  );

packages/router/src/components.ts

@@ -0,0 +1,31 @@
+export { createRouterService } from "./router";
+export {
+  createStandardRouteConfig,
+  createCrudRoutes,
+  createNestedCrudRoutes,
+  CREATE_PAGE_NAME,
+  EDIT_PAGE_NAME,
+  OVERVIEW_PAGE_NAME,
+  SHOW_PAGE_NAME,
+} from "./routes";
+export { createRouterView, createRouterLink } from "./components";
+export type {
+  FilterUndefined,
+  LazyRouteComponent,
+  OptionalComponent,
+  ActualRoute,
+  RouteName,
+  CreateRouteName,
+  OverviewRouteName,
+  EditRouteName,
+  ShowRouteName,
+  BeforeRouteMiddleware,
+  UnregisterMiddleware,
+  RouterViewComponent,
+  RouterLinkComponent,
+  RouterServiceOptions,
+  RouterService,
+  CrudRoute,
+  ParentCrudRoute,
+  NestedParentCrudRoute,
+} from "./types";