Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Issue #80 inserting every fontUsage (including unused font) for multiple html target #81

Closed
wants to merge 3 commits into from
Closed

Fix Issue #80 inserting every fontUsage (including unused font) for multiple html target #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51eb903
Fix github issue #80Every htmlAssetTexts shares same fontUsages witho…
palindrom615 Feb 29, 2020
b95c8d9
Fix test
palindrom615 Feb 29, 2020
c2c7912
Fix test suite
palindrom615 Feb 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 20 additions & 17 deletions lib/subsetFonts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -728,26 +728,29 @@ async function subsetFonts(
}

if (!subsetPerPage) {
const globalFontUsage = {};

// Gather all texts
for (const htmlAssetTextWithProps of htmlAssetTextsWithProps) {
for (const fontUsage of htmlAssetTextWithProps.fontUsages) {
if (!globalFontUsage[fontUsage.fontUrl]) {
globalFontUsage[fontUsage.fontUrl] = [];
const fontUsagesConcat = _.flatMap(
htmlAssetTextsWithProps,
htmlAssetTextWithProps => htmlAssetTextWithProps.fontUsages
);
const globalFontUsageMap = fontUsagesConcat.reduce(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mind turning this reduce construct into a regular for...of loop? I find those much easier to reason about.

(fontUsageMap, fontUsage) => {
const newFontUsage = fontUsage;
if (fontUsage.fontUrl in fontUsageMap) {
newFontUsage.text = _.uniq(
fontUsageMap[fontUsage.fontUrl].text + fontUsage.text
)
.sort()
.join('');
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, mental note that we should find a better way achieve the "unique across pages" thing, sorting the output of _.uniq breaks when there's multiple non-UTF-16 characters:

require('lodash').uniq('🤗').sort().join('')
'🤗'
require('lodash').uniq('🤗🤞').sort().join('')
'🤗�'
require('lodash').uniq('🤗🤞👊').sort().join('')
'�🡊��'

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't have the same problem. Not very readable though:

[...new Set([...'🤗🤞👊'])].sort().join('')

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I think we should go with that, then. Not readable is better than broken :)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implemented your fix here: #87

}
return { ...fontUsageMap, [fontUsage.fontUrl]: newFontUsage };
},
{}
);
const globalFontUsage = Object.values(globalFontUsageMap);

globalFontUsage[fontUsage.fontUrl].push(fontUsage.text);
}
}

// Merge subset values, unique glyphs, sort
// Gather all texts
for (const htmlAssetTextWithProps of htmlAssetTextsWithProps) {
for (const fontUsage of htmlAssetTextWithProps.fontUsages) {
fontUsage.text = _.uniq(globalFontUsage[fontUsage.fontUrl].join(''))
.sort()
.join('');
}
htmlAssetTextWithProps.fontUsages = globalFontUsage;
}
}

Expand Down
12 changes: 8 additions & 4 deletions test/subsetFonts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4250,9 +4250,9 @@ describe('subsetFonts', function() {
});
});

describe('with a page that does need subsetting and one that does', function() {
describe('with a page that does NOT need subsetting and one that does', function() {
// https://gitter.im/assetgraph/assetgraph?at=5dbb6438a3f0b17849c488cf
it('should not short circuit because the first page does not need any subset fonts', async function() {
it('should not short circuit with explicit subsetPerPage:true option because the first page does not need any subset fonts', async function() {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This probably deserves to be its own test case alongside the existing one.

However, if I copy your test over to master, it also passes? Can you come up with an actual regression test?

const assetGraph = new AssetGraph({
root: pathModule.resolve(
__dirname,
Expand All @@ -4263,11 +4263,15 @@ describe('subsetFonts', function() {
await assetGraph.populate();
const { fontInfo } = await subsetFonts(assetGraph, {
inlineFonts: false,
omitFallbacks: true
omitFallbacks: true,
subsetPerPage: true
});

expect(fontInfo, 'to satisfy', [
{ htmlAsset: /\/index-1\.html$/, fontUsages: [] },
{
htmlAsset: /\/index-1\.html$/,
fontUsages: []
},
{
htmlAsset: /\/index-2\.html$/,
fontUsages: [
Expand Down