Typescript

babel.config.js

@@ -1,4 +1,13 @@
 module.exports = {
-  presets: ['@babel/env'],
-  plugins: ['@babel/plugin-transform-modules-commonjs']
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current'
+        }
+      }
+    ],
+    '@babel/preset-typescript'
+  ]
 }

jest.config.js

@@ -1,6 +1,6 @@
 module.exports = {
+  rootDir: 'src',
   clearMocks: true,
   coverageDirectory: 'coverage',
-  coverageReporters: ['lcov', 'text-summary'],
-  testMatch: ['<rootDir>/src/(/**/*.spec.(js)|**/__tests__/*.(js))'],
+  coverageReporters: ['lcov', 'text-summary']
 }

package.json

@@ -7,32 +7,34 @@
   "license": "MIT",
   "private": true,
   "scripts": {
+    "start": "parcel src/pinchito/index.html",
     "test": "jest --coverage",
-    "lint": "prettier --config ./prettier.config.js --loglevel error --write \"{src,__{tests,mocks}__}/**/*.js\"",
-    "build": "babel src -d dist"
+    "lint": "prettier --config ./prettier.config.js --loglevel error --list-different \"{src,__{tests,mocks}__}/**/*.ts\"",
+    "lint:fix": "npm run lint -- --write",
+    "build": "babel src -d dist",
+    "compile": "tsc --pretty"
   },
   "devDependencies": {
-    "@babel/cli": "7.2.3",
-    "@babel/core": "7.2.2",
-    "@babel/plugin-transform-modules-commonjs": "7.2.0",
-    "@babel/polyfill": "7.2.5",
-    "@babel/preset-env": "7.2.3",
-    "@types/jest": "23.3.12",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-jest": "23.6.0",
-    "eslint": "5.12.0",
-    "eslint-config-prettier": "3.4.0",
-    "eslint-plugin-jest": "22.1.3",
-    "eslint-plugin-prettier": "3.0.1",
-    "husky": "1.3.1",
-    "jest": "23.6.0",
-    "prettier": "1.15.3",
-    "pretty-quick": "1.8.1"
+    "@babel/core": "7.7.2",
+    "@babel/preset-env": "7.7.1",
+    "@babel/preset-typescript": "7.7.2",
+    "@types/jest": "24.0.23",
+    "@types/node": "12.12.8",
+    "eslint": "6.6.0",
+    "eslint-config-prettier": "6.6.0",
+    "eslint-plugin-jest": "23.0.4",
+    "eslint-plugin-prettier": "3.1.1",
+    "husky": "3.1.0",
+    "jest": "24.9.0",
+    "parcel-bundler": "1.12.4",
+    "prettier": "1.19.1",
+    "pretty-quick": "2.0.1",
+    "typescript": "3.7.2"
   },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged",
-      "pre-push": "prettier --list-different --config ./prettier.config.js \"{src,__{tests,mocks}__}/**/*.js\" && yarn test",
+      "pre-push": "npm run lint && yarn test",
       "post-commit": "git update-index -g"
     }
   }

src/defaultParameters/defaultParameters.js → src/defaultParameters/defaultParameters.ts

@@ -2,6 +2,6 @@ export function multiply(a = 1, b = 1) {
   return a * b
 }
 
