Generate static html by passing an optional json object to your Elm views.
Library version of elm-static-html.
npm install --save elm-static-html-lib
In this example, we use decodeModel
to turn the passed JSON into a model that our view can use.
import { elmStaticHtml } from "elm-static-html-lib";
const model = { name: "Noah", age : 24 };
const options = { model : model, decoder: "MyModule.decodeModel" };
elmStaticHtml("/absolute/path/to/elm-package.json", "MyModule.view", options)
.then((generatedHtml) => {
fs.writeFileSync("output.html", generatedHtml);
});
In this case, our view has the type Html msg
.
import { elmStaticHtml } from "elm-static-html-lib";
const options = { };
elmStaticHtml("/absolute/path/to/elm-package.json", "MyModule.view", options)
.then((generatedHtml) => {
fs.writeFileSync("output.html", generatedHtml);
});
In order to truly match what Elm generates at runtime, you may not want to have spaces or indent inserted. You can do this by setting the newLines
and indent
options like so:
import { elmStaticHtml } from "elm-static-html-lib";
const model = { name: "Noah", age : 24 };
const options = { model : model, decoder: "MyModule.decodeModel", newLines: false, indent: 0 };
elmStaticHtml("/absolute/path/to/elm-package.json", "MyModule.view", options)
.then((generatedHtml) => {
fs.writeFileSync("output.html", generatedHtml);
});
When you want to render many views - particularly when they share dependencies - it is faster to use the multiple
function.
const configs = [
{ viewFunction: "MyModule.view", model, decoder: "MyModule.decodeModel", fileOutputName: "grouped1.html" },
{ viewFunction: "MyModule.lazyView", model, decoder: "MyModule.decodeModel", fileOutputName: "grouped2.html" },
];
elmStaticHtml.multiple("/absolute/path/to/elm-package.json", configs)
.then((generatedHtmls) => {
generatedHtmls
.map((output) => fs.writeFileSync(output.fileOutputName, output.generatedHtml));
});
elmStaticHtml(packagePath, viewFunction, options)
elm-package.json
of your project.<ModuleName>.<functionName>
elmStaticHtml.multiple(packagePath, configs)
elm-package.json
of your project.returns Output: An object containing the generated html and the outputFileName.
export interface ViewFunctionConfig {
viewFunction: string;
fileOutputName: string;
model?: any;
decoder?: string;
indent?: number;
newLines?: boolean;
}
<ModuleName>.<functionName>
Output
, to make saving the generated html easiermodel
. Format <ModuleName>.<decoderName>
export interface Output {
generatedHtml: string;
fileOutputName: string;
}
Check out the example folder for a more in-depth example.
If you are running this in production, you may want to only generate the boilerplate files once. You can do that by setting the option alreadyRun
to true. When alreadyRun
is true, the Elm app is only started -- no boilerplate is generated.
You may want to hide warnings, which you can do by setting HIDE_WARNINGS=true
in your env.
import { elmStaticHtml, multiple }
multiple
added to provide a way to compile multiple views in a single pass