Browse Source

include polyfills into alpine ie11 script

Keyur Shah 5 years ago
parent
commit
92b11f4a7d

+ 2 - 7
README.md

@@ -29,17 +29,12 @@ Include it in your script.
 import 'alpinejs'
 ```
 
-For IE11, a different Alpine script is used and polyfills need to be provided. Please add the following scripts to the end of your `<head>`> section.
+**For IE11** Please use this script instead. Add the following script to the end of your `<head>`> section.
 ```html
-<script src="https://polyfill.io/v3/polyfill.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%2CString.prototype.startsWith%2CArray.prototype.find%2CArray.prototype.findIndex%2CElement.prototype.closest%2CElement.prototype.remove%2CCustomEvent%2CElement.prototype.classList%2CHTMLTemplateElement"></script>
-<script src="https://unpkg.com/shim-selected-options"></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.9.8/dist/alpine_ie11.js" defer></script>
+<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.10.1/dist/alpine_ie11.js" defer></script>
 ```
 
 
-
 ## Use
 
 *Dropdown/Modal*

File diff suppressed because it is too large
+ 0 - 0
dist/alpine.js.map


File diff suppressed because it is too large
+ 0 - 0
dist/alpine_ie11.js


File diff suppressed because it is too large
+ 0 - 0
dist/alpine_ie11.js.map


File diff suppressed because it is too large
+ 0 - 0
dist/alpine_ie11_polyfills.js


File diff suppressed because it is too large
+ 0 - 0
dist/alpine_ie11_polyfills.js.map


+ 1 - 8
examples/index_ie11.html

@@ -18,14 +18,7 @@
             .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
     </style>
 
-    <script src="https://polyfill.io/v3/polyfill.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%2CString.prototype.startsWith%2CArray.prototype.find%2CArray.prototype.findIndex%2CElement.prototype.closest%2CElement.prototype.remove%2CCustomEvent%2CElement.prototype.classList%2CHTMLTemplateElement"></script>
-    <script src="https://unpkg.com/shim-selected-options"></script>
-    <script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
-
-    <script src="/dist/alpine-ie11.js" defer></script>
-    <!--
-    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v0.4.0/dist/project-x.js" defer></script>
-    -->
+    <script src="/dist/alpine_ie11.js" defer></script>
 </head>
 
 <body>

+ 0 - 136
examples/index_ie11_event.html

@@ -1,136 +0,0 @@
-<!doctype html>
-<html>
-
-<head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge;" />
-
-    <style>
-        .hidden {
-            display: none;
-        }
-
-        [x-cloak] {
-            display: none;
-        }
-
-        .opacity-0 {
-            opacity: 0;
-        }
-
-        .opacity-100 {
-            opacity: 1;
-        }
-
-        .transition-slow {
-            transition-duration: 300ms;
-        }
-
-        .transition-medium {
-            transition-duration: 200ms;
-        }
-
-        .transition-faster {
-            transition-duration: 100ms;
-        }
-
-        .scale-90 {
-            transform: scale(0.9);
-        }
-
-        .scale-100 {
-            transform: scale(1);
-        }
-
-        .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
-        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%2CString.prototype.startsWith%2CArray.prototype.find%2CArray.prototype.findIndex%2CElement.prototype.closest%2CElement.prototype.remove">
-    </script>
-
-    <script>
-    // source: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
-;(function() {
-  if (typeof window.CustomEvent === "function") return false
-
-  function CustomEvent(event, params) {
-    params = params || { bubbles: false, cancelable: false, detail: undefined }
-    var evt = document.createEvent("CustomEvent")
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
-    return evt
-  }
-
-  CustomEvent.prototype = window.Event.prototype
-
-  window.CustomEvent = CustomEvent
-})()
-    
-    
-    </script>
-
-    <script src="https://cdn.jsdelivr.net/npm/proxy-polyfill@0.3.0/proxy.min.js"></script>
-
-    <script src="/dist/alpine-ie11.js"></script>
-    <!--
-    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v0.4.0/dist/project-x.js" defer></script>
-    -->
-</head>
-
-<body>
-
-
-
-    <h2>Dispatch 1</h2>
-
-
-    <div x-data="{ foo: 'bar' }" x-on:custom-event="foo = $event.detail.newValue">
-        <span x-text="foo"></span>
-
-        <button x-on:click="$dispatch('custom-event', {newValue: 'bazil'})">Turn 'bar' to 'baz'</button>
-    </div>
-
-    <h2>Dispatch 2</h2>
-
-    <div x-data="{}" x-on:custom-event="alert('hello')">
-        <button x-on:click="$dispatch('custom-event')">Send Alert</button>
-    </div>
-
-
-    <h2>Dispatch 3 - Listen Window Level</h2>
-
-    <div x-data="{foo: 'bar'}" x-on:custom-event-bar.window="foo = $event.detail.newValue">
-            <span x-text="foo"></span>
-    </div>
-
-    <div x-data="{}" @custom-event-bar="console.log($event.detail.newValue)">
-        <div @custom-event-bar="console.log($event.detail.foo)">
-            <button
-                @click="$dispatch('custom-event-bar', { foo: 'bax1', newValue: 'bax2' })">
-                <!-- When clicked, will console.log "bar" -->
-                Click
-            </button>
-        </div>
-    </div>
-
-    
-
-    <h2>Binding</h2>
-
-    <div x-data="{ foo: 'bar'}">
-        Text:
-        <span x-text="JSON.stringify(foo)"></span>
-        <input type="text" x-model="foo">
-    </div>
-
-
-
-</body>
-
-</html>

File diff suppressed because it is too large
+ 951 - 93
package-lock.json


+ 43 - 33
package.json

@@ -1,35 +1,45 @@
 {
-  "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.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",
-    "concurrently": "^5.1.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-strip-code": "^0.2.7",
-    "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": {}
 }

+ 45 - 41
rollup_ie11.config.js

@@ -1,49 +1,53 @@
-
 import babel from 'rollup-plugin-babel';
 import filesize from 'rollup-plugin-filesize';
-import { terser } from "rollup-plugin-terser";
+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/index.js',
-        output: {
-            name: 'Alpine',
-            file: 'dist/alpine-ie11.js',
-            format: 'umd',
-            sourcemap: true,
-        },
-        plugins: [
-            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
-                            }
+    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
                         }
-                    ]
+                    }
                 ]
-            })
-        ]
-    }
-]
+            ]
+        })
+    ]
+}]

+ 9 - 0
src/polyfills.js

@@ -0,0 +1,9 @@
+// In use in the legacy build for IE11
+
+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"

Some files were not shown because too many files changed in this diff