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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/2906572/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/554796/images/2906576/pasted-from-clipboard.png)
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
Wix-Style: <wix-input>
By Shlomi Toussia Cohen
Wix-Style: <wix-input>
- 308