james2doyle

import { memoize, partialRight } from 'lodash';

/**
 * Custom memoize that uses a 1 minute TTL
 * @see https://lodash.com/docs/4.17.15#memoize
 */
const memo = partialRight(memoize, function memoResolver(...args) {
  // or for one hour: (new Date()).getHours();
  const time = (new Date()).getMinutes();

james2doyle

<!--
  Icon Component

  Usage:
    <icon icon="button"></icon>
 -->
<template>
  <transition name="fade" mode="out-in">
    <div v-if="!loadedIcon" class="w-4">&nbsp;</div>
    <component :is="loadedIcon" v-else v-once class="icon-wrapper" :name="icon" v-bind="$attrs" v-on="$listeners" />

james2doyle

/**
 * Create a UUID
 * @see http://stackoverflow.com/a/8809472/188246
 *
 * @return {string}
 */
export default function makeUuid(): string {
  // your favourite guid generation function could go here
  // ex: http://stackoverflow.com/a/8809472/188246
  let d = new Date().getTime() + (window.performance || Date).now();

james2doyle

import { get, template } from 'lodash';
const en = require('@/lang/en.json');

/**
 * Translate a string from a preloaded JSON document
 */
const intl = function(key: string, values: Record<string, string | number> = {}): string {
  const compiled = template(get(en, key), {
    interpolate: /{([\s\S]+?)}/g, // {myVar}
  });

james2doyle

/*
 * Gentle Flex is a truer centering-only strategy. It's soft and gentle,
 * because unlike `place-content: center`, no children's box sizes are
 * changed during the centering. As gently as possible, all items are
 * stacked, centered, and spaced.
 *
 * @see https://web.dev/centering-in-css/#2.-gentle-flex
 */
.gentle-flex {
  display: flex;

james2doyle

<template>
  <button type="button">
    <div v-if="!button">&nbsp;</div>
    <!-- the `is` prop can take a full on component! -->
    <component :is="button" v-else />
  </button>
</template>

<script>
import { defineComponent, ref } from '@vue/composition-api';

james2doyle

# https://github.com/facebookincubator/fastmod
# old code: `import MyComponent from 'Components/MyComponent.vue';`
# new code: `const MyComponent = () => import(/* webpackChunkName: "MyComponent" */ 'Components/MyComponent.vue');`
# note: you may need to reorder your imports when using a dynamic import

fastmod -m -d ./ --extensions vue \
  'import (.*?) from \'(.*?)\';' \
  'const ${1} = () => import(/* webpackChunkName: "${1}" */ \'${2}\');'

james2doyle

/**
 * Track an array as a history and move forwards and backwards in time
 *
 * @param {string} name = 'history'
 *
 * @returns {{ name, index, active, state, skipNextPush, current, undo, redo, undoReady, redoReady, sync, reset, push }}
 */
const historyTracker = function(name = 'history') {
  return {
    name,

james2doyle

/**
 * We need to use a plain JS (or TS) file in order to handle all the async
 * code we are going to handle
 * we also need to follow the Async Component Guide:
 * @see https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State
 */

// some API call, async task, or delayed function
const myAsyncFunction = () =>
  new Promise((resolve) => {

james2doyle

import setState from 'use-state.js';

const [state, onStateUpdated] = useState('my-state', { count: 1 });

console.log(state.count); // logs: "1"

// runs on init in order to compute dependencies
onStateUpdated((/* newState, originalState */) => {
  console.log('stateUpdated', state.count); // logs: "stateUpdated 1"
});