Merge pull request #3 from easrng/main

optimize svg loading, run tsc in lint to check types, don't include extra copies of the fonts in the assets folder
valadaptive · Jun 1, 2024 · 8a1b559 · 8a1b559
2 parents 8342b1e + 802948a
commit 8a1b559
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "main": "index.js",
   "scripts": {
     "test": "jest test/*",
-    "lint": "eslint \"./src\" \"./test\" --ext .js,.ts",
+    "lint": "tsc && eslint \"./src\" \"./test\" --ext .js,.ts",
     "build": "rollup -c rollup.config.js",
     "watch": "rollup --watch -c rollup.config.js",
     "dev": "rollup --watch -c rollup.config.js & sirv ./ --port 8000 -D"

diff --git a/rollup.config.js b/rollup.config.js
@@ -14,7 +14,7 @@ export default {
         typescript({noEmitOnError: !process.env.ROLLUP_WATCH}),
         copy({
             targets: [
-                { src: 'src/assets/**/*', dest: 'dist/assets' }
+                { src: 'src/assets/*', dest: 'dist/assets' }
             ]
         })
     ]

diff --git a/src/html/loading-screen.ts b/src/html/loading-screen.ts
@@ -43,13 +43,14 @@ const loadingScreenTemplate = h('template',
             position: absolute;
             top: 0;
             left: 0;
-            right: 100%;
+            right: 0;
             bottom: 0;
             background-color: rgba(22, 117, 206, 1);
+            transform: translateX(-100%);
         }
 
         #loading-bar-progress.active {
-            /* transition: right 0.05s linear; */
+            /* transition: transform 0.05s linear; */
         }
 
         #error-message {
@@ -140,7 +141,7 @@ export class LoadingScreenElement extends HTMLElement {
             const progress = this.totalAssets === 0 ?
                 0 :
                 this.loadedAssets / this.totalAssets;
-            loadingBarProgress.style.right = `${(1 - progress) * 100}%`;
+            loadingBarProgress.style.transform = `translateX(-${(1 - progress) * 100}%)`;
         }
     }
 

diff --git a/src/load-svg.ts b/src/load-svg.ts
@@ -1,5 +1,4 @@
 import Rectangle from './rectangle.js';
-import toBase64 from './util/to-base64.js';
 
 const fonts = {
     'Sans Serif': './assets/fonts/NotoSans-Medium.woff2',
@@ -23,20 +22,27 @@ const loadedFonts: Record<FontName, Promise<string> | null> = {
     'Scratch': null,
 };
 
+const isFont = (fontName: string): fontName is FontName => Object.prototype.hasOwnProperty.call(loadedFonts, fontName);
+
 // Load fonts for SVG costumes on-demand.
 const loadFonts = async(fontNames: Iterable<string>): Promise<Record<FontName, string>> => {
     for (const name of fontNames) {
-        if (!Object.prototype.hasOwnProperty.call(loadedFonts, name)) {
+        if (!isFont(name)) {
             continue;
         }
-        if (loadedFonts[name as FontName] === null) {
-            loadedFonts[name as FontName] = fetch(import.meta.resolve(fonts[name as FontName]))
+        if (loadedFonts[name] === null) {
+            loadedFonts[name] = fetch(import.meta.resolve(fonts[name]))
                 .then(response => response.blob())
-                .then(blob => blob.arrayBuffer())
-                .then(buffer => {
-                    const base64 = toBase64(new Uint8Array(buffer));
-                    return `data:font/woff2;base64,${base64}`;
-                });
+                .then(blob => new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        resolve(reader.result as string);
+                    };
+                    reader.onerror = () => {
+                        reject(reader.error);
+                    };
+                    reader.readAsDataURL(blob);
+                }));
         }
     }
 
@@ -91,20 +97,24 @@ const loadSVG = async(src: Blob): Promise<{url: string; viewBox: Rectangle}> =>
         if (foundFonts.size > 0) {
             const fontURLs = await loadFonts(foundFonts.values());
 
+            const css = [];
+
             // Inject fonts as data URLs into the SVG
             for (const fontName of foundFonts) {
-                if (!Object.prototype.hasOwnProperty.call(fonts, fontName)) {
+                if (!isFont(fontName)) {
                     continue;
                 }
-                const defs = svgDOM.createElementNS('http://www.w3.org/2000/svg', 'defs');
-                const style = svgDOM.createElementNS('http://www.w3.org/2000/svg', 'style');
-                style.setAttribute('type', 'text/css');
-                defs.appendChild(style);
-                const fontURL = fontURLs[fontName as FontName];
-                style.append(`@font-face { font-family: '${fontName}'; src: url(${JSON.stringify(fontURL)}); }`);
-                svgTag.insertBefore(defs, svgTag.firstChild);
+                const fontURL = fontURLs[fontName];
+                css.push("@font-face{font-family:'", fontName, "';src:url('", fontURL, "')}");
             }
 
+            const defs = svgDOM.createElementNS('http://www.w3.org/2000/svg', 'defs');
+            const style = svgDOM.createElementNS('http://www.w3.org/2000/svg', 'style');
+            style.setAttribute('type', 'text/css');
+            defs.appendChild(style);
+            style.append(...css);
+            svgTag.insertBefore(defs, svgTag.firstChild);
+
             src = new Blob([new XMLSerializer().serializeToString(svgDOM)], {type: 'image/svg+xml'});
         }
     }

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,10 +7,11 @@
         "sourceMap": true,
         "strictNullChecks": true,
         "strict": true,
+        "skipLibCheck": true,
         "module": "Node16",
         "target": "ES2022",
         "noErrorTruncation": true,
-        "outDir": "dist",
+        "noEmit": true,
         "lib": ["ESNext", "dom"]
     },
     "include": ["src/**/*", "test/**/*", "./*.cjs"]