BranchesTags

Latest commit

History

23 Commits

Folders and files

NameName
Last commit message
Last commit date
interop
interop
README.md
README.md

Repository files navigation

This file is under active development. Refer to interop/reusability.md for the most up to date description.

Summary

Decorators make it possible to annotate and modify classes and properties at design time.

While ES5 object literals support arbitrary expressions in the value position, ES6 classes only support literal functions as values. Decorators restore the ability to run code at design time, while maintaining a declarative syntax.

Detailed Design

A decorator is:

  • an expression
  • that evaluates to a function
  • that takes the target, name, and decorator descriptor as arguments
  • and optionally returns a decorator descriptor to install on the target object

Consider a simple class definition:

classPerson{name(){return`${this.first}${this.last}`}}

Evaluating this class results in installing the name function onto Person.prototype, roughly like this:

Object.defineProperty(Person.prototype,'name',{value: specifiedFunction,enumerable: false,configurable: true,writable: true});

A decorator precedes the syntax that defines a property:

classPerson{
@readonlyname(){return`${this.first}${this.last}`}}

Now, before installing the descriptor onto Person.prototype, the engine first invokes the decorator:

letdescription={type: 'method',initializer: ()=>specifiedFunction,enumerable: false,configurable: true,writable: true};description=readonly(Person.prototype,'name',description)||description;defineDecoratedProperty(Person.prototype,'name',description);functiondefineDecoratedProperty(target,{ initializer, enumerable, configurable, writable }){Object.defineProperty(target,{value: initializer(), enumerable, configurable, writable });}

The has an opportunity to intercede before the relevant defineProperty actually occurs.

A decorator that precedes syntactic getters and/or setters operates on an accessor description:

classPerson{
@nonenumerablegetkidCount(){returnthis.children.length;}}letdescription={type: 'accessor',get: specifiedGetter,enumerable: true,configurable: true}functionnonenumerable(target,name,description){descriptor.enumerable=false;returndescriptor;}

A more detailed example illustrating a simple decorator that memoizes an accessor.

classPerson{
@memoizegetname(){return`${this.first}${this.last}`}setname(val){let[first,last]=val.split(' ');this.first=first;this.last=last;}}letmemoized=newWeakMap();functionmemoize(target,name,descriptor){letgetter=descriptor.get,setter=descriptor.set;descriptor.get=function(){lettable=memoizationFor(this);if(nameintable){returntable[name];}returntable[name]=getter.call(this);}descriptor.set=function(val){lettable=memoizationFor(this);setter.call(this,val);table[name]=val;}}functionmemoizationFor(obj){lettable=memoized.get(obj);if(!table){table=Object.create(null);memoized.set(obj,table);}returntable;}

It is also possible to decorate the class itself. In this case, the decorator takes the target constructor.

