Config

minista.config.ts または minista.config.js をプロジェクトルートに作成することでコンフィグを変更できます。エディタの補完を利用する場合は defineConfig() 関数でコンフィグを包んでください。コンフィグの初期値・型・詳細の参照先は以下の通りです。

// minista.config.ts
import { defineConfig } from "minista"

export default defineConfig({
  base: "/", // string
  // Absolute URL pathname, e.g. "/foo/"
  // Full URL, e.g. "https://foo.com/"
  // Empty string or "./" (for embedded deployment)
  // https://ja.vitejs.dev/config/shared-options.html#base
  public: "public", // string
  out: "dist", // string
  root: {
    srcDir: "src", // string
    srcName: "root", // string
    srcExt: ["tsx", "jsx"], // string[]
  },
  pages: {
    srcDir: "src/pages", // string
    srcExt: ["tsx", "jsx", "md", "mdx"], // string[]
  },
  assets: {
    entry: "",
    // | string
    // | string[]
    // | { [key: string]: string }
    // | {
    //      name?: string
    //      input: string
    //      insertPages: string | string[] | { include: string[]; exclude?: string[] }
    //   }[]
    outDir: "assets", // string
    outName: "[name]", // string
    bundle: {
      outName: "bundle", // string
    },
    partial: {
      useSplitPerPage: false, // boolean
      usePreact: false, // boolean
      useIntersectionObserver: true, // boolean
      outName: "partial", // string
      rootAttrSuffix: "partial-hydration", // string
      rootValuePrefix: "ph", // string
      rootDOMElement: "div", // "div" | "span"
      rootStyle: { display: "contents" }, // React.CSSProperties
      intersectionObserverOptions: {
        root: null, // Element | null
        rootMargin: "0px", // string
        thresholds: [1], // ReadonlyArray<number>
      },
    },
    images: {
      outDir: "assets/images", // string
      outName: "[name]", // string
    },
    fonts: {
      outDir: "assets/fonts", // string
      outName: "[name]", // string
    },
    svgr: {
      svgrOptions: {}, // https://react-svgr.com/docs/options/
    },
    icons: {
      useSprite: true, // boolean
      srcDir: "src/assets/icons", // string
      outDir: "assets/images", // string
      outName: "icons", // string
      svgstoreOptions: {
        cleanSymbols: ["fill", "stroke", "stroke-linejoin", "stroke-width"],
      }, // https://github.com/svgstore/svgstore#svgstore-options
    },
    download: {
      useRemote: false, // boolean
      remoteUrl: ["https://", "http://"], // string[]
      remoteName: "remote-[index]", // string
      outDir: "assets/images", // string
    },
  },
  vite: {}, // https://vitejs.dev/config/
  resolve: {
    alias: [], // { [key: string]: string } | { find: string, replacement: string }[]
  },
  css: {
    modules: {
      cache: true,
      scopeBehaviour: "local",
      globalModulePaths: [],
      generateScopedName: undefined,
      hashPrefix: "",
      localsConvention: "camelCaseOnly",
    }, // https://ja.vitejs.dev/config/#css-modules
    preprocessorOptions: {
      scss: {},
      less: {},
      stylus: {},
    }, // https://ja.vitejs.dev/config/#css-preprocessoroptions
  },
  markdown: {
    syntaxHighlighter: "highlight", // "highlight" | "none"
    highlightOptions: {}, // https://github.com/rehypejs/rehype-highlight#options
    mdxOptions: {
      remarkPlugins: [], // https://mdxjs.com/packages/mdx/#optionsremarkplugins
      rehypePlugins: [], // https://mdxjs.com/packages/mdx/#optionsrehypeplugins
    },
  },
  search: {
    useJson: false, // boolean
    cache: false, // boolean
    outDir: "assets", // string
    outName: "search", // string
    include: ["**/*"], // string[]
    exclude: ["404"], // string[]
    trimTitle: "", // string
    targetSelector: "[data-search]", // string
    hit: {
      minLength: 3, // number
      number: false, // boolean
      english: true, // boolean
      hiragana: false, // boolean
      katakana: true, // boolean
      kanji: true, // boolean
    },
  },
  beautify: {
    useHtml: true, // boolean
    useAssets: false, // boolean
    htmlOptions: {
      indent_size: 2,
      max_preserve_newlines: 0,
      indent_inner_html: true,
      extra_liners: [],
      inline: ["span", "b", "br", "code", "del", "s", "small", "strong", "wbr"],
    }, // https://github.com/beautify-web/js-beautify#css--html
    cssOptions: {}, // https://github.com/beautify-web/js-beautify#css--html
    jsOptions: {}, // https://github.com/beautify-web/js-beautify#options
  },
})

Resolve Alias

エイリアスパスを追加するには 2 つの設定が必要です。まず、tsconfig.json または jsconfig.json に設定 compilerOptions.paths を追加してください。以下の例ではパスの ~ をプロジェクトルートの src にマッピングしています。

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

次に、minista.config.ts または minista.config.js に resolve.alias を設定します。

import path from "path"
import { defineConfig } from "minista"

export default defineConfig({
  resolve: {
    alias: [{ find: "~/", replacement: path.resolve("src") + "/" }],
  },
})

これで ~ をプロジェクトルートの src として使えるようになりました。

import AppHeader from "~/components/app-header"

TypeScript

TypeScript は npm install して tsconfig.json を設定することで使えます。compilerOptions.types に minista/client を加えることで、SVG の React Component 化・インポート・ファイルの文字列インポート *?raw・Partial Hydration *?ph の定義を反映できます。

$ npm install --save-dev typescript @types/react@17 @types/react-dom@17

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "noErrorTruncation": true,
    "jsx": "react-jsx",
    "types": ["minista/client"]
  },
  "include": ["./minista.config.ts", "src"]
}

CSS Modules

CSS Modules はデフォルトで使える状態です。スコープされた CSS と HTML class が出力されます。

// Input: template
import style from "../../assets/css-modules/style.module.css"

export default () => {
  return <h2 className={style.test}>test scope style</h2>
}

/* Input: style.module.css */
.test {
  color: red;
}

<!-- Output: html -->
<h2 class="_test_xl9qq_1">test scope style</h2>

/* Output: bundle.css */
._test_xl9qq_1 {
  color: red;
}

Sass

dart-sass は npm install するだけで使えます。

$ npm install --save-dev sass

PostCSS

PostCSS はプロジェクトルートに postcss.config.js を作成することで使えます。例えば、Autoprefixer を使う場合は npm install して以下のように設定。

$ npm install --save-dev autoprefixer

// postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: { grid: "autoplace" },
  },
}