A collection of links to the excellent "Composing Software" series of medium stories by Eric Elliott.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { | |
Component, | |
OnInit, | |
OnChanges, | |
DoCheck, | |
AfterContentInit, | |
AfterContentChecked, | |
AfterViewInit, | |
AfterViewChecked, | |
OnDestroy |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function logMethod( | |
target: Object, | |
propertyName: string, | |
propertyDesciptor: PropertyDescriptor): PropertyDescriptor { | |
// target === Employee.prototype | |
// propertyName === "greet" | |
// propertyDesciptor === Object.getOwnPropertyDescriptor(Employee.prototype, "greet") | |
const method = propertyDesciptor.value; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect } from 'react'; | |
import PropTypes from 'prop-types'; | |
import moment from 'moment'; | |
import { Strap, Bezel, Screen, Face } from './WatchStyledComponents'; | |
import { DefaultFace } from './WatchFaceComponents'; | |
/** | |
* custom Hooks | |
* @param {*} d |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useReducer } from 'react'; | |
import { TodoForm } from './TodoForm'; | |
import { TodoList } from './TodoList'; | |
import { TodoReducer, TodosDispatch } from './TodoReducer'; | |
export const Todos = ({ todos }) => { | |
const [state, dispatch] = useReducer(TodoReducer, todos); | |
return ( |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Login = () => { | |
// handling complex state with useState | |
const [loginDetails, setLoginDetails] = useState({username: '', password: ''}) | |
handleLogin = () => { | |
... | |
} | |
return ( | |
<div> | |
<form> | |
{/** setLoginDetail method is called by passing a fat function which has prev state as argument */} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, Fragment } from 'react'; | |
export const Counter = ({ initialCount }) => { | |
const [count, setCount] = useState(+initialCount); | |
const padding = { | |
marginLeft: '5px', | |
marginRight: '5px', | |
} | |
return ( | |
<Fragment> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { logClass } from './class-decorator'; | |
import { logMethod } from './method-decorator'; | |
import { logProperty } from './property-decorator'; | |
import { logParameter } from './parameter-decorator'; | |
// decorator factory - which calls the corresponding decorators based on arguments passed | |
export function log(...args) { | |
switch (args.length) { | |
case 3: // can be method or parameter decorator | |
if (typeof args[2] === "number") { // if 3rd argument is number then its index so its parameter decorator |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import "reflect-metadata"; | |
// parameter decorator uses reflect api to store the indexes of the decorated parameter | |
export function logParameter(target: Object, propertyName: string, index: number) { | |
// to get the metadata from the target object | |
const indices = Reflect.getMetadata(`log_${propertyName}_parameters`, target, propertyName) || []; | |
indices.push(index); | |
// to define the metadata to the target object | |
Reflect.defineMetadata(`log_${propertyName}_parameters`, indices, target, propertyName); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export function logClass(target: Function) { | |
// save a reference to the original constructor | |
const original = target; | |
// a utility function to generate instances of a class | |
function construct(constructor, args) { | |
const c: any = function () { | |
return constructor.apply(this, args); | |
} | |
c.prototype = constructor.prototype; |