Use this base class to create your own view components without an activity.

class ViewComponent

extends AppComponent implements UIRenderable

Represents an application component that encapsulates a view made up of UI components (or other renderable components, such as nested ViewComponent instances).

The encapsulated view (a single renderable component) is created the first time this component is rendered. After that, all UI events are propagated from the encapsulated view to the ViewComponent instance.

Note: This class is similar in functionality to ViewActivity, but ViewComponent views are created immediately, whereas view activities need to be activated first before their views are created.

Enabling preset types

Use the PresetFor type to declare a static preset method (which is used by the type definition of the with method), to add strong typing for arguments to preset constructors. Alternatively, you may define an actual preset method implementation and provide a type for the first parameter.


The following example shows how to create a view component that can be used from any other view.

// ./view.ts
export default UICell.with(
    { onClick: "doSomething()" },
    tl("You have ${nMessages} message#{/s}")

// ./MyViewComponent.ts
import { ViewComponent } from "typescene";
import view from "./view";
export class MyViewComponent extends ViewComponent.with(view) {
  // declare a preset function to make `with` accept
  // values for all unique non-method properties
  static preset: ViewComponent.PresetFor<MyViewComponent>;

  // bound by the view, preset by `with`:
  nMessages = 0;

  doSomething() { /* event handler */ }

// some other view preset:
  // ...
    nMessages: bind("userMessages")


(): ViewComponent



The root component that makes up the content for this view, as a child component; only created when the ViewComponent is rendered.


(): Promise<void>

Callback invoked when changing state to ‘active’, to be overridden.


(callback?: RenderCallback<Output<UIRenderable, any>>): void

Render the encapsulated view for this component.

This method is called automatically after the root view component is created and/or when an application render context is made available or emits a change event, and should not be called directly.


(deactivate?: boolean): Promise<void>

Remove the current view output, if any.

This method is called automatically after the root view component or render context is removed, and should not be called directly.


(): void

Request input focus on the view component, if any.



Inherited from AppComponent.renderContext.



Inherited from AppComponent.activationContext.

.isPresetComponent() protected

(): boolean

Inherited from Component.isPresetComponent.


[1]. (): Component
[2]. <TParent extends Component>(ParentClass: ComponentConstructor<TParent>): TParent

Inherited from Component.getParentComponent.


<TParent extends Component>(ParentClass?: ComponentConstructor<TParent>): TParent

Inherited from Component.getCompositeParent.


(name: string, inner?: ManagedEvent): void

Inherited from Component.propagateComponentEvent.



Inherited from ManagedObject.managedId.



Inherited from ManagedObject.managedState.

.getReferenceCount() protected

(): number

Inherited from ManagedObject.getReferenceCount.

.getManagedReferrers() protected

(): ManagedObject[]

Inherited from ManagedObject.getManagedReferrers.

.getManagedParent() protected

[1]. (): ManagedObject
[2]. <TParent extends ManagedObject>(ParentClass: ManagedObjectConstructor<TParent>): TParent

Inherited from ManagedObject.getManagedParent.


<TEvent extends ManagedEvent = ManagedEvent, TConstructorArgs extends any[] = any[]>(e: string | TEvent | (new (...args: TConstructorArgs) => TEvent), ...constructorArgs: TConstructorArgs): this

Inherited from ManagedObject.emit.

.propagateChildEvents() protected

[1]. (f?: (this: this, e: ManagedEvent, propertyName: string) => void | ManagedEvent | ManagedEvent[]): this
[2]. (...types: (ManagedEvent | (new (...args: any[]) => ManagedEvent))[]): this

Inherited from ManagedObject.propagateChildEvents.

.activateManagedAsync() protected

(): Promise<any>

Inherited from ManagedObject.activateManagedAsync.

.deactivateManagedAsync() protected

(): Promise<void>

Inherited from ManagedObject.deactivateManagedAsync.

.destroyManagedAsync() protected

(): Promise<void>

Inherited from ManagedObject.destroyManagedAsync.

.onManagedStateActiveAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateActiveAsync.

.onManagedStateDeactivatingAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateDeactivatingAsync.

.onManagedStateInactiveAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateInactiveAsync.

.onManagedStateDestroyingAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateDestroyingAsync.


type PresetFor<TComponent extends ViewComponent, K extends keyof TComponent = Exclude<{
        [P in keyof TComponent]: TComponent[P] extends Function ? never : P;
    }[keyof TComponent], keyof ViewComponent>> = (presets: Pick<TComponent, K>, ...C: UIRenderableConstructor[]) => Function;

Shortcut type for declaring a static preset method which accepts an object with presets with the same type as given properties of the view component itself (excluding methods).


<TPreset, TRest extends UIRenderableConstructor[]>(templateProvider: (presets: TPreset, ...C: TRest) => UIRenderableConstructor): typeof ViewComponent & { preset: (presets: TPreset, TRest) => Function; }

Returns a ViewComponent class that encapsulates the view returned by given function.

The function receives presets (object) and rest parameters (i.e. content) and should return a component constructor.

The resulting class contains a typed preset function such that a subsequent call to .with() expects the corresponding presets and rest parameter types.