From 7f03ba5ee0b13153059342e42b6d3e1dc3c679e4 Mon Sep 17 00:00:00 2001 From: Elijah Allen <56412012+eaallen@users.noreply.github.com> Date: Mon, 29 Jun 2026 07:52:51 -0600 Subject: [PATCH] docs: update define imports to use @/utils.ts alias Replace outdated relative import paths (../utils.ts and ../../utils.ts) with the @/utils.ts alias in documentation code examples. Co-authored-by: Cursor --- docs/latest/advanced/app-wrapper.md | 6 +++--- docs/latest/advanced/forms.md | 4 ++-- docs/latest/advanced/partials.md | 6 +++--- docs/latest/concepts/layouts.md | 8 ++++---- docs/latest/concepts/middleware.md | 6 +++--- docs/latest/examples/sharing-state-between-islands.md | 2 +- docs/latest/getting-started/index.md | 2 +- docs/latest/testing/index.md | 10 +++++----- 8 files changed, 22 insertions(+), 22 deletions(-) diff --git a/docs/latest/advanced/app-wrapper.md b/docs/latest/advanced/app-wrapper.md index d4e501b0d06..2f9bcd008af 100644 --- a/docs/latest/advanced/app-wrapper.md +++ b/docs/latest/advanced/app-wrapper.md @@ -24,7 +24,7 @@ If you're using [file-based routing](/docs/concepts/file-routing), create a ## Basic example ```tsx routes/_app.tsx -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export default define.page(({ Component, url }) => { return ( @@ -84,7 +84,7 @@ The app wrapper receives the same props as page components - `url`, `state`, `params`, and more. This is useful for conditional logic: ```tsx routes/_app.tsx -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export default define.page(({ Component, url, state }) => { return ( @@ -112,7 +112,7 @@ structure. Use `skipAppWrapper` in the route config: ```tsx routes/embed.tsx import { type RouteConfig } from "fresh"; -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export const config: RouteConfig = { skipAppWrapper: true, diff --git a/docs/latest/advanced/forms.md b/docs/latest/advanced/forms.md index e628880f025..cc82d76f3e8 100644 --- a/docs/latest/advanced/forms.md +++ b/docs/latest/advanced/forms.md @@ -20,7 +20,7 @@ This example demonstrates how to handle `application/x-www-form-urlencoded` `
` submissions: ```tsx routes/subscribe.tsx -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export const handlers = define.handlers({ async GET(ctx) { @@ -65,7 +65,7 @@ that this time, we have to explicitly declare the form's encoding to be `multipart/form-data`. ```tsx routes/subscribe.tsx -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export const handler = define.handlers({ async GET(ctx) { diff --git a/docs/latest/advanced/partials.md b/docs/latest/advanced/partials.md index 62a21e4a765..e1d2e7f265a 100644 --- a/docs/latest/advanced/partials.md +++ b/docs/latest/advanced/partials.md @@ -18,7 +18,7 @@ The quickest way to get started is to enable partials for every page in `routes/_app.tsx` by making the following changes. ```diff routes/_app.tsx - import { define } from "../utils.ts"; + import { define } from "@/utils.ts"; + import { Partial } from "fresh/runtime"; export default define.page(function App({ Component }) { @@ -81,7 +81,7 @@ documentation (marked green here). The code for such a page (excluding styling) might look like this: ```tsx routes/docs/[id].tsx -import { define } from "../../utils.ts"; +import { define } from "@/utils.ts"; export default define.page(async (ctx) => { const content = await loadContent(ctx.params.id); @@ -104,7 +104,7 @@ An optimal route that only renders the content instead of the outer layout with the sidebar might look like this respectively. ```tsx routes/partials/docs/[id].tsx -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; import { Partial } from "fresh/runtime"; // We only want to render the content, so disable diff --git a/docs/latest/concepts/layouts.md b/docs/latest/concepts/layouts.md index be4c0249c5e..5451a749437 100644 --- a/docs/latest/concepts/layouts.md +++ b/docs/latest/concepts/layouts.md @@ -47,7 +47,7 @@ and `url`. Any state set by [middleware](/docs/concepts/middleware) is available via `props.state`. ```tsx routes/_layout.tsx -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export default define.layout(({ Component, state, url }) => { return ( @@ -71,7 +71,7 @@ export default define.layout(({ Component, state, url }) => { Layouts can be async to fetch data before rendering: ```tsx routes/blog/_layout.tsx -import { define } from "../../utils.ts"; +import { define } from "@/utils.ts"; export default define.layout(async (ctx) => { const categories = await db.categories.list(); @@ -104,7 +104,7 @@ config to skip all layouts inherited from parent directories: ```tsx routes/login.tsx import { type RouteConfig } from "fresh"; -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export const config: RouteConfig = { skipInheritedLayouts: true, @@ -129,7 +129,7 @@ useful when a section of your site needs a completely different shell: ```tsx routes/admin/_layout.tsx import { type LayoutConfig } from "fresh"; -import { define } from "../../utils.ts"; +import { define } from "@/utils.ts"; export const config: LayoutConfig = { skipInheritedLayouts: true, diff --git a/docs/latest/concepts/middleware.md b/docs/latest/concepts/middleware.md index 2c4378269ec..ec2b1afa66d 100644 --- a/docs/latest/concepts/middleware.md +++ b/docs/latest/concepts/middleware.md @@ -39,7 +39,7 @@ excellent way to make http-related logic reusable on the server. Use the `define.middleware()` helper to get typings out of the box: ```ts middleware/my-middleware.ts -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; const middleware = define.middleware(async (ctx) => { console.log("my middleware"); @@ -63,7 +63,7 @@ middleware in a `_middleware.ts` file inside the `routes/` folder or any of its subfolders. ```ts routes/_middleware.ts -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export default define.middleware(async (ctx) => { console.log("my middleware"); @@ -74,7 +74,7 @@ export default define.middleware(async (ctx) => { You can also export an array of middlewares: ```ts routes/_middleware.ts -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; const middleware1 = define.middleware(async (ctx) => { console.log("A"); diff --git a/docs/latest/examples/sharing-state-between-islands.md b/docs/latest/examples/sharing-state-between-islands.md index e3f9b17318f..9f8489785ae 100644 --- a/docs/latest/examples/sharing-state-between-islands.md +++ b/docs/latest/examples/sharing-state-between-islands.md @@ -174,7 +174,7 @@ Then wire them together from a route, passing the same signal to both: import { useSignal } from "@preact/signals"; import AddToCart from "../islands/AddToCart.tsx"; import Cart from "../islands/Cart.tsx"; -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; export default define.page(function CartPage() { const cart = useSignal([]); diff --git a/docs/latest/getting-started/index.md b/docs/latest/getting-started/index.md index c8c30623391..1e4814d3025 100644 --- a/docs/latest/getting-started/index.md +++ b/docs/latest/getting-started/index.md @@ -48,7 +48,7 @@ import { define } from "@/utils.ts"; import { Button } from "@/components/Button.tsx"; // Without alias (relative paths) -import { define } from "../utils.ts"; +import { define } from "@/utils.ts"; import { Button } from "../components/Button.tsx"; ``` diff --git a/docs/latest/testing/index.md b/docs/latest/testing/index.md index 4c01554e211..2f7c1703cc0 100644 --- a/docs/latest/testing/index.md +++ b/docs/latest/testing/index.md @@ -17,7 +17,7 @@ test assumes the `State` object in `utils.ts` has `text` property. ```ts tests/middleware.test.ts import { expect } from "@std/expect"; import { App } from "fresh"; -import { define, type State } from "../utils.ts"; +import { define, type State } from "@/utils.ts"; const middleware = define.middleware((ctx) => { ctx.state.text = "middleware text"; @@ -50,7 +50,7 @@ Both the [app wrapper](/docs/advanced/app-wrapper) component and ```tsx tests/appWrapper.test.tsx import { expect } from "@std/expect"; import { App } from "fresh"; -import { define, type State } from "../utils.ts"; +import { define, type State } from "@/utils.ts"; const AppWrapper = define.layout(function AppWrapper({ Component }) { return ( @@ -85,7 +85,7 @@ Same can be done for layouts. ```tsx tests/layout.test.tsx import { expect } from "@std/expect"; import { App } from "fresh"; -import { define, type State } from "../utils.ts"; +import { define, type State } from "@/utils.ts"; const MyLayout = define.layout(function MyLayout({ Component }) { return ( @@ -120,7 +120,7 @@ handler: ```ts tests/routes.test.ts import { expect } from "@std/expect"; import { App } from "fresh"; -import { type State } from "../utils.ts"; +import { type State } from "@/utils.ts"; // Import actual route handlers import { handler as apiHandler } from "../routes/api/[name].tsx"; @@ -152,7 +152,7 @@ to use JSX: import { expect } from "@std/expect"; import { App } from "fresh"; import { useSignal } from "@preact/signals"; -import { type State } from "../utils.ts"; +import { type State } from "@/utils.ts"; import Counter from "../islands/Counter.tsx"; function CounterPage() {