old react and IE11 polyfills - reactjs

Im running React 0.13 and cant upgrade (long story). Cant use Babel-Polyfill.
I need to make the application IE11 compatable so I need to implement a lot of polyfills.
How do I or can I include the polyfills in a singular file and make that file globally visible?
I have a file containing just the polyfills ( like this one )
But im unsure how to include it to just be visible globally by default.
if (typeof Object.assign != 'function') {
Object.assign = function(target) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
};
}

you can implement a function that wraps all the polyfills and import it wherever you need it.
export function loadCustomPolyfills() {
if (typeof Object.assign != 'function') {
Object.assign = function(target) {
..
};
}
//other polyfills
}
and in you entry point file, at the beginning
import { loadCustomPolyfills } from './custom-polyfills';
loadCustomPolyfills();

Related

Nextjs 'endsWith' polyfill problem on edge and ie11

My site breaks and fails running because of the Object doesn't support property or method 'endsWith' error. I've tried polyfilling it with import 'core-js/features/string/ends-with' or
if (!String.prototype.endsWith) {
String.prototype.endsWith = function (search, this_len) {
if (this_len === undefined || this_len > this.length) {
this_len = this.length
}
return this.substring(this_len - search.length, this_len) === search
}
}
I've done that in my custom _app file but it still fails in edge and ie11. What am I missing?
Edit: Judging by the https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith#Browser_compatibility endsWith should be supported in Edge
Try to add this to your code.
String.prototype.endsWith = function(pattern) {
var d = this.length - pattern.length;
return d >= 0 && this.lastIndexOf(pattern) === d;
};

I get a syntax error when using this line of code in ie11

I get a syntax error when using this line of code in IE11.
let themes = _.filter(data, (el) => {
if (OrganizationId == 21) {
return el.Code == 'skin-3';
} else {
return el.Code != 'skin-3';
}
});
You're using arrow function which is not supported by IE and let statement which is partial supported by IE.
I suggest that you transpile the code to ES5 syntax using Babel. You can convert the code to below to make it work in IE 11:
var themes = _.filter(data, function (el) {
if (OrganizationId == 21) {
return el.Code == 'skin-3';
} else {
return el.Code != 'skin-3';
}
});

Docusaurus fails with IE: Object doesn't support property or method 'assign'

We are making a V2 Docusaurus website: https://www.10studio.tech.
We have just realized that it does not work well in IE, for instance, IE11. The error message is: Object doesn't support property or method 'assign'.
There are some packages to provide with IE compatibility such as core-js, but we don't know how to properly add it to Docusaurus v2.
Does anyone know how to amend this?
The error message is telling you that object doesn't have an assign function. assign is a function which apparently is not supported in the browser you are speaking about, so you need to polyfill it. A good example is:
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(Object(nextSource));
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
which can be found here: https://gist.github.com/spiralx/68cf40d7010d829340cb
However, even though this will fix the problem you were complaining about, it is highly probable that other problems will occur as well. You might need to polyfill some other stuff as well, you might want to take a look into BabelJS in order to achieve this.

jsPsych integration with React

