diff --git a/package.json b/package.json index bfe856a..cb69cb5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "minista", "description": "Next.js Like Development with 100% Static Generate", - "version": "2.6.1", + "version": "2.6.2", "bin": { "minista": "./bin/minista.js" }, diff --git a/src/build.tsx b/src/build.tsx index 8de42ea..9d0a913 100644 --- a/src/build.tsx +++ b/src/build.tsx @@ -18,7 +18,6 @@ import { import type { MinistaResolveConfig, - MinistaResolveAlias, MinistaLocation, RootStaticContent, RootEsmContent, @@ -30,6 +29,7 @@ import type { StaticData, StaticDataItem, GetStaticData, + AliasArray, PartialModules, PartialString, CssOptions, @@ -38,16 +38,14 @@ import type { import { systemConfig } from "./system.js" import { getFilePath } from "./path.js" import { - getEsbuildAlias, resolvePlugin, - aliasPlugin, svgrPlugin, rawPlugin, partialHydrationPlugin, } from "./esbuild.js" import { renderHtml } from "./render.js" import { slashEnd, reactStylesToString } from "./utils.js" -import { CssModulePlugin } from "./css.js" +import { cssModulePlugin } from "./css.js" const __filename = url.fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) @@ -97,14 +95,12 @@ export async function buildTempPages( buildOptions: { outBase: string outDir: string - alias: MinistaResolveAlias + alias: AliasArray mdxConfig: MdxOptions svgrOptions: SvgrOptions cssOptions: CssOptions } ) { - const alias = getEsbuildAlias([buildOptions.alias]) - await esBuild({ entryPoints: entryPoints, outbase: buildOptions.outBase, @@ -121,12 +117,11 @@ export async function buildTempPages( loader: esbuildLoaders, plugins: [ resolvePlugin({ "react/jsx-runtime": "react/jsx-runtime.js" }), - aliasPlugin(alias), - CssModulePlugin(buildOptions.cssOptions), + cssModulePlugin(buildOptions.cssOptions, buildOptions.alias), mdx(buildOptions.mdxConfig), svgrPlugin(buildOptions.svgrOptions), - rawPlugin(), - partialHydrationPlugin(), + rawPlugin(buildOptions.alias), + partialHydrationPlugin(buildOptions.alias), ], }).catch(() => process.exit(1)) } @@ -638,14 +633,12 @@ export async function buildPartialStringBundle( entryPoint: string, buildOptions: { outFile: string - alias: MinistaResolveAlias + alias: AliasArray mdxConfig: MdxOptions svgrOptions: SvgrOptions cssOptions: CssOptions } ) { - const alias = getEsbuildAlias([buildOptions.alias]) - await esBuild({ entryPoints: [entryPoint], outfile: buildOptions.outFile, @@ -660,11 +653,10 @@ export async function buildPartialStringBundle( loader: esbuildLoaders, plugins: [ resolvePlugin({ "react/jsx-runtime": "react/jsx-runtime.js" }), - aliasPlugin(alias), - CssModulePlugin(buildOptions.cssOptions), + cssModulePlugin(buildOptions.cssOptions, buildOptions.alias), mdx(buildOptions.mdxConfig), svgrPlugin(buildOptions.svgrOptions), - rawPlugin(), + rawPlugin(buildOptions.alias), ], }).catch(() => process.exit(1)) } diff --git a/src/config.ts b/src/config.ts index f20df47..3e50119 100644 --- a/src/config.ts +++ b/src/config.ts @@ -6,7 +6,7 @@ import type { MinistaUserConfig, MinistaResolveConfig, MinistaResolveAliasInput, - MinistaResolveAlias, + AliasArray, } from "./types.js" import { systemConfig } from "./system.js" @@ -131,8 +131,8 @@ export async function mergeConfig( export async function mergeAlias( configAlias: MinistaResolveAliasInput, viteConfigAlias: ViteAliasOptions -): Promise { - const alias: MinistaResolveAlias = [] +): Promise { + const alias: AliasArray = [] async function getAlias(input: MinistaResolveAliasInput | ViteAliasOptions) { if (!input) { diff --git a/src/css.ts b/src/css.ts index 466d89d..150b0e1 100644 --- a/src/css.ts +++ b/src/css.ts @@ -8,7 +8,9 @@ import path from "path" import postcss from "postcss" import postcssModules from "postcss-modules" -import type { CssOptions } from "./types.js" +import type { AliasArray, CssOptions } from "./types.js" + +import { getEsbuildResolvePath } from "./esbuild.js" enum PreprocessLang { less = "less", @@ -146,7 +148,10 @@ async function buildJs(filepath: string, options: CssOptions) { return `export default ${classNames};` } -export function CssModulePlugin(options: CssOptions): Plugin { +export function cssModulePlugin( + options: CssOptions, + alias: AliasArray +): Plugin { const filter = new RegExp(`\\.module${cssLangs}`) return { name: PLUGIN, @@ -154,19 +159,21 @@ export function CssModulePlugin(options: CssOptions): Plugin { const results = new Map() build.onResolve({ filter, namespace: "file" }, async (args) => { if (!options.modules) return args - const sourceFullPath = path.resolve(args.resolveDir, args.path) - if (results.has(sourceFullPath)) return results.get(sourceFullPath) - const content = await buildJs(sourceFullPath, options) + const resolvePath = getEsbuildResolvePath(args, alias) + if (results.has(resolvePath)) return results.get(resolvePath) + + const content = await buildJs(resolvePath, options) + const result = { - path: args.path, + path: resolvePath, namespace: PLUGIN, pluginData: { content, }, } - if (options.modules.cache) results.set(sourceFullPath, result) + if (options.modules.cache) results.set(resolvePath, result) return result }) diff --git a/src/esbuild.tsx b/src/esbuild.tsx index 4132aaa..e8de135 100644 --- a/src/esbuild.tsx +++ b/src/esbuild.tsx @@ -1,26 +1,42 @@ -import type { Plugin, PluginBuild } from "esbuild" +import type { Plugin, PluginBuild, OnResolveArgs } from "esbuild" import type { Config as SvgrOptions } from "@svgr/core" import fs from "fs-extra" import path from "path" import { v4 as uuidv4 } from "uuid" -import type { MinistaResolveAlias } from "./types.js" +import type { AliasObject, AliasArray } from "./types.js" import { systemConfig } from "./system.js" -export function getEsbuildAlias(aliasArray: MinistaResolveAlias[]) { - const alias = [...aliasArray].flat() - const result: { [key: string]: string } = Object.assign( +export function getEsbuildResolvePath( + args: OnResolveArgs, + alias: AliasArray +): string { + const aliasObject = Object.assign( {}, ...alias.map((item) => ({ [item.find]: item.replacement, })) ) - return result + function escapeRegExp(find: string) { + return find.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + } + const aliasKeys = Object.keys(aliasObject) + const aliasReg = new RegExp( + `^(${aliasKeys.map((x) => escapeRegExp(x)).join("|")})` + ) + const aliasPath = args.path.replace(aliasReg, function (match) { + return aliasObject[match] + }) + const absolutePath = path.isAbsolute(aliasPath) + ? aliasPath + : path.join(args.resolveDir, aliasPath) + const replacedPath = absolutePath.replaceAll("\\", "/") + return replacedPath } /*! Fork: esbuild-plugin-resolve | https://github.com/markwylde/esbuild-plugin-resolve */ -export function resolvePlugin(options: { [key: string]: string }): Plugin { +export function resolvePlugin(alias: AliasObject): Plugin { function resolvePluginIntercept( build: PluginBuild, moduleName: string, @@ -57,31 +73,13 @@ export function resolvePlugin(options: { [key: string]: string }): Plugin { return { name: "esbuild-resolve", setup: (build: PluginBuild) => { - for (const moduleName of Object.keys(options)) { - resolvePluginIntercept(build, moduleName, options[moduleName]) + for (const moduleName of Object.keys(alias)) { + resolvePluginIntercept(build, moduleName, alias[moduleName]) } }, } } -/*! Fork: esbuild-plugin-alias | https://github.com/igoradamenko/esbuild-plugin-alias */ -export function aliasPlugin(options: { [key: string]: string }): Plugin { - function escapeRegExp(name: string) { - return name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") - } - const aliases = Object.keys(options) - const re = new RegExp(`^(${aliases.map((x) => escapeRegExp(x)).join("|")})$`) - - return { - name: "esbuild-alias", - setup(build) { - build.onResolve({ filter: re }, (args) => ({ - path: options[args.path], - })) - }, - } -} - /*! Fork: esbuild-plugin-svgr | https://github.com/kazijawad/esbuild-plugin-svgr */ export function svgrPlugin(options: SvgrOptions): Plugin { return { @@ -105,15 +103,14 @@ export function svgrPlugin(options: SvgrOptions): Plugin { } /*! Fork: esbuild-plugin-resolve | https://github.com/hannoeru/esbuild-plugin-raw */ -export function rawPlugin(): Plugin { +export function rawPlugin(alias: AliasArray): Plugin { return { name: "esbuild-raw", setup(build) { build.onResolve({ filter: /\?raw$/ }, (args) => { + const resolvePath = getEsbuildResolvePath(args, alias) return { - path: path.isAbsolute(args.path) - ? args.path - : path.join(args.resolveDir, args.path), + path: resolvePath, namespace: "raw-loader", } }) @@ -130,16 +127,14 @@ export function rawPlugin(): Plugin { } } -export function partialHydrationPlugin(): Plugin { +export function partialHydrationPlugin(alias: AliasArray): Plugin { return { name: "esbuild-partial-hydration", setup(build) { build.onResolve({ filter: /\?ph$/ }, (args) => { + const resolvePath = getEsbuildResolvePath(args, alias) return { - path: (path.isAbsolute(args.path) - ? args.path - : path.join(args.resolveDir, args.path) - ).replaceAll("\\", "/"), + path: resolvePath, namespace: "partial-hydration-loader", } }) diff --git a/src/types.ts b/src/types.ts index 95c6d9c..792e9a1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -175,15 +175,9 @@ 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 MinistaResolveAliasInput = AliasObject | AliasArray export type MinistaResolveAliasConfig = { - alias: MinistaResolveAlias + alias: AliasArray } export type MinistaResolvePathConfig = { @@ -282,6 +276,9 @@ export type StaticDataItem = { export type StaticDataCache = { key: [StaticDataList] } | {} export type GetStaticData = () => Promise +export type AliasObject = { [key: string]: string } +export type AliasArray = { find: string; replacement: string }[] + export type PartialModules = { id: string phId: string diff --git a/test/esbuild.test.ts b/test/esbuild.test.ts index 9e7a7f1..1077fe6 100644 --- a/test/esbuild.test.ts +++ b/test/esbuild.test.ts @@ -1,27 +1,25 @@ +import type { OnResolveArgs } from "esbuild" + import { describe, expect, it } from "vitest" -import { getEsbuildAlias } from "../src/esbuild" +import { getEsbuildResolvePath } 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]) +describe("getEsbuildResolvePath", () => { + it("Test: getEsbuildResolvePath", () => { + const args: OnResolveArgs = { + path: "~/components/app-header?ph", + importer: "/Users/user/github/demo/src/components/app-layout.tsx", + namespace: "file", + resolveDir: "/Users/user/github/demo/src/components", + kind: "import-statement", + pluginData: undefined, + } + const alias = [{ find: "~", replacement: "/Users/user/github/demo/src" }] + const result = getEsbuildResolvePath(args, alias) //console.log(result) - expect(result).toEqual({ - "react/jsx-runtime": "react/jsx-runtime.js", - "~": "/src", - }) + expect(result).toEqual( + "/Users/user/github/demo/src/components/app-header?ph" + ) }) }) diff --git a/user/src/components/app-header.tsx b/user/src/components/app-header.tsx index d666494..8973d5a 100644 --- a/user/src/components/app-header.tsx +++ b/user/src/components/app-header.tsx @@ -1,6 +1,6 @@ import "./app-header.css" -export const AppHeader = () => { +const AppHeader = () => { return (
{ ) } -//export default AppHeader +export default AppHeader diff --git a/user/src/components/app-layout.tsx b/user/src/components/app-layout.tsx index b65e613..476153f 100644 --- a/user/src/components/app-layout.tsx +++ b/user/src/components/app-layout.tsx @@ -1,4 +1,4 @@ -import { AppHeader } from "~/components/app-header" +import AppHeader from "~/components/app-header?ph" type AppLayoutProps = { children: React.ReactNode diff --git a/user/src/pages/css-modules/index.tsx b/user/src/pages/css-modules/index.tsx index cc2c1ec..1b6b307 100644 --- a/user/src/pages/css-modules/index.tsx +++ b/user/src/pages/css-modules/index.tsx @@ -1,5 +1,5 @@ import { Head } from "minista" -import style from "../../assets/css-modules/style.module.css" +import style from "~/assets/css-modules/style.module.css" import AppLayout from "../../components/app-layout" diff --git a/user/src/pages/raw/index.tsx b/user/src/pages/raw/index.tsx index 0ed121c..2c29950 100644 --- a/user/src/pages/raw/index.tsx +++ b/user/src/pages/raw/index.tsx @@ -1,7 +1,7 @@ import { Head } from "minista" import AppLayout from "../../components/app-layout" -import demo from "../../assets/others/demo.html?raw" +import demo from "~/assets/others/demo.html?raw" const PageRaw = () => { return (