fix(html/minifier): Compress exportparts (#6187)

swc-project · Oct 18, 2022 · 0ba464d · 0ba464d · github-actions · Oct 18, 2022
1 parent 3fe4c45
commit 0ba464d
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 0 deletions.
diff --git a/crates/swc_atoms/words.txt b/crates/swc_atoms/words.txt
@@ -783,6 +783,7 @@ eval
 even
 ex
 export
+exportparts
 extends
 face
 false

diff --git a/crates/swc_html_minifier/src/lib.rs b/crates/swc_html_minifier/src/lib.rs
@@ -450,6 +450,7 @@ impl Minifier<'_> {
                 {
                     true
                 }
+                _ if attribute_name == "exportparts" => true,
                 _ => COMMA_SEPARATED_HTML_ATTRIBUTES.contains(&(&element.tag_name, attribute_name)),
             },
             Namespace::SVG => {
@@ -2413,6 +2414,8 @@ impl VisitMut for Minifier<'_> {
                                     }
                                 } else if matches!(n.name, js_word!("points")) {
                                     self.collapse_whitespace(value.trim())
+                                } else if matches!(n.name, js_word!("exportparts")) {
+                                    value.chars().filter(|c| !c.is_whitespace()).collect()
                                 } else {
                                     value.trim().to_string()
                                 }

