eeue56 / elm-static-html-lib

BSD 3-Clause "New" or "Revised" License
57 stars 11 forks source link

elm-static-html-lib

Generate static html by passing an optional json object to your Elm views.

Library version of elm-static-html.

Install

npm install --save elm-static-html-lib

Usage

with an argument

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);
});

without an argument

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);
});

With no indent

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);
});

multiple at once

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));
});

API description

elmStaticHtml(packagePath, viewFunction, options)
elmStaticHtml.multiple(packagePath, configs)

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;
}
export interface Output {
    generatedHtml: string;
    fileOutputName: string;
}

More examples

Check out the example folder for a more in-depth example.

Production

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.

Changelog

0.1.0