@qooxdoo/framework 7.5.1 → 7.6.0

package/source/class/qx/tool/compiler/ClassFile.js

@@ -208,6 +208,7 @@ qx.Class.define("qx.tool.compiler.ClassFile", {
     };
 
     this.__requiredAssets = [];
+    this.__requiredFonts = {};
     this.__translations = [];
     this.__markers = [];
     this.__haveMarkersFor = {};
@@ -256,6 +257,10 @@ qx.Class.define("qx.tool.compiler.ClassFile", {
     __requiredClasses: null,
     __environmentChecks: null,
     __requiredAssets: null,
+
+    /** @type{Map<String,Object>} list of fonts indexed by name; the value is an object with `name` and `loc` */
+    __requiredFonts: null,
+
     __translateMessageIds: null,
     __scope: null,
     __inDefer: false,
@@ -631,6 +636,22 @@ qx.Class.define("qx.tool.compiler.ClassFile", {
       if (assets.length) {
         dbClassInfo.assets = assets;
       }
+
+      // Fonts
+      var fontNames = Object.keys(this.__requiredFonts);
+      if (fontNames.length) {
+        dbClassInfo.fonts = fontNames;
+        for (let fontName in this.__requiredFonts) {
+          if (!this.__analyser.getFont(fontName)) {
+            t.addMarker(
+              "fonts.unresolved#" + fontName,
+              this.__requiredFonts[fontName].loc.start,
+              fontName
+            );
+          }
+        }
+      }
+
       if (meta) {
         if (meta.aliases) {
           dbClassInfo.aliases = {};
@@ -754,6 +775,11 @@ qx.Class.define("qx.tool.compiler.ClassFile", {
             t._requireAsset(elem.body);
           });
         }
+        if (jsdoc["@usefont"]) {
+          jsdoc["@usefont"].forEach(function (elem) {
+            t._requireFont(elem.body, loc);
+          });
+        }
         return jsdoc;
       }
 
@@ -861,6 +887,9 @@ qx.Class.define("qx.tool.compiler.ClassFile", {
           } else {
             meta.type = "variable";
           }
+          if (node.async) {
+            meta.async = true;
+          }
           if (functionName.startsWith("__")) {
             meta.access = "private";
           } else if (functionName.startsWith("_")) {
@@ -2896,6 +2925,18 @@ qx.Class.define("qx.tool.compiler.ClassFile", {
       return this.__requiredAssets;
     },
 
+    /**
+     * Adds a required font
+     * @param {String} name  name of the font
+     * @param {Location} the Babel location
+     */
+    _requireFont(name, loc) {
+      this.__requiredFonts[name] = {
+        name,
+        loc
+      };
+    },
+
     /**
      * Finds an object property in a node tree (not a Qooxdoo property, an
      * object property)

package/source/class/qx/tool/compiler/Console.js

@@ -267,7 +267,12 @@ qx.Class.define("qx.tool.compiler.Console", {
         /* eslint-enable no-template-curly-in-string */
 
         "qx.tool.compiler.maker.appNotHeadless":
-          "Compiling application '%1' but the target supports non-headless output, you may find unwanted dependencies are loaded during startup"
+          "Compiling application '%1' but the target supports non-headless output, you may find unwanted dependencies are loaded during startup",
+
+        // Fonts
+        "qx.tool.compiler.webfonts.deprecated":
+          "Manifest uses deprecated provides.webfonts, consider switching to provides.font",
+        "qx.tool.compiler.fonts.unresolved": "Cannot find font with name %1"
       },
 
       "warning"

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

@@ -833,6 +833,25 @@ qx.Class.define("qx.tool.compiler.app.Application", {
       return assets;
     },
 
+    /**
+     * Returns a list of fonts required by the application, where the font is detailed in Manifest.json
+     * in `provides.fonts`
+     *
+     * @returns {String[]}
+     */
+    getFonts() {
+      var fonts = {};
+      var analyser = this.getAnalyser();
+      var db = analyser.getDatabase();
+      this.__loadDeps.forEach(classname => {
+        var classInfo = db.classInfo[classname];
+        if (classInfo.fonts) {
+          classInfo.fonts.forEach(fontName => (fonts[fontName] = true));
+        }
+      });
+      return Object.keys(fonts);
+    },
+
     /**
      * Returns the class name for the application
      * @returns {String}

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

@@ -93,7 +93,10 @@ qx.Class.define("qx.tool.compiler.app.Library", {
       check: "String"
     },
 
-    /** {WebFont[]} List of webfonts provided */
+    /**
+     * {WebFont[]} List of webfonts provided
+     * @deprecated
+     */
     webFonts: {
       init: null,
       nullable: true,
@@ -121,6 +124,7 @@ qx.Class.define("qx.tool.compiler.app.Library", {
     __sourceFileExtensions: null,
     __promiseLoadManifest: null,
     __environmentChecks: null,
+    __fontsData: null,
 
     /**
      * Transform for rootDir; converts it to an absolute path
@@ -238,13 +242,19 @@ qx.Class.define("qx.tool.compiler.app.Library", {
         this.setTranslationPath(data.provides.translation);
       }
       if (data.provides.webfonts) {
-        var fonts = [];
+        let fonts = [];
+        if (data.provides.webfonts.length) {
+          qx.tool.compiler.Console.print(
+            "qx.tool.compiler.webfonts.deprecated"
+          );
+        }
         data.provides.webfonts.forEach(wf => {
           var font = new qx.tool.compiler.app.WebFont(this).set(wf);
           fonts.push(font);
         });
         this.setWebFonts(fonts);
       }
+      this.__fontsData = data.provides.fonts || {};
       if (data.externalResources) {
         if (data.externalResources.script) {
           this.setAddScript(data.externalResources.script);
@@ -264,6 +274,15 @@ qx.Class.define("qx.tool.compiler.app.Library", {
       }
     },
 
+    /**
+     * Returns the provides.fonts data from the manifest
+     *
+     * @returns {Array}
+     */
+    getFontsData() {
+      return this.__fontsData;
+    },
+
     /**
      * Scans the filing system looking for classes; there are occasions (ie Qooxdoo's qxWeb module)
      * where the class name does not comply with the namespace, this method is used to find those
@@ -366,6 +385,36 @@ qx.Class.define("qx.tool.compiler.app.Library", {
       });
     },
 
+    /**
+     * Detects whether the filename is one of the library's fonts
+     *
+     * @param {String} filename
+     * @returns {Boolean}
+     */
+    isFontAsset(filename) {
+      let isWebFont = false;
+      if (filename.endsWith("svg")) {
+        let fonts = this.getWebFonts() || [];
+        isWebFont = fonts.find(webFont =>
+          webFont.getResources().find(resource => resource == filename)
+        );
+
+        if (!isWebFont) {
+          for (let fontId in this.__fontsData) {
+            let fontData = this.__fontsData[fontId];
+            isWebFont = (fontData.fontFaces || []).find(fontFace =>
+              (fontFace.paths || []).find(resource => resource == filename)
+            );
+
+            if (isWebFont) {
+              break;
+            }
+          }
+        }
+      }
+      return isWebFont;
+    },
+
     /**
      * Detects the type of a symbol, "class", "resource", "package", "environment", or null if not found
      *

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) +
+        ";");
+    }
+  }
+});