Skip to content

Instantly share code, notes, and snippets.

Avatar

Lachlan Miller lmiller1990

View GitHub Profile
View file.ts
// not composable
// just a function or 'business logic'
function add (n1, n2) {
return n1 + n2
}
// composable
// "bridges" logic and Vue via reactivity
useAdd (_n1 = 0, _n2 = 0) {
const n1 = ref(n1)
View README.md
yarn create vite my-comp --template vue-ts
cd my-comp
yarn install
# add main.js and vite.config.ts below
yarn build vite
View gist:042bb307576a6e231af1e3fcb29e4682
/** article: https://lachlan-miller.me/articles/patterns-for-testing-props */
props: {
variant: {
type: String,
required: true,
validator: (variant) => {
if (!['success', 'warning', 'error'].includes(variant)) {
throw Error(
`variant is required and must` +
@lmiller1990
lmiller1990 / store.ts
Last active May 12, 2021
typesafe-store.ts
View store.ts
import { reactive } from 'vue';
type Method = (...args: any[]) => any
type StoreWithState<S extends StateTree> = {
state: S
}
type StoreWithActions<A> = {
[k in keyof A]: A[k] extends (...args: infer P) => infer R
View mount.js
// test utils v1
import { mount as testUtilsMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
// some function to create a new Vuex store with your state/mutations etc
// you want a fresh one for each test
import { createMyVuexStore } from './vuex-store'
export function mount(comp, options = {}, store) {
const localVue = createLocalVue()
@lmiller1990
lmiller1990 / index.html
Created Apr 15, 2021
Vanilla FLIP Sundae
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="m-4">
<button class="bg-gray-300 my-2 px-4 py-2 rounded-md" onclick="flip()">Flip</button>
@lmiller1990
lmiller1990 / babel.config.js
Created Jan 9, 2021
Futuristic functional language for web dev
View babel.config.js
module.exports = {
plugins: [
["@babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }],
["@babel/plugin-proposal-partial-application"]
]
}
@lmiller1990
lmiller1990 / dist-index.html
Created Jan 1, 2021
Minimal webpack + typescript dev environment
View dist-index.html
<!-- NOTE: This goes inside a dist directory -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
@lmiller1990
lmiller1990 / types.ts
Last active Dec 21, 2020
How do I infer the return type of `getStyleValue`?
View types.ts
type StyleRule = 'color' | 'fontSize'
interface DefaultStyleSheet {
color: string
fontSize: number
}
export type PDFStyleSheet = Partial<DefaultStyleSheet>
const defaults: DefaultStyleSheet = {
View thoughts.txt
I am hesitant to tell people how to org their business logic because I don't know about the business.
I would keep vuex actions simple.
import businessLogic from './business-logic.js'
actions = {
getData({ state, commit }) {
const userStatus = await axios.get('/api/user_status')