alangpierce

type Template<T> = (args: T) => string;
export function makeJadeTransitionShim<T>(jadeTemplate: Template<T>, Component: React.ComponentType<T>): Template<T> {
  return (args: T) => {
    const jadeResult = jadeTemplate(args);
    const reactResult = ReactDOMServer.renderToStaticMarkup(<Component {...args} />);
    assert(jadeResult === reactResult, 'Results not equal!');
    return jadeResult;
  };
}

alangpierce

import React from 'react';
import ActiveEnzymeJadeTemplate from 'toolbar/templates/activeenzyme.jade';
import {makeJadeTransitionShim} from 'util/makeJadeTransitionShim';
export interface ActiveEnzymeProps {
}
function ActiveEnzyme({}: ActiveEnzymeProps): JSX.Element {
  return <span>TODO</span>;
}
export default makeJadeTransitionShim<ActiveEnzymeProps>(ActiveEnzymeJadeTemplate, ActiveEnzyme);

alangpierce

function ActiveEnzyme({}: ActiveEnzymeProps): JSX.Element {
  return (
    <>
      <td className="mono">Acc65I</td>
      <td>
        <div style="background-color: #F58A5E;" className="swatch" />
      </td>
    </>
  );
}

alangpierce

export interface ActiveEnzymeProps {
  color: string;
  name: string;
}
function ActiveEnzyme({color, name}: ActiveEnzymeProps): JSX.Element {
  return (
    <>
      <td className="mono">{name}</td>
      <td>
        <div style={{backgroundColor: color}} className="swatch" />