noir / js / hooks.ts

import { queueFiberTree } from './render.ts';
import { getCurrentFiber, setCurrentScope } from './current.ts';
import { pushSideEffect } from './effects.ts';
import { parseCSS, scopeCSS, generateCSS } from './css.ts';
import { hashString } from './hash.ts';

export const Hook = {
  State: 'state',
  Effect: 'effect',
  Ref: 'ref',
  Style: 'style',
};

const {
  State,
  Effect,
  Ref,
  Style,
} = Hook;

export function useFiber() {
  const currentFiber = getCurrentFiber();
  if (!currentFiber) throw new Error('Hooks can only be called from within a function component.');
  return currentFiber;
}

function pushHook(fiber, hookType) {
  if (!fiber.hooks) fiber.hooks = [];
  const {hooks, pointer} = fiber;
  fiber.pointer += 3;

  const existing = hooks[pointer];

  if (!existing) hooks[pointer] = hookType;
  else if (existing !== hookType) throw new Error('Hooks must be called in the same order between renders.');

  return pointer;
}

export function useState(initialValue) {
  const fiber = useFiber();
  const pointer = pushHook(fiber, State);

  let value = fiber.hooks[pointer + 1];
  const existing = fiber.hooks[pointer + 2];

  if (!existing) {
    fiber.hooks[pointer + 1] = value = initialValue;
    fiber.hooks[pointer + 2] = true;
  }

  const setValue = (val) => {
    if (typeof val === 'function') {
      const currentVal = fiber.hooks[pointer + 1];
      fiber.hooks[pointer + 1] = val(currentVal);
    }
    else{
      fiber.hooks[pointer + 1] = val;
    }

    queueFiberTree(fiber);
  }

  return [value, setValue];
}

export function useEffect(callback, dependencies) {
  const fiber = useFiber();
  const pointer = pushHook(fiber, Effect);

  const oldDeps = fiber.hooks[pointer + 2];
  if (!areDependenciesEqual(oldDeps, dependencies)) {
    fiber.hooks[pointer + 2] = dependencies;
    const oldCleanup = fiber.hooks[pointer + 1];

    pushSideEffect(() => {
      if (oldCleanup !== undefined) oldCleanup();
      const newCleanup = callback();
      fiber.hooks[pointer + 1] = newCleanup;
    });
  }
}

export function useRef(initialValue) {
  const fiber = useFiber();
  const pointer = pushHook(fiber, Ref);

  let ref = fiber.hooks[pointer + 1];
  if(!ref) {
    fiber.hooks[pointer + 1] = ref = {current: initialValue};
  }

  return ref;
}

export function useStyle(text) {
  const fiber = useFiber();
  const pointer = pushHook(fiber, Style);

  const existingText = fiber.hooks[pointer + 1];
  let scope = fiber.hooks[pointer + 2];

  if (existingText !== text) {
    scope = insertScopedStyles(text);
    fiber.hooks[pointer + 1] = text;
    fiber.hooks[pointer + 2] = scope;
  }

  setCurrentScope(scope);
  return scope;
}

const KNOWN_STYLES = new Map();
function insertScopedStyles(text) {
  let scope = KNOWN_STYLES.get(text);
  if (scope !== undefined) return scope;

  const hash = hashString(text);
  // TODO: abs prevents a negative number (s--123) but is not ideal
  scope = 's-' + Math.abs(hash).toString(36);
  KNOWN_STYLES.set(text, scope);

  const ast = parseCSS(text);
  scopeCSS(ast, scope);
  const rules = generateCSS(ast);

  injectStyles(rules);

  return scope;
}

function injectStyles(rules) {
  const sheet = getStylesheet();
  for (const rule of rules) {
    try {
      sheet.insertRule(rule);
    }
    catch(error) {
      console.error('An error occurred while inserting the following scoped rule:\n\n' + rule);
      throw error;
    }
  }
}

let STYLESHEET;
function getStylesheet() {
  if (!STYLESHEET) {
    STYLESHEET = new CSSStyleSheet();
    document.adoptedStyleSheets.push(STYLESHEET);
  }
  return STYLESHEET;
}

export function cleanUpEffects(fiber) {
  const hooks = fiber.hooks;
  if (!hooks) return;

  for (let i = 0; i < hooks.length; i += 3) {
    if (hooks[i] === Effect) {
      const cleanup = hooks[i + 1];
      cleanup();
    }
  }
}

function areDependenciesEqual(oldDeps, newDeps) {
  if (oldDeps === undefined) return false;
  if (newDeps === oldDeps) return true;

  const length = oldDeps.length;
  if (length !== newDeps.length) return false;
  for (let i = 0; i < length; i++) {
    if (newDeps[i] !== oldDeps[i]) return false;
  }
  return true;
}