Documentation / @zerotal/flow / index / ComponentWith

Function: ComponentWith()

Call Signature

ComponentWith<A>(a): A

Compose one or more feature Mixins onto Component, folding them left-to-right so a page can be built from focused, reusable behaviours instead of one bloated class.

Type Parameters

A

A extends Constructor<object>

Parameters

a

(base) => A

Returns

A

a class extending Component with every mixin's members mixed in.

Remarks

Each mixin receives the accumulated base and returns an extended class, so Component's full surface (flash(), redirect(), validate(), the client magics, …) and every mixin's @expose/@locked members flow through to the final page — fully type-checked. Mixin props register on the mixin prototype, which sits in the page's prototype chain, so snapshot, reactivity, and client writes all work. Overloads cover 1–8 mixins; nest another ComponentWith(...) call for more. Pages composed this way render via the runtime path rather than the AOT compiler.

Example

// app/flow/mixins/pagination.ts
import { Component, expose, type Constructor } from "@zerotal/flow";

export function Pagination<T extends Constructor<Component>>(Base: T) {
  abstract class WithPagination extends Base {
    @expose page = 1;
    @expose next() { this.page++; }
  }
  return WithPagination;
}

// app/flow/UsersPage.tsx
class UsersPage extends ComponentWith(Pagination) {
  override async render() {
    return <div data-flow-root>Page {this.page}</div>;
  }
}

Call Signature

ComponentWith<A, B>(a, b): B

Defined in: flow/src/mixins.ts:108

Compose one or more feature Mixins onto Component, folding them left-to-right so a page can be built from focused, reusable behaviours instead of one bloated class.

Type Parameters

A

A extends Constructor<object>

B

B extends Constructor<object>

Parameters

a

(base) => A

b

(base) => B

Returns

B

a class extending Component with every mixin's members mixed in.

Remarks

Example

// app/flow/mixins/pagination.ts
import { Component, expose, type Constructor } from "@zerotal/flow";

export function Pagination<T extends Constructor<Component>>(Base: T) {
  abstract class WithPagination extends Base {
    @expose page = 1;
    @expose next() { this.page++; }
  }
  return WithPagination;
}

// app/flow/UsersPage.tsx
class UsersPage extends ComponentWith(Pagination) {
  override async render() {
    return <div data-flow-root>Page {this.page}</div>;
  }
}

Call Signature

ComponentWith<A, B, C>(a, b, c): C

Defined in: flow/src/mixins.ts:112

Compose one or more feature Mixins onto Component, folding them left-to-right so a page can be built from focused, reusable behaviours instead of one bloated class.

Type Parameters

A

A extends Constructor<object>

B

B extends Constructor<object>

C

C extends Constructor<object>

Parameters

a

(base) => A

b

(base) => B

c

(base) => C

Returns

C

a class extending Component with every mixin's members mixed in.

Remarks

Example

// app/flow/mixins/pagination.ts
import { Component, expose, type Constructor } from "@zerotal/flow";

export function Pagination<T extends Constructor<Component>>(Base: T) {
  abstract class WithPagination extends Base {
    @expose page = 1;
    @expose next() { this.page++; }
  }
  return WithPagination;
}

// app/flow/UsersPage.tsx
class UsersPage extends ComponentWith(Pagination) {
  override async render() {
    return <div data-flow-root>Page {this.page}</div>;
  }
}

Call Signature

ComponentWith<A, B, C, D>(a, b, c, d): D

Defined in: flow/src/mixins.ts:117

Compose one or more feature Mixins onto Component, folding them left-to-right so a page can be built from focused, reusable behaviours instead of one bloated class.

Type Parameters

A

A extends Constructor<object>

B

B extends Constructor<object>

C

C extends Constructor<object>

D

D extends Constructor<object>

Parameters

a

(base) => A

b

(base) => B

c

(base) => C

d

(base) => D

Returns

D

a class extending Component with every mixin's members mixed in.

Remarks

Example

// app/flow/mixins/pagination.ts
import { Component, expose, type Constructor } from "@zerotal/flow";

export function Pagination<T extends Constructor<Component>>(Base: T) {
  abstract class WithPagination extends Base {
    @expose page = 1;
    @expose next() { this.page++; }
  }
  return WithPagination;
}

// app/flow/UsersPage.tsx
class UsersPage extends ComponentWith(Pagination) {
  override async render() {
    return <div data-flow-root>Page {this.page}</div>;
  }
}

Call Signature

ComponentWith<A, B, C, D, E>(a, b, c, d, e): E

Defined in: flow/src/mixins.ts:123

Compose one or more feature Mixins onto Component, folding them left-to-right so a page can be built from focused, reusable behaviours instead of one bloated class.

