A script built to easily split html documents when working with the Regional Model Framework
npm install html-region-mergeThis package was developed to work in tandem with the Regional Model Framework.
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.
Start by creating the rfm-config.json as seen in getting started.Merger
Create a script importing and initialzing the , 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",
},
...
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()],
});
`
Create a central HTML file, adding in the place of a block of HTML.templateDir
The script will search within the template directory () for a file named region-name.region.html and replace the element with the HTML.build
This script will create a new file specified by the 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.htmlThis is an element
``
// {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 an element
This is also an element