Web compat analysis

[syg]

Chrome use counter data show there are indeed in-the-wild usage of extending non-extensible objects with private fields.

The percentage of page load is very low at time of this writing (0.000011%), and are found to be concentrated in two pieces of software.

disy Cadenza

Most breakages come from Cadenza, which seems to be a closed-source German GIS software. The pattern used is freezing a class with nothing but static fields using the RHS of a private field initializer. The minified version looks like the following.

class _ {
  static FOO = ...;
  static BAR = ...;
  static #t = void (Object.keys(_).forEach((t) => {
          _[t].type = t;
        }), Object.freeze(_));
}

"Axial"

The remaining breakages (https://heidebeat.de/ and https://www.rt-strafverteidiger.de/) seem to be a UI framework. Both sites have identically structured source, with very similar JS, all referencing code with "Axial" in variable names. The pattern used is freezing this in a superclass constructor, but have many subclasses with private fields.

class t extends EventTarget {
  constructor() {
    super();
    Object.freeze(this);
  }
}

class h extends t {
  #foo;
  #bar;
  constructor() {
    super();
    this.#foo = ...;
  }
}

I cannot find references to this framework on GitHub or the web. If anyone knows how to contact the developers of this framework, please let me know.

[Jamesernator]

The minified version looks like the following.

Given the field is only used for the initializer, there's a good chance it comes from Babel's downleveling of static blocks as that exhibits basically this exact downleveling.

[nicolo-ribaudo]

I just noticed this issue and was going to comment the same thing as @Jamesernator.

How should Babel adjust its output for static blocks to avoid incompatibilities with the proposal?

[JLHwung]

How should Babel adjust its output for static blocks to avoid incompatibilities with the proposal?

One approach is to lower static block into IIFE and lower static properties / accessor properties as well. So

class C {
  static FOO = "foo";
  static [BAR()] = "bar"
  static {
    Object.freeze(C)
  }
  static METHOD() {}
}

becomes

class C {
  static METHOD() {}
}
var _m = BAR();
Object.defineProperty(C, "FOO", { ..., value: "foo" });
Object.defineProperty(C, _m, { ..., value: "bar" });
(() => {
  Object.freeze(C)
})();

Though it's a bit messier than Babel's current output, this approach runs the static block initializers at the right time, without defining any further private fields.

[gibson042]

Wouldn't that fail to preserve private access as in this example from the class static block proposal?

let getX;

export class C {
  #x
  constructor(x) {
    this.#x = { data: x };
  }

  static {
    // getX has privileged access to #x
    getX = (obj) => obj.#x;
  }
}

export function readXData(obj) {
  return getX(obj).data;
}

I think you're right that class static block downleveling must move any potential extension prevention to after the class has been defined, but general support might also require replacing private field gets/sets inside those blocks with use of synthesized getter/setter functions:

let getX;

// TRANSPILED FROM: export class C {…}
export const C = (() => {
  let __SYNTHETIC_getX__;

  class C {
    static #__SYNTHETIC__ = (() => {
      __SYNTHETIC_getX__ = obj => obj.#x;
    })();

    #x
    constructor(x) {
      this.#x = { data: x };
    }
  };

  // TRANSPILED FROM: static {…}
  {
    // getX has privileged access to #x
    // TRANSPILED FROM: getX = (obj) => obj.#x;
    getX = (obj) => __SYNTHETIC_getX__(obj);
  }
  return C;
})();

export function readXData(obj) {
  return getX(obj).data;
}

[JLHwung]

@gibson042 Thank you for the insight. Yes you're right, I overlooked private elements.

I think we might have to lower private elements as well, because we still have to move static private elements outside in order to preserve the execution order.

For example, in

export class C {
  static #FOO = "#FOO";
  static {
    C.#FOO = #BAR in C;
  }
  static #BAR = C.#FOO;
}

we have to run the static block before #BAR is defined. Now because the static blocks have to be moved out of the class, we cannot define #BAR in C, and in this case the captured access can not be achieved. However, the lowered private helper calls are not really scoped to the class. So the lowered result should still work:

var _C;
function _checkInRHS(e) { if (Object(e) !== e) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== e ? typeof e : "null")); return e; }
export class C {}
_C = C;
var _FOO = {
  _: "#FOO"
};
_FOO._ = _checkInRHS(_C) === _C;
var _BAR = {
  _: _FOO._
};

