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

Jump to bottom

Update to chord mark 0.16 #643

Merged
merged 2 commits into from
Dec 25, 2023
Merged

Update to chord mark 0.16 #643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2601c15
update chord mark dependency to 0.16.0
no-chris Dec 25, 2023
48241f6
Update song renderer and unit tests
no-chris Dec 25, 2023
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
Binary file modified .yarn/install-state.gz
View file
Open in desktop
Binary file not shown.
6 changes: 3 additions & 3 deletions packages/chord-chart-studio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@
"react-test-renderer": "^18.2.0"
},
"dependencies": {
"chord-mark": "^0.15.0",
"chord-mark-converters": "^0.15.0",
"chord-mark-themes": "^0.15.0",
"chord-mark": "^0.16.0",
"chord-mark-converters": "^0.16.0",
"chord-mark-themes": "^0.16.0",
"chord-symbol": "^4.0.0",
"chord-symbol-ultimateguitar": "^4.0.0",
"combine-section-reducers": "^1.0.6",
Expand Down
10 changes: 9 additions & 1 deletion packages/chord-chart-studio/src/core/renderSong.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,14 @@ export function renderAsHtml(
return render(songTxt, renderOptions, useChartFormat, 'html');
}

// eslint-disable-next-line complexity
function render(songTxt, renderOptions, useChartFormat, outputFormat) {
if (useChartFormat) {
switch (renderOptions.chartFormat) {
case 'chordmark': {
const cmHtml = renderSong(songTxt, renderOptions);
return outputFormat === 'html' ? cmHtml : toText(cmHtml);
}
case 'chordmarkSrc':
return outputFormat === 'html' ? toHtml(songTxt) : songTxt;
case 'chordpro': {
Expand Down Expand Up @@ -60,7 +65,10 @@ function render(songTxt, renderOptions, useChartFormat, outputFormat) {
}
}

const chordMarkHtml = renderSong(songTxt, renderOptions);
const chordMarkHtml = renderSong(songTxt, {
...renderOptions,
wrapChordLyricLines: true,
});
return outputFormat === 'html' ? chordMarkHtml : toText(chordMarkHtml);
}

Expand Down
18 changes: 13 additions & 5 deletions packages/chord-chart-studio/tests/unit/SongRenderers/_components/SongRenderer.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,19 @@ describe('SongRenderer', () => {
expect(container.firstChild.firstChild.innerHTML).toBe(
'<div class="cmSong">' +
'<p class="cmLine"><span class="cmEmptyLine">&nbsp;</span></p>' +
'<p class="cmLine"><span class="cmChordLine">' +
'<span class="cmBarSeparator">|</span>' +
'<span class="cmBarContent"><span class="cmChordSymbol">A</span> </span><span class="cmBarSeparator">|</span>' +
'</span></p>' +
'<p class="cmLine"><span class="cmLyricLine"> mySong</span></p>' +
'<p class="cmLine">' +
'<span class="cmChordLyricLine">' +
'<span class="cmChordLyricPair">' +
'<span class="cmChordLine"><span class="cmBarSeparator">|</span></span>' +
'<span class="cmLyricLine"> </span>' +
'</span>' +
'<span class="cmChordLyricPair">' +
'<span class="cmChordLine"><span class="cmChordSymbol">A</span> </span>' +
'<span class="cmLyricLine">mySong</span>' +
'</span>' +
'<span class="cmChordLyricPair">' +
'<span class="cmChordLine"><span class="cmBarSeparator">|</span></span>' +
'<span class="cmLyricLine"></span></span></span></p>' +
'</div>'
);
});
Expand Down
25 changes: 17 additions & 8 deletions packages/chord-chart-studio/tests/unit/core/renderSong.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,22 +15,31 @@ describe('renderAsHtml()', () => {
expect(rendered).toEqual('songSrc.split is not a function');
});

test('Should return ChordMark html by default', () => {
test('Should return ChordMark html by default, with wrappable chord/lyric lines', () => {
const input = 'A\n_mySong\n';
const rendered = renderAsHtml(input);

expect(rendered).toEqual(
'<div class="cmSong">' +
'<p class="cmLine"><span class="cmChordLine">' +
'<span class="cmBarSeparator">|</span><span class="cmBarContent"><span class="cmChordSymbol">A</span> </span><span class="cmBarSeparator">|</span>' +
'</span></p>' +
'<p class="cmLine"><span class="cmLyricLine"> mySong</span></p>' +
'<p class="cmLine">' +
'<span class="cmChordLyricLine">' +
'<span class="cmChordLyricPair">' +
'<span class="cmChordLine"><span class="cmBarSeparator">|</span></span>' +
'<span class="cmLyricLine"> </span>' +
'</span>' +
'<span class="cmChordLyricPair">' +
'<span class="cmChordLine"><span class="cmChordSymbol">A</span> </span>' +
'<span class="cmLyricLine">mySong</span>' +
'</span>' +
'<span class="cmChordLyricPair">' +
'<span class="cmChordLine"><span class="cmBarSeparator">|</span></span>' +
'<span class="cmLyricLine"></span></span></span></p>' +
'<p class="cmLine"><span class="cmEmptyLine">&nbsp;</span></p>' +
'</div>'
);
});

test('Should also return ChordMark html with useChartFormat === true & chartFormat === chordmark', () => {
test('Should also return ChordMark html with useChartFormat === true & chartFormat === chordmark, lines NO wrappable', () => {
const input = 'A\n_mySong\n';
const rendered = renderAsHtml(
input,
Expand All @@ -41,7 +50,7 @@ describe('renderAsHtml()', () => {
expect(rendered).toEqual(
'<div class="cmSong">' +
'<p class="cmLine"><span class="cmChordLine">' +
'<span class="cmBarSeparator">|</span><span class="cmBarContent"><span class="cmChordSymbol">A</span> </span><span class="cmBarSeparator">|</span>' +
'<span class="cmBarSeparator">|</span><span class="cmChordSymbol">A</span> <span class="cmBarSeparator">|</span>' +
'</span></p>' +
'<p class="cmLine"><span class="cmLyricLine"> mySong</span></p>' +
'<p class="cmLine"><span class="cmEmptyLine">&nbsp;</span></p>' +
Expand Down Expand Up @@ -98,7 +107,7 @@ describe('renderAsText()', () => {
const input = 'A\n_mySong\n';
const rendered = renderAsText(input);

expect(rendered).toEqual('|A |\n mySong\n');
expect(rendered).toEqual('| A mySong|\n');
});

test('Should return ChordMark text with useChartFormat === true & chartFormat === chordmark', () => {
Expand Down
4 changes: 2 additions & 2 deletions packages/documentation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@
"@docusaurus/preset-classic": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@svgr/webpack": "^8.1.0",
"chord-mark": "^0.15.0",
"chord-mark-themes": "^0.15.0",
"chord-mark": "^0.16.0",
"chord-mark-themes": "^0.16.0",
"clsx": "^2.0.0",
"dompurify": "^3.0.6",
"file-loader": "^6.2.0",
Expand Down
38 changes: 19 additions & 19 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6369,9 +6369,9 @@ __metadata:
"@testing-library/jest-dom": "npm:^6.1.4"
"@testing-library/react": "npm:^14.1.2"
"@testing-library/user-event": "npm:^14.5.1"
chord-mark: "npm:^0.15.0"
chord-mark-converters: "npm:^0.15.0"
chord-mark-themes: "npm:^0.15.0"
chord-mark: "npm:^0.16.0"
chord-mark-converters: "npm:^0.16.0"
chord-mark-themes: "npm:^0.16.0"
chord-symbol: "npm:^4.0.0"
chord-symbol-ultimateguitar: "npm:^4.0.0"
combine-section-reducers: "npm:^1.0.6"
Expand Down Expand Up @@ -6404,35 +6404,35 @@ __metadata:
languageName: unknown
linkType: soft

"chord-mark-converters@npm:^0.15.0":
version: 0.15.0
resolution: "chord-mark-converters@npm:0.15.0"
"chord-mark-converters@npm:^0.16.0":
version: 0.16.0
resolution: "chord-mark-converters@npm:0.16.0"
dependencies:
chord-mark: "npm:^0.15.0"
chord-mark: "npm:^0.16.0"
chord-symbol: "npm:4.0.0"
chord-symbol-ultimateguitar: "npm:4.0.0"
dompurify: "npm:^3.0.6"
checksum: 437fbcca17917b91758154062ed4fd58db65fa613ef7f31577305e864b6cef5cfd694bff8ae91bd77f9844286a81e3b9cbc74fe9fae2e50c1c5160b55b35bc96
checksum: cb75003579ac087ebf74e54ea0134f26f12fd795e9b32b5e7d9f543dddef42634651896e3b6d8702139b75f412e1d0a49ee02084e60b9683ce748c71164ece6c
languageName: node
linkType: hard

"chord-mark-themes@npm:^0.15.0":
version: 0.15.0
resolution: "chord-mark-themes@npm:0.15.0"
"chord-mark-themes@npm:^0.16.0":
version: 0.16.0
resolution: "chord-mark-themes@npm:0.16.0"
dependencies:
chord-mark: "npm:^0.15.0"
checksum: d00b50f2e77f065f1e798e818bc62d3161fe8b433b47521962a651cba9fded00a782685a346cc6306d7c34362ecc02e56e7303e42c6d3bda4e2112a116f91e4a
chord-mark: "npm:^0.16.0"
checksum: e3fbbb33ea2e977f725d1dbd892b6a10e3a9a609662b69b17af1c6ea086a586533c8a244a213fb0259d357de3c9daf3a4d9fb4921c8b57128311e01d7d5b1cd0
languageName: node
linkType: hard

"chord-mark@npm:^0.15.0":
version: 0.15.0
resolution: "chord-mark@npm:0.15.0"
"chord-mark@npm:^0.16.0":
version: 0.16.0
resolution: "chord-mark@npm:0.16.0"
dependencies:
chord-symbol: "npm:4.0.0"
dompurify: "npm:^3.0.6"
lodash: "npm:^4.17.21"
checksum: 357227ba47fb0c290f79aae8778f1ef726abd5051d6496cee125df02a690412fa12f711aba0d991c171b1e12453570bec35e4ef2ee84cf6ef6073c51c69b4d0b
checksum: c436a364772c4ab5272c59a229fc99125f5a24544eba9689bc962a77ba2eea559e078dabe20d22c2b1eae37a199fea09c599541fc36aabb0eb2c49759670c9f3
languageName: node
linkType: hard

Expand Down Expand Up @@ -8071,8 +8071,8 @@ __metadata:
"@docusaurus/preset-classic": "npm:^3.0.0"
"@mdx-js/react": "npm:^3.0.0"
"@svgr/webpack": "npm:^8.1.0"
chord-mark: "npm:^0.15.0"
chord-mark-themes: "npm:^0.15.0"
chord-mark: "npm:^0.16.0"
chord-mark-themes: "npm:^0.16.0"
clsx: "npm:^2.0.0"
docusaurus-plugin-sass: "npm:^0.2.5"
dompurify: "npm:^3.0.6"
Expand Down