From fb4fa8842fe8348638596b7092eda2270482173a Mon Sep 17 00:00:00 2001 From: lazarv Date: Sun, 15 Sep 2024 18:52:51 +0200 Subject: [PATCH] fix: applying resolve.alias config --- examples/photos/src/app/(root).layout.tsx | 3 +-- .../photos/src/app/@modal/photos/[id].page.tsx | 6 +++--- examples/photos/src/app/page.tsx | 3 +-- examples/photos/src/components/frame/Frame.tsx | 2 +- examples/photos/tsconfig.json | 6 +++++- examples/photos/vite.config.mjs | 9 +++++++++ packages/react-server/lib/build/client.mjs | 5 +++-- packages/react-server/lib/build/server.mjs | 12 ++++++------ packages/react-server/lib/dev/create-server.mjs | 3 ++- packages/react-server/lib/utils/config.mjs | 14 ++++++++++++++ 10 files changed, 45 insertions(+), 18 deletions(-) create mode 100644 examples/photos/vite.config.mjs create mode 100644 packages/react-server/lib/utils/config.mjs diff --git a/examples/photos/src/app/(root).layout.tsx b/examples/photos/src/app/(root).layout.tsx index 0d65045..3042961 100644 --- a/examples/photos/src/app/(root).layout.tsx +++ b/examples/photos/src/app/(root).layout.tsx @@ -1,9 +1,8 @@ import "./global.css"; +import GithubCorner from "@/components/github-corner/GithubCorner"; import { ReactServerComponent } from "@lazarv/react-server/navigation"; -import GithubCorner from "../components/github-corner/GithubCorner"; - export default function Layout({ modal, children, diff --git a/examples/photos/src/app/@modal/photos/[id].page.tsx b/examples/photos/src/app/@modal/photos/[id].page.tsx index 60e0359..52e2ad9 100644 --- a/examples/photos/src/app/@modal/photos/[id].page.tsx +++ b/examples/photos/src/app/@modal/photos/[id].page.tsx @@ -1,6 +1,6 @@ -import Frame from "../../../components/frame/Frame"; -import Modal from "../../../components/modal/Modal"; -import photos from "../../../photos"; +import Frame from "@/components/frame/Frame"; +import Modal from "@/components/modal/Modal"; +import photos from "@/photos"; export default function PhotoModal({ id: photoId }: { id: string }) { const photo = photos.find((p) => p.id === photoId); diff --git a/examples/photos/src/app/page.tsx b/examples/photos/src/app/page.tsx index 5b2463c..7910d89 100644 --- a/examples/photos/src/app/page.tsx +++ b/examples/photos/src/app/page.tsx @@ -1,7 +1,6 @@ +import swagPhotos from "@/photos"; import { Link } from "@lazarv/react-server/navigation"; -import swagPhotos from "../photos"; - export const ttl = 30000; export default function Home() { diff --git a/examples/photos/src/components/frame/Frame.tsx b/examples/photos/src/components/frame/Frame.tsx index 8104b67..3446849 100644 --- a/examples/photos/src/components/frame/Frame.tsx +++ b/examples/photos/src/components/frame/Frame.tsx @@ -1,4 +1,4 @@ -import { Photo } from "../../photos"; +import { Photo } from "@/photos"; export default function Frame({ photo }: { photo: Photo }) { return ( diff --git a/examples/photos/tsconfig.json b/examples/photos/tsconfig.json index 687ad0c..d817c54 100644 --- a/examples/photos/tsconfig.json +++ b/examples/photos/tsconfig.json @@ -7,7 +7,11 @@ "types": ["react/experimental", "react-dom/experimental"], "module": "ESNext", "moduleResolution": "Bundler", - "plugins": [{ "name": "typescript-plugin-css-modules" }] + "plugins": [{ "name": "typescript-plugin-css-modules" }], + "baseUrl": "./src", + "paths": { + "@/*": ["./*"] + } }, "include": ["**/*.ts", "**/*.tsx", ".react-server/**/*.ts"], "exclude": ["**/*.js", "**/*.mjs"] diff --git a/examples/photos/vite.config.mjs b/examples/photos/vite.config.mjs new file mode 100644 index 0000000..be05a32 --- /dev/null +++ b/examples/photos/vite.config.mjs @@ -0,0 +1,9 @@ +import { defineConfig } from "vite"; + +export default defineConfig({ + resolve: { + alias: { + "@/": new URL("src/", import.meta.url).pathname, + }, + }, +}); diff --git a/packages/react-server/lib/build/client.mjs b/packages/react-server/lib/build/client.mjs index 0f2ba58..76a4c75 100644 --- a/packages/react-server/lib/build/client.mjs +++ b/packages/react-server/lib/build/client.mjs @@ -9,10 +9,11 @@ import { build as viteBuild } from "vite"; import { forRoot } from "../../config/index.mjs"; import merge from "../../lib/utils/merge.mjs"; +import resolveWorkspace from "../plugins/resolve-workspace.mjs"; import rollupUseClient from "../plugins/use-client.mjs"; import rollupUseServer from "../plugins/use-server.mjs"; -import resolveWorkspace from "../plugins/resolve-workspace.mjs"; import * as sys from "../sys.mjs"; +import { makeResolveAlias } from "../utils/config.mjs"; import { filterOutVitePluginReact, userOrBuiltInVitePluginReact, @@ -79,7 +80,7 @@ export default async function clientBuild(_, options) { replacement: join(sys.rootDir, "client"), }, ...clientAlias(options.dev), - ...(config.resolve?.alias ?? []), + ...makeResolveAlias(config.resolve?.alias ?? []), ], }, customLogger, diff --git a/packages/react-server/lib/build/server.mjs b/packages/react-server/lib/build/server.mjs index e44de3a..b63690a 100644 --- a/packages/react-server/lib/build/server.mjs +++ b/packages/react-server/lib/build/server.mjs @@ -1,28 +1,28 @@ import { writeFile } from "node:fs/promises"; import { createRequire } from "node:module"; import { join } from "node:path"; -import { pathToFileURL } from "node:url"; import replace from "@rollup/plugin-replace"; import { build as viteBuild } from "vite"; import { forRoot } from "../../config/index.mjs"; -import merge from "../../lib/utils/merge.mjs"; +import fileRouter from "../plugins/file-router/plugin.mjs"; import reactServerEval from "../plugins/react-server-eval.mjs"; import resolveWorkspace from "../plugins/resolve-workspace.mjs"; +import rootModule from "../plugins/root-module.mjs"; import rollupUseClient from "../plugins/use-client.mjs"; import rollupUseServerInline from "../plugins/use-server-inline.mjs"; import rollupUseServer from "../plugins/use-server.mjs"; -import rootModule from "../plugins/root-module.mjs"; -import fileRouter from "../plugins/file-router/plugin.mjs"; import * as sys from "../sys.mjs"; +import { makeResolveAlias } from "../utils/config.mjs"; +import merge from "../utils/merge.mjs"; +import { bareImportRE } from "../utils/module.mjs"; import { filterOutVitePluginReact, userOrBuiltInVitePluginReact, } from "../utils/plugins.mjs"; import banner from "./banner.mjs"; import customLogger from "./custom-logger.mjs"; -import { bareImportRE } from "../utils/module.mjs"; const __require = createRequire(import.meta.url); const cwd = sys.cwd(); @@ -53,7 +53,7 @@ export default async function serverBuild(root, options) { find: /^@lazarv\/react-server\/client$/, replacement: join(sys.rootDir, "client"), }, - ...(config.resolve?.alias ?? []), + ...makeResolveAlias(config.resolve?.alias ?? []), ], conditions: ["react-server"], externalConditions: ["react-server"], diff --git a/packages/react-server/lib/dev/create-server.mjs b/packages/react-server/lib/dev/create-server.mjs index 1a81b7c..07d9c36 100644 --- a/packages/react-server/lib/dev/create-server.mjs +++ b/packages/react-server/lib/dev/create-server.mjs @@ -48,6 +48,7 @@ import useClient from "../plugins/use-client.mjs"; import useServer from "../plugins/use-server.mjs"; import useServerInline from "../plugins/use-server-inline.mjs"; import * as sys from "../sys.mjs"; +import { makeResolveAlias } from "../utils/config.mjs"; import { replaceError } from "../utils/error.mjs"; import merge from "../utils/merge.mjs"; import { bareImportRE, findPackageRoot, tryStat } from "../utils/module.mjs"; @@ -145,7 +146,7 @@ export default async function createServer(root, options) { find: /^@lazarv\/react-server\/client$/, replacement: join(sys.rootDir, "client"), }, - ...(config.resolve?.alias ?? []), + ...makeResolveAlias(config.resolve?.alias), ], noExternal: [bareImportRE], }, diff --git a/packages/react-server/lib/utils/config.mjs b/packages/react-server/lib/utils/config.mjs new file mode 100644 index 0000000..c6ae884 --- /dev/null +++ b/packages/react-server/lib/utils/config.mjs @@ -0,0 +1,14 @@ +export function makeResolveAlias(alias) { + if (alias && typeof alias === "object") { + if (Array.isArray(alias)) { + return alias.map((item) => + typeof item === "string" ? { find: item, replacement: item } : item + ); + } + return Object.entries(alias).map(([key, value]) => ({ + find: key, + replacement: value, + })); + } + return []; +}