The original index.html should not be modfied

[markope]

Only the build output should contain the generated preloads.

Is there a setting for that? Why does the plugin touch the index.html in the first place?

[bennypowers]

The idea of the current implementation is to modify the built index.

So if your build regime takes some src/index.html and modifies it, outputting build/index.html, then under the current version you should set the plugin's index option to build/index.html.

I agree that the plugin should do a better job of writing artifacts. It currently abuses the Rollup API somewhat to accomplish its goals. PRs very welcome.

[uribalb]

The idea of the current implementation is to modify the built index.

So if your build regime takes some src/index.html and modifies it, outputting build/index.html, then under the current version you should set the plugin's index option to build/index.html.

This is what I did but I got:

[!] (plugin modulepreload) Error: ENOENT: no such file or directory It seems like the file doesn't exist yet (svelte routify starter template, 2x-simplified branch). Investigating...

[bennypowers]

I don't know all that much about svelte routify starter template can you provide more info?

[uribalb]

I don't know all that much about svelte routify starter template can you provide more info?

It's a svelte template which uses rollup. Here the rollup.config.js:

import svelte from 'rollup-plugin-svelte-hot';
import Hmr from 'rollup-plugin-hot'
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import { copySync, removeSync } from 'fs-extra'
import { spassr } from 'spassr'
import getConfig from '@roxi/routify/lib/utils/config'
import autoPreprocess from 'svelte-preprocess'
import postcssImport from 'postcss-import'
import { injectManifest } from 'rollup-plugin-workbox'

const { distDir } = getConfig()
const assetsDir = 'assets'
const buildDir = `assets/build`
const isNollup = !!process.env.NOLLUP
const production = !process.env.ROLLUP_WATCH;

// clear previous builds
removeSync(distDir)
removeSync(buildDir)

const serve = () => ({
    writeBundle: async () => {
        const options = {
            assetsDir,
            entrypoint: `${assetsDir}/__app.html`,
            script: `${buildDir}/main.js`
        }
        spassr({ ...options, port: 5000 })
        spassr({ ...options, ssr: true, port: 5005, ssrOptions: { inlineDynamicImports: true, dev: true } })
    }
})
const copyToDist = () => ({ writeBundle() { copySync(assetsDir, distDir) } })

export default {
    preserveEntrySignatures: false,
    input: [`src/main.js`],
    output: {
        sourcemap: true,
        format: 'esm',
        dir: buildDir
    },
    plugins: [
        svelte({
            dev: !production, // run-time checks      
            // Extract component CSS — better performance
            css: css => css.write(`${buildDir}/bundle.css`),
            hot: isNollup,
            preprocess:
                autoPreprocess({
                    postcss: { plugins: [postcssImport()] },
                    defaults: { style: 'postcss' }
                })
        }),

        // resolve matching modules from current working directory
        resolve({
            browser: true,
            dedupe: importee => !!importee.match(/svelte(\/|$)/)
        }),
        commonjs(),

        production && terser(),
        !production && !isNollup && serve(),
        !production && !isNollup && livereload(distDir), // refresh entire window when code is updated
        !production && isNollup && Hmr({ inMemory: true, public: assetsDir, }), // refresh only updated code
        {
            transform: code => code.replace('process.env.NODE_ENV', `"${process.env.NODE_ENV}"`)
        },
        injectManifest({
            globDirectory: assetsDir,
            globPatterns: ['**/*.{js,css,svg}', '__app.html'],
            swSrc: `src/sw.js`,
            swDest: `assets/build/serviceworker.js`,
            maximumFileSizeToCacheInBytes: 10000000, // 10 MB,
            mode: 'production'
        }),
        production && copyToDist(),
    ],
    watch: {
        clearScreen: false,
        buildDelay: 100,
    }
}

I added your plugin in the plugin array with the options:

production && modulepreload({ prefix: 'build', 
                index: `dist/__app.html`, }) 

to modify the built __app.html file but I get:

[!] (plugin modulepreload) Error: ENOENT: no such file or directory, open 'C:\Users\username\Documents\project_name\dist__app.html'

Because the plugin begins its job before the index file has been built, apparently. I'm looking into and experimenting with rollup build hooks right now but nothing seems to work 😞

[bennypowers]

yeah probably it's happening before svelte

Unfortunately I don't have time to work on this at the moment, but PRs are welcome 👍