Component<ParamSpec> #

The heart of mvui. Every mvui component is defined by inheriting from this class.

Example #

export class CounterComponent extends Component {
  private count = new rx.State(0);

  render = () => [
    h.p([
      h.button({ events: {
        click: _ => this.count.next(this.count.value + 1)
      }}, 'Increment'),
      h.span(this.count.map(v => `count: ${v}`))
    ])
  ];
}

Type parameters #

ParamSpec extends ParamSpec = {}

Hierarchy #

HTMLElement.Component

Constructors #

constructor() #

Signature #

new Component<ParamSpec>(): Component<ParamSpec>;

Type parameters #

ParamSpec extends ParamSpec = {}

Returns #

Component <ParamSpec>

Overrides: HTMLElement.constructor

Defined in: packages/core/src/component.ts:218

Properties #

[GENERIC_TYPE_HIDE]? #

ParamSpec

This is a hack needed to infer the type of custom events of subclasses of components.

Minimal example of what this is about:

export class A<T> { t?: T; }
class C extends A<{'lala': 4}> {}

type ExtractGeneric<T> = T extends A<infer X> ? X : never;

function f<T1 extends A<T2>, T2 = ExtractGeneric<T1>>(a: T1): T2 {
  return undefined as T2;
}

const result = f(new C());
const result2 = f(new A<number>());

Try removing the t? in class A and see how the type system complains. To be hones, I have no idea why this is happening but it is.

Defined in: packages/core/src/component.ts:368

[PROVIDED_CONTEXTS] #

Map< Context <any>, any>

Defined in: packages/core/src/component.ts:553

[STYLE_OVERRIDES] #

MvuiCSSSheet = []

Defined in: packages/core/src/component.ts:149

props #

object = {}

Index signature #

[name: string]: Prop <any>

Type declaration #

Defined in: packages/core/src/component.ts:155

styles #

Protected State < MvuiCSSSheet >

Settings the static styles property is the primary way of styling a component. This instance level styles property should only be used for actual instance scoped styles for performance reasons.

Example #

render = () => [
  h.button({
    events: { click: _ => {
      this.styles.next(style.sheet({
        'button': {
          background: 'brown !important',
        }
      }));
    }}
  }, 'Styled Button'),
]

Defined in: packages/core/src/component.ts:147

styles? #

MvuiCSSSheet

Settings this static property is the primary way of styling a component. The instance level styles property should only be used for actual instance scoped styles for performance reasons

Example #

A simple sheet

static styles = style.sheet({
  'button': {
    'background': 'red'
  }
})

Example #

Sharing styles

const SOME_SHARED_STYLES = style.sheet({
  'button': {
    'background': 'yellow', // will be overwritten by the component style sheet
    'padding': '10px',
  }
});
class MyComponent extends Component {
  static styles = [
    ...SOME_SHARED_STYLES,
    ...style.sheet({
      'button': {
        background: 'red',
      },
      'button:active': {
        background: 'green',
      },
    }),
  ]
  // ...
}

Example #

Using @rules (for example media queries)

static styles = [
  ...style.sheet({
    'button': {
      background: 'red',
    },
    'button:active': {
      background: 'green',
    },
  }),
  style.at.media('screen and (min-width: 900px)', style.sheet({
    'button': {
      borderRadius: '10px',
    }
  })),
]

Defined in: packages/core/src/component.ts:125

tagNameLibrary? #

string

Defined in: packages/core/src/component.ts:59

tagNameSuffix? #

string

Defined in: packages/core/src/component.ts:58

useShadow #

Static Protected boolean = true

Defined in: packages/core/src/component.ts:57

Accessors #

tagName #

Signature #

Static tagName(): string;

Returns #

string

Defined in: packages/core/src/component.ts:250

Methods #

dispatch() #

Dispatch an event specified in the generic CustomEventsT parameter. All events will be dispatched as an instance of CustomEvent with detail set to value.

