@qooxdoo/framework 7.5.0 → 7.6.0

package/source/class/qx/tool/compiler/app/ManifestFont.js

@@ -0,0 +1,181 @@
+/* ************************************************************************
+
+   qooxdoo - the new era of web development
+
+   http://qooxdoo.org
+
+   Copyright:
+     2023 Zenesis Limited https://www.zenesis.com
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+   Authors:
+     * John Spackman (@johnspackman)
+
+************************************************************************ */
+
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * Represents a font as defined in the Manifest.json's
+ *
+ * @typedef Sources
+ * @param {String?} family the family name that is in the font files (defaults to the name of the font)
+ * @param {String[]?} paths the filenames of font files inside the resources dircetory
+ * @param {String[]?} urls the urls of font files in a CDN
+ *
+ */
+qx.Class.define("qx.tool.compiler.app.ManifestFont", {
+  extend: qx.core.Object,
+
+  construct(name) {
+    super();
+    this.setName(name);
+  },
+
+  properties: {
+    /** The name of the font - this is the key in Manifest.json provides.fonts */
+    name: {
+      check: "String"
+    },
+
+    /** Default size of the font */
+    defaultSize: {
+      init: null,
+      nullable: true,
+      check: "Integer"
+    },
+
+    /** Comparison string to be used */
+    comparisonString: {
+      init: null,
+      nullable: true,
+      check: "String"
+    },
+
+    /** CSS filenames or URLs to be loaded (indicating that font-face will be defined outside of Qooxdoo) */
+    css: {
+      init: null,
+      check: "Array",
+      nullable: true
+    },
+
+    /** Font faces that have to be defined, including the resource paths or urls */
+    fontFaces: {
+      init: null,
+      check: "Array",
+      nullable: true
+    },
+
+    /** Glyphs filename (relative to resources of the library that defines it) */
+    glyphs: {
+      init: null,
+      nullable: true,
+      check: "String"
+    },
+
+    /** Family names for the browser to search for */
+    family: {
+      init: null,
+      nullable: true,
+      check: "Array"
+    }
+  },
+
+  members: {
+    /** @type{Map<String,Object>} font data required by the Qooxdoo app at runtime */
+    __fontData: null,
+
+    /**
+     * Updates this from the data in the Manifest.json
+     *
+     * @param {Object} data the data from Manifest
+     * @param {qx.tool.compiler.app.Library} library the library
+     */
+    async updateFromManifest(data, library) {
+      let toSet = {};
+      [
+        "defaultSize",
+        "comparisonString",
+        "css",
+        "fontFaces",
+        "glyphs",
+        "family"
+      ].forEach(name => {
+        if (data.hasOwnProperty(name)) {
+          toSet[name] = data[name];
+        }
+      });
+      this.set(toSet);
+      if (data.glyphs !== undefined) {
+        let glyphsFilename = library.getResourceFilename(data.glyphs);
+        let glyphsData = await fs.promises.readFile(glyphsFilename, "utf8");
+        glyphsData = JSON.parse(glyphsData);
+        this.__fontData = {};
+        let name = this.getName();
+        let defaultSize = this.getDefaultSize();
+
+        for (let key in glyphsData) {
+          let glyph = glyphsData[key];
+          this.__fontData["@" + name + "/" + key] = [
+            // width
+            Math.ceil((defaultSize * glyph.advanceWidth) / glyph.advanceHeight),
+
+            // height
+            defaultSize,
+            glyph.codePoint
+          ];
+        }
+      }
+    },
+
+    /**
+     * Generates the font data used by the application; loads the data if not already loaded
+     *
+     * @returns {Map<String,Object>}
+     */
+    getApplicationFontData() {
+      return this.__fontData;
+    },
+
+    /**
+     * Return bootstrap code that is executed before the Application starts.
+     *
+     * @param {qx.tool.compiler.targets.Target} target the target
+     * @param {qx.tool.compiler.app.Application} application the application being built
+     * @param {Boolean} useLocalFonts whether to use local fonts or use CSS
+     * @return {String} code to include in the output
+     */
+    getBootstrapCode(target, application, useLocalFonts) {
+      let res = "";
+      let font = {
+        family: this.getFamily() || [this.getName()]
+      };
+
+      if (!useLocalFonts) {
+        if (this.getCss()) {
+          font.css = this.getCss();
+        }
+      } else {
+        font.fontFaces = this.getFontFaces();
+      }
+
+      if (this.getDefaultSize() !== null) {
+        font.defaultSize = this.getDefaultSize();
+      }
+      if (this.getComparisonString() !== null) {
+        font.comparisonString = this.getComparisonString();
+      }
+
+      return (res +=
+        "qx.$$fontBootstrap['" +
+        this.getName() +
+        "']=" +
+        JSON.stringify(font, null, 2) +
+        ";");
+    }
+  }
+});

