feat: the rendererer poc

[phanshiyu]

why

• adding svg rendering support requires user to deal with 2 different interfaces
• user should not need to handle logic to differentiate between not just OA document versions, but also render methods
• the frame connector interface is complicated, this a good chance for us to improve

what

a component that takes in a document, and renders it

poc of a Renderer with a simple interface that handles both svg and embedded renderer

user potentially does not need to deal with frame actions or whatever

const Viewer: React.FunctionComponent<ViewerProps> = ({ document }): React.ReactElement => {
  const [selectedTemplate, setSelectedTemplate] = useState<string>("");
  const [rendererResults, setRendererResults] = useState<ConnectedResults>();

  return (
    <div>
      {/* render tabs */}
      {rendererResults?.type === "EMBEDDED_RENDERER" && (
        <ul>
          {rendererResults.templates.map((template) => (
            <li
              key={template.id}
              className={`tab ${selectedTemplate === template.id ? "selected" : ""}`}
              onClick={() => {
                setSelectedTemplate(template.id);
                rendererResults.selectTemplate({
                  id: template.id,
                });
              }}
            >
              <a href="#">{template.label}</a>
            </li>
          ))}
        </ul>
      )}
      {/* print button */}
      <button
        onClick={() => {
          rendererResults?.print();
        }}
      >
        Print
      </button>
      <TheRenderer
        document={document.document}
        onConnected={(results) => {
          console.log(results);
          setRendererResults(results);
          if (results.type === "EMBEDDED_RENDERER") {

            setSelectedTemplate(results.selectedTemplateId);
          }
        }}
        onError={({ type, ...rest }) => {
          console.error(type);
          console.error(rest);
        }}
        onObfuscation={({ updatedDocument, field }) => {
          console.log(updatedDocument);
          console.log(field);
        }}
        loadingComponent={<>loading...</>}
      />;
    </div>
  );
};

• support v4 documents
• return typed objects for error
• loading component
• obfuscation out of the box
• sandbox props
• getData under the hood
• jsdocs
• migration guide