Decorating JavaScript - source{d} edition

An introduction to Class and property decorators, Stage 2, proposal.

Transcript

1. Decorating JavaScript Sergio Arbeo Serabe Serabe
2. History
3. History • Early work from March, 2015 • Stage 2 for 11 months • PR for babylon merged 2 days ago.
4. What is a decorator?
5. What is a decorator? New Syntax
6. What is a decorator? import Evented from 'evented'; import { mixins, readOnly } from 'decorators'; @mixins(Evented) class AbbaSong { @readOnly artist = 'ABBA'; } export default AbbaSong;
7. What is a decorator? import Evented from 'evented'; import { mixins, readOnly } from 'decorators'; @mixins(Evented) class AbbaSong { @readOnly artist = 'ABBA'; } export default AbbaSong;
8. What is a decorator? import Evented from 'evented'; import { mixins, readOnly } from 'decorators'; @mixins(Evented) class AbbaSong { @readOnly artist = 'ABBA'; } export default AbbaSong;
9. Syntax Valid ＠foo ＠foo(…args) ＠foo.bar ＠foo.bar(…args) ＠foo.bar.baz ＠foo.bar.baz(…args)
10. Syntax Valid ＠foo ＠foo(…args) ＠foo.bar ＠foo.bar(…args) ＠foo.bar.baz ＠foo.bar.baz(…args) Invalid ＠foo[bar] ＠foo[bar](…args) ＠foo(…args).bar ＠foo(…args).bar(…args) ＠foo.bar(…args).baz ＠foo.bar(…args).baz(…args)
11. How can I implement one?
12. How to implement one? ClassDecorator: (Constructor, ParentClass, MemberDescriptor[]) : void
13. How to implement one? MemberDecorator: (MemberDescriptor) : MemberDescriptor
14. Member Descriptor interface MemberDescriptor { kind: "Property”, key: string, isStatic: boolean, descriptor: PropertyDescriptor, extras?: MemberDescriptor[], finisher?: (klass): void; }
15. Member Descriptor interface MemberDescriptor { kind: "Property”, key: string, isStatic: boolean, descriptor: PropertyDescriptor, extras?: MemberDescriptor[], finisher?: (klass): void; }
16. Member Descriptor interface MemberDescriptor { kind: "Property”, key: string, isStatic: boolean, descriptor: PropertyDescriptor, extras?: MemberDescriptor[], finisher?: (klass): void; }
17. Member Descriptor interface MemberDescriptor { kind: "Property”, key: string, isStatic: boolean, descriptor: PropertyDescriptor, extras?: MemberDescriptor[], finisher?: (klass): void; }
18. Member Descriptor interface MemberDescriptor { kind: "Property”, key: string, isStatic: boolean, descriptor: PropertyDescriptor, extras?: MemberDescriptor[], finisher?: (klass): void; }
19. Member Descriptor interface MemberDescriptor { kind: "Property”, key: string, isStatic: boolean, descriptor: PropertyDescriptor, extras?: MemberDescriptor[], finisher?: (klass): void; }
20. Member Descriptor interface MemberDescriptor { kind: "Property”, key: string, isStatic: boolean, descriptor: PropertyDescriptor, extras?: MemberDescriptor[], finisher?: (klass): void; }
21. Member Descriptor interface MemberDescriptor { kind: "Property”, key: string, isStatic: boolean, descriptor: PropertyDescriptor, extras?: MemberDescriptor[], finisher?: (klass): void; }
22. Property Descriptor type PropertyDescriptor = DataDescriptor | AccessorDescriptor;
23. Property Descriptor interface DataDescriptor { configurable?: boolean; enumerable?: boolean; value?: any; writable?: boolean; }
24. Property Descriptor interface DataDescriptor { configurable?: boolean; enumerable?: boolean; value?: any; writable?: boolean; }
25. Property Descriptor interface DataDescriptor { configurable?: boolean; enumerable?: boolean; value?: any; writable?: boolean; }
26. Property Descriptor interface DataDescriptor { configurable?: boolean; enumerable?: boolean; value?: any; writable?: boolean; }
27. Property Descriptor interface DataDescriptor { configurable?: boolean; enumerable?: boolean; value?: any; writable?: boolean; }
28. Property Descriptor interface DataDescriptor { configurable?: boolean; enumerable?: boolean; value?: any; writable?: boolean; }
29. Property Descriptor interface DataDescriptor { configurable?: boolean; enumerable?: boolean; value?: any; writable?: boolean; }
30. Property Descriptor interface AccessorDescriptor { configurable?: boolean; enumerable?: boolean; get?(): any; set?(v: any): void; }
31. Property Descriptor interface AccessorDescriptor { configurable?: boolean; enumerable?: boolean; get?(): any; set?(v: any): void; }
32. Property Descriptor interface AccessorDescriptor { configurable?: boolean; enumerable?: boolean; get?(): any; set?(v: any): void; }
33. Property Descriptor interface AccessorDescriptor { configurable?: boolean; enumerable?: boolean; get?(): any; set?(v: any): void; }
34. Property Descriptor interface AccessorDescriptor { configurable?: boolean; enumerable?: boolean; get?(): any; set?(v: any): void; }
35. Property Descriptor type PropertyDescriptor = DataDescriptor | AccessorDescriptor;
36. How can I implement one?
37. Simple validator function validator(predicate) { return function(memberDescriptor) { let { descriptor } = memberDescriptor; if ('writable' in descriptor) { decorateData(descriptor, predicate); } else { decorateAccessor(descriptor, predicate); } return memberDescriptor; }; };
38. Simple validator function validator(predicate) { return function(memberDescriptor) { let { descriptor } = memberDescriptor; if ('writable' in descriptor) { decorateData(descriptor, predicate); } else { decorateAccessor(descriptor, predicate); } return memberDescriptor; }; };
39. Simple validator function validator(predicate) { return function(memberDescriptor) { let { descriptor } = memberDescriptor; if ('writable' in descriptor) { decorateData(descriptor, predicate); } else { decorateAccessor(descriptor, predicate); } return memberDescriptor; }; };
40. Simple validator function validator(predicate) { return function(memberDescriptor) { let { descriptor } = memberDescriptor; if ('writable' in descriptor) { decorateData(descriptor, predicate); } else { decorateAccessor(descriptor, predicate); } return memberDescriptor; }; };
41. Simple validator function validator(predicate) { return function(memberDescriptor) { let { descriptor } = memberDescriptor; if ('writable' in descriptor) { decorateData(descriptor, predicate); } else { decorateAccessor(descriptor, predicate); } return memberDescriptor; }; };
42. Simple validator function validator(predicate) { return function(memberDescriptor) { let { descriptor } = memberDescriptor; if ('writable' in descriptor) { decorateData(descriptor, predicate); } else { decorateAccessor(descriptor, predicate); } return memberDescriptor; }; };
43. Simple validator function validator(predicate) { return function(memberDescriptor) { let { descriptor } = memberDescriptor; if ('writable' in descriptor) { decorateData(descriptor, predicate); } else { decorateAccessor(descriptor, predicate); } return memberDescriptor; }; };
44. Simple validator function decorateData(descriptor, predicate) { let { value } = descriptor; descriptor.get = () => value; descriptor.set = (newValue) => { if (predicate(newValue)) { value = newValue; } }; delete descriptor.writable; delete descriptor.value; }
45. Simple validator function decorateData(descriptor, predicate) { let { value } = descriptor; descriptor.get = () => value; descriptor.set = (newValue) => { if (predicate(newValue)) { value = newValue; } }; delete descriptor.writable; delete descriptor.value; }
46. Simple validator function decorateData(descriptor, predicate) { let { value } = descriptor; descriptor.get = () => value; descriptor.set = (newValue) => { if (predicate(newValue)) { value = newValue; } }; delete descriptor.writable; delete descriptor.value; }
47. Simple validator function decorateData(descriptor, predicate) { let { value } = descriptor; descriptor.get = () => value; descriptor.set = (newValue) => { if (predicate(newValue)) { value = newValue; } }; delete descriptor.writable; delete descriptor.value; }
48. Simple validator function decorateData(descriptor, predicate) { let { value } = descriptor; descriptor.get = () => value; descriptor.set = (newValue) => { if (predicate(newValue)) { value = newValue; } }; delete descriptor.writable; delete descriptor.value; }
49. Simple validator function decorateData(descriptor, predicate) { let { value } = descriptor; descriptor.get = () => value; descriptor.set = (newValue) => { if (predicate(newValue)) { value = newValue; } }; delete descriptor.writable; delete descriptor.value; }
50. Simple validator function decorateData(descriptor, predicate) { let { value } = descriptor; descriptor.get = () => value; descriptor.set = (newValue) => { if (predicate(newValue)) { value = newValue; } }; delete descriptor.writable; delete descriptor.value; }
51. Simple validator function decorateAccessor(descriptor, predicate) { let { set } = descriptor; descriptor.set = (newValue) => { if (predicate(newValue)) { set(newValue); } }; }
52. Simple validator function decorateAccessor(descriptor, predicate) { let { set } = descriptor; descriptor.set = (newValue) => { if (predicate(newValue)) { set(newValue); } }; }
53. Simple validator function decorateAccessor(descriptor, predicate) { let { set } = descriptor; descriptor.set = (newValue) => { if (predicate(newValue)) { set(newValue); } }; }
54. Simple validator function decorateAccessor(descriptor, predicate) { let { set } = descriptor; descriptor.set = (newValue) => { if (predicate(newValue)) { set(newValue); } }; }
55. Simple validator function decorateAccessor(descriptor, predicate) { let { set } = descriptor; descriptor.set = (newValue) => { if (predicate(newValue)) { set(newValue); } }; }
56. Simple validator const isString = validator( value => typeof value === 'string’ ); class MyClass { @isString @validator(x => x !== '1234') password = ""; }
57. Gotchas
58. Evaluation / Execution
59. Simple validator const isString = validator( value => typeof value === 'string’ ); class MyClass { @isString @validator(x => x !== '1234') password = ""; }
60. Simple validator const isString = validator( value => typeof value === 'string’ ); class MyClass { @isString @validator(x => x !== '1234') password = ""; } Evaluation
61. Simple validator const isString = validator( value => typeof value === 'string’ ); class MyClass { @isString @validator(x => x !== '1234') password = ""; } Evaluation
62. Simple validator const isString = validator( value => typeof value === 'string’ ); class MyClass { @isString @validator(x => x !== '1234') password = ""; } Execution
63. Simple validator const isString = validator( value => typeof value === 'string’ ); class MyClass { @isString @validator(x => x !== '1234') password = ""; } Execution
64. Simple validator isString( validator(el => el === '1234')( passwordMemberDescriptor ) )
65. setters / getters
66. setters / getters class MyClass { @duplicate get hola() { return 'hola'; } @map( x => x.toLowerCase() ) set hola(x) { send(x); } }
67. setters / getters class MyClass { @duplicateGetter @mapSetter( x => x.toLowerCase() ) get hola() { return 'hola'; } set hola(x) { send(x); } }
68. setters / getters class MyClass { get hola() { return 'hola'; } @duplicateGetter @mapSetter( x => x.toLowerCase() ) set hola(x) { send(x); } }
69. Cool Things that Can Be Done
70. Classics • Read Only properties • Validations • Computed Properties • Memoized methods • Autobinding • Better Singleton Classes • Conversion setters and getters • Deprecate methods • Debounce • Throttle • Map returned value
71. Different express API @express('/posts') class Posts { @get index(req, res) { } @authorized @post create(req, res) { } @get(':id') show(req, res) { } }
72. @I18ned class Operations { @i18nMethod('operations.sum') static sum(...args) { return args.reduce((a, b) => a+b, 0); } } Operations.sum(1, 2) // 3 Operations.suma(2, 3) // 5 Operations.batuketa(2, 3) // 5 I18ned API
73. Any questions? Sergio Arbeo Serabe Serabe
74. Thank you! Sergio Arbeo Serabe Serabe