Interface ConstraintJS

ConstraintJS. Calling cjs(value) creates a constraint; every other API is a property of cjs.

interface ConstraintJS {
    array: <T>(options?: ArrayConstraintOptions<T>) => ArrayConstraint<T>;
    ArrayConstraint: typeof ArrayConstraint;
    arrayDiff: <T>(
        from: readonly T[],
        to: readonly T[],
        equals?: EqualityCheck<T>,
    ) => ArrayDiff<T>;
    bindAttr: PropertyBinder;
    bindChildren: (targets: unknown, ...values: unknown[]) => Binding<Node[]>;
    bindClass: (targets: unknown, ...values: unknown[]) => Binding<string[]>;
    bindCSS: PropertyBinder;
    bindHTML: (targets: unknown, ...values: unknown[]) => Binding<string>;
    Binding: typeof Binding;
    bindText: (targets: unknown, ...values: unknown[]) => Binding<string>;
    bindValue: (targets: unknown, ...values: unknown[]) => Binding<string>;
    CJSEvent: typeof CJSEvent;
    constraint: <T>(
        value?: ConstraintSource<T>,
        options?: ConstraintOptions<T>,
    ) => Constraint<T>;
    Constraint: typeof Constraint;
    createParsedConstraint: (source: unknown, context: unknown) => Constraint;
    createTemplate: {
        (template: unknown): TemplateFunction;
        (template: unknown, context: unknown, parent?: unknown): Node;
    };
    fsm: (...stateNames: (string | readonly string[])[]) => FSM;
    FSM: typeof FSM;
    get: {
        <T>(value: Constraint<T>, autoAddOutgoing?: boolean): T;
        <T>(value: ArrayConstraint<T>): T[];
        <V>(value: MapConstraint<any, V>): Record<string, V>;
        <T>(value: T): T;
    };
    inFSM: <T>(
        fsm: FSM,
        values: Record<string, ConstraintSource<T>>,
    ) => Constraint<T>;
    inputValue: (inputs: unknown) => Constraint<any>;
    isArrayConstraint: (value: unknown) => value is ArrayConstraint<any>;
    isConstraint: (value: unknown) => value is Constraint<any>;
    isFSM: (value: unknown) => value is FSM;
    isMapConstraint: (value: unknown) => value is MapConstraint<any, any>;
    liven: (func: (this: any) => void, options?: LivenOptions) => LiveFunction;
    map: <K = any, V = any>(
        options?: MapConstraintOptions<K, V>,
    ) => MapConstraint<K, V>;
    MapConstraint: typeof MapConstraint;
    memoize: <A extends unknown[], R>(
        getter: (this: any, ...args: A) => R,
        options?: MemoizeOptions,
    ) => MemoizedFunction<A, R>;
    on: (eventType: unknown, ...targets: unknown[]) => CJSEvent;
    removeDependency: (from: Constraint, to: Constraint) => void;
    signal: () => void;
    toString: () => string;
    version: string;
    wait: () => void;
    destroyTemplate(node: unknown): ConstraintJS;
    noConflict(): ConstraintJS;
    pauseTemplate(node: unknown): ConstraintJS;
    registerCustomPartial(
        name: string,
        options: CustomPartialOptions,
    ): ConstraintJS;
    registerPartial(
        name: string,
        template: string | TemplateFunction,
    ): ConstraintJS;
    resumeTemplate(node: unknown): ConstraintJS;
    unregisterPartial(name: string): ConstraintJS;
    <T>(value: AnyOnly<T>, options?: object): any;
    (
        value: [],
        options?: Omit<ArrayConstraintOptions<any>, "value">,
    ): ArrayConstraint<any>;
    <T>(
        value: T[],
        options?: Omit<ArrayConstraintOptions<NoInfer<T>>, "value">,
    ): ArrayConstraint<T>;
    (
        input: Node | NodeList | null,
        options?: ConstraintOptions<any>,
    ): Constraint<any>;
    <T>(
        getter: ConstraintGetter<T>,
        options?: ConstraintOptions<NoInfer<T>>,
    ): Constraint<T>;
    <T>(
        constraint: Constraint<T>,
        options?: ConstraintOptions<NoInfer<T>>,
    ): Constraint<T>;
    (
        object: Record<string, never>,
        options?: Omit<MapConstraintOptions<string, any>, "value">,
    ): MapConstraint<string, any>;
    <V>(
        object: Record<string, V>,
        options?: Omit<MapConstraintOptions<string, NoInfer<V>>, "value">,
    ): MapConstraint<string, V>;
    <T>(value?: T, options?: ConstraintOptions<NoInfer<T>>): Constraint<T>;
}