// A simple decorator
@annotationclassMyClass{}functionannotation(target){// Add a property on targettarget.annotated=true;}

Since decorators are expressions, decorators can take additional arguments and act like a factory.

@isTestable(true)classMyClass{}functionisTestable(value){returnfunctiondecorator(target){target.isTestable=value;}}

The same technique could be used on property decorators:

classC{
@enumerable(false)method(){}}functionenumerable(value){returnfunction(target,key,descriptor){descriptor.enumerable=value;returndescriptor;}}

Because descriptor decorators operate on targets, they also naturally work on static methods. The only difference is that the first argument to the decorator will be the class itself (the constructor) rather than the prototype, because that is the target of the original Object.defineProperty.

For the same reason, descriptor decorators work on object literals, and pass the object being created to the decorator.

Desugaring

Class Declaration

Syntax

@F("color")
@GclassFoo{}

Desugaring (ES6)

varFoo=(function(){classFoo{}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();

Desugaring (ES5)

varFoo=(function(){functionFoo(){}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();

Class Method Declaration

Syntax

classFoo{
@F("color")
@Gbar(){}}

Desugaring (ES6)

varFoo=(function(){classFoo{bar(){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();

Desugaring (ES5)

varFoo=(function(){functionFoo(){}Foo.prototype.bar=function(){}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();

Class Accessor Declaration

Syntax

classFoo{
@F("color")
@Ggetbar(){}setbar(value){}}

Desugaring (ES6)

varFoo=(function(){classFoo{getbar(){}setbar(value){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();

Desugaring (ES5)

varFoo=(function(){functionFoo(){}Object.defineProperty(Foo.prototype,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();

Object Literal Method Declaration

Syntax

varo={
@F("color")
@Gbar(){}}

Desugaring (ES6)

varo=(function(){var_obj={bar(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();

Desugaring (ES5)

varo=(function(){var_obj={bar: function(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();

Object Literal Accessor Declaration

Syntax

varo={
@F("color")
@Ggetbar(){}setbar(value){}}

Desugaring (ES6)

varo=(function(){var_obj={getbar(){}setbar(value){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();

Desugaring (ES5)

varo=(function(){var_obj={}Object.defineProperty(_obj,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();

Grammar

DecoratorList [Yield] :
DecoratorList [?Yield]optDecorator [?Yield]

Decorator [Yield] :
@LeftHandSideExpression [?Yield]

PropertyDefinition [Yield] :
IdentifierReference [?Yield]
CoverInitializedName [?Yield]
PropertyName [?Yield]:AssignmentExpression [In, ?Yield]
DecoratorList [?Yield]optMethodDefinition [?Yield]

CoverMemberExpressionSquareBracketsAndComputedPropertyName [Yield] :
[Expression [In, ?Yield]]

NOTE The production CoverMemberExpressionSquareBracketsAndComputedPropertyName is used to cover parsing a MemberExpression that is part of a Decorator inside of an ObjectLiteral or ClassBody, to avoid lookahead when parsing a decorator against a ComputedPropertyName.

PropertyName [Yield, GeneratorParameter] :
LiteralPropertyName
[+GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName
[~GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]

MemberExpression [Yield] :
[Lexical goal InputElementRegExp] PrimaryExpression [?Yield]
MemberExpression [?Yield]CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [?Yield].IdentifierName
MemberExpression [?Yield]TemplateLiteral [?Yield]
SuperProperty [?Yield]
NewSuperArguments [?Yield]
newMemberExpression [?Yield]Arguments [?Yield]

SuperProperty [Yield] :
superCoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
super.IdentifierName

ClassDeclaration [Yield, Default] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]ClassTail [?Yield]
[+Default] DecoratorList [?Yield]optclassClassTail [?Yield]

ClassExpression [Yield, GeneratorParameter] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]optClassTail [?Yield, ?GeneratorParameter]

ClassElement [Yield] :
DecoratorList [?Yield]optMethodDefinition [?Yield]
DecoratorList [?Yield]optstaticMethodDefinition [?Yield]

Notes

In order to more directly support metadata-only decorators, a desired feature for static analysis, the TypeScript project has made it possible for its users to define ambient decorators that support a restricted syntax that can be properly analyzed without evaluation.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
interop
interop
README.md
README.md
Repository files navigation
This file is under active development. Refer to interop/reusability.md for the
most up to date description.
Summary
Decorators make it possible to annotate and modify classes and properties at
design time.
While ES5 object literals support arbitrary expressions in the value position,
ES6 classes only support literal functions as values. Decorators restore the
ability to run code at design time, while maintaining a declarative syntax.
Detailed Design
A decorator is:
  • an expression
  • that evaluates to a function
  • that takes the target, name, and decorator descriptor as arguments
  • and optionally returns a decorator descriptor to install on the target object
Consider a simple class definition:
classPerson{name(){return`${this.first}${this.last}`}}
Evaluating this class results in installing the name function onto
Person.prototype, roughly like this:
Object.defineProperty(Person.prototype,'name',{value: specifiedFunction,enumerable: false,configurable: true,writable: true});
A decorator precedes the syntax that defines a property:
classPerson{
@readonlyname(){return`${this.first}${this.last}`}}
Now, before installing the descriptor onto Person.prototype, the engine first
invokes the decorator:
letdescription={type: 'method',initializer: ()=>specifiedFunction,enumerable: false,configurable: true,writable: true};description=readonly(Person.prototype,'name',description)||description;defineDecoratedProperty(Person.prototype,'name',description);functiondefineDecoratedProperty(target,{ initializer, enumerable, configurable, writable }){Object.defineProperty(target,{value: initializer(), enumerable, configurable, writable });}
The has an opportunity to intercede before the relevant defineProperty actually occurs.
A decorator that precedes syntactic getters and/or setters operates on an accessor description:
classPerson{
@nonenumerablegetkidCount(){returnthis.children.length;}}letdescription={type: 'accessor',get: specifiedGetter,enumerable: true,configurable: true}functionnonenumerable(target,name,description){descriptor.enumerable=false;returndescriptor;}
A more detailed example illustrating a simple decorator that memoizes an
accessor.
classPerson{
@memoizegetname(){return`${this.first}${this.last}`}setname(val){let[first,last]=val.split(' ');this.first=first;this.last=last;}}letmemoized=newWeakMap();functionmemoize(target,name,descriptor){letgetter=descriptor.get,setter=descriptor.set;descriptor.get=function(){lettable=memoizationFor(this);if(nameintable){returntable[name];}returntable[name]=getter.call(this);}descriptor.set=function(val){lettable=memoizationFor(this);setter.call(this,val);table[name]=val;}}functionmemoizationFor(obj){lettable=memoized.get(obj);if(!table){table=Object.create(null);memoized.set(obj,table);}returntable;}
It is also possible to decorate the class itself. In this case, the decorator
takes the target constructor.
// A simple decorator
@annotationclassMyClass{}functionannotation(target){// Add a property on targettarget.annotated=true;}
Since decorators are expressions, decorators can take additional arguments and
act like a factory.
@isTestable(true)classMyClass{}functionisTestable(value){returnfunctiondecorator(target){target.isTestable=value;}}
The same technique could be used on property decorators:
classC{
@enumerable(false)method(){}}functionenumerable(value){returnfunction(target,key,descriptor){descriptor.enumerable=value;returndescriptor;}}
Because descriptor decorators operate on targets, they also naturally work on
static methods. The only difference is that the first argument to the decorator
will be the class itself (the constructor) rather than the prototype, because
that is the target of the original Object.defineProperty.
For the same reason, descriptor decorators work on object literals, and pass
the object being created to the decorator.
Desugaring
Class Declaration
Syntax
@F("color")
@GclassFoo{}
Desugaring (ES6)
varFoo=(function(){classFoo{}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Class Method Declaration
Syntax
classFoo{
@F("color")
@Gbar(){}}
Desugaring (ES6)
varFoo=(function(){classFoo{bar(){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo.prototype.bar=function(){}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Class Accessor Declaration
Syntax
classFoo{
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varFoo=(function(){classFoo{getbar(){}setbar(value){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Object.defineProperty(Foo.prototype,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Object Literal Method Declaration
Syntax
varo={
@F("color")
@Gbar(){}}
Desugaring (ES6)
varo=(function(){var_obj={bar(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={bar: function(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Object Literal Accessor Declaration
Syntax
varo={
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varo=(function(){var_obj={getbar(){}setbar(value){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={}Object.defineProperty(_obj,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Grammar
DecoratorList [Yield] :
DecoratorList [?Yield]optDecorator [?Yield]
Decorator [Yield] :
@LeftHandSideExpression [?Yield]
PropertyDefinition [Yield] :
IdentifierReference [?Yield]
CoverInitializedName [?Yield]
PropertyName [?Yield]:AssignmentExpression [In, ?Yield]
DecoratorList [?Yield]optMethodDefinition [?Yield]
CoverMemberExpressionSquareBracketsAndComputedPropertyName [Yield] :
[Expression [In, ?Yield]]
NOTE	The production CoverMemberExpressionSquareBracketsAndComputedPropertyName is used to cover parsing a MemberExpression that is part of a Decorator inside of an ObjectLiteral or ClassBody, to avoid lookahead when parsing a decorator against a ComputedPropertyName.
PropertyName [Yield, GeneratorParameter] :
LiteralPropertyName

[+GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName

[~GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [Yield] :

[Lexical goal InputElementRegExp] PrimaryExpression [?Yield]
MemberExpression [?Yield]CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [?Yield].IdentifierName
MemberExpression [?Yield]TemplateLiteral [?Yield]
SuperProperty [?Yield]
NewSuperArguments [?Yield]
newMemberExpression [?Yield]Arguments [?Yield]
SuperProperty [Yield] :
superCoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
super.IdentifierName
ClassDeclaration [Yield, Default] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]ClassTail [?Yield]

[+Default] DecoratorList [?Yield]optclassClassTail [?Yield]
ClassExpression [Yield, GeneratorParameter] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]optClassTail [?Yield, ?GeneratorParameter]
ClassElement [Yield] :
DecoratorList [?Yield]optMethodDefinition [?Yield]
DecoratorList [?Yield]optstaticMethodDefinition [?Yield]
Notes
In order to more directly support metadata-only decorators, a desired feature
for static analysis, the TypeScript project has made it possible for its users
to define ambient decorators
that support a restricted syntax that can be properly analyzed without evaluation.
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
interop
interop
README.md
README.md
Repository files navigation
This file is under active development. Refer to interop/reusability.md for the
most up to date description.
Summary
Decorators make it possible to annotate and modify classes and properties at
design time.
While ES5 object literals support arbitrary expressions in the value position,
ES6 classes only support literal functions as values. Decorators restore the
ability to run code at design time, while maintaining a declarative syntax.
Detailed Design
A decorator is:
  • an expression
  • that evaluates to a function
  • that takes the target, name, and decorator descriptor as arguments
  • and optionally returns a decorator descriptor to install on the target object
Consider a simple class definition:
classPerson{name(){return`${this.first}${this.last}`}}
Evaluating this class results in installing the name function onto
Person.prototype, roughly like this:
Object.defineProperty(Person.prototype,'name',{value: specifiedFunction,enumerable: false,configurable: true,writable: true});
A decorator precedes the syntax that defines a property:
classPerson{
@readonlyname(){return`${this.first}${this.last}`}}
Now, before installing the descriptor onto Person.prototype, the engine first
invokes the decorator:
letdescription={type: 'method',initializer: ()=>specifiedFunction,enumerable: false,configurable: true,writable: true};description=readonly(Person.prototype,'name',description)||description;defineDecoratedProperty(Person.prototype,'name',description);functiondefineDecoratedProperty(target,{ initializer, enumerable, configurable, writable }){Object.defineProperty(target,{value: initializer(), enumerable, configurable, writable });}
The has an opportunity to intercede before the relevant defineProperty actually occurs.
A decorator that precedes syntactic getters and/or setters operates on an accessor description:
classPerson{
@nonenumerablegetkidCount(){returnthis.children.length;}}letdescription={type: 'accessor',get: specifiedGetter,enumerable: true,configurable: true}functionnonenumerable(target,name,description){descriptor.enumerable=false;returndescriptor;}
A more detailed example illustrating a simple decorator that memoizes an
accessor.
classPerson{
@memoizegetname(){return`${this.first}${this.last}`}setname(val){let[first,last]=val.split(' ');this.first=first;this.last=last;}}letmemoized=newWeakMap();functionmemoize(target,name,descriptor){letgetter=descriptor.get,setter=descriptor.set;descriptor.get=function(){lettable=memoizationFor(this);if(nameintable){returntable[name];}returntable[name]=getter.call(this);}descriptor.set=function(val){lettable=memoizationFor(this);setter.call(this,val);table[name]=val;}}functionmemoizationFor(obj){lettable=memoized.get(obj);if(!table){table=Object.create(null);memoized.set(obj,table);}returntable;}
It is also possible to decorate the class itself. In this case, the decorator
takes the target constructor.
// A simple decorator
@annotationclassMyClass{}functionannotation(target){// Add a property on targettarget.annotated=true;}
Since decorators are expressions, decorators can take additional arguments and
act like a factory.
@isTestable(true)classMyClass{}functionisTestable(value){returnfunctiondecorator(target){target.isTestable=value;}}
The same technique could be used on property decorators:
classC{
@enumerable(false)method(){}}functionenumerable(value){returnfunction(target,key,descriptor){descriptor.enumerable=value;returndescriptor;}}
Because descriptor decorators operate on targets, they also naturally work on
static methods. The only difference is that the first argument to the decorator
will be the class itself (the constructor) rather than the prototype, because
that is the target of the original Object.defineProperty.
For the same reason, descriptor decorators work on object literals, and pass
the object being created to the decorator.
Desugaring
Class Declaration
Syntax
@F("color")
@GclassFoo{}
Desugaring (ES6)
varFoo=(function(){classFoo{}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Class Method Declaration
Syntax
classFoo{
@F("color")
@Gbar(){}}
Desugaring (ES6)
varFoo=(function(){classFoo{bar(){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo.prototype.bar=function(){}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Class Accessor Declaration
Syntax
classFoo{
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varFoo=(function(){classFoo{getbar(){}setbar(value){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Object.defineProperty(Foo.prototype,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Object Literal Method Declaration
Syntax
varo={
@F("color")
@Gbar(){}}
Desugaring (ES6)
varo=(function(){var_obj={bar(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={bar: function(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Object Literal Accessor Declaration
Syntax
varo={
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varo=(function(){var_obj={getbar(){}setbar(value){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={}Object.defineProperty(_obj,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Grammar
DecoratorList [Yield] :
DecoratorList [?Yield]optDecorator [?Yield]
Decorator [Yield] :
@LeftHandSideExpression [?Yield]
PropertyDefinition [Yield] :
IdentifierReference [?Yield]
CoverInitializedName [?Yield]
PropertyName [?Yield]:AssignmentExpression [In, ?Yield]
DecoratorList [?Yield]optMethodDefinition [?Yield]
CoverMemberExpressionSquareBracketsAndComputedPropertyName [Yield] :
[Expression [In, ?Yield]]
NOTE	The production CoverMemberExpressionSquareBracketsAndComputedPropertyName is used to cover parsing a MemberExpression that is part of a Decorator inside of an ObjectLiteral or ClassBody, to avoid lookahead when parsing a decorator against a ComputedPropertyName.
PropertyName [Yield, GeneratorParameter] :
LiteralPropertyName

[+GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName

[~GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [Yield] :

[Lexical goal InputElementRegExp] PrimaryExpression [?Yield]
MemberExpression [?Yield]CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [?Yield].IdentifierName
MemberExpression [?Yield]TemplateLiteral [?Yield]
SuperProperty [?Yield]
NewSuperArguments [?Yield]
newMemberExpression [?Yield]Arguments [?Yield]
SuperProperty [Yield] :
superCoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
super.IdentifierName
ClassDeclaration [Yield, Default] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]ClassTail [?Yield]

[+Default] DecoratorList [?Yield]optclassClassTail [?Yield]
ClassExpression [Yield, GeneratorParameter] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]optClassTail [?Yield, ?GeneratorParameter]
ClassElement [Yield] :
DecoratorList [?Yield]optMethodDefinition [?Yield]
DecoratorList [?Yield]optstaticMethodDefinition [?Yield]
Notes
In order to more directly support metadata-only decorators, a desired feature
for static analysis, the TypeScript project has made it possible for its users
to define ambient decorators
that support a restricted syntax that can be properly analyzed without evaluation.
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
interop
interop
README.md
README.md
Repository files navigation
This file is under active development. Refer to interop/reusability.md for the
most up to date description.
Summary
Decorators make it possible to annotate and modify classes and properties at
design time.
While ES5 object literals support arbitrary expressions in the value position,
ES6 classes only support literal functions as values. Decorators restore the
ability to run code at design time, while maintaining a declarative syntax.
Detailed Design
A decorator is:
  • an expression
  • that evaluates to a function
  • that takes the target, name, and decorator descriptor as arguments
  • and optionally returns a decorator descriptor to install on the target object
Consider a simple class definition:
classPerson{name(){return`${this.first}${this.last}`}}
Evaluating this class results in installing the name function onto
Person.prototype, roughly like this:
Object.defineProperty(Person.prototype,'name',{value: specifiedFunction,enumerable: false,configurable: true,writable: true});
A decorator precedes the syntax that defines a property:
classPerson{
@readonlyname(){return`${this.first}${this.last}`}}
Now, before installing the descriptor onto Person.prototype, the engine first
invokes the decorator:
letdescription={type: 'method',initializer: ()=>specifiedFunction,enumerable: false,configurable: true,writable: true};description=readonly(Person.prototype,'name',description)||description;defineDecoratedProperty(Person.prototype,'name',description);functiondefineDecoratedProperty(target,{ initializer, enumerable, configurable, writable }){Object.defineProperty(target,{value: initializer(), enumerable, configurable, writable });}
The has an opportunity to intercede before the relevant defineProperty actually occurs.
A decorator that precedes syntactic getters and/or setters operates on an accessor description:
classPerson{
@nonenumerablegetkidCount(){returnthis.children.length;}}letdescription={type: 'accessor',get: specifiedGetter,enumerable: true,configurable: true}functionnonenumerable(target,name,description){descriptor.enumerable=false;returndescriptor;}
A more detailed example illustrating a simple decorator that memoizes an
accessor.
classPerson{
@memoizegetname(){return`${this.first}${this.last}`}setname(val){let[first,last]=val.split(' ');this.first=first;this.last=last;}}letmemoized=newWeakMap();functionmemoize(target,name,descriptor){letgetter=descriptor.get,setter=descriptor.set;descriptor.get=function(){lettable=memoizationFor(this);if(nameintable){returntable[name];}returntable[name]=getter.call(this);}descriptor.set=function(val){lettable=memoizationFor(this);setter.call(this,val);table[name]=val;}}functionmemoizationFor(obj){lettable=memoized.get(obj);if(!table){table=Object.create(null);memoized.set(obj,table);}returntable;}
It is also possible to decorate the class itself. In this case, the decorator
takes the target constructor.
// A simple decorator
@annotationclassMyClass{}functionannotation(target){// Add a property on targettarget.annotated=true;}
Since decorators are expressions, decorators can take additional arguments and
act like a factory.
@isTestable(true)classMyClass{}functionisTestable(value){returnfunctiondecorator(target){target.isTestable=value;}}
The same technique could be used on property decorators:
classC{
@enumerable(false)method(){}}functionenumerable(value){returnfunction(target,key,descriptor){descriptor.enumerable=value;returndescriptor;}}
Because descriptor decorators operate on targets, they also naturally work on
static methods. The only difference is that the first argument to the decorator
will be the class itself (the constructor) rather than the prototype, because
that is the target of the original Object.defineProperty.
For the same reason, descriptor decorators work on object literals, and pass
the object being created to the decorator.
Desugaring
Class Declaration
Syntax
@F("color")
@GclassFoo{}
Desugaring (ES6)
varFoo=(function(){classFoo{}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Class Method Declaration
Syntax
classFoo{
@F("color")
@Gbar(){}}
Desugaring (ES6)
varFoo=(function(){classFoo{bar(){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo.prototype.bar=function(){}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Class Accessor Declaration
Syntax
classFoo{
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varFoo=(function(){classFoo{getbar(){}setbar(value){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Object.defineProperty(Foo.prototype,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Object Literal Method Declaration
Syntax
varo={
@F("color")
@Gbar(){}}
Desugaring (ES6)
varo=(function(){var_obj={bar(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={bar: function(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Object Literal Accessor Declaration
Syntax
varo={
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varo=(function(){var_obj={getbar(){}setbar(value){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={}Object.defineProperty(_obj,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Grammar
DecoratorList [Yield] :
DecoratorList [?Yield]optDecorator [?Yield]
Decorator [Yield] :
@LeftHandSideExpression [?Yield]
PropertyDefinition [Yield] :
IdentifierReference [?Yield]
CoverInitializedName [?Yield]
PropertyName [?Yield]:AssignmentExpression [In, ?Yield]
DecoratorList [?Yield]optMethodDefinition [?Yield]
CoverMemberExpressionSquareBracketsAndComputedPropertyName [Yield] :
[Expression [In, ?Yield]]
NOTE	The production CoverMemberExpressionSquareBracketsAndComputedPropertyName is used to cover parsing a MemberExpression that is part of a Decorator inside of an ObjectLiteral or ClassBody, to avoid lookahead when parsing a decorator against a ComputedPropertyName.
PropertyName [Yield, GeneratorParameter] :
LiteralPropertyName

[+GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName

[~GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [Yield] :

[Lexical goal InputElementRegExp] PrimaryExpression [?Yield]
MemberExpression [?Yield]CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [?Yield].IdentifierName
MemberExpression [?Yield]TemplateLiteral [?Yield]
SuperProperty [?Yield]
NewSuperArguments [?Yield]
newMemberExpression [?Yield]Arguments [?Yield]
SuperProperty [Yield] :
superCoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
super.IdentifierName
ClassDeclaration [Yield, Default] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]ClassTail [?Yield]

[+Default] DecoratorList [?Yield]optclassClassTail [?Yield]
ClassExpression [Yield, GeneratorParameter] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]optClassTail [?Yield, ?GeneratorParameter]
ClassElement [Yield] :
DecoratorList [?Yield]optMethodDefinition [?Yield]
DecoratorList [?Yield]optstaticMethodDefinition [?Yield]
Notes
In order to more directly support metadata-only decorators, a desired feature
for static analysis, the TypeScript project has made it possible for its users
to define ambient decorators
that support a restricted syntax that can be properly analyzed without evaluation.
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
interop
interop
README.md
README.md
Repository files navigation
This file is under active development. Refer to interop/reusability.md for the
most up to date description.
Summary
Decorators make it possible to annotate and modify classes and properties at
design time.
While ES5 object literals support arbitrary expressions in the value position,
ES6 classes only support literal functions as values. Decorators restore the
ability to run code at design time, while maintaining a declarative syntax.
Detailed Design
A decorator is:
  • an expression
  • that evaluates to a function
  • that takes the target, name, and decorator descriptor as arguments
  • and optionally returns a decorator descriptor to install on the target object
Consider a simple class definition:
classPerson{name(){return`${this.first}${this.last}`}}
Evaluating this class results in installing the name function onto
Person.prototype, roughly like this:
Object.defineProperty(Person.prototype,'name',{value: specifiedFunction,enumerable: false,configurable: true,writable: true});
A decorator precedes the syntax that defines a property:
classPerson{
@readonlyname(){return`${this.first}${this.last}`}}
Now, before installing the descriptor onto Person.prototype, the engine first
invokes the decorator:
letdescription={type: 'method',initializer: ()=>specifiedFunction,enumerable: false,configurable: true,writable: true};description=readonly(Person.prototype,'name',description)||description;defineDecoratedProperty(Person.prototype,'name',description);functiondefineDecoratedProperty(target,{ initializer, enumerable, configurable, writable }){Object.defineProperty(target,{value: initializer(), enumerable, configurable, writable });}
The has an opportunity to intercede before the relevant defineProperty actually occurs.
A decorator that precedes syntactic getters and/or setters operates on an accessor description:
classPerson{
@nonenumerablegetkidCount(){returnthis.children.length;}}letdescription={type: 'accessor',get: specifiedGetter,enumerable: true,configurable: true}functionnonenumerable(target,name,description){descriptor.enumerable=false;returndescriptor;}
A more detailed example illustrating a simple decorator that memoizes an
accessor.
classPerson{
@memoizegetname(){return`${this.first}${this.last}`}setname(val){let[first,last]=val.split(' ');this.first=first;this.last=last;}}letmemoized=newWeakMap();functionmemoize(target,name,descriptor){letgetter=descriptor.get,setter=descriptor.set;descriptor.get=function(){lettable=memoizationFor(this);if(nameintable){returntable[name];}returntable[name]=getter.call(this);}descriptor.set=function(val){lettable=memoizationFor(this);setter.call(this,val);table[name]=val;}}functionmemoizationFor(obj){lettable=memoized.get(obj);if(!table){table=Object.create(null);memoized.set(obj,table);}returntable;}
It is also possible to decorate the class itself. In this case, the decorator
takes the target constructor.
// A simple decorator
@annotationclassMyClass{}functionannotation(target){// Add a property on targettarget.annotated=true;}
Since decorators are expressions, decorators can take additional arguments and
act like a factory.
@isTestable(true)classMyClass{}functionisTestable(value){returnfunctiondecorator(target){target.isTestable=value;}}
The same technique could be used on property decorators:
classC{
@enumerable(false)method(){}}functionenumerable(value){returnfunction(target,key,descriptor){descriptor.enumerable=value;returndescriptor;}}
Because descriptor decorators operate on targets, they also naturally work on
static methods. The only difference is that the first argument to the decorator
will be the class itself (the constructor) rather than the prototype, because
that is the target of the original Object.defineProperty.
For the same reason, descriptor decorators work on object literals, and pass
the object being created to the decorator.
Desugaring
Class Declaration
Syntax
@F("color")
@GclassFoo{}
Desugaring (ES6)
varFoo=(function(){classFoo{}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Class Method Declaration
Syntax
classFoo{
@F("color")
@Gbar(){}}
Desugaring (ES6)
varFoo=(function(){classFoo{bar(){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo.prototype.bar=function(){}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Class Accessor Declaration
Syntax
classFoo{
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varFoo=(function(){classFoo{getbar(){}setbar(value){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Object.defineProperty(Foo.prototype,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Object Literal Method Declaration
Syntax
varo={
@F("color")
@Gbar(){}}
Desugaring (ES6)
varo=(function(){var_obj={bar(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={bar: function(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Object Literal Accessor Declaration
Syntax
varo={
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varo=(function(){var_obj={getbar(){}setbar(value){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={}Object.defineProperty(_obj,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Grammar
DecoratorList [Yield] :
DecoratorList [?Yield]optDecorator [?Yield]
Decorator [Yield] :
@LeftHandSideExpression [?Yield]
PropertyDefinition [Yield] :
IdentifierReference [?Yield]
CoverInitializedName [?Yield]
PropertyName [?Yield]:AssignmentExpression [In, ?Yield]
DecoratorList [?Yield]optMethodDefinition [?Yield]
CoverMemberExpressionSquareBracketsAndComputedPropertyName [Yield] :
[Expression [In, ?Yield]]
NOTE	The production CoverMemberExpressionSquareBracketsAndComputedPropertyName is used to cover parsing a MemberExpression that is part of a Decorator inside of an ObjectLiteral or ClassBody, to avoid lookahead when parsing a decorator against a ComputedPropertyName.
PropertyName [Yield, GeneratorParameter] :
LiteralPropertyName

[+GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName

[~GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [Yield] :

[Lexical goal InputElementRegExp] PrimaryExpression [?Yield]
MemberExpression [?Yield]CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [?Yield].IdentifierName
MemberExpression [?Yield]TemplateLiteral [?Yield]
SuperProperty [?Yield]
NewSuperArguments [?Yield]
newMemberExpression [?Yield]Arguments [?Yield]
SuperProperty [Yield] :
superCoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
super.IdentifierName
ClassDeclaration [Yield, Default] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]ClassTail [?Yield]

[+Default] DecoratorList [?Yield]optclassClassTail [?Yield]
ClassExpression [Yield, GeneratorParameter] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]optClassTail [?Yield, ?GeneratorParameter]
ClassElement [Yield] :
DecoratorList [?Yield]optMethodDefinition [?Yield]
DecoratorList [?Yield]optstaticMethodDefinition [?Yield]
Notes
In order to more directly support metadata-only decorators, a desired feature
for static analysis, the TypeScript project has made it possible for its users
to define ambient decorators
that support a restricted syntax that can be properly analyzed without evaluation.
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
interop
interop
README.md
README.md
Repository files navigation
This file is under active development. Refer to interop/reusability.md for the
most up to date description.
Summary
Decorators make it possible to annotate and modify classes and properties at
design time.
While ES5 object literals support arbitrary expressions in the value position,
ES6 classes only support literal functions as values. Decorators restore the
ability to run code at design time, while maintaining a declarative syntax.
Detailed Design
A decorator is:
  • an expression
  • that evaluates to a function
  • that takes the target, name, and decorator descriptor as arguments
  • and optionally returns a decorator descriptor to install on the target object
Consider a simple class definition:
classPerson{name(){return`${this.first}${this.last}`}}
Evaluating this class results in installing the name function onto
Person.prototype, roughly like this:
Object.defineProperty(Person.prototype,'name',{value: specifiedFunction,enumerable: false,configurable: true,writable: true});
A decorator precedes the syntax that defines a property:
classPerson{
@readonlyname(){return`${this.first}${this.last}`}}
Now, before installing the descriptor onto Person.prototype, the engine first
invokes the decorator:
letdescription={type: 'method',initializer: ()=>specifiedFunction,enumerable: false,configurable: true,writable: true};description=readonly(Person.prototype,'name',description)||description;defineDecoratedProperty(Person.prototype,'name',description);functiondefineDecoratedProperty(target,{ initializer, enumerable, configurable, writable }){Object.defineProperty(target,{value: initializer(), enumerable, configurable, writable });}
The has an opportunity to intercede before the relevant defineProperty actually occurs.
A decorator that precedes syntactic getters and/or setters operates on an accessor description:
classPerson{
@nonenumerablegetkidCount(){returnthis.children.length;}}letdescription={type: 'accessor',get: specifiedGetter,enumerable: true,configurable: true}functionnonenumerable(target,name,description){descriptor.enumerable=false;returndescriptor;}
A more detailed example illustrating a simple decorator that memoizes an
accessor.
classPerson{
@memoizegetname(){return`${this.first}${this.last}`}setname(val){let[first,last]=val.split(' ');this.first=first;this.last=last;}}letmemoized=newWeakMap();functionmemoize(target,name,descriptor){letgetter=descriptor.get,setter=descriptor.set;descriptor.get=function(){lettable=memoizationFor(this);if(nameintable){returntable[name];}returntable[name]=getter.call(this);}descriptor.set=function(val){lettable=memoizationFor(this);setter.call(this,val);table[name]=val;}}functionmemoizationFor(obj){lettable=memoized.get(obj);if(!table){table=Object.create(null);memoized.set(obj,table);}returntable;}
It is also possible to decorate the class itself. In this case, the decorator
takes the target constructor.
// A simple decorator
@annotationclassMyClass{}functionannotation(target){// Add a property on targettarget.annotated=true;}
Since decorators are expressions, decorators can take additional arguments and
act like a factory.
@isTestable(true)classMyClass{}functionisTestable(value){returnfunctiondecorator(target){target.isTestable=value;}}
The same technique could be used on property decorators:
classC{
@enumerable(false)method(){}}functionenumerable(value){returnfunction(target,key,descriptor){descriptor.enumerable=value;returndescriptor;}}
Because descriptor decorators operate on targets, they also naturally work on
static methods. The only difference is that the first argument to the decorator
will be the class itself (the constructor) rather than the prototype, because
that is the target of the original Object.defineProperty.
For the same reason, descriptor decorators work on object literals, and pass
the object being created to the decorator.
Desugaring
Class Declaration
Syntax
@F("color")
@GclassFoo{}
Desugaring (ES6)
varFoo=(function(){classFoo{}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Class Method Declaration
Syntax
classFoo{
@F("color")
@Gbar(){}}
Desugaring (ES6)
varFoo=(function(){classFoo{bar(){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo.prototype.bar=function(){}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Class Accessor Declaration
Syntax
classFoo{
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varFoo=(function(){classFoo{getbar(){}setbar(value){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Object.defineProperty(Foo.prototype,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Object Literal Method Declaration
Syntax
varo={
@F("color")
@Gbar(){}}
Desugaring (ES6)
varo=(function(){var_obj={bar(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={bar: function(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Object Literal Accessor Declaration
Syntax
varo={
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varo=(function(){var_obj={getbar(){}setbar(value){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={}Object.defineProperty(_obj,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Grammar
DecoratorList [Yield] :
DecoratorList [?Yield]optDecorator [?Yield]
Decorator [Yield] :
@LeftHandSideExpression [?Yield]
PropertyDefinition [Yield] :
IdentifierReference [?Yield]
CoverInitializedName [?Yield]
PropertyName [?Yield]:AssignmentExpression [In, ?Yield]
DecoratorList [?Yield]optMethodDefinition [?Yield]
CoverMemberExpressionSquareBracketsAndComputedPropertyName [Yield] :
[Expression [In, ?Yield]]
NOTE	The production CoverMemberExpressionSquareBracketsAndComputedPropertyName is used to cover parsing a MemberExpression that is part of a Decorator inside of an ObjectLiteral or ClassBody, to avoid lookahead when parsing a decorator against a ComputedPropertyName.
PropertyName [Yield, GeneratorParameter] :
LiteralPropertyName

[+GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName

[~GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [Yield] :

[Lexical goal InputElementRegExp] PrimaryExpression [?Yield]
MemberExpression [?Yield]CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [?Yield].IdentifierName
MemberExpression [?Yield]TemplateLiteral [?Yield]
SuperProperty [?Yield]
NewSuperArguments [?Yield]
newMemberExpression [?Yield]Arguments [?Yield]
SuperProperty [Yield] :
superCoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
super.IdentifierName
ClassDeclaration [Yield, Default] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]ClassTail [?Yield]

[+Default] DecoratorList [?Yield]optclassClassTail [?Yield]
ClassExpression [Yield, GeneratorParameter] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]optClassTail [?Yield, ?GeneratorParameter]
ClassElement [Yield] :
DecoratorList [?Yield]optMethodDefinition [?Yield]
DecoratorList [?Yield]optstaticMethodDefinition [?Yield]
Notes
In order to more directly support metadata-only decorators, a desired feature
for static analysis, the TypeScript project has made it possible for its users
to define ambient decorators
that support a restricted syntax that can be properly analyzed without evaluation.
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
interop
interop
README.md
README.md
Repository files navigation
This file is under active development. Refer to interop/reusability.md for the
most up to date description.
Summary
Decorators make it possible to annotate and modify classes and properties at
design time.
While ES5 object literals support arbitrary expressions in the value position,
ES6 classes only support literal functions as values. Decorators restore the
ability to run code at design time, while maintaining a declarative syntax.
Detailed Design
A decorator is:
  • an expression
  • that evaluates to a function
  • that takes the target, name, and decorator descriptor as arguments
  • and optionally returns a decorator descriptor to install on the target object
Consider a simple class definition:
classPerson{name(){return`${this.first}${this.last}`}}
Evaluating this class results in installing the name function onto
Person.prototype, roughly like this:
Object.defineProperty(Person.prototype,'name',{value: specifiedFunction,enumerable: false,configurable: true,writable: true});
A decorator precedes the syntax that defines a property:
classPerson{
@readonlyname(){return`${this.first}${this.last}`}}
Now, before installing the descriptor onto Person.prototype, the engine first
invokes the decorator:
letdescription={type: 'method',initializer: ()=>specifiedFunction,enumerable: false,configurable: true,writable: true};description=readonly(Person.prototype,'name',description)||description;defineDecoratedProperty(Person.prototype,'name',description);functiondefineDecoratedProperty(target,{ initializer, enumerable, configurable, writable }){Object.defineProperty(target,{value: initializer(), enumerable, configurable, writable });}
The has an opportunity to intercede before the relevant defineProperty actually occurs.
A decorator that precedes syntactic getters and/or setters operates on an accessor description:
classPerson{
@nonenumerablegetkidCount(){returnthis.children.length;}}letdescription={type: 'accessor',get: specifiedGetter,enumerable: true,configurable: true}functionnonenumerable(target,name,description){descriptor.enumerable=false;returndescriptor;}
A more detailed example illustrating a simple decorator that memoizes an
accessor.
classPerson{
@memoizegetname(){return`${this.first}${this.last}`}setname(val){let[first,last]=val.split(' ');this.first=first;this.last=last;}}letmemoized=newWeakMap();functionmemoize(target,name,descriptor){letgetter=descriptor.get,setter=descriptor.set;descriptor.get=function(){lettable=memoizationFor(this);if(nameintable){returntable[name];}returntable[name]=getter.call(this);}descriptor.set=function(val){lettable=memoizationFor(this);setter.call(this,val);table[name]=val;}}functionmemoizationFor(obj){lettable=memoized.get(obj);if(!table){table=Object.create(null);memoized.set(obj,table);}returntable;}
It is also possible to decorate the class itself. In this case, the decorator
takes the target constructor.
// A simple decorator
@annotationclassMyClass{}functionannotation(target){// Add a property on targettarget.annotated=true;}
Since decorators are expressions, decorators can take additional arguments and
act like a factory.
@isTestable(true)classMyClass{}functionisTestable(value){returnfunctiondecorator(target){target.isTestable=value;}}
The same technique could be used on property decorators:
classC{
@enumerable(false)method(){}}functionenumerable(value){returnfunction(target,key,descriptor){descriptor.enumerable=value;returndescriptor;}}
Because descriptor decorators operate on targets, they also naturally work on
static methods. The only difference is that the first argument to the decorator
will be the class itself (the constructor) rather than the prototype, because
that is the target of the original Object.defineProperty.
For the same reason, descriptor decorators work on object literals, and pass
the object being created to the decorator.
Desugaring
Class Declaration
Syntax
@F("color")
@GclassFoo{}
Desugaring (ES6)
varFoo=(function(){classFoo{}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Class Method Declaration
Syntax
classFoo{
@F("color")
@Gbar(){}}
Desugaring (ES6)
varFoo=(function(){classFoo{bar(){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo.prototype.bar=function(){}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Class Accessor Declaration
Syntax
classFoo{
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varFoo=(function(){classFoo{getbar(){}setbar(value){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Object.defineProperty(Foo.prototype,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Object Literal Method Declaration
Syntax
varo={
@F("color")
@Gbar(){}}
Desugaring (ES6)
varo=(function(){var_obj={bar(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={bar: function(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Object Literal Accessor Declaration
Syntax
varo={
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varo=(function(){var_obj={getbar(){}setbar(value){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={}Object.defineProperty(_obj,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Grammar
DecoratorList [Yield] :
DecoratorList [?Yield]optDecorator [?Yield]
Decorator [Yield] :
@LeftHandSideExpression [?Yield]
PropertyDefinition [Yield] :
IdentifierReference [?Yield]
CoverInitializedName [?Yield]
PropertyName [?Yield]:AssignmentExpression [In, ?Yield]
DecoratorList [?Yield]optMethodDefinition [?Yield]
CoverMemberExpressionSquareBracketsAndComputedPropertyName [Yield] :
[Expression [In, ?Yield]]
NOTE	The production CoverMemberExpressionSquareBracketsAndComputedPropertyName is used to cover parsing a MemberExpression that is part of a Decorator inside of an ObjectLiteral or ClassBody, to avoid lookahead when parsing a decorator against a ComputedPropertyName.
PropertyName [Yield, GeneratorParameter] :
LiteralPropertyName

[+GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName

[~GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [Yield] :

[Lexical goal InputElementRegExp] PrimaryExpression [?Yield]
MemberExpression [?Yield]CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [?Yield].IdentifierName
MemberExpression [?Yield]TemplateLiteral [?Yield]
SuperProperty [?Yield]
NewSuperArguments [?Yield]
newMemberExpression [?Yield]Arguments [?Yield]
SuperProperty [Yield] :
superCoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
super.IdentifierName
ClassDeclaration [Yield, Default] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]ClassTail [?Yield]

[+Default] DecoratorList [?Yield]optclassClassTail [?Yield]
ClassExpression [Yield, GeneratorParameter] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]optClassTail [?Yield, ?GeneratorParameter]
ClassElement [Yield] :
DecoratorList [?Yield]optMethodDefinition [?Yield]
DecoratorList [?Yield]optstaticMethodDefinition [?Yield]
Notes
In order to more directly support metadata-only decorators, a desired feature
for static analysis, the TypeScript project has made it possible for its users
to define ambient decorators
that support a restricted syntax that can be properly analyzed without evaluation.
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Latest commit
History
23 Commits
Folders and files
NameName
Last commit message
Last commit date
interop
interop
README.md
README.md
Repository files navigation
This file is under active development. Refer to interop/reusability.md for the
most up to date description.
Summary
Decorators make it possible to annotate and modify classes and properties at
design time.
While ES5 object literals support arbitrary expressions in the value position,
ES6 classes only support literal functions as values. Decorators restore the
ability to run code at design time, while maintaining a declarative syntax.
Detailed Design
A decorator is:
  • an expression
  • that evaluates to a function
  • that takes the target, name, and decorator descriptor as arguments
  • and optionally returns a decorator descriptor to install on the target object
Consider a simple class definition:
classPerson{name(){return`${this.first}${this.last}`}}
Evaluating this class results in installing the name function onto
Person.prototype, roughly like this:
Object.defineProperty(Person.prototype,'name',{value: specifiedFunction,enumerable: false,configurable: true,writable: true});
A decorator precedes the syntax that defines a property:
classPerson{
@readonlyname(){return`${this.first}${this.last}`}}
Now, before installing the descriptor onto Person.prototype, the engine first
invokes the decorator:
letdescription={type: 'method',initializer: ()=>specifiedFunction,enumerable: false,configurable: true,writable: true};description=readonly(Person.prototype,'name',description)||description;defineDecoratedProperty(Person.prototype,'name',description);functiondefineDecoratedProperty(target,{ initializer, enumerable, configurable, writable }){Object.defineProperty(target,{value: initializer(), enumerable, configurable, writable });}
The has an opportunity to intercede before the relevant defineProperty actually occurs.
A decorator that precedes syntactic getters and/or setters operates on an accessor description:
classPerson{
@nonenumerablegetkidCount(){returnthis.children.length;}}letdescription={type: 'accessor',get: specifiedGetter,enumerable: true,configurable: true}functionnonenumerable(target,name,description){descriptor.enumerable=false;returndescriptor;}
A more detailed example illustrating a simple decorator that memoizes an
accessor.
classPerson{
@memoizegetname(){return`${this.first}${this.last}`}setname(val){let[first,last]=val.split(' ');this.first=first;this.last=last;}}letmemoized=newWeakMap();functionmemoize(target,name,descriptor){letgetter=descriptor.get,setter=descriptor.set;descriptor.get=function(){lettable=memoizationFor(this);if(nameintable){returntable[name];}returntable[name]=getter.call(this);}descriptor.set=function(val){lettable=memoizationFor(this);setter.call(this,val);table[name]=val;}}functionmemoizationFor(obj){lettable=memoized.get(obj);if(!table){table=Object.create(null);memoized.set(obj,table);}returntable;}
It is also possible to decorate the class itself. In this case, the decorator
takes the target constructor.
// A simple decorator
@annotationclassMyClass{}functionannotation(target){// Add a property on targettarget.annotated=true;}
Since decorators are expressions, decorators can take additional arguments and
act like a factory.
@isTestable(true)classMyClass{}functionisTestable(value){returnfunctiondecorator(target){target.isTestable=value;}}
The same technique could be used on property decorators:
classC{
@enumerable(false)method(){}}functionenumerable(value){returnfunction(target,key,descriptor){descriptor.enumerable=value;returndescriptor;}}
Because descriptor decorators operate on targets, they also naturally work on
static methods. The only difference is that the first argument to the decorator
will be the class itself (the constructor) rather than the prototype, because
that is the target of the original Object.defineProperty.
For the same reason, descriptor decorators work on object literals, and pass
the object being created to the decorator.
Desugaring
Class Declaration
Syntax
@F("color")
@GclassFoo{}
Desugaring (ES6)
varFoo=(function(){classFoo{}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo=F("color")(Foo=G(Foo)||Foo)||Foo;returnFoo;})();
Class Method Declaration
Syntax
classFoo{
@F("color")
@Gbar(){}}
Desugaring (ES6)
varFoo=(function(){classFoo{bar(){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Foo.prototype.bar=function(){}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Class Accessor Declaration
Syntax
classFoo{
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varFoo=(function(){classFoo{getbar(){}setbar(value){}}var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Desugaring (ES5)
varFoo=(function(){functionFoo(){}Object.defineProperty(Foo.prototype,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(Foo.prototype,"bar",_temp=G(Foo.prototype,"bar",_temp=Object.getOwnPropertyDescriptor(Foo.prototype,"bar"))||_temp)||_temp;if(_temp)Object.defineProperty(Foo.prototype,"bar",_temp);returnFoo;})();
Object Literal Method Declaration
Syntax
varo={
@F("color")
@Gbar(){}}
Desugaring (ES6)
varo=(function(){var_obj={bar(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={bar: function(){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Object Literal Accessor Declaration
Syntax
varo={
@F("color")
@Ggetbar(){}setbar(value){}}
Desugaring (ES6)
varo=(function(){var_obj={getbar(){}setbar(value){}}var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Desugaring (ES5)
varo=(function(){var_obj={}Object.defineProperty(_obj,"bar",{get: function(){},set: function(value){},enumerable: true,configurable: true});var_temp;_temp=F("color")(_obj,"bar",_temp=G(_obj,"bar",_temp=void0)||_temp)||_temp;if(_temp)Object.defineProperty(_obj,"bar",_temp);return_obj;})();
Grammar
DecoratorList [Yield] :
DecoratorList [?Yield]optDecorator [?Yield]
Decorator [Yield] :
@LeftHandSideExpression [?Yield]
PropertyDefinition [Yield] :
IdentifierReference [?Yield]
CoverInitializedName [?Yield]
PropertyName [?Yield]:AssignmentExpression [In, ?Yield]
DecoratorList [?Yield]optMethodDefinition [?Yield]
CoverMemberExpressionSquareBracketsAndComputedPropertyName [Yield] :
[Expression [In, ?Yield]]
NOTE	The production CoverMemberExpressionSquareBracketsAndComputedPropertyName is used to cover parsing a MemberExpression that is part of a Decorator inside of an ObjectLiteral or ClassBody, to avoid lookahead when parsing a decorator against a ComputedPropertyName.
PropertyName [Yield, GeneratorParameter] :
LiteralPropertyName

[+GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName

[~GeneratorParameter] CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [Yield] :

[Lexical goal InputElementRegExp] PrimaryExpression [?Yield]
MemberExpression [?Yield]CoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
MemberExpression [?Yield].IdentifierName
MemberExpression [?Yield]TemplateLiteral [?Yield]
SuperProperty [?Yield]
NewSuperArguments [?Yield]
newMemberExpression [?Yield]Arguments [?Yield]
SuperProperty [Yield] :
superCoverMemberExpressionSquareBracketsAndComputedPropertyName [?Yield]
super.IdentifierName
ClassDeclaration [Yield, Default] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]ClassTail [?Yield]

[+Default] DecoratorList [?Yield]optclassClassTail [?Yield]
ClassExpression [Yield, GeneratorParameter] :
DecoratorList [?Yield]optclassBindingIdentifier [?Yield]optClassTail [?Yield, ?GeneratorParameter]
ClassElement [Yield] :
DecoratorList [?Yield]optMethodDefinition [?Yield]
DecoratorList [?Yield]optstaticMethodDefinition [?Yield]
Notes
In order to more directly support metadata-only decorators, a desired feature
for static analysis, the TypeScript project has made it possible for its users
to define ambient decorators
that support a restricted syntax that can be properly analyzed without evaluation.
About
No description, website, or topics provided.
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors