Domů Procházet Nápověda
Registrovat se Přihlásit se
oleg
/
alpine
zrcadlo https://github.com/alpinejs/alpine.git
1
0
Rozštěpit 0
Soubory Úkoly 0 Wiki
Procházet zdrojové kódy

Merge pull request #164 from keyurshah/master-ie11

IE11 Modifications
Caleb Porzio před 5 roky
rodič
224aeceb8e 176d5d6c69
revize
1eb72e2ecc
13 změnil soubory, kde provedl 1091 přidání a 131 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 2 4
      README.md
  2. 0 0
      dist/alpine-ie11.js
  3. 0 0
      dist/alpine-ie11.js.map
  4. 0 0
      dist/alpine.js
  5. 0 0
      dist/alpine.js.map
  6. 4 0
      examples/index.html
  7. 952 94
      package-lock.json
  8. 43 31
      package.json
  9. 50 0
      rollup-ie11.config.js
  10. 5 0
      rollup.config.js
  11. 25 1
      src/component.js
  12. 2 1
      src/directives/model.js
  13. 8 0
      src/polyfills.js

+ 2 - 4
README.md
Zobrazit soubor 

@@ -29,11 +29,9 @@ Include it in your script.
 
 import 'alpinejs'
 
 ```
 
 
-For IE11, polyfills will need to be provided. Please load the following scripts before the Alpine script above.
 
+**For IE11 support** Use the following script instead.
 
 ```html
 
-<script src="https://polyfill.io/v3/polyfill.min.js?features=MutationObserver%2CArray.from%2CArray.prototype.forEach%2CMap%2CSet%2CArray.prototype.includes%2CString.prototype.includes%2CPromise%2CNodeList.prototype.forEach%2CObject.values%2CReflect%2CReflect.set"></script>
 
-
 
