Added alias settings for Import paths #46

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,

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"
   },

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(),
     ],

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<MinistaResolveAlias> {
+  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<MinistaResolveConfig> {
-  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),

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(

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, {

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

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)
 

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)

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",
+    })
+  })
+})

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",

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

user/tsconfig.json

@@ -8,6 +8,9 @@
     "skipLibCheck": true,
     "noErrorTruncation": true,
     "jsx": "react-jsx",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
     "types": ["minista/client"]
   },
   "include": ["./minista.config.ts", "src"]