<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - ES6 Function.name inferred from property names of literal objects can break some websites"
href="https://bugs.webkit.org/show_bug.cgi?id=157246">157246</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>ES6 Function.name inferred from property names of literal objects can break some websites
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>JavaScriptCore
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>mark.lam@apple.com
</td>
</tr></table>
<p>
<div>
<pre>Specifically, the library mathjs (see <a href="http://mathjs.org">http://mathjs.org</a> and <a href="https://github.com/josdejong/mathjs">https://github.com/josdejong/mathjs</a>) uses an idiom where it created literal objects with property names that look like this: 'number | BigNumber | Unit'. Later, this name is used in a string to create function source code that gets eval'ed. Since 'number | BigNumber | Unit' is not a valid function name, we get a syntax error.
The nitty gritty details:
1. mathjs uses object literals with the funky property names for its function members. For example,
// helper function to type check the middle value of the array
var middle = typed({
'number | BigNumber | Unit': function (value) {
return value;
}
});
2. mathjs' getName() uses Function.name to get the name of functions (hence, picks up the ES6 behavior):
/**
* Retrieve the function name from a set of functions, and check
* whether the name of all functions match (if given)
...
*/
function getName (fns) {
var name = '';
for (var i = 0; i < fns.length; i++) {
var fn = fns[i];
...
name = fn.name;
...
return name;
}
3. mathjs uses that name to assembler new function source code that gets eval'ed:
/**
* Compose a function from sub-functions each handling a single type signature.
...
*/
function _typed(name, signatures) {
...
// generate code for the typed function
var code = [];
var _name = name || '';
...
code.push('function ' + _name + '(' + _args.join(', ') + ') {');
code.push(' "use strict";');
code.push(' var name = \'' + _name + '\';');
code.push(node.toCode(refs, ' '));
code.push('}');
// generate body for the factory function
var body = [
refs.toCode(),
'return ' + code.join('\n')
].join('\n');
// evaluate the JavaScript code and attach function references
var factory = (new Function(refs.name, 'createError', body)); // <========= Syntax Error right here!
var fn = factory(refs, createError);
...
return fn;
}
Until mathjs (and any other frameworks that does similar things) and sites that uses mathjs has been updated to work with ES6, we'll need a compatibility hack to work around it.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>