Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eeue56/elm-static-html-lib
https://github.com/eeue56/elm-static-html-lib
Last synced: 27 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/eeue56/elm-static-html-lib
- Owner: eeue56
- License: bsd-3-clause
- Created: 2017-07-27T12:04:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-18T19:16:28.000Z (over 1 year ago)
- Last Synced: 2024-09-30T05:22:46.310Z (about 1 month ago)
- Language: TypeScript
- Size: 61.5 KB
- Stars: 57
- Watchers: 6
- Forks: 11
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-ccamel - eeue56/elm-static-html-lib - (TypeScript)
README
# 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.
```javascript
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`.
```javascript
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:
```javascript
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.
```javascript
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
```js
elmStaticHtml(packagePath, viewFunction, options)
```- **packagePath** *(String)*: An absolute path to the `elm-package.json` of your project.
- **viewFunction** *(String)*: [Qualified name](https://guide.elm-lang.org/reuse/modules.html) to the view function. Format `.`
- **options** *(object)*: A map of options. Can be either empty or contain a model and a qualified decoder name. See above for usage details.```js
elmStaticHtml.multiple(packagePath, configs)
```- **packagePath** *(String)*: An absolute path to the `elm-package.json` of your project.
- **configs** *ViewFunctionConfig[]*: An array of configurations, see below.
- **alreadyRun?** *(Boolean)*: When true, doesn't generate boilerplate again. Useful if only your models have changed, and not your elm code.
- **elmMakePath?** *(String)*: Specify the path to elm-make.
- **installMethod** *(String)*: Specify a custom package installation command.**returns** *Output*: An object containing the generated html and the outputFileName.
```typescript
export interface ViewFunctionConfig {
viewFunction: string;
fileOutputName: string;
model?: any;
decoder?: string;
indent?: number;
newLines?: boolean;
}
```- **viewFunction**: [Qualified name](https://guide.elm-lang.org/reuse/modules.html) to the view function. Format `.`
- **fileOutputName**: File name. This value is not touched and given back to `Output`, to make saving the generated html easier
- **model?**: Optional object that is given as the model to your view function
- **decoder?**: [Qualified name](https://guide.elm-lang.org/reuse/modules.html) to the decoder for `model`. Format `.`
- **indent?**: Optional formatting flag. Sets whether the generated html should be indented (default true)
- **newLines?**: Optional formatting flag. Sets whether new tags should start on a new line when (default true)```typescript
export interface Output {
generatedHtml: string;
fileOutputName: string;
}
```- **generatedHtml**: The html that your view has produced
- **fileOutputName**: A file name that is threaded through for convenience### More examples
Check out the [example](https://github.com/eeue56/elm-static-html-lib/tree/master/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
- elmStaticHtml now exposes two functions with no default, e.g `import { elmStaticHtml, multiple }`
- `multiple` added to provide a way to compile multiple views in a single pass