How to use the preact.options.diffed function in preact

import { options } from 'preact'
import { getStyleId, appendStyle } from './style'

let componentNode

// store a reference to the "current component" vnode
let oldDiff = options._diff || options.__b
options._diff = options.__b = vnode => {
  componentNode = vnode
  if (oldDiff) oldDiff(vnode)
}

// reset component reference at end of diffing:
let oldDiffed = options.diffed
options.diffed = vnode => {
  if (componentNode === vnode) componentNode = null
  if (oldDiffed) oldDiffed(vnode)
}

// our vnode hook looks up the associated component
let old = options.vnode
options.vnode = vnode => {
  const component = componentNode && (componentNode._component || componentNode.__c)
  if (component) {

    if(component.constructor.css){
      const styleId = getStyleId(component.constructor)
      appendStyle(component.constructor.css, styleId);
      (vnode.props || (vnode.props = {}))[styleId] = ''
    }

let roots = hook.getFiberRoots(rid);
			root = helpers.handleCommitFiberRoot(root);
			if (!roots.has(root)) roots.add(root);
		});

		onCommitUnmount = catchErrors(vnode => {
			hook.onCommitFiberUnmount(rid, vnode);
		});
	})();

	// Store (possible) previous hooks so that we don't overwrite them
	let prevVNodeHook = options.vnode;
	let prevCommitRoot = options._commit;
	let prevBeforeUnmount = options.unmount;
	let prevBeforeDiff = options._diff;
	let prevAfterDiff = options.diffed;

	options.vnode = vnode => {
		// Tiny performance improvement by initializing fields as doubles
		// from the start. `performance.now()` will always return a double.
		// See https://github.com/facebook/react/issues/14365
		// and https://slidr.io/bmeurer/javascript-engine-fundamentals-the-good-the-bad-and-the-ugly
		vnode.startTime = NaN;
		vnode.endTime = NaN;

		vnode.startTime = 0;
		vnode.endTime = -1;
		if (prevVNodeHook) prevVNodeHook(vnode);
	};

	options._diff = vnode => {
		vnode.startTime = now();

// See https://github.com/facebook/react/issues/14365
		// and https://slidr.io/bmeurer/javascript-engine-fundamentals-the-good-the-bad-and-the-ugly
		vnode.startTime = NaN;
		vnode.endTime = NaN;

		vnode.startTime = 0;
		vnode.endTime = -1;
		if (prevVNodeHook) prevVNodeHook(vnode);
	};

	options._diff = vnode => {
		vnode.startTime = now();
		if (prevBeforeDiff != null) prevBeforeDiff(vnode);
	};

	options.diffed = vnode => {
		vnode.endTime = now();
		if (prevAfterDiff != null) prevAfterDiff(vnode);
	};

	options._commit = catchErrors((vnode, commitQueue) => {
		// Call previously defined hook
		if (prevCommitRoot != null) prevCommitRoot(vnode, commitQueue);

		// These cases are already handled by `unmount`
		if (vnode == null) return;
		onCommitRoot(vnode);
	});

	options.unmount = catchErrors(vnode => {
		// Call previously defined hook
		if (prevBeforeUnmount != null) prevBeforeUnmount(vnode);

import { options } from 'preact'
import { getStyleId, appendStyle } from './style'

let componentNode

// store a reference to the "current component" vnode
let oldDiff = options._diff || options.__b
options._diff = options.__b = vnode => {
  componentNode = vnode
  if (oldDiff) oldDiff(vnode)
}

// reset component reference at end of diffing:
let oldDiffed = options.diffed
options.diffed = vnode => {
  if (componentNode === vnode) componentNode = null
  if (oldDiffed) oldDiffed(vnode)
}

// our vnode hook looks up the associated component
let old = options.vnode
options.vnode = vnode => {
  const component = componentNode && (componentNode._component || componentNode.__c)
  if (component) {

    if(component.constructor.css){
      const styleId = getStyleId(component.constructor)
      appendStyle(component.constructor.css, styleId);
      (vnode.props || (vnode.props = {}))[styleId] = ''
    }
  }

export function clearOptions() {
	oldOptions = assign({}, options);
	delete options.vnode;
	delete options.diffed;
	delete options.unmount;
	delete options._diff;
}

let prevRaf;

options._render = vnode => {
	if (oldBeforeRender) oldBeforeRender(vnode);

	currentComponent = vnode._component;
	currentIndex = 0;

	if (currentComponent.__hooks) {
		currentComponent.__hooks._pendingEffects.forEach(invokeCleanup);
		currentComponent.__hooks._pendingEffects.forEach(invokeEffect);
		currentComponent.__hooks._pendingEffects = [];
	}
};

options.diffed = vnode => {
	if (oldAfterDiff) oldAfterDiff(vnode);

	const c = vnode._component;
	if (!c) return;

	const hooks = c.__hooks;
	if (hooks) {
		if (hooks._pendingEffects.length) {
			afterPaint(afterPaintEffects.push(c));
		}
	}
};

options._commit = (vnode, commitQueue) => {
	commitQueue.some(component => {
		component._renderCallbacks.forEach(invokeCleanup);

export function setupComponentStack() {
	let oldDiff = options._diff;
	let oldDiffed = options.diffed;
	let oldRoot = options._root;
	let oldVNode = options.vnode;
	let oldRender = options._render;

	options.diffed = vnode => {
		if (isPossibleOwner(vnode)) {
			ownerStack.pop();
		}
		renderStack.pop();
		if (oldDiffed) oldDiffed(vnode);
	};

	options._diff = vnode => {
		if (isPossibleOwner(vnode)) {
			renderStack.push(vnode);
		}

export function setupComponentStack() {
	let oldDiff = options._diff;
	let oldDiffed = options.diffed;
	let oldRoot = options._root;
	let oldVNode = options.vnode;
	let oldRender = options._render;

	options.diffed = vnode => {
		if (isPossibleOwner(vnode)) {
			ownerStack.pop();
		}
		renderStack.pop();
		if (oldDiffed) oldDiffed(vnode);
	};

	options._diff = vnode => {
		if (isPossibleOwner(vnode)) {
			renderStack.push(vnode);
		}
		if (oldDiff) oldDiff(vnode);
	};

	options._root = (vnode, parent) => {
		ownerStack = [];

componentWillUnmount() {
		delete options._diff;
		delete options.diffed;
	}

componentDidMount() {
		options._diff = vnode => (vnode.startTime = performance.now());
		options.diffed = vnode => (vnode.endTime = performance.now());
	}