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 of code:* 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 is className. 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.
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:
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.Imagecomponent 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.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.