From a61f761faa96b550ecd321a15cd3ed0d92b75e55 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Wed, 18 May 2022 14:51:31 -0600 Subject: [PATCH 1/2] Add a conditional auto-loader --- source/conditionally.ts | 35 +++++++++++++++++++++++++++++++++++ source/index.ts | 1 + 2 files changed, 36 insertions(+) create mode 100644 source/conditionally.ts diff --git a/source/conditionally.ts b/source/conditionally.ts new file mode 100644 index 0000000..6c49451 --- /dev/null +++ b/source/conditionally.ts @@ -0,0 +1,35 @@ +declare const webpHero; + +/** + * Check if WebP is supported by the current browser. + */ + export function isWebpSupported(callback) { + var img = new Image(); + img.onload = function () { + var result = (img.width > 0) && (img.height > 0); + callback(result); + }; + img.onerror = function () { + callback(false) ; + }; + img.src = "data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA"; // Lossy WebP image. +} + +(function() { + isWebpSupported(function(support) { + if (! support) { + var js = document.createElement('script'); + js.src = 'https://unpkg.com/webp-hero@0.0.2/dist-cjs/polyfills.js'; + document.body.appendChild(js) + js.addEventListener('load', function() { + var js2 = document.createElement('script'); + js2.src = 'https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js'; + document.body.appendChild(js2); + js2.addEventListener('load', function() { + var webpMachine = new webpHero.WebpMachine(); + webpMachine.polyfillDocument(); + }); + }); + } + }); +})(); diff --git a/source/index.ts b/source/index.ts index 25bff3f..a5985a7 100644 --- a/source/index.ts +++ b/source/index.ts @@ -2,6 +2,7 @@ * @file Automatically generated by barrelsby. */ +export * from "./conditionally"; export * from "./convert-binary-data"; export * from "./detect-canvas-reading-support"; export * from "./detect-webp-support"; From b8e32107a8371a121caa0236af5879df1d95e983 Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Fri, 20 May 2022 13:32:22 -0600 Subject: [PATCH 2/2] Add loadScript; add load-webp-hero-conditionally.js to build --- package.json | 5 +++-- source/conditionally.ts | 49 ++++++++++++++++------------------------- source/index.ts | 2 +- source/load-script.ts | 10 +++++++++ 4 files changed, 33 insertions(+), 33 deletions(-) create mode 100644 source/load-script.ts diff --git a/package.json b/package.json index b83136e..a012ef3 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,14 @@ ], "scripts": { "prepare": "run-s build test", - "build": "run-s clean barrel compile && run-p bundle polyfills", + "build": "run-s clean barrel compile && run-p bundle polyfills conditionally", "clean": "rimraf dist dist-cjs && mkdirp dist dist-cjs", - "barrel": "barrelsby --delete --directory source --exclude 'bundle.ts$' --exclude 'utils\\/.+$'", + "barrel": "barrelsby --delete --directory source --exclude 'bundle.ts$' --exclude 'utils\\/.+$' --exclude 'conditionally.ts$'", "compile": "run-p compile-esm compile-cjs", "compile-esm": "tsc", "compile-cjs": "tsc --outDir dist-cjs --target es5 --module commonjs && replace 'libwebp\\/dist\\/webp\\.js' 'libwebp/dist/webp.cjs.js' dist-cjs/webp-machine.js", "bundle": "browserify dist-cjs/webp-hero.bundle.js -p tinyify -o dist-cjs/webp-hero.bundle.js", + "conditionally": "browserify dist-cjs/conditionally.js -p tinyify -o dist-cjs/load-webp-hero-conditionally.js", "polyfills": "concat-cli -f node_modules/es6-promise/dist/es6-promise.auto.min.js -f node_modules/mdn-polyfills/Array.from.js -o dist-cjs/polyfills.js", "test": "exit 0", "start": "http-server -p 5000" diff --git a/source/conditionally.ts b/source/conditionally.ts index 6c49451..13df8f4 100644 --- a/source/conditionally.ts +++ b/source/conditionally.ts @@ -1,35 +1,24 @@ +import {detectWebpSupport} from "./detect-webp-support"; +import {loadScript} from "./load-script"; + declare const webpHero; +const _webpPolyfillUrl = window["webpPolyfillUrl"] || 'https://unpkg.com/webp-hero@0.0.2/dist-cjs/polyfills.js'; +const _webpBundleUrl = window["webpBundleUrl"] || 'https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js'; + /** - * Check if WebP is supported by the current browser. + * This code executes immediately, detects WebP support and loads the + * webp-hero polyfill and bundle and as needed. + * + * Loads webp-hero from the unpkg CDN by default, specify alternate source URLs + * by setting window["webpPolyfillUrl"] and window["webpBundleUrl"] before loading. */ - export function isWebpSupported(callback) { - var img = new Image(); - img.onload = function () { - var result = (img.width > 0) && (img.height > 0); - callback(result); - }; - img.onerror = function () { - callback(false) ; - }; - img.src = "data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA"; // Lossy WebP image. -} - -(function() { - isWebpSupported(function(support) { - if (! support) { - var js = document.createElement('script'); - js.src = 'https://unpkg.com/webp-hero@0.0.2/dist-cjs/polyfills.js'; - document.body.appendChild(js) - js.addEventListener('load', function() { - var js2 = document.createElement('script'); - js2.src = 'https://unpkg.com/webp-hero@0.0.2/dist-cjs/webp-hero.bundle.js'; - document.body.appendChild(js2); - js2.addEventListener('load', function() { - var webpMachine = new webpHero.WebpMachine(); - webpMachine.polyfillDocument(); - }); - }); - } - }); +(async function() { + const webpSupported = await detectWebpSupport(); + if (! webpSupported) { + await loadScript(_webpPolyfillUrl); + await loadScript(_webpBundleUrl); + var webpMachine = new webpHero.WebpMachine(); + webpMachine.polyfillDocument(); + } })(); diff --git a/source/index.ts b/source/index.ts index a5985a7..18d0edc 100644 --- a/source/index.ts +++ b/source/index.ts @@ -2,10 +2,10 @@ * @file Automatically generated by barrelsby. */ -export * from "./conditionally"; export * from "./convert-binary-data"; export * from "./detect-canvas-reading-support"; export * from "./detect-webp-support"; export * from "./interfaces"; export * from "./load-binary-data"; +export * from "./load-script"; export * from "./webp-machine"; diff --git a/source/load-script.ts b/source/load-script.ts new file mode 100644 index 0000000..008b04a --- /dev/null +++ b/source/load-script.ts @@ -0,0 +1,10 @@ +export async function loadScript(url: string):Promise { + var js = document.createElement('script'); + js.src = url; + document.body.appendChild(js) + return new Promise(resolve => { + js.addEventListener('load', function(result) { + resolve(result); + } ); + }) +}