Theatre Files

A theatre file is a javascript file to run your main implementation (such as a stage.) At the top of the file we can define metadata as a comment:

/*
title: Fancy Browser Title
files:
    ../point_src/core/head.js
    ../point_src/stage.js
---

# My Content!

This is a description about this file.
*/

class MainStage extends Stage {
    canvas='playspace'
}

We can define files to import as standard JS.

File Entries

Relative Filepath

The file reference import is relative from the current file location.

/*
files:
    ../point_src/core/head.js
    ../point_src/stage.js
    // ...
*/

Absolute Path

A filepath can be any reference, such as an absolute address

/*
files:
    https://jsdeliver/example
    ../point_src/core/head.js
    mouse
    pointList
*/

Filepack Reference

The files.json presents all files and their dependencies. The name of a reference can be imported, with all the dependencies correctly applied:

/*
files:
    head
    mouse
    pointList
*/

When leading a filepach reference, we can apply the src_dir as a relative location for the imports

/*
src_dir: ../point_src/
files:
    head
    mouse
    pointList
*/

Result:

/*
files:
    ../point_src/core/head.js
    ../point_src/automouse.js
    ../point_src/pointlist.js
    // ...
*/

The references can be mixed with standard paths. Ordering is managed.

Key Points

• the files can be mixed and matched
• dependences are applied in order
• repeats are ignored

Tree-shaken export

The theatre-file export menu also offers a tree-shaken download. It uses the same ordered file list, with the theatre file and its stage setup as the compilation roots. Unreferenced top-level declarations are removed while top-level side effects are retained. Since theatre files are classic browser scripts, dynamic lookups such as window[name] cannot always be resolved statically; avoid relying on dynamically named declarations in this export.

/*
src_dir: ../point_src/
files:
    ../point_src/distances.js
    pointlist
    ../point_src/events.js
    ../point_src/functions/clamp.js
    dragging
    stroke
    ../point_src/automouse.js
 */