MC-3095: Display TypeScript errors within local build process

- Resolve mass converter errors

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type-config.d.ts

@@ -41,6 +41,7 @@ export interface ContentTypeConfigAppearanceInterface {
 
 export interface DataMappingInterface {
     path: string;
+    converters: ConverterInterface[];
     elements: {
         [key: string]: {
             style: DataMappingStyleInterface[];
@@ -52,6 +53,14 @@ export interface DataMappingInterface {
     };
 }
 
+export interface ConverterInterface {
+    name: string;
+    component: string;
+    config: {
+        [key: string]: string;
+    };
+}
+
 export interface DataMappingStyleInterface {
     var?: string;
     name: string;

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/mass-converter/converter-interface.ts

@@ -6,22 +6,30 @@
 /**
  * @api
  */
-export interface ConverterInterface {
+export default interface ConverterInterface {
     /**
      * Process data after it's read and converted by element converters
      *
-     * @param {object} data
-     * @param {object} config
+     * @param {ConverterDataInterface} data
+     * @param {ConverterConfigInterface} config
      * @returns {object}
      */
-    fromDom(data: object, config: object): object;
+    fromDom(data: ConverterDataInterface, config: ConverterConfigInterface): object;
 
     /**
      * Process data before it's converted by element converters
      *
-     * @param {object} data
-     * @param {object} config
+     * @param {ConverterDataInterface} data
+     * @param {ConverterConfigInterface} config
      * @returns {object}
      */
-    toDom(data: object, config: object): object;
+    toDom(data: ConverterDataInterface, config: ConverterConfigInterface): object;
+}
+
+export interface ConverterDataInterface {
+    [key: string]: any;
+}
+
+export interface ConverterConfigInterface {
+    [key: string]: any;
 }

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/mass-converter/converter-pool-factory.ts

@@ -11,10 +11,11 @@ import ConverterPool from "./converter-pool";
  * Create a new instance of converter pool
  * @api
  */
-export default function create(contentType: string): Promise<> {
+export default function create(contentType: string): Promise<typeof ConverterPool> {
     const config = Config.getContentTypeConfig(contentType);
-    const converters = [];
-    for (const appearanceName: string of Object.keys(config.appearances)) {
+    const converters: string[] = [];
+    let appearanceName: string;
+    for (appearanceName of Object.keys(config.appearances)) {
         const dataMapping = config.appearances[appearanceName].data_mapping;
         if (undefined !== dataMapping && undefined !== dataMapping.converters) {
             for (const converterConfig of dataMapping.converters) {
@@ -25,7 +26,7 @@ export default function create(contentType: string): Promise<> {
         }
     }
 
-    return new Promise((resolve: (converterPool: object) => void) => {
+    return new Promise((resolve: (converterPool: typeof ConverterPool) => void) => {
         loadModule(converters, (...loadedConverters: any[]) => {
             for (let i = 0; i < converters.length; i++) {
                 ConverterPool.register(converters[i], new loadedConverters[i]());

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/mass-converter/converter-pool.ts

@@ -9,12 +9,26 @@ import ConverterInterface from "./converter-interface";
  * @api
  */
 class DataConverterPool {
-    private converters: object = {};
+    private converters: {
+        [key: string]: ConverterInterface;
+    } = {};
 
+    /**
+     * Retrieve a data converter instance from the pool
+     *
+     * @param {string} name
+     * @returns {ConverterInterface}
+     */
     public get(name: string): ConverterInterface {
-        return this.converters[name] !== undefined ? this.converters[name] : false;
+        return this.converters[name] !== undefined ? this.converters[name] : null;
     }
 
+    /**
+     * Register a new data converter into the pool
+     *
+     * @param {string} name
+     * @param {ConverterInterface} converter
+     */
     public register(name: string, converter: ConverterInterface) {
         this.converters[name] = converter;
     }

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/mass-converter/empty-mobile-image.ts

@@ -3,17 +3,17 @@
  * See COPYING.txt for license details.
  */
 
-import ConverterInterface from "./converter-interface";
+import ConverterInterface, {ConverterConfigInterface, ConverterDataInterface} from "./converter-interface";
 
 export default class EmptyMobileImage implements ConverterInterface {
     /**
      * Process data after it's read and converted by element converters
      *
-     * @param {object} data
+     * @param {ConverterDataInterface} data
      * @param {object} config
      * @returns {object}
      */
-    public fromDom(data: object, config: object): object {
+    public fromDom(data: ConverterDataInterface, config: ConverterConfigInterface): object {
         const desktopImage = data[config.desktop_image_variable];
         const mobileImage = data[config.mobile_image_variable];
         if (mobileImage && desktopImage
@@ -28,11 +28,11 @@ export default class EmptyMobileImage implements ConverterInterface {
     /**
      * Process data before it's converted by element converters
      *
-     * @param {object} data
+     * @param {ConverterDataInterface} data
      * @param {object} config
      * @returns {object}
      */
-    public toDom(data: object, config: object): object {
+    public toDom(data: ConverterDataInterface, config: ConverterConfigInterface): object {
         if (data[config.mobile_image_variable] === undefined
             || data[config.mobile_image_variable][0] === undefined
         ) {

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/mass-converter/preferred-color-format.ts

@@ -3,18 +3,18 @@
  * See COPYING.txt for license details.
  */
 
-import tinycolor from "tinycolor";
-import ConverterInterface from "./converter-interface";
+import "tinycolor";
+import ConverterInterface, {ConverterConfigInterface, ConverterDataInterface} from "./converter-interface";
 
 export default class PreferredColorFormat implements ConverterInterface {
     /**
      * Process data after it's read and converted by element converters
      *
-     * @param {object} data
-     * @param {object} config
+     * @param {ConverterDataInterface} data
+     * @param {ConverterConfigInterface} config
      * @returns {object}
      */
-    public fromDom(data: object, config: object): object {
+    public fromDom(data: ConverterDataInterface, config: ConverterConfigInterface): object {
         if (data.background_color !== "") {
             data.background_color = tinycolor(data.background_color).toString(data.background_color_format);
         }
@@ -24,11 +24,11 @@ export default class PreferredColorFormat implements ConverterInterface {
     /**
      * Process data before it's converted by element converters
      *
-     * @param {object} data
-     * @param {object} config
+     * @param {ConverterDataInterface} data
+     * @param {ConverterConfigInterface} config
      * @returns {object}
      */
-    public toDom(data: object, config: object): object {
+    public toDom(data: ConverterDataInterface, config: ConverterConfigInterface): object {
         data.background_color_format = tinycolor(data.background_color).getFormat();
         return data;
     }

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/mass-converter/widget-directive-abstract.ts

@@ -4,20 +4,20 @@
  */
 
 import _ from "underscore";
-import ConverterInterface from "./converter-interface";
+import ConverterInterface, {ConverterConfigInterface, ConverterDataInterface} from "./converter-interface";
 
 export default class WidgetDirectiveAbstract implements ConverterInterface {
     /**
      * Convert value to internal format
      *
-     * @param {object} data
-     * @param {object} config
+     * @param {ConverterDataInterface} data
+     * @param {ConverterConfigInterface} config
      * @returns {object}
      */
-    public fromDom(data: object, config: object): object {
+    public fromDom(data: ConverterDataInterface, config: ConverterConfigInterface): object {
         let attributes: object = {};
 
-        data[config.html_variable].replace(/\{\{widget(.*?)\}\}/i, ((match, attributeString) => {
+        data[config.html_variable].replace(/\{\{widget(.*?)\}\}/i, ((match: string, attributeString: string) => {
             attributes = this.parseAttributesString(attributeString);
         }).bind(this));
 
@@ -27,11 +27,11 @@ export default class WidgetDirectiveAbstract implements ConverterInterface {
     /**
      * Convert value to knockout format
      *
-     * @param {object} data
-     * @param {object} config
+     * @param {ConverterDataInterface} data
+     * @param {ConverterConfigInterface} config
      * @returns {object}
      */
-    public toDom(data: object, config: object): object {
+    public toDom(data: ConverterDataInterface, config: ConverterConfigInterface): object {
         data[config.html_variable] = this.buildDirective(data);
         return data;
     }
@@ -51,11 +51,13 @@ export default class WidgetDirectiveAbstract implements ConverterInterface {
      * @return {Object}
      */
     protected parseAttributesString(attributes: string): object {
-        const result = {};
+        const result: {
+            [key: string]: string;
+        } = {};
 
         attributes.replace(
             /(\w+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g,
-            (match, key, value) => {
+            (match: string, key: string, value: string) => {
                 result[key] = value.replace(/&quote;/g, "\"");
             },
         );

package.json

@@ -16,6 +16,7 @@
     "@types/magento2": "https://github.com/magento/ts-types.git",
     "@types/requirejs": "^2.1.31",
     "@types/slick-carousel": "^1.6.32",
+    "@types/tinycolor": "^1.1.27",
     "@types/underscore": "^1.8.1",
     "babel-cli": "^7.0.0-beta.3",
     "babel-core": "^7.0.0-beta.3",

yarn.lock

@@ -51,6 +51,10 @@
   dependencies:
     "@types/jquery" "*"
 
+"@types/tinycolor@^1.1.27":
+  version "1.1.27"
+  resolved "https://registry.yarnpkg.com/@types/tinycolor/-/tinycolor-1.1.27.tgz#d01d05a681d0ce28923b021d5f3d752ea0478089"
+
 "@types/underscore@^1.8.1":
   version "1.8.4"
   resolved "https://registry.yarnpkg.com/@types/underscore/-/underscore-1.8.4.tgz#187da45fe08986d3be50f1aa58fd3d45726bf336"