wildfire-variant

Variant package for the Wildland Fire Simulator

Wildfire Variant

This package supports the Wildland Fire Simulator project.

A Variant is a specification for a Node value. A Variant does not actually hold a value itself, rather it holds specifications for:

the type of value held by a Node,
all input filters, validators, and validation specs to be applied to a Node's value, and
all display transformers, converters, and decorators for a Node's value.

For example, in the Wildfire package, a fire SpreadRate Variant is a specialized Velocity Variant with filters and display decorators that are applied to all the system's fire spread rate Nodes.

How to Build a Modern JS Project

YouTube How to Build a Modern JS Project

#1 Intro
#2 What is a Build Process? (CI/CD)
#3 ESLint, Prettier & EditorConfig
#4 Pre-commit with Husky & lint-staged
#5 Rollup with CJS, ESM & UMD
#6 Babel & React
#7 Components & Styling
#8 Module Systems
#9 Storybook
#10 Snapshot Tests
GitHub
- Select a package name that is not yet in use on NPM
- Create a new repository
  - Public
  - initialize this repository with a README,
  - MIT License
  - Add a Node .gitignore
  - Create Repository
  - Click 'Clone or Download' and copy repository link to clipboard

Setup Project Folder

Change to parent directory of soon-to-be project

c:\cbevins\dev\node> git clone https://github.com/cbevins/wildfire-variant.git
c:\cbevins\dev\node>cd wildfire-variant
c:\cbevins\dev\node\wildfire-variant> npm init -y
c:\cbevins\dev\node\wildfire-variant> code .

Create src folder and index.js ...

c:\cbevins\dev\node\wildfire-variant> mkdir src
c:\cbevins\dev\node\wildfire-variant> cd src
c:\cbevins\dev\node\wildfire-variant\src> touch index.js
c:\cbevins\dev\node\wildfire-variant\src> code .

Enable Eslint and Prettier extensions in VSCode
Update the package.json file with keywords, etc.

Install and Configure 'eslint'

From the project directory ...

npm install eslint --save-dev
npm install eslint-plugin-react --save-dev
npx eslint --init

npm i -D eslint
npm i -D eslint-plugin-react
npx eslint --init

Create/edit .eslintrc.json ...

{
  "extends": [
    "plugin:react/recommended",
    "standard"
  ],
}

Create .eslintignore (and .prettierignore)...
```
README.md

dist

node_modules
```

Install and configure prettier-eslint

From the project directory...

npm install prettier-eslint --save-dev
npm install prettier-eslint-cli --save-dev

npm i -D prettier-eslint
npm i -D prettier-eslint-cli

Install and Configure Jest

From project folder ...

npm i -D jest
npm i -D eslint-plugin-jest

To enable import/export in Jest, create a .babelrc file ...

{
  "env": {
    "test": {
      "presets": ["@babel/env"]
    }
  }
}

Install and configure rollup

From project folder ...

npm i -D rollup
npm i -D rollup-plugin-node-resolve
npm i -D rollup-plugin-terser
npm i -D rollup-plugin-babel @babel/core @babel/preset-env @bable/preset-react
npm i -D rimraf

Create a 'rollup.config.js' in project folder ...

  import { terser } from 'rollup-plugin-terser'

  const bundle = 'dist/variant'
  // const bundle = 'dist/foo'

  export default {
    input: 'src/index.js',
    output: [
      {
        file: `${bundle}.esm.js`,
        format: 'esm'
      },
      {
        file: `${bundle}.esm.min.js`,
        format: 'esm',
        plugins: [terser()]
      },
      {
        file: `${bundle}.cjs.js`,
        format: 'cjs'
      },
      {
        file: `${bundle}.cjs.min.js`,
        format: 'cjs',
        plugins: [terser()]
      }
    ]
  }

In package.json, add

"type": "module",
"scripts": {
    "prebuild": "rimraf dist",
    "build": "rollup -c",
}

Create .babelrc in project folder ...

{
  "presets": [
    ["@babel/env", {
      "modules": false,
      "targets": {
        "browsers": "> 0.25%, ie11, not op_mini, not dead",
        "node": 10
      }
    }],
    "@babel/react"
  ]
}

See Build a Modern JS Project - #6 Babel & React for configuring rollup for React and ReactDOM using external and globals properties.