package/source/class/qx/tool/compiler/app/WebFont.js

@@ -88,236 +88,166 @@ qx.Class.define("qx.tool.compiler.app.WebFont", {
      * Helper which triggers a local font analyze run.
      *
      * @param filename {String} Filename for the local font
-     * @return {Promise}
+     * @return {Map<String,String>} mapping of glyphs to codepoints
      */
-    _loadLocalFont(filename) {
-      return new Promise((resolve, reject) => {
-        let fontpath = path.join(
-          this.__library.getRootDir(),
-          path.join(this.__library.getResourcePath(), filename)
-        );
+    async _loadLocalFont(filename) {
+      let fontpath = path.join(
+        this.__library.getRootDir(),
+        path.join(this.__library.getResourcePath(), filename)
+      );
 
-        this.__processFontFile(fontpath, resolve, reject);
-      });
+      return await this.__processFontFile(fontpath);
     },
 
     /**
      * Helper which loads a remote font to analyze the result.
      *
      * @param url {String} URL for the font download
-     * @return {Promise}
+     * @return {Map<String,String>} mapping of glyphs to codepoints
      */
-    _loadRemoteFont(url) {
-      return new Promise(
-        function (resolve, reject) {
-          http
-            .get(
-              url,
-              function (res) {
-                let error;
-                const { statusCode } = res;
-                const contentType = res.headers["content-type"];
-
-                if (statusCode !== 200) {
-                  error = new Error(
-                    `Request Failed.\nStatus Code: ${statusCode}`
-                  );
-                } else if (
-                  !/^font\/(ttf|svg|eot|woff|woff2)$/.test(contentType)
-                ) {
-                  error = new Error(
-                    "Invalid content-type.\n" +
-                      `Expected font/ttf, font/svg, font/eot, font/woff or font/woff2 but received ${contentType}`
-                  );
-                }
-
-                if (error) {
-                  res.resume();
-                  reject(error);
-                  return;
-                }
-
-                tmp.tmpName(
-                  function _tempNameGenerated(err, tmpFilename) {
-                    if (err) {
-                      reject(err);
-                      return;
-                    }
-
-                    let outFile = fs.createWriteStream(tmpFilename);
-                    outFile.on(
-                      "close",
-                      function () {
-                        this.__processFontFile(tmpFilename, resolve, reject);
-                        fs.unlink(tmpFilename);
-                      }.bind(this)
-                    );
-
-                    res.on("data", chunk => {
-                      outFile.write(chunk);
-                    });
-                    res.on("end", function () {
-                      outFile.end();
-                    });
-                  }.bind(this)
-                );
-              }.bind(this)
-            )
-            .on("error", e => {
-              reject(e);
-            });
-        }.bind(this)
+    async _loadRemoteFont(url) {
+      let tmpFilename = await qx.tool.utils.Http.downloadToTempFile(
+        url,
+        /^font\/(ttf|svg|eot|woff|woff2)$/
       );
+
+      let result = await this.__processFontFile(tmpFilename);
+      fs.unlink(tmpFilename);
+      return result;
     },
 
     /**
      * Common code to extract the desired font information from a font file
-     * on disk. It resolves the promises given by the calling stub (remote or
-     * local font retrieval).
+     * on disk.
      *
      * @param filename {String} Path to font file
-     * @param resolve {Function} External promise resolve
-     * @param reject {Function} External promise reject
+     * @return {Map<String,String>} mapping of glyphs to codepoints
      */
-    __processFontFile(filename, resolve, reject) {
-      fontkit.open(
-        filename,
-        null,
-        function (err, font) {
-          if (err) {
-            reject(err);
-            return;
-          }
-
-          let resources = {};
+    async __processFontFile(filename) {
+      let fn = qx.tool.utils.Promisify.promisify(cb =>
+        fontkit.open(filename, null, cb)
+      );
 
-          // If we have a mapping file, take qx.tool.compiler.Console.information instead
-          // of anaylzing the font.
-          if (this.getMapping()) {
-            let mapPath = path.join(
-              this.__library.getRootDir(),
-              path.join(this.__library.getResourcePath(), this.getMapping())
-            );
+      let font = await fn();
+      let resources = {};
 
-            fs.readFile(mapPath, { encoding: "utf-8" }, (err, data) => {
-              if (err) {
-                log.error(`Cannot read mapping file '${mapPath}': ${err.code}`);
-                reject(err);
-                return;
-              }
-
-              let map = JSON.parse(data);
-              Object.keys(map).forEach(key => {
-                let codePoint = parseInt(map[key], 16);
-                let glyph = font.glyphForCodePoint(codePoint);
-                if (!glyph.id) {
-                  qx.tool.compiler.Console.trace(
-                    `WARN: no glyph found in ${filename} ${key}: ${codePoint}`
-                  );
-
-                  return;
-                }
-                resources["@" + this.getName() + "/" + key] = [
-                  Math.ceil(
-                    (this.getDefaultSize() * glyph.advanceWidth) /
-                      glyph.advanceHeight
-                  ),
-
-                  // width
-                  this.getDefaultSize(), // height
-                  codePoint
-                ];
-              }, this);
-
-              resolve(resources);
-              return;
-            });
+      // If we have a mapping file, take qx.tool.compiler.Console.information instead
+      // of anaylzing the font.
+      if (this.getMapping()) {
+        let mapPath = path.join(
+          this.__library.getRootDir(),
+          path.join(this.__library.getResourcePath(), this.getMapping())
+        );
 
-            return;
-          }
+        let data;
+        try {
+          data = await fs.promises.readFile(mapPath, { encoding: "utf-8" });
+        } catch (err) {
+          log.error(`Cannot read mapping file '${mapPath}': ${err.code}`);
+          throw err;
+        }
 
-          if (!font.GSUB) {
-            qx.tool.compiler.Console.error(
-              `The webfont in ${filename} does not have any ligatures`
+        let map = JSON.parse(data);
+        Object.keys(map).forEach(key => {
+          let codePoint = parseInt(map[key], 16);
+          let glyph = font.glyphForCodePoint(codePoint);
+          if (!glyph.id) {
+            qx.tool.compiler.Console.trace(
+              `WARN: no glyph found in ${filename} ${key}: ${codePoint}`
             );
 
-            resolve(resources);
             return;
           }
+          resources["@" + this.getName() + "/" + key] = [
+            Math.ceil(
+              (this.getDefaultSize() * glyph.advanceWidth) / glyph.advanceHeight
+            ),
+
+            // width
+            this.getDefaultSize(), // height
+            codePoint
+          ];
+        }, this);
+
+        return resources;
+      }
+
+      if (!font.GSUB) {
+        qx.tool.compiler.Console.error(
+          `The webfont in ${filename} does not have any ligatures`
+        );
+
+        return resources;
+      }
 
-          // some IconFonts (MaterialIcons for example) use ligatures
-          // to name their icons. This code extracts the ligatures
-          // hat tip to Jossef Harush https://stackoverflow.com/questions/54721774/extracting-ttf-font-ligature-mappings/54728584
-          let ligatureName = {};
-          let lookupList = font.GSUB.lookupList.toArray();
-          let lookupListIndexes =
-            font.GSUB.featureList[0].feature.lookupListIndexes;
-          lookupListIndexes.forEach(index => {
-            let subTable = lookupList[index].subTables[0];
-            let leadingCharacters = [];
-            if (subTable.coverage.rangeRecords) {
-              subTable.coverage.rangeRecords.forEach(coverage => {
-                for (let i = coverage.start; i <= coverage.end; i++) {
-                  let character = font.stringsForGlyph(i)[0];
-                  leadingCharacters.push(character);
-                }
-              });
+      // some IconFonts (MaterialIcons for example) use ligatures
+      // to name their icons. This code extracts the ligatures
+      // hat tip to Jossef Harush https://stackoverflow.com/questions/54721774/extracting-ttf-font-ligature-mappings/54728584
+      let ligatureName = {};
+      let lookupList = font.GSUB.lookupList.toArray();
+      let lookupListIndexes =
+        font.GSUB.featureList[0].feature.lookupListIndexes;
+      lookupListIndexes.forEach(index => {
+        let subTable = lookupList[index].subTables[0];
+        let leadingCharacters = [];
+        if (subTable.coverage.rangeRecords) {
+          subTable.coverage.rangeRecords.forEach(coverage => {
+            for (let i = coverage.start; i <= coverage.end; i++) {
+              let character = font.stringsForGlyph(i)[0];
+              leadingCharacters.push(character);
             }
-            let ligatureSets = subTable.ligatureSets.toArray();
-            ligatureSets.forEach((ligatureSet, ligatureSetIndex) => {
-              let leadingCharacter = leadingCharacters[ligatureSetIndex];
-              ligatureSet.forEach(ligature => {
-                let character = font.stringsForGlyph(ligature.glyph)[0];
-                if (!character) {
-                  // qx.tool.compiler.Console.log(`WARN: ${this.getName()} no character ${ligature}`);
-                  return;
-                }
-                let ligatureText =
-                  leadingCharacter +
-                  ligature.components
-                    .map(x => font.stringsForGlyph(x)[0])
-                    .join("");
-                var hexId = character.charCodeAt(0).toString(16);
-                if (ligatureName[hexId] == undefined) {
-                  ligatureName[hexId] = [ligatureText];
-                } else {
-                  ligatureName[hexId].push(ligatureText);
-                }
-              });
-            });
           });
-
-          let defaultSize = this.getDefaultSize();
-          font.characterSet.forEach(codePoint => {
-            let glyph = font.glyphForCodePoint(codePoint);
-            if (glyph.path.commands.length < 1 && !glyph.layers) {
+        }
+        let ligatureSets = subTable.ligatureSets.toArray();
+        ligatureSets.forEach((ligatureSet, ligatureSetIndex) => {
+          let leadingCharacter = leadingCharacters[ligatureSetIndex];
+          ligatureSet.forEach(ligature => {
+            let character = font.stringsForGlyph(ligature.glyph)[0];
+            if (!character) {
+              // qx.tool.compiler.Console.log(`WARN: ${this.getName()} no character ${ligature}`);
               return;
             }
-
-            const found = gName => {
-              resources["@" + this.getName() + "/" + gName] = [
-                Math.ceil(
-                  (this.getDefaultSize() * glyph.advanceWidth) /
-                    glyph.advanceHeight
-                ),
-
-                // width
-                defaultSize, // height
-                codePoint
-              ];
-            };
-            if (glyph.name) {
-              found(glyph.name);
-            }
-            var names = ligatureName[codePoint.toString(16)];
-            if (names) {
-              names.forEach(found);
+            let ligatureText =
+              leadingCharacter +
+              ligature.components.map(x => font.stringsForGlyph(x)[0]).join("");
+            var hexId = character.charCodeAt(0).toString(16);
+            if (ligatureName[hexId] == undefined) {
+              ligatureName[hexId] = [ligatureText];
+            } else {
+              ligatureName[hexId].push(ligatureText);
             }
-          }, this);
+          });
+        });
+      });
 
-          resolve(resources);
-        }.bind(this)
-      );
+      let defaultSize = this.getDefaultSize();
+      font.characterSet.forEach(codePoint => {
+        let glyph = font.glyphForCodePoint(codePoint);
+        if (glyph.path.commands.length < 1 && !glyph.layers) {
+          return;
+        }
+
+        const found = gName => {
+          resources["@" + this.getName() + "/" + gName] = [
+            Math.ceil(
+              (this.getDefaultSize() * glyph.advanceWidth) / glyph.advanceHeight
+            ),
+
+            // width
+            defaultSize, // height
+            codePoint
+          ];
+        };
+        if (glyph.name) {
+          found(glyph.name);
+        }
+        var names = ligatureName[codePoint.toString(16)];
+        if (names) {
+          names.forEach(found);
+        }
+      }, this);
+
+      return resources;
     },
 
     /**
@@ -325,24 +255,17 @@ qx.Class.define("qx.tool.compiler.app.WebFont", {
      *
      * @param target  {qx.tool.compiler.targets.Target} the target
      * @param application  {qx.tool.compiler.app.Application} the application being built
-     * @param initial {Boolean} true if this is the first pass
      * @return {String}
      */
-    getBootstrapCode(target, application, initial) {
+    getBootstrapCode(target, application) {
       let res = "";
-
-      if (initial) {
-        res = "qx.$$fontBootstrap={};\n";
-      }
-
       let font = {
-        size: this.getDefaultSize(),
+        defaultSize: this.getDefaultSize(),
         lineHeight: 1,
         family: [this.getName()],
-        sources: [
+        fontFaces: [
           {
-            family: this.getName(),
-            source: this.getResources()
+            paths: this.getResources()
           }
         ]
       };
@@ -355,7 +278,7 @@ qx.Class.define("qx.tool.compiler.app.WebFont", {
         "qx.$$fontBootstrap['" +
         this.getName() +
         "']=" +
-        JSON.stringify(font) +
+        JSON.stringify(font, null, 2) +
         ";");
     },
 
@@ -371,7 +294,7 @@ qx.Class.define("qx.tool.compiler.app.WebFont", {
         return this.__generateForTargetPromise;
       }
 
-      this.__generateForTargetPromise = new Promise((resolve, reject) => {
+      const generate = async () => {
         for (let resource of this.getResources()) {
           // Search for the first supported extension
           let basename = resource.match(/^.*[/\\]([^/\\\?#]+).*$/)[1];
@@ -379,35 +302,22 @@ qx.Class.define("qx.tool.compiler.app.WebFont", {
           if (!basename.match(/\.(ttf|otf|woff|woff2)$/)) {
             continue;
           }
-          // We support http/https and local files, check for URLs
-          // first.
+
           if (resource.match(/^https?:\/\//)) {
-            this._loadRemoteFont(resource)
-              .then(data => {
-                this.__fontData = data;
-                resolve();
-              })
-              .catch(err => {
-                reject(err);
-              });
-            return;
+            this.__fontData = await this._loadRemoteFont(resource);
+          } else {
+            this.__fontData = await this._loadLocalFont(resource);
           }
-          // handle local file
-          this._loadLocalFont(resource)
-            .then(data => {
-              this.__fontData = data;
-              resolve();
-            })
-            .catch(err => {
-              reject(err);
-            });
-          return;
+
+          return this.__fontData;
         }
-        reject(
+
+        throw new Error(
           `Failed to load/validate FontMap for webfont (expected ttf, otf, woff or woff2) ${this.getName()}`
         );
-      });
+      };
 
+      this.__generateForTargetPromise = generate();
       return this.__generateForTargetPromise;
     },
 

package/source/class/qx/tool/compiler/makers/AppMaker.js

@@ -165,6 +165,18 @@ qx.Class.define("qx.tool.compiler.makers.AppMaker", {
       this.__applications.forEach(app => app.setAnalyser(analyser));
       await target.open();
 
+      for (let library of analyser.getLibraries()) {
+        let fontsData = library.getFontsData();
+        for (let fontName in fontsData) {
+          let fontData = fontsData[fontName];
+          let font = analyser.getFont(fontName);
+          if (!font) {
+            font = analyser.getFont(fontName, true);
+            await font.updateFromManifest(fontData, library);
+          }
+        }
+      }
+
       if (this.isOutputTypescript()) {
         analyser.getLibraries().forEach(library => {
           var symbols = library.getKnownSymbols();
@@ -208,6 +220,7 @@ qx.Class.define("qx.tool.compiler.makers.AppMaker", {
           let stat = await qx.tool.utils.files.Utils.safeStat(
             localModules[requireName]
           );
+
           res ||=
             stat.mtime.getTime() >
             (db?.modulesInfo?.localModules[requireName] || 0);