[gibson042]

Yes, downleveling that moves class static blocks to after class definition must also move class static field definitions, because evaluation of static fields and static blocks is interleaved in source order. So I guess it would warrant use of private-field records attached to classes and instances:

Input

export class C {
  static #FOO = "#FOO";
  static {
    C.#FOO = #BAR in C;
  }
  static #BAR = C.#FOO;
  static {
    Object.freeze(this);
  }
  static getStaticPrivateFields() {
    return { FOO: this.#FOO, BAR: this.#BAR };
  }
  static setBar(value) {
    this.#BAR = value;
  }
}

if (Reflect.set(C, "extended", true)) throw Error("unexpected extensibility");

const expectPrivateFields = expected => {
  const privateFields = C.getStaticPrivateFields();
  if (JSON.stringify(privateFields) !== JSON.stringify(expected)) {
    throw Error(`unexpected private fields ${JSON.stringify(privateFields)}`);
  }
};

expectPrivateFields({ FOO: false, BAR: false });

// Private fields remain mutable.
Reflect.apply(C.setBar, C, [true]);
expectPrivateFields({ FOO: false, BAR: true });

// ...and scope-aware
try {
  class Fake { static #BAR; };
  Reflect.apply(C.setBar, new Fake(), [true]);
  throw {};
} catch (err) {
  if (err.name !== "TypeError") throw Error("expected setBar to brand-check");
}

Transpiled

// TRANSPILED FROM: export class C {…}
export const C = (() => {
  const __PRIVATE_FIELDS__ = new WeakMap();
  const __DEFINE_PRIVATE_FIELD__ = (obj, name, value) => {
    // Support for proposal-nonextensible-applies-to-private requires each private field
    // definition to verify extensibility of the object.
    if (!isExtensible(obj)) throw TypeError("object is not extensible");
    const privateFields = weakmapGet(__PRIVATE_FIELDS__, obj) || { __proto__: null };
    weakmapSet(__PRIVATE_FIELDS__, obj, privateFields);
    privateFields[name] = value;
  };
  const __HAS_PRIVATE_FIELD__ = (obj, name) => {
    const T = obj === null ? "null" : typeof obj;
    if (obj === null || (T !== "object" && T !== "function")) {
      throw TypeError(`type ${T} does not support private fields`);
    }
    const privateFields = weakmapGet(__PRIVATE_FIELDS__, obj);
    return privateFields ? hasOwn(privateFields, name) : false;
  };
  const __GET_PRIVATE_FIELD__ = (obj, name) => {
    if (!__HAS_PRIVATE_FIELD__(obj, name)) {
      throw TypeError(`${name} is not in scope for receiver`);
    }
    return weakmapGet(__PRIVATE_FIELDS__, obj)[name];
  };
  const __SET_PRIVATE_FIELD__ = (obj, name, value) => {
    if (!__HAS_PRIVATE_FIELD__(obj, name)) {
      throw TypeError(`${name} is not in scope for receiver`);
    }
    weakmapGet(__PRIVATE_FIELDS__, obj)[name] = value;
  };

  class C {
    static getStaticPrivateFields() {
      // TRANSPILED FROM: return { FOO: this.#FOO, BAR: this.#BAR };
      return { FOO: __GET_PRIVATE_FIELD__(this, "#FOO"), BAR: __GET_PRIVATE_FIELD__(this, "#BAR") };
    }
    static setBar(value) {
      // TRANSPILED FROM: this.#BAR = value;
      __SET_PRIVATE_FIELD__(this, "#BAR", value);
    }
  }

  // TRANSPILED FROM: static #FOO = "#FOO";
  __DEFINE_PRIVATE_FIELD__(C, "#FOO", "#FOO");
  // TRANSPILED FROM: static {…}
  apply(function() {
    // TRANSPILED FROM: C.#FOO = #BAR in C;
    __SET_PRIVATE_FIELD__(C, "#FOO", __HAS_PRIVATE_FIELD__(C, "#BAR"));
  }, C, []);
  // TRANSPILED FROM: static #BAR = C.#FOO;
  __DEFINE_PRIVATE_FIELD__(C, "#BAR", __GET_PRIVATE_FIELD__(C, "#FOO"));
  // TRANSPILED FROM: static {…}
  apply(function() {
    Object.freeze(this);
  }, C, []);

  return C;
})();

if (Reflect.set(C, "extended", true)) throw Error("unexpected extensibility");

const expectPrivateFields = expected => {
  const privateFields = C.getStaticPrivateFields();
  if (JSON.stringify(privateFields) !== JSON.stringify(expected)) {
    throw Error(`unexpected private fields ${JSON.stringify(privateFields)}`);
  }
};

expectPrivateFields({ FOO: false, BAR: false });

// Private fields remain mutable.
Reflect.apply(C.setBar, C, [true]);
expectPrivateFields({ FOO: false, BAR: true });

// ...and scope-aware
try {
  // TRANSPILED FROM: class Fake {…}
  const Fake = (() => {
    const __PRIVATE_FIELDS__ = new WeakMap();
    const __DEFINE_PRIVATE_FIELD__ = (obj, name, value) => {
      // Support for proposal-nonextensible-applies-to-private requires each private field
      // definition to verify extensibility of the object.
      if (!isExtensible(obj)) throw TypeError("object is not extensible");
      const privateFields = weakmapGet(__PRIVATE_FIELDS__, obj) || { __proto__: null };
      weakmapSet(__PRIVATE_FIELDS__, obj, privateFields);
      privateFields[name] = value;
    };

    class Fake {}

    // TRANSPILED FROM: static #BAR;
    __DEFINE_PRIVATE_FIELD__(Fake, "#BAR");

    return Fake;
  })();

  Reflect.apply(C.setBar, new Fake(), [true]);
  throw {};
} catch (err) {
  if (err.name !== "TypeError") throw Error("expected setBar to brand-check");
}

[ljharb]

That's a downlevel for class + no private fields, right? ideally for "private fields but no static blocks" there'd be a much smaller one?

[gibson042]

No, that's a downlevel for supporting static blocks that must be used regardless of support for private fields, because static #foo; static { console.log(#foo in this); } and static { console.log(#foo in this); } static #foo; must behave differently.

[erights]

Suggestion for a much less violent alternate transpilation. Example

export class C {
  static #FOO = "#FOO";
  static {
    C.#FOO = #BAR in C;
  }
  static #BAR = C.#FOO;
  static {
    Object.freeze(C);
  }
}

is currently transpiled by Babel into

export class C {
  static #FOO = "#FOO";
  static #_ = (() => C.#FOO = #BAR in C)();
  static #BAR = (() => C.#FOO)();
  static #_2 = (() => Object.freeze(C))();
}

where the problem comes in with the assignment to #_2. But we'd like

• one transpilation that applies to both blocks without looking inside
• preserves private fields as actual private fields, not weakmap-based rewrites
• preserved order of evaluation of all static stuff
• postpones all static block evaluation till after class init

Together, this implies that

• all static init, both blocks and fields, happen after class init.
• all static fields are created during class init.
• all static init code, both blocks and fields, happens within the lexical scope of the class.

So how about translating instead to

export class C {
  static #FOO = undefined;
  static #BAR = undefined;
  static __static_inits__ = () => {
    delete C.__static_inits__;
    C.#FOO = "#FOO";
    C.#FOO = #BAR in C; // compromise
    C.#BAR = C.#FOO;
    Object.freeze(C);
  };
}
C.__static_inits__();

Manually inspecting (not yet testing), the line labeled "// compromise" will give the wrong answer because #BAR in C is true too early, even though it will be true eventually. Can we live with this loss of fidelity?

[erights]

@gibson042 just showed me a better transpilation based on @nicolo-ribaudo's babel/babel#17443 . No semantic compromise. Will post shortly

[erights]

export class C {
  static #FOO = "#FOO";
  static #BAR = (() => (C.#FOO = #BAR in C, C.#FOO))();
  static __last_static_block__ = () => {
    delete C.__last_static_block__;
    Object.freeze(C);
  };
}
C.__last_static_block__();

Thanks @nicolo-ribaudo and @gibson042 !

Any remaining problems with this translation?

(yes. still working on it. more soon.)

[nicolo-ribaudo]

Just a tiny note: the Babel transform saves the last static block (actually, the list of all the static blocks after the last private field) in a variable rather than as a class property, because delete can cause deoptimization.

[erights]

Can you show for this example?