feat: prepare for TS defs generation (#121)

vaadin · May 27, 2020 · 44fde69 · 44fde69
1 parent 611f6e4
commit 44fde69
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 8 deletions.
diff --git a/@types/interfaces.d.ts b/@types/interfaces.d.ts
@@ -0,0 +1 @@
+export type GridProEditorType = 'text' | 'checkbox' | 'select' | 'custom';
diff --git a/bower.json b/bower.json
@@ -28,17 +28,17 @@
   ],
   "dependencies": {
     "polymer": "^2.0.0",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.5.2",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.0",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.6.1",
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.4.1",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.2",
     "vaadin-license-checker": "vaadin/license-checker#^2.1.0",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.6.0",
-    "vaadin-select": "vaadin/vaadin-select#^2.2.0",
-    "vaadin-list-box": "vaadin/vaadin-list-box#^1.3.0",
-    "vaadin-item": "vaadin/vaadin-item#^2.2.0",
-    "vaadin-grid": "vaadin/vaadin-grid#^5.6.0",
-    "vaadin-checkbox": "vaadin/vaadin-checkbox#^2.3.0"
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.7.0-alpha1",
+    "vaadin-select": "vaadin/vaadin-select#^2.3.0-alpha1",
+    "vaadin-list-box": "vaadin/vaadin-list-box#^1.4.0-alpha1",
+    "vaadin-item": "vaadin/vaadin-item#^2.3.0-alpha1",
+    "vaadin-grid": "vaadin/vaadin-grid#^5.7.0-alpha1",
+    "vaadin-checkbox": "vaadin/vaadin-checkbox#^2.4.0-alpha1"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",

diff --git a/gen-tsd.json b/gen-tsd.json
@@ -0,0 +1,22 @@
+{
+  "excludeFiles": [
+    "wct.conf.js",
+    "index.html",
+    "src/vaadin-grid-pro-edit-checkbox.js",
+    "src/vaadin-grid-pro-edit-select.js",
+    "src/vaadin-grid-pro-edit-text-field.js",
+    "demo/**/*",
+    "test/**/*",
+    "theme/**/*"
+  ],
+  "autoImport": {
+    "@vaadin/vaadin-grid/@types/interfaces": [
+      "GridBodyRenderer",
+      "GridItem",
+      "GridRowData"
+    ],
+    "./@types/interfaces": [
+      "GridProEditorType"
+    ]
+  }
+}
diff --git a/magi-p3-post.js b/magi-p3-post.js
@@ -0,0 +1,18 @@
+module.exports = {
+  files: [
+    'src/vaadin-grid-pro.js',
+    'src/vaadin-grid-pro-edit-column.js',
+    'vaadin-grid-pro.js',
+    'vaadin-grid-pro-edit-column.js'
+  ],
+  from: [
+    /@mixes Vaadin\.GridPro\./g,
+    /@memberof Vaadin*\n.*@extends Vaadin\./g,
+    /import '\.\/theme\/lumo\/vaadin-(.+)\.js';/
+  ],
+  to: [
+    '@mixes ',
+    '@extends ',
+    `import './theme/lumo/vaadin-$1.js';\nexport * from './src/vaadin-$1.js';`
+  ]
+};
diff --git a/package.json b/package.json
@@ -18,7 +18,9 @@
   },
   "homepage": "https://vaadin.com/components",
   "files": [
+    "vaadin-*.d.ts",
     "vaadin-*.js",
+    "@types",
     "src",
     "theme"
   ],

diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,5 @@
+{
+  "lint": {
+    "ignoreWarnings": ["overriding-private"]
+  }
+}
diff --git a/src/vaadin-grid-pro-edit-column.html b/src/vaadin-grid-pro-edit-column.html
@@ -53,12 +53,14 @@
            *   - `rowData.expanded` Sublevel toggle state.
            *   - `rowData.level` Level of the tree represented with a horizontal offset of the toggle button.
            *   - `rowData.selected` Selected state.
+           * @type {!GridBodyRenderer | null | undefined}
            */
           editModeRenderer: Function,
 
           /**
            * The list of options which should be passed to cell editor component.
            * Used with the `select` editor type, to provide a list of items.
+           * @type {!Array<string>}
            */
           editorOptions: {
             type: Array,
@@ -73,6 +75,7 @@
            *
            * Editor type is set to `custom` when either `editModeRenderer` is set,
            * or editor template provided for the column.
+           * @type {!GridProEditorType}
            */
           editorType: {
             type: String,
@@ -82,6 +85,7 @@
 
           /**
            * Path of the property used for the value of the editor component.
+           * @type {string}
            */
           editorValuePath: {
             type: String,
@@ -96,8 +100,10 @@
             observer: '_pathChanged'
           },
 
+          /** @private */
           _oldTemplate: Object,
 
+          /** @private */
           _oldRenderer: Function
         };
       }
@@ -135,12 +141,14 @@
         this._editTemplateObserver.flush();
       }
 
