injectml v1.2.3
Injectml
WARNING: This package was built for learning purposes only.
A simple package that injects html to other html files using a special <inject> tag.
Quick Start
To start using Injectml, specify an input and an output on your command like so:
npm i -D injectml
injectml input="src" output="dist"Note that both the input and output argument will be relative to the root of the project.
Injectml will also keep the output's file structure the same as it was in the input folder.
To inject an html file, we use the <inject> tag. Let's say we had a file structure like so:
src
- index.html
- components
- navbar.htmlTo inject navbar into index, we need to specify inside our index.html where to place the navbar and point towards it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Injectml</title>
</head>
<body>
<inject src="components/navbar.html">
</body>
</html>This would then inject navbar's contents into our index html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Injectml</title>
</head>
<body>
<nav>
You've injected me inside!
</nav>
</body>
</html>Note that an html file that has been used as an injection will not be placed into the output path, so our output folder structure will look like this:
dist
- index.htmlNotice how the components folder and the navbar html file is not present.
Process
There are three main parts when running injectml, we first have reading, then injecting, then writing
readingis where we will map every file inside the input path specified and get them ready for the injecting and writing process.injectingis where we will run through all the contents grabbed from reading, recursively check if it is injecting other html files, until we finish injecting all of them.writingafter we have the content of our files ready, we then write them to the output path specified. keeping the same structure as it was in the input folder.
Additional Notes
Injectml uses pretty inside the hood.
You can also use injectml in your modules.
const injectHTML = require('injectml');
const modifiedHTML = injectHTML({ input: "./src", output: "./dist" });