No Support for Private Properties in ES6 Classes?

[jhirschberg70]

I've encountered two issues using certain features of ES6 classes. The first is that classes with private properties aren't working with --pre-js. I've attached a zip file with code that exposes the problem. Here's the output from my attempts to compile and link the attached code:

em++   -v -o main.o -c main.cpp
 "/home/jeff/dev/emsdk/upstream/bin/clang" --version
 "/home/jeff/dev/emsdk/upstream/bin/clang++" -target wasm32-unknown-emscripten -fignore-exceptions -fvisibility=default -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr -DEMSCRIPTEN --sysroot=/home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot -Xclang -iwithsysroot/include/fakesdl -Xclang -iwithsysroot/include/compat -v -c main.cpp -o main.o
clang version 17.0.0 (https://github.com/llvm/llvm-project 1142e6c7c795de7f80774325a07ed49bc95a48c9)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: /home/jeff/dev/emsdk/upstream/bin
 (in-process)
 "/home/jeff/dev/emsdk/upstream/bin/clang-17" -cc1 -triple wasm32-unknown-emscripten -emit-obj -mrelax-all -disable-free -clear-ast-before-backend -disable-llvm-verifier -discard-value-names -main-file-name main.cpp -mrelocation-model static -mframe-pointer=none -ffp-contract=on -fno-rounding-math -mconstructor-aliases -target-cpu generic -mllvm -treat-scalable-fixed-error-as-warning -debugger-tuning=gdb -v -fcoverage-compilation-dir=/home/jeff/acorn -resource-dir /home/jeff/dev/emsdk/upstream/lib/clang/17 -D EMSCRIPTEN -isysroot /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot -internal-isystem /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include/wasm32-emscripten/c++/v1 -internal-isystem /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include/c++/v1 -internal-isystem /home/jeff/dev/emsdk/upstream/lib/clang/17/include -internal-isystem /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include/wasm32-emscripten -internal-isystem /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include -fdeprecated-macro -fdebug-compilation-dir=/home/jeff/acorn -ferror-limit 19 -fvisibility=default -fgnuc-version=4.2.1 -fcxx-exceptions -fignore-exceptions -fexceptions -iwithsysroot/include/fakesdl -iwithsysroot/include/compat -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr -o main.o -x c++ main.cpp
clang -cc1 version 17.0.0 based upon LLVM 17.0.0git default target x86_64-unknown-linux-gnu
ignoring nonexistent directory "/home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include/wasm32-emscripten/c++/v1"
ignoring nonexistent directory "/home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include/wasm32-emscripten"
#include "..." search starts here:
#include <...> search starts here:
 /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include/fakesdl
 /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include/compat
 /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include/c++/v1
 /home/jeff/dev/emsdk/upstream/lib/clang/17/include
 /home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/include
End of search list.
em++ ./main.o -o ./private.min.js -v --closure 1  --pre-js ./private.js
 "/home/jeff/dev/emsdk/upstream/bin/clang" --version
 "/home/jeff/dev/emsdk/upstream/bin/wasm-ld" -o ./private.min.wasm ./main.o -L/home/jeff/dev/emsdk/upstream/emscripten/cache/sysroot/lib/wasm32-emscripten -lGL -lal -lhtml5 -lstubs-debug -lnoexit -lc-debug -ldlmalloc -lcompiler_rt -lc++-noexcept -lc++abi-debug-noexcept -lsockets -mllvm -combiner-global-alias-analysis=false -mllvm -enable-emscripten-sjlj -mllvm -disable-lsr --allow-undefined-file=/tmp/tmpyw8cmnvj.undefined --strip-debug --export-if-defined=main --export-if-defined=__start_em_asm --export-if-defined=__stop_em_asm --export-if-defined=__start_em_lib_deps --export-if-defined=__stop_em_lib_deps --export-if-defined=__start_em_js --export-if-defined=__stop_em_js --export-if-defined=__main_argc_argv --export-if-defined=fflush --export=emscripten_stack_get_end --export=emscripten_stack_get_free --export=emscripten_stack_get_base --export=emscripten_stack_get_current --export=emscripten_stack_init --export=stackSave --export=stackRestore --export=stackAlloc --export=__wasm_call_ctors --export=__errno_location --export=__get_temp_ret --export=__set_temp_ret --export-table -z stack-size=65536 --initial-memory=16777216 --no-entry --max-memory=16777216 --stack-first
 "/home/jeff/dev/emsdk/upstream/bin/wasm-emscripten-finalize" --dyncalls-i64 --pass-arg=legalize-js-interface-exported-helpers ./private.min.wasm -o ./private.min.wasm --detect-features
 "/home/jeff/dev/emsdk/node/14.18.2_64bit/bin/node" /home/jeff/dev/emsdk/upstream/emscripten/src/compiler.js /tmp/tmpah8yiw70.json
Internal compiler error in src/compiler.js!
Please create a bug report at https://github.com/emscripten-core/emscripten/issues/
with a log of the build and the input files used to run. Exception message: "In the following macro:

 preJS() 

Error: /home/jeff/acorn/private.js:3: Unknown preprocessor directive #values;
    at preprocess (/home/jeff/dev/emsdk/upstream/emscripten/src/parseTools.js:131:19)
    at preJS (/home/jeff/dev/emsdk/upstream/emscripten/src/parseTools.js:1125:15)
    at eval (eval at <anonymous> (/home/jeff/dev/emsdk/upstream/emscripten/src/parseTools.js), <anonymous>:1:2)
    at eval (/home/jeff/dev/emsdk/upstream/emscripten/src/parseTools.js:25:19)
    at String.replace (<anonymous>)
    at processMacros (/home/jeff/dev/emsdk/upstream/emscripten/src/parseTools.js:23:15)
    at includeFile (/home/jeff/dev/emsdk/upstream/emscripten/src/jsifier.js:458:11)
    at finalCombiner (/home/jeff/dev/emsdk/upstream/emscripten/src/jsifier.js:485:5)
    at runJSify (/home/jeff/dev/emsdk/upstream/emscripten/src/jsifier.js:554:3)
    at Object.<anonymous> (/home/jeff/dev/emsdk/upstream/emscripten/src/compiler.js:97:3)
em++: error: '/home/jeff/dev/emsdk/node/14.18.2_64bit/bin/node /home/jeff/dev/emsdk/upstream/emscripten/src/compiler.js /tmp/tmpah8yiw70.json' failed (returned 1)
make: *** [Makefile:76: index.html] Error 1

I'll create a second issue for the other problem I encountered, which is in a different part of the toolchain.

private.zip

[jhirschberg70]

I'm sorry, I didn't include the emscripten version with my submission.

emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.31 (e88336121cfe6da4a96c88e46f314552f07dfed0)
Copyright (C) 2014 the Emscripten authors (see AUTHORS.txt)
This is free and open source software under the MIT license.
There is NO warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

[sbc100]

The pre and post JS files are now run through our (rather dumb) pre-processor and it seems they are confused by a line in your pre-js that starts with "#values".

What does your pre-js file look like? Does it have any lines that start like that?

I suppose we could just remove that error and ignore # lines that are not known directives?

[jhirschberg70]

I've pasted one of my files that uses private properties below. To my knowledge, private fields have to be declared before they can be used, and # is the symbol JavaScript uses to indicate a private property. If you don't declare private fields and instead just try to define them in the constructor() you get an error from the browser along the lines of

Uncaught SyntaxError: Private field '#foo' must be declared in an enclosing class

I have worked around this for now by just using --extern-post-js (I couldn't use --extern-pre-js for another reason). You could also opt to not use private properties in your ES6 classes. Private properties are a feature of ES6, though, so I imagine that you'd like emscripten to handle them properly unless the ROI makes it unreasonable to do so.

The following code runs without error using --extern-post-js:

class GameUI {
  #core = null;
  #currentState = null;
  #stack = [];
  
  constructor(core, initialState, initialStateData) {
    this.#core = core;
    this.#currentState = initialState;
    GameState.setStateData(initialStateData);

    if ("screen" in initialStateData) {
      IO.configScreen(initialStateData.screen);
    } else {
      alert("screen configuration data not found");
    }
    
    this.#currentState.enter();
  }
  
  update(event) {
    let transition = this.#currentState.update(this.#core, event);
    
    if (transition) {
      if (transition.type === "change") {
        this.#change(transition.next);
        
        return this.#currentState.enter();
      }
      
      if (transition.type === "pop") {
        this.#pop();
        
        return this.#currentState.enter();
      }
      
      if (transition.type === "push") {
        this.#push(transition.next);
        
        return this.#currentState.enter();
      }
    }
    
    return false;
  }
  
  #change(state) {
    if (this.#stack.length) {
      this.#stack.pop();
    }
    
    this.#stack.push(state);
    this.#currentState = state;
  }
  
  #pop() {
    this.#stack.pop();
    this.#currentState = this.#stack.at(-1);
  }
  
  #push(state) {
    this.#stack.push(state);
    this.#currentState = state;
  }
}

[sbc100]

I see, I guess we can't run our pre-processor over such files then, or at least not with that error enabled. I think the solution is most likely simply to not generate such errors when running on the user code.

[sbc100]

I believe this was fixed in #21227 since pre-processing is now optional.