HTML Region Merge

This package was developed to work in tandem with the Regional Model Framework.

Getting Started

To get started install the package using npm npm install html-region-merge. Create a config file within the project root folder named rfm-config.json.

``
// rfm-config.json
{
"templateDir": "This is the directory where all the *.region.html documents will live",
"entry": "The central HTML document to merge all other documents into.",
"build": "The name and path of the newly merged HTML document.",
"runScript": "Will be called on hot module reload."
}
// example
{
"templateDir": "./src/templates",
"entry": "./src/templates/main.html",
"build": "./public/index.html",
"runScript": "npm run html-merge"
}
`

NOTE: Be sure the build folder exists, or a error will be thrown.

Usage

$3

Start by creating the rfm-config.json as seen in getting started.
Create a script importing and initialzing the Merger, then run Merger.merge()

`
// merge-html.js

import Merger from 'html-region-merge'

const merger = new Merger();
merger.mergeDocument();
`

Create a script within the package.json to run this script.

`
...
"scripts": {
"dev": "vite",
"html-merge": "node src/_dev_scripts/html-merge.js",
},
...
`

$3

If using Vite, add the hmr vite plugin to run the merge script on hot module reload.

`
// vite.config.js

import { defineConfig } from "vite";
import { hmrPlugin } from "html-region-merge";

export default defineConfig({
plugins: [hmrPlugin()],
});

`

$3

Create a central HTML file, adding in the place of a block of HTML.
The script will search within the template directory (templateDir) for a file named region-name.region.html and replace the element with the HTML.
This script will create a new file specified by the build config and will overwrite any old documents. This will not overwrite the central HTML file, unless specified.

#### Example

`
// main.html

















`

`
// {templateDir}/subdirectory/region-name.region.html



`

`
// {templateDir}/other-region.region.html
This is also an element
`

Will create a new file named index.html in the public folder, which looks like:

`












This is also an element


``