romanonthego

const types: {
  [key: string]: string;
} = {
  y: 'years',
  mo: 'months',
  w: 'weeks',
  d: 'days',
  h: 'hours',
  m: 'minutes',
  s: 'seconds',

romanonthego

import React, { useEffect } from 'react';
import { useRouter } from 'state';

// Component that attaches scroll to top hanler on router change
// renders nothing, just attaches side effects
export const ScrollToTopControlller = () => {
  // this assumes that current router state is accessed via hook
  // but it does not matter, pathname and search (or that ever) may come from props, context, etc.
  const  { pathname, search } = useRouter();
  

romanonthego

process.env.NODE_ENV = 'production';

const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpackConfigProd = require('react-scripts/config/webpack.config')('production');

// this one is optional, just for better feedback on build
const chalk = require('chalk');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const green = text => {

romanonthego

import path from 'path'
import 'colors'

const validAppEnvs = ['development', 'staging', 'production']
let APP_ENV = process.env.APP_ENV

if (!APP_ENV) {
  console.log(
    'The APP_ENV environment variable is required but was not specified.'
      .yellow,

romanonthego

export function promiseWithTimeout(promise, timeoutTime = 5000) {
  return new Promise((resolve, reject) => {
    const timeout = setTimeout(() => reject({message: 'timeout'}), timeoutTime)

    const resolveWithTimeout = (res) => {
      clearTimeout(timeout)
      resolve(res)
    }

    const rejectWithTimeout = (err) => {

romanonthego

// before:
import firebase from 'what/ever/firebase'

const {auth} = firebase

export function signIn({email, password}) {
  auth.signInWithEmailAndPassword(email, password)
    .then((user) => {
      // ...
    })

romanonthego

// require with Promise wrapper / dynamic import()
import importFirebase from 'firebaseImport'

export default function firebase() {
  return importFirebase().then((firebase) => {
    // do that ever you need here.
    // something like: 
    const app = firebase.initializeApp({
      apiKey: '<your-api-key>',
      authDomain: '<your-auth-domain>',

romanonthego

// browser webpack-config
resolve: {
  alias: {
     'firebaseImport$': path.join('path', 'to', 'your', 'firebaseImport.browser.js')
  }
}
// ...

// server webpack-config
resolve: {

romanonthego

export default function importFirebase() {
  // dynamic import, will return promise
  // magic weback comment to get meaningfull chunkname
  return import(/* webpackChunkName: 'firebase' */ 'firebase/firebase-browser')
}

romanonthego

import * as firebase from 'firebase/firebase-node'

export default function importFirebase() {
  return Promise.resolve(firebase)
}