How to preview / test / debug the transformed components

mtmacdonald commented 2 months ago

Thanks for the great package. I have a question that wasn't obvious to me from reading the docs.

How can I preview / test / debug the transformed elements (e.g. to help me debug styles)?

I am able to use <PDFViewer> from react-pdf to view the output PDF. But I want a way to see which react-pdf components were generated by this package for any given input HTML. Something similar to the code view in react-pdf.org/repl is what I'm after, but showing the generated code from this package.

Is that possible?

danomatic commented 2 months ago

Check out some of these tests: https://github.com/danomatic/react-pdf-html/blob/main/src/render.test.tsx#L150

And if you want to JSON.stringify() the result, you can run the result through a helper like this: https://github.com/danomatic/react-pdf-html/blob/main/src/render.test.tsx#L10

I'd like to create a better system, because it's been a bit complex to write tests for. LMK if you come up with anything good.

mtmacdonald commented 2 months ago

Thanks! renderHtml() was helpful. I'd like to visualise it inline next to the PDF. I've tried react-inspector and it helps a bit (enough to get me started). Ideally I'd like a less low-level view of the generated components (perhaps something like react-devtools-inline, but I didn't figure out yet how to set that up).

import { ObjectInspector } from 'react-inspector';
import Html from 'react-pdf-html';
import { Document, Page, PDFViewer } from '@react-pdf/renderer';
import { renderHtml } from 'react-pdf-html';
import html from '../playground.html?raw';
import styles from './app.module.css';

export const App = () => {
  return (
    <div className={styles.container}>
      <div className={styles.left}>
        <ObjectInspector data={renderHtml(html)} />
      </div>
      <div className={styles.right}>
        <PDFViewer>
          <Document>
            <Page>
              <Html>{html}</Html>
            </Page>
          </Document>
        </PDFViewer>
      </div>
    </div>
  );
};

danomatic / react-pdf-html

How to preview / test / debug the transformed components #103