From b2491cd11cce732751e6324f43fa39ba4379f3de Mon Sep 17 00:00:00 2001 From: Qrac Date: Mon, 6 Jun 2022 22:59:25 +0900 Subject: [PATCH] Added alias settings for Import paths #46 --- README.md | 3 ++ package.json | 2 +- src/build.tsx | 22 +++++++++---- src/config.ts | 50 +++++++++++++++++++++++++++++- src/esbuild.tsx | 12 +++++++ src/generate.ts | 5 ++- src/types.ts | 21 ++++++++++++- src/vite.ts | 8 +++++ test/config.test.ts | 22 ++++++++++++- test/esbuild.test.ts | 27 ++++++++++++++++ user/minista.config.ts | 9 ++++++ user/src/components/app-layout.tsx | 2 +- user/tsconfig.json | 3 ++ 13 files changed, 174 insertions(+), 12 deletions(-) create mode 100644 test/esbuild.test.ts diff --git a/README.md b/README.md index 0d82c3d..c6e4a34 100644 --- a/README.md +++ b/README.md @@ -139,6 +139,9 @@ export default defineConfig({ }, }, vite: {}, // https://ja.vitejs.dev/config/ + resolve: { + alias: [], // { [key: string]: string } | { find: string, replacement: string }[] + }, css: { modules: { cache: true, diff --git a/package.json b/package.json index f28e6be..da60b84 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "minista", "description": "Next.js Like Development with 100% Static Generate", - "version": "2.5.0", + "version": "2.6.0", "bin": { "minista": "./bin/minista.js" }, diff --git a/src/build.tsx b/src/build.tsx index 33d1754..35c848a 100644 --- a/src/build.tsx +++ b/src/build.tsx @@ -18,6 +18,7 @@ import { import type { MinistaResolveConfig, + MinistaResolveAlias, MinistaLocation, RootStaticContent, RootEsmContent, @@ -37,6 +38,7 @@ import type { import { systemConfig } from "./system.js" import { getFilePath } from "./path.js" import { + getEsbuildAlias, resolvePlugin, svgrPlugin, rawPlugin, @@ -84,6 +86,12 @@ const esbuildLoaders: { [key: string]: EsbuildLoader } = { ".woff": "file", ".woff2": "file", } +const esbuildAlias: MinistaResolveAlias = [ + { + find: "react/jsx-runtime", + replacement: "react/jsx-runtime.js", + }, +] const userPkgHasPreact = [ ...Object.keys(userPkg.dependencies || {}), ...Object.keys(userPkg.devDependencies || {}), @@ -94,11 +102,14 @@ export async function buildTempPages( buildOptions: { outBase: string outDir: string + alias: MinistaResolveAlias mdxConfig: MdxOptions svgrOptions: SvgrOptions cssOptions: CssOptions } ) { + const alias = getEsbuildAlias([esbuildAlias, buildOptions.alias]) + await esBuild({ entryPoints: entryPoints, outbase: buildOptions.outBase, @@ -114,11 +125,9 @@ export async function buildTempPages( external: esbuildExternals, loader: esbuildLoaders, plugins: [ + resolvePlugin(alias), CssModulePlugin(buildOptions.cssOptions), mdx(buildOptions.mdxConfig), - resolvePlugin({ - "react/jsx-runtime": "react/jsx-runtime.js", - }), svgrPlugin(buildOptions.svgrOptions), rawPlugin(), partialHydrationPlugin(), @@ -633,11 +642,14 @@ export async function buildPartialStringBundle( entryPoint: string, buildOptions: { outFile: string + alias: MinistaResolveAlias mdxConfig: MdxOptions svgrOptions: SvgrOptions cssOptions: CssOptions } ) { + const alias = getEsbuildAlias([esbuildAlias, buildOptions.alias]) + await esBuild({ entryPoints: [entryPoint], outfile: buildOptions.outFile, @@ -651,11 +663,9 @@ export async function buildPartialStringBundle( external: esbuildExternals, loader: esbuildLoaders, plugins: [ + resolvePlugin(alias), CssModulePlugin(buildOptions.cssOptions), mdx(buildOptions.mdxConfig), - resolvePlugin({ - "react/jsx-runtime": "react/jsx-runtime.js", - }), svgrPlugin(buildOptions.svgrOptions), rawPlugin(), ], diff --git a/src/config.ts b/src/config.ts index 87762bf..f20df47 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,9 +1,12 @@ +import type { AliasOptions as ViteAliasOptions } from "vite" import { deepmergeCustom } from "deepmerge-ts" import type { MinistaConfig, MinistaUserConfig, MinistaResolveConfig, + MinistaResolveAliasInput, + MinistaResolveAlias, } from "./types.js" import { systemConfig } from "./system.js" @@ -71,6 +74,9 @@ export const defaultConfig: MinistaConfig = { }, }, vite: {}, + resolve: { + alias: [], + }, css: { modules: { cache: true, @@ -122,11 +128,53 @@ export async function mergeConfig( return mergedConfig } +export async function mergeAlias( + configAlias: MinistaResolveAliasInput, + viteConfigAlias: ViteAliasOptions +): Promise { + const alias: MinistaResolveAlias = [] + + async function getAlias(input: MinistaResolveAliasInput | ViteAliasOptions) { + if (!input) { + return + } else if (Array.isArray(input) && input.length > 0) { + await Promise.all( + input.map(async (item) => { + const pattern = { + find: item.find, + replacement: item.replacement, + } + return alias.push(pattern) + }) + ) + } else if (typeof input === "object") { + await Promise.all( + Object.entries(input).map((item) => { + const pattern = { + find: item[0], + replacement: item[1], + } + return alias.push(pattern) + }) + ) + } + } + await getAlias(configAlias) + await getAlias(viteConfigAlias) + + return alias +} + export async function resolveConfig( config: MinistaConfig ): Promise { - const resolvedConfig = { + const configAlias = config.resolve.alias + const viteConfigAlias = config.vite.resolve?.alias || {} + const alias = await mergeAlias(configAlias, viteConfigAlias) + + const resolvedConfig: MinistaResolveConfig = { ...config, + alias: alias, rootSrcDir: noSlashEnd(config.root.srcDir), pagesSrcDir: noSlashEnd(config.pages.srcDir), publicOutDir: noSlashEnd(config.out), diff --git a/src/esbuild.tsx b/src/esbuild.tsx index 25446ae..6536d97 100644 --- a/src/esbuild.tsx +++ b/src/esbuild.tsx @@ -5,8 +5,20 @@ import fs from "fs-extra" import path from "path" import { v4 as uuidv4 } from "uuid" +import type { MinistaResolveAlias } from "./types.js" import { systemConfig } from "./system.js" +export function getEsbuildAlias(aliasArray: MinistaResolveAlias[]) { + const alias = [...aliasArray].flat() + const result: { [key: string]: string } = Object.assign( + {}, + ...alias.map((item) => ({ + [item.find]: item.replacement, + })) + ) + return result +} + /*! Fork: esbuild-plugin-resolve | https://github.com/markwylde/esbuild-plugin-resolve */ export function resolvePlugin(options: { [key: string]: string }): Plugin { function resolvePluginIntercept( diff --git a/src/generate.ts b/src/generate.ts index 4fa8e08..4b5ca97 100644 --- a/src/generate.ts +++ b/src/generate.ts @@ -69,6 +69,7 @@ export async function generateTempRoot( await buildTempPages([srcRootFilePaths[0]], { outBase: config.rootSrcDir, outDir: systemConfig.temp.root.outDir, + alias: config.alias, mdxConfig: mdxConfig, svgrOptions: config.assets.svgr.svgrOptions, cssOptions: config.css, @@ -87,6 +88,7 @@ export async function generateTempPages( await buildTempPages(srcPageFilePaths, { outBase: config.pagesSrcDir, outDir: systemConfig.temp.pages.outDir, + alias: config.alias, mdxConfig: mdxConfig, svgrOptions: config.assets.svgr.svgrOptions, cssOptions: config.css, @@ -142,8 +144,9 @@ export async function generatePartialHydration( await buildPartialStringBundle(stringIndex, { outFile: stringBundle, mdxConfig: mdxConfig, + alias: config.alias, svgrOptions: config.assets.svgr.svgrOptions, - cssOptions: config.css + cssOptions: config.css, }) await optimizeCommentOutStyleImport([stringBundle]) await buildPartialStringInitial(stringBundle, partialModules, { diff --git a/src/types.ts b/src/types.ts index 27f213b..95c6d9c 100644 --- a/src/types.ts +++ b/src/types.ts @@ -75,6 +75,9 @@ export type MinistaConfig = { } } vite: ViteUserConfig + resolve: { + alias: MinistaResolveAliasInput + } css: CssOptions markdown: { syntaxHighlighter: "highlight" | "none" @@ -150,6 +153,9 @@ export type MinistaUserConfig = { } } vite?: ViteUserConfig + resolve?: { + alias?: MinistaResolveAliasInput + } css?: CssUserOptions markdown?: { syntaxHighlighter?: "highlight" | "none" @@ -165,7 +171,20 @@ export type MinistaUserConfig = { } } -export type MinistaResolveConfig = MinistaConfig & MinistaResolvePathConfig +export type MinistaResolveConfig = MinistaConfig & + MinistaResolveAliasConfig & + MinistaResolvePathConfig + +export type MinistaResolveAliasInput = + | { [key: string]: string } + | { find: string; replacement: string }[] +export type MinistaResolveAlias = { + find: string + replacement: string +}[] +export type MinistaResolveAliasConfig = { + alias: MinistaResolveAlias +} export type MinistaResolvePathConfig = { rootSrcDir: string diff --git a/src/vite.ts b/src/vite.ts index 280ad01..4968046 100644 --- a/src/vite.ts +++ b/src/vite.ts @@ -119,6 +119,14 @@ export async function getViteConfig( const mergedViteConfig = mergeViteConfig(defaultViteConfig, config.vite) + if (config.alias.length > 0) { + await Promise.all( + config.alias.map(async (item) => { + return mergedViteConfig.resolve.alias.push(item) + }) + ) + } + const svgrPlugin = vitePluginMinistaSvgr(config.assets.svgr.svgrOptions) mergedViteConfig.plugins.push(svgrPlugin) diff --git a/test/config.test.ts b/test/config.test.ts index 4258591..b1aa14b 100644 --- a/test/config.test.ts +++ b/test/config.test.ts @@ -1,6 +1,11 @@ import { describe, expect, it } from "vitest" -import { mergeConfig, resolveConfig, defaultConfig } from "../src/config" +import { + mergeConfig, + mergeAlias, + resolveConfig, + defaultConfig, +} from "../src/config" describe("mergeConfig", () => { it("Test: mergeConfig", async () => { @@ -20,6 +25,21 @@ describe("mergeConfig", () => { }) }) +describe("mergeAlias", () => { + it("Test: mergeAlias", async () => { + const userConfig = { "~": "src" } + const result = await mergeAlias(userConfig, {}) + + //console.log(result) + expect(result).toEqual([ + { + find: "~", + replacement: "src", + }, + ]) + }) +}) + describe("resolveConfig", () => { it("Test: resolveConfig", async () => { const result = await resolveConfig(defaultConfig) diff --git a/test/esbuild.test.ts b/test/esbuild.test.ts new file mode 100644 index 0000000..9e7a7f1 --- /dev/null +++ b/test/esbuild.test.ts @@ -0,0 +1,27 @@ +import { describe, expect, it } from "vitest" + +import { getEsbuildAlias } from "../src/esbuild" + +describe("getEsbuildAlias", () => { + it("Test: getEsbuildAlias", () => { + const esbuildAlias = [ + { + find: "react/jsx-runtime", + replacement: "react/jsx-runtime.js", + }, + ] + const userAlias = [ + { + find: "~", + replacement: "/src", + }, + ] + const result = getEsbuildAlias([esbuildAlias, userAlias]) + + //console.log(result) + expect(result).toEqual({ + "react/jsx-runtime": "react/jsx-runtime.js", + "~": "/src", + }) + }) +}) diff --git a/user/minista.config.ts b/user/minista.config.ts index d63da07..0989147 100644 --- a/user/minista.config.ts +++ b/user/minista.config.ts @@ -1,3 +1,4 @@ +import path from "path" import { defineConfig } from "minista" //import remarkFrontmatter from "remark-frontmatter" @@ -26,6 +27,14 @@ export default defineConfig({ minifySyntax: false, }, },*/ + /*vite: { + resolve: { + alias: [{ find: "~", replacement: path.resolve("src") }], + }, + },*/ + resolve: { + alias: [{ find: "~", replacement: path.resolve("src") }], + }, /*markdown: { syntaxHighlighter: "none", //syntaxHighlighter: "highlight", diff --git a/user/src/components/app-layout.tsx b/user/src/components/app-layout.tsx index 516b0ca..5d8021a 100644 --- a/user/src/components/app-layout.tsx +++ b/user/src/components/app-layout.tsx @@ -1,4 +1,4 @@ -import AppHeader from "./app-header" +import AppHeader from "~/components/app-header" type AppLayoutProps = { children: React.ReactNode diff --git a/user/tsconfig.json b/user/tsconfig.json index fd8e1a5..150b6ce 100644 --- a/user/tsconfig.json +++ b/user/tsconfig.json @@ -8,6 +8,9 @@ "skipLibCheck": true, "noErrorTruncation": true, "jsx": "react-jsx", + "paths": { + "~/*": ["./src/*"] + }, "types": ["minista/client"] }, "include": ["./minista.config.ts", "src"]