Skip to content

Instantly share code, notes, and snippets.

View Akryum's full-sized avatar
☮️
Meow

Guillaume Chau Akryum

☮️
Meow
View GitHub Profile
<template>
<VDropdown>
<button>Menu</button>
<template #popper="{ hide }">
<RunSelector
@close="hide()"
/>
</template>
</VDropdown>
@Akryum
Akryum / vue.config.js
Created September 27, 2018 10:18
Per-page split chunks
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
<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
@Akryum
Akryum / hookable.spec.ts
Created August 22, 2021 13:49
Type-safe hooks
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 / dedupeApolloReferences.js
Created April 2, 2021 15:31
Dedupe Apollo Client 3 references in merge
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)
<link rel="stylesheet" href="https://cdn.rawgit.com/luizbills/feather-icon-font/v4.7.0/dist/feather.css">
@Akryum
Akryum / format-object.js
Created January 13, 2021 23:02
Format a JS object or array to JavaScript source code string
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 January 6, 2021 15:22
Tailwind negate responsive breakpoints
<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 September 22, 2016 08:21
Apollo mutation example in a Vue component
<script>
import gql from 'graphql-tag';
// GraphQL Mutation with one parameter
const upvoteMutation = gql`
mutation upvotePost($postId: Int!) {
upvotePost(postId: $postId) {
id
votes
}
@Akryum
Akryum / vue.config.js
Last active April 26, 2020 14:18
Auto-import styles with vue-cli 3
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
},
}
function addStyleResource (rule) {