Skip to content

Instantly share code, notes, and snippets.

Avatar
🤔
what's happening?

Anton Korzunov theKashey

🤔
what's happening?
View GitHub Profile
@theKashey
theKashey / plugin.ts
Created May 22, 2021
Node Workers based Webpack StartServerPlugin
View plugin.ts
import { Worker } from "worker_threads";
import type { Compiler, compilation, Plugin } from "webpack";
interface Options {
name: string;
require?: string[];
keyboard?: boolean;
}
View useResizeObserver.ts
import { useState, useEffect } from 'react';
type UseResizeObserverCallback = (ref: Element) => void;
type ResizeObserverCallback = (
entries: IResizeObserverEntry[],
observer: ResizeObserver,
) => void;
interface IResizeObserverEntry {
View scroll-memory.js
import React from "react";
import { withRouter } from "react-router-dom";
import { getPageScroll, scrollTo } from "./utils";
const ScrollContext = React.createContext(new Map());
const getLocationKey = location => `${location.pathname}?${location.search}`;
const ScrollMemory = ({ children, history: _history, location }) => {
View story-machine.js
const initial = {};
const fetchMachine = Machine({
id: 'panel',
initial: 'waiting',
context: initial,
states: {
waiting: {
// always reset to initial context
entry: assign(() => null),
on: {
@theKashey
theKashey / report-bundle-size.js
Created Mar 13, 2020
Report total entry size using webpack-imported
View report-bundle-size.js
const fs = require("fs");
const gzipSize = require("gzip-size");
const stats = require("../build/imported");
function collectSize(assets) {
return assets.reduce((acc, asset) => acc + (stats.assets.find(({ name }) => name === asset) || { size: 0 }).size, 0);
}
function collectGSize(assets) {
View loadable-fix-466.js
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _pluginSyntaxDynamicImport = _interopRequireDefault(require("@babel/plugin-syntax-dynamic-import"));
var _chunkName = _interopRequireDefault(require("./properties/chunkName"));
var _isReady = _interopRequireDefault(require("./properties/isReady"));
@theKashey
theKashey / prefetchWorker.js
Created Oct 11, 2019
cloudflare HTTP(not HTML!) prefetch
View prefetchWorker.js
// see cloudflare workers - https://workers.cloudflare.com
addEventListener('fetch', event => {
event.respondWith(fetchAndStream(event.request))
})
async function fetchAndStream(request) {
let streamResponse = fetch(request); // dont await, as majority of CF examples do
let { readable, writable } = new TransformStream()
@theKashey
theKashey / helmet.tsx
Created Jul 31, 2019
jsLingui compatible "Helmet"
View helmet.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createChannel } from 'react-push-channel';
function setDescription(description: string) {
const meta = document.querySelector('meta[name=description]') || document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', description);
document.head!.appendChild(meta);
}
@theKashey
theKashey / use-scroll-drag.js
Last active Jul 23, 2019
Slide "scrollable containers" with you mouse like a... touch
View use-scroll-drag.js
import {useState, useEffect, useLayoutEffect, useRef} from "react";
const getMouseCoords = (e) => [e.clientX, e.clientY];
const useDragHandle = (ref) => {
const [mouseDown, setMouseDown] = useState(null);
const [initialScroll, setInitialScroll] = useState(null);
useEffect(() => {
const {current: container} = ref;
View hydrate.js
componentDidMount() {
new IntersectionObserver(async ([entry], obs) => {
if (!entry.isIntersecting) return;
obs.unobserve(this.root);
this.setState({loading: true});
const {load} = this.props;
const Child = interopDefault(await load());
setTimeout(() => {
//ReactDOM.hydrate(<Child {...props} />, this.root);