reactjs-alex-alex2006hw / browser-polyfill

Browser polyfill for making React Native compatible with web libs like pixi.js, three.js, phaser.js

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

NPM


@expo/browser-polyfill

Browser polyfill for React Native - very beta feel free to contribute 😁💙

Installation

yarn add @expo/browser-polyfill

Usage

Import the library into your JavaScript file:

import '@expo/browser-polyfill';

Implements

DOM

DOM is provided with very low support, these are used for libs like pixi.js that validate type.

class Node
class Element
class Document
class HTMLImageElement
class Image
class ImageBitmap
class HTMLVideoElement
class Video
class HTMLCanvasElement
class Canvas

Image, HTMLImageElement, ImageBitmap

Image has support for loading callbacks, however the loaded uri must be passed to the src already.

const image = new Image();
image.src = '';
image.onload = () => {
  const { src, width, height } = image;
};
image.addEventListener('loading', () => {});
image.addEventListener('error', () => {});

Document

const element = document.createElement('div');
const fakeContext = element.getContext('');

Element

All sizes return the window size:

element.clientWidth;
element.clientHeight;
element.innerWidth;
element.innerHeight;
element.offsetWidth;
element.offsetHeight;

Empty attributes that prevent libraries from crashing

element.tagName;
element.addEventListener;
element.removeEventListener;
element.setAttributeNS;
element.createElementNS;

Node

node.ownerDocument;
node.className;
node.appendChild;
node.insertBefore;
node.removeChild;
node.setAttributeNS;
node.getBoundingClientRect;

External Libraries

Some external node.js polyfills are added as well.

global.TextEncoder
global.TextDecoder
window.DOMParser
console.time(label);
console.timeEnd(label);
console.count(label);

Debug flags

For debugging base64 image transformations toggle:

global.__debug_browser_polyfill_image = true;

By default global.__debug_browser_polyfill_image is false.

Bug

In V26 of Expo, MetroBundler has problems transforming es2015 libs. We replaced EventEmitter -> fbemitter

gl-matrix still has a problem so we have a postinstall script that removes all the .babelrc files. This is a 0.0.0-alpha.10 and greater feature.

~@EvanBacon

About

Browser polyfill for making React Native compatible with web libs like pixi.js, three.js, phaser.js

License:MIT License


Languages

Language:JavaScript 100.0%