Wix-Style:
<wix-input>

Nir Yosef

Premium

Shlomi Toussia-Cohen

CX (Infra-team)

Guild Week #2

What is wix-input

• A simple wrapper for the native text input with tooltip

Objectives

• Understand directive's use cases and needs
• Bug fixes
• Code and tests refactor
• Document changes

So what is wrong?

• Features/Hacks were added without control
  • <textarea>
  • ngModel delegation
  • Complicated API to show errors (errorMessage, errorMessages, errorType, tooltipClass, transclusion)
• Directive was double compiled
  • ngClick fired twice
• A relative big directive for a simple task
  • ~130 LOC

Refactor tests

beforeEach(() => {
    driver = new WixInputDriver();
});

it('should render the wix-input with an input element', () => {
    driver
        .given.attributes({type: 'email', 'ng-model': 'email'})
        .when.created();

    expect(driver.get.inputElement().length).toBe(1);
});

Double Compilation

//Given directive:

<wix-input ng-click="sayHello()"/>

//Compiled to:

<wix-input> //**but ngClick was already compiled!**
    ...
    <input ng-click="sayHello()"/>
    ...
</wix-input>

Double Compilation (fix)

• priority+terminal = stop compilation (thanks Felix!)

angular.module('wixStyleInternal')
.directive('wixInput', function (wixDirectivesUtils) {
    return {
      restrict: 'E',
      priority: 550, //compile after ngIf, but before ngClick
      terminal: true, //stop compilation
      template: '<input/>',
      compile: function (element, $attrs) {
        const input = element.find('input');
        wixDirectivesUtils.moveAttributesToChild(
            element, input, $attrs, ['ngIf']
        );
        //... later will compile only the input
      }
    };
}

Migration

• Use <wix-textarea> instead of <wix-input rows="3">
• ngModel directive is set only to the inner native input (change your css selectors).
   
• Bigger architecture changes will happen in the near future, still work in progress.

Migration NOW!

• Old wix-input can still be used but will be deprecated within a ~month (we'll send an email).
• You can try the new directive by setting a flag on wixStyleConfig:

angular
  .module('yourApp')
  .config(function (wixStyleConfigProvider) {
    wixStyleConfigProvider.useNewWixInput(true);
  });

Wix-Style thoughts

• Changing common libs should be supervised - create ownership.
• Minimum hacks should be made.
• Documentation is important.

Use Slate

for documenting