some plugin assets not working on github codespaces

[joelanman]

Description of the issue

Not sure if this is the kit or Codespaces

If a plugin's name has special characters like @ and /, for example @x-govuk/govuk-prototype-components, the assets fail to load on GitHub Codespaces

Steps to reproduce the issue

1. Install the kit on GitHub Codespaces and install a plugin with special chars in the name, for example

npm install @x-govuk/govuk-prototype-components

2. Go to Templates and look at the templates, any images or js will fail to load

From investigation, req.path normally gives something like

/plugin-assets/%40x-govuk%2Fgovuk-prototype-components/govuk-prototype-kit/init.js

but on Codespaces it gives

/plugin-assets/@x-govuk%252Fgovuk-prototype-components/govuk-prototype-kit/init.js

Actual vs expected behaviour

Ideally these plugins would work on Codespaces too

[joelanman]

I think part of this might be a codespaces issue, but another part is, these paths are hard to code - when you need to refer to an asset you need to use the encoded path (not init as that runs automatically, but other assets).

npm itself does not encode the @:

https://www.npmjs.com/package/@x-govuk/govuk-prototype-components

so we could just do this and it would work everywhere and be easier to type and read

plugin-assets/@x-govuk/govuk-prototype-components/govuk-prototype-kit/init.js