All events will by default stop not bubble any further then the parent of this component.

Signature #

Protected dispatch<T, V>(name: T, value: V, options: EventInit = ...): void;

Type parameters #

T extends string | number | symbol
V extends unknown

Parameters #

Name	Type
`name`	`T`
`value`	`V`
`options`	`EventInit`

Returns #

void

Defined in: packages/core/src/component.ts:506

getContext() #

Get a given context. See Context for details and an example.

Signature #

Protected getContext<T>(ctx: Context<T>, force: false): null | T;

Type parameters #

Parameters #

Name	Type
`ctx`	`Context` <`T`>
`force`	`false`

Returns #

null | T

Defined in: packages/core/src/component.ts:574

Get a given context. See Context for details and an example.

Signature #

Protected getContext<T>(ctx: Context<T>, force?: true): T;

Type parameters #

Parameters #

Name	Type
`ctx`	`Context` <`T`>
`force?`	`true`

Returns #

T

Defined in: packages/core/src/component.ts:575

onAdded() #

Run a given function everytime the component is added to the DOM. Runs after rendering is done.

Signature #

onAdded(callback: Function): void;

Parameters #

Name	Type
`callback`	() => `any`

Returns #

void

Defined in: packages/core/src/component.ts:275

onRemoved() #

Run a given function when the component is removed from the DOM.

Signature #

onRemoved(callback: Function): void;

Parameters #

Name	Type
`callback`	() => `any`

Returns #

void

Defined in: packages/core/src/component.ts:288

onRendered() #

Run a given function when the component is done rendering. Renders only happen once when the component is added to the DOM for the first time.

Signature #

onRendered(callback: Function): void;

Parameters #

Name	Type
`callback`	() => `any`

Returns #

void

Defined in: packages/core/src/component.ts:283

provideContext() #

Provide a given context in this component. See Context for details and an example.

Signature #

Protected provideContext<T>(ctx: Context<T>, value?: T): T;

Type parameters #

Parameters #

Name	Type
`ctx`	`Context` <`T`>
`value?`	`T`

Returns #

T

Defined in: packages/core/src/component.ts:559

query() #

Signature #

query<T>(query: string, force: false): Promise<null | T>;

Type parameters #

T extends HTMLElement

Parameters #

Name	Type
`query`	`string`
`force`	`false`

Returns #

Promise<null | T>

Defined in: packages/core/src/component.ts:1069

Signature #

query<T>(query: string, force?: true): Promise<T>;

Type parameters #

T extends HTMLElement

Parameters #

Name	Type
`query`	`string`
`force?`	`true`

Returns #

Promise<T>

Defined in: packages/core/src/component.ts:1070

queryAll() #

Signature #

queryAll<T>(query: string, force: false): Promise<null | NodeListOf<T>>;

Type parameters #

T extends HTMLElement

Parameters #

Name	Type
`query`	`string`
`force`	`false`

Returns #

Promise<null | NodeListOf<T>>

Defined in: packages/core/src/component.ts:1088

Signature #

queryAll<T>(query: string, force?: true): Promise<NodeListOf<T>>;

Type parameters #

T extends HTMLElement

Parameters #

Name	Type
`query`	`string`
`force?`	`true`

Returns #

Promise<NodeListOf<T>>

Defined in: packages/core/src/component.ts:1091

reDispatch() #

Dispatch an event specified in the generic CustomEventsT parameter. In contrast to dispatch , this method takes an existing event and redispatches it in with only the type set to name. Use this if you want to redispatch existing events like a MouseEvent.

All events will by default stop not bubble any further then the parent of this component.

Signature #

Protected reDispatch<T, V>(name: T, value: V, noBubble: boolean = true): void;

Type parameters #

T extends string | number | symbol
V extends Event

Parameters #

Name	Type	Default value
`name`	`T`	`undefined`
`value`	`V`	`undefined`
`noBubble`	`boolean`	`true`