Hierarchy

CreateConstraint
API
- ConstraintJS

ConstraintJS<T>(value: AnyOnly<T>, options?: object): any

Creates a constraint of the right kind for value: an ArrayConstraint for an array, a MapConstraint for a plain object, a constraint for an input element's value for a DOM node, and otherwise a Constraint (whose value can be a plain value, a function that computes it, or another constraint to follow).

Type Parameters

Parameters

value: AnyOnly<T>
Optionaloptions: object

Returns any

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

ConstraintJS(
value: [],
options?: Omit<ArrayConstraintOptions<any>, "value">,
): ArrayConstraint<any>

Parameters

value: []
Optionaloptions: Omit<ArrayConstraintOptions<any>, "value">

Returns ArrayConstraint<any>

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

ConstraintJS<T>(
value: T[],
options?: Omit<ArrayConstraintOptions<NoInfer<T>>, "value">,
): ArrayConstraint<T>

Type Parameters

Parameters

value: T[]
Optionaloptions: Omit<ArrayConstraintOptions<NoInfer<T>>, "value">

Returns ArrayConstraint<T>

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

ConstraintJS(
input: Node | NodeList | null,
options?: ConstraintOptions<any>,
): Constraint<any>

Parameters

input: Node | NodeList | null
Optionaloptions: ConstraintOptions<any>

Returns Constraint<any>

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

ConstraintJS<T>(
getter: ConstraintGetter<T>,
options?: ConstraintOptions<NoInfer<T>>,
): Constraint<T>

Type Parameters

Parameters

getter: ConstraintGetter<T>
Optionaloptions: ConstraintOptions<NoInfer<T>>

Returns Constraint<T>

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

ConstraintJS<T>(
constraint: Constraint<T>,
options?: ConstraintOptions<NoInfer<T>>,
): Constraint<T>

Type Parameters

Parameters

constraint: Constraint<T>
Optionaloptions: ConstraintOptions<NoInfer<T>>

Returns Constraint<T>

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

ConstraintJS(
object: Record<string, never>,
options?: Omit<MapConstraintOptions<string, any>, "value">,
): MapConstraint<string, any>

Parameters

object: Record<string, never>
Optionaloptions: Omit<MapConstraintOptions<string, any>, "value">

Returns MapConstraint<string, any>

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

ConstraintJS<V>(
object: Record<string, V>,
options?: Omit<MapConstraintOptions<string, NoInfer<V>>, "value">,
): MapConstraint<string, V>

Type Parameters

Parameters

object: Record<string, V>
Optionaloptions: Omit<MapConstraintOptions<string, NoInfer<V>>, "value">

Returns MapConstraint<string, V>

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

ConstraintJS<T>(
value?: T,
options?: ConstraintOptions<NoInfer<T>>,
): Constraint<T>

Type Parameters

Parameters

Optionalvalue: T
Optionaloptions: ConstraintOptions<NoInfer<T>>

Returns Constraint<T>

Example

var x = cjs(),
        y = cjs(1),
        z = cjs(function() {
            return y.get() + 1;
        });
    x.get(); // undefined
    y.get(); // 1
    z.get(); // 2

Example

Options
    var yes_lit = cjs(function() { return 1; }, { literal: true }),
        not_lit = cjs(function() { return 1; }, { literal: false });
    yes_lit.get(); // (function)
    not_lit.get(); // 1

