Skip to content

Commit 416ee0b

Browse files
alexkilgouralexkilgour
committed
[ak] util-package-renderer v3.3.1 - don't try and inline hash links
1 parent 04dbc06 commit 416ee0b

File tree

4 files changed

+26
-11
lines changed

4 files changed

+26
-11
lines changed

‎packages/util-package-renderer/HISTORY.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
# History
22

3+
## 3.3.1 (2022-09-20)
4+
* BUG: Don't try and inline when svg is already in the page (referenced by just a hash)
5+
36
## 3.3.0 (2022-09-15)
47
* FEATURE: Adds support for inlining SVGs that are referenced with the use directive
58

‎packages/util-package-renderer/__tests__/unit/lib/js/img-helper.js

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
const img = require('../../../../lib/js/img-helper');
44

5-
const xlinkData = `<html><head></head><body><svg width="24" height="24" role="img" aria-label="" focusable="false"><use xlink:href="../../../../__mocks__/img/test.svg#circle"></use></svg></body></html>`;
6-
const hrefData = `<html><head></head><body><svg width="24" height="24" role="img" aria-label="" focusable="false"><use href="../../../../__mocks__/img/test.svg#circle"></use></svg></body></html>`;
7-
const noIdData = `<html><head></head><body><svg width="24" height="24" role="img" aria-label="" focusable="false"><use href="../../../../__mocks__/img/test.svg"></use></svg></body></html>`;
8-
const svgResultWithId = `<html><head></head><body><svg width="24" height="24" role="img" aria-label="" focusable="false"><svg id="circle"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="25" stroke="#000" stroke-width="2" fill="red"></circle></svg></svg></body></html>`;
9-
const svgResultWithoutId = `<html><head></head><body><svg width="24" height="24" role="img" aria-label="" focusable="false"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><svg id="circle"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="25" stroke="#000" stroke-width="2" fill="red"></circle></svg><svg id="square"><path fill="#00f" stroke="#000" d="M0 0h100v100H0z"></path></svg></svg></svg></body></html>`;
5+
const xlinkData = `<html><head></head><body><svg><use xlink:href="../../../../__mocks__/img/test.svg#circle"></use></svg></body></html>`;
6+
const hrefData = `<html><head></head><body><svg><use href="../../../../__mocks__/img/test.svg#circle"></use></svg></body></html>`;
7+
const noIdData = `<html><head></head><body><svg><use href="../../../../__mocks__/img/test.svg"></use></svg></body></html>`;
8+
const svgResultWithId = `<html><head></head><body><svg><svg id="circle"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="25" stroke="#000" stroke-width="2" fill="red"></circle></svg></svg></body></html>`;
9+
const svgResultWithoutId = `<html><head></head><body><svg><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><svg id="circle"><circle xmlns="http://www.w3.org/2000/svg" cx="50" cy="50" r="25" stroke="#000" stroke-width="2" fill="red"></circle></svg><svg id="square"><path fill="#00f" stroke="#000" d="M0 0h100v100H0z"></path></svg></svg></svg></body></html>`;
1010

1111
const pngData = `<html><head></head><body><img src="../../../../__mocks__/img/test.png"></body></html>`;
1212
const pngResult = `<html><head></head><body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AAAAAP8BBAEAZ5TsRgAAAABJRU5ErkJggg=="></body></html>`;
@@ -16,9 +16,10 @@ const svgResult = `<html><head></head><body><img src="data:image/svg+xml;base64,
1616
const httpData = `<html><head></head><body><img src="http://www.example.com/test.png"></body></html>`;
1717
const httpsData = `<html><head></head><body><img src="https://www.example.com/test.png"></body></html>`;
1818
const protocolData = `<html><head></head><body><img src="//www.example.com/test.png"></body></html>`;
19+
const internalXlinkData = `<html><head></head><body><svg><use xlink:href="#circle"></use></svg></body></html>`;
1920

2021
const noImgData = `<html><head></head><body><img src="../../../../__mocks__/img/missing.png"></body></html>`;
21-
const noUseData = `<html><head></head><body><svg width="24" height="24" role="img" aria-label="" focusable="false"><use href="../../../../__mocks__/img/missing.svg#circle"></use></svg></body></html>`;
22+
const noUseData = `<html><head></head><body><svg><use href="../../../../__mocks__/img/missing.svg#circle"></use></svg></body></html>`;
2223

2324
console.log = jest.fn(); // silence log output from module under test
2425

@@ -81,6 +82,12 @@ describe('Image helper', () => {
8182
expect(result).toMatch(svgResultWithoutId);
8283
});
8384

85+
test('ignore internal links by hash', async () => {
86+
expect.assertions(1);
87+
let result = await img(internalXlinkData, __dirname);
88+
expect(result).toMatch(internalXlinkData);
89+
});
90+
8491
test('fail: svg doesn\'t exist', async () => {
8592
expect.assertions(1);
8693
await expect(img(noUseData, __dirname))

‎packages/util-package-renderer/lib/js/img-helper.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,14 +60,14 @@ function getSvgContents(svgData, hash) {
6060
}
6161

6262
/**
63-
* Find images in HTML and convert to data-uri
63+
* Find images in HTML and convert to data-uri or inline SVG
6464
* @async
65-
* @function imageToDataUri
65+
* @function inlineImages
6666
* @param {String} html parsed html to search
6767
* @param {String} demoCodePath full path to the demo folder
6868
* @return {Promise<String>}
6969
*/
70-
const imageToDataUri = async (html, demoCodePath) => {
70+
const inlineImages = async (html, demoCodePath) => {
7171
const $ = cheerio.load(html);
7272
const images = [];
7373
const svgs = [];
@@ -93,6 +93,11 @@ const imageToDataUri = async (html, demoCodePath) => {
9393
const href = element.attr('xlink:href') || element.attr('href');
9494
const hash = getHash(href);
9595

96+
// Ignore in-page use links
97+
if (href.startsWith('#')) {
98+
return;
99+
}
100+
96101
svgs.push({
97102
element: element,
98103
src: href.split('#')[0],
@@ -133,4 +138,4 @@ const imageToDataUri = async (html, demoCodePath) => {
133138
return $.html();
134139
};
135140

136-
module.exports = imageToDataUri;
141+
module.exports = inlineImages;

‎packages/util-package-renderer/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@springernature/util-package-renderer",
3-
"version": "3.3.0",
3+
"version": "3.3.1",
44
"description": "Renders a package that passes SN package validation",
55
"author": "jpw, ajk",
66
"license": "MIT",

0 commit comments

Comments
 (0)