tannerntannern/ts-mixer

Statics are not inherited

Closed this issue ยท 2 comments

Hello! I just installed your module to our project and unfortunely we met an issue during implementation.

We have a lot of nested classes what have statics attributes\methods. But these methods are not accessible when the classes are loaded through your Mixin.

I have created a simple example for you.

import {Mixin} from "ts-mixer";
class TEST1 {
  static a() {
    console.log("A")
  }
}

class TEST2 extends Mixin(TEST1) {}
window.TEST2 = TEST2;

If I type TEST2.a to console. The function is undefined.

Maybe it could be related to @babel/plugin-proposal-class-properties with @babel/plugin-transform-typescript. We are not using the babel's syntax plugin but only transform.

Let me know if you need any help. But to me, seems this should be part of ts-mixer and it should work.

Thank you very much.

package.json

@babel/plugin-transform-typescript: 7.5.5,
@babel/plugin-proposal-class-properties: 7.5.5,
ts-mixer: 3.1.2,
typescript: 3.5.3,

babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "70",
        safari: "11.1",
      },
      useBuiltIns: "usage",
      corejs: {
        version: 3,
        proposals: true,
      },
    },
  ],
  // ["@babel/preset-typescript"], disabled because of bug with auto-assign in constructor. Instead of this is used ["@babel/plugin-transform-typescript"]
]

const plugins = [
  ["@babel/plugin-transform-typescript"],
  ["@babel/plugin-syntax-dynamic-import"],
  ["@babel/plugin-proposal-decorators", {decoratorsBeforeExport: false}],
  ["@babel/plugin-proposal-class-properties"],
  ["@babel/plugin-proposal-private-methods"],
  ["@babel/plugin-proposal-optional-chaining"],
  ["@babel/plugin-proposal-nullish-coalescing-operator"],
  ["@babel/plugin-proposal-throw-expressions"],
  [
    "@babel/plugin-transform-runtime",
    {
      corejs: {
        version: 3,
        proposals: true,
      },
      helpers: true,
      regenerator: true,
      useESModules: false,
    },
  ],
]

module.exports = {presets, plugins}

Hi @sionzeecz, thanks for reporting this! I added a test case using the example that you provided and there does seem to be an issue specifically when targeting to ES6.

I didn't include any of the babel configuration stuff, so fingers crossed that's not related. I'll get back to you when I pin down the source of the issue.

I just released a patch for this issue. I believe it was caused by the fact that static methods are not enumerable, while non-function static properties are (for some reason ๐Ÿ˜’).

Anyway, thanks again for reporting the bug! ๐Ÿ˜„