rmdort

// Setup
const { onIncreaseIndent, onDecreaseIndent } = useSpreadsheetState()

return (
  <CanvasGrid
    onIncreaseIndent={onIncreaseIndent}
    onDecreaseIndent={onDecreaseIndent}
  />
)

rmdort

// Option 1 - With useSpreadsheetState hook
// Calculator has to expose the following functions
/*
getPrecedents,
getPrecedentsFromFormulaString,
getDependents,
getGraphNodes,
*/

export const Spreadsheet = () => {

rmdort

import { useCallback, useRef, useSyncExternalStore } from "react";

export const useAsyncHook = <T>(fn: () => Promise<T> | undefined) => {
  const resultRef = useRef<T>();
  const getSnapShot = () => resultRef.current;
  const subscribe = useCallback(
    (onStoreChange: () => void) => {
      const executeAsync = async () => {
        try {
          const result = await fn?.();

rmdort

import { useRef, useLayoutEffect } from "react";

export const useMemoCompare = <T>(
  next: T,
  compare: (previous: T | undefined, next: T) => boolean
): T => {
  const previousRef = useRef<T>();
  const previous = previousRef.current;
  const isEqual = compare(previous, next);

rmdort

import { useRef, useLayoutEffect, useState, useCallback } from "react";

type HTMLOrSVGElement = HTMLElement | SVGElement;

export type RectReadOnly = {
  readonly x: number;
  readonly y: number;
  readonly width: number;
  readonly height: number;
  readonly top: number;

rmdort

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4
• Troubleshooting
  • Tracing broke after an NPM update

Profiling in production

rmdort

import React, {useState} from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello from {'\n'}React Native Web!</Text>
      <TouchableOpacity
        onPress={() => setCount(count + 1)}

rmdort

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .header {
    background: #eee;
    padding: 1rem;
    display: flex;

rmdort

/**
 * Visit a graph node
 * Sort it topologically and return
 * all the dependents
 * @param nodes
 * @param previsit
 * @returns
 */
const topologicalSort = <T>(nodes: T[], children: (node: T) => Set<T>) => {
  const stack = new Set<T>();

rmdort

{
  "scripts": {
    "build": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:umd:min",
    "build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
    "build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
    "build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
    "build:umd": "rollup dist/esm/index.js --format umd --name YourLibrary --sourceMap --output dist/umd/yourlibrary.js",
    "build:umd:min": "cd dist/umd && uglifyjs --compress --mangle --source-map --screw-ie8 --comments --o yourlibrary.min.js -- yourlibrary.js && gzip yourlibrary.min.js -c > yourlibrary.min.js.gz",
  }
}