# Variable Cardboard`Const`

Cardboard: {
CEvent: any;
CMappedEvent: any;
CTag: any;
Consumable: any;
Router: any;
Link: ((child, path, query?) => CTag);
allTags: AllTags;
arraysEqual: ((a?, b?) => boolean);
attach: ((tag) => CTag);
attached: (() => undefined | CTag);
camelToDash: ((str) => any);
context: {
attached?: CTag;
observer?: {
onAdded: CEvent<Node>;
onRemoved: CEvent<Node>;
};
stack: CTag[];
};
createConsumable: (<T>(val, destroyer?) => Consumable<T>);
createGlobalObserver: (() => {
onAdded: CEvent<Node>;
onRemoved: CEvent<Node>;
});
deepEquals: ((a, b) => boolean);
detach: (() => void);
detachAll: (() => void);
equalTo: (<T>(cons, val) => IConsumable<boolean>);
genBlock: ((selector, style) => string);
genBlockContent: ((selector, style) => string[]);
genCss: ((styleSheet) => string);
getValue: (<T>(val) => T);
grab: (<T, K>(cons, key, defaultVal?) => IConsumable<undefined | T[K]>);
greaterThan: ((cons, val?) => IConsumable<boolean>);
greaterThanOr: ((cons, val?) => IConsumable<boolean>);
init: ((options?) => CTag);
intersect: (<T, K>(other, intersector) => IConsumable<K>);
intersectMulti: (<T, K>(consumables, intersector) => IConsumable<K>);
isArray: ((obj) => boolean);
isConsumable: ((obj) => boolean);
isEmpty: (<T>(cons) => IConsumable<boolean>);
isObject: ((obj) => boolean);
lessThan: ((cons, val?) => IConsumable<boolean>);
lessThanOr: ((cons, val?) => IConsumable<boolean>);
listState: (<T>(initialData) => {
add: ((item) => void);
addAt: ((item, index) => void);
length: IConsumable<number>;
remove: any;
removeWhere: any;
get list(): IConsumable<IConsumable<T>[]>;
get listValue(): IConsumable<T>[];
});
makeRouter: (<T>(opts) => Router<T>);
mappedEvent: (<T>() => CMappedEvent<T>);
notEmpty: (<T>(cons) => IConsumable<boolean>);
notEqualTo: (<T>(cons, val) => IConsumable<boolean>);
removeFromList: (<T>(item, list?) => boolean);
singleEvent: (<T>() => CEvent<T>);
state: (<T>(initialValue) => IConsumable<T>);
stateAdd: (<T>(cons, item) => void);
stateAddAt: (<T>(cons, item, index) => void);
stateRemove: (<T>(cons, item) => void);
stateRemoveWhere: (<T>(cons, cb) => void);
swapItems: ((array, from, to) => any[]);
tag: ((arg0, children?, attach?) => CTag);
text: (<T, K>(textTemplate, obj?) => Node);
val: (<T>(val, ...args) => T);
withLifecycle: ((tag, handler) => CTag);
router: Router<any> | undefined;
onLifecycle(tag, onStart?, onRemove?, beforeRemove?) => void;
} = ...

#### Type declaration

- ##### Link: ((child, path, query?) => CTag)

  - - (child, path, query?): CTag

    - #### Parameters

      - ##### child: string | CTag

      - ##### path: any

      - ##### `Optional` query: Record<string, string>

      #### Returns CTag

- ##### allTags: AllTags

  List of all HTML tag functions. From `div` to `abbr` :) If you want to create any other tag, use the tag function.

  #### Example

      const { div, p, abbr, img, style, ... } = allTags;

- ##### arraysEqual: ((a?, b?) => boolean)

  - - (a?, b?): boolean

    - #### Parameters

      - ##### `Optional` a: any[]

      - ##### `Optional` b: any[]

      #### Returns boolean

- ##### attach: ((tag) => CTag)

  - - (tag): CTag

    - Attach the given tag. This means that when other tags are created marked as attachable (using `<tag_name>.attach()`, `tag('<tag_name>', [], true)`), they will be added as children of this tag. You can call attach multiple times, and the last attach tag will be used. Then when you've finished, you can call detach to go back to the previously attached tag if there is one, or clear the attached tag.

      #### Parameters

      - ##### tag: CTag

      #### Returns CTag

      #### Example

          attach(div());
          div.attach();  // added as child of div
          p.attach();    // added as child of div

          attach(div()); // New div
          div.attach();  // added as child of new div
          p.attach();    // added as child of new div

          detach();      // Back to previous div
          detach();      // No attached tag

