VGL Compiler

0.0.6 verified Fri May 01 auth: no javascript

A compiler that transforms Visual Grid Language (VGL) statements, used in GSS (Grid Style Sheets), into GSS-flavored Visual Format Language (VFL). Current version 0.0.6 is an early release with minimal documentation. It aims to provide feature parity with W3C Grid Layout Module using constraint-based primitives. The project has been moved to the GSS organization on GitHub. Key differentiator: enables 2D grid layout authoring via VGL, compiled to 1D VFL constraints.

Common errors

error Cannot find module 'error-reporter' ↓

cause v0.0.5 and earlier omitted error-reporter as a dependency.

fix

npm install vgl-compiler@0.0.6 (or add error-reporter to your own dependencies).

error TypeError: compile is not a function ↓

cause Using default import from CommonJS require incorrectly.

fix

Use import { compile } from 'vgl-compiler' instead of require('vgl-compiler').compile.

Warnings

gotcha The package has not been updated since 2015 and may have unresolved bugs. ↓

fix Consider using grid layout directly or browser-native CSS Grid.

breaking Package was moved: old repo at gss/vfl-compiler, new at gss/vgl-compiler. ↓

fix Update dependency to gss/vgl-compiler and ensure version >=0.0.6.

gotcha No TypeScript typings shipped; manual typing may be needed. ↓

fix Use @types/vgl-compiler if available or declare module.

Install

npm install vgl-compiler

yarn add vgl-compiler

pnpm add vgl-compiler

Imports

compile

wrong

const compile = require('vgl-compiler')

correct

import { compile } from 'vgl-compiler'

ESM-only export

default

wrong

const vglCompiler = require('vgl-compiler')

correct

import vglCompiler from 'vgl-compiler'

Default export is the compile function

TokenType

wrong

const { TokenType } = require('vgl-compiler')

correct

import { TokenType } from 'vgl-compiler'

Type exports for custom compile options

Quickstart

Compile a VGL grid definition into VFL constraints.

import { compile } from 'vgl-compiler';

const vglCode = `
  @grid [container] {
    columns: 1fr 1fr 1fr;
    rows: auto 200px;
    areas: "a b c" "d e f";
  }
`;

const vflOutput = compile(vglCode);
console.log(vflOutput);
// Output: VFL representation of the grid