Static analysis of iframe src

[tschaub]

Is your feature request related to a problem? Please describe.
I'm trying to use iframes with relative src paths and was hoping that these would be handled in Slidev as they are in Vite (e.g. Vite serves the iframe sources and bundles scripts referenced in them).

I see that Slidev allows assets like images and videos to be "imported" with relative paths.

Describe the solution you'd like
I was hoping it would be possible to have something like this in a slide:

<iframe src="./example/basic.html"></iframe>

With that, I would like Vite to serve the ./example/basic.html in development and bundle referenced scripts when doing a build.

Describe alternatives you've considered

I have considered running a second instance of Vite to host the iframe sources during development and to generate the build after building with Slidev. This sounds very awkward.

[KermanX]

I found a workaround:

vite.plugin.ts (in the same directory as your slides.md):

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  slidev: {
    vue: {
      template: {
        transformAssetUrls: {
          iframe: ['src'],

          // Default ones
          video: ['src', 'poster'],
          source: ['src'],
          img: ['src'],
          image: ['xlink:href', 'href'],
          use: ['xlink:href', 'href'],
        },
      },
    },
  },
})

slides.md (Note there is an additional ?url):

<iframe src="./basic.html?url"></iframe>

[tschaub]

Thanks for looking into this, @KermanX.

I tried the workaround that you suggested, but I'm seeing the main index.html loaded (infinitely) instead of the iframe source.

Here is an effort to use the transformAssetUrls workaround: https://stackblitz.com/edit/slidev-iframe-plugin-ibx8tj?file=slides.md

The workaround I am currently using is to add the iframe sources to the options.input (so these are included when building) and then to add middleware in configureServer that overrides response.end (to avoid the dev server behavior of using the same index.html for all *.html requests). Not feeling great about that, but it does seem to be working.

Here is an example with the above hacky workaround: https://stackblitz.com/edit/slidev-iframe-plugin-upiwfu?file=vite.config.ts