- ##### attached: (() => undefined | CTag)

  - - (): undefined | CTag

    - Returns the currently attached CTag. See attach for more information.

      #### Returns undefined | CTag

- ##### camelToDash: ((str) => any)

  - - (str): any

    - #### Parameters

      - ##### str: any

      #### Returns any

- ##### context: {
  attached?: CTag;
  observer?: {
  onAdded: CEvent<Node>;
  onRemoved: CEvent<Node>;
  };
  stack: CTag[];
  }

  - ##### `Optional` attached?: CTag

  - ##### `Optional` observer?: {
    onAdded: CEvent<Node>;
    onRemoved: CEvent<Node>;
    }

    - ##### onAdded: CEvent<Node>

    - ##### onRemoved: CEvent<Node>

  - ##### stack: CTag[]

- ##### createConsumable: (<T>(val, destroyer?) => Consumable<T>)

  - - <T>(val, destroyer?): Consumable<T>

    - Create a new Consumable

      #### Type Parameters

      - #### T

      #### Parameters

      - ##### val: T

      - ##### `Optional` destroyer: (() => void)

        - - (): void

          - #### Returns void

      #### Returns Consumable<T>

      #### See

      https://github.com/nombrekeff/cardboard-js/wiki/Consumables

- ##### createGlobalObserver: (() => {
  onAdded: CEvent<Node>;
  onRemoved: CEvent<Node>;
  })

  - - (): {
      onAdded: CEvent<Node>;
      onRemoved: CEvent<Node>;
      }

    - #### Returns {
      onAdded: CEvent<Node>;
      onRemoved: CEvent<Node>;
      }

      - ##### onAdded: CEvent<Node>

      - ##### onRemoved: CEvent<Node>

- ##### deepEquals: ((a, b) => boolean)

  - - (a, b): boolean

    - #### Parameters

      - ##### a: any

      - ##### b: any

      #### Returns boolean

- ##### detach: (() => void)

  - - (): void

    - Detach the currently attached tag (attach). If there was another attached tag before it will become the currently attached tag. If there are no previous attached tags, it will clear the attached tag.

      #### Returns void

- ##### detachAll: (() => void)

  - - (): void

    - Detaches all attached tags. There will be no attached tag after calling this function.

      #### Returns void

- ##### equalTo: (<T>(cons, val) => IConsumable<boolean>)

  - - <T>(cons, val): IConsumable<boolean>

    - intersect a consumable and return a new Consumable indicating if the value is equal to val

      #### Type Parameters

      - #### T

      #### Parameters

      - ##### cons: IConsumable<T>

      - ##### val: IConsumableOr<T>

      #### Returns IConsumable<boolean>

- ##### genBlock: ((selector, style) => string)

  - - (selector, style): string

    - #### Parameters

      - ##### selector: string

      - ##### style: NestedStyleMap

      #### Returns string

- ##### genBlockContent: ((selector, style) => string[])

  - - (selector, style): string[]

    - #### Parameters

      - ##### selector: string

      - ##### style: NestedStyleMap

      #### Returns string[]

- ##### genCss: ((styleSheet) => string)

  - - (styleSheet): string

    - #### Parameters

      - ##### styleSheet: Record<string, NestedStyleMap> | Record<string, NestedStyleMap>[]

      #### Returns string

- ##### getValue: (<T>(val) => T)

  - - <T>(val): T

    - #### Type Parameters

      - #### T

      #### Parameters

      - ##### val: IConsumableOr<T>

      #### Returns T

- ##### grab: (<T, K>(cons, key, defaultVal?) => IConsumable<undefined | T[K]>)

  - - <T, K>(cons, key, defaultVal?): IConsumable<undefined | T[K]>

    - intersect a consumable and return a new Consumable that is equal to some property of the original Consumable

      #### Type Parameters

      - #### T

      - #### K extends string | number | symbol

      #### Parameters

      - ##### cons: IConsumable<T>

      - ##### key: K

      - ##### `Optional` defaultVal: T[K]

      #### Returns IConsumable<undefined | T[K]>

- ##### greaterThan: ((cons, val?) => IConsumable<boolean>)

  - - (cons, val?): IConsumable<boolean>

    - intersect a consumable and return a new Consumable indicating if the value is greater than val

      #### Parameters

      - ##### cons: IConsumable<number>

      - ##### val: number | IConsumable<number> = 0

      #### Returns IConsumable<boolean>

