JSPM

minista

1.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 449
  • Score
    100M100P100Q86105F
  • License MIT

Mini static site generator that can be written in React (JSX) for web coding

Package Exports

  • minista
  • minista/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (minista) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

minista

About

minista（ミニスタ）は、React (TSX/JSX)で書けるスタティックサイトジェネレーターです。SaaS の web テンプレートコーディング業務を想定し、ビルド時の納品用データが綺麗（ヒューマンリーダブル）であることを重視しています。

  • ゼロコンフィグで始められる
  • React (TSX/JSX)から 100%静的な HTML を出力
  • CSS と JavaScript を個別に Minify 出力
  • SVG スプライトアイコンを自動生成
  • Next.js 風のディレクトリ構成

How To Use

npm

Setup

$ npm install --save-dev minista react react-dom
# ----------------------------------------------------
# Directory Example
# ----------------------------------------------------

public # Copy root
src
├── assets
│   └── index.js # Required!
├── components
│   └── layout.js
└── pages # Required!
    ├── about
    │   └── index.js
    └── index.js
//----------------------------------------------------
// Page Example
//----------------------------------------------------

import { render } from "minista" // Required!

const PageHome = () => {
  return render( // Required!
    <h1>Hello</h1>
  )
}

export default PageHome

Develop

# Start
$ minista

# Stop
Press Ctrl+C

Build

$ minista build

Components

Comment

Input

import { render, Comment } from "minista"

const PageHome = () => {
  return render( // Required!
    <>
      <Comment text="Comment Test" />
      <h1>Hello</h1>
    </>
  )
}

export default PageHome

output

<body>
  <!-- Comment Test -->
  <h1>Hello</h1>
</body>

Sitemap

納品用のサイトマップを簡単に作るコンポーネントを npm で追加可能です。納品物に追加の CSS や JavaScript をバンドルさせません。

Customize

webpack

プロジェクトの root に webpack.config.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 の代わりに使用します。

$ npm install --save-dev typescript @types/react @types/react-dom
{
  "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"]
}
# ----------------------------------------------------
# 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 を配置することで設定を上書きできます。カスタマイズしない場合は以下の設定が適応されます。

// 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 を配置することで設定を上書きできます。

module.exports = {
  plugins: [
    "postcss-import",
    "postcss-flexbugs-fixes",
    "postcss-sort-media-queries",
    "postcss-preset-env",
  ],
}

Sass / SCSS

sass-loader と sass（または node-sass）を追加することで使えます。

$ npm install --save-dev sass-loader sass

Style only

プロジェクトに JavaScript が全く必要ない場合はエントリーポイントを CSS ファイルに変更します。これにより空の JavaScript ファイルを出力することなく納品用データを生成できます。

//----------------------------------------------------
// 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 が生成されます。以下のようなコンポーネントを作ることでアイコンを呼び出せます。

// 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>
  )
}
<!-- dist html -->
<svg role="img" class="icon">
  <use xlink:href="/assets/icons.svg#star"></use>
</svg>

Media

Respect

License

  • MIT

Credit