npm package: @opentech-ux/lom-compiler
Description: Compiler to generate playable HTML wireframe site from layout description model (LOM)
Author: Pierre-Louis JAEGER
Latest version: 0.2.1

# OpenTech UX LOM Compiler

[![npm version](https://badgen.net/npm/v/@opentech-ux/lom-compiler)](https://www.npmjs.com/package/@opentech-ux/lom-compiler)
[![npm license](https://badgen.net/npm/license/@opentech-ux/lom-compiler)](https://www.npmjs.com/package/@opentech-ux/lom-compiler)
[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fopentech-ux%2Flom-compiler%2Fbadge%3Fref%3Dmaster&style=flat)](https://actions-badge.atrox.dev/opentech-ux/lom-compiler/goto?ref=master)

-  [OpenTech UX LOM Compiler](#opentech-ux-lom-compiler)
   -  [Description](#description)
   -  [Installation](#installation)
   -  [Importing](#importing)
   -  [Uses examples](#uses-examples)
   -  [License](#license)

## Description

[JSON schema](https://opentech-ux.github.io/lom-format/) file compiler for generating an interactive
model of website navigation.

This compiler accepts custom files or files generated by the captor
[script](https://github.com/opentech-ux/lom-captor) containing the JSON schema format. Consequently,
generate a series of HTML files that represent a simulation of the navigation on a web site.

## Installation

```bash
npm install @opentech-ux/lom-compiler
```

## Importing

```js
// Using Node.js `require()`
const { LomCompiler } = require('@opentech-ux/lom-compiler');

// Using ES6 imports
import { LomCompiler } from '@opentech-ux/lom-compiler';
```

## Uses examples

-  Initial project folder structure

   ```txt
   Project folder/
   ├─ build/
   │  ├─ test-output/
   ├─ data/
   │  ├─ json/
   │  │  ├─ basic-lom/
   │  │  │  ├─ basic.lom.json
   │  │  ├─ multi-lom/
   │  │  │  ├─ basic.lom.json
   │  │  │  ├─ script.lom.json
   │  │  ├─ script-lom/
   │  │  │  ├─ script.lom.json
   ├─ index.js
   ```

-  Use examples in a JS file

   ```js
   // index.js
   const BASE_DIR = 'build/test-output';
   const folderName = 'basic-lom';

   // Base directory is the executing file directory
   new LomCompiler()
      // Source file path
      .source('data/json/basic-lom/basic.lom.json')
      // Directory path where to save the result (folder will be created in case of needed)
      .outputDir(`${BASE_DIR}/${folderName}`)
      .compile();
   ```

   ```js
   // index.js
   const BASE_DIR = 'build/test-output';
   const folderName = 'script-lom';

   // Base directory defined
   new LomCompiler(BASE_DIR)
      // Source file path relative to base directory
      .source('../../data/json/script-lom/script.lom.json')
      // Folder name used inside the base directory
      .outputDir(folderName)
      .compile();
   ```

   ```js
   // index.js
   const BASE_DIR = 'build/test-output';
   const folderName = 'multi-lom';

   // Base directory defined
   new LomCompiler(BASE_DIR)
      // Source files directory path relative to base directory
      .source('../../data/json/multi-lom')
      // Folder name used inside the base directory
      .outputDir(folderName)
      .compile();
   ```

-  Project folder structure after executing the examples

   ```txt
   Project folder/
   ├─ build/
   │  ├─ test-output/
   │  │  ├─ basic-lom/
   │  │  │  ├─ otherPage/
   │  │  │  │  ├─ index.html
   │  │  │  ├─ index.html
   │  │  ├─ script-lom/
   │  │  │  ├─ about/
   │  │  │  │  ├─ index.html
   │  │  │  ├─ contact/
   │  │  │  │  ├─ index.html
   │  │  │  ├─ index.html
   │  │  ├─ multi-lom/
   │  │  │  ├─ about/
   │  │  │  │  ├─ index.html
   │  │  │  ├─ contact/
   │  │  │  │  ├─ index.html
   │  │  │  ├─ otherPage/
   │  │  │  │  ├─ index.html
   │  │  │  ├─ index.html
   ├─ data/
   │  ├─ json/
   │  │  ├─ basic-lom/
   │  │  │  ├─ basic.lom.json
   │  │  ├─ multi-lom/
   │  │  │  ├─ basic.lom.json
   │  │  │  ├─ script.lom.json
   │  │  ├─ script-lom/
   │  │  │  ├─ script.lom.json
   ├─ index.js
   ```

## License

[APACHE 2.0](LICENSE)