Example

Array and map constraints
    var arr = cjs([1,2,3]);
    arr.item(0); // 1
    var obj = cjs({ foo: 1 });
    obj.get('foo'); // 1

Example

An input's value
    var name = cjs(document.getElementById('name_input'));

Properties

array

array: <T>(options?: ArrayConstraintOptions<T>) => ArrayConstraint<T> = ...

Creates an array constraint.

Example

var arr = cjs.array({
        value: [1,2,3]
    });

ArrayConstraint

ArrayConstraint: typeof ArrayConstraint

arrayDiff

arrayDiff: <T>(
    from: readonly T[],
    to: readonly T[],
    equals?: EqualityCheck<T>,
) => ArrayDiff<T>

Type Declaration

- <T>(
      from: readonly T[],
      to: readonly T[],
      equals?: EqualityCheck<T>,
  ): ArrayDiff<T>
- Computes how to transform from into to with as few operations as practical: which items were removed, which were added, and which have to move. This is used to keep DOM nodes in sync with a model while touching as few of them as possible.
  Type Parameters
  - T
  Parameters
  - from: readonly T[]
  - to: readonly T[]
  - equals: EqualityCheck<T> = defaultEquals
    How to tell whether two items are the same (default: ===)
  Returns ArrayDiff<T>
  Example
```
cjs.arrayDiff(["a", "b", "c"], ["c", "b", "d"]);
    // {
    //   removed: [{ from: 0, from_item: "a" }],
    //   added: [{ item: "d", to: 2, to_item: "d" }],
    //   moved: [{ item: "c", from: 2, to: 0, move_from: 1, insert_at: 0 }],
    //   index_changed: [{ item: "c", from: 2, to: 0, from_item: "c", to_item: "c" }]
    // }
```

bindAttr

bindAttr: PropertyBinder

Constrain a DOM element's attributes, given an object of attribute names and values (which can be a constraint or map constraint), or an attribute name and a value. An attribute is removed when its value is null or undefined (or, for boolean attributes like disabled, falsy).

Example

If `my_input` is an input element
    var default_txt = cjs('enter name');
    cjs.bindAttr(my_input, 'placeholder', default_txt);
    cjs.bindAttr(my_input, {
        placeholder: default_txt,
        name: cjs('my_name')
    });

bindChildren

bindChildren: (targets: unknown, ...values: unknown[]) => Binding<Node[]>

Constrain a DOM element's children. Each value can be a node, text, or an array of them. The bound children are kept at the start of the element; any children it already had stay after them.

Example

If `my_elem`, `child1`, and `child2` are DOM elements
    var nodes = cjs([child1, child2]);
    cjs.bindChildren(my_elem, nodes);

bindClass

bindClass: (targets: unknown, ...values: unknown[]) => Binding<string[]>

Constrain a DOM element's class names. Each value can be a class name, a space-separated list of class names, or an array of them. Classes that the element had before (and that aren't in the values) are left alone.

Example

If `my_elem` is a DOM element
    var classes = cjs('class1 class2');
    cjs.bindClass(my_elem, classes);

bindCSS

bindCSS: PropertyBinder

Constrain a DOM element's CSS styles, given an object of property names and values (which can be a constraint or map constraint), or a property name and a value.

Example

If `my_elem` is a DOM element
    var color = cjs('red'),
        left = cjs(0);
    cjs.bindCSS(my_elem, {
        "background-color": color,
        left: left.add('px')
    });
    cjs.bindCSS(my_elem, 'background-color', color);

bindHTML

bindHTML: (targets: unknown, ...values: unknown[]) => Binding<string>

Constrain a DOM element's HTML content to the concatenation of values.

Example

If `my_elem` is a DOM element
    var message = cjs('<b>hello</b>');
    cjs.bindHTML(my_elem, message);

Binding

Binding: typeof Binding

bindText

bindText: (targets: unknown, ...values: unknown[]) => Binding<string>

Constrain a DOM node's text content to the concatenation of values.

Example

