index.tsx

import {
  createContext,
  forwardRef,
  useContext,
  useEffect,
  useRef,
  useState,
  memo,
} from "react";

const DesmosContext = createContext<Desmos.Calculator>(null);

/* elt() */
declare global {
  namespace Desmos {
    interface BasicCalculator {
      domChangeDetector: {
        elt: HTMLDivElement;
      };
    }

    interface Calculator {
      domChangeDetector: {
        elt: HTMLDivElement;
      };
    }
  }
}

/**
 * Get the container element of a calculator.
 */
export function elt(
  calc: Desmos.Calculator | Desmos.BasicCalculator,
): HTMLDivElement {
  return calc.domChangeDetector.elt;
}

/**
 * The Desmos graphing calculator.
 */
export const GraphingCalculator = forwardRef<
  Desmos.Calculator,
  React.PropsWithChildren<
    Parameters<typeof Desmos.GraphingCalculator>[1] & {
      attributes?: React.HTMLAttributes<HTMLDivElement>;
    }
  >
>(function GraphingCalculator(props, ref) {
  const [calculator, setCalculator] = useState<Desmos.Calculator>();
  const div = useRef<HTMLDivElement>(null);

  // biome-ignore lint/correctness/useExhaustiveDependencies: false positive, ref is stable
  useEffect(() => {
    // create calculator
    const { attributes, children, ...options } = props;
    const calculator = Desmos.GraphingCalculator(div.current, options);

    applyRef(ref, calculator);
    setCalculator(calculator);

    return () => {
      calculator.destroy();
    };
  }, [props]);

  useEffect(() => {
    const { attributes, children, ...settings } = props;

    if (calculator) calculator.updateSettings(settings);
  });

  return (
    <DesmosContext.Provider value={calculator}>
      <div ref={div} {...(props.attributes ?? {})}>
        {calculator ? props.children : null}
      </div>
    </DesmosContext.Provider>
  );
});

/**
 * A Desmos {@link https://www.desmos.com/api/v1.6/docs/index.html#document-expressions expression}.
 */
export const Expression = memo(function Expression(
  props: Desmos.ExpressionState,
): null {
  const calculator = useCalculator();
  const old = useRef<Desmos.ExpressionState>({});

  const update: Desmos.ExpressionState = { id: props.id };
  for (const k in props) {
    if (props[k] !== old.current[k]) {
      update[k] = props[k];
    }
  }
  old.current = props;
  calculator.setExpression(update);

  useEffect(() => {
    return () => {
      // @ts-expect-error _destroyed is not exposed
      if (!calculator._destroyed) calculator.removeExpression({ id: props.id });
    };
    // @ts-expect-error _destroyed is not exposed
  }, [calculator._destroyed, calculator.removeExpression, props.id]);

  return null;
});

function applyRef<T>(ref: React.ForwardedRef<T>, val: T) {
  if (ref === null) return;
  if (typeof ref === "function") {
    ref(val);
  } else {
    ref.current = val;
  }
}

/* Basic calculators */

// you just couldn't help yourself could you?
// you doofus
function makeBasicCalculator<
  T extends
    | typeof Desmos.FourFunctionCalculator
    | typeof Desmos.ScientificCalculator,
>(constr: T, name: string) {
  const component = (
    props: React.PropsWithChildren<
      Parameters<T>[1] & { attributes?: React.HTMLAttributes<HTMLDivElement> }
    >,
    ref: React.ForwardedRef<Desmos.BasicCalculator>,
  ) => {
    const [calculator, setCalculator] = useState<Desmos.BasicCalculator>();
    const div = useRef<HTMLDivElement>(null);

    // create calculator
    // biome-ignore lint/correctness/useExhaustiveDependencies: constr and ref are stable
    useEffect(() => {
      const { attributes, children, ...options } = props;
      const calculator = constr(div.current, options);

      applyRef(ref, calculator);
      setCalculator(calculator);

      return () => {
        calculator.destroy();
      };
    }, [props]);

    // update settings
    useEffect(() => {
      const { attributes, children, ...settings } = props;

      if (calculator) calculator.updateSettings(settings);
    });

    // render
    return <div ref={div} {...(props.attributes ?? {})} />;
  };
  // function components need to have a name
  Object.defineProperty(component, "name", { value: name });

  return forwardRef(component);
}

/**
 * The Desmos four-function calculator.
 */
export const FourFunctionCalculator = makeBasicCalculator(
  Desmos.FourFunctionCalculator,
  "FourFunctionCalculator",
);

/**
 * The Desmos scientific calculator.
 */
export const ScientificCalculator = makeBasicCalculator(
  Desmos.ScientificCalculator,
  "ScientificCalculator",
);

// hooks
/**
 * Get a reference to the containing {@link Calculator}.
 */
export function useCalculator(): Desmos.Calculator {
  return useContext(DesmosContext);
}

/**
 * Subscribe to a Desmos {@link https://www.desmos.com/api/v1.6/docs/index.html#document-helper-expressions Helper Expression}.
 */
export function useHelperExpression(opts: Desmos.ExpressionState): number {
  const calculator = useCalculator();

  const helper = useRef<ReturnType<Desmos.Calculator["HelperExpression"]>>();
  if (helper.current === undefined) {
    helper.current = calculator.HelperExpression(opts);
  }
  const [value, setValue] = useState(helper.current.numericValue);
  useEffect(() => {
    helper.current.observe("numericValue", () =>
      setValue(helper.current.numericValue),
    );
  }, []);

  return value;
}