Skip to content

Instantly share code, notes, and snippets.

@ktsn
ktsn / migrate.ts
Last active June 23, 2021 15:00
Migration script from Apollo codegen to GraphQL Code Generator
import * as fs from 'fs'
import * as path from 'path'
import * as globby from 'globby'
import { parseComponent } from 'vue-template-compiler'
import { format } from 'prettier'
import { parse } from '@babel/parser'
import traverse from '@babel/traverse'
import generate from '@babel/generator'
const graphqlCodeGenFile = '../src/generated/graphql.ts'
@ktsn
ktsn / convert.js
Created October 12, 2020 07:25
Convert Stylus in Vue SFC file to normal CSS
const path = require('path')
const fs = require('fs')
const stylus = require('stylus')
const compiler = require('vue-template-compiler')
const globby = require('globby')
const targets = globby.sync(path.resolve(__dirname, '../src/**/*.vue'))
targets.forEach(file => {
console.log('***** processing: ' + file + ' *****')
@ktsn
ktsn / App.vue
Created March 1, 2019 07:47
Yet another way to handle loading state and store data instead of scoped slots in Vue.js
<template>
<div v-if="posts.loading">Loading...</div>
<ul v-else>
<li v-for="p in posts.data" :key="p.id">{{ p.title }}</li>
</ul>
</template>
<script lang="ts">
import Vue from 'vue'
@ktsn
ktsn / vue.config.js
Last active February 18, 2019 04:56
Inject vue-media-loader to Vue CLI webpack config
module.exports = {
chainWebpack: webpackConfig => {
// prettier-ignore
webpackConfig.module
.rule('css')
.oneOfs.values().forEach(rule => {
rule
.use('vue-media')
.loader('vue-media-loader')
.after('postcss-loader')
@ktsn
ktsn / store.ts
Created September 7, 2018 03:16
Light-weight reactive store for Vue.js
class Store<S> {
private vm: Vue
constructor(initialState: S) {
this.vm = new Vue({
data: initialState
})
}
get state(): S {
@ktsn
ktsn / ts-2.7.ts
Created March 21, 2018 14:53
Extract Vue component instance type
import Vue, { VueConstructor } from "vue";
declare function extractInstance<T extends Vue>(Ctor: VueConstructor<T>): T;
const Test = Vue.extend({
data() {
return {
test: 123
};
}
@ktsn
ktsn / map.ts
Last active March 10, 2018 12:42
interface Mapping<K, V> {
_k: K;
_v: V;
}
type P<K, M extends Mapping<K, any>> = M extends Mapping<K, infer V>
? V
: never;
interface XMap<T extends Mapping<any, any> = Mapping<never, undefined>> {
interface Emit<Payloads> {
<Name extends keyof Payloads>(name: Name, payload: Payloads[Name]): void
}
interface Observe<Payloads> {
<Name extends keyof Payloads>(
name: Name,
cb: (payload: Payloads[Name]) => void
): void
}
@ktsn
ktsn / typed-vuex.ts
Last active July 24, 2017 16:26
Discovering type safe usage of Vuex
import { Store, ActionContext } from 'vuex'
type Actions<S, P> = {
[K in keyof P]: (ctx: ActionContext<S, any>, payload: P[K]) => void | Promise<any>
}
type Mutations<S, P> = {
[K in keyof P]: (state: S, payload: P[K]) => void
}
@ktsn
ktsn / module.ts
Last active January 26, 2017 16:44
import { inject, create } from '../../../src/interface'
import Counter from './counter'
const { Getters, Mutations, Actions } = inject('counter', Counter)
interface Todo {
id: number
isCompleted: boolean
title: string
}