Model Composition

[fantgeass]

What approach should I take with shareable functionality?
In mst I used compose, but I didn't find anything about composition in keystone's docs.

p.s. thanks for the library, mst with TS is a really big pain to use :)

[xaviergonz]

Either inheritance (https://mobx-keystone.js.org/classModels#inheritance) or reusing props/functions (more functional).

My personal favorite is usually the second though.

const sharedProps = {
  x: prop<number>(),
  y: prop<number>()
} as const

function sharedLength(coords: number[]) {
  let len = 0;
  for (const c of coords) {
    len += c * c;
  }
  return Math.sqrt(len);
}

@model(...)
class Point2d extends Model({
  ...sharedProps
}) {
  get length() {
    return sharedLength(this.x, this.y)
  }
}

@model(...)
class Point3d extends Model({
  ...sharedProps,
  z: prop<number>()
}) {
  get length() {
    return sharedLength(this.x, this.y, this.z)
  }
}

[goranmandiccrs]

Hi, @xaviergonz , I hope you don't mind me following up on this issue:
I'm trying to follow your suggestion to @fantgeass problem and have come up with a custom compose function, which would receive destructured props, actions, and views, and return a new class declared with the props, while the views and actions would be attached in the constructor via Object.defineProperty.

The only problem I'm facing is how to bind the views as getters- I'm writing the shared views generically (using this) hoping for them to be used by any future class if needed.
For example:
const views = { doublePropC: () => { return this.propC + " " + this.propC; } };

I'm also having a hard time using the computed decorator for in the example above- I couldn't quite figure out what TS wants me to reconfigure in tsconfig.json.

Here's a sandbox example of models A, B and C, and my attempt at implementing this.
https://codesandbox.io/s/w0g8j?file=/src/modelA.ts