frameright / react-image-display-control Goto Github PK

https://unpic.pics/img/react/

As for #6, out of curiosity, what happens if we wrap an unpic <Image> with our React component?

Out of curiosity, what happens if we do

<ImageDisplayControl>
  <TwicImg src=... />
</ImageDisplayControl>

? See https://www.twicpics.com/docs/components/react

By following https://github.com/Frameright/image-display-control-web-component/blob/main/image-display-control/docs/explanation/browsers.md#resizeobserver-polyfill we can support older Safari versions.

Related to Frameright/image-display-control-web-component#10

When doing

<ImageDisplayControl>
  <img src=... />
</ImageDisplayControl>

an is="image-display-control" attribute will be added to the <img> tag in order to turn it into an Image Display Control web component. This is problematic however if the <img> tag already had another is= attribute, e.g.

<ImageDisplayControl>
  <img is="already-another-component" src=... />
</ImageDisplayControl>

An <img> tag can't be two web components at the same time. We should at least issue a warning if this happens.

For example, if the user writes

<ImageDisplayControl data-disabled="all">
  <Image src="..." />
</ImageDisplayControl>

instead of

<ImageDisplayControl>
  <Image src="..." data-disabled="all" />
</ImageDisplayControl>

See:

• https://docs.frameright.io/react/attributes
• https://docs.frameright.io/web-component/attribute-ref

We scaffolded this project using https://github.com/jaredpalmer/tsdx, which isn't maintained anymore, leading to issues and workarounds like the overrides in https://github.com/Frameright/react-image-display-control/blob/main/package.json

In our package.json scripts calling tsdx, most of the time it is only a wrapper around other well-known open-source tools, so we should be able to get rid of it.

This would allow some user CSS rules to target that and display something while things are loading.

Somewhat related to 2. CSS class marking well-functioning components in Frameright/image-display-control-web-component#7

e.g. using something like vuepress or vitepress?

Related to Frameright/image-display-control-web-component#6

<ImageDisplayControl>
  <Image src=... />
</ImageDisplayControl>

In case the child's src= is constructed for example based on its state, updated later asynchronously by a useEffect(), we (the parent <ImageDisplayControl>) won't notice the change, and so we won't fetch the new image regions corresponding to the new image.

How to solve this? With a MutationObserver? With some kind of subscription to the children's React states?