Light

ambit-tsai / es6-proxy-polyfill Goto Github PK

View Code? Open in Web Editor NEW

56.0 4.0 23.0 131 KB

ES6 Proxy polyfill, supports IE8+, Node.js, etc.

License: Apache License 2.0

JavaScript 95.18% HTML 4.82%

proxy ie8 polyfill

es6-proxy-polyfill's Introduction

简体中文 | English

ES6 Proxy Polyfill

This is a polyfill for ES6 Proxy, supports IE6+ , Node.js, etc.

So far, it supports more features than the proxy-polyfill of GoogleChrome.

The polyfill supports just a limited number of proxy 'trap':

get
set
apply
construct

The Proxy.revocable method is also supported, but only for calls to the above traps.

Installation

npm i -S es6-proxy-polyfill

Usage

Browser:

<!--[if lte IE 8]>
<script src="path/to/object-defineproperty-ie.js" type="text/javascript"></script>
<![endif]-->
<script src="path/to/es6-proxy-polyfill.js" type="text/javascript"></script>
<script type="text/javascript">
    var proxy = new Proxy({}, {});
</script>

Node.js:

const Proxy = require('es6-proxy-polyfill');

let proxy = new Proxy({}, {});

Notice

For non-array object, the properties you want to proxy must be known at creation time;
In IE8 or below, it depends on Object.defineProperties and Object.getOwnPropertyDescriptor provided by library "object-defineproperty-ie";
The support of traps:

	Object	Function	Array
>=IE9	get, set	get, set, apply, construct	get, set
<=IE8	get, set	apply, construct	-

Testing

Access test/browser/index.html with browser
Tested in IE6-8, IE11

Contact Us

WeChat: ambit_tsai
QQ Group: 663286147
E-mail: [email protected]

es6-proxy-polyfill's People

Stargazers

Watchers

es6-proxy-polyfill's Issues

proxy 下面属性支持吗

你好，下面属性支持吗

get
set
deleteProperty
has
ownKeys

ie11 _isVbObject未定义

在ie11中使用mobx6,可复现问题

This polyfill does not test Browser Support

My expectation was that the polyfill would only be used if there is no proxy support in the browser.
Unfortunately this is not the case and a simple test in a Vue.js application, which unfortunately also has to support IE 11, immediately led to a bug in Firefox 76.
By the way, it does not work in IE 11 either...

import 'es6-proxy-polyfill'

export default {
	name: 'App',
	components: {},
	data: function() {
		return {
			myprop: ''
		};
	},
	created() {
		const test = new Proxy({}, {
			set: (target, prop, value) => {
				console.log(target, prop, value)
				target[prop] = value
				return true
			}
		})
		test.name = 'Hans'
		console.log(test.name)
	}
}

Can it work with vue3 which used in lower version chrome <49

Hi, I build your product and try work with vue3 in lower version chrome <49

but, because vue3 has his own context , sometimes the webpack throw error like this.xxxx is not a function (this is undefined)
or vue3 can't trig deps to update dom

so, do we have some methods to work with with vue3

eg:
i used vue.global.js to test proxy-polyfill ,and use the demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 3 UMD Demo</title>
  <script src="./es6_proxy_polyfill_raw.js"></script>
</head>
<body>
<div id="app">

  <div>msg {{ message }}</div>
  <div>ldr {{ ldr }}</div>
  <div>num {{ mm }}</div>
  <div>
    <button @click="ppp">+1</button>
  </div>
</div>

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

<script>
  const { createApp } = Vue;

  const App = {
    data() {
      return {
        message: "Hello, Vue 3 UMD!",
        ldr: this.langx(),
        mm: 10
      };
    },
    methods: {
      langx: function() {
        console.log("langx");
        return "langx111";
      },
      ppp: function() {
        console.log("mmd click this-", this, this.mm);
        this.mm = this.mm + 1;
      }
    }
  };

  createApp(App).mount("#app");
</script>
</body>
</html>

数组出现TypeError

IE 11
"TypeError: Trap 'set' returned false for property 'length'

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.