Skip to content

Instantly share code, notes, and snippets.

View gevgeny's full-sized avatar
🚀
I may be slow to respond.

Eugene Gluhotorenko gevgeny

🚀
I may be slow to respond.
View GitHub Profile
function observable(target: any, propertyKey: string): PropertyDecorator {
return {
get(): any {
return this._value;
},
set(value: any) {
console.log(`Gotcha! value is ${value}.`);
this._value = value;
},
};
function observable(target, propertyKey) {
console.log(`decorate ${propertyKey}`);
return {
get() {},
set() {},
};
}
class State {
function observable(target: any, propertyKey: string): PropertyDecorator {
console.log(`decorate ${propertyKey}`);
// This is property descriptor
return {
get() {},
set() {},
};
}
function observable(target, propertyKey) {
console.log(`decorate ${propertyKey}`);
}
class State {
}
observable(State.prototype, "foo");
function observable(target: any, propertyKey: string) {
console.log(`decorate ${propertyKey}`);
}
class State {
@observable foo;
}
StyledComponent.componentId = componentId;
StyledComponent.target = TargetComponent;
const myStyled = (TargetComponent) => (strs, ...exprs) => class extends React.Component {
interpolateStyle() {
const style = exprs.reduce((result, expr, index) => {
const isFunc = typeof expr === 'function';
const value = isFunc ? expr(this.props) : expr;
return result + value + strs[index + 1];
}, strs[0]);
this.element.setAttribute('style', style);
const myStyled = (TargetComponent) => ([style]) => class extends React.Component {
componentDidMount() {
this.element.setAttribute('style', style);
}
render() {
return (
<TargetComponent {...this.props} ref={element => this.element = element } />
);
}
const Button = styled('button')([
'color: coral;' +
'padding: 0.25rem 1rem;' +
'border: solid 2px coral;' +
'border-radius: 3px;' +
'margin: 0.5rem;' +
'font-size: 1rem;'
]);
const Button = styled.button`
color: coral;
padding: 0.25rem 1rem;
border: solid 2px coral;
border-radius: 3px;
margin: 0.5rem;
font-size: 1rem;
`;