minista 0.11.0 → 1.0.1

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 = () => {
+const PageHome = () => {
   return render( // Required!
     <h1>Hello</h1>
   )
 }
 
-export default Home
+export default PageHome
 ```
 
 #### Develop
@@ -88,12 +88,12 @@ $ minista build
 
 #### Input
 
+<!-- prettier-ignore -->
 ```js
-import React from "react"
 import { render, Comment } from "minista"
 
-const Home = () => {
-  return render(
+const PageHome = () => {
+  return render( // Required!
     <>
       <Comment text="Comment Test" />
       <h1>Hello</h1>
@@ -101,7 +101,7 @@ const Home = () => {
   )
 }
 
-export default Home
+export default PageHome
 ```
 
 #### output
@@ -126,22 +126,38 @@ export default Home
 プロジェクトの root に `webpack.config.js` を配置することで設定をマージできます。
 
 ```js
-// Example
+//----------------------------------------------------
+// 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/custom.css",
+      filename: "assets/[name].css",
     }),
+    // Replace
     new CopyPlugin({
       patterns: [{ from: "./static", to: "./", noErrorOnMissing: true }],
     }),
   ],
+
+  // All optimization is replaced.
   optimization: {
+    minimize: !isDev,
     minimizer: [
-      /* All replacements */
+      /* Replace plugins */
     ],
   },
 }
@@ -149,18 +165,102 @@ const webpackConfig = {
 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
 
 PostCSS はゼロコンフィグで以下のプラグインが適応されますが、プロジェクトの root に `postcss.config.js` を配置することで設定を上書きできます。
 
 ```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",
+  ],
 }
 ```
 
@@ -172,18 +272,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

@@ -3,7 +3,7 @@ const fs = require("fs")
 const path = require("path")
 const glob = require("glob")
 const webpack = require("webpack")
-const { mergeWithRules, unique } = require("webpack-merge")
+const { mergeWithCustomize, customizeObject, unique } = require("webpack-merge")
 const webpackDevServer = require("webpack-dev-server")
 const beautify = require("js-beautify")
 
@@ -20,17 +20,16 @@ function getUserWebpackConfig() {
 }
 
 function getMergedWebpackConfig({ config, userConfig }) {
-  const mergedConfig = mergeWithRules({
-    optimization: {
-      minimizer: "replace",
-    },
+  const mergedConfig = mergeWithCustomize({
+    customizeObject: customizeObject({
+      optimization: "replace",
+    }),
     customizeArray: unique(
       "plugins",
       ["MiniCssExtractPlugin", "CopyPlugin"],
       (plugin) => plugin.constructor && plugin.constructor.name
     ),
   })(config, userConfig)
-  console.log(mergedConfig)
   const filterdPlugins = filterWebpackPlugins({
     plugins: mergedConfig.plugins,
   })

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.11.0",
+  "version": "1.0.1",
   "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.5",
+    "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) => {