If `my_elem` is a DOM element
    var message = cjs('hello');
    cjs.bindText(my_elem, message);

bindValue

bindValue: (targets: unknown, ...values: unknown[]) => Binding<string>

Constrain an input element's value to the concatenation of values.

Example

If `my_input` is a text input element
    var value = cjs('hello');
    cjs.bindValue(my_input, value);

CJSEvent

CJSEvent: typeof CJSEvent

constraint

constraint: <T>(
value?: ConstraintSource<T>,
options?: ConstraintOptions<T>,
) => Constraint<T> = ...

Creates a constraint.

Type Declaration

- <T>(value?: ConstraintSource<T>, options?: ConstraintOptions<T>): Constraint<T>
- Type Parameters
  - T
  Parameters
  - Optionalvalue: ConstraintSource<T>
    The initial value, a function to compute it, or a constraint to follow
  - Optionaloptions: ConstraintOptions<T>
  Returns Constraint<T>

See

Constraint

Constraint: typeof Constraint

createParsedConstraint

createParsedConstraint: (source: unknown, context: unknown) => Constraint

Type Declaration

- (source: unknown, context: unknown): Constraint
- Parses an expression (with the same syntax as template expressions) and returns a constraint for its value. Names in the expression are looked up on context (an object or map constraint). If the expression can't be parsed or evaluated, the error is logged and the value is undefined.
  Parameters
  - source: unknown
    The expression (or a constraint whose value is one)
  - context: unknown
  Returns Constraint
  Example
```
var a = cjs(1);
    var x = cjs.createParsedConstraint("a+b", {a: a, b: cjs(2)});
    x.get(); // 3
    a.set(2);
    x.get(); // 4
```

createTemplate

createTemplate: {
(template: unknown): TemplateFunction;
(template: unknown, context: unknown, parent?: unknown): Node;
}

Type Declaration

- (template: unknown): TemplateFunction
- Creates a template. With a context, renders it right away and returns the resulting DOM node. Otherwise, returns a function that can be called with a context (and optionally a parent node to render into) to render it.
  
  ConstraintJS templates use a syntax like Handlebars. Values in the context can be constraints; the rendered DOM stays up to date as they change.
  
  Expressions
```
<h1>{{title}}</h1>
<p>{{subtext.toUpperCase() + "!"}}</p>
```
  With { title: cjs('hello'), subtext: 'world' }, renders <h1>hello</h1><p>WORLD!</p>.
  
  Use triple braces to insert HTML: <p>{{{html_content}}}</p>
  
  Comments are ignored: {{! a comment }}
  
  Events and inputs
  
  data-cjs-on-(event)=handler calls the context's handler when the event happens:
```
<div data-cjs-on-click=update_obj></div>
```
  data-cjs-out=name sets the context's name to a constraint for the input's value:
