Support add importmap script into head

vuejs / vitepress

Vite & Vue powered static site generator.

https://vitepress.dev

MIT License

13.22k stars 2.13k forks source link

Support add importmap script into head #4168

Open eshengsky opened 2 months ago

eshengsky commented 2 months ago

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

I want to add a script which type is 'importmap' into top of head, but all solution is failed. The official custom head config, will add script into end of head, this causes 'importmap' to fail to work.

Describe the solution you'd like

add 'importmap' config in .vitepress/config
or, let head config to support position top/end

Describe alternatives you've considered

No response

Additional context

No response

Validations

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Read the Contributing Guidelines.
[X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

brc-dd commented 2 months ago

We can move that above other scripts by default maybe 👀 But having an order attribute might be more customizable.

mistic100 commented 2 months ago

I think importmap should have a special handling and be directly added to the HTML at compile time (even in dev mode) and not added at runtime by useUpdateHead.

When declaring a head element with ['script', { type: 'importmap' }, ``....``] I get the following error (french):

Les mappages d’importation ne sont pas autorisés après le chargement d’un module ou le démarrage du préchargement.

Which roughly transletes to

Import mapping are not autorised after a module has been loaded or after the preloading has begun.

Has I understand it, importmap scripts cannot be added dynamically to the page.

mistic100 commented 2 months ago

Relevant vite issue https://github.com/vitejs/vite/issues/15192

A working solution is privided here : use a Vite plugin to inject the importmap inside the HTML.

Example:

export default defineConfig({
    vite: {
        plugins: [
            {
                name: 'html-transform',
                transformIndexHtml(html) {
                    return html.replace('</head>', `
<script type="importmap">
{
    "imports": {
        .....
    }
}
</script>
</head>`,
                    );
                },
            },
        ],
    },
});

eshengsky commented 1 month ago

Relevant vite issue vitejs/vite#15192

A working solution is privided here : use a Vite plugin to inject the importmap inside the HTML.

Example:

export default defineConfig({
    vite: {
        plugins: [
            {
                name: 'html-transform',
                transformIndexHtml(html) {
                    return html.replace('</head>', `
<script type="importmap">
{
    "imports": {
        .....
    }
}
</script>
</head>`,
                    );
                },
            },
        ],
    },
});

This is not working when vitepress build docs, just work in dev mode.

mistic100 commented 1 month ago

Vitepress transformHtml option have to be used to achieve the same effect at build time

transformHtml(html) {
        return html.replace('<head>', `<head>${importmap}`);
    },

See here for complete implementation (bottom of the file) https://github.com/mistic100/Photo-Sphere-Viewer/blob/main/docs/.vitepress/config.mts