nostalgie
nostalgie copied to clipboard
Explore a first-class image component
Different SSG and hybrid frameworks like Next.js and Gatsby have first-class support for images. This comes as no surprise when you dive into the complexities of serving images well on a modern browser.
Let's explore bringing a first class image concept to Nostalgie. I think that the code:
imports sets an interesting precedent for this feature; with a special import syntax you are able to import an ESM whose default export is a React component with special, compile-time work.
We should:
- [ ] Add typing support for a new
import Foo from 'image:./path/to/image.ext'
import specifier. We can re-use the same pattern from code imports. That type definition will be copied at build time so that the ambient definition ofcode:*
is understood by TypeScript language services. - [ ] Create the
Image
component in our internal list of components. A good pattern for this component can be found in the CodeSnippet component. Maybe the only prop it needs initially isclassName
. Not sure about this and totally open to ideas. - [ ] Create an esbuild plugin to be used by the SSR and client-side builders. A good pattern is again the plugin for the
code:
imports. I don't think there's much importance in the ordering of plugins in this case. The plugin should be wired up in the linked builders. - [ ] Profit!