Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/feelixe/astro-typesafe-routes below:

feelixe/astro-typesafe-routes: 🔒 An Astro integration for typesafe URL generation and routing, ensuring you never have broken links.

_{Enhance your Astro development experience with rigorous type safety for every route in your application. This integration automatically generates TypeScript definitions from your project's route structure.}

Documentation • npm • GitHub

• 🛟 Typesafe — Ensures all URLs match a route in your Astro project.
• 🔗 Typed Link Component — Replace your anchor links with the typesafe Link component.
• 🔎 Typesafe Search Params — Support for typesafe and JSON serialized search params.
• 🧩 Custom Component Support — Add type safety to custom link components.
• 🤸 Zero Dependencies — No 3rd-party packages.

1. Astro ^5.0.0 is required
2. Install Typescript and Astro Check

npm i -D typescript @astrojs/check

1. Add astro check command to build script in package.json

{
  "scripts": {
    "build": "astro check && astro build"
  }
}

1. Add integration:

npx astro add astro-typesafe-routes

1. Start the Astro development server if it's not already running to run type generation:

If automatic installation didn’t work, follow these steps:

1. Install package:

npm install astro-typesafe-routes

1. Add integration to astro.config.mjs:

import { defineConfig } from "astro/config";
import astroTypesafeRoutes from "astro-typesafe-routes";

export default defineConfig({
  integrations: [astroTypesafeRoutes()],
});

1. Start the Astro development server if it's not already running to run code generation:

Import the Link component to create a typesafe link

---
import Link from "astro-typesafe-routes/link";
---

<Link to="/blog/[postId]" params={{ postId: "1" }}>Post</Link>

To safely read route params with proper types, create a Route.

---
import { createRoute } from "astro-typesafe-routes/route-schema";

export const Route = createRoute({
  routeId: "/blog/[postId]",
});

const params = Route.getParams(Astro);
---

---
import { createRoute } from "astro-typesafe-routes/create-route";
import { z } from "astro/zod";

export const Route = createRoute({
  routeId: "/blog/[postId]",
});

export type Props = {
  content: string;
};

export const getStaticPaths = Route.createGetStaticPaths<Props>(() => {
  return [
    {
      params: {
        postId: "1",
      },
      props: {
        content: "Lorem Ipsum",
      },
    },
  ];
});
---

{Astro.props.content}

For more in-depth information and detailed usage instructions, please refer to the documentation.

Astro Typesafe Routes will automatically update the routeId of changed routes. If you want to disable this, you can set disableAutomaticRouteUpdates in the integration options.

export default defineConfig({
  integrations: [
    astroTypesafeRoutes({
      disableAutomaticRouteUpdates: true,
    }),
  ],
});

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4