minista 0.10.3 → 1.0.0

package/README.md

@@ -14,11 +14,12 @@
 
 ## About
 
-minista（ミニスタ）は、React(JSX)で書ける web コーディング用の小さいスタティックサイトジェネレーターです。
+minista（ミニスタ）は、React (TSX/JSX)で書けるスタティックサイトジェネレーターです。SaaS の web テンプレートコーディング業務を想定し、ビルド時の納品用データが綺麗（ヒューマンリーダブル）であることを重視しています。
 
 - ゼロコンフィグで始められる
-- React(JSX)から静的な HTML を出力
-- CSS と JavaScript を Minify 出力
+- React (TSX/JSX)から 100%静的な HTML を出力
+- CSS と JavaScript を個別に Minify 出力
+- SVG スプライトアイコンを自動生成
 - Next.js 風のディレクトリ構成
 
 ## How To Use
@@ -54,16 +55,15 @@ src
 // Page Example
 //----------------------------------------------------
 
-import React from "react" // Required!
 import { render } from "minista" // Required!
 
-const Home = () => {
-  return render( // Required!
+const PageHome = () => {
+  return (
     <h1>Hello</h1>
   )
 }
 
-export default Home
+export default render(PageHome)  // Required!
 ```
 
 #### Develop
@@ -89,11 +89,10 @@ $ minista build
 #### Input
 
 ```js
-import React from "react"
 import { render, Comment } from "minista"
 
-const Home = () => {
-  return render(
+const PageHome = () => {
+  return (
     <>
       <Comment text="Comment Test" />
       <h1>Hello</h1>
@@ -101,7 +100,7 @@ const Home = () => {
   )
 }
 
-export default Home
+export default render(PageHome)
 ```
 
 #### output
@@ -123,7 +122,131 @@ export default Home
 
 ### webpack
 
-プロジェクトの root に `webpack.config.js` を配置することで設定を追加できます。
+プロジェクトの root に `webpack.config.js` を配置することで設定をマージできます。
+
+```js
+//----------------------------------------------------
+// Example: User > webpack.config.js
+//----------------------------------------------------
+
+// No installation required.
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const CopyPlugin = require("copy-webpack-plugin")
+
+// Example of dev mode
+const isDev = process.env.NODE_ENV !== "production"
+
+const webpackConfig = {
+  // Merge
+  devServer: {
+    open: ["/index.html"],
+  },
+  plugins: [
+    // Replace
+    new MiniCssExtractPlugin({
+      filename: "assets/[name].css",
+    }),
+    // Replace
+    new CopyPlugin({
+      patterns: [{ from: "./static", to: "./", noErrorOnMissing: true }],
+    }),
+  ],
+
+  // All optimization is replaced.
+  optimization: {
+    minimize: !isDev,
+    minimizer: [
+      /* Replace plugins */
+    ],
+  },
+}
+
+module.exports = webpackConfig
+```
+
+### TypeScript
+
+TypeScript `.tsx` でページを作成する場合はモジュールを追加し `tsconfig.json` をプロジェクトの root に配置。エントリーポイントとして `src/assets/index.ts` があれば `src/assets/index.js` の代わりに使用します。
+
+```bash
+$ npm install --save-dev typescript @types/react @types/react-dom
+```
+
+```json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "baseUrl": ".",
+    "allowJs": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "isolatedModules": false,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist", "webpack.config.js"]
+}
+```
+
+```bash
+# ----------------------------------------------------
+# Directory Example
+# ----------------------------------------------------
+
+public # Copy root
+src
+├── assets
+│   └── index.ts (or index.js)  # Required!
+├── components
+│   └── layout.js
+└── pages # Required!
+    ├── about
+    │   └── index.tsx
+    └── index.tsx
+```
+
+### Babel
+
+Babel はプロジェクトの root に `.babelrc` もしくは `babel.config.js` を配置することで設定を上書きできます。カスタマイズしない場合は以下の設定が適応されます。
+
+```js
+// JavaScript
+const babelJsxOptions = {
+  presets: [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
+  ],
+}
+
+// TypeScript
+const babelTsxOptions = {
+  presets: [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
+    ["@babel/preset-typescript"],
+  ],
+}
+```
 
 ### PostCSS
 
@@ -131,12 +254,12 @@ PostCSS はゼロコンフィグで以下のプラグインが適応されます
 
 ```js
 module.exports = {
-  plugins: {
-    "postcss-import": {},
-    "postcss-flexbugs-fixes": {},
-    "postcss-sort-media-queries": {},
-    "postcss-preset-env": {},
-  },
+  plugins: [
+    "postcss-import",
+    "postcss-flexbugs-fixes",
+    "postcss-sort-media-queries",
+    "postcss-preset-env",
+  ],
 }
 ```
 
@@ -148,18 +271,66 @@ module.exports = {
 $ npm install --save-dev sass-loader sass
 ```
 
+### Style only
+
+プロジェクトに JavaScript が全く必要ない場合はエントリーポイントを CSS ファイルに変更します。これにより空の JavaScript ファイルを出力することなく納品用データを生成できます。
+
+```js
+//----------------------------------------------------
+// Example: User > webpack.config.js
+//----------------------------------------------------
+
+const webpackConfig = {
+  entry: { bundle: "./src/assets/index.css" },
+}
+
+module.exports = webpackConfig
+```
+
+### SVG sprite icons
+
+`src/assets/icons` ディレクトリに SVG ファイルを置くと SVG スプライトアイコンの `dist/assets/icons.svg` が生成されます。以下のようなコンポーネントを作ることでアイコンを呼び出せます。
+
+```js
+// Example: ./src/components/svg-sprite-icon.tsx
+export interface SvgSpriteIconProps {
+  iconId?: string;
+}
+
+export const SvgSpriteIcon = (props: SvgSpriteIconProps) => {
+  const { iconId } = props
+  return (
+    <svg className="icon" role="img">
+      <use xlinkHref={`/assets/icons.svg#${iconId}`} />
+    </svg>
+  )
+}
+```
+
+```html
+<!-- dist html -->
+<svg role="img" class="icon">
+  <use xlink:href="/assets/icons.svg#star"></use>
+</svg>
+```
+
 ## Media
 
 - [React(JSX)で書けるコーディング用 SSG - minista v0](https://zenn.dev/qrac/articles/7537521afcd1bf)
 
 ## Respect
 
-- [Charge — an opinionated, zero-config static site generator](https://charge.js.org/)
 - [Next.js by Vercel - The React Framework](https://nextjs.org/)
+- [Charge — an opinionated, zero-config static site generator](https://charge.js.org/)
+- [Eleventy, a simpler static site generator.](https://www.11ty.dev/)
 - [Node Interface | webpack](https://webpack.js.org/api/node/)
+- [natemoo-re/microsite](https://github.com/natemoo-re/microsite)
+- [Astro](https://astro.build/)
 - [テンプレートエンジンに React を使いつつ、きれいな HTML を生成したいんじゃ！！](https://zenn.dev/otsukayuhi/articles/e52651b4e2c5ae7c4a17)
 - [EJS をやめて React で HTML を書く](https://zenn.dev/hisho/scraps/4ef6c6106a6395)
 - [MPA(マルチページアプリ)で webpack を使う](https://www.key-p.com/blog/staff/archives/107125)
+- [HTML コーディングでも React+TypeScript の開発体験を得る](https://zenn.dev/nanaki14/articles/html-template-react)
+- [Astro と microCMS でポートフォリオサイトを作る](https://zenn.dev/takanorip/articles/c75717c280c81d)
 
 ## License
 

package/cli.js

@@ -1,78 +1,79 @@
 #!/usr/bin/env node
-
-//----------------------------------------------------
-// Global Require
-//----------------------------------------------------
-
 const fs = require("fs")
 const path = require("path")
 const glob = require("glob")
-
-//----------------------------------------------------
-// Variables
-//----------------------------------------------------
-
-const isDev = process.argv[2] !== "build"
-process.env.NODE_ENV = isDev ? "development" : "production"
-
-//----------------------------------------------------
-// webpack
-//----------------------------------------------------
-
 const webpack = require("webpack")
-const { merge } = require("webpack-merge")
+const { mergeWithCustomize, customizeObject, unique } = require("webpack-merge")
 const webpackDevServer = require("webpack-dev-server")
-const HtmlWebpackPlugin = require("html-webpack-plugin")
-
-const webpackConfig = require("./webpack.config")
-const userWebpackConfig = fs.existsSync(path.resolve("webpack.config.js"))
-  ? require(path.resolve("webpack.config"))
-  : {}
-const mergedWebpackConfig = merge(webpackConfig, userWebpackConfig)
+const beautify = require("js-beautify")
 
-const htmlPlugins = mergedWebpackConfig.plugins.filter(
-  (plugin) => plugin.constructor === HtmlWebpackPlugin
-)
-const otherPlugins = mergedWebpackConfig.plugins.filter(
-  (plugin) => plugin.constructor !== HtmlWebpackPlugin
-)
-const mergedHtmlPlugins = [
-  ...new Map(
-    htmlPlugins.map((plugin) => [plugin.userOptions.filename, plugin])
-  ).values(),
-]
-const mergedPlugins = [...mergedHtmlPlugins, ...otherPlugins]
-mergedWebpackConfig.plugins = mergedPlugins
+function getWebpackConfig() {
+  return require("./webpack.config")
+}
 
-const webpackCompiler = webpack(mergedWebpackConfig)
-const devServerOptions = Object.assign({}, mergedWebpackConfig.devServer)
+function getUserWebpackConfig() {
+  if (fs.existsSync(path.resolve("webpack.config.js"))) {
+    return require(path.resolve("webpack.config"))
+  } else {
+    return {}
+  }
+}
 
-const webpackDev = () => new webpackDevServer(webpackCompiler, devServerOptions)
+function getMergedWebpackConfig({ config, userConfig }) {
+  const mergedConfig = mergeWithCustomize({
+    customizeObject: customizeObject({
+      optimization: "replace",
+    }),
+    customizeArray: unique(
+      "plugins",
+      ["MiniCssExtractPlugin", "CopyPlugin"],
+      (plugin) => plugin.constructor && plugin.constructor.name
+    ),
+  })(config, userConfig)
+  const filterdPlugins = filterWebpackPlugins({
+    plugins: mergedConfig.plugins,
+  })
+  mergedConfig.plugins = filterdPlugins
+  return mergedConfig
+}
 
-const webpackBuild = () =>
-  webpackCompiler.run((err, stats) => {
-    err && console.log(err)
-    stats &&
-      console.log(
-        stats.toString({
-          colors: true,
-        })
-      )
-    beautifyHTML()
+function filterWebpackPlugins({ plugins }) {
+  const filterdHtmlWebpackPlugins = filterHtmlWebpackPlugins({
+    plugins: plugins,
+  })
+  const filteredOtherWebpackPlugins = filterOtherWebpackPlugins({
+    plugins: plugins,
   })
+  return [...filterdHtmlWebpackPlugins, ...filteredOtherWebpackPlugins]
+}
 
-//----------------------------------------------------
-// Beautify
-//----------------------------------------------------
+function filterHtmlWebpackPlugins({ plugins }) {
+  const htmlWebpackPlugins = plugins.filter(
+    (plugin) => plugin.constructor.name === "HtmlWebpackPlugin"
+  )
+  const mergedHtmlWebpackPlugins = [
+    ...new Map(
+      htmlWebpackPlugins.map((plugin) => [plugin.userOptions.filename, plugin])
+    ).values(),
+  ]
+  return mergedHtmlWebpackPlugins
+}
 
-const beautify = require("js-beautify")
-const beautifyOptions = {
-  indent_size: 2,
-  max_preserve_newlines: 0,
+function filterOtherWebpackPlugins({ plugins }) {
+  const otherPlugins = plugins.filter(
+    (plugin) => plugin.constructor.name !== "HtmlWebpackPlugin"
+  )
+  return otherPlugins
 }
 
-const beautifyHTML = () => {
-  glob.sync("dist/**/*.html").forEach((file) => {
+function beautifyHtmlFiles({
+  htmlFilesPath,
+  beautifyOptions = {
+    indent_size: 2,
+    max_preserve_newlines: 0,
+  },
+}) {
+  glob.sync(htmlFilesPath).forEach((file) => {
     fs.readFile(file, "utf8", (err, html) => {
       if (err) console.log(err)
       if (err) return
@@ -86,16 +87,63 @@ const beautifyHTML = () => {
   })
 }
 
-//----------------------------------------------------
-// Actions
-//----------------------------------------------------
+function webpackBuildWithBeautify({
+  webpackCompiler,
+  runBeautify = true,
+  htmlFilesPath,
+}) {
+  webpackCompiler.run((err, stats) => {
+    err && console.log(err)
+    stats &&
+      console.log(
+        stats.toString({
+          colors: true,
+        })
+      )
+    runBeautify && beautifyHtmlFiles({ htmlFilesPath: htmlFilesPath })
+  })
+}
 
-switch (process.argv[2]) {
-  case undefined:
-  case "dev":
-    return webpackDev().listen(8080)
-  case "build":
-    return webpackBuild()
-  default:
+function ministaCommand({
+  process,
+  webpackCompiler,
+  webpackDevServerOptions,
+  runBeautify,
+  htmlFilesPath,
+}) {
+  if (process.argv[2] === undefined || process.argv[2] === "dev") {
+    const webpackDev = new webpackDevServer(
+      webpackDevServerOptions,
+      webpackCompiler
+    )
+    return webpackDev.start()
+  } else if (process.argv[2] === "build") {
+    return webpackBuildWithBeautify({
+      webpackCompiler: webpackCompiler,
+      runBeautify: runBeautify,
+      htmlFilesPath: htmlFilesPath,
+    })
+  } else {
     return console.log("Command error!\nminista dev or minista build")
+  }
 }
+
+const isDev = process.argv[2] !== "build"
+process.env.NODE_ENV = isDev ? "development" : "production"
+
+const webpackConfig = getWebpackConfig()
+const userWebpackConfig = getUserWebpackConfig()
+const mergedWebpackConfig = getMergedWebpackConfig({
+  config: webpackConfig,
+  userConfig: userWebpackConfig,
+})
+const webpackCompiler = webpack(mergedWebpackConfig)
+const webpackDevServerOptions = Object.assign({}, mergedWebpackConfig.devServer)
+
+ministaCommand({
+  process: process,
+  webpackCompiler: webpackCompiler,
+  webpackDevServerOptions: webpackDevServerOptions,
+  runBeautify: true,
+  htmlFilesPath: "dist/**/*.html",
+})

package/index.d.ts

@@ -0,0 +1,4 @@
+declare module "minista" {
+  const render: (element: React.ReactNode) => void
+  const Comment: React.ComponentType<{ text: string }>
+}

package/main.js

@@ -1,4 +1,3 @@
-import React from "react"
 import { renderToStaticMarkup } from "react-dom/server"
 import { Helmet } from "react-helmet"
 

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "minista",
   "description": "Mini static site generator that can be written in React (JSX) for web coding",
-  "version": "0.10.3",
+  "version": "1.0.0",
   "bin": {
     "minista": "cli.js"
   },
   "main": "./main.js",
+  "types": "./index.d.ts",
   "files": [
     "main.js",
     "cli.js",
-    "postcss.config.js",
+    "index.d.ts",
     "webpack.config.js"
   ],
   "license": "MIT",
@@ -27,6 +28,8 @@
     "coding",
     "react",
     "jsx",
+    "tsx",
+    "typescript",
     "webpack",
     "japanese",
     "minista"
@@ -48,27 +51,31 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.8",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
     "babel-loader": "^8.2.3",
-    "copy-webpack-plugin": "^10.0.0",
+    "copy-webpack-plugin": "^10.2.0",
     "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
+    "css-minimizer-webpack-plugin": "^3.3.1",
     "glob": "^7.2.0",
     "html-replace-webpack-plugin": "^2.6.0",
     "html-webpack-plugin": "^5.5.0",
     "js-beautify": "^1.14.0",
-    "mini-css-extract-plugin": "^2.4.5",
-    "postcss": "^8.4.4",
+    "mini-css-extract-plugin": "^2.4.6",
+    "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^14.0.2",
     "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.0.1",
+    "postcss-preset-env": "^7.2.1",
     "postcss-sort-media-queries": "^4.2.1",
     "react-helmet": "^6.1.0",
-    "webpack": "^5.64.4",
-    "webpack-dev-server": "^4.6.0",
-    "webpack-merge": "^5.8.0"
+    "svg-sprite-loader": "^6.0.11",
+    "ts-loader": "^9.2.6",
+    "webpack": "^5.66.0",
+    "webpack-dev-server": "^4.7.3",
+    "webpack-merge": "^5.8.0",
+    "webpack-remove-empty-scripts": "^0.7.2"
   }
 }

package/webpack.config.js

@@ -4,20 +4,89 @@ const glob = require("glob")
 
 const HtmlWebpackPlugin = require("html-webpack-plugin")
 const HtmlReplaceWebpackPlugin = require("html-replace-webpack-plugin")
+const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const SpriteLoaderPlugin = require("svg-sprite-loader/plugin")
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
 const TerserPlugin = require("terser-webpack-plugin")
 const CopyPlugin = require("copy-webpack-plugin")
 
 const isDev = process.env.NODE_ENV !== "production"
 
+const babelJsxOptions = {
+  presets: [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
+  ],
+}
+
+const babelTsxOptions = {
+  presets: [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        runtime: "automatic",
+      },
+    ],
+    ["@babel/preset-typescript"],
+  ],
+}
+
 const postcssOptions = {
-  plugins: {
-    "postcss-import": {},
-    "postcss-flexbugs-fixes": {},
-    "postcss-sort-media-queries": {},
-    "postcss-preset-env": {},
-  },
+  plugins: [
+    "postcss-import",
+    "postcss-flexbugs-fixes",
+    "postcss-sort-media-queries",
+    "postcss-preset-env",
+  ],
+}
+
+function switchEntry() {
+  const filepath1 = "src/assets/index.js"
+  const filepath2 = "src/assets/index.ts"
+  const check = fs.existsSync(path.resolve(filepath1))
+
+  if (check) {
+    return "./" + filepath1
+  } else {
+    return "./" + filepath2
+  }
+}
+
+function switchBabelOptions(useTsx) {
+  const filename1 = "babel.config.js"
+  const filename2 = ".babelrc"
+  const check1 = fs.existsSync(path.resolve(filename1))
+  const check2 = fs.existsSync(path.resolve(filename2))
+
+  const defaultOptions = useTsx ? babelTsxOptions : babelJsxOptions
+
+  if (check1) {
+    return require(path.resolve(filename1))
+  } else if (check2) {
+    return JSON.parse(fs.readFileSync(path.resolve(filename2), "utf8"))
+  } else {
+    return defaultOptions
+  }
+}
+
+function switchPostcssOptions() {
+  const filename = "postcss.config.js"
+  const check = fs.existsSync(path.resolve(filename))
+
+  const defaultOptions = postcssOptions
+
+  if (check) {
+    return require(path.resolve(filename))
+  } else {
+    return defaultOptions
+  }
 }
 
 const webpackConfig = {
@@ -41,11 +110,12 @@ const webpackConfig = {
   watchOptions: {
     ignored: ["**/.git/**", "**/node_modules/**"],
   },
-  entry: "./src/assets/index.js",
+  entry: { bundle: switchEntry() },
   output: {
     path: path.resolve("dist"),
     publicPath: "/",
-    filename: "assets/scripts.js",
+    filename: "assets/[name].js",
+    assetModuleFilename: "assets/images/[name].[ext]",
   },
   module: {
     rules: [
@@ -54,9 +124,21 @@ const webpackConfig = {
         use: [
           {
             loader: "babel-loader",
-            options: {
-              presets: ["@babel/preset-env", "@babel/react"],
-            },
+            options: switchBabelOptions(),
+          },
+        ],
+      },
+      {
+        test: /\.ts(|x)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: switchBabelOptions(true),
+          },
+          {
+            loader: "ts-loader",
+            options: { transpileOnly: true },
           },
         ],
       },
@@ -73,12 +155,10 @@ const webpackConfig = {
           },
           {
             loader: "postcss-loader",
-            options: fs.existsSync(path.resolve("postcss.config.js"))
-              ? { sourceMap: isDev }
-              : {
-                  sourceMap: isDev,
-                  postcssOptions: postcssOptions,
-                },
+            options: {
+              sourceMap: isDev,
+              postcssOptions: switchPostcssOptions(),
+            },
           },
         ],
       },
@@ -95,12 +175,10 @@ const webpackConfig = {
           },
           {
             loader: "postcss-loader",
-            options: fs.existsSync(path.resolve("postcss.config.js"))
-              ? { sourceMap: isDev }
-              : {
-                  sourceMap: isDev,
-                  postcssOptions: postcssOptions,
-                },
+            options: {
+              sourceMap: isDev,
+              postcssOptions: switchPostcssOptions(),
+            },
           },
           {
             loader: "sass-loader",
@@ -120,6 +198,19 @@ const webpackConfig = {
           filename: "assets/fonts/[name].[ext]",
         },
       },
+      {
+        test: /icons\/.*\.svg$/,
+        use: [
+          {
+            loader: "svg-sprite-loader",
+            options: {
+              extract: true,
+              spriteFilename: "assets/icons.svg",
+              runtimeCompat: true,
+            },
+          },
+        ],
+      },
     ],
   },
   plugins: [
@@ -129,8 +220,12 @@ const webpackConfig = {
         replacement: "<!-- $1 -->",
       },
     ]),
+    new RemoveEmptyScriptsPlugin(),
     new MiniCssExtractPlugin({
-      filename: "assets/styles.css",
+      filename: "assets/[name].css",
+    }),
+    new SpriteLoaderPlugin({
+      plainSprite: true,
     }),
     new CopyPlugin({
       patterns: [
@@ -140,15 +235,27 @@ const webpackConfig = {
   ],
   optimization: {
     minimize: !isDev,
-    minimizer: [new CssMinimizerPlugin({}), new TerserPlugin({})],
+    minimizer: [
+      new CssMinimizerPlugin({
+        minimizerOptions: {
+          preset: [
+            "default",
+            {
+              cssDeclarationSorter: false,
+            },
+          ],
+        },
+      }),
+      new TerserPlugin({}),
+    ],
   },
   resolve: {
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   },
 }
 
 glob
-  .sync("**/*.js", {
+  .sync("**/*.{js,jsx,ts,tsx}", {
     cwd: "src/pages",
   })
   .forEach((file) => {