[DO NOT SUBMIT] Testing size of compiler & standard decorators.

[AndrewJakubowicz]

Context

This is a scratch PR created just as a source of history for the future.

I used it to generate some numbers on the emit size of material/web when compiled with lit-labs/compiler.
I also used it to test out migrating a large project to standard decorators, and then measure that JavaScript emit size.

Numbers found are here:

Name	Size	Gzipped	Brotli
Total	652.83 kB	172.23 kB	143.73 kB
Total (compiled templates)	675.81 kB	176.74 kB	148.03 kB
Total (terser)	446.23 kB	120.35 kB	102.15 kB
Total (terser + compiled templates)	458.94 kB	122.96 kB	104.68 kB
Total (standard decorators)	973.78 kB	219.83 kB	184.37 kB

Comparison between decorators

Name	Size	Gzipped	Brotli
Total size (experimentalDecorators)	652.83 kB	172.23 kB	143.73 kB
Total size (standard decorators)	973.78 kB (+49%)	219.83 kB (+28%)	184.37 kB (+28%)

Test log dump

$ npm run test

checkbox/checkbox_test.js:

 ❌ should pass the "checked custom value" value test: Expected null to be 'Custom value'. 
      at Object.assertValue (checkbox/checkbox_test.ts:56:45)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ it should pass the "restore checked" restore test: checkbox.checked after restore: Expected false to be true. 
      at Object.assertRestored (checkbox/checkbox_test.ts:138:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

 ❌ should pass the "checked default value" value test: Expected null to be 'on'. 
      at Object.assertValue (checkbox/checkbox_test.ts:48:45)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

iconbutton/icon-button_test.js:

 ❌ setting `ariaLabel` updates the aria-label attribute on the anchortag: Expected null not to be null. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:80:28)

 ❌ setting `ariaLabel` updates the aria-label attribute on the anchortag: TypeError: Cannot read properties of null (reading 'getAttribute') 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:84:23)

 ❌ button with toggled aria label toggles aria label: Expected false to be true. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:165:31)

 ❌ button with toggled aria label toggles aria label: Expected 'aria label off' to equal 'aria label on'. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:166:48)

 ❌ setting `selected` updates the aria-pressed attribute on the native button element: Expected null to equal 'true'. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:145:53)

 ❌ setting `selected` updates the aria-pressed attribute on the native button element: Expected null to equal 'false'. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:149:53)

 ❌ fires input and change events when clicked: Expected false to be true. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:133:31)

 ❌ fires input and change events when clicked: Expected false to be true. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:134:25)

 ❌ fires input and change events when clicked: Expected false to be true. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:135:26)

 ❌ toggles the `selected` state when button is clicked: Expected false to be true. 
      at UserContext.<anonymous> (iconbutton/icon-button_test.ts:120:31)

