refactor: upgrading component to latest ARC standard

.eslintignore

@@ -0,0 +1,3 @@
+coverage/
+_site/
+dist/

.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@advanced-rest-client/eslint-config', 'eslint-config-prettier'].map(require.resolve)
+};

.npmignore

@@ -1,8 +1,14 @@
 coverage/
 test/
+demo/
 gen-tsd.json
 CONTRIBUTING.md
-demo/
 .travis.yml
 index.html
 polymer.json
+karma.*
+husky.*
+commitlint.*
+.*
+*.config.*
+prettier.config.js

api-form-mixin.d.ts

@@ -10,197 +10,5 @@
 
 
 // tslint:disable:variable-name Describing an API that's defined elsewhere.
-// tslint:disable:no-any describes the API as best we are able today
-
-import {dedupingMixin} from '@polymer/polymer/lib/utils/mixin.js';
 
 export {ApiFormMixin};
-
-declare namespace ArcBehaviors {
-
-
-  /**
-   * A behavior to be implemented to elements that processes AMF data via form
-   * data model and displays forms from the model.
-   *
-   * It contains common methods used in forms.
-   *
-   * Use `api-form-styles` from this package to include common styles.
-   */
-  function ApiFormMixin<T extends new (...args: any[]) => {}>(base: T): T & ApiFormMixinConstructor;
-
-  interface ApiFormMixinConstructor {
-    new(...args: any[]): ApiFormMixin;
-  }
-
-  interface ApiFormMixin {
-
-    /**
-     * View model to use to render the form.
-     */
-    model: any[]|null|undefined;
-
-    /**
-     * Set to true to show optional parameters (not required by the API).
-     */
-    optionalOpened: boolean|null|undefined;
-
-    /**
-     * Computed value from `allowHideOptional` and view model.
-     * `true` if current model has any optional property.
-     */
-    readonly hasOptional: boolean|null|undefined;
-
-    /**
-     * If set it computes `hasOptional` property and shows checkbox in the
-     * form to show / hide optional properties.
-     */
-    allowHideOptional: boolean|null|undefined;
-
-    /**
-     * Computed flag to determine if optional checkbox can be rendered
-     */
-    readonly renderOptionalCheckbox: boolean|null|undefined;
-
-    /**
-     * If set, enable / disable param checkbox is rendered next to each
-     * form item.
-     */
-    allowDisableParams: boolean|null|undefined;
-
-    /**
-     * When set, renders "add custom" item button.
-     * If the element is to be used withouth AMF model this should always
-     * be enabled. Otherwise users won't be able to add a parameter.
-     */
-    allowCustom: boolean|null|undefined;
-
-    /**
-     * Renders items in "narrow" view
-     */
-    narrow: boolean|null|undefined;
-
-    /**
-     * Computed value. The form renders empty message (if supported by
-     * the form element). It occurs when model is not set and allowCustom
-     * is not set
-     */
-    readonly renderEmptyMessage: boolean|null|undefined;
-
-    /**
-     * Computes class name for each form item depending on the item state.
-     *
-     * @param item Model item
-     * @param optionalOpened True if optional parameters are rendered.
-     */
-    computeFormRowClass(item: object|null, allowHideOptional: Boolean|null, optionalOpened: Boolean|null, allowDisableParams: Boolean|null): String|null;
-
-    /**
-     * Toggles visibility of optional parameters.
-     */
-    toggleOptionalParams(): void;
-
-    /**
-     * Returns a reference to the form element, if the DOM is ready.
-     * This only works with `iron-form` that is in the DOM.
-     *
-     * @returns Iron form element. It may be `undefined` if local
-     * DOM is not yet initialized.
-     */
-    _getForm(): IronForm|null;
-
-    /**
-     * Validates the form. It uses `iron-form`'s `validate()` function to
-     * perform the validation.
-     *
-     * @returns Validation result or `true` if DOM is not yet ready.
-     */
-    _getValidity(): Boolean|null;
-
-    /**
-     * Link to the form's serialize function.
-     *
-     * @returns Serialized form values or `undefined` if DOM is not ready.
-     * Note, `undefined` is returned **only** if DOM is not yet ready.
-     */
-    serializeForm(): object|null;
-
-    /**
-     * Computes if any of the parameters are required.
-     * It iterates over the model to find any first element that has `required`
-     * propeerty set to `false`.
-     *
-     * @param allowHideOptional State of `allowHideOptional` property.
-     * If `false` this function always returns `false`.
-     * @param record Change record. Note, it does not checks for
-     * optional parameters each time the model changes. It rescans the model
-     * when splices changed.
-     * @returns `true` if model has at leas one alement that is not required.
-     */
-    _computeHasOptionalParameters(allowHideOptional: Boolean|null, record: object|null): Boolean|null;
-
-    /**
-     * Computes value for `renderOptionalCheckbox` property.
-     *
-     * @param render Value of `allowHideOptional` property
-     * @param has Value of `hasOptional` property.
-     * @returns True if both values are `true`.
-     */
-    _computeRenderCheckbox(render: Boolean|null, has: Boolean|null): Boolean|null;
-
-    /**
-     * Computes if given model item is a custom property (not generated by
-     * AMF model transformation).
-     *
-     * @param model Model item.
-     * @returns `true` if `isCustom` property is set on model's schema
-     * property.
-     */
-    _computeIsCustom(model: object|null): Boolean|null;
-
-    /**
-     * Adds empty custom property to the list.
-     *
-     * It dispatches `api-property-model-build` custom event that is handled by
-     * `api-view-model-transformer` to build model item.
-     * This assumem that the transformer element is already in the DOM.
-     *
-     * After the transformation the element pushes or sets the data to the
-     * `model`.
-     *
-     * @param binding Value if the `binding` property.
-     * @param opts Additional options:
-     * - inputLabel {String} - Forces a label of the input
-     */
-    addCustom(binding: String|null, opts: object|null): void;
-
-    /**
-     * Removes custom item from the UI.
-     * This can only be called from `dom-repeat` element so it contain's
-     * `model` property.
-     */
-    _removeCustom(e: CustomEvent|null): void;
-
-    /**
-     * Computes if model item is optional.
-     * The items is always optional if is not required and when `hasOptional`
-     * is set to `true`.
-     *
-     * @param hasOptional [description]
-     * @param model Model item.
-     * @returns `true` if the model item is optional in the form.
-     */
-    computeIsOptional(hasOptional: Boolean|null, model: object|null): Boolean|null;
-
-    /**
-     * Computes value for `renderEmptyMessage`.
-     *
-     * @param allowCustom True if the form allows to add custom values.
-     * @param model Current model
-     * @returns `true` when allowCustom is falsy set and model is empty
-     */
-    _computeRenderEmptyMessage(allowCustom: Boolean|null, model: any[]|null): Boolean|null;
-  }
-}
-
-export {ApiFormMixinConstructor};

api-form-mixin.js

@@ -131,7 +131,9 @@ export const ApiFormMixin = (base) => class extends base {
       return false;
     }
     this[key] = value;
-    this.requestUpdate(prop, old);
+    if (this.requestUpdate) {
+      this.requestUpdate(prop, old);
+    }
     return true;
   }
 

api-form-styles.d.ts

@@ -11,5 +11,4 @@
 
 // tslint:disable:variable-name Describing an API that's defined elsewhere.
 
-
-export {};
+import {css} from 'lit-element';

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional']
+};

gen-tsd.json

@@ -1,7 +1,13 @@
 {
   "excludeFiles": [
+    "demo/*",
     "test/*",
-    "index.html",
-    "karma.*"
+    "coverage/*",
+    "karma.*",
+    "prettier.config.js",
+    "husky.config.js",
+    "commitlint.config.js",
+    "prettier.config.js",
+    ".*"
   ]
 }

husky.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  hooks: {
+    'pre-commit': 'lint-staged',
+    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS'
+  }
+};

karma.conf.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const createDefaultConfig = require('@open-wc/testing-karma/default-config');
-const merge = require('webpack-merge');
+const { createDefaultConfig } = require('@open-wc/testing-karma');
+const merge = require('deepmerge');
 
 module.exports = (config) => {
   config.set(
@@ -11,20 +11,29 @@ module.exports = (config) => {
         //
         // npm run test -- --grep test/foo/bar.test.js
         // npm run test -- --grep test/bar/*
-        { pattern: config.grep ? config.grep : 'test/**/*.test.js', type: 'module' }
+        {
+          pattern: config.grep ? config.grep : 'test/**/*.test.js',
+          type: 'module'
+        }
       ],
 
-      // coverageIstanbulReporter: {
-      //   thresholds: {
-      //     global: {
-      //       statements: 80,
-      //       branches: 78,
-      //       functions: 90,
-      //       lines: 80
-      //     }
-      //   }
-      // }
-    }),
+      // see the karma-esm docs for all options
+      esm: {
+        // if you are using 'bare module imports' you will need this option
+        nodeResolve: true
+      },
+
+      coverageIstanbulReporter: {
+        thresholds: {
+          global: {
+            statements: 80,
+            branches: 80,
+            functions: 90,
+            lines: 80
+          }
+        }
+      },
+    })
   );
   return config;
 };

karma.sl.config.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-const merge = require('webpack-merge');
+const merge = require('deepmerge');
 const slSettings = require('@advanced-rest-client/testing-karma-sl/sl-settings.js');
 const createBaseConfig = require('./karma.conf.js');
 
@@ -12,8 +12,6 @@ module.exports = (config) => {
     'SL_Firefox',
     'SL_Firefox-1',
     'SL_Safari',
-    'SL_Safari-1',
-    // 'SL_IE_11',
     'SL_EDGE'
   ];
   if (process.env.TRAVIS) {
@@ -28,9 +26,7 @@ module.exports = (config) => {
     cnf.sauceLabs.tunnelIdentifier = process.env.TRAVIS_JOB_NUMBER;
   }
 
-  config.set(
-    merge(createBaseConfig(config), cnf)
-  );
+  config.set(merge(createBaseConfig(config), cnf));
 
   return config;
 };