Skip to content

Instantly share code, notes, and snippets.

View wobsoriano's full-sized avatar
🎯
Focusing

Robert Soriano wobsoriano

🎯
Focusing
View GitHub Profile
@efkann
efkann / react.d.ts
Created October 10, 2023 20:00
React Experimental Hooks Type Declarations
declare module 'react-dom' {
interface FormStatusNotPending {
pending: false;
data: null;
method: null;
action: null;
}
interface FormStatusPending {
pending: true;
@joakimriedel
joakimriedel / !typed mappers (mapGetters, mapActions, mapMutations, mapState) for vuex 4 and vue 3.md
Last active May 9, 2024 14:40
Strictly typed mappers for vuex 4 and vue 3 using Typescript 4.4+

Vuex 4 is a great companion to Vue 3, but Vuex is falling behind on Typescript support. While waiting for better typing support in Vuex 5 or using Pinia, this wrapper might help.

Using this wrapper will correctly infer arguments and return types on your state, actions, getters and mutations.

It works both within your store(s) and any Vue components where you use the mapActions, mapState, mapGetters or mapMutations helpers from Vuex.

No more any will help you find many errors at compile-time!

@AlexVipond
AlexVipond / README.md
Last active September 5, 2023 09:42
Effect timing in Vue 3

Effect timing in Vue 3

If your reactive side effects aren't properly timed in a Vue app, you'll see very confusing behavior.

To fully understand Vue effect timing, you'd have to learn about microtasks in browser-based JavaScript. That said, a deep understanding of microtasks and of the browser event loop is really only practical for framework authors—it's not practical knowledge for framework users.

Instead of trying to learn how Vue effect timing actually works under the hood, try learning the following:

  • Simplified versions of effect timing concepts
  • Some opinionated guidelines on how to use the two effect timing tools at your disposal in Vue 3: the flush option for watch and watchEffect, and nextTick.
@tannerlinsley
tannerlinsley / useBroadcastLeader.ts
Created June 4, 2021 14:37
A React Hook to determine if a tab of your application is the "leader" using BroadcastChannel and leader election
import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
import React from 'react'
const channels = {}
export function useBroadcastLeader(id = 'default') {
const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false)
React.useEffect(() => {
if (!channels[id]) {
@Luccasoli
Luccasoli / useReactNavigationQuery
Created May 14, 2021 23:44
useQuery layer implementing refetchOnWindowFocus in react-native project using react-navigation
import { useFocusEffect } from '@react-navigation/core';
import { useCallback } from 'react';
import {
QueryFunction,
QueryKey,
useQuery,
UseQueryOptions,
UseQueryResult,
} from 'react-query';
@davidteren
davidteren / nerd_fonts.md
Last active May 26, 2024 12:22
Install Nerd Fonts via Homebrew [updated & fixed]
@tannerlinsley
tannerlinsley / createCrudHooks.js
Created November 29, 2020 06:39
A naive, but efficient starter to generate crud hooks for React Query
export default function createCrudHooks({
baseKey,
indexFn,
singleFn,
createFn,
updateFn,
deleteFn,
}) {
const useIndex = (config) => useQuery([baseKey], indexFn, config)
const useSingle = (id, config) =>
@luna-koury
luna-koury / # Vuex 4 -> Vue3 & TS.md
Last active April 6, 2022 13:32
Vuex 4 - Boilerplate Typescript

Vuex 4 boilerplate using Vue3 and typed modules with TypeScript

With Modules

📦src
 ┣ 📂store
 ┃ ┣ 📂modules
 ┃ ┃ ┗ 📂generic_module
 ┃ ┃ ┃ ┣ 📜actions.ts
 ┃ ┃ ┃ ┣ 📜getters.ts
 ┃ ┃ ┃ ┣ 📜index.ts
@ClickerMonkey
ClickerMonkey / types.ts
Last active February 6, 2024 07:21
Typescript Helper Types
// when T is any|unknown, Y is returned, otherwise N
type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;
// when T is never, Y is returned, otherwise N
type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;
// when T is a tuple, Y is returned, otherwise N
// valid tuples = [string], [string, boolean],
// invalid tuples = [], string[], (string | number)[]
@baryla
baryla / store-module.ts
Last active March 7, 2023 06:45
Vue 3 + Vuex 4 - useStoreModule composable
import { useStore, Store } from "vuex";
interface InternalModule<S, A, M, G> {
state: S;
actions: A;
mutations: M;
getters: G;
}
/**