+      /** @private */
       _pathChanged(path) {
         if (!path || path.length == 0) {
           throw new Error('You should specify the path for the edit column');
         }
       }
 
+      /** @private */
       _cellsChanged() {
         this._cells.forEach(cell => {
           const part = cell.getAttribute('part');
@@ -150,6 +158,7 @@
         });
       }
 
+      /** @private */
       _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
         if (template !== oldTemplate) {
           this._editModeTemplate = undefined;
@@ -158,6 +167,7 @@
         }
       }
 
+      /** @private */
       _editModeTemplateOrRendererChanged(template, renderer) {
         if (template === undefined && renderer === undefined && !this._oldTemplate && !this._oldRenderer) {
           return;
@@ -177,13 +187,20 @@
 
       /**
        * Override body template preparation to take editor into account.
+       * @return {HTMLTemplateElement}
+       * @protected
        */
       _prepareBodyTemplate() {
         return this._prepareTemplatizer(this._findTemplate(false, false, false) || null);
       }
 
       /**
        * Override template filtering to take editor into account.
+       * @param {boolean} header
+       * @param {boolean} footer
+       * @param {boolean} editor
+       * @return {HTMLTemplateElement}
+       * @protected
        */
       _selectFirstTemplate(header = false, footer = false, editor = false) {
         return Polymer.FlattenedNodesObserver.getFlattenedNodes(this)
@@ -197,6 +214,11 @@
 
       /**
        * Override template search to take editor into account.
+       * @param {boolean} header
+       * @param {boolean} footer
+       * @param {boolean=} editor
+       * @return {HTMLTemplateElement}
+       * @protected
        */
       _findTemplate(header, footer, editor) {
         const template = this._selectFirstTemplate(header, footer, editor);
@@ -209,22 +231,34 @@
         return template;
       }
 
+      /** @private */
       _prepareEditModeTemplate() {
         return this._prepareTemplatizer(this._findTemplate(false, false, true) || null, {});
       }
 
+      /**
+       * @param {!HTMLElement} cell
+       * @return {string}
+       * @protected
+       */
       _getEditorTagName(cell) {
         return this.editorType === 'custom' ?
           this._getEditorComponent(cell).localName :
           this._getTagNameByType();
       }
 
+      /**
+       * @param {!HTMLElement} cell
+       * @return {HTMLElement | null}
+       * @protected
+       */
       _getEditorComponent(cell) {
         return this.editorType === 'custom' ?
           cell._content.firstElementChild :
           cell._content.querySelector(this._getEditorTagName(cell));
       }
 
+      /** @private */
       _getTagNameByType() {
         let type;
         switch (this.editorType) {
@@ -242,6 +276,7 @@
         return this.constructor.is.replace('column', type);
       }
 
+      /** @private */
       _focusEditor(editor) {
         editor.focus();
         if (this.editorType === 'checkbox') {
@@ -253,11 +288,17 @@
         }
       }
 
+      /**
+       * @param {!HTMLElement} editor
+       * @return {unknown}
+       * @protected
+       */
       _getEditorValue(editor) {
         const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
         return Polymer.Path.get(editor, path);
       }
 
+      /** @private */
       _renderEditor(cell, model) {
         if (cell._template) {
           cell.__savedTemplate = cell._template;
@@ -275,6 +316,7 @@
         }
       }
 
+      /** @private */
       _removeEditor(cell, model) {
         if (cell.__savedTemplate) {
           this._stampTemplateToCell(cell, cell.__savedTemplate, model);
@@ -287,12 +329,14 @@
         }
       }
 
+      /** @private */
       _setEditorOptions(editor) {
         if (this.editorOptions && this.editorOptions.length) {
           editor.options = this.editorOptions;
         }
       }
 
+      /** @private */
       _setEditorValue(editor, value) {
         const path = this.editorType === 'checkbox' ? 'checked' : this.editorValuePath;
         // FIXME(yuriy): Required for the flow counterpart as it is passing the string value to webcomponent
@@ -301,6 +345,11 @@
         editor.notifyPath && editor.notifyPath(path, value);
       }
 
+      /**
+       * @param {!HTMLElement} cell
+       * @param {!GridRowData} model
+       * @protected
+       */
       _startCellEdit(cell, model) {
         this._renderEditor(cell, model);
         this._grid.notifyResize();
@@ -315,6 +364,7 @@
         this._focusEditor(editor);
       }
 
+      /** @private */
       _stampTemplateToCell(cell, template, model) {
         cell._template = template;
         cell._content.innerHTML = '';
@@ -326,12 +376,18 @@
         cell._instance.setProperties(model);
       }
 
+      /** @private */
       _stampRendererToCell(cell, renderer, model) {
         cell._content.innerHTML = '';
         cell._renderer = renderer;
         this.__runRenderer(renderer, cell, model);
       }
 
+      /**
+       * @param {!HTMLElement} cell
+       * @param {!GridRowData} model
+       * @protected
+       */
       _stopCellEdit(cell, model) {
         const editor = this._getEditorComponent(cell);
         let shouldResize = true;