Skip to content

Instantly share code, notes, and snippets.

View mikeapr4's full-sized avatar

Michael Gallagher mikeapr4

  • Buenos Aires, Argentina
View GitHub Profile
@mikeapr4
mikeapr4 / App-1.vue
Last active May 31, 2021 13:19
wrap, extend or proxy a component
<template>
<HelloPopover />
</template>
@mikeapr4
mikeapr4 / default-listing.js
Created November 24, 2020 11:49
Sample Code for Review
import Vue from 'vue'
// Convert the API Postage Option format into the NEXT APP Postage option format
const convertPostage = (locationGroups) => (postage) => {
const [add, addQty] = postage.price_addl.split('/')
const option = {
flat: true,
cost: Number(postage.price),
add: Number(add),
addQty: addQty ? Number(addQty) : 1,
@mikeapr4
mikeapr4 / suspend.js
Created November 7, 2019 18:28
Suspend Mixin to stop/start component re-rendering
/* eslint-disable no-underscore-dangle */
export default (computedName) => ({
watch: {
// We add in a mechanism to delay re-render of this component
// depending on derived reactive data.
[computedName](val) {
const render = this._watcher;
if (render && val) {
this._suspendGetter = render.getter;
render.getter = () => { render.dirty = true; };
@mikeapr4
mikeapr4 / cache-queue.js
Last active April 16, 2021 20:46
more advanced version of a reactive method-style getter caching, with a size limit on the cache
// This utility is to keep track of a list of keys (entity IDs no doubt) in last access
// order. The oldest entities can be popped off the list, and new entities can be added.
// The premise is a bidirectional linked list along with an ID hash to an point in the
// linked list. The reason behind the complexity is performance.
export default () => {
let first = null;
let last = null;
const hash = {};
let size = 0;
mutactions: {
async loadBooks({ state }) {
state.loading += 1;
const response = await get('/api/books');
state.books = response.data.books;
state.loading -= 1;
},
}
const AsyncFunction = (async () => {}).constructor;
console.log((() => {}) instanceof AsyncFunction); // false
console.log((async () => {}) instanceof AsyncFunction); // true
actions: {
loadBooks({ commit }) {
commit('startLoading');
return get('/api/books').then((response) => {
commit('setBooks', response.data.books);
commit('stopLoading');
});
},
}
actions: {
async loadBooks({ commit }) {
commit('startLoading');
const response = await get('/api/books');
commit('setBooks', response.data.books);
commit('stopLoading');
},
},
state: { loading: 0 },
mutations: {
startLoading(state) {
state.loading += 1;
},
stopLoading(state) {
state.loading -= 1;
},
},
state: { loading: false },
mutations: {
startLoading(state) {
state.loading = true;
},
stopLoading(state) {
state.loading = false;
},
},