minista 2.0.0 → 2.2.0

package/README.md

@@ -39,8 +39,8 @@ public # Copy dist
 src
 └── pages # Required!
     ├── about
-    │   └── index.tsx
-    └── index.tsx
+    │   └── index.jsx
+    └── index.jsx
 ```
 
 <!-- prettier-ignore -->
@@ -105,6 +105,9 @@ export default defineConfig({
       outDir: "assets/fonts", // string
       outName: "[name]", // string
     },
+    svgr: {
+      svgrOptions: {}, // https://react-svgr.com/docs/options/
+    },
     icons: {
       useSprite: true, // boolean
       srcDir: "src/assets/icons", // string
@@ -153,9 +156,9 @@ export default defineConfig({
 
 ## Media
 
-- v1
-  - [React で書ける SSG 改善点と今後について - minista v1](https://zenn.dev/qrac/articles/a24de970148c7e)
-  - [React(JSX)で書けるコーディング用 SSG - minista v0](https://zenn.dev/qrac/articles/7537521afcd1bf)
+- [Vite と esbuild を組み込み React 製 SSG を再構築 - minista v2](https://zenn.dev/qrac/articles/fbbbe7ccc3bdb1)
+- [React で書ける SSG 改善点と今後について - minista v1](https://zenn.dev/qrac/articles/a24de970148c7e)
+- [React(JSX)で書けるコーディング用 SSG - minista v0](https://zenn.dev/qrac/articles/7537521afcd1bf)
 
 ## Respect
 

package/client.d.ts

@@ -0,0 +1,13 @@
+declare module "*.svg" {
+  import * as React from "react"
+
+  const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >
+  export default ReactComponent
+}
+
+declare module "*?raw" {
+  const src: string
+  export default src
+}

package/dist/build.d.ts

@@ -1,10 +1,12 @@
 import type { Options as MdxOptions } from "@mdx-js/esbuild";
+import type { Config as SvgrOptions } from "@svgr/core";
 import type { InlineConfig } from "vite";
 import type { MinistaResolveConfig, RootStaticContent, RootJsxContent, GlobalStaticData, GetGlobalStaticData, PageJsxContent, StaticData, StaticDataItem, GetStaticData } from "./types.js";
 export declare function buildTempPages(entryPoints: string[], buildOptions: {
     outBase: string;
     outDir: string;
     mdxConfig: MdxOptions;
+    svgrOptions: SvgrOptions;
 }): Promise<void>;
 export declare function buildStaticPages(entryPoints: string[], tempRootFilePath: string, buildOptions: {
     outBase: string;

package/dist/build.js

@@ -27,7 +27,7 @@ import { build as esBuild } from "esbuild";
 import mdx from "@mdx-js/esbuild";
 import { build as viteBuild, mergeConfig as mergeViteConfig } from "vite";
 import { systemConfig } from "./system.js";
-import { resolvePlugin } from "./esbuild.js";
+import { resolvePlugin, svgrPlugin, rawPlugin } from "./esbuild.js";
 import { renderHtml } from "./render.js";
 import { slashEnd } from "./utils.js";
 const __filename = url.fileURLToPath(import.meta.url);
@@ -65,7 +65,9 @@ async function buildTempPages(entryPoints, buildOptions) {
       mdx(buildOptions.mdxConfig),
       resolvePlugin({
         "react/jsx-runtime": "react/jsx-runtime.js"
-      })
+      }),
+      svgrPlugin(buildOptions.svgrOptions),
+      rawPlugin()
     ]
   }).catch(() => process.exit(1));
 }
@@ -262,7 +264,7 @@ async function buildViteImporterRoutes(config) {
   });
   const replaceFileNameArrayStr = replaceFileNameArray.join("\n      ");
   const template = `export const getRoutes = () => {
-  const ROUTES = import.meta.globEager("/${pagesDir}**/[a-z[]*.{${pagesExtStr}}")
+  const ROUTES = import.meta.globEager("/${pagesDir}**/*.{${pagesExtStr}}")
   const routes = Object.keys(ROUTES).map((route) => {
     const routePath = route
       ${replacePagesStr}

package/dist/config.js

@@ -49,6 +49,9 @@ const defaultConfig = {
       outDir: "assets/fonts",
       outName: "[name]"
     },
+    svgr: {
+      svgrOptions: {}
+    },
     icons: {
       useSprite: true,
       srcDir: "src/assets/icons",

package/dist/esbuild.d.ts

@@ -1,5 +1,10 @@
 import type { Plugin } from "esbuild";
+import type { Config as SvgrOptions } from "@svgr/core";
 /*! Fork: esbuild-plugin-resolve | https://github.com/markwylde/esbuild-plugin-resolve */
 export declare function resolvePlugin(options: {
     [key: string]: string;
 }): Plugin;
+/*! Fork: esbuild-plugin-svgr | https://github.com/kazijawad/esbuild-plugin-svgr */
+export declare function svgrPlugin(options: SvgrOptions): Plugin;
+/*! Fork: esbuild-plugin-resolve | https://github.com/hannoeru/esbuild-plugin-raw */
+export declare function rawPlugin(): Plugin;

package/dist/esbuild.js

@@ -1,4 +1,22 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import React from "react";
+import fs from "fs-extra";
+import path from "path";
 /*! Fork: esbuild-plugin-resolve | https://github.com/markwylde/esbuild-plugin-resolve */
 function resolvePlugin(options) {
   return {
@@ -33,6 +51,45 @@ function resolvePluginIntercept(build, moduleName, moduleTarget) {
     return { contents: importerCode, resolveDir: args.pluginData.resolveDir };
   });
 }
+/*! Fork: esbuild-plugin-svgr | https://github.com/kazijawad/esbuild-plugin-svgr */
+function svgrPlugin(options) {
+  return {
+    name: "esbuild-svgr",
+    setup(build) {
+      build.onLoad({ filter: /\.svg$/ }, async (args) => {
+        const { transform: transformSvgr } = await import("@svgr/core");
+        const svg = await fs.promises.readFile(args.path, "utf8");
+        const contents = await transformSvgr(svg, __spreadValues({}, options), { filePath: args.path });
+        return {
+          contents,
+          loader: options.typescript ? "tsx" : "jsx"
+        };
+      });
+    }
+  };
+}
+/*! Fork: esbuild-plugin-resolve | https://github.com/hannoeru/esbuild-plugin-raw */
+function rawPlugin() {
+  return {
+    name: "esbuild-raw",
+    setup(build) {
+      build.onResolve({ filter: /\?raw$/ }, (args) => {
+        return {
+          path: path.isAbsolute(args.path) ? args.path : path.join(args.resolveDir, args.path),
+          namespace: "raw-loader"
+        };
+      });
+      build.onLoad({ filter: /\?raw$/, namespace: "raw-loader" }, async (args) => {
+        return {
+          contents: await fs.promises.readFile(args.path.replace(/\?raw$/, "")),
+          loader: "text"
+        };
+      });
+    }
+  };
+}
 export {
-  resolvePlugin
+  rawPlugin,
+  resolvePlugin,
+  svgrPlugin
 };

package/dist/generate.js

@@ -35,7 +35,8 @@ async function generateTempRoot(config, mdxConfig) {
     await buildTempPages([srcRootFilePaths[0]], {
       outBase: config.rootSrcDir,
       outDir: systemConfig.temp.root.outDir,
-      mdxConfig
+      mdxConfig,
+      svgrOptions: config.assets.svgr.svgrOptions
     });
   }
 }
@@ -44,7 +45,8 @@ async function generateTempPages(config, mdxConfig) {
   await buildTempPages(srcPageFilePaths, {
     outBase: config.pagesSrcDir,
     outDir: systemConfig.temp.pages.outDir,
-    mdxConfig
+    mdxConfig,
+    svgrOptions: config.assets.svgr.svgrOptions
   });
 }
 async function generateAssets(config, viteConfig) {

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import type { ExoticComponent } from "react";
 import type { UserConfig as ViteUserConfig } from "vite";
+import type { Config as SvgrOptions } from "@svgr/core";
 import type { Options as HighlightOptions } from "rehype-highlight";
 import type { Options as MdxOptions } from "@mdx-js/esbuild";
 import type { HTMLBeautifyOptions, CSSBeautifyOptions, JSBeautifyOptions } from "js-beautify";
@@ -33,6 +34,9 @@ export declare type MinistaConfig = {
             outDir: string;
             outName: string;
         };
+        svgr: {
+            svgrOptions: SvgrOptions;
+        };
         icons: {
             useSprite: boolean;
             srcDir: string;
@@ -91,6 +95,9 @@ export declare type MinistaUserConfig = {
             outDir?: string;
             outName?: string;
         };
+        svgr?: {
+            svgrOptions?: SvgrOptions;
+        };
         icons?: {
             useSprite?: boolean;
             srcDir?: string;

package/dist/vite.d.ts

@@ -1,7 +1,10 @@
 import type { UserConfig as ViteConfig, Plugin } from "vite";
+import type { Config as SvgrOptions } from "@svgr/core";
 import type { Options as MdxOptions } from "@mdx-js/esbuild";
 import type { MinistaResolveConfig, MinistaSvgstoreOptions } from "./types.js";
 export declare function getViteConfig(config: MinistaResolveConfig, mdxConfig: MdxOptions): Promise<ViteConfig>;
 export declare function resolveEntry(entry: string | string[] | {}): {};
 export declare function vitePluginMinistaVirtualHtml(): Plugin;
+/*! Fork: vite-plugin-svgr | https://github.com/pd4d10/vite-plugin-svgr */
+export declare function vitePluginMinistaSvgr(svgrOptions: SvgrOptions): Plugin;
 export declare function vitePluginMinistaSvgSpriteIcons(srcDir: string, options: MinistaSvgstoreOptions | undefined, output: string, tempOutput: string): Plugin;

package/dist/vite.js

@@ -7,7 +7,8 @@ import {
   defineConfig as defineViteConfig,
   searchForWorkspaceRoot,
   createLogger,
-  mergeConfig as mergeViteConfig
+  mergeConfig as mergeViteConfig,
+  transformWithEsbuild
 } from "vite";
 import react from "@vitejs/plugin-react";
 import mdx from "@mdx-js/rollup";
@@ -90,6 +91,8 @@ async function getViteConfig(config, mdxConfig) {
     customLogger: createLogger("info", { prefix: "[minista]" })
   });
   const mergedViteConfig = mergeViteConfig(viteConfig, config.vite);
+  const svgrPlugin = vitePluginMinistaSvgr(config.assets.svgr.svgrOptions);
+  mergedViteConfig.plugins.push(svgrPlugin);
   if (config.assets.icons.useSprite) {
     const iconsPlugin = vitePluginMinistaSvgSpriteIcons(config.vitePluginSvgSpriteIconsSrcDir, config.assets.icons.svgstoreOptions, config.out + config.vitePluginSvgSpriteIconsOutput, config.vitePluginSvgSpriteIconsTempOutput);
     const iconsResolveAlias = {
@@ -166,6 +169,29 @@ function vitePluginMinistaVirtualHtml() {
     }
   };
 }
+/*! Fork: vite-plugin-svgr | https://github.com/pd4d10/vite-plugin-svgr */
+function vitePluginMinistaSvgr(svgrOptions) {
+  return {
+    name: "vite-plugin-minista-svgr",
+    async transform(code, id) {
+      if (id.endsWith(".svg")) {
+        const { transform: transformSvgr } = await import("@svgr/core");
+        const svgCode = await fs.promises.readFile(id, "utf8");
+        const componentCode = await transformSvgr(svgCode, svgrOptions, {
+          componentName: "ReactComponent",
+          filePath: id
+        });
+        const res = await transformWithEsbuild(componentCode, id, {
+          loader: "jsx"
+        });
+        return {
+          code: res.code,
+          map: null
+        };
+      }
+    }
+  };
+}
 function vitePluginMinistaSvgSpriteIcons(srcDir, options = {}, output, tempOutput) {
   async function getSvgSpriteFile(spriteOutput) {
     const svgFiles = await getFilePaths(srcDir, "svg");
@@ -223,5 +249,6 @@ export {
   getViteConfig,
   resolveEntry,
   vitePluginMinistaSvgSpriteIcons,
+  vitePluginMinistaSvgr,
   vitePluginMinistaVirtualHtml
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "minista",
   "description": "Next.js Like Development with 100% Static Generate",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "bin": {
     "minista": "./bin/minista.js"
   },
@@ -10,7 +10,8 @@
   "type": "module",
   "files": [
     "dist",
-    "lib"
+    "lib",
+    "client.d.ts"
   ],
   "license": "MIT",
   "homepage": "https://github.com/qrac/minista",
@@ -71,6 +72,7 @@
     "@mdx-js/esbuild": "^2.1.1",
     "@mdx-js/react": "^2.1.1",
     "@mdx-js/rollup": "^2.1.1",
+    "@svgr/core": "^6.2.1",
     "@vitejs/plugin-react": "^1.3.0",
     "cac": "^6.7.12",
     "deepmerge-ts": "^4.0.2",