Use RootModel and ChildModel over Model

src/App.ts

@@ -8,14 +8,14 @@
 import { EventEmitter } from 'events';
 import { basename } from 'path';
 
-import { type Model } from 'racer';
+import { type ChildModel } from 'racer';
 import * as util from 'racer/lib/util';
 
 import components = require('./components');
 import { type ComponentConstructor, type SingletonComponentConstructor } from './components';
 import { type Derby } from './Derby';
 import { Page, type PageBase } from './Page';
-import { routes } from './routes';
+import { PageParams, routes } from './routes';
 import * as derbyTemplates from './templates';
 import { type Views } from './templates/templates';
 
@@ -37,11 +37,11 @@ interface AppOptions {
   scriptHash?: string,
 }
 
-type OnRouteCallback = (arg0: Page, arg1: Page, model: Model, params: any, done?: () => void) => void;
+type OnRouteCallback<T = object> = (arg0: Page, arg1: Page, model: ChildModel<T>, params: PageParams, done?: () => void) => void;
 
 type Routes = [string, string, any][];
 
-export abstract class AppBase extends EventEmitter {
+export abstract class AppBase<T = object> extends EventEmitter {
   derby: Derby;
   name: string;
   filename: string;
@@ -52,7 +52,7 @@ export abstract class AppBase extends EventEmitter {
   proto: any;
   views: Views;
   tracksRoutes: Routes;
-  model: Model;
+  model: ChildModel<T>;
   page: PageBase;
   protected _pendingComponentMap: Record<string, ComponentConstructor>;
   protected _waitForAttach: boolean;
@@ -77,12 +77,12 @@ export abstract class AppBase extends EventEmitter {
     this._pendingComponentMap = {};
   }
 
-  protected abstract _init(options?: AppOptions);
+  abstract _init(options?: AppOptions);
   loadViews(_viewFilename, _viewName) { }
   loadStyles(_filename, _options) { }
 
   component(constructor: ComponentConstructor | SingletonComponentConstructor): this;
-  component(name: string, constructor: ComponentConstructor | SingletonComponentConstructor, isDependency: boolean): this;
+  component(name: string, constructor: ComponentConstructor | SingletonComponentConstructor, isDependency?: boolean): this;
   component(name: string | ComponentConstructor | SingletonComponentConstructor, constructor?: ComponentConstructor | SingletonComponentConstructor, isDependency?: boolean): this {
     if (typeof name === 'function') {
       constructor = name;
@@ -232,7 +232,7 @@ export class App extends AppBase {
   }
 
   // Overriden on server
-  protected _init(_options) {
+  _init(_options) {
     this._waitForAttach = true;
     this._cancelAttach = false;
     this.model = new this.derby.Model();

src/AppForServer.ts

@@ -59,7 +59,7 @@ function watchOnce(filenames, callback) {
   });
 }
 
-export class AppForServer extends AppBase {
+export class AppForServer<T = object> extends AppBase<T> {
   agents: Record<string, Agent>;
   compilers: Record<string, CompilerFunciton>;
   scriptBaseUrl: string;
@@ -81,7 +81,7 @@ export class AppForServer extends AppBase {
     this._init(options);
   }
 
-  protected _init(options) {
+  _init(options) {
     this._initBundle(options);
     this._initRefresh();
     this._initLoad();

src/Controller.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from 'events';
 
-import { type Model } from 'racer';
+import { type ChildModel } from 'racer';
 
 import { type AppBase } from './App';
 import { Dom }  from './Dom';
@@ -10,10 +10,10 @@ export class Controller<T = object> extends EventEmitter {
   dom: Dom;
   app: AppBase;
   page: PageBase;
-  model: Model<T>;
+  model: ChildModel<T>;
   markerNode: Node;
 
-  constructor(app: AppBase, page: PageBase, model: Model) {
+  constructor(app: AppBase, page: PageBase, model: ChildModel<T>) {
     super();
     this.dom = new Dom(this);
     this.app = app;

src/Page.ts

@@ -1,4 +1,4 @@
-import { type Model } from 'racer';
+import { type ChildModel } from 'racer';
 import util = require('racer/lib/util');
 
 import { type AppBase, type App } from './App';
@@ -19,17 +19,17 @@ const {
   templates,
 } = derbyTemplates;
 
-export abstract class PageBase extends Controller {
+export abstract class PageBase<T = object> extends Controller<T> {
   params: Readonly<PageParams>;
   context: Context;
-  create: (model: Model, dom: any) => void;
-  init?: (model: Model) => void;
+  create: (model: ChildModel<T>, dom: any) => void;
+  init?: (model: ChildModel<T>) => void;
   _components: Record<string, components.Component>
   _eventModel: any;
   _removeModelListeners: () => void = () => {};
   page: PageBase;
 
-  constructor(app: AppBase, model: Model) {
+  constructor(app: AppBase, model: ChildModel<T>) {
     super(app, null, model);
     this.params = null;
     this._eventModel = null;
@@ -109,8 +109,8 @@ export abstract class PageBase extends Controller {
   }
 }
 
-export class Page extends PageBase {
-  constructor(app: App, model: Model) {
+export class Page<T = object> extends PageBase<T> {
+  constructor(app: App, model: ChildModel<T>) {
     super(app, model);
     this._addListeners();
   }

src/PageForServer.ts

@@ -1,16 +1,16 @@
 import type { Request, Response } from 'express';
-import { type Model } from 'racer';
+import { type ChildModel } from 'racer';
 
 import { type AppForServer } from './AppForServer';
 import { PageBase } from './Page';
 import { type PageParams } from './routes';
 
-export class PageForServer extends PageBase {
+export class PageForServer<T = object> extends PageBase<T> {
   req: Request;
   res: Response;
   page: PageForServer;
 
-  constructor(app: AppForServer, model: Model, req: Request, res: Response) {
+  constructor(app: AppForServer, model: ChildModel<T>, req: Request, res: Response) {
     super(app, model);
     this.req = req;
     this.res = res;

src/components.ts

@@ -7,7 +7,7 @@
  *
  */
 
-import { type Model, type ModelData } from 'racer';
+import { type ChildModel, type ModelData } from 'racer';
 import util = require('racer/lib/util');
 
 import { Controller } from './Controller';
@@ -91,7 +91,7 @@ export abstract class Component<T = object> extends Controller<T> {
     this.isDestroyed = false;
   }
 
-  init(_model: Model<T>): void {}
+  init(_model: ChildModel<T>): void {}
 
   destroy() {
     this.emit('destroy');
@@ -321,14 +321,14 @@ export abstract class Component<T = object> extends Controller<T> {
       this.app.views.find(viewName, contextView.namespace) : contextView;
   }
 
-  getAttribute(key: string) {
+  getAttribute<T>(key: string) {
     const attributeContext = this.context.forAttribute(key);
     if (!attributeContext) return;
     let value = attributeContext.attributes[key];
     if (value instanceof expressions.Expression) {
       value = value.get(attributeContext);
     }
-    return expressions.renderValue(value, this.context);
+    return expressions.renderValue(value, this.context) as T;
   }
 
   setAttribute(key: string, value: Attribute) {
@@ -348,12 +348,12 @@ function _safeWrap<T extends object>(component: Component<T>, callback: () => vo
   };
 }
 
-export class ComponentAttribute{
+export class ComponentAttribute<T = object> {
   expression: Expression;
-  model: any;
-  key: any;
+  model: ChildModel<T>;
+  key: string;
 
-  constructor(expression: Expression, model: Model, key: string) {
+  constructor(expression: Expression, model: ChildModel<T>, key: string) {
     this.expression = expression;
     this.model = model;
     this.key = key;
@@ -380,7 +380,7 @@ export class ComponentAttributeBinding extends Binding {
   }
 }
 
-function setModelAttributes(context: Context, model: Model) {
+function setModelAttributes<T = object>(context: Context, model: ChildModel<T>) {
   const attributes = context.parent.attributes;
   if (!attributes) return;
   // Set attribute values on component model
@@ -390,7 +390,7 @@ function setModelAttributes(context: Context, model: Model) {
   }
 }
 
-function setModelAttribute(context: Context, model: Model, key: string, value: unknown) {
+function setModelAttribute<T = object>(context: Context, model: ChildModel<T>, key: string, value: unknown) {
   // If an attribute is an Expression, set its current value in the model
   // and keep it up to date. When it is a resolvable path, use a Racer ref,
   // which makes it a two-way binding. Otherwise, set to the current value

src/routes.ts

@@ -1,4 +1,4 @@
-import { type Model } from 'racer';
+import { type RootModel } from 'racer';
 import tracks = require('tracks');
 
 import { type AppBase } from './App';
@@ -39,13 +39,13 @@ export interface RouteMethod {
 }
 
 export interface RouteHandler {
-  (page: PageBase, model: Model, params: PageParams, next: (err?: Error) => void): void;
+  (page: PageBase, model: RootModel, params: PageParams, next: (err?: Error) => void): void;
 }
 
 export interface TransitionalRouteHandler {
   (
     page: PageBase,
-    model: Model,
+    model: RootModel,
     params: PageParams,
     next: (err?: Error) => void,
     done: () => void
@@ -65,8 +65,9 @@ declare module './App' {
     put: RouteMethod;
   }
 }
+
 declare module './Page' {
   interface PageBase {
     redirect(url: string, status?: number): void;
   }
-}
+}