Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
es6-module-transpiler-yui-formatter
Advanced tools
ES6 Module Transpiler Extension to Output YUI.add() Format.
ES6 Module Transpiler Formatter to Output YUI.add()
Format
ES6 Module Transpiler es6-module-transpiler
is an experimental compiler that allows you to write your JavaScript using a subset of the current ES6 module syntax, and compile it into various formats. The es6-module-transpiler-yui-formatter
is one of those output formats that is focus on enabling the use of ES6 modules into a YUI application today.
This output format compromises in few of the ES6 features in ES6 modules, including live bindings, sealed objects, etc. This compromise is Ok when you try to use them into a YUI Application since YUI is based on a namespace that can be mutated.
Since this formatters is an plugin for es6-module-transpiler, you can use it with any existing build tool that supports es6-module-transpiler as the underlaying engine to transpile the ES6 modules.
You just need to make sure that es6-module-transpiler-yui-formatter
is accessible for those tools, and pass the proper formatter
option thru the es6-module-transpiler configuration.
If you plan to use the compile-module
CLI, the formatters can be used directly from the command line:
$ npm install es6-module-transpiler
$ npm install es6-module-transpiler-yui-formatter
$ ./node_modules/.bin/compile-modules convert -f es6-module-transpiler-yui-formatter path/to/**/*.js -o build/
The -f
option allow you to specify the path to the specific formatter, which is this case is an installed module called es6-module-transpiler-yui-formatter
.
You can also use the formatter with the transpiler as a library:
var transpiler = require('es6-module-transpiler');
var YUIFormatter = require('es6-module-transpiler-yui-formatter');
var Container = transpiler.Container;
var FileResolver = transpiler.FileResolver;
var container = new Container({
resolvers: [new FileResolver(['lib/'])],
formatter: new YUIFormatter()
});
container.getModule('index');
container.write('out/mylib.js');
Again, this syntax is in flux and is closely tracking the module work being done by TC39. This package relies on the syntax supported by es6-module-transpiler, which relies on esprima, you can have more information about the supported syntax here: https://github.com/square/es6-module-transpiler#supported-es6-module-syntax
First of all, the output format for YUI.add()
might looks alien even for YUI developers. The basic structure is described here: http://yuilibrary.com/yui/docs/yui/es6-modules.html, but considering that es6-module-transpiler relies on Recast to mutate the original ES6 code, it can output the corresponding sourceMap, you should be able to debug the module code without having to understand the actual output format.
For a module without imports, and a single default exports:
export default function (a, b) {
return a + b;
}
will produce something like this:
YUI.add("component/foo", function(Y, NAME, __imports__, __exports__) {
"use strict";
function __es6_export__(name, value) {
__exports__[name] = value;
}
__es6_export__("default", function(a, b) {
return a + b;
});
return __exports__;
}, "@VERSION@", {
"es": true,
"requires": []
});
A more complex example will look like this:
import assert from "./assert";
export default function (a, b) {
assert(a);
assert(b);
return a + b;
};
and the output will be:
YUI.add("component/foo", function(Y, NAME, __imports__, __exports__) {
"use strict";
function __es6_export__(name, value) {
__exports__[name] = value;
}
var assert = __imports__["component/assert"]["default"];
__es6_export__("default", function(a, b) {
assert(a);
assert(b);
return a + b;
});
return __exports__;
}, "@VERSION@", {
"es": true,
"requires": ["component/assert"]
});
Part of the goal, is try to preserve as much as possible the original code of the module within the execute
function. Obviously, this is difficult when you have to export default functions and other declarations. The only modifications you will see in the body are the calls to the __es6_export__()
method to export the new value when defined or updated, the rest of the code will remain immutable.
git checkout -b my-new-feature
)git commit -am 'Add some feature'
)git push origin my-new-feature
)Thanks, and enjoy living in the ES6 future!
FAQs
ES6 Module Transpiler Extension to Output YUI.add() Format.
We found that es6-module-transpiler-yui-formatter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.