- ##### greaterThanOr: ((cons, val?) => IConsumable<boolean>)

  - - (cons, val?): IConsumable<boolean>

    - intersect a consumable and return a new Consumable indicating if the value is greater than or equal val

      #### Parameters

      - ##### cons: IConsumable<number>

      - ##### val: IConsumableOr<number> = 0

      #### Returns IConsumable<boolean>

- ##### init: ((options?) => CTag)

  - - (options?): CTag

    - It makes the body the attached tag (attach). You can pass in a selector for an element you want to be the default attached tag.

      #### Parameters

      - ##### options: {
        root: string;
        } = ...

        - ##### root: string

      #### Returns CTag

- ##### intersect: (<T, K>(other, intersector) => IConsumable<K>)

  - - <T, K>(other, intersector): IConsumable<K>

    - Creates a new Consumable that intersects another Consumable. The new Consumable updates and dispatches whenever the other Consumable changes.

      #### Type Parameters

      - #### T

      - #### K

      #### Parameters

      - ##### other: IConsumable<T>

      - ##### intersector: ((val) => K)

        - - (val): K

          - #### Parameters

            - ##### val: T

            #### Returns K

      #### Returns IConsumable<K>

      #### Example

          const value = createConsumable(2);
          const isGreater = intersect(cons, (value) => value > 5);
          // > isGreater == false;
          value.dispatch(6);
          // > isGreater == true;

- ##### intersectMulti: (<T, K>(consumables, intersector) => IConsumable<K>)

  - - <T, K>(consumables, intersector): IConsumable<K>

    - #### Type Parameters

      - #### T extends IConsumable<any>[]

      - #### K

      #### Parameters

      - ##### consumables: [...T[]]

      - ##### intersector: ((...v) => K)

        - - (...v): K

          - #### Parameters

            - ##### `Rest` ...v: [...ExtractValue<T>[]]

            #### Returns K

      #### Returns IConsumable<K>

- ##### isArray: ((obj) => boolean)

  - - (obj): boolean

    - #### Parameters

      - ##### obj: any

      #### Returns boolean

- ##### isConsumable: ((obj) => boolean)

  - - (obj): boolean

    - Check if a given object obj is a Consumable

      #### Parameters

      - ##### obj: any

      #### Returns boolean

- ##### isEmpty: (<T>(cons) => IConsumable<boolean>)

  - - <T>(cons): IConsumable<boolean>

    - intersect a consumable and return a new Consumable indicating if the value is NOT empty

      #### Type Parameters

      - #### T extends WithLength

      #### Parameters

      - ##### cons: IConsumable<T>

      #### Returns IConsumable<boolean>

- ##### isObject: ((obj) => boolean)

  - - (obj): boolean

    - #### Parameters

      - ##### obj: any

      #### Returns boolean

- ##### lessThan: ((cons, val?) => IConsumable<boolean>)

  - - (cons, val?): IConsumable<boolean>

    - intersect a consumable and return a new Consumable indicating if the value is less than val

      #### Parameters

      - ##### cons: IConsumable<number>

      - ##### val: IConsumableOr<number> = 0

      #### Returns IConsumable<boolean>

- ##### lessThanOr: ((cons, val?) => IConsumable<boolean>)

  - - (cons, val?): IConsumable<boolean>

    - intersect a consumable and return a new Consumable indicating if the value is less than or equal val

      #### Parameters

      - ##### cons: IConsumable<number>

      - ##### val: IConsumableOr<number> = 0

      #### Returns IConsumable<boolean>

- ##### listState: (<T>(initialData) => {
  add: ((item) => void);
  addAt: ((item, index) => void);
  length: IConsumable<number>;
  remove: any;
  removeWhere: any;
  get list(): IConsumable<IConsumable<T>[]>;
  get listValue(): IConsumable<T>[];
  })

  - - <T>(initialData): {
      add: ((item) => void);
      addAt: ((item, index) => void);
      length: IConsumable<number>;
      remove: any;
      removeWhere: any;
      get list(): IConsumable<IConsumable<T>[]>;
      get listValue(): IConsumable<T>[];
      }

    - `listState` creates a reactive list of values that can be used with tags to manage dynamic and reactive apps. It wraps each item with an IConsumable

      #### Type Parameters

      - #### T

      #### Parameters

      - ##### initialData: T[]

      #### Returns {
      add: ((item) => void);
      addAt: ((item, index) => void);
      length: IConsumable<number>;
      remove: any;
      removeWhere: any;
      get list(): IConsumable<IConsumable<T>[]>;
      get listValue(): IConsumable<T>[];
      }

      - ##### add: ((item) => void)

        - - (item): void

          - #### Parameters

            - ##### item: T

            #### Returns void

      - ##### addAt: ((item, index) => void)

        - - (item, index): void

          - #### Parameters

            - ##### item: T

            - ##### index: number

            #### Returns void

      - ##### length: IConsumable<number>

      - ##### remove: any

      - ##### removeWhere: any

      - ##### get list(): IConsumable<IConsumable<T>[]>

      - ##### get listValue(): IConsumable<T>[]

      #### See

      https://github.com/nombrekeff/cardboard-js/wiki/ListState

      #### Example

          const myList = listState([1, 2, 3]);

          myList.add(4);
          myList.addAt(0, 0);
          myList.remove(2);
          myList.removeWhere(item => item === 3);
          const listValues = myList.listValue;
          const listLength = myList.length;

          // Listen to changes in the list
          myList.list.changed(() => {
            // List has changed
          });