```
<input data-cjs-out=user_name />
<h1>Hello, {{user_name}}</h1>
```
  Block helpers
  
  Loops
  
  {{#each}} renders its content for every item of an array or object. {{this}} is the current item, {{@index}} its index, and for objects, {{@key}} its key. The {{#else}} part is rendered when there are no items.
```
{{#each arr_name}}
    {{@index}}: {{this}}
{{#else}}
    <strong>No items!</strong>
{{/each}}
```
  Conditions
```
{{#if cond1}}
    Cond content
{{#elif other_cond}}
    other_cond content
{{#else}}
    else content
{{/if}}
```
  The opposite of {{#if}} is {{#unless}}:
```
{{#unless logged_in}}
    Not logged in!
{{/unless}}
```
  State
  
  {{#fsm}} renders the content for an FSM's current state:
```
{{#fsm my_fsm}}
    {{#state state1}}
        State1 content
    {{#state state2}}
        State2 content
{{/fsm}}
```
  With
  
  {{#with}} changes the context. {{../x}} reads x from the enclosing context.
```
{{#with obj}}
    Value: {{x}}
{{/with}}
```
  Partials
  
  Partials nest templates in other templates:
```
var my_temp = cjs.createTemplate(...);
cjs.registerPartial('my_template', my_temp);
```
  Then, in any other template, {{>my_template context}} renders my_template with context.
  Parameters
  - template: unknown
    The template, or an element (like a <script type="cjs/template">) whose text is the template
  Returns TemplateFunction
  See
  - destroyTemplate
  - pauseTemplate
  - resumeTemplate
  Example
```
<script id='my_template' type='cjs/template'>
    {{x}}
</script>
```
```
var template = cjs.createTemplate(document.getElementById('my_template'));
var element1 = template({x: 1});
var element2 = template({x: 2});
```
  Example
```
var element = cjs.createTemplate("{{x}}", {x: 1});
```
- (template: unknown, context: unknown, parent?: unknown): Node
- Creates a template. With a context, renders it right away and returns the resulting DOM node. Otherwise, returns a function that can be called with a context (and optionally a parent node to render into) to render it.
  
  ConstraintJS templates use a syntax like Handlebars. Values in the context can be constraints; the rendered DOM stays up to date as they change.
  
  Expressions
```
<h1>{{title}}</h1>
<p>{{subtext.toUpperCase() + "!"}}</p>
```
  With { title: cjs('hello'), subtext: 'world' }, renders <h1>hello</h1><p>WORLD!</p>.
  
  Use triple braces to insert HTML: <p>{{{html_content}}}</p>
  
  Comments are ignored: {{! a comment }}
  
  Events and inputs
  
  data-cjs-on-(event)=handler calls the context's handler when the event happens:
```
<div data-cjs-on-click=update_obj></div>
```
  data-cjs-out=name sets the context's name to a constraint for the input's value:
```
<input data-cjs-out=user_name />
<h1>Hello, {{user_name}}</h1>
```
  Block helpers
  
  Loops
  
  {{#each}} renders its content for every item of an array or object. {{this}} is the current item, {{@index}} its index, and for objects, {{@key}} its key. The {{#else}} part is rendered when there are no items.
```
{{#each arr_name}}
    {{@index}}: {{this}}
{{#else}}
    <strong>No items!</strong>
{{/each}}
```
  Conditions
```
{{#if cond1}}
    Cond content
{{#elif other_cond}}
    other_cond content
{{#else}}
    else content
{{/if}}
```
  The opposite of {{#if}} is {{#unless}}:
```
{{#unless logged_in}}
    Not logged in!
{{/unless}}
```
  State
  
  {{#fsm}} renders the content for an FSM's current state:
```
{{#fsm my_fsm}}
    {{#state state1}}
        State1 content
    {{#state state2}}
        State2 content
{{/fsm}}
```
  With
  
  {{#with}} changes the context. {{../x}} reads x from the enclosing context.
```
{{#with obj}}
    Value: {{x}}
{{/with}}
```
  Partials
  
  Partials nest templates in other templates:
```
var my_temp = cjs.createTemplate(...);
cjs.registerPartial('my_template', my_temp);
```
  Then, in any other template, {{>my_template context}} renders my_template with context.
  Parameters
  - template: unknown
    The template, or an element (like a <script type="cjs/template">) whose text is the template
  - context: unknown
  - Optionalparent: unknown
  Returns Node
  See
  - destroyTemplate
  - pauseTemplate
  - resumeTemplate
  Example
```
<script id='my_template' type='cjs/template'>
    {{x}}
</script>
```
```
var template = cjs.createTemplate(document.getElementById('my_template'));
var element1 = template({x: 1});
var element2 = template({x: 2});
```
  Example
```
var element = cjs.createTemplate("{{x}}", {x: 1});
```

fsm

fsm: (...stateNames: (string | readonly string[])[]) => FSM = ...

Creates an FSM.

Type Declaration

- (...stateNames: (string | readonly string[])[]): FSM
- Parameters
  - ...stateNames: (string | readonly string[])[]
    The FSM's states; the first one is the starting state
  Returns FSM

Example

A state machine with two states
    var my_state = cjs.fsm("state1", "state2");

FSM

FSM: typeof FSM

get

get: {
    <T>(value: Constraint<T>, autoAddOutgoing?: boolean): T;
    <T>(value: ArrayConstraint<T>): T[];
    <V>(value: MapConstraint<any, V>): Record<string, V>;
    <T>(value: T): T;
}

Type Declaration

- <T>(value: Constraint<T>, autoAddOutgoing?: boolean): T
- Gets the value of anything: the value of a constraint, a plain array for an array constraint, a plain object for a map constraint, or the object itself for anything else.
  Type Parameters
  - T
  Parameters
  - value: Constraint<T>
  - OptionalautoAddOutgoing: boolean
    For constraints, whether a constraint that is computing its value right now should start depending on this one (default: true)
  Returns T
  Example
```
var w = 1,
        x = cjs(2),
        y = cjs(['a','b']),
        z = cjs({c: 2});

    cjs.get(w); // 1
    cjs.get(x); // 2
    cjs.get(y); // ['a','b']
    cjs.get(z); // {c: 2}
```
- <T>(value: ArrayConstraint<T>): T[]
- Gets the value of anything: the value of a constraint, a plain array for an array constraint, a plain object for a map constraint, or the object itself for anything else.
  Type Parameters
  - T
  Parameters
  - value: ArrayConstraint<T>
  Returns T[]
  Example
```
var w = 1,
        x = cjs(2),
        y = cjs(['a','b']),
        z = cjs({c: 2});

    cjs.get(w); // 1
    cjs.get(x); // 2
    cjs.get(y); // ['a','b']
    cjs.get(z); // {c: 2}
```
- <V>(value: MapConstraint<any, V>): Record<string, V>
- Gets the value of anything: the value of a constraint, a plain array for an array constraint, a plain object for a map constraint, or the object itself for anything else.
  Type Parameters
  - V
  Parameters
  - value: MapConstraint<any, V>
  Returns Record<string, V>
  Example
```
var w = 1,
        x = cjs(2),
        y = cjs(['a','b']),
        z = cjs({c: 2});

    cjs.get(w); // 1
    cjs.get(x); // 2
    cjs.get(y); // ['a','b']
    cjs.get(z); // {c: 2}
```
- <T>(value: T): T
- Gets the value of anything: the value of a constraint, a plain array for an array constraint, a plain object for a map constraint, or the object itself for anything else.
  Type Parameters
  - T
  Parameters
  - value: T
  Returns T
  Example
```
var w = 1,
        x = cjs(2),
        y = cjs(['a','b']),
        z = cjs({c: 2});

    cjs.get(w); // 1
    cjs.get(x); // 2
    cjs.get(y); // ['a','b']
    cjs.get(z); // {c: 2}
```

inFSM

inFSM: <T>(
fsm: FSM,
values: Record<string, ConstraintSource<T>>,
) => Constraint<T> = ...

Creates a constraint whose value depends on the state of an FSM.

Type Declaration

- <T>(fsm: FSM, values: Record<string, ConstraintSource<T>>): Constraint<T>
- Type Parameters
  - T
  Parameters
  - fsm: FSM
  - values: Record<string, ConstraintSource<T>>
    For each state name, the constraint's value in that state
  Returns Constraint<T>

Example

var fsm = cjs.fsm("state1", "state2")
                 .addTransition("state1", "state2", cjs.on("click"));
    var x = cjs.inFSM(fsm, {
        state1: 'val1',
        state2: function() { return 'val2'; }
    });

inputValue

inputValue: (inputs: unknown) => Constraint<any>

Type Declaration

- (inputs: unknown): Constraint<any>
- A constraint whose value is the value of an input element (or, given several inputs, an array of their values).
  Parameters
  - inputs: unknown
  Returns Constraint<any>
  Example
```
If `name_input` is an input element
    var name = cjs.inputValue(name_input);
```

isArrayConstraint

isArrayConstraint: (value: unknown) => value is ArrayConstraint<any>

Type Declaration

- (value: unknown): value is ArrayConstraint<any>
- Whether value is an array constraint.
  Parameters
  - value: unknown
  Returns value is ArrayConstraint<any>

isConstraint

isConstraint: (value: unknown) => value is Constraint<any>

Type Declaration

- (value: unknown): value is Constraint<any>
- Whether value is a constraint.
  Parameters
  - value: unknown
  Returns value is Constraint<any>

isFSM

isFSM: (value: unknown) => value is FSM

Type Declaration

- (value: unknown): value is FSM
- Whether value is an FSM.
  Parameters
  - value: unknown
  Returns value is FSM

isMapConstraint

isMapConstraint: (value: unknown) => value is MapConstraint<any, any>

Type Declaration

- (value: unknown): value is MapConstraint<any, any>
- Whether value is a map constraint.
  Parameters
  - value: unknown
  Returns value is MapConstraint<any, any>

liven

liven: (func: (this: any) => void, options?: LivenOptions) => LiveFunction

Type Declaration

(func: (this: any) => void, options?: LivenOptions): LiveFunction

Runs func, and runs it again whenever any constraint it read changes.

Parameters

func: (this: any) => void
Optionaloptions: LivenOptions

Returns LiveFunction

Example

var x_val = cjs(0);
    var api_update = cjs.liven(function() {
        console.log('updating other x');
        other_api.setX(x_val.get());
    }); // 'updating other x'
    x_val.set(2); // 'updating other x'

map

map: <K = any, V = any>(
options?: MapConstraintOptions<K, V>,
) => MapConstraint<K, V> = ...

Creates a map constraint.

Example

var map_obj = cjs.map({
        value: { foo: 1 }
    });
    map_obj.get('foo'); // 1
    map_obj.put('bar', 2);
    map_obj.get('bar'); // 2

MapConstraint

MapConstraint: typeof MapConstraint

memoize

memoize: <A extends unknown[], R>(
getter: (this: any, ...args: A) => R,
options?: MemoizeOptions,
) => MemoizedFunction<A, R>

Type Declaration

<A extends unknown[], R>(
getter: (this: any, ...args: A) => R,
options?: MemoizeOptions,
): MemoizedFunction<A, R>

Memoizes a function: its result is remembered for each set of arguments, and only recomputed when a constraint that it read (for those arguments) changes.

Type Parameters

A extends unknown[]
R

Parameters

getter: (this: any, ...args: A) => R
Optionaloptions: MemoizeOptions

Returns MemoizedFunction<A, R>

Example

var arr = cjs([3,2,1,4,5,10]),
        get_nth_largest = cjs.memoize(function(n) {
            console.log('recomputing');
            var sorted_arr = arr.sort(function(a, b) { return b - a; });
            return sorted_arr[n];
        });

    get_nth_largest(0); // logged: recomputing
    get_nth_largest(0); // (nothing logged because the answer is memoized)
    arr.splice(0, 1);
    get_nth_largest(0); // logged: recomputing

on

on: (eventType: unknown, ...targets: unknown[]) => CJSEvent

Type Declaration

- (eventType: unknown, ...targets: unknown[]): CJSEvent
- Creates an event for FSM transitions (see FSM.prototype.addTransition).
  Parameters
  - eventType: unknown
    The type of event to listen for, like "click" or "timeout" (several types can be separated by spaces). It can be a constraint.
  - ...targets: unknown[]
    What to listen to (default: window). For "timeout", the delay in milliseconds instead.
  Returns CJSEvent
  Example
```
When the window resizes
    cjs.on("resize")
```
  Example
```
When the user clicks `elem1` or `elem2`
    cjs.on("click", elem1, elem2)
```
  Example
```
After 3 seconds
    cjs.on("timeout", 3000)
```

removeDependency

removeDependency: (from: Constraint, to: Constraint) => void

Type Declaration

- (from: Constraint, to: Constraint): void
- Removes the dependency of to on from (until to reads from again).
  Parameters
  - from: Constraint
  - to: Constraint
  Returns void

signal

signal: () => void

Type Declaration

(): void

Tells the constraint solver it is ready to run any onChange listeners. signal needs to be called the same number of times as wait before the listeners will run.

Returns void

Example

var x = cjs(1);
    x.onChange(function() {
        console.log('x changed');
    });
    cjs.wait();
    cjs.wait();
    x.set(2);
    x.set(3);
    cjs.signal();
    cjs.signal(); // output: x changed

toString

toString: () => string = ...

"ConstraintJS v" + cjs.version

version

version: string = __VERSION__

The version of ConstraintJS.

wait

wait: () => void

Type Declaration

(): void

Tells the constraint solver to delay running any onChange listeners.

Note that signal needs to be called the same number of times as wait before the listeners will run.

Returns void

Example

var x = cjs(1);
    x.onChange(function() {
        console.log('x changed');
    });
    cjs.wait();
    x.set(2);
    x.set(3);
    cjs.signal(); // output: x changed

Methods

destroyTemplate

destroyTemplate(node: unknown): ConstraintJS
Stops a rendered template from updating and cleans up after it.
Parameters
- node: unknown
  A DOM node returned by a template function
Returns ConstraintJS
- Defined in index.ts:245

noConflict

noConflict(): ConstraintJS
Restores the previous value of the global cjs variable (when ConstraintJS was loaded with a <script> tag) and returns ConstraintJS.

Returns ConstraintJS
Example
```
var ninjaCJS = cjs.noConflict();
    var x = ninjaCJS(1);
```
- Defined in index.ts:269

pauseTemplate

pauseTemplate(node: unknown): ConstraintJS
Pauses updates to a rendered template (until resumeTemplate).
Parameters
- node: unknown
  A DOM node returned by a template function
Returns ConstraintJS
- Defined in index.ts:252

registerCustomPartial

registerCustomPartial(name: string, options: CustomPartialOptions): ConstraintJS
Registers a custom partial, whose DOM node is created by a function, that other templates can use ({{>name args...}}).
Parameters
- name: string
- options: CustomPartialOptions
Returns ConstraintJS
- Defined in index.ts:235

registerPartial

registerPartial(name: string, template: string | TemplateFunction): ConstraintJS
Registers a template as a partial that other templates can use ({{>name context}}).
Parameters
- name: string
- template: string | TemplateFunction
Returns ConstraintJS
Example
```
var my_temp = cjs.createTemplate(...);
    cjs.registerPartial('my_template', my_temp);
```
- Defined in index.ts:229

resumeTemplate

resumeTemplate(node: unknown): ConstraintJS
Resumes updates to a rendered template (after pauseTemplate).
Parameters
- node: unknown
  A DOM node returned by a template function
Returns ConstraintJS
- Defined in index.ts:259

unregisterPartial

unregisterPartial(name: string): ConstraintJS
Unregisters a partial.
Parameters
- name: string
Returns ConstraintJS
- Defined in index.ts:238

Interface ConstraintJS

Hierarchy

Type Parameters

Parameters

Returns any

Example

Example

Example

Example

Parameters

Returns ArrayConstraint<any>

Example

Example

Example

Example

Type Parameters

Parameters

Returns ArrayConstraint<T>

Example

Example

Example

Example

Parameters

Returns Constraint<any>

Example

Example

Example

Example

Type Parameters

Parameters

Returns Constraint<T>

Example

Example

Example

Example

Type Parameters

Parameters

Returns Constraint<T>

Example

Example

Example

Example

Parameters

Returns MapConstraint<string, any>

Example

Example

Example

Example

Type Parameters

Parameters

Returns MapConstraint<string, V>

Example

Example

Example

Example

Type Parameters

Parameters

Returns Constraint<T>

Example

Example

Example

Example

Index

Properties

Methods

Properties

array

Example

ArrayConstraint

arrayDiff

Type Declaration

Type Parameters

Parameters

Returns ArrayDiff<T>

Example

bindAttr

Example

bindChildren

Example

bindClass