Returns #

void

Defined in: packages/core/src/component.ts:526

ref() #

Get a reference to an element in the template as a promise that will be resolved on render.

Example #

class TemplateReferences extends Component {

  render() {
    const myRef = this.ref<HTMLElement>();

    this.onRendered(async () => {
      myRef.current.innerText = 'itsame 2';
    });

    return [ h.div({ ref: myRef }, 'itsame') ]
  }
}

Signature #

ref<T>(): object;

Type parameters #

T extends HTMLElement = any

Returns #

object

Member	Type
`current`	`T`

Defined in: packages/core/src/component.ts:1041

removeLifecycleHook() #

Remove an existing lifecycle hook. See onAdded , onRendered and onRemoved .

Signature #

removeLifecycleHook(kind: "removed" | "added" | "render", callback: Function): void;

Parameters #

Name	Type
`kind`	`"removed"` \| `"added"` \| `"render"`
`callback`	() => `any`

Returns #

void

Defined in: packages/core/src/component.ts:296

render() #

Signature #

Protected Abstract render(): ComponentTemplate;

Returns #

ComponentTemplate

Defined in: packages/core/src/component.ts:55

Subscribe to a given stream/subscribable and automatically unsubscribe on unmount. Also flash the outline of the component when MVUI_GLOBALS .APP_DEBUG is set and a new value is emitted. Returns the original subscribable unmodified for convenience.

Signature #

Protected subscribe<T>(subscribable: T, observer?: Function): T;

Type parameters #

T extends Subscribable <any, T>

Parameters #

Name	Type
`subscribable`	`T`
`observer?`	(`value`: `T` extends `Subscribable` <`I`> ? `I` : `never`) => `void`

Returns #

T

Defined in: packages/core/src/component.ts:451

export() #

Returns a new constructor that will create a more “normal” webcomponent from an mvui component. Specifically, this means mapping the props field to individual class fields. This enables better compatibility with other frameworks.

Example #

class _MyComponent extends Component {
  props = { value: rx.prop<number>() };
}
const MyComponent _MyComponent.export();
export default MyComponent;

// --- usage ----
const myComp = new MyComponent();
myComp.value = 10; // will trigger an update

Signature #

Static export<T>(this: Constructor<T>): Constructor<T & { [key in string | number | symbol]: T["props"][key] extends State<I> ? I : never }>;

Type parameters #

T extends Component <{}, T>

Parameters #

Name	Type
`this`	`Constructor` <`T`>

Returns #

Constructor <T & { [key in string | number | symbol]: T["props"][key] extends State<I> ? I : never }>

Defined in: packages/core/src/component.ts:411

getTagName() #

Signature #

Static getTagName(constructor?: Function): string;

Parameters #

Name	Type
`constructor?`	`Function`

Returns #

string

Defined in: packages/core/src/component.ts:230

register() #

Signature #

Static register(constructor?: Function): void;

Parameters #

Name	Type
`constructor?`	`Function`

Returns #

void

Defined in: packages/core/src/component.ts:252

t() #

Get a new TemplateElement for use in a render method.

Signature #

Static t<T, E>(this: Constructor<T>, childrenOrParams?: TemplateElementChildren<any> | TemplateElementParams<T, T extends Component<I> ? I : never, T["props"]>, children?: TemplateElementChildren<any>): ComponentTemplateElement<T>;

Type parameters #

T extends Component <E, T>
E extends ParamSpec = T extends Component <I> ? I : never

Parameters #

Name	Type
`this`	`Constructor` <`T`>
`childrenOrParams?`	`TemplateElementChildren` <`any`> \| `TemplateElementParams` <`T`, `T` extends `Component` <`I`> ? `I` : `never`, `T`[`"props"`]>
`children?`	`TemplateElementChildren` <`any`>

Returns #

ComponentTemplateElement <T>

Defined in: packages/core/src/component.ts:371