-<script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
 
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine-ie11.js" defer></script>
 
 ```
 
 
 ## Use

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
dist/alpine-ie11.js


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
dist/alpine-ie11.js.map


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
dist/alpine.js


Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 0 - 0
dist/alpine.js.map


+ 4 - 0
examples/index.html
Zobrazit soubor 

@@ -13,6 +13,10 @@
 
             .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
 
             .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
 
         </style>
 
+
 
+        <!-- Script for testing IE11 support: -->
 
+        <!-- <script src="/dist/alpine_ie11.js" defer></script> -->
 
+
 
         <script src="/dist/alpine.js" defer></script>
 
     </head>
 
     <body>

Rozdílová data souboru nebyla zobrazena, protože soubor je příliš velký
+ 952 - 94
package-lock.json


+ 43 - 31
package.json
Zobrazit soubor 

@@ -1,33 +1,45 @@
 
 {
 
-  "main": "dist/alpine.js",
 
-  "name": "alpinejs",
 
-  "version": "1.11.1",
 
-  "repository": {
 
-    "type": "git",
 
-    "url": "git://github.com/alpinejs/alpine.git"
 
-  },
 
-  "scripts": {
 
-    "watch": "npx rollup -c -w",
 
-    "build": "npx rollup -c",
 
-    "test": "npx jest",
 
-    "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
 
-    "postpublish": "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags"
 
-  },
 
-  "author": "Caleb Porzio",
 
-  "license": "MIT",
 
-  "devDependencies": {
 
-    "@babel/core": "^7.7.7",
 
-    "@babel/preset-env": "^7.7.7",
 
-    "@testing-library/dom": "^6.11.0",
 
-    "@testing-library/jest-dom": "^4.2.4",
 
-    "babel-jest": "^24.8.0",
 
-    "jest": "^24.8.0",
 
-    "jsdom-simulant": "^1.1.2",
 
-    "rollup": "^1.27.14",
 
-    "rollup-plugin-babel": "^4.3.3",
 
-    "rollup-plugin-filesize": "^6.2.1",
 
-    "rollup-plugin-node-resolve": "^5.2.0",
 
-    "rollup-plugin-terser": "^5.1.3"
 
-  },
 
-  "dependencies": {}
 
+    "main": "dist/alpine.js",
 
+    "name": "alpinejs",
 
+    "version": "1.10.1",
 
+    "repository": {
 
+        "type": "git",
 
+        "url": "git://github.com/alpinejs/alpine.git"
 
+    },
 
+    "scripts": {
 
+        "watch": "concurrently \"rollup -c -w\" \"npx rollup -c rollup-ie11.config.js -w\"",
 
+        "build": "concurrently \"rollup -c\" \"npx rollup -c rollup-ie11.config.js\"",
 
+        "test": "npx jest",
 
+        "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
 
+        "postpublish": "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags"
 
+    },
 
+    "author": "Caleb Porzio",
 
+    "license": "MIT",
 
+    "devDependencies": {
 
+        "@babel/core": "^7.8.4",
 
+        "@babel/preset-env": "^7.8.4",
 
+        "@rollup/plugin-commonjs": "^11.0.2",
 
+        "@rollup/plugin-multi-entry": "^3.0.0",
 
+        "@testing-library/dom": "^6.12.2",
 
+        "@testing-library/jest-dom": "^4.2.4",
 
+        "@webcomponents/template": "^1.4.1",
 
+        "babel-jest": "^24.8.0",
 
+        "classlist-polyfill": "^1.2.0",
 
+        "concurrently": "^5.1.0",
 
+        "core-js": "^3.6.4",
 
+        "custom-event-polyfill": "^1.0.7",
 
+        "element-closest": "^3.0.2",
 
+        "element-remove": "^1.0.4",
 
+        "jest": "^24.8.0",
 
+        "jsdom-simulant": "^1.1.2",
 
+        "proxy-polyfill": "^0.3.0",
 
+        "rollup": "^1.31.0",
 
+        "rollup-plugin-babel": "^4.3.3",
 
+        "rollup-plugin-filesize": "^6.2.1",
 
+        "rollup-plugin-node-resolve": "^5.2.0",
 
+        "rollup-plugin-strip-code": "^0.2.7",
 
+        "rollup-plugin-terser": "^5.2.0",
 
+        "shim-selected-options": "^1.0.1"
 
+    },
 
+    "dependencies": {}
 
 }

+ 50 - 0
rollup-ie11.config.js
Zobrazit soubor 

@@ -0,0 +1,50 @@
 
+import babel from 'rollup-plugin-babel';
 
+import filesize from 'rollup-plugin-filesize';
 
+import { terser } from "rollup-plugin-terser";
 
+import resolve from "rollup-plugin-node-resolve"
 
+import commonjs from '@rollup/plugin-commonjs'
 
+import multi from '@rollup/plugin-multi-entry';
 
+
 
+export default {
 
+    input: ['src/polyfills.js', 'src/index.js'],
 
+    output: {
 
+        name: 'Alpine',
 
+        file: 'dist/alpine-ie11.js',
 
+        format: 'umd',
 
+        sourcemap: true,
 
+    },
 
+    plugins: [
 
+        multi(),
 
+        commonjs(),
 
+        resolve(),
 
+        filesize(),
 
+        terser({
 
+            mangle: false,
 
+            compress: {
 
+                drop_debugger: false,
 
+            }
 
+        }),
 
+        babel({
 
+            babelrc: false,
 
+            exclude: 'node_modules/**',
 
+            presets: [
 
+                [
 
+                    "@babel/preset-env",
 
+                    {
 
+                        targets: {
 
+                            browsers: "> 0.5%, ie >= 11"
 
+                        },
 
+                        modules: false,
 
+                        spec: true,
 
+                        useBuiltIns: "usage",
 
+                        forceAllTransforms: true,
 
+                        corejs: {
 
+                            version: 3,
 
+                            proposals: false
 
+                        }
 
+                    }
 
+                ]
 
+            ]
 
+        })
 
+    ]
 
+}

+ 5 - 0
rollup.config.js
Zobrazit soubor 

@@ -2,6 +2,7 @@ import babel from 'rollup-plugin-babel';
 
 import filesize from 'rollup-plugin-filesize';
 
 import { terser } from "rollup-plugin-terser";
 
 import resolve from "rollup-plugin-node-resolve"
 
+import stripCode from 'rollup-plugin-strip-code';
 
 
 export default {
 
     input: 'src/index.js',
 
@@ -22,6 +23,10 @@ export default {
 
         }),
 
         babel({
 
             exclude: 'node_modules/**'
 
+        }),
 
+        stripCode({
 
+            start_comment: 'IE11-ONLY:START',
 
+            end_comment: 'IE11-ONLY:END'
 
         })
 
     ]
 
 }

+ 25 - 1
src/component.js
Zobrazit soubor 

@@ -18,6 +18,14 @@ export default class Component {
 
 
         const unobservedData = saferEval(dataExpression, {})
 
 
+        /* IE11-ONLY:START */
 
+            // For IE11, add our magic properties to the original data for access.
 
+            // The Proxy pollyfill does not allow properties to be added after creation.
 
+            unobservedData.$el = null
 
+            unobservedData.$refs = null
 
+            unobservedData.$nextTick = null
 
+        /* IE11-ONLY:END */
 
+
 
         // Construct a Proxy-based observable. This will be used to handle reactivity.
 
         this.$data = this.wrapDataInObservable(unobservedData)
 
 
@@ -336,11 +344,27 @@ export default class Component {
 
     getRefsProxy() {
 
         var self = this
 
 
+        var refObj = {}
 
+
 
+        /* IE11-ONLY:START */
 
+            // Add any properties up-front that might be necessary for the Proxy pollyfill.
 
+            refObj.$isRefsProxy = false;
 
+            refObj.$isAlpineProxy = false;
 
+
 
+            // If we are in IE, since the polyfill needs all properties to be defined before building the proxy,
 
+            // we just loop on the element, look for any x-ref and create a tmp property on a fake object.
 
+            this.walkAndSkipNestedComponents(self.$el, el => {
 
+                if (el.hasAttribute('x-ref')) {
 
+                    refObj[el.getAttribute('x-ref')] = true
 
+                }
 
+            })
 
+        /* IE11-ONLY:END */
 
+
 
         // One of the goals of this is to not hold elements in memory, but rather re-evaluate
 
         // the DOM when the system needs something from it. This way, the framework is flexible and
 
         // friendly to outside DOM changes from libraries like Vue/Livewire.
 
         // For this reason, I'm using an "on-demand" proxy to fake a "$refs" object.
 
-        return new Proxy({}, {
 
+        return new Proxy(refObj, {
 
             get(object, property) {
 
                 if (property === '$isAlpineProxy') return true

+ 2 - 1
src/directives/model.js
Zobrazit soubor 

@@ -27,7 +27,8 @@ function generateModelAssignmentFunction(el, modifiers, expression) {
 
     }
 
 
     return (event, currentValue) => {
 
-        if (event instanceof CustomEvent) {
 
+        // Check for event.detail due to an issue where IE11 handles other events as a CustomEvent.
 
+        if (event instanceof CustomEvent && event.detail) {
 
             return event.detail
 
         } else if (el.type === 'checkbox') {
 
             // If the data we are binding to is an array, toggle it's value inside the array.

+ 8 - 0
src/polyfills.js
Zobrazit soubor 

@@ -0,0 +1,8 @@
 
+// For the IE11 build.
 
+import "shim-selected-options"
 
+import "proxy-polyfill/proxy.min.js"
 
+import "element-closest/browser.js"
 
+import "element-remove"
 
+import "classlist-polyfill"
 
+import "@webcomponents/template"
 
+import "custom-event-polyfill"

Některé soubory nejsou zobrazeny, neboť je v těchto rozdílových datech změněno mnoho souborů