- ##### makeRouter: (<T>(opts) => Router<T>)

  - - <T>(opts): Router<T>

    - #### Type Parameters

      - #### T extends Record<string, Route> = Record<string, Route>

      #### Parameters

      - ##### opts: RouterOptions<T>

      #### Returns Router<T>

- ##### mappedEvent: (<T>() => CMappedEvent<T>)

  - - <T>(): CMappedEvent<T>

    - #### Type Parameters

      - #### T

      #### Returns CMappedEvent<T>

- ##### notEmpty: (<T>(cons) => IConsumable<boolean>)

  - - <T>(cons): IConsumable<boolean>

    - intersect a consumable and return a new Consumable indicating if the value is NOT empty

      #### Type Parameters

      - #### T extends WithLength

      #### Parameters

      - ##### cons: IConsumable<T>

      #### Returns IConsumable<boolean>

- ##### notEqualTo: (<T>(cons, val) => IConsumable<boolean>)

  - - <T>(cons, val): IConsumable<boolean>

    - intersect a consumable and return a new Consumable indicating if the value is NOT equal to val

      #### Type Parameters

      - #### T

      #### Parameters

      - ##### cons: IConsumable<T>

      - ##### val: IConsumableOr<T>

      #### Returns IConsumable<boolean>

- ##### removeFromList: (<T>(item, list?) => boolean)

  - - <T>(item, list?): boolean

    - Removes an item from an array if it exists. It returns whether it was removed or not

      #### Type Parameters

      - #### T

      #### Parameters

      - ##### item: T

      - ##### `Optional` list: T[]

      #### Returns boolean

- ##### singleEvent: (<T>() => CEvent<T>)

  - - <T>(): CEvent<T>

    - #### Type Parameters

      - #### T

      #### Returns CEvent<T>

- ##### state: (<T>(initialValue) => IConsumable<T>)

  - - <T>(initialValue): IConsumable<T>

    - `state` creates a reactive value that can the be used with tags to create dinamic and reactive apps.

      #### Type Parameters

      - #### T

      #### Parameters

      - ##### initialValue: T

      #### Returns IConsumable<T>

      #### See

      https://github.com/nombrekeff/cardboard-js/wiki/State

      #### Example

          const count = state(0);
          count.changed(() => { ... });
          count.dispatch(2);
          count.value++;

          div().hideIf(count);
          div().disableIf(count);
          div(template('Count is: $count', { count: count }));

- ##### stateAdd: (<T>(cons, item) => void)

  - - <T>(cons, item): void

    - #### Type Parameters

      - #### T

      #### Parameters

      - ##### cons: IConsumable<T[]>

      - ##### item: T

      #### Returns void

- ##### stateAddAt: (<T>(cons, item, index) => void)

  - - <T>(cons, item, index): void

    - #### Type Parameters

      - #### T

      #### Parameters

      - ##### cons: IConsumable<T[]>

      - ##### item: T

      - ##### index: number

      #### Returns void

- ##### stateRemove: (<T>(cons, item) => void)

  - - <T>(cons, item): void

    - #### Type Parameters

      - #### T

      #### Parameters

      - ##### cons: IConsumable<T[]>

      - ##### item: T

      #### Returns void

- ##### stateRemoveWhere: (<T>(cons, cb) => void)

  - - <T>(cons, cb): void

    - #### Type Parameters

      - #### T

      #### Parameters

      - ##### cons: IConsumable<T[]>

      - ##### cb: ((item, index) => boolean)

        - - (item, index): boolean

          - #### Parameters

            - ##### item: T

            - ##### index: number

            #### Returns boolean

      #### Returns void

