Load formats on demand
A viewer that supports six formats and downloads one.
A format descriptor is data plus one dynamic import. The data is what recognises the file — a content type inside the ZIP, a magic number, an extension — so the registry can decide which module it needs before fetching any of them.
That ordering is the whole trick. Without it, finding out that a file is a workbook would mean loading the Word parser first, and every application would pay for every format.
import { DocumentViewer } from '@genomdev/react';
import { docx, pdf } from '@genomdev/genom/lazy';
<DocumentViewer file={file} formats={[docx, pdf]} />;Eager, when a chunk is not worth it
For an application that only ever shows one format, a round trip to fetch it is worse than shipping it. Import the module itself instead of the descriptor — the prop takes both, and mixing them is fine.
import { docxView } from '@genomdev/docx/view';
import { pdf } from '@genomdev/genom/lazy';
// Word in the entry chunk, PDF fetched if it turns up.
const formats = [docxView, pdf];What it costs to be sure
Recognition is exact for PDF, which announces itself in its first five bytes, and for the three OOXML formats, which are told apart by the content type of the main part inside the ZIP. Reading that costs one inflate of a part that is always a few kilobytes.
The one case rules cannot settle is the OLE2 compound file: a .doc, an .xls and a .ppt share one signature, and only the directory inside says which is which. There the candidate modules are fetched in order and asked. In practice that is at most three chunks for a legacy file, and the office kernel they share is fetched once.
@genomdev/docx.