-export function priceAfterTaxes(price, tax = multiply(21, 0.01)) {
+export function priceAfterTaxes(price: number, tax = multiply(21, 0.01)) {
   return price + price * tax
 }

src/defaultParameters/propValidator.js → src/defaultParameters/propValidator.ts

@@ -1,7 +1,7 @@
-export function isRequired() {
+export function isRequired(): never {
   throw new TypeError('Argument is required')
 }
 
-export function capitalize(string = isRequired()) {
+export function capitalize(string: string = isRequired()) {
   return string.toUpperCase().slice(0, 1) + string.slice(1)
 }

src/functional/__tests__/pipe.test.js → src/functional/__tests__/pipe.test.ts

@@ -7,38 +7,36 @@ import { mockDate } from '../../../tests/utils/mockDate'
 
 describe('pipe', () => {
   test('debería ejecutar las funciones en orden y con el valor anterior', () => {
-    const functions = [() => 1, value => value + 2]
-
-    const composedFunctions = pipe(...functions)
+    const composedFunctions = pipe(
+      () => 1,
+      (value: number) => value + 2
+    )
     const result = composedFunctions()
     expect(result).toBe(3)
   })
 
   test('invoca primero a la primera función', () => {
     const fnMock = jest.fn()
 
-    const functions = [() => fnMock('first'), () => fnMock('second')]
-
-    const composedFunctions = pipe(...functions)
+    const composedFunctions = pipe(
+      () => fnMock('first'),
+      () => fnMock('second')
+    )
     composedFunctions()
     expect(fnMock).toHaveBeenNthCalledWith(1, 'first')
   })
 
   test('debe aplicar las funciones', () => {
-    const exclamation = string => `${string}!`
-    const dash = string =>
+    const exclamation = (string: string) => `${string}!`
+    const dash = (string: string) =>
       string
         .split(' ')
         .map(word => word.split('').join('-'))
         .join(' ')
-    const upperCase = string => string.toUpperCase()
+    const upperCase = (string: string) => string.toUpperCase()
     const string = 'fus roh dah'
 
-    const upperCasedDashedExclamation = pipe(
-      upperCase,
-      dash,
-      exclamation
-    )
+    const upperCasedDashedExclamation = pipe(upperCase, dash, exclamation)
     const result = upperCasedDashedExclamation(string)
     expect(result).toBe('F-U-S R-O-H D-A-H!')
   })
@@ -50,13 +48,11 @@ describe('pipe', () => {
     }
 
     const logger = {
-      log: jest.fn()
+      log: jest.fn(),
+      time: jest.fn(),
+      timeEnd: jest.fn()
     }
-    const safeObservableLogger = pipe(
-      value => createLogger(value, logger),
-      createObservable,
-      createSafe
-    )
+    const safeObservableLogger = pipe(value => createLogger(value, logger), createObservable, createSafe)
 
     const safeObservableLoggerObject = safeObservableLogger(person)
     safeObservableLoggerObject.name
@@ -65,17 +61,14 @@ describe('pipe', () => {
   })
 
   test('aplica el safe correctamente', () => {
-    const person = {
+    const person: any = {
       name: 'César',
       company: {
         name: 'Autentia'
       }
     }
 
-    const safeObservableLogger = pipe(
-      createObservable,
-      createSafe
-    )
+    const safeObservableLogger = pipe(createObservable, createSafe)
     const safeObservableLoggerObject = safeObservableLogger(person)
 
     expect(safeObservableLoggerObject.vehicles.tesla).toBe(notDefined)
@@ -91,10 +84,7 @@ describe('pipe', () => {
     const stub = jest.fn(() => person.twitterFollowers)
     observe(stub)
 
-    const safeObservable = pipe(
-      createSafe,
-      createObservable
-    )
+    const safeObservable = pipe(createSafe, createObservable)
     const safeObservableObject = safeObservable(person)
     safeObservableObject.twitterFollowers *= 10
     await flushPromises()

src/functional/pipe.ts

@@ -0,0 +1,7 @@
+export const pipe = <T extends any[], R>(fn1: (...args: T) => R, ...fns: Array<(a: R) => R>) => {
+  const piped = fns.reduce(
+    (prevFn, nextFn) => (value: R) => nextFn(prevFn(value)),
+    value => value
+  )
+  return (...args: T) => piped(fn1(...args))
+}

src/observable/observable.ts

@@ -0,0 +1,14 @@
+const observers = new Set<Function>()
+
+export function observe(fn: Function) {
+  observers.add(fn)
+}
+
+export function createObservable<Observable extends object>(observable: Observable) {
+  return new Proxy(observable, {
+    set(target: Observable, p: string | number | symbol, value: any, receiver: any) {
+      observers.forEach(observer => observer())
+      return Reflect.set(target, p, value, receiver)
+    }
+  })
+}

src/observer/Observer.js → src/observer/Observer.ts

@@ -1,6 +1,9 @@
+import { Subject } from './Subject'
+
 export class Observer {
-  constructor(subject) {
-    this.subject = subject
+  value: number
+
+  constructor(private readonly subject: Subject) {
     this.subject.addObserver(this)
     this.value = 0
   }
@@ -9,7 +12,7 @@ export class Observer {
     return `Observer counter: ${this.value}`
   }
 
-  notify(subject) {
+  notify(subject: Subject) {
     this.value = subject.counter
   }
 }

src/observer/Subject.js → src/observer/Subject.ts

@@ -1,7 +1,12 @@
+import { Observer } from './Observer'
+
 export class Subject {
+  private _counter: number
+  private readonly observers: Observer[]
+
   constructor() {
-    this.observers = []
     this._counter = 0
+    this.observers = []
   }
 
   set counter(value) {
@@ -19,7 +24,7 @@ export class Subject {
     this.notifyObservers()
   }
 
-  addObserver(observer) {
+  addObserver(observer: Observer) {
     this.observers.push(observer)
   }
 

src/observer/__tests__/Observer.test.js → src/observer/__tests__/Observer.test.ts

@@ -2,8 +2,8 @@ import { Observer } from '../Observer'
 import { Subject } from '../Subject'
 
 describe('Observer', () => {
-  let subject
-  let observer
+  let subject: Subject
+  let observer: Observer
 
   beforeEach(() => {
     subject = new Subject()

src/pinchito/index.html

@@ -5,29 +5,5 @@
     <title>PinchitoJS</title>
   </head>
   <body></body>
-  <script type="module">
-    import { Component, mount, html } from './main.js'
-
-    class Counter extends Component {
-      constructor() {
-        super()
-        this.data.counter = 0
-        this.startCount()
-      }
-
-      startCount() {
-        setInterval(() => {
-          this.data.counter++
-        }, 1000)
-      }
-
-      render() {
-        return html`
-          <h1>Counter: ${this.data.counter}</h1>
-        `
-      }
-    }
-
-    mount(new Counter())
-  </script>
+  <script src="main.ts"></script>
 </html>

src/pinchito/main.ts

@@ -0,0 +1,23 @@
+import { Component, mount, html } from './pinchito'
+
+class Counter extends Component {
+  constructor() {
+    super()
+    this.data.counter = 0
+    this.startCount()
+  }
+
+  startCount() {
+    setInterval(() => {
+      this.data.counter++
+    }, 1000)
+  }
+
+  render() {
+    return html`
+      <h1>Counter: ${this.data.counter}</h1>
+    `
+  }
+}
+
+mount(new Counter())

src/pinchito/pinchito.ts

@@ -0,0 +1,24 @@
+import { tag as html } from '../taggedTemplate/taggedTemplate'
+import { createObservable, observe } from '../observable/observable'
+
+export abstract class Component {
+  data: { [key: string]: any }
+
+  protected constructor() {
+    const observable = createObservable(this)
+    observe(() => renderTree(this))
+    this.data = observable
+  }
+
+  abstract render(): string
+}
+
+function renderTree(component: Component) {
+  document.body.innerHTML = component.render()
+}
+
+export function mount(component: Component) {
+  renderTree(component)
+}
+
+export { html }