list/list_test.js:

 ❌ non-nagivable key does nothing: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:44:28)

 ❌ non-nagivable key does nothing: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:51:28)

 ❌ ArrowUp will return null if nothing is selectable: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:298:28)

 ❌ ArrowDown activates the next item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:71:28)

 ❌ ArrowDown activates the next item: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:77:27)

 ❌ ArrowDown activates the next item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:79:27)

 ❌ ArrowDown will loop around: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:98:27)

 ❌ Home will select the first activatable item if first is non-activatable: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:395:30)

 ❌ Home will select the first activatable item if first is non-activatable: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:396:31)

 ❌ ArrowUp does not activate disabled items: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:317:27)

 ❌ ArrowUp does not activate disabled items: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:322:27)

 ❌ ArrowUp does not activate disabled items: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:324:27)

 ❌ ArrowDown will do nothing if nothing is selectable: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:152:27)

 ❌ activatePreviousItem will loop around: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:241:27)

 ❌ ArrowDown does not activate disabled items: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:170:27)

 ❌ ArrowDown does not activate disabled items: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:177:27)

 ❌ ArrowDown does not activate disabled items: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:179:27)

 ❌ Home will select the first item if something is already selected: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:362:31)

 ❌ End will select the last item if something is already selected: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:470:31)

 ❌ ArrowDown will select itself if its the only activatable: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:193:27)

 ❌ ArrowUp activates the previous item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:216:28)

 ❌ ArrowUp activates the previous item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:222:27)

 ❌ ArrowUp activates the previous item: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:224:27)

 ❌ ArrowUp will select itself if its the only activatable: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:338:27)

 ❌ End will select the last activatable item if last is non-activatable: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:504:31)

 ❌ End will select the last activatable item if last is non-activatable: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:505:30)

 ❌ End will select the last item if it is already selected: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:551:27)

 ❌ Home will select the first item if it is already selected: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:442:30)

 ❌ activateNextItem does not activate disabled items: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:670:27)

 ❌ activateNextItem does not activate disabled items: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:677:27)

 ❌ activateNextItem does not activate disabled items: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:679:27)

 ❌ activateNextItem does not activate disabled items: Expected <md-list-item role="presentation" md-list-item active> to equal <md-list-item role="presentation" md-list-item>. 
      at UserContext.<anonymous> (list/list_test.ts:680:23)

 ❌ activateNextItem will return itself if it is the only activatable item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:694:30)

 ❌ activateNextItem will loop around: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:604:27)

 ❌ activatePreviousItem activates the previous item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:717:28)

 ❌ activatePreviousItem activates the previous item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:723:27)

 ❌ activatePreviousItem activates the previous item: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:725:27)

 ❌ activatePreviousItem activates the previous item: Expected <md-list-item role="presentation" md-list-item active> to equal <md-list-item role="presentation" md-list-item>. 
      at UserContext.<anonymous> (list/list_test.ts:726:23)

 ❌ activatePreviousItem will return itself if its activatable: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:834:30)

 ❌ activateNextItem activates the next item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:577:28)

 ❌ activateNextItem activates the next item: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:583:27)

 ❌ activateNextItem activates the next item: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:585:27)

 ❌ activateNextItem activates the next item: Expected <md-list-item role="presentation" md-list-item active> to equal <md-list-item role="presentation" md-list-item>. 
      at UserContext.<anonymous> (list/list_test.ts:586:23)

 ❌ activatePreviousItem does not activate disabled items: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:812:27)

 ❌ activatePreviousItem does not activate disabled items: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:817:27)

 ❌ activatePreviousItem does not activate disabled items: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:819:27)

 ❌ activatePreviousItem does not activate disabled items: Expected <md-list-item role="presentation" md-list-item active> to equal <md-list-item role="presentation" md-list-item>. 
      at UserContext.<anonymous> (list/list_test.ts:820:23)

 ❌ activatePreviousItem will loop around: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:742:27)

 ❌ active does not set tabindex to 0 if disabled: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:1048:32)

 ❌ active does not focus the element on first update: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:1063:32)

 ❌ active sets tabindex to 0 and overrides item-tabindex: Expected false to be true. 
      at UserContext.<anonymous> (list/list_test.ts:1033:32)

 ❌ active sets tabindex to 0 and overrides item-tabindex: Expected -1 to be 0. 
      at UserContext.<anonymous> (list/list_test.ts:1034:38)

 ❌ initializing with non-active does not override itemTabIndex: Expected -1 to be 3. 
      at UserContext.<anonymous> (list/list_test.ts:999:41)

 ❌ setting type and href does not render a role: Expected true to be false. 
      at UserContext.<anonymous> (list/list_test.ts:1135:46)

 ❌ setting href renders an anchor tag: Expected 'LI' to be 'A'. 
      at UserContext.<anonymous> (list/list_test.ts:1121:33)

menu/menu_test.js:

 🚧 Browser logs:
      An error was thrown in a Promise outside a test. Did you forget to await a function or assertion?
      undefined

