https://github.com/opentech-ux/lom-compiler
Compiler to generate playable HTML wireframe site from layout description model (LOM)
https://github.com/opentech-ux/lom-compiler
compiler lom npm package typescript ux wireframe
Last synced: about 2 months ago
JSON representation
Compiler to generate playable HTML wireframe site from layout description model (LOM)
- Host: GitHub
- URL: https://github.com/opentech-ux/lom-compiler
- Owner: opentech-ux
- License: other
- Created: 2021-08-11T13:38:45.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T07:57:31.000Z (over 3 years ago)
- Last Synced: 2025-05-20T23:45:34.229Z (about 1 year ago)
- Topics: compiler, lom, npm, package, typescript, ux, wireframe
- Language: TypeScript
- Homepage: https://opentech-ux.github.io/lom-compiler/
- Size: 1.34 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# OpenTech UX LOM Compiler
[](https://www.npmjs.com/package/@opentech-ux/lom-compiler)
[](https://www.npmjs.com/package/@opentech-ux/lom-compiler)
[](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)