Make shortcodes accessible via JSX files

[Deleted user]

Is your feature request related to a problem? Please describe.

When using JSX as a templating language, I don't have access to shortcodes. These would ideally be based on the component props

Describe the solution you'd like

I'd like shortcodes to be accessible via the global __slinkity object we already use for injecting styles into the head
. Ideally, the result of that shortcode would be a component I could use in my markup like so:

function Example({ __slinkity: { shortcodes } }) {
  const HydratedComponent = shortcodes.react('Component.jsx')
  const Image = shortcodes.image()
  return (
    <Image src="/unoptimized/image.png" alt="Optimized image!" />
    <HydratedComponent hydrate="eager" />
  )
}

TODO: flesh out MVP further

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

[Ben Holmes]

Update: this proposed API is garbage! I think we'll allow shortcode access via hooks + helper components instead. Here's an rough view of my dream API we'll be investigating for 1.0:

import { ServerOnlyIsland, Island, useFunctions, Shortcode } from '@slinkity/preact'

export default function Static({ title }) {
  // access filters and shortcodes as JS functions via the `useFunctions` hook
  const { slugify } = useFunctions();

  return (
    <main>
      <h1>{slugify(title)}</h1>
     {/* render shortcode function results to a JSX element via the Shortcode component */}
      <Shortcode name="renderTemplate" args={['md']}>{`
      # Hey there!
      
      I'm writing markdown inline. Check it out!
      `}</Shortcode>
      <Shortcode name="image" args={['/image.png', 'Hey there!']} />
     {/* render islands to a JSX element via the Island and ServerOnlyIsland components */}
      <ServerOnlyIsland src="Banner.vue" props={{ text: 'Hey there!' }} />
      <Island src="Counter.jsx" on={["visible", "idle"]} props={{ initialCount: 2 }} />
    </main>
  )
}