Using `Map` in library code seems not allowed

[fs-eire]

I try to use a ES6 Map inside library code like this:

 // library_webgpu.js
 
 var LibraryWebGPU = {
   $WebGPU__deps: [],
   $WebGPU: {
     Internals: {
+      buffers: new Map(),
       ...
     },
     ...
   },
 };
 
 autoAddDeps(LibraryWebGPU, '$WebGPU');
 mergeInto(LibraryManager.library, LibraryWebGPU);
 

And the final generated JS files is like this:

var WebGPU = {
  Internals: {
    buffers: {},

This will cause the following error later:

Uncaught TypeError: buffers.set is not a function

I tried to figure out whether this is an expected behavior, but didn't see document about this. And I don't understand why this behavior happens. If this is expected behavior (re-writing a Map to a plain object), is there a way to use ES6 Map in library code?

[oatgnauh]

I reproduced your problem, it seems that the constructor can only contain function implementations, you can consider creating a new map in a function.

 var LibraryWebGPU = {
   $WebGPU__deps: [],
   $WebGPU: {
     Internals: {
+      buffers: undefined,
        init:function(){
            WebGPU.Internals.buffers = new Map();
       }
       ...
     },
     ...
   },
 };

[brendandahl]

Should be able to use a string e.g. buffers: 'new Map()', (though I'm not positive that works on children elements too. Alternatively, you can use __postset. e.g. $WebGPU__postset: 'WebGPU.Internals = new Map();',

[fs-eire]

Using string like buffers: 'new Map()' will generate it as-is.
Using postset works in debug build. I need to do further testing for whether it works with closure compiler.

[sbc100]

Yes, this is sadly a side effect of the way that JS libraries are processed. They are read in my node and processed as JS and the re-serialized using the custom method:

emscripten/src/jsifier.mjs

Lines 74 to 94 in 6fd5a1f

	// JSON.stringify will completely omit function objects. This function is
	// similar but preserves functions.
	function stringifyWithFunctions(obj) {
	if (typeof obj == 'function') return obj.toString();
	if (obj === null || typeof obj != 'object') return JSON.stringify(obj);
	if (Array.isArray(obj)) {
	return '[' + obj.map(stringifyWithFunctions).join(',') + ']';
	}
	var rtn = '{\n';
	for (const [key, value] of Object.entries(obj)) {
	var str = stringifyWithFunctions(value);
	// Handle JS method syntax where the function property starts with its own
	// name. e.g. foo(a) {},
	if (typeof value === 'function' && str.startsWith(key)) {
	rtn += str + ',\n';
	} else {
	rtn += escapeJSONKey(key) + ':' + str + ',\n';
	}
	}
	return rtn + '}';
	}

We could try to improve this function perhaps? But for now any calls to new that happen in the JS library are not preserved in the output (since they are evaluated when the library is processed).

[fs-eire]

Yes, this is sadly a side effect of the way that JS libraries are processed. They are read in my node and processed as JS and the re-serialized using the custom method:

emscripten/src/jsifier.mjs

Lines 74 to 94 in 6fd5a1f

// JSON.stringify will completely omit function objects. This function is
// similar but preserves functions.
function stringifyWithFunctions(obj) {
if (typeof obj == 'function') return obj.toString();
if (obj === null || typeof obj != 'object') return JSON.stringify(obj);
if (Array.isArray(obj)) {
return '[' + obj.map(stringifyWithFunctions).join(',') + ']';
}
var rtn = '{\n';
for (const [key, value] of Object.entries(obj)) {
var str = stringifyWithFunctions(value);
// Handle JS method syntax where the function property starts with its own
// name. e.g. foo(a) {},
if (typeof value === 'function' && str.startsWith(key)) {
rtn += str + ',\n';
} else {
rtn += escapeJSONKey(key) + ':' + str + ',\n';
}
}
return rtn + '}';
}
We could try to improve this function perhaps? But for now any calls to new that happen in the JS library are not preserved in the output (since they are evaluated when the library is processed).

Ahh, so this explained why I ran into this issue.

I understand how it works now and I don't think there is a perfect solution, but at least we can do this increamentally. For example, adding support to ES6 Set, Map and WeakMap should be good.