- ##### swapItems: ((array, from, to) => any[])

  - - (array, from, to): any[]

    - #### Parameters

      - ##### array: any[]

      - ##### from: number

      - ##### to: number

      #### Returns any[]

- ##### tag: ((arg0, children?, attach?) => CTag)

  - - (arg0, children?, attach?): CTag

    - This function can do the following based on the first argument:

      - create a tag if you provide a tag name: (`div`, `abbr`, `custom-tag`, ...),
      - wrap around an existing element in the page if you pass in a selector: (`'(body)'`, `'(#id)'`, `'(.class)'`), any selector is allowed.
      - wrap around an element passed in

      Then it can receive a list of children to be added. And receives a third argument for attaching this tag to the currently attach tag (attach)

      #### Parameters

      - ##### arg0: string | HTMLElement

      - ##### children: TagChildren = []

      - ##### attach: boolean = false

      #### Returns CTag

      #### Example

          tag('div');
          tag('(body)');
          tag('(.someclass)');
          tag(document.querySelector('#something'));

- ##### text: (<T, K>(textTemplate, obj?) => Node)

  - - <T, K>(textTemplate, obj?): Node

    - Create a TextNode from text, and optionally reacts to a IConsumable, interpolating the defined variables in the text each time the state changes.

      If you provide a IConsumable as the second argument, the text will act as a template and can reference properties in the state: `$count`, `$someValue`.

      When the state properties changes, the text node will be automatically updated with the new text. Only the properties that are referenced in the template will be listened to.

      NOTE If you're not interpolating, and dont need to change the text, you can directly pass in a string ('string') instead of (`text('string')`).

      #### Type Parameters

      - #### T extends Record<string, Primitive>

      - #### K extends TextObj

      #### Parameters

      - ##### textTemplate: string

      - ##### `Optional` obj: K | IConsumable<T>

      #### Returns Node

      #### See

      https://github.com/nombrekeff/cardboard-js/wiki/Managing-Text

      #### Example

          const st = state({ count: 0 });

          p(text('Raw text!'));
          p(text(`Count: $count`, st));

- ##### val: (<T>(val, ...args) => T)

  - - <T>(val, ...args): T

    - #### Type Parameters

      - #### T

      #### Parameters

      - ##### val: T | ((...args) => T)

      - ##### `Rest` ...args: any[]

      #### Returns T

- ##### withLifecycle: ((tag, handler) => CTag)

  - - (tag, handler): CTag

    - Will call {handler.onStart} when the element is added to the DOM. And will call {handler.onRemove} when the element is removed from the DOM.

      #### Parameters

      - ##### tag: CTag

      - ##### handler: {
        beforeRemove?: ((tag) => boolean | Promise<boolean>);
        removed?: ((tag) => void);
        start?: ((tag) => boolean | Promise<boolean>);
        }

        - ##### `Optional` beforeRemove?: ((tag) => boolean | Promise<boolean>)

          - - (tag): boolean | Promise<boolean>

            - #### Parameters

              - ##### tag: CTag

              #### Returns boolean | Promise<boolean>

        - ##### `Optional` removed?: ((tag) => void)

          - - (tag): void

            - #### Parameters

              - ##### tag: CTag

              #### Returns void

        - ##### `Optional` start?: ((tag) => boolean | Promise<boolean>)

          - - (tag): boolean | Promise<boolean>

            - #### Parameters

              - ##### tag: CTag

              #### Returns boolean | Promise<boolean>

      #### Returns CTag

- ##### router: Router<any> | undefined

- ##### onLifecycle:function

  - onLifecycle(tag, onStart?, onRemove?, beforeRemove?): void

  - Will call {onStart} when the element is added to the DOM. And will call {onRemove} when the element is removed from the DOM.

    #### Parameters

    - ##### tag: CTag

    - ##### `Optional` onStart: ((tag) => boolean | Promise<boolean>)

      - - (tag): boolean | Promise<boolean>

        - #### Parameters

          - ##### tag: CTag

          #### Returns boolean | Promise<boolean>

    - ##### `Optional` onRemove: ((tag) => void)

      - - (tag): void

        - #### Parameters

          - ##### tag: CTag

          #### Returns void

    - ##### `Optional` beforeRemove: ((tag) => boolean | Promise<boolean>)

      - - (tag): boolean | Promise<boolean>

        - #### Parameters

          - ##### tag: CTag

          #### Returns boolean | Promise<boolean>

    #### Returns void

    - Defined in lifecycle.ts:35

- Defined in cardboard.ts:23

Generated using TypeDoc