Fix to the error: Type LiveObject<Layer> does not satisfy the constraint Lson

[max-programming]

What is the improvement or update you wish to see?

In the example apps I noticed the use of LiveObject<Layer> type in the Storage type. Which has a type error in (probably) the recent versions

Is there any context that might help us understand?

The type error can be fixed by changing the type from LiveObject<Layer> to LiveObject<Layer & LsonObject>

I couldn't find a solution online except for #166

Does the docs page already exist? Please link to it.

Not exactly docs but an example where I noticed: https://liveblocks.io/examples/collaborative-whiteboard-advanced/nextjs-whiteboard-advanced

[nvie]

Hi @max-programming. Thanks for reaching out. We wrote up a troubleshooting guide about this a while ago, which explains why this error happens, what it means, and what you can do about it. Hope this helps!

I cannot get this error to show up when I try out our examples myself, so I'm not sure why this error is showing up for you. If you expand the error message further, TypeScript should show you the drill-down into the underlying reason why it thinks Layer isn't a valid JSON value. Maybe that will give some more insight?

If you have further questions, please let us know!

[max-programming]

@nvie I think I now know why this happens to me. There is a difference in our types

Types in the example

export type RectangleLayer = {
  type: LayerType.Rectangle;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
};

export type EllipseLayer = {
  type: LayerType.Ellipse;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
};

export type PathLayer = {
  type: LayerType.Path;
  x: number;
  y: number;
  // Could be computed based on points
  height: number;
  // Could be computed based on points
  width: number;
  fill: Color;
  points: number[][];
};

export type Layer = RectangleLayer | EllipseLayer | PathLayer;

My types:

interface BaseLayer<L extends LayerType> {
  type: L;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
}

export type RectangleLayer = BaseLayer<LayerType.Rectangle>

export type EllipseLayer = BaseLayer<LayerType.Ellipse>

export type PathLayer = BaseLayer<LayerType.Path> & {
  points: number[][];
};

export type Layer = RectangleLayer | EllipseLayer | PathLayer;

To be honest, it should not cause an issue because all I did was refactor the type into a reusable one BaseLayer<>
But this is the exact reason I get the error

Also no typescript does not give a deep reason to why Layer isn't JSON