testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format <script> inside SVG (#14400)

Browse Source
This commit is contained in:
fisker Cheung authored and GitHub committed 2023-04-10 10:43:48 +08:00
1 parent 686320a88c
commit ecfa324b69
9 files changed
+350 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/html/14400.md
+38
View File
@@ -0,0 +1,38 @@
#### Format `<script>` inside SVG (#14400 by @fisker)
<!-- prettier-ignore -->
```html
<!-- Input -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
</svg>
<!-- Prettier stable -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener( 'DOMContentLoaded', () => { const element =
document.getElementById('foo') if (element) { element.fillStyle =
'currentColor' } });
</script>
</svg>
<!-- Prettier main -->
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener("DOMContentLoaded", () => {
const element = document.getElementById("foo");
if (element) {
element.fillStyle = "currentColor";
}
});
</script>
</svg>
```
src/language-html/utils/index.js
+1
View File
@@ -109,6 +109,7 @@ function isScriptLikeTag(node) {
(node.fullName === "script" ||
node.fullName === "style" ||
node.fullName === "svg:style" ||
node.fullName === "svg:script" ||
(isUnknownNamespace(node) &&
(node.name === "script" || node.name === "style")))
);
tests/config/utils/check-parsers.js
+4 -1
View File
@@ -46,7 +46,10 @@ const categoryParsers = new Map([
"handlebars",
{ parsers: ["glimmer"], verifyParsers: [], extensions: [".hbs"] },
],
["html", { parsers: ["html"], verifyParsers: [], extensions: [".html"] }],
[
"html",
{ parsers: ["html"], verifyParsers: [], extensions: [".html", ".svg"] },
],
["mjml", { parsers: ["html"], verifyParsers: [], extensions: [".mjml"] }],
[
"js",
tests/format/html/svg/__snapshots__/jsfmt.spec.js.snap
+1 -22
View File
@@ -19,16 +19,7 @@ printWidth: 80
</html>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs /> <style >
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
<defs />
<g>
<g><polygon points="5,5 195,10 185,185 10,195" />
@@ -73,18 +64,6 @@ printWidth: 80
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs />
<style>
polygon {
fill: black;
}
div {
color: white;
font: 18px serif;
height: 100%;
overflow: auto;
}
</style>
<g>
<g>
tests/format/html/svg/embeded/__snapshots__/jsfmt.spec.js.snap
+253
View File
@@ -0,0 +1,253 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`svg.html - {"embeddedLanguageFormatting":"off"} format 1`] = `
====================================options=====================================
embeddedLanguageFormatting: "off"
parsers: ["html"]
printWidth: 80
| printWidth
=====================================input======================================
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
<style >
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
</body>
</html>
=====================================output=====================================
<!doctype html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
<style>
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
</body>
</html>
================================================================================
`;
exports[`svg.html format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: 80
| printWidth
=====================================input======================================
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
<style >
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
</body>
</html>
=====================================output=====================================
<!doctype html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener("DOMContentLoaded", () => {
const element = document.getElementById("foo");
if (element) {
element.fillStyle = "currentColor";
}
});
</script>
<style>
polygon {
fill: black;
}
div {
color: white;
font: 18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
</body>
</html>
================================================================================
`;
exports[`svg.svg - {"embeddedLanguageFormatting":"off"} format 1`] = `
====================================options=====================================
embeddedLanguageFormatting: "off"
parsers: ["html"]
printWidth: 80
| printWidth
=====================================input======================================
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
<style >
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
=====================================output=====================================
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
<style>
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
================================================================================
`;
exports[`svg.svg format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: 80
| printWidth
=====================================input======================================
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
<style >
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
=====================================output=====================================
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener("DOMContentLoaded", () => {
const element = document.getElementById("foo");
if (element) {
element.fillStyle = "currentColor";
}
});
</script>
<style>
polygon {
fill: black;
}
div {
color: white;
font: 18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
================================================================================
`;
tests/format/html/svg/embeded/jsfmt.spec.js
+2
View File
@@ -0,0 +1,2 @@
run_spec(import.meta, ["html"]);
run_spec(import.meta, ["html"], { embeddedLanguageFormatting: "off" });
tests/format/html/svg/embeded/svg.html
+29
View File
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
<style >
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
</body>
</html>
tests/format/html/svg/embeded/svg.svg
+21
View File
@@ -0,0 +1,21 @@
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<script>
document.addEventListener(
'DOMContentLoaded', () => {
const element = document.getElementById('foo')
if (element) {
element.fillStyle = 'currentColor'
}
});
</script>
<style >
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 398 B

tests/format/html/svg/svg.html
+1 -10
View File
@@ -11,16 +11,7 @@
</html>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs /> <style >
polygon { fill: black }
div {
color: white;
font:18px serif;
height: 100%;
overflow: auto;
}
</style>
<defs />
<g>
<g><polygon points="5,5 195,10 185,185 10,195" />