Tell babel to transpile down to NodeJS - babeljs

I use typescript and I'm building a lambda layer but lambda layer seem to be strict with module.exports.myHelperFunction rather than exports.myHelperFunction, the later doesn't work when you try to import it, it will fail.
So What I want is if I have the following code:
export function myHelperUtility () {
let a = {};
return { ...a };
}
it should transpile to:
"use strict";
function myHelperUtility () {
let a = {};
return { ...a };
}
module.exports.myHelperUtility = myHelperUtility;
Rather than:
"use strict";
exports.__esModule = true;
exports.test = test;
function test() {
let a = {};
return { ...a };
}

Found a way to make it work, instead of using #babel/preset-env, I completely removed it and used #babel/plugin-transform-modules-commonjs with the following options:
{
strict: true,
loose: true,
importInterop: 'node'
}
which did not produce what I wanted to achieve BUT since it removes the __esmodule and _interoprequiredefault, it will work!

Related

Writing a test for CodeMirror

I would like to write a simple test for CodeMirror
test(' codemirror ', () => {
let text = document.createElement("div");
let settings = {}
codemirror(text, { ...settings, value: '' });
});
However when I run this I get :
TypeError: document.body.createTextRange is not a function
at range (A:\frontend\node_modules\codemirror\lib\codemirror.js:94:25)
at hasBadBidiRects (A:\frontend\node_modules\codemirror\lib\codemirror.js:1343:12)
at buildLineContent (A:\frontend\node_modules\codemirror\lib\codemirror.js:1838:9)
at updateExternalMeasurement (A:\frontend\node_modules\codemirror\lib\codemirror.js:2442:28)
at prepareMeasureForLine (A:\frontend\node_modules\codemirror\lib\codemirror.js:2478:14)
at measureChar (A:\frontend\node_modules\codemirror\lib\codemirror.js:2451:34)
at endOperation_R2 (A:\frontend\node_modules\codemirror\lib\codemirror.js:3766:24)
at endOperations (A:\frontend\node_modules\codemirror\lib\codemirror.js:3732:7)
at A:\frontend\node_modules\codemirror\lib\codemirror.js:3719:5
at finishOperation (A:\frontend\node_modules\codemirror\lib\codemirror.js:2132:5)
at endOperation (A:\frontend\node_modules\codemirror\lib\codemirror.js:3716:3)
at new CodeMirror$1 (A:\frontend\node_modules\codemirror\lib\codemirror.js:7448:3)
at CodeMirror$1 (A:\frontend\node_modules\codemirror\lib\codemirror.js:7389:49)
What am I doing wrong here?
My import looks like this :
import codemirror from 'codemirror';
And I am using : "codemirror": "5.25.0",
I managed to stub out some functions and now it works. It is not a very nice solution though :(
test(' codemirror test ', () => {
let div = document.createElement("div");
document.body.createTextRange = (elem) => {
let textRange = {
getBoundingClientRect: ()=>1,
getClientRects: ()=>1
}
return textRange;
}
codemirror(div);
});

`inline` and `register` modules options

What do --modules inline and --modules register options do?
https://github.com/google/traceur-compiler/wiki/Options-for-Compiling.
Using 2ality.com's lib.js example module:
//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
inline wraps the module in an anonymous function, assigned to an auto-generated variable by the looks, it would be interesting to know what this is all about, the technique can be used to bundle modules without actually using a module system, but the var assigned the object returned would have to be known:
var $__src_47_lib_46_js__ = (function() {
"use strict";
var __moduleName = "src/lib.js";
var sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function diag(x, y) {
return sqrt(square(x) + square(y));
}
return {
get sqrt() {
return sqrt;
},
get square() {
return square;
},
get diag() {
return diag;
}
};
})();
//# sourceMappingURL=lib.js.map
System.register is a draft module format:
System.registerModule("src/lib.js", [], function() {
"use strict";
var __moduleName = "src/lib.js";
var sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function diag(x, y) {
return sqrt(square(x) + square(y));
}
return {
get sqrt() {
return sqrt;
},
get square() {
return square;
},
get diag() {
return diag;
}
};
});
System.get("src/lib.js" + '');
//# sourceMappingURL=lib.js.map
Once the module has been registered, then the System.module( ... ) can be called to load the module. Currently I know traceur (though not the runtime) has the System object polyfilled, presumably also babel.
The System.register format has some useful advantages I would suggest, more than one module can be included in a file which suits a collection of smaller closely coupled modules (typically classes); there is no need to buy in to another module system, e.g., including vanilla JS (test data, shims attached to the global object, etc.) in a node module requires additional boilerplate code adding overhead to the workflow, etc.
The System object though is technology still in development (not included the current draft standard).

Is there a way to resolve multiple promises with Protractor?

I have this:
element(by.id('x')).sendKeys('xxx').then(function(text) {
element(by.id('y')).sendKeys('yyy').then(function(text) {
element(by.id('z')).sendKeys('zzz').then(function(text) {
expect(element(by.id('myButton')).isEnabled()).toBe(true);
})
});
});
The button 'myButton' is enabled when the elements 'x', 'y' and 'z' all have values. It's my understanding that sendKeys returns a promise.
So is this the only way that I can check if 'myButton' which depends on data in all the three fields is enabled?
You don't need to chain any promises because protractor will wait until all the statements are done: https://github.com/angular/protractor/blob/master/docs/control-flow.md
element(by.id('x')).sendKeys('xxx');
element(by.id('y')).sendKeys('yyy');
element(by.id('z')).sendKeys('zzz');
expect(element(by.id('myButton'));
If you want to resolve multiple promises use:
var webdriver = require('selenium-webdriver');
webdriver.promise.fullyResolved(promises);
For example: https://github.com/angular/protractor/blob/d15d35a82a5a2/lib/protractor.js#L327
this is a bit after the fact, but:
var x = element(by.id('x')).sendKeys('xxx');
var y = element(by.id('y')).sendKeys('yyy');
var z = element(by.id('z')).sendKeys('zzz');
myFun(x,y,z).then(function(){
expect(element(by.id('myButton')).isEnabled()).toBe(true);
});
// in a common function library
function myFun(Xel,Yel,Zel) {
return protractor.promise.all([Xel,Yel,Zel]).then(function(results){
var xText = results[0];
var yText = results[1];
var zText = results[2];
});
}
but an even better way:
var x = element(by.id('x')).sendKeys('xxx');
var y = element(by.id('y')).sendKeys('yyy');
var z = element(by.id('z')).sendKeys('zzz');
myFun(x,y,z);
//isEnabled() is contained in the expect() function, so it'll wait for
// myFun() promise to be fulfilled
expect(element(by.id('myButton')).isEnabled()).toBe(true);
// in a common function library
function myFun(Xel,Yel,Zel) {
return protractor.promise.all([Xel,Yel,Zel]).then(function(results){
var xText = results[0];
var yText = results[1];
var zText = results[2];
});
}
another way is to chain the .thens together:
element(by.id('x')).sendKeys('xxx').
then(function(xtext){
element(by.id('y')).sendKeys('yyy');
}).then(function(ytext){
element(by.id('z')).sendKeys('zzz');
}).then(function(ztext){
expect(element(by.id('myButton')).isEnabled()).toBe(true);
});
it seems protractor supports all - protractor.promise.all
read more at:
https://github.com/angular/protractor/issues/2062#issuecomment-94030055
describe('promise.all', function() {
it('should greet the named user', function() {
browser.get('http://juliemr.github.io/protractor-demo');
$('div').click().then(function () {
return protractor.promise.all([
$('h3').getText(),
$('h4').getText()
]);
}).then(function (params) {
console.log('A');
});
});
it('does something else', function() {
console.log('B');
});
If you want to return an object instead of a list, seems you can also do that - used it and it's awesome
element.all(by.css('.fc-event-inner')).map(function(el) {
return {
time: el.findElement(by.className('fc-event-time')).getText(),
title: el.findElement(by.className('fc-event-title')).getText()
}
});
See the properties are actually promises.. protractor will resolve them.

How to globally add a custom locator to Protractor?

I wrote a custom locator for Protractor that finds anchor elements by their ui-sref value. In my specs I just used by.addLocator to add the custom locator, but I figured this might be a cool thing to publish and have other people use it.
The goal is to add this custom locator to the global Protractor object so it can be used in any of your specs.
My initial approach was to add this functionality in the onPrepare block of the Protractor config. Something like the pseudocode below:
onPrepare: function () {
require('ui-sref-locator')(protractor); // The protractor object is available here.
}
That require statement would just execute this function:
function (ptorInstance) {
ptorInstance.by.addLocator('uiSref', function (toState, opt_parentElement) {
var using = opt_parentElement || document;
var possibleAnchors = using.querySelectorAll('a[ui-sref="' + toState +'"]');
var result = undefined;
if (possibleAnchors.length === 0) {
result = null;
} else if (possibleAnchors.length === 1) {
result = possibleAnchors[0];
} else {
result = possibleAnchors;
}
return result;
});
};
The problem is that by is not defined on the protractor object available in the onPrepare block. This means that I cannot use the .addLocator method.
Try the following:
function () {
by.addLocator('uiSref', function (toState, opt_parentElement) {
...
By should be in the global scope.
The protractor object passed to the onPrepare block has a By property. That By property has an inherited enumerable property named addLocator. My understanding of JavaScript is pretty shallow so it really threw me off that when I console.log'ed the protractor.By it returned {}, but if I did for (var propName in protractor.By) it would show me all the "hidden" properties. I'm still struggling to understand that bit.
Working code:
onPrepare: function () {
require('ui-sref-locator')(protractor); // The protractor object is available here.
}
The require would execute the function below:
function (ptor) {
ptor.By.addLocator('linkUiSref', function (toState, opt_parentElement) {
var using = opt_parentElement || document;
var possibleAnchors = using.querySelectorAll('a[ui-sref="' + toState +'"]');
var result = undefined;
if (possibleAnchors.length === 0) {
result = null;
} else if (possibleAnchors.length === 1) {
result = possibleAnchors[0];
} else {
result = possibleAnchors;
}
return result;
});
};

Coffeescript best way to var

I was poking around trying to figure a good way to do var, and here's one.. is this intentionally in cs, because it's not documented?
me=;
fetchUser()
.then((_me) =>
me = _me
fetchFriend()
)
.then((_you) =>
me.friend(_you)
)
.then(done)
.otherwise(=>
console.log ':('
)
compiles correctly to
var me;
me = fetchUser().then((function(_this) {
return function(_me) {
me = _me;
return fetchFriend();
};
})(this)).then((function(_this) {
return function(_you) {
return me.friend(_you);
};
})(this)).then(done).otherwise((function(_this) {
return function() {
return console.log(':(');
};
})(this));
Edit: it's not compiling correctly.
I wouldn't expect me = fetchUser() either, but I didn't see that before
https://github.com/jashkenas/coffee-script/issues/3098
I think it's just a quirk of the parser. The normal way variables are declared in order to establish scoping is just by defining them with some default value (e.g. null).