Mixins, Classes, TS

[ShaMan123]

I have been thinking how to migrate complex modules like Text/Canvas/Object and their mixins.
The difficulty is that the base class and the mixins are tangled together, cross referencing each others methods.
Some mixins are well defined and can be made as subclasses like @asturur did with ObjectGeometry (super class) and ObjectInteractivity (subclass).
Other mixins are tangled...
I think of using abstract classes to bridge the tangle by defining an abstract super class that all derived classes will extend and implement partially. Then we chain them together (preferably by extending) and produce the final mixed class.

Using abstract classes is correct IMO since this mixins are abstract and so are the objects they mix since none are standalone.

abstract class Base {
    abstract foo(): number
    abstract bar(): number
}

abstract class A extends Base {
    foo() {
        return 1 + this.bar()
    }
}

abstract class B extends A {
    bar(){
        return 5
    }
}

class C extends B {

}

console.log(new C().bar(), new C().foo())

Output

"use strict";
class Base {
}
class A extends Base {
    foo() {
        return 1 + this.bar();
    }
}
class B extends A {
    bar() {
        return 5;
    }
}
class C extends B {
}
console.log(new C().bar(), new C().foo());

Compiler Options

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "ES2017",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node"
  }
}

Playground Link: Provided

---

Here you can see A and B are astrange to each other, C extends A and is mixed with B.
TS doesn't approve, JS does.

class A {
    foo() {
        return 1
    }
}

abstract class B {
    abstract foo():number
    bar(){
        return 5 + this.foo()
    }
}

function applyMixins<T, U>(derivedCtor: T, constructors: U[]) {
  constructors.forEach((baseCtor) => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
      Object.defineProperty(
        derivedCtor.prototype,
        name,
        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
          Object.create(null)
      );
    });
  });
  return derivedCtor as U & T
}

const Mixed = applyMixins(class C extends A{},[B]);

console.log(new Mixed().bar(), new Mixed().foo())

Output

"use strict";
class A {
    foo() {
        return 1;
    }
}
class B {
    bar() {
        return 5 + this.foo();
    }
}
function applyMixins(derivedCtor, constructors) {
    constructors.forEach((baseCtor) => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
            Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
                Object.create(null));
        });
    });
    return derivedCtor;
}
const Mixed = applyMixins(class C extends A {
}, [B]);
console.log(new Mixed().bar(), new Mixed().foo());

Compiler Options

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "declaration": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target": "ES2017",
    "jsx": "react",
    "module": "ESNext",
    "moduleResolution": "node"
  }
}

Playground Link: Provided

[ShaMan123]

I will try migrating Text with abstract class

[ShaMan123]

#8420

[ShaMan123]

@asturur @melchiar

[thuytv-gl]

Hi @ShaMan123,
I cloned and build fabric yesterday (after this migration), and now keys events are not working.
Is it happening on your side.

---

What did I do

1. Fork master
2. Clone the fork
3. Install dependencies with npm i --include=dev
4. Link and build with npm link && npm run build -- -f -w
5. Create a sandbox with vite/svelte
6. Install the link with npm link --save fabric
7. Run the sandbox with few textboxes
8. Try keys events: ctrl+c, ctrl+a, arrow keys --> nothing works

[ShaMan123]

You should have opened an issue
Fixed #8457

[thuytv-gl]

thank you and noted!

[asturur]

The issue with abstract classes is that in JS they are just classes.
Between extending classes or extending abstract classes there is no difference, we are still creating nested boxes.
The only bad thing of creating nested boxes is that then is impossible to remember who owns a method. You can forget to do Object.prototype.functionX because is somewhere between N layers.

It would be interesting if mixin can create flat classes like the old fabricJS in which mixins were just a developer driven concern of splitting files and nothing more.

I think the flat classes are also, let's say, slower because are crate dynamically or at runtime.

[ShaMan123]

Wait... if you subclass you can call subclass.prototype.methodOfSuperClass, am I right?