Type Parameters

A

A extends Constructor<object>

B

B extends Constructor<object>

C

C extends Constructor<object>

D

D extends Constructor<object>

E

E extends Constructor<object>

Parameters

a

(base) => A

b

(base) => B

c

(base) => C

d

(base) => D

e

(base) => E

Returns

E

a class extending Component with every mixin's members mixed in.

Remarks

Example

// app/flow/mixins/pagination.ts
import { Component, expose, type Constructor } from "@zerotal/flow";

export function Pagination<T extends Constructor<Component>>(Base: T) {
  abstract class WithPagination extends Base {
    @expose page = 1;
    @expose next() { this.page++; }
  }
  return WithPagination;
}

// app/flow/UsersPage.tsx
class UsersPage extends ComponentWith(Pagination) {
  override async render() {
    return <div data-flow-root>Page {this.page}</div>;
  }
}

Call Signature

ComponentWith<A, B, C, D, E, F>(a, b, c, d, e, f): F

Defined in: flow/src/mixins.ts:136

Compose one or more feature Mixins onto Component, folding them left-to-right so a page can be built from focused, reusable behaviours instead of one bloated class.

Type Parameters

A

A extends Constructor<object>

B

B extends Constructor<object>

C

C extends Constructor<object>

D

D extends Constructor<object>

E

E extends Constructor<object>

F

F extends Constructor<object>

Parameters

a

(base) => A

b

(base) => B

c

(base) => C

d

(base) => D

e

(base) => E

f

(base) => F

Returns

F

a class extending Component with every mixin's members mixed in.

Remarks

Example

// app/flow/mixins/pagination.ts
import { Component, expose, type Constructor } from "@zerotal/flow";

export function Pagination<T extends Constructor<Component>>(Base: T) {
  abstract class WithPagination extends Base {
    @expose page = 1;
    @expose next() { this.page++; }
  }
  return WithPagination;
}

// app/flow/UsersPage.tsx
class UsersPage extends ComponentWith(Pagination) {
  override async render() {
    return <div data-flow-root>Page {this.page}</div>;
  }
}

Call Signature

ComponentWith<A, B, C, D, E, F, G>(a, b, c, d, e, f, g): G

Defined in: flow/src/mixins.ts:151

Compose one or more feature Mixins onto Component, folding them left-to-right so a page can be built from focused, reusable behaviours instead of one bloated class.

Type Parameters

A

A extends Constructor<object>

B

B extends Constructor<object>

C

C extends Constructor<object>

D

D extends Constructor<object>

E

E extends Constructor<object>

F

F extends Constructor<object>

G

G extends Constructor<object>

Parameters

a

(base) => A

b

(base) => B

c

(base) => C

d

(base) => D

e

(base) => E

f

(base) => F

g

(base) => G

Returns

G

a class extending Component with every mixin's members mixed in.

Remarks

Example

// app/flow/mixins/pagination.ts
import { Component, expose, type Constructor } from "@zerotal/flow";

export function Pagination<T extends Constructor<Component>>(Base: T) {
  abstract class WithPagination extends Base {
    @expose page = 1;
    @expose next() { this.page++; }
  }
  return WithPagination;
}

// app/flow/UsersPage.tsx
class UsersPage extends ComponentWith(Pagination) {
  override async render() {
    return <div data-flow-root>Page {this.page}</div>;
  }
}

Call Signature

ComponentWith<A, B, C, D, E, F, G, H>(a, b, c, d, e, f, g, h): H

Defined in: flow/src/mixins.ts:168

Compose one or more feature Mixins onto Component, folding them left-to-right so a page can be built from focused, reusable behaviours instead of one bloated class.

Type Parameters

A

A extends Constructor<object>

B

B extends Constructor<object>

C

C extends Constructor<object>

D

D extends Constructor<object>

E

E extends Constructor<object>

F

F extends Constructor<object>

G

G extends Constructor<object>

H

H extends Constructor<object>

Parameters

a

(base) => A

b

(base) => B

c

(base) => C

d

(base) => D

e

(base) => E

f

(base) => F

g

(base) => G

h

(base) => H

Returns

H

a class extending Component with every mixin's members mixed in.

Remarks

Example

// app/flow/mixins/pagination.ts
import { Component, expose, type Constructor } from "@zerotal/flow";

export function Pagination<T extends Constructor<Component>>(Base: T) {
  abstract class WithPagination extends Base {
    @expose page = 1;
    @expose next() { this.page++; }
  }
  return WithPagination;
}

// app/flow/UsersPage.tsx
class UsersPage extends ComponentWith(Pagination) {
  override async render() {
    return <div data-flow-root>Page {this.page}</div>;
  }
}