Skip to content

Instantly share code, notes, and snippets.

View hijiangtao's full-sized avatar
:octocat:
Happy New Year!

Tao Jiang hijiangtao

:octocat:
Happy New Year!
View GitHub Profile
@hijiangtao
hijiangtao / fiber.ts
Created August 26, 2022 03:12
How to get React FiberNode from DOM
function getFiberInstance(dom: HTMLElement, traverseUp = 0) {
const key = Object.keys(dom).find((key) => {
return (
key.startsWith("__reactFiber$") || // react 17+
key.startsWith("__reactInternalInstance$")
) // react <17
})
const domFiber = dom[key]
if (domFiber == null) return null
@hijiangtao
hijiangtao / index.tsx
Last active July 22, 2021 10:15
React Switch Compnent
import { useState }from 'react'
function SwitchComponent() {
const Switch = props => {
const { key, children } = props
return children.find(child => {
return child.props.value === key
})
}
@hijiangtao
hijiangtao / index.html
Last active September 29, 2020 11:46
ngx-charts' Number Card: animations would disturb normal value display when input results update within fixed duration
<app-ux-text-card
[data]="[
{
name: data.name,
value: data.value
}
]"
>
</app-ux-text-card>
@hijiangtao
hijiangtao / README.md
Last active May 14, 2021 04:11
A wired example of Canvas be cut off by very long `.clip()` path

A wired example of Canvas be cut off by very long .clip() path

Discussion can be found at StackOverflow.

@hijiangtao
hijiangtao / movie.effects.ts
Created May 8, 2020 07:16
Demo of using @ngrx/effects to load data from http request
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { EMPTY } from 'rxjs';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { MoviesService } from './movies.service';
@Injectable()
export class MovieEffects {
loadMovies$ = createEffect(() => this.actions$.pipe(
@hijiangtao
hijiangtao / app-routing.module.ts
Created January 30, 2020 10:58
Angular ControlValueAccessor 介绍与实战代码
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloPageComponent } from './pages/hello/hello.component';
const routes: Routes = [
{
path: 'hello',
pathMatch: 'full',
component: HelloPageComponent
@hijiangtao
hijiangtao / Child.ts
Created January 9, 2020 13:01
[Angular] ControlValueAccessor with formGroup data in child component
import {Component, Input} from '@angular/core'
import {
FormControl,
FormGroup,
ControlValueAccessor,
NG_VALUE_ACCESSOR,
FormBuilder,
Validator
} from '@angular/forms';
@hijiangtao
hijiangtao / index.js
Created December 13, 2019 12:20
[BUG] Rax 小程序多次渲染间状态值更新错误问题
/** @jsx createElement */
import { createElement, useEffect, useState } from 'rax';
import View from 'rax-view';
export default function App() {
const [stateParent, setStateParent] = useState(true);
const [stateChild, setStateChild] = useState(true);
useEffect(() => {
setStateChild(!stateChild);
@hijiangtao
hijiangtao / compose.js
Created July 6, 2019 11:29
Brief explanation of redux middleware's work internals
function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
return funcs.reduce((a, b) => (...args) => a(b(...args)));
@hijiangtao
hijiangtao / data.js
Created March 17, 2019 08:11
Dynamic Web Worker Demo
const BASE_DATASETS = {
airports: {
PKU: { lat: 1, lng: 1, key: 'OKU', count: 1 },
// ...
}
}
export default BASE_DATASETS;