radio/radio_test.js:

 ❌ Using arrow right should select the next radio button: default checked radio: Expected false to be true. 
      at UserContext.<anonymous> (radio/radio_test.ts:150:11)

 ❌ dispatched a change event on user navigation: default checked radio: Expected false to be true. 
      at UserContext.<anonymous> (radio/radio_test.ts:165:11)

 ❌ Using arrow right on the last radio should select the first radio in that group: Expected false to be true. 
      at UserContext.<anonymous> (radio/radio_test.ts:177:36)

 ❌ should pass the "checked first value" value test: Expected null to be 'One'. 
      at Object.assertValue (radio/radio_test.ts:475:42)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ should pass the "checked second value" value test: Expected null to be 'Two'. 
      at Object.assertValue (radio/radio_test.ts:485:42)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ it should pass the "restore checked" restore test: radio.checked after restore: Expected false to be true. 
      at Object.assertRestored (radio/radio_test.ts:555:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

 ❌ clicking a radio should unselect other radio which is already selected: already checked: Expected false to be true. 
      at UserContext.<anonymous> (radio/radio_test.ts:101:67)

 ❌ disabled radio should not be selected when clicked: checked radio: Expected false to be true. 
      at UserContext.<anonymous> (radio/radio_test.ts:115:62)

 ❌ disabled radio should not be selected when clicked: still unchecked radio: Expected true to be false. 
      at UserContext.<anonymous> (radio/radio_test.ts:120:11)

 ❌ in a lit repeat: Expected 'on' to equal 'a1'. 
      at UserContext.<anonymous> (radio/radio_test.ts:396:23)

 ❌ in a lit repeat: Expected 'on' to equal 'a2'. 
      at UserContext.<anonymous> (radio/radio_test.ts:397:23)

switch/switch_test.js:

 ❌ should pass the "selected custom value" value test: Expected null to be 'Custom value'. 
      at Object.assertValue (switch/switch_test.ts:55:43)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ should pass the "selected default value" value test: Expected null to be 'on'. 
      at Object.assertValue (switch/switch_test.ts:47:43)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ it should pass the "restore selected" restore test: control.selected after restore: Expected false to be true. 
      at Object.assertRestored (switch/switch_test.ts:111:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

select/select_test.js:

 🚧 Browser logs:
      Internal menu is not open. Try calling SelectHarness.prototype.click()

tabs/tabs_test.js:

 ❌ renders selected with indicator: Expected false to be true. 
      at tabs/tabs_test.ts:68:44

 ❌ renders selected with indicator: Expected true to be false. 
      at tabs/tabs_test.ts:68:44

slider/slider_test.js:

 ❌ should pass the "multiple values different names" value test: Expected null to be '0'. 
      at Object.assertValue (slider/slider_test.ts:396:49)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ should pass the "multiple values different names" value test: Expected null to be '10'. 
      at Object.assertValue (slider/slider_test.ts:397:47)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ should pass the "multiple values same name" value test: Expected $.length = 1 to equal 2.
Expected $[0] = '50' to equal '0'.
Expected $[1] = undefined to equal '10'. 
      at Object.assertValue (slider/slider_test.ts:388:46)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ it should pass the "restore single value" restore test: slider.value after restore: Expected 50 to be 1. 
      at Object.assertRestored (slider/slider_test.ts:496:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

 ❌ should pass the "multiple default values with min/max" value test: Expected $.length = 1 to equal 2.
Expected $[0] = '50' to equal '167'.
Expected $[1] = undefined to equal '233'. 
      at Object.assertValue (slider/slider_test.ts:427:46)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ should pass the "multiple default values" value test: Expected $.length = 1 to equal 2.
Expected $[0] = '50' to equal '33'.
Expected $[1] = undefined to equal '67'. 
      at Object.assertValue (slider/slider_test.ts:419:46)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ it should pass the "reset multiple values different names" reset test: slider.valueStart after reset: Expected 5 to equal 0. 
      at Object.assertReset (slider/slider_test.ts:482:17)
      at UserContext.<anonymous> (testing/forms.ts:204:16)

 ❌ it should pass the "reset multiple values different names" reset test: slider.valueEnd after reset: Expected 5 to equal 10. 
      at Object.assertReset (slider/slider_test.ts:485:17)
      at UserContext.<anonymous> (testing/forms.ts:204:16)

 ❌ it should pass the "reset multiple values same name" reset test: slider.valueStart after reset: Expected 5 to equal 0. 
      at Object.assertReset (slider/slider_test.ts:465:17)
      at UserContext.<anonymous> (testing/forms.ts:204:16)

 ❌ it should pass the "reset multiple values same name" reset test: slider.valueEnd after reset: Expected 5 to equal 10. 
      at Object.assertReset (slider/slider_test.ts:468:17)
      at UserContext.<anonymous> (testing/forms.ts:204:16)

 ❌ it should pass the "restore multiple values same name" restore test: slider.valueStart after restore: Expected undefined to equal 0. 
      at Object.assertRestored (slider/slider_test.ts:506:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

 ❌ it should pass the "restore multiple values same name" restore test: slider.valueEnd after restore: Expected undefined to equal 10. 
      at Object.assertRestored (slider/slider_test.ts:509:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

 ❌ it should pass the "restore multiple values different names" restore test: slider.valueStart after restore: Expected undefined to equal 0. 
      at Object.assertRestored (slider/slider_test.ts:519:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

 ❌ it should pass the "restore multiple values different names" restore test: slider.valueEnd after restore: Expected undefined to equal 10. 
      at Object.assertRestored (slider/slider_test.ts:522:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

 ❌ should pass the "single default value with min/max" value test: Expected '50' to be '200'. 
      at Object.assertValue (slider/slider_test.ts:412:43)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ should pass the "single value" value test: Expected '50' to be '10'. 
      at Object.assertValue (slider/slider_test.ts:380:43)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

field/internal/field_test.js:

 ❌ should not allow focus when disabled: focused set back to false when disabled: Expected true to be false. 
      at UserContext.<anonymous> (field/internal/field_test.ts:98:9)

switch/internal/switch_test.js:

 ❌ adds unselected class when false: Expected [ 'switch', 'unselected' ] not to contain 'unselected'. 
      at UserContext.<anonymous> (switch/internal/switch_test.ts:92:53)

 ❌ adds selected class when true: Expected [ 'switch', 'unselected' ] to contain 'selected'. 
      at UserContext.<anonymous> (switch/internal/switch_test.ts:84:49)

 ❌ submits under correct conditions: Expected null to equal 'bar'. 
      at UserContext.<anonymous> (switch/internal/switch_test.ts:200:34)

 ❌ sets disabled of input: Expected false to be true. 
      at UserContext.<anonymous> (switch/internal/switch_test.ts:112:37)

textfield/internal/text-field_test.js:

 ❌ should be overridden by error and errorText: Expected '' to equal 'Error message'. 
      at UserContext.<anonymous> (textfield/internal/text-field_test.ts:433:54)

 ❌ should update error text to validationMessage: Expected '' to equal 'Error message'. 
      at UserContext.<anonymous> (textfield/internal/text-field_test.ts:401:54)

 ❌ should update `value` before user input: Expected '' to be 'Default'. 
      at UserContext.<anonymous> (textfield/internal/text-field_test.ts:179:36)

 ❌ should render `value` instead of default value attribute when `value` changes: Expected '' to be 'Default'. 
      at UserContext.<anonymous> (textfield/internal/text-field_test.ts:213:29)

 ❌ should update `value` multiple times: Expected '' to be 'Second default'. 
      at UserContext.<anonymous> (textfield/internal/text-field_test.ts:190:36)

 ❌ should set value back to default value: Expected '' to be 'Default'. 
      at UserContext.<anonymous> (textfield/internal/text-field_test.ts:153:36)

 ❌ should pass the "with value" value test: Expected '' to be 'Value'. 
      at Object.assertValue (textfield/internal/text-field_test.ts:622:42)
      at UserContext.<anonymous> (testing/forms.ts:194:16)

 ❌ it should pass the "restore value" restore test: textField.value after restore: Expected '' to be 'Value'. 
      at Object.assertRestored (textfield/internal/text-field_test.ts:672:17)
      at UserContext.<anonymous> (testing/forms.ts:240:18)

Chromium: |██████████████████████████████| 60/60 test files | 975 passed, 113 failed

Finished running tests in 5s with 113 failed tests.