giuseppeg

/**
 * Copyright (c) Nicolas Gallagher.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict-local
 */

type Groups = { [key: number]: Array<string> };

giuseppeg

function MenuButton({ children }) {
  let called = false
  function getButtonProps(props) {
    const merged = merge({
      onClick: () => {},
      role: 'button',
    }, props)
    called = true
    return merged
  }

giuseppeg

https://jsperf.com/object-assign-vs-array-merging

giuseppeg

Hi friend,

Let me try to explain CSS in JS to you. It kinda works like this:

CSS

.rule {
  property: value
}

giuseppeg

https://babeljs.io/repl#?babili=false&browsers=%3E0%25&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBADgQwE4QKYwLwwBQgEYBWANDACaoTCpikJhQQkC2qpAlgiSHAwJSYA-GAG8AUDBihIsJAFcANhUwiAvqPEwAZiCQ4p0GAGtUATxhswMfAX5iJExbABuCebPRZrAbWMmAuhoSbJo4Lm4eGFhgCvIwAD5xMGHumJEwsjSomhas_FJQFu6BMBAA7mxQwAAWOADyhKjAUAB0cEggUB0mcKjNnQDKUEgWAObNwK7y2MmovLbFEhNoMADkXtaNsPUEm34rAFwiC_b6sIgorJjH9kam41XIAIJQ2AAM_JFYKwACK9c3MAA_PBkGhpq53CRyJRqLR6IxbiYuDwILx_jdDucwTMoRQqDQ6AwYABqRHMVgcZF8f7bTbNBAQCBsEZgbByRQIrG5f54JCoBCGY5qAFkLIIBRQQ52EXmELYACEGQqHIgPlMfnmMvswRwUG6qBAIRmqS-0SYeFQSBWmq12rlxvlaXeR1tAONxK-cAAHn9XRJhbaVDBUPJljrsI8kEgECZmmwIJHoyZweE5i6_casDNmkwEHBpoJ037Zbr9YakibVmaLVaYAAyOtJCHoR1YZ3S4sSPlQWRISxOEmrb2-zsB4vd3v99H2FRo11jgELm6nSTyBkQAByCBYymAfIQUFQAGE14ytyxsL4SDjRTCCfDyewEHOZeH2RQvMBT5vt6gNUWZV5flBS1JcTnAAxyC_ZADzYcBlDaLI2C9bBhBgNV_EOY1Z3-Fd313fdDwAJQUVBsGgs9f1xaDowKcBcTvOEGEfDgXxFd9VQon8WD8ZR3x5fcQMXYoAzUDQJz7GAONEFQgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fi

giuseppeg

const span = getComputedStyle(document.querySelector('span'))
const button = getComputedStyle(document.querySelector('button'))

const diff = Object.keys(span).reduce((diff, p) => {
  if (span[p] != button[p]) {
    diff[p] = span[p]
  }
  return diff
}, {})

giuseppeg

static async getInitialProps ({ Component, router, ctx }) {
  let page = {}

  if (Component.getInitialProps) {
    page = await Component.getInitialProps(ctx)
  }

  const basepath = typeof window === 'undefined' 
    ? '' 
    : location.pathname.slice(0, location.pathname.length - router.route.length).replace(/\/$/, '')

giuseppeg

/* @flow */

import React from 'react'
import messages from '../messages'
import { injectIntl } from 'react-intl'
import type { IntlShape } from 'react-intl'

type Props = {|
  children: React.Node,
  intl: IntlShape,

giuseppeg

// given this

export const styles = {
  test: {
    color: 'red',
    display: props => props.visible ? 'block' : 'none'
  }
}

// rewrite to this

giuseppeg

function getCache(name) {
  return new Promise((resolve, reject) => {
    const version = 1;
    const request = indexedDB.open(name, version);

    request.onsuccess = event => {
      const db = event.target.result;

      /*
       * Returns a Promise that resolves with an object