fix(next-router,preact-router,react-router,svelte-router): fix link component types

packages/next-router/package.json

@@ -64,7 +64,9 @@
     "test:unit": "vitest run --coverage",
     "test:unit:watch": "vitest watch",
     "test:size": "size-limit",
-    "test:types": "tsgo --noEmit",
+    "test:ts": "tsgo --noEmit",
+    "test:dist-types": "run emitDeclarations [ node ../../scripts/check-dist-app-routes.js dist/link.d.ts ]",
+    "test:types": "run -p test:ts test:dist-types",
     "test": "run -p lint test:unit test:types"
   },
   "peerDependencies": {

packages/preact-router/package.json

@@ -62,7 +62,9 @@
     "test:unit": "vitest run --coverage",
     "test:unit:watch": "vitest watch",
     "test:size": "size-limit",
-    "test:types": "tsgo --noEmit",
+    "test:ts": "tsgo --noEmit",
+    "test:dist-types": "run emitDeclarations [ node ../../scripts/check-dist-app-routes.js dist/link.d.ts ]",
+    "test:types": "run -p test:ts test:dist-types",
     "test": "run -p lint test:unit test:types"
   },
   "peerDependencies": {

packages/preact-router/src/link.tsx

@@ -15,6 +15,7 @@ import {
   listenLinks
 } from '@nano_kit/router'
 import type {
+  LinkComponent,
   LinkSettingsHook,
   LinkProps,
   LinkSettings
@@ -31,7 +32,7 @@ export type * from './link.types.js'
 function createLinkComponent<R extends Routes>(
   useSettings: () => LinkSettings,
   usePaths: () => Paths<R>
-) {
+): LinkComponent<R> {
   return function Link<K extends keyof R & string>(props: LinkProps<R, K>) {
     const {
       onClick: onClickProp,
@@ -150,7 +151,7 @@ export function LinkSettings$(): LinkSettings {
  * Link component for navigation.
  * Should be used inside injection context with navigation and paths provided.
  */
-export const Link = /* @__PURE__ */ createLinkComponent<AppRoutes>(
+export const Link: LinkComponent<AppRoutes> = /* @__PURE__ */ createLinkComponent<AppRoutes>(
   () => useInject(LinkSettings$),
   () => usePaths()
 )

packages/preact-router/src/link.types.ts

@@ -1,5 +1,6 @@
 import type {
   AnchorHTMLAttributes,
+  ComponentChildren,
   TargetedMouseEvent
 } from 'preact'
 import type {
@@ -54,6 +55,10 @@ export type LinkProps<R extends Routes, K extends keyof R & string> = AnchorHTML
   href?: string
 })
 
+export type LinkComponent<R extends Routes> = <K extends keyof R & string>(
+  props: LinkProps<R, K>
+) => ComponentChildren
+
 export type LinkSettingsHook<S extends LinkSettings = LinkSettings> = (
   props: Partial<LinkProps<Routes, string>>,
   settings: S

packages/react-router/package.json

@@ -62,7 +62,9 @@
     "test:unit": "vitest run --coverage",
     "test:unit:watch": "vitest watch",
     "test:size": "size-limit",
-    "test:types": "tsgo --noEmit",
+    "test:ts": "tsgo --noEmit",
+    "test:dist-types": "run emitDeclarations [ node ../../scripts/check-dist-app-routes.js dist/link.d.ts ]",
+    "test:types": "run -p test:ts test:dist-types",
     "test": "run -p lint test:unit test:types"
   },
   "peerDependencies": {

packages/react-router/src/link.tsx

@@ -18,6 +18,7 @@ import {
   listenLinks
 } from '@nano_kit/router'
 import type {
+  LinkComponent,
   LinkSettingsHook,
   LinkProps,
   LinkSettings
@@ -34,7 +35,7 @@ export type * from './link.types.js'
 function createLinkComponent<R extends Routes>(
   useSettings: () => LinkSettings,
   usePaths: () => Paths<R>
-) {
+): LinkComponent<R> {
   return function Link<K extends keyof R & string>(props: LinkProps<R, K>) {
     const {
       onClick: onClickProp,
@@ -153,7 +154,7 @@ export function LinkSettings$(): LinkSettings {
  * Link component for navigation.
  * Should be used inside injection context with navigation and paths provided.
  */
-export const Link = /* @__PURE__ */ createLinkComponent<AppRoutes>(
+export const Link: LinkComponent<AppRoutes> = /* @__PURE__ */ createLinkComponent<AppRoutes>(
   () => useInject(LinkSettings$),
   () => usePaths()
 )

packages/react-router/src/link.types.ts

@@ -1,6 +1,7 @@
 import type {
   AnchorHTMLAttributes,
-  MouseEvent
+  MouseEvent,
+  ReactNode
 } from 'react'
 import type {
   Routes,
@@ -54,6 +55,10 @@ export type LinkProps<R extends Routes, K extends keyof R & string> = AnchorHTML
   href?: string
 })
 
+export type LinkComponent<R extends Routes> = <K extends keyof R & string>(
+  props: LinkProps<R, K>
+) => ReactNode
+
 export type LinkSettingsHook<S extends LinkSettings = LinkSettings> = (
   props: Partial<LinkProps<Routes, string>>,
   settings: S

packages/svelte-router/package.json

@@ -64,7 +64,8 @@
     "test:unit:watch": "vitest watch",
     "test:ts": "tsgo --noEmit",
     "test:svelte": "svelte-check --tsconfig ./tsconfig.json",
-    "test:types": "run -p test:ts test:svelte",
+    "test:dist-types": "run build:dist [ node ../../scripts/check-dist-app-routes.js dist/link.d.ts ]",
+    "test:types": "run -p test:ts test:svelte test:dist-types",
     "test": "run -p lint test:unit test:types"
   },
   "peerDependencies": {

packages/svelte-router/src/link.ts

@@ -10,6 +10,7 @@ import {
 import { inject as storeInject } from '@nano_kit/store'
 import { getInject } from '@nano_kit/svelte'
 import {
+  type AppRoutes,
   type Navigation,
   type Paths,
   type Routes,
@@ -19,23 +20,24 @@ import {
   onLinkClick
 } from '@nano_kit/router'
 import type {
+  LinkComponent,
   LinkProps,
   LinkSettings,
   LinkSettingsHook
 } from './link.types.js'
-import LinkComponent from './LinkComponent.svelte'
+import LinkView from './LinkComponent.svelte'
 
 export type * from './link.types.js'
 
 /* @__NO_SIDE_EFFECTS__ */
 function createLinkComponent<R extends Routes>(
   useSettings: () => LinkSettings,
   usePaths: () => Paths<R>
-) {
+): LinkComponent<R> {
   return <K extends keyof R & string>(
     internals: ComponentInternals,
     props: LinkProps<R, K>
-  ) => LinkComponent(internals, Object.assign(props, {
+  ) => LinkView(internals, Object.assign(props, {
     // Suppress conflict with AppRoutes
     paths: usePaths() as unknown as Paths<Routes>,
     settings: useSettings()
@@ -113,7 +115,7 @@ export function LinkSettings$(): LinkSettings {
  * Link component for navigation.
  * Should be used inside injection context with navigation and paths provided.
  */
-export const Link = /* @__PURE__ */ createLinkComponent(
+export const Link: LinkComponent<AppRoutes> = /* @__PURE__ */ createLinkComponent<AppRoutes>(
   () => getInject(LinkSettings$),
   () => getInject(Paths$)
 )

packages/svelte-router/src/link.types.ts

@@ -1,4 +1,7 @@
-import type { Snippet } from 'svelte'
+import type {
+  ComponentInternals,
+  Snippet
+} from 'svelte'
 import type {
   HTMLAnchorAttributes,
   MouseEventHandler
@@ -60,6 +63,11 @@ export type LinkProps<R extends Routes, K extends keyof R & string> = AnchorAttr
   href?: string
 })
 
+export type LinkComponent<R extends Routes> = <K extends keyof R & string>(
+  internals: ComponentInternals,
+  props: LinkProps<R, K>
+) => object
+
 export type LinkSettingsHook<S extends LinkSettings = LinkSettings> = (
   props: Readable<Partial<LinkProps<Routes, string>>>,
   settings: S

scripts/check-dist-app-routes.js

@@ -0,0 +1,18 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+const [file] = process.argv.slice(2)
+
+if (!file) {
+  throw new Error('Expected a declaration file path.')
+}
+
+const path = resolve(process.cwd(), file)
+const content = readFileSync(path, 'utf8')
+
+if (
+  !content.includes('LinkComponent<AppRoutes>')
+  && !content.includes('LinkProps<AppRoutes')
+) {
+  throw new Error(`${file} does not preserve AppRoutes in public Link types.`)
+}

scripts/oxlint.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from '@trigen/oxlint'
+import rootConfig from '../oxlint.config.ts'
+
+export default defineConfig({
+  extends: [
+    rootConfig
+  ],
+  env: {
+    node: true
+  }
+})