Skip to content

Instantly share code, notes, and snippets.

View varHarrie's full-sized avatar
🎯
Focusing

varHarrie varHarrie

🎯
Focusing
View GitHub Profile
@varHarrie
varHarrie / NormalizedState.ts
Last active February 27, 2023 08:15
Ported from Redux Toolkit's createEntityAdapter.
type EntityKey = string | number;
type EntityMap<T> = Record<EntityKey, T>;
type UpdatePayload<T> = { key: EntityKey; changes: Partial<T> };
type KeySelector<T> = (item: T) => EntityKey;
type EntitySorter<T> = (a: T, b: T) => number;
import { ReactElement, useContext, useRef } from 'react';
import { Freeze } from 'react-freeze';
import { UNSAFE_RouteContext as RouteContext } from 'react-router-dom';
export default function KeepAliveOutlet() {
const caches = useRef<Record<string, ReactElement>>({});
const matchedElement = useContext(RouteContext).outlet; // v6.3之后useOutlet会多了一层嵌套
const matchedPath = matchedElement?.props?.value?.matches?.at(-1)?.pathname as string;
@varHarrie
varHarrie / vue-event-bus.js
Created February 17, 2022 08:11
Vue2 Event Bus
import Vue from 'vue';
const instance = new Vue();
const eventMap = new Map();
function destroyHandlers() {
const events = eventMap.get(this._uid) || [];
events.forEach((e) => {
instance.off(e.type, e.handler);
@varHarrie
varHarrie / createModal
Created April 2, 2019 08:43
React Solutions
import * as React from 'react'
/**
* 通过调用createModal函数,传入一个模态窗口组件,返回对象{ show: [Function], hide: [Function], Component: [React.Component] }
*
* @example:
* class App extends React.Component {
* modal = createModal(SomeModalComponent)
*
* render () {
@varHarrie
varHarrie / useAsync.ts
Last active April 1, 2019 06:26
React Hooks
import * as React from 'react'
type Args<F> = F extends (...args: infer A) => any ? A : never
type Parser<T> = (data: any, prevData: T) => T
interface AsyncState<T> {
/** 是否加载中 */
loading: boolean
/** 成功数据 */
const express = require('express')
const proxy = require('http-proxy-middleware')
const Bundler = require('parcel-bundler')
const bundlerOptions = { cache: false }
const proxyOptions = { target: 'http://localhost:3000' }
const app = express()
const bundler = new Bundler('src/index.html', bundlerOptions)
const rewire = require('react-app-rewired')
module.exports = function rewireEmotion (config, env) {
if (env === 'development') {
config = rewire.injectBabelPlugin(['emotion', { sourceMap: true, autoLabel: true, "labelFormat": "📦[filename]--[local]" }], config)
} else {
config = rewire.injectBabelPlugin(['emotion', { hoist: true }], config)
}
return config
@varHarrie
varHarrie / aliases
Last active February 21, 2017 05:47
Set aliases in windows (Place all file in c:\bin and run set_cmd_autorun.reg)
ls=dir /ONE $*
cd=cd /d $*
cnpm=npm $* --registry=https://registry.npm.taobao.org
@varHarrie
varHarrie / .zshrc
Created November 23, 2016 09:35
oh my zsh config
# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH
# Path to your oh-my-zsh installation.
export ZSH=$HOME/.oh-my-zsh
# Set name of the theme to load. Optionally, if you set this to "random"
# it'll load a random theme each time that oh-my-zsh is loaded.
# See https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
ZSH_THEME="ys"
atom-settings
plugin: sync-settings