I've been trying to put a custom experiment made with jsPsych, a library for running behavioral experiments, with custom plugins into a React container but i've run into some issues.
The first thing i tried to do was use makebrainwave's jspsych-react package, but when i try to run the example, after having to change the routes of the files in the import section and replacing the use of 'fs', i'm still running into this error:
Trial level node is missing the "type" parameter. The parameters for the node are: {} experiment.js:924
TypeError: jsPsych.plugins[trial.type] is undefined[Learn More] experiment.js:1051
Could anyone help me with it? It looks like it's trying to initialize something and failing, but otherwise I'm kinda lost in the error.
The first error occurs in the constructor function:
// constructor
var _construct = function() {
// store a link to the parent of this node
parent_node = parent;
// create the ID for this node
if (typeof parent == 'undefined') {
relative_id = 0;
} else {
relative_id = relativeID;
}
// check if there is a timeline parameter
// if there is, then this node has its own timeline
if ((typeof parameters.timeline !== 'undefined') || (typeof jsPsych.plugins[trial_type] == 'function')) {
// create timeline properties
timeline_parameters = {
timeline: [],
loop_function: parameters.loop_function,
conditional_function: parameters.conditional_function,
sample: parameters.sample,
randomize_order: typeof parameters.randomize_order == 'undefined' ? false : parameters.randomize_order,
repetitions: typeof parameters.repetitions == 'undefined' ? 1 : parameters.repetitions,
timeline_variables: typeof parameters.timeline_variables == 'undefined' ? [{}] : parameters.timeline_variables
};
self.setTimelineVariablesOrder();
// extract all of the node level data and parameters
var node_data = Object.assign({}, parameters);
delete node_data.timeline;
delete node_data.conditional_function;
delete node_data.loop_function;
delete node_data.randomize_order;
delete node_data.repetitions;
delete node_data.timeline_variables;
delete node_data.sample;
node_trial_data = node_data; // store for later...
// create a TimelineNode for each element in the timeline
for (var i = 0; i < parameters.timeline.length; i++) {
timeline_parameters.timeline.push(new TimelineNode(Object.assign({}, node_data, parameters.timeline[i]), self, i));
}
}
// if there is no timeline parameter, then this node is a trial node
else {
// check to see if a valid trial type is defined
var trial_type = parameters.type;
if (typeof trial_type == 'undefined') {
console.error('Trial level node is missing the "type" parameter. The parameters for the node are: ' + JSON.stringify(parameters));
} else if ((typeof jsPsych.plugins[trial_type] == 'undefined') && (trial_type.toString().replace(/\s/g,'') != "function(){returntimeline.timelineVariable(varname);}")) {
console.error('No plugin loaded for trials of type "' + trial_type + '"');
}
// create a deep copy of the parameters for the trial
trial_parameters = Object.assign({}, parameters);
}
}();
And the second one in the first line of the folowing function
function setDefaultValues(trial){
var trial_parameters = Object.keys(jsPsych.plugins[trial.type].info.parameters);
for(var i=0; i<trial_parameters.length; i++){
if(typeof trial[trial_parameters[i]] == 'undefined' || trial[trial_parameters[i]] === null){
if(typeof jsPsych.plugins[trial.type].info.parameters[trial_parameters[i]].default == 'undefined'){
console.error('You must specify a value for the '+trial_parameters[i]+' parameter in the '+trial.type+' plugin.');
} else {
trial[trial_parameters[i]] = jsPsych.plugins[trial.type].info.parameters[trial_parameters[i]].default;
}
}
}
}
I installed jspsych-react with yarn into the project and the test container is the following:
import React, { Component } from 'react'
import { Experiment } from "jspsych-react";
import { visualOddball } from "./examples/timelines/visualOddball";
import { callbackHTMLDisplay } from "./examples/plugins/callbackHTMLDisplay";
import { callbackImageDisplay } from "./examples/plugins/callbackImageDisplay";
export default class ExperimentComponent extends Component {
render() {
return (
<div>
<Experiment
settings={{ timeline: visualOddball }}
plugins={{
"callback-html-display": callbackHTMLDisplay,
"callback-image-display": callbackImageDisplay
}}
/>
</div>
);
}
}
Has anyone integrated something similar without using the jspsych-react package? which approach did you take?
Thanks in advance!

Unit test case in AngularJS

I am new to AngularJS. I have learned some basic of it. Now, I need to work on a AngularJS project at my work. I needed to create a function which I have successfully created. Below is my method.
vm.selectAll = function () {
var items = this.data;
for (var i = 0; i < items.length; i++) {
if ((vm.chkAll)) {
if (!items[i].AssignedToZone) {
if (!svcPermission.ensurePermission('AddPermission')) return;
svcZones.addPlace(Id, items[i].Id).then(refresh);
}
}
else {
if (!svcPermission.ensurePermission('DeletePermission')) return;
svcZones.removePlace(vm.selectedZone.Id, items[i].Id).then(refresh);
}
}
angular.forEach(items, function (item) {
item.AssignedToZone = vm.chkAll;
});
But , now my manager asked me to write unit test case for this method. I have googled it but I did not understand that from here I can start. I need to use Jasmine and mocha as these are already used it in current project.

Resources