diff --git a/crates/swc_html_minifier/tests/fixture/attribute/exportparts/input.html b/crates/swc_html_minifier/tests/fixture/attribute/exportparts/input.html
@@ -0,0 +1,115 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Shadow parts example</title>
+  <style>
+    tabbed-custom-element::part(tab) {
+      color: #0c0c0dcc;
+      border-bottom: transparent solid 2px;
+    }
+
+    tabbed-custom-element::part(tab):hover {
+      background-color: #0c0c0d19;
+      border-color: #0c0c0d33;
+    }
+
+    tabbed-custom-element::part(tab):hover:active {
+      background-color: #0c0c0d33;
+    }
+
+    tabbed-custom-element::part(tab):focus {
+      box-shadow:
+              0 0 0 1px #0a84ff inset,
+              0 0 0 1px #0a84ff,
+              0 0 0 4px rgba(10, 132, 255, 0.3);
+    }
+
+    tabbed-custom-element::part(active) {
+      color: #0060df;
+      border-color: #0a84ff !important;
+    }
+
+    tabbed-custom-element-exportparts::part(bgtab) {
+      font-weight: bold;
+    }
+    tabbed-custom-element-exportparts::part(active) {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+<h1>Shadow part styling for tabbed custom element</h1>
+
+<template id="tabbed-custom-element">
+  <style type="text/css">
+    *, ::before, ::after {
+      box-sizing: border-box;
+      padding: 1rem;
+    }
+    :host {
+      display: flex;
+    }
+  </style>
+  <div part="tab active">Tab 1</div>
+  <div part="tab">Tab 2</div>
+  <div part="tab">Tab 3</div>
+</template>
+
+<tabbed-custom-element></tabbed-custom-element>
+
+<hr>
+
+<template id="tabbed-custom-element-exportparts">
+  <tabbed-custom-element exportparts="           tab: bgtab         "></tabbed-custom-element>
+  <tabbed-custom-element exportparts="           tab: bgtab, active         "></tabbed-custom-element>
+  <tabbed-custom-element exportparts="           tab   :   bgtab, active         "></tabbed-custom-element>
+</template>
+
+<tabbed-custom-element-exportparts></tabbed-custom-element-exportparts>
+
+<script type="module">
+  globalThis.customElements.define("tabbed-custom-element", class extends HTMLElement {
+    constructor() {
+      super();
+
+      const template = document.getElementById("tabbed-custom-element").content;
+      const shadowRoot = this.attachShadow({ mode: "open" });
+
+      shadowRoot.appendChild(template.cloneNode(true));
+
+      let tabs = [];
+      let children = this.shadowRoot.children;
+
+      for (let elem of children) {
+        if (elem.getAttribute('part')) {
+          tabs.push(elem);
+        }
+      }
+
+      tabs.forEach((tab) => {
+        tab.addEventListener('click', (e) => {
+          tabs.forEach((tab) => {
+            tab.part = 'tab';
+          })
+          e.target.part = 'tab active';
+        });
+      })
+    }
+  });
+</script>
+<script type="module">
+  globalThis.customElements.define("tabbed-custom-element-exportparts", class extends HTMLElement {
+    constructor() {
+      super();
+
+      const template = document.getElementById("tabbed-custom-element-exportparts").content;
+      const shadowRoot = this.attachShadow({ mode: "open" });
+
+      shadowRoot.appendChild(template.cloneNode(true));
+    }
+  });
+</script>
+</body>
+</html>
diff --git a/crates/swc_html_minifier/tests/fixture/attribute/exportparts/output.min.html b/crates/swc_html_minifier/tests/fixture/attribute/exportparts/output.min.html
@@ -0,0 +1,22 @@
+<!doctype html><meta charset=utf-8><title>Shadow parts example</title><style>tabbed-custom-element::part(tab){color:#0c0c0dcc;border-bottom:transparent solid 2px}tabbed-custom-element::part(tab):hover{background-color:#0c0c0d19;border-color:#0c0c0d33}tabbed-custom-element::part(tab):hover:active{background-color:#0c0c0d33}tabbed-custom-element::part(tab):focus{box-shadow:0 0 0 1px#0a84ff inset,0 0 0 1px#0a84ff,0 0 0 4px rgba(10,132,255,.3)}tabbed-custom-element::part(active){color:#0060df;border-color:#0a84ff!important}tabbed-custom-element-exportparts::part(bgtab){font-weight:700}tabbed-custom-element-exportparts::part(active){color:red}</style><h1>Shadow part styling for tabbed custom element</h1>
+
+<template id=tabbed-custom-element>
+  <style>*,:before,:after{box-sizing:border-box;padding:1rem}:host{display:flex}</style>
+  <div part="active tab">Tab 1</div>
+  <div part=tab>Tab 2</div>
+  <div part=tab>Tab 3</div>
+</template>
+
+<tabbed-custom-element></tabbed-custom-element>
+
+<hr>
+
+<template id=tabbed-custom-element-exportparts>
+  <tabbed-custom-element exportparts=tab:bgtab></tabbed-custom-element>
+  <tabbed-custom-element exportparts=tab:bgtab,active></tabbed-custom-element>
+  <tabbed-custom-element exportparts=tab:bgtab,active></tabbed-custom-element>
+</template>
+
+<tabbed-custom-element-exportparts></tabbed-custom-element-exportparts>
+
+<script type=module>globalThis.customElements.define("tabbed-custom-element",class extends HTMLElement{constructor(){super();let t=document.getElementById("tabbed-custom-element").content,e=this.attachShadow({mode:"open"});e.appendChild(t.cloneNode(!0));let o=[],a=this.shadowRoot.children;for(let n of a)n.getAttribute("part")&&o.push(n);o.forEach(t=>{t.addEventListener("click",t=>{o.forEach(t=>{t.part="tab"}),t.target.part="tab active"})})}})</script><script type=module>globalThis.customElements.define("tabbed-custom-element-exportparts",class extends HTMLElement{constructor(){super();let e=document.getElementById("tabbed-custom-element-exportparts").content,t=this.attachShadow({mode:"open"});t.appendChild(e.cloneNode(!0))}})</script>
Benchmark suite	Current: `0ba464d`	Previous: `8f00d1a`	Ratio
`es/full/minify/libraries/antd`	`1980275902` ns/iter (`± 46306263`)	`1800709158` ns/iter (`± 38890459`)	`1.10`
`es/full/minify/libraries/d3`	`433243434` ns/iter (`± 33146554`)	`388164960` ns/iter (`± 11991389`)	`1.12`
`es/full/minify/libraries/echarts`	`1658424070` ns/iter (`± 69878668`)	`1520225719` ns/iter (`± 37278534`)	`1.09`
`es/full/minify/libraries/jquery`	`115088142` ns/iter (`± 9354814`)	`99995648` ns/iter (`± 5137842`)	`1.15`
`es/full/minify/libraries/lodash`	`130959579` ns/iter (`± 10430462`)	`110506896` ns/iter (`± 8643418`)	`1.19`
`es/full/minify/libraries/moment`	`65224644` ns/iter (`± 6799692`)	`57088122` ns/iter (`± 536126`)	`1.14`
`es/full/minify/libraries/react`	`22352799` ns/iter (`± 1524468`)	`19719555` ns/iter (`± 1420530`)	`1.13`
`es/full/minify/libraries/terser`	`342102294` ns/iter (`± 14456376`)	`314548684` ns/iter (`± 12543095`)	`1.09`
`es/full/minify/libraries/three`	`628007422` ns/iter (`± 240501706`)	`564957937` ns/iter (`± 107315057`)	`1.11`
`es/full/minify/libraries/typescript`	`3731844430` ns/iter (`± 222150843`)	`3396568614` ns/iter (`± 57650840`)	`1.10`
`es/full/minify/libraries/victory`	`863141606` ns/iter (`± 16115762`)	`814522039` ns/iter (`± 27780768`)	`1.06`
`es/full/minify/libraries/vue`	`185526411` ns/iter (`± 16100830`)	`152276767` ns/iter (`± 9636268`)	`1.22`
`es/full/codegen/es3`	`33978` ns/iter (`± 3938`)	`34317` ns/iter (`± 551`)	`0.99`
`es/full/codegen/es5`	`33924` ns/iter (`± 1607`)	`34294` ns/iter (`± 830`)	`0.99`
`es/full/codegen/es2015`	`33711` ns/iter (`± 2385`)	`34253` ns/iter (`± 1570`)	`0.98`
`es/full/codegen/es2016`	`33571` ns/iter (`± 6121`)	`34369` ns/iter (`± 680`)	`0.98`
`es/full/codegen/es2017`	`34277` ns/iter (`± 7727`)	`35012` ns/iter (`± 2705`)	`0.98`
`es/full/codegen/es2018`	`33742` ns/iter (`± 2113`)	`34676` ns/iter (`± 1583`)	`0.97`
`es/full/codegen/es2019`	`33684` ns/iter (`± 767`)	`34643` ns/iter (`± 1861`)	`0.97`
`es/full/codegen/es2020`	`33476` ns/iter (`± 830`)	`34889` ns/iter (`± 2549`)	`0.96`
`es/full/all/es3`	`205031486` ns/iter (`± 32267580`)	`215058960` ns/iter (`± 19691599`)	`0.95`
`es/full/all/es5`	`213044840` ns/iter (`± 21278091`)	`202871274` ns/iter (`± 27387408`)	`1.05`
`es/full/all/es2015`	`172217080` ns/iter (`± 19316954`)	`174807699` ns/iter (`± 12542677`)	`0.99`
`es/full/all/es2016`	`158515768` ns/iter (`± 11354755`)	`164798007` ns/iter (`± 18819019`)	`0.96`
`es/full/all/es2017`	`166700104` ns/iter (`± 14003228`)	`171933400` ns/iter (`± 19929431`)	`0.97`
`es/full/all/es2018`	`151470894` ns/iter (`± 10763565`)	`168173052` ns/iter (`± 15790482`)	`0.90`
`es/full/all/es2019`	`145611300` ns/iter (`± 10422728`)	`166898599` ns/iter (`± 18117798`)	`0.87`
`es/full/all/es2020`	`146629383` ns/iter (`± 20690210`)	`158483321` ns/iter (`± 21210884`)	`0.93`
`es/full/parser`	`729613` ns/iter (`± 43289`)	`748265` ns/iter (`± 124506`)	`0.98`
`es/full/base/fixer`	`29888` ns/iter (`± 2688`)	`27255` ns/iter (`± 3657`)	`1.10`
`es/full/base/resolver_and_hygiene`	`100167` ns/iter (`± 15700`)	`97323` ns/iter (`± 14006`)	`1.03`
`serialization of ast node`	`224` ns/iter (`± 14`)	`213` ns/iter (`± 19`)	`1.05`
`serialization of serde`	`216` ns/iter (`± 14`)	`220` ns/iter (`± 34`)	`0.98`