minista 4.0.0-alpha.9 → 4.0.1

package/README.md

@@ -6,36 +6,45 @@
 
 ## About
 
-minista（ミニスタ）は React の JSX から綺麗な HTML を作る日本製のスタティックサイトジェネレーターです。
+minista（ミニスタ）は、React の JSX と Vite で 100%静的なサイトを作るスタティックサイトジェネレーターです。
 
-本体パッケージ `minista` は Vite に指示を出すラッパーです。Vite との違いは、ビルド時に自動で「SSR ビルド + 通常ビルド」の指示を出し、HTML の書き出しを簡略化している点です。
+## Concept
 
-## How To Use
+- **すべてを JSX で書き、綺麗な HTML を生成！**
+- 静的 HTML が必要なウェブ制作の現場にも JSX のコンポーネント管理を導入したい
+- 独自構文を使わず、エディタサポートの優れた TypeScript を活用したい
 
-### Automatic Setup
+## Features
+
+- すべての機能を Vite プラグインとして提供
+- ビルド時に自動で Vite の「SSR ビルド + 通常ビルド」を実行
+
+## Setup
+
+### Automatic
 
 ```sh
 $ npm create minista@latest
 ```
 
-### Manual Setup
+### Manual
 
 ```sh
-$ npm install --save-dev minista minista-plugin-ssg vite react react-dom
+$ npm install --save-dev minista vite react react-dom
 $ touch ./minista.config.js
 $ touch ./src/pages/index.jsx
 ```
 
 ```js
 // ./minista.config.js
-import { pluginSsg } from "minista-plugin-ssg"
+import { pluginSsg } from "minista"
 
 export default {
   plugins: [pluginSsg()],
 }
 ```
 
