efkann

declare module 'react-dom' {
  interface FormStatusNotPending {
    pending: false;
    data: null;
    method: null;
    action: null;
  }

  interface FormStatusPending {
    pending: true;

joakimriedel

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

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

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

import { useFocusEffect } from '@react-navigation/core';
import { useCallback } from 'react';
import {
  QueryFunction,
  QueryKey,
  useQuery,
  UseQueryOptions,
  UseQueryResult,
} from 'react-query';

davidteren

Nerd Fonts for your IDE

https://www.nerdfonts.com/font-downloads

The following solution thanks to @hackerzgz & @snacky101 will install all nerd fonts;

brew tap homebrew/cask-fonts
brew search '/font-.*-nerd-font/' | awk '{ print $1 }' | xargs -I{} brew install --cask {} || true

tannerlinsley

export default function createCrudHooks({
  baseKey,
  indexFn,
  singleFn,
  createFn,
  updateFn,
  deleteFn,
}) {
  const useIndex = (config) => useQuery([baseKey], indexFn, config)
  const useSingle = (id, config) =>

luna-koury

Vuex 4 boilerplate using Vue3 and typed modules with TypeScript

With Modules

📦src
 ┣ 📂store
 ┃ ┣ 📂modules
 ┃ ┃ ┗ 📂generic_module
 ┃ ┃ ┃ ┣ 📜actions.ts
 ┃ ┃ ┃ ┣ 📜getters.ts
 ┃ ┃ ┃ ┣ 📜index.ts

ClickerMonkey

// 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

import { useStore, Store } from "vuex";

interface InternalModule<S, A, M, G> {
  state: S;
  actions: A;
  mutations: M;
  getters: G;
}

/**