opentech-ux / lom-compiler

Compiler to generate playable HTML wireframe site from layout description model (LOM)

OpenTech UX LOM Compiler

• OpenTech UX LOM Compiler
  • Description
  • Installation
  • Importing
  • Uses examples
  • License

Description

JSON schema file compiler for generating an interactive model of website navigation.

This compiler accepts custom files or files generated by the captor script containing the JSON schema format. Consequently, generate a series of HTML files that represent a simulation of the navigation on a web site.

Installation

npm install @opentech-ux/lom-compiler

Importing

// 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

  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

  // 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();

  // 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();

  // 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

  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