Skip to content

Instantly share code, notes, and snippets.

Avatar
💚
RIP IE

Guillaume Chau Akryum

💚
RIP IE
View GitHub Profile
@Akryum
Akryum / vue.config.js
Created Sep 27, 2018
Per-page split chunks
View vue.config.js
module.exports = {
pages: {
pageA: 'src/pageA.js',
pageB: 'src/pageB.js',
pageC: 'src/pageC.js',
},
chainWebpack: config => {
const options = module.exports
const pages = options.pages
View Weather.vue
<script setup>
import { ref, computed } from 'vue'
import gql from 'graphql-tag'
import { client } from './weather'
const document = gql`query getCityWeather ($name: String!) {
city: getCityByName (name: $name) {
id
name
country
View hookable.spec.ts
import { Hookable } from '../src/hookable'
describe('hookable', () => {
test('hook with one callback', async () => {
const hooks = new Hookable<{
invert:(value: boolean) => boolean | Promise<boolean>
}>()
hooks.hook('invert', value => !value)
@Akryum
Akryum / example.js
Last active May 28, 2021
Vue Router - Navigate to parent named route
View example.js
export default {
const parents = getNamedParents(this.$router.options.routes, this.$route.matched)
if (parents.length) {
return {
name: parents[parents.length - 1].name,
}
}
return { name: 'home' }
}
@Akryum
Akryum / dedupeApolloReferences.js
Created Apr 2, 2021
Dedupe Apollo Client 3 references in merge
View dedupeApolloReferences.js
function dedupeReferences (existing, incoming) {
// Dedupe items
const idMap = {}
for (const item of existing) {
idMap[item.__ref] = true
}
const validated = []
for (const item of incoming) {
if (!idMap[item.__ref]) {
validated.push(item)
@Akryum
Akryum / eager-computed-options-alt.ts
Last active Feb 27, 2021
Eager Vue computed property - use for cheap computed properties that always update but that don't trigger updates when their value doesn't change
View eager-computed-options-alt.ts
export function useEagerComputed() {
const properties = []
function eagerComputed(definitions) {
const computedProps = {}
for (const key in definitions) {
const effect = definitions[key]
properties.push({ key, effect })
computedProps[key] = function () {
return this.$data[key]
View feathericons.html
<link rel="stylesheet" href="https://cdn.rawgit.com/luizbills/feather-icon-font/v4.7.0/dist/feather.css">
@Akryum
Akryum / format-object.js
Created Jan 13, 2021
Format a JS object or array to JavaScript source code string
View format-object.js
const KEY_ESCAPE_REG = /[\s-.:|#@$£*%]/
const MAX_SINGLE_LINE_ARRAY_LENGTH = 3
export function formatObjectToSource (obj) {
return printLines(Array.isArray(obj) ? arrayToSourceLines(obj) : objectToSourceLines(obj))
}
function objectToSourceLines (object, indentCount = 0) {
return createLines(indentCount, lines => {
lines.push('{')
@Akryum
Akryum / responsive-menu.html
Created Jan 6, 2021
Tailwind negate responsive breakpoints
View responsive-menu.html
<div class="flex !md:flex-col items-center !md:space-y-6 md:space-x-6">
<button>Menu button 1</button>
<button>Menu button 2</button>
<button>Menu button 3</button>
</div>
@Akryum
Akryum / PostUpvoter.vue
Created Sep 22, 2016
Apollo mutation example in a Vue component
View PostUpvoter.vue
<script>
import gql from 'graphql-tag';
// GraphQL Mutation with one parameter
const upvoteMutation = gql`
mutation upvotePost($postId: Int!) {
upvotePost(postId: $postId) {
id
votes
}