Shellfish

Namespace: fengshui

fengshui

Module ID: shellfish/fengshui

Feng Shui is the code processor for translating code written in Shui to JavaScript code, either at runtime when loading the code, or at build time. This module is compatible with Node.js for translating code on the server-side and may either be imported as a module, or executed as a stand-alone command line tool via node.

This module is usually not used directly by client-side code.

Examples

Using Feng Shui with Node.js on the server

const fengshui = require("./shellfish/fengshui.js");
const js = fengshui.compile("internal.shui", 'Label { text: "Hello!" }');

Running as a command line tool with Node.js (this example writes MyFile.shui.js)

> node fengshui.js MyFile.shui

Importing in client-side JavaScript

shRequire("shellfish/fengshui", fengshui =>
{
    ...
});

Importing in Shui

require "shellfish/fengshui" as fengshui;

Object {
    ...
}

Methods

fengshui.compile (url, data)string static

fengshui.js:346

Compiles a Shui document to JavaScript code.

This function may be used as a transformer function in shRequire.

Name Type Description
url string

The URL the module came from. The document is only compiled if the URL ends with .shui. Otherwise, data will be returned as is.
data string

The Shui document.
Throws:

A parser error.

Returns:
Type Description
string JavaScript code.

fengshui.load (url, rslv)Promise static

fengshui.js:389

Loads a Shui module from URL and returns a Promise for the loaded module. The module exports a create() function that will create the element tree.

Name Type Description
url string

The URL of the document.
rslv function

A function for resolving element IDs. If called inside a Shui document, the internal function __rslv__ is the right function to use.
Returns:
Type Description
Promise The Promise for the loaded module.
Example
fengshui.load("MyElement.shui", __rslv__)
.then(module =>
{
    const element = module.create();
    thisDocument.add(element);
});

Type Definitions

fengshui.Container

A Container is a Shui concept for complex components of elements to contain child elements.

Shui components may provide several containers for putting child elements into. For instance, a dialog window could provide a container for the main content as well as a container for holding the dialog buttons.

Use the container keyword to define containers, and the into keyword to put elements into containers.

The container called default is the default container that is used if you do not put elements into a container explicitly.

Examples

Defining containers in Shui

Overlay {
    container default: contentArea
    container buttons: buttonBox

    ...

    Box {
        id: contentArea
        ...
    }

    Box {
        id: buttonBox
        ...
    }

    ...
}

Putting elements into containers in Shui

MyElement {
    into buttons Button {
        text: "Click Me"
    }
}

fengshui.Template

A Template is a Shui concept for declaring components that will be created dynamically, such as items in a list view.

Technically, a container is a function returning a tree of elements. Use the template keyword to declare a template.

Example

Declaring a template

ListView {
    ...

    delegate: template Box {
        ...
    }
}