@vonage/vvd-fonts - npm Package Compare versions

Comparing version 0.15.1 to 0.15.2

CHANGELOG.md

@@ -0,1 +1,10 @@
+## [0.15.2](https://github.com/vonage/vivid/compare/v0.15.1...v0.15.2) (2020-11-15)
+
+
+### Bug Fixes
+
+* iss-431/viv-267 fix fonts init ([#437](https://github.com/vonage/vivid/issues/437)) ([0953b93](https://github.com/vonage/vivid/commit/0953b937a91eb9ba80d5315f32807780c052d072)), closes [#431](https://github.com/vonage/vivid/issues/431) [#431](https://github.com/vonage/vivid/issues/431) [#431](https://github.com/vonage/vivid/issues/431) [#430](https://github.com/vonage/vivid/issues/430) [#431](https://github.com/vonage/vivid/issues/431) [#431](https://github.com/vonage/vivid/issues/431) [#431](https://github.com/vonage/vivid/issues/431) [#431](https://github.com/vonage/vivid/issues/431)
+
+
+
 ## [0.15.1](https://github.com/vonage/vivid/compare/v0.15.0...v0.15.1) (2020-11-09)
@@ -2,0 +11,0 @@

package.json

 {
 	"name": "@vonage/vvd-fonts",
-	"version": "0.15.1",
+	"version": "0.15.2",
 	"description": "Vivid fonts initialisation service",
@@ -30,7 +30,7 @@ "homepage": "https://github.com/Vonage/vivid/tree/master/common/fonts",
 	"devDependencies": {
-		"@vonage/vvd-foundation": "^0.15.1",
+		"@vonage/vvd-foundation": "^0.15.2",
 		"fs-extra": "^9.0.1",
 		"lit-element": "^2.4.0"
 	},
-	"gitHead": "dbdd8832c267aa9da9dcb92f8a951aad1a39c2d8"
+	"gitHead": "368ea4a3c7a7af8f392ef075a65afd332a76a468"
 }

vvd-fonts.js

 export default Object.freeze({
     init: init,
 });
-const FONTS_BASE_URL_TOKEN = 'FONTS_BASE_URL', CDN_BASE_URL = '//dpnf5z0hinc7q.cloudfront.net/fonts/v1';
+const READY_PROMISE_TIMEOUT = 12000, FONTS_BASE_URL_TOKEN = 'FONTS_BASE_URL', CDN_BASE_URL = '//dpnf5z0hinc7q.cloudfront.net/fonts/v1';
 let INIT_PROMISE = null;
@@ -11,4 +11,3 @@ async function init() {
             // const st = performance.now();
-            const testElement = setupInitTestElement();
-            const initialWidth = testElement.offsetWidth;
+            const testElements = setupInitTestElements();
             import('./vvd-fonts.css.js')
@@ -21,3 +20,3 @@ .then((cssDefs) => {
                 document.head.appendChild(ds);
-                return ensureInit(testElement, initialWidth);
+                return ensureInit(testElements);
             })
@@ -27,3 +26,3 @@ .then(resolve)
                 .finally(() => {
-                cleanInitTestElement(testElement);
+                cleanInitTestElements(testElements);
                 // console.info(
@@ -37,18 +36,30 @@ // 	`Vivid Fonts initialization took ${Math.floor(performance.now() - st)}ms`
 }
-function setupInitTestElement() {
-    const result = document.createElement('span');
-    result.textContent = 'wwwiii';
-    result.style.cssText =
-        'position:absolute;top:-1000px;font-family:var(--vvd-font-family-spezia),monospace;visibility:hidden';
-    document.body.appendChild(result);
+function setupInitTestElements() {
+    const result = ['var(--vvd-font-family-spezia)', 'initial'].map((ff) => {
+        const e = document.createElement('span');
+        e.textContent = 'testing text to measure font appliance';
+        e.style.cssText = `position:absolute;top:-999px;font-family:${ff}`;
+        return e;
+    });
+    if (document.body) {
+        result.forEach((e) => document.body.appendChild(e));
+    }
+    else {
+        document.addEventListener('DOMContentLoaded', () => result.forEach((e) => document.body.appendChild(e)), { once: true });
+    }
     return result;
 }
-async function ensureInit(testElement, initialWidth) {
-    return new Promise((resolve) => {
+async function ensureInit(testElements) {
+    return new Promise((resolve, reject) => {
+        const pollStart = Date.now();
+        let pollDuration;
         function innerTest() {
-            if (testElement.offsetWidth === initialWidth) {
-                setTimeout(innerTest, 25);
+            if (testElements[0].offsetWidth !== testElements[1].offsetWidth) {
+                resolve({});
             }
+            else if ((pollDuration = Date.now() - pollStart) > READY_PROMISE_TIMEOUT) {
+                reject(new Error(`fonts init timed out after ${pollDuration}ms`));
+            }
             else {
-                resolve({});
+                setTimeout(innerTest, 25);
             }
@@ -59,18 +70,5 @@ }
 }
-function cleanInitTestElement(testElement) {
-    testElement.remove();
+function cleanInitTestElements(testElements) {
+    testElements.forEach((e) => e.remove());
 }
-// !TODO when moving to cdn consider using the following
-// <link rel="preconnect"
-//       href="https://fonts.gstatic.com"
-//       crossorigin />
-// Then preloading the fonts and setting it to use display: swap:
-// <link rel="preload"
-//       as="style"
-//       href="$CSS&display=swap" />
-// ($CSS is the URL that Google gives you after you’ve selected which font you want).
-// And finally we need to use a rather clever trick with the stylesheet:
-// <link rel="stylesheet"
-//       href="$CSS&display=swap"
-//       media="print" onload="this.media='all'" />
 //# sourceMappingURL=vvd-fonts.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26976

increased by4.13%

Worsened metrics

Lines of code

119

decreased by-1.65%

No dependency changes