Use Thumbnail component in a plain, HTML/JavaScript (non-React) page

[adamjarling]

Notes

This provides a user not using React the ability to still use the Thumbnail component.

Done looks like

• Package is published to npm under the @iiif organization. @iiif/thumbnail-panel
• Can import the package in an HTML file via <script src="..path-to-thumbnail"></script>
• The package should be bundled appropriately to allow importing in a variety of host environments

[glenrobson]

Adam has it so you can import it into a React component and is close to getting it working in a Vanilla JS project.

Do we want to bundle react with it? UV has umd build include with a script tag. umd script can then be hosted on a CDN.

Not a good idea to include react in the umd bundle but this would mean the user needs to import the react.

There is also a vite related package called react to web component.

[glenrobson]

One for the future:

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler

https://www.youtube.com/watch?v=IoFmugrP1UQ

[glenrobson]

This is the one we are going to try first:

https://www.npmjs.com/package/react-to-webcomponent

[stephenwf]

Another option would be to ship with preact instead of react for a web component (avoids having to require user to include React OR conflicts with 2 versions of react on the page).

https://github.com/digirati-co-uk/iiif-canvas-panel/blob/main/packages/canvas-panel/src/web-components/metadata-panel.tsx#L65-L94

Unfortunately for this I had to fork the preact-custom-element library. https://github.com/digirati-co-uk/iiif-canvas-panel/tree/main/packages/preact-custom-element

But the build options are here: https://github.com/digirati-co-uk/iiif-canvas-panel/blob/main/packages/canvas-panel/esbuild.mjs

ESBuild in this case, but could be made to work with Vite I'm sure. The main thing are overwriting the packages listed there.

[adamjarling]

Un assigning myself from this... sounds like @stephenwf has a better pattern for implementing vanilla JS. Moving onto React features, but happy to come back to this later if need be.

[stephenwf]

Demo here: https://codesandbox.io/s/thumbnail-panel-wc-gofzr7?file=/index.html

[glenrobson]

Ben has volunteered to document this use case in the iiif-commons repo. Should this go in:

https://github.com/IIIF-Commons/thumbnail-panel/tree/main/docs

[stephenwf]

For now: https://github.com/IIIF-Commons/common-docs/tree/main/docs/thumbnail-panel directly in here would be good.

Still some questions about the common docs, so things will probably change soon with it.

[mathewjordan]

@glenrobson This is somewhat already documented here and may be a solid start for Ben: https://github.com/IIIF-Commons/thumbnail-panel/blob/main/docs/basic-usage.md