-```js
+```jsx
 // ./src/pages/index.jsx
 export default function () {
   return <h1>Hello!</h1>
@@ -45,30 +54,72 @@ export default function () {
 `package.json` を開き、以下のスクリプトを追加します。
 
 ```json
-"scripts": {
-  "dev": "minista",
-  "build": "minista build",
-  "preview": "minista preview",
+{
+  "scripts": {
+    "dev": "minista",
+    "build": "minista build",
+    "preview": "minista preview"
+  }
 }
 ```
 
-## Commands
+## CLI
+
+| コマンド                 | 内容                                           |
+| ------------------------ | ---------------------------------------------- |
+| `minista [root]`         | 開発モード（`Ctrl + C` で停止）                |
+| `minista build [root]`   | 静的書き出し（SSR ビルド後に連続で通常ビルド） |
+| `minista preview [root]` | 静的書き出し後の動作確認                       |
+
+[Vite の CLI コマンドオプション](https://ja.vitejs.dev/guide/cli.html)がすべて使えるほか、以下の独自オプションがあります。
+
+| 独自のオプション | 内容                                              |
+| ---------------- | ------------------------------------------------- |
+| `--oneBuild`     | minista のビルドを 1 回に制限（連続ビルドしない） |
 
-[Vite の CLI コマンドとオプション](https://ja.vitejs.dev/guide/cli.html)がすべて使えます。
+## Config
 
-| コマンド                 | 内容                            |
-| ------------------------ | ------------------------------- |
-| `minista [root]`         | 開発モード（`Ctrl + C` で停止） |
-| `minista build [root]`   | 静的書き出し                    |
-| `minista preview [root]` | 静的書き出し後の動作確認        |
+[Vite のコンフィグ](https://ja.vitejs.dev/config/)がすべて使えます。コンフィグファイルは `minista.config.{ts,js}`・`vite.config.{ts,js}` のどちらでも動作し、`defineConfig` も使用できます。
 
-| minista 独自のオプション | 内容                              |
-| ------------------------ | --------------------------------- |
-| `--oneBuild`             | minista のビルドを 1 回に制限する |
+```ts
+// ./minista.config.ts
+import { defineConfig, pluginSsg } from "minista"
 
-## Settings
+export default defineConfig({
+  plugins: [pluginSsg()],
+})
+```
+
+minista は Vite の SSR ビルドと通常ビルドを連続で行うため、ビルドの一括設定がエラーに繋がる場合があります。これは設定を SSR ビルド用・通常ビルド用に切り分けることで解消できます。
+
+```ts
+// ./minista.config.ts
+import { defineConfig, pluginSsg } from "minista"
+
+export default defineConfig(({ command, isSsrBuild }) => {
+  const isDev = command === "serve"
+  const isSsr = command === "build" && isSsrBuild
+  const isBuild = command === "build" && !isSsrBuild
+  return { plugins: [pluginSsg()], build: { minify: isBuild ? false : true } }
+})
+```
 
-[Vite の 設定](https://ja.vitejs.dev/config/)がすべて使えます。コンフィグファイルは `minista.config.{ts|js}` または `vite.config.{ts|js}` のどちらでも動作します。
+## Plugins
+
+minista の各機能は同封されているプラグインをコンフィグに登録することで動作します。
+
+- [pluginSsg](https://minista.qranoko.jp/docs/plugins/ssg): React の JSX を静的な HTML に変換
+- [pluginMdx](https://minista.qranoko.jp/docs/plugins/mdx): MDX・Markdown を HTML の変換に対応させる
+- [pluginBundle](https://minista.qranoko.jp/docs/plugins/bundle): JSX 内で import した CSS・画像を出力
+- [pluginEntry](https://minista.qranoko.jp/docs/plugins/entry): CSS・JS・画像をビルドプロセスに乗せる
+- [pluginImage](https://minista.qranoko.jp/docs/plugins/image): 画像を最適化・リモート画像をダウンロード
+- [pluginSvg](https://minista.qranoko.jp/docs/plugins/svg): SVG ファイルを HTML にインライン展開
+- [pluginSprite](https://minista.qranoko.jp/docs/plugins/sprite): SVG ファイルを スプライト化して出力
+- [pluginComment](https://minista.qranoko.jp/docs/plugins/comment): HTML にコメントを出力
+- [pluginIsland](https://minista.qranoko.jp/docs/plugins/island): ページの一部を React App 化
+- [pluginSearch](https://minista.qranoko.jp/docs/plugins/search): 全文検索機能を追加
+- [pluginBeautify](https://minista.qranoko.jp/docs/plugins/beautify): ビルド時に HTML・CSS・JS を整形
+- [pluginArchive](https://minista.qranoko.jp/docs/plugins/archive): ビルド時に圧縮ファイルを生成
 
 ## License
 

package/bin/minista.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import("../dist/node/cli.js")
+import("../src/cli/index.js")

package/package.json

@@ -1,28 +1,43 @@
 {
   "name": "minista",
-  "version": "4.0.0-alpha.9",
+  "version": "4.0.1",
   "type": "module",
-  "engines": {
-    "node": "^18.0.0 || >=20.0.0"
-  },
   "bin": {
     "minista": "./bin/minista.js"
   },
-  "types": "dist/types/@types/node.d.ts",
-  "main": "dist/node/index.js",
+  "main": "./src/node.js",
+  "types": "./src/node.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/types/@types/node.d.ts",
-      "default": "./dist/node/index.js"
+      "import": "./src/node.js",
+      "types": "./src/node.d.ts"
+    },
+    "./types": {
+      "types": "./src/types.d.ts"
     },
     "./client": {
-      "types": "./client.d.ts"
+      "types": "./src/client.d.ts"
+    },
+    "./context": {
+      "import": "./src/context.js",
+      "types": "./src/context.d.ts"
+    },
+    "./head": {
+      "import": "./src/head.js",
+      "types": "./src/head.d.ts"
+    },
+    "./assets": {
+      "import": "./src/assets.js",
+      "types": "./src/assets.d.ts"
+    },
+    "./package.json": {
+      "import": "./package.json"
     }
   },
   "files": [
     "bin",
-    "dist",
-    "client.d.ts"
+    "src",
+    "types"
   ],
   "license": "MIT",
   "homepage": "https://minista.qranoko.jp",
@@ -37,35 +52,34 @@
   "keywords": [
     "static-site-generator",
     "ssg",
-    "coding",
     "react",
-    "jsx",
-    "tsx",
-    "typescript",
-    "esbuild",
-    "vite",
-    "japanese",
+    "vite-plugin",
     "minista"
   ],
-  "author": {
-    "name": "Qrac",
-    "url": "https://qrac.jp"
-  },
-  "organization": {
-    "name": "QRANOKO",
-    "url": "https://qranoko.jp"
-  },
-  "scripts": {
-    "build": "npm run clean && npm run build-src && npm run build-type",
-    "build-src": "esbuild ./src/node/*.ts --outbase=src --outdir=dist",
-    "build-type": "tsc",
-    "clean": "rimraf ./dist",
-    "prepublishOnly": "npm run build"
+  "engines": {
+    "node": ">=20.0.0"
   },
   "peerDependencies": {
-    "vite": ">=5.0.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "vite": ">=6.3.0"
   },
   "dependencies": {
-    "minista-shared-utils": "^4.0.0-alpha.9"
+    "@mdx-js/rollup": "^3.1.1",
+    "@swc/core": "^1.15.21",
+    "archiver": "^7.0.1",
+    "cross-spawn": "^7.0.6",
+    "image-size": "^2.0.2",
+    "js-beautify": "^1.15.4",
+    "mime-types": "^3.0.2",
+    "mojigiri": "^0.3.0",
+    "node-html-parser": "^7.1.0",
+    "picocolors": "^1.1.1",
+    "picomatch": "^4.0.4",
+    "remark-frontmatter": "^5.0.0",
+    "remark-mdx-frontmatter": "^5.2.0",
+    "sharp": "^0.34.5",
+    "svgo": "^4.0.1",
+    "tinyglobby": "^0.2.15"
   }
 }

package/src/assets.d.ts

@@ -0,0 +1,12 @@
+import type { ImageProps, PictureProps } from "./plugins/image/types"
+import type { SvgProps } from "./plugins/svg/types"
+import type { SpriteProps } from "./plugins/sprite/types"
+import type { CommentProps } from "./plugins/comment/types"
+import type { SearchProps } from "./plugins/search/types"
+
+export declare function Image(props: ImageProps): React.ReactElement
+export declare function Picture(props: PictureProps): React.ReactElement
+export declare function Svg(props: SvgProps): React.ReactElement
+export declare function Sprite(props: SpriteProps): React.ReactElement
+export declare function Comment(props: CommentProps): React.ReactElement
+export declare function Search(props: SearchProps): React.ReactElement

package/src/assets.js

@@ -0,0 +1,6 @@
+export { Image } from "./plugins/image/components/image.js"
+export { Picture } from "./plugins/image/components/picture.js"
+export { Svg } from "./plugins/svg/components/svg.js"
+export { Sprite } from "./plugins/sprite/components/sprite.js"
+export { Comment } from "./plugins/comment/components/comment.js"
+export { Search } from "./plugins/search/components/search.js"

package/src/cli/index.js

@@ -0,0 +1,28 @@
+import {
+  findRootArg,
+  checkOneBuildArg,
+  resolveConfigArg,
+  resolveOneBuildArg,
+  resolveSsrArg,
+} from "./utils/arg.js"
+import { findConfigFile } from "./utils/file.js"
+import { runMinista } from "./utils/command.js"
+
+async function main() {
+  let args = process.argv.slice(2)
+
+  const rootArg = findRootArg(args)
+  const isOneBuild = checkOneBuildArg(args)
+  const configFile = findConfigFile(rootArg)
+
+  args = resolveConfigArg(args, configFile)
+  args = resolveOneBuildArg(args, isOneBuild)
+  args = resolveSsrArg(args, isOneBuild)
+
+  await runMinista(args, isOneBuild)
+}
+
+main().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})

package/src/cli/utils/arg.js

@@ -0,0 +1,76 @@
+/**
+ * @param {string[]} args
+ * @returns {string}
+ */
+export function findRootArg(args) {
+  if (!args.length) {
+    return ""
+  }
+  const commands = /^(dev|build|optimize|preview)$/
+
+  if (!args[0].startsWith("-") && !args[0].match(commands)) {
+    return args[0]
+  }
+  if (args.length >= 2 && args[0].match(commands) && !args[1].startsWith("-")) {
+    return args[1]
+  }
+  return ""
+}
+
+/**
+ * @param {string[]} args
+ * @returns {boolean}
+ */
+export function checkOneBuildArg(args) {
+  return args.includes("--oneBuild")
+}
+
+/**
+ * @param {string[]} args
+ * @param {string} [configFile]
+ * @returns {string[]}
+ */
+export function resolveConfigArg(args, configFile) {
+  if (args.includes("--config") || args.includes("-c")) {
+    return args
+  }
+  if (configFile) {
+    return [...args, "--config", configFile]
+  }
+  return args
+}
+
+/**
+ * @param {string[]} args
+ * @param {boolean} [isOneBuild]
+ * @returns {string[]}
+ */
+export function resolveOneBuildArg(args, isOneBuild) {
+  if (!args.length) {
+    return args
+  }
+  if (isOneBuild) {
+    const oneBuildIndex = args.indexOf("--oneBuild")
+    return args.filter((_, index) => index !== oneBuildIndex)
+  }
+  return args
+}
+
+/**
+ * @param {string[]} args
+ * @param {boolean} [isOneBuild]
+ * @returns {string[]}
+ */
+export function resolveSsrArg(args, isOneBuild) {
+  if (!args.length || isOneBuild || !args.includes("build")) {
+    return args
+  }
+  const ssrIndex = args.indexOf("--ssr")
+  if (ssrIndex === -1) {
+    return args
+  }
+  const hasSsrFile = !(args[ssrIndex + 1] || "").startsWith("-")
+  return args.filter(
+    (_, i) => i !== ssrIndex && !(hasSsrFile && i === ssrIndex + 1)
+  )
+}

package/src/cli/utils/command.js

@@ -0,0 +1,38 @@
+import { spawn } from "cross-spawn"
+
+/**
+ * @param {string[]} args
+ * @returns {Promise<number>}
+ */
+async function runVite(args) {
+  return new Promise((resolve, reject) => {
+    const process = spawn("vite", args, { stdio: "inherit" })
+
+    process.on("close", (code) => {
+      if (code === 0) {
+        resolve(code)
+      } else {
+        reject(new Error(`Process exited with code ${code}`))
+      }
+    })
+  })
+}
+
+/**
+ * @param {string[]} args
+ * @param {boolean} [isOneBuild]
+ * @returns {Promise<void>}
+ */
+export async function runMinista(args, isOneBuild) {
+  const isBuild = args.includes("build")
+
+  try {
+    if (isBuild && !isOneBuild) {
+      await runVite([...args, "--ssr"])
+    }
+    await runVite(args)
+  } catch (error) {
+    console.error(error)
+    process.exit(1)
+  }
+}

package/src/cli/utils/file.js

@@ -0,0 +1,33 @@
+import fs from "node:fs"
+import path from "node:path"
+
+/**
+ * @param {string} [rootArg]
+ * @returns {string}
+ */
+export function findConfigFile(rootArg) {
+  const cwd = process.cwd()
+  const configFileList = [
+    "minista.config.js",
+    "minista.config.cjs",
+    "minista.config.mjs",
+    "minista.config.ts",
+    "minista.config.cts",
+    "minista.config.mts",
+  ]
+  if (rootArg) {
+    for (const fileName of configFileList) {
+      const filePath = path.resolve(cwd, rootArg, fileName)
+      if (fs.existsSync(filePath)) {
+        return path.resolve(rootArg, fileName)
+      }
+    }
+  }
+  for (const fileName of configFileList) {
+    const filePath = path.resolve(cwd, fileName)
+    if (fs.existsSync(filePath)) {
+      return fileName
+    }
+  }
+  return ""
+}

package/src/client.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+/// <reference path="./plugins/mdx/client.d.ts" />
+/// <reference path="./plugins/island/client.d.ts" />

package/src/context.d.ts

@@ -0,0 +1,3 @@
+import type { Context } from "react"
+
+export declare const HeadContext: Context<{}>

package/src/context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react"
+
+export const HeadContext = createContext({})

package/src/head.d.ts

@@ -0,0 +1,7 @@
+import type { HeadData } from "./plugins/ssg/types"
+
+export declare function Head(
+  props: HeadData & {
+    children?: React.ReactNode
+  }
+): null

package/src/head.js

@@ -0,0 +1 @@
+export { Head } from "./plugins/ssg/components/head.js"

package/src/node.d.ts

@@ -0,0 +1,29 @@
+import type { Plugin } from "vite"
+import { defineConfig as defineViteConfig } from "vite"
+
+import type { UserPluginOptions as PluginSsgOptions } from "./plugins/ssg/types"
+import type { UserPluginOptions as PluginBundleOptions } from "./plugins/bundle/types"
+import type { UserPluginOptions as PluginEntryOptions } from "./plugins/entry/types"
+import type { UserPluginOptions as PluginMdxOptions } from "./plugins/mdx/types"
+import type { UserPluginOptions as PluginImageOptions } from "./plugins/image/types"
+import type { UserPluginOptions as PluginSvgOptions } from "./plugins/svg/types"
+import type { UserPluginOptions as PluginSpriteOptions } from "./plugins/sprite/types"
+import type { UserPluginOptions as PluginCommentOptions } from "./plugins/comment/types"
+import type { UserPluginOptions as PluginIslandOptions } from "./plugins/island"
+import type { UserPluginOptions as PluginSearchOptions } from "./plugins/search/types"
+import type { UserPluginOptions as PluginBeautifyOptions } from "./plugins/beautify"
+import type { UserPluginOptions as PluginArchiveOptions } from "./plugins/archive/types"
+
+export declare const defineConfig: typeof defineViteConfig
+export declare function pluginSsg(options?: PluginSsgOptions): Plugin
+export declare function pluginBundle(options?: PluginBundleOptions): Plugin
+export declare function pluginEntry(options?: PluginEntryOptions): Plugin
+export declare function pluginMdx(options?: PluginMdxOptions): Plugin
+export declare function pluginImage(options?: PluginImageOptions): Plugin
+export declare function pluginSvg(options?: PluginSvgOptions): Plugin
+export declare function pluginSprite(options?: PluginSpriteOptions): Plugin
+export declare function pluginComment(options?: PluginCommentOptions): Plugin
+export declare function pluginIsland(options?: PluginIslandOptions): Plugin
+export declare function pluginSearch(options?: PluginSearchOptions): Plugin
+export declare function pluginBeautify(options?: PluginBeautifyOptions): Plugin
+export declare function pluginArchive(options?: PluginArchiveOptions): Plugin

package/src/node.js

@@ -0,0 +1,13 @@
+export { defineConfig } from "vite"
+export { pluginSsg } from "./plugins/ssg/index.js"
+export { pluginBundle } from "./plugins/bundle/index.js"
+export { pluginEntry } from "./plugins/entry/index.js"
+export { pluginMdx } from "./plugins/mdx/index.js"
+export { pluginImage } from "./plugins/image/index.js"
+export { pluginSvg } from "./plugins/svg/index.js"
+export { pluginSprite } from "./plugins/sprite/index.js"
+export { pluginComment } from "./plugins/comment/index.js"
+export { pluginIsland } from "./plugins/island/index.js"
+export { pluginSearch } from "./plugins/search/index.js"
+export { pluginBeautify } from "./plugins/beautify/index.js"
+export { pluginArchive } from "./plugins/archive/index.js"

package/src/plugins/archive/index.js

@@ -0,0 +1,115 @@
+/** @typedef {import('vite').Plugin} Plugin */
+/** @typedef {import('./types').PluginOptions} PluginOptions */
+/** @typedef {import('./types').UserPluginOptions} UserPluginOptions */
+
+import fs from "node:fs"
+import path from "node:path"
+import archiver from "archiver"
+import pc from "picocolors"
+import { normalizePath } from "vite"
+
+import { getRootDir, getTempDir } from "../../shared/path.js"
+
+/** @type {PluginOptions} */
+export const defaultOptions = {
+  archives: [
+    {
+      srcDir: "dist",
+      outName: "dist",
+    },
+  ],
+}
+
+/**
+ * @param {UserPluginOptions} uOpts
+ * @returns {Plugin}
+ */
+export function pluginArchive(uOpts = {}) {
+  /** @type {PluginOptions} */
+  const opts = { ...defaultOptions, ...uOpts }
+  const cwd = process.cwd()
+
+  let isDev = false
+  let isSsr = false
+  let isBuild = false
+
+  let rootDir = ""
+  let tempDir = ""
+  let archiveDir = ""
+
+  return {
+    name: "vite-plugin:minista-archive",
+    enforce: "post",
+    apply(_, { command, isSsrBuild }) {
+      isDev = command === "serve"
+      isSsr = command === "build" && Boolean(isSsrBuild)
+      isBuild = command === "build" && !isSsrBuild
+      return isBuild
+    },
+    config: (config) => {
+      rootDir = getRootDir(cwd, config.root || "")
+      tempDir = getTempDir(cwd, rootDir)
+      archiveDir = path.resolve(tempDir, "archive")
+    },
+    async writeBundle(options) {
+      const dist = options.dir
+      if (!dist) return
+
+      await fs.promises.mkdir(archiveDir, { recursive: true })
+      await Promise.all(
+        opts.archives.map(async (archive) => {
+          const { srcDir, outName } = archive
+          const ignore = archive.ignore || []
+          const format = archive.format || "zip"
+          const archOpts = archive.options || { zlib: { level: 9 } }
+          const outFile = `${outName}.${format}`
+          const archiveFile = path.resolve(archiveDir, outFile)
+
+          try {
+            await new Promise((resolve, reject) => {
+              const archive = archiver(format, archOpts)
+              const output = fs.createWriteStream(archiveFile)
+
+              output.on("error", reject)
+              archive.on("error", reject)
+              archive.on("warning", (err) => {
+                if (err.code === "ENOENT") {
+                  console.warn(pc.yellow(`Archive warning: ${err.message}`))
+                } else {
+                  reject(err)
+                }
+              })
+              output.on("close", () => resolve(undefined))
+
+              archive.pipe(output)
+              archive.glob(`${normalizePath(srcDir)}/**/*`, {
+                cwd: rootDir,
+                ignore,
+              })
+              archive.finalize()
+            })
+
+            const finalPath = path.resolve(dist, outFile)
+            await fs.promises.copyFile(archiveFile, finalPath)
+
+            const rel = path.relative(rootDir, path.dirname(finalPath))
+            console.log(
+              pc.gray(
+                normalizePath(rel + path.sep) +
+                  pc.green(path.basename(finalPath)),
+              ),
+            )
+          } catch (err) {
+            if (err instanceof Error) {
+              console.error(
+                pc.red(`Error creating archive ${outName}: ${err.message}`),
+              )
+            } else {
+              console.error(pc.red(`An unknown error occurred: ${err}`))
+            }
+          }
+        }),
+      )
+    },
+  }
+}

package/src/plugins/archive/types.d.ts

@@ -0,0 +1,14 @@
+import type { Format as ArchiverFormat, ArchiverOptions } from "archiver"
+
+export type ArchiveOptions = {
+  srcDir: string
+  outName: string
+  ignore?: string | string[]
+  format?: ArchiverFormat
+  options?: ArchiverOptions
+}
+
+export type PluginOptions = {
+  archives: ArchiveOptions[]
+}
+export type UserPluginOptions = Partial<PluginOptions>