mirror of
https://github.com/verdaccio/verdaccio.git
synced 2024-12-16 21:56:25 -05:00
fix(middleware): link to favicon in template (#4744)
This commit is contained in:
parent
3c6e6b9af7
commit
ccc7bd1df5
8 changed files with 90 additions and 88 deletions
6
.changeset/mighty-gorillas-fail.md
Normal file
6
.changeset/mighty-gorillas-fail.md
Normal file
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
'@verdaccio/middleware': patch
|
||||
'@verdaccio/url': patch
|
||||
---
|
||||
|
||||
fix(middleware): link to favicon in template
|
|
@ -102,7 +102,7 @@ describe('host', () => {
|
|||
});
|
||||
|
||||
expect(
|
||||
getPublicUrl(null, {
|
||||
getPublicUrl(undefined, {
|
||||
host: req.hostname,
|
||||
headers: req.headers as any,
|
||||
protocol: req.protocol,
|
||||
|
|
|
@ -35,6 +35,7 @@
|
|||
"build:js": "babel src/ --out-dir build/ --copy-files --extensions \".ts,.tsx\" --source-maps",
|
||||
"watch": "pnpm build:js -- --watch",
|
||||
"test": "jest",
|
||||
"test:snap": "jest --updateSnapshot",
|
||||
"build": "pnpm run build:js && pnpm run build:types"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
@ -16,8 +16,16 @@ export function getManifestValue(
|
|||
): string[] {
|
||||
return manifestItems?.map((item) => {
|
||||
debug('resolve item %o', item);
|
||||
const resolvedItem = `${basePath}${manifest[item]}`;
|
||||
const resolvedItem = `${stripTrailingSlash(basePath)}/${stripLeadingSlash(manifest[item])}`;
|
||||
debug('resolved item %o', resolvedItem);
|
||||
return resolvedItem;
|
||||
});
|
||||
}
|
||||
|
||||
function stripTrailingSlash(path: string): string {
|
||||
return path.replace(/\/$/, '');
|
||||
}
|
||||
|
||||
function stripLeadingSlash(path: string): string {
|
||||
return path.replace(/^\//, '');
|
||||
}
|
||||
|
|
|
@ -25,24 +25,24 @@ export default function renderTemplate(template: Template, manifest: WebpackMani
|
|||
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="${template?.options.base}">
|
||||
<title>${template?.options?.title ?? ''}</title>
|
||||
<link rel="icon" href="${template?.options.base}/-/static/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>${template?.options?.title ?? ''}</title>
|
||||
<link rel="icon" href="${template?.options.base}-/static/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS=${JSON.stringify(template.options)}
|
||||
</script>
|
||||
${template?.metaScripts ? template.metaScripts.join('') : ''}
|
||||
</head>
|
||||
</head>
|
||||
<body class="body">
|
||||
${template?.scriptsbodyBefore ? template.scriptsbodyBefore.join('') : ''}
|
||||
${template?.scriptsbodyBefore ? template.scriptsbodyBefore.join('') : ''}
|
||||
<div id="root"></div>
|
||||
${getManifestValue(template.manifest.js, manifest, template?.options.base)
|
||||
.map((item) => `<script defer="defer" src="${item}"></script>`)
|
||||
.join('')}
|
||||
.join(`\n `)}
|
||||
${template?.scriptsBodyAfter ? template.scriptsBodyAfter.join('') : ''}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -3,22 +3,23 @@
|
|||
exports[`template custom body after 1`] = `
|
||||
"
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="http://domain.com">
|
||||
<title></title>
|
||||
<base href="http://domain.com/">
|
||||
<title></title>
|
||||
<link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com"}
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
</head>
|
||||
<body class="body">
|
||||
|
||||
|
||||
<div id="root"></div>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
<script src="foo"/>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -28,22 +29,23 @@ exports[`template custom body after 1`] = `
|
|||
exports[`template custom body before 1`] = `
|
||||
"
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="http://domain.com">
|
||||
<title></title>
|
||||
<base href="http://domain.com/">
|
||||
<title></title>
|
||||
<link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com"}
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
</head>
|
||||
<body class="body">
|
||||
<script src="fooBefore"/><script src="barBefore"/>
|
||||
<script src="fooBefore"/><script src="barBefore"/>
|
||||
<div id="root"></div>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -53,22 +55,23 @@ exports[`template custom body before 1`] = `
|
|||
exports[`template custom render 1`] = `
|
||||
"
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="http://domain.com">
|
||||
<title></title>
|
||||
<base href="http://domain.com/">
|
||||
<title></title>
|
||||
<link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com"}
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
</head>
|
||||
<body class="body">
|
||||
|
||||
|
||||
<div id="root"></div>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -78,47 +81,23 @@ exports[`template custom render 1`] = `
|
|||
exports[`template custom title 1`] = `
|
||||
"
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="http://domain.com">
|
||||
<title>foo title</title>
|
||||
<base href="http://domain.com/">
|
||||
<title>foo title</title>
|
||||
<link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com","title":"foo title"}
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/","title":"foo title"}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
</head>
|
||||
<body class="body">
|
||||
|
||||
<div id="root"></div>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
"
|
||||
`;
|
||||
|
||||
exports[`template custom title 2`] = `
|
||||
"
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="http://domain.com">
|
||||
<title>foo title</title>
|
||||
<link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com","title":"foo title"}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body class="body">
|
||||
|
||||
<div id="root"></div>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
@ -128,22 +107,23 @@ exports[`template custom title 2`] = `
|
|||
exports[`template meta scripts 1`] = `
|
||||
"
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="http://domain.com">
|
||||
<title></title>
|
||||
<base href="http://domain.com/">
|
||||
<title></title>
|
||||
<link rel="icon" href="http://domain.com/-/static/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script>
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com"}
|
||||
window.__VERDACCIO_BASENAME_UI_OPTIONS={"base":"http://domain.com/"}
|
||||
</script>
|
||||
<style>.someclass{font-size:10px;}</style>
|
||||
</head>
|
||||
</head>
|
||||
<body class="body">
|
||||
|
||||
|
||||
<div id="root"></div>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script><script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/runtime.6126058572f989c948b1.js"></script>
|
||||
<script defer="defer" src="http://domain.com/-/static/main.6126058572f989c948b1.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -8,4 +8,16 @@ describe('manifest', () => {
|
|||
'/-/static/main.6126058572f989c948b1.js',
|
||||
]);
|
||||
});
|
||||
|
||||
test('getManifestValue with base', () => {
|
||||
expect(getManifestValue(['favicon.ico'], manifest, 'http://domain.com')).toEqual([
|
||||
'http://domain.com/-/static/favicon.ico',
|
||||
]);
|
||||
});
|
||||
|
||||
test('getManifestValue with base with trailing slash', () => {
|
||||
expect(getManifestValue(['favicon.ico'], manifest, 'http://domain.com/')).toEqual([
|
||||
'http://domain.com/-/static/favicon.ico',
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -2,32 +2,27 @@ import template from '../src/middlewares/web/utils/template';
|
|||
|
||||
const manifest = require('./partials/manifest/manifest.json');
|
||||
|
||||
// manifest expected to have leading slash
|
||||
// see packages\middleware\test\partials\manifest\manifest.json
|
||||
const exampleManifest = {
|
||||
css: ['main.css'],
|
||||
js: ['runtime.js', 'main.js'],
|
||||
ico: '/static/foo.ico',
|
||||
ico: 'favicon.ico',
|
||||
};
|
||||
|
||||
// "base" is expected to be result of getPublicUrl
|
||||
// i.e. it must be valid URL with trailing slash
|
||||
describe('template', () => {
|
||||
test('custom render', () => {
|
||||
expect(
|
||||
template({ options: { base: 'http://domain.com' }, manifest: exampleManifest }, manifest)
|
||||
template({ options: { base: 'http://domain.com/' }, manifest: exampleManifest }, manifest)
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('custom title', () => {
|
||||
expect(
|
||||
template(
|
||||
{ options: { base: 'http://domain.com', title: 'foo title' }, manifest: exampleManifest },
|
||||
manifest
|
||||
)
|
||||
).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('custom title', () => {
|
||||
expect(
|
||||
template(
|
||||
{ options: { base: 'http://domain.com', title: 'foo title' }, manifest: exampleManifest },
|
||||
{ options: { base: 'http://domain.com/', title: 'foo title' }, manifest: exampleManifest },
|
||||
manifest
|
||||
)
|
||||
).toMatchSnapshot();
|
||||
|
@ -37,7 +32,7 @@ describe('template', () => {
|
|||
expect(
|
||||
template(
|
||||
{
|
||||
options: { base: 'http://domain.com' },
|
||||
options: { base: 'http://domain.com/' },
|
||||
metaScripts: [`<style>.someclass{font-size:10px;}</style>`],
|
||||
manifest: exampleManifest,
|
||||
},
|
||||
|
@ -50,7 +45,7 @@ describe('template', () => {
|
|||
expect(
|
||||
template(
|
||||
{
|
||||
options: { base: 'http://domain.com' },
|
||||
options: { base: 'http://domain.com/' },
|
||||
scriptsBodyAfter: [`<script src="foo"/>`],
|
||||
manifest: exampleManifest,
|
||||
},
|
||||
|
@ -63,7 +58,7 @@ describe('template', () => {
|
|||
expect(
|
||||
template(
|
||||
{
|
||||
options: { base: 'http://domain.com' },
|
||||
options: { base: 'http://domain.com/' },
|
||||
scriptsbodyBefore: [`<script src="fooBefore"/>`, `<script src="barBefore"/>`],
|
||||
manifest: exampleManifest,
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue