Skip to content

Instantly share code, notes, and snippets.

View AlexVipond's full-sized avatar

Alex Vipond AlexVipond

View GitHub Profile
@AlexVipond
AlexVipond / delicious.ts
Created September 5, 2023 14:26
Automatic type inference for fetched data, using generics and `infer`
async function getPageData () {
const users = await get('/users')
const user1 = await get('/users/1')
const usersWithParams = await get('/users?limit=10')
const user1WithParams = await get('/users/1?hello=world')
return {
users,
user1,
usersWithParams,
@AlexVipond
AlexVipond / README.md
Last active September 21, 2023 23:05
JFunky - JQuery-inspired library for manipulating the DOM with unary functions
import { reactive, effectScope, watchEffect } from 'vue'
function switchboard(value) {
let lookup = {}
let scope = effectScope()
let current
let get = () => current
@AlexVipond
AlexVipond / README.md
Last active August 21, 2024 12:41
Function refs vs. ref objects

Function refs vs. ref objects

Great question I got on Twitter: what are the benefits of returning a function ref from a Vue 3 composable, instead of returning the ref object directly?

Here are two SFC playgrounds to outline the two alternatives:

@AlexVipond
AlexVipond / README.md
Last active September 12, 2022 22:36
Vue code review checklist

Vue code review checklist

Double-check all the Vue best practices that are easiest to forget when you’re focused on design and business logic, but hardest to catch with automated tooling.

The answer to every question should be “yes”, and you should aim to spend 10-15 minutes on the entire list after you’ve already had a chance to read and understand the code.

State management

  • Is reactive state created & managed where it's needed, instead of further up the component or composable tree?
  • Is prop drilling avoided, within reason?
  • Is state derived with computed when possible, instead of synced?
@AlexVipond
AlexVipond / react-code-review-checklist.md
Created June 29, 2022 23:08
React code review checklist

State management

  • Is reactive state created & managed where it's needed, instead of further up the component tree?
  • Is prop drilling avoided, within reason? Further reading
  • Is state derived when possible, instead of synced? Further reading
  • Are persistent, non-reactive pieces of state (e.g. instances of third party libraries, resize/intersection/mutation observer instances, etc.) stored with useRef?

Common array iterations

  • Have iterations been avoided or simplified as often as possible for performance and/or readability?
  • Are .reduce() callbacks reasonably readable?
@AlexVipond
AlexVipond / README.md
Last active January 29, 2022 05:46
Vue 3 effect timing APIs, and their React equivalents
Vue 3 effect timing API React equivalent
setup None
onMounted useEffect with an empty dependency list
onUpdated useEffect
onUnmounted Callback returned from useEffect with an empty dependency list
onBeforeMount None
onBeforeUpdate Render function, sort of
onBeforeUnmount None
onErrorCaptured None
@AlexVipond
AlexVipond / README.md
Last active March 7, 2022 17:16
Infinite render loops in Vue 3

Infinite render loops in Vue 3

Vue 3's fantastic reactivity system and component update cycle almost always protects you from triggering infinite render loops: never-ending reactive updates that cause your app to rapidly re-render until it crashes.

There are ways to make infinite render loops happen though! Let's study a few different pitfalls, so we can be prepared to debug our apps if we ever see one of the following errors:

  • Maximum recursive updates exceeded
  • too much recursion

Watchers that mutate their own dependencies

@AlexVipond
AlexVipond / README.md
Last active April 20, 2024 10:23
Updating arrays of elements with function refs in Vue 3

Updating arrays of elements with function refs in Vue 3

I did a screencast series recently talking about my favorite Vue 3 feature: function refs. Check out the screencast series for more context-in this gist, I'm going to answer a fantastic question I got in one of the videos' comment section.

This question was about how to properly update arrays of elements that are captured by function refs. Let's check out the basic principle first, before we look at the details of the question.

<script setup>
import { ref, onBeforeUpdate } from 'vue'