[4.0] Remove dependency on Polymer library

Question

[4.0] Remove dependency on Polymer library

Closed this issue 6 years ago · 4 comments

t2ym commented 6 years ago

Links to BundlePhobia

`i18n-element@4.0.0` for `i18n.js`

`i18n-element@4.0.0-core` for `i18n-core.js`

Gzipped Bundled `i18n-core.js` - 15.26 kB including `lit-html`

Bundler	Minifier	Compression	Size
`polymer-build`	`minify: true`	-	93.19 kB
`polymer-build`	`minify: true`	gzip	19.13 kB
`rollup`	`babel-preset-minify`	-	67.84 kB
`rollup`	`babel-preset-minify`	gzip	15.26 kB

i18n-core.js is only for preprocessed sources
- Use i18n-behavior/i18n-controller-core.js, which omits the preprocessor code
demo/gulpfile.js with const useI18nCoreJs = true can convert imports to i18n-core.js
- "i18n-element" -> "i18n-element/i18n-core.js"
- "i18n-element/i18n.js" -> "i18n-element/i18n-core.js"
- "/node_modules/i18n-element/i18n.js" -> "/node_modules/i18n-element/i18n-core.js"

Gzipped Bundled `i18n.js` - 18.82 kB including `lit-html`

Bundler	Minifier	Compression	Size	Notes
`polymer-build`	`minify: true`	-	116.66 kB
`polymer-build`	`minify: true`	gzip	23.67 kB
`rollup`	`babel-preset-minify`	-	83.24 kB
`rollup`	`babel-preset-minify`	gzip	18.82 kB
`rollup`	`rollup-plugin-babel-minify`	-	~~106.43 kB~~	LIMITED
`rollup`	`rollup-plugin-terser`	-	~~82.44 kB~~	BROKEN
`webpack`	`babel-minify-webpack-plugin`	-	173.58 kB	TRIAL
`webpack`	`babel-minify-webpack-plugin`	gzip	33.48 kB	TRIAL

The current webpack.config.js is just a trial and may not be optimal
- demo/preprocess/webpack.config.js seems to work but not tested well
- Overhead modules in webpack
  - [20] ./node_modules/node-libs-browser/node_modules/buffer/index.js 47.7 KiB
  - [21] (webpack)/buildin/global.js 475 bytes
  - [22] ./node_modules/base64-js/index.js 3.41 KiB
  - [23] ./node_modules/ieee754/index.js 2.03 KiB
  - [24] ./node_modules/node-libs-browser/node_modules/isarray/index.js 131 bytes
An example app with webpack is configured at https://github.com/t2ym/pwa-i18n-webpack, based on https://github.com/vaadin-learning-center/lit-element-tutorial-pwa-and-offline
- A minimal plugin @open-wc/webpack-import-meta-loader is applied
- static get is() getters are explicitly declared to survive UglifyJS mangling for class names
- The app is dependent on @vaadin/* elements, which depend on Polymer library, but the webpack configurations should be compatible even after they are removed from the app
rollup-plugin-babel can be configured with a preset babel-preset-minify
- bundled-import-meta babel plugin can be configured with rollup-plugin-babel to convert import.meta meta properties to maintain their original values on bundling
- rollup.config.js with bundled-import-meta is attached to this GitHub issue
The raw rollup-plugin-babel-minify minified version has limitations
- LIMITATION Proper element-specific locales/ paths (not for bundle.*.json) cannot be found since import.meta meta-properties for the elements are left as they are in the bundle
  - In polymer-build, import.meta for each element is crafted to maintain the original intended value for the element so that importMeta() method can return the same expected value as that for the unbundled original version
- i18n.js with rollup-plugin-babel-minify whose options following polymer-build itself is intact as it does not contain any import.meta for locales/ paths
  - rollup.config.js with the options is attached to this GitHub issue
CRITICAL MINIFICATION ISSUES seem to persist with rollup-plugin-terser for i18n.js
- With demo/preprocess/clock.js, unexpected fetching of html-element.ja.json is observed, which indicates critical mal-minification by rollup-plugin-terser
  - Without the terser plugin, the issue is not observed
  - Root cause under investigation - It is difficult to pinpoint the issue origin since the minified code cannot be pretty-printed in DevTools
- Since rollup-plugin-terser uses terser as a mangling engine, terser-mangled code should not have the issue with babel shown below
rollup is internally used in polymer build with calibrated options for Polymer 3
- Mangling disabled due to Polymer/tools/issues/261 [build] Name mangling mismangles names when emitting ES6, which can be tracked to babel/minify/issues#943 For loops declaration sometimes shadows loop condition variables

Bundled Modules and Packages

i18n.js - 25.29 KB (9.73%)
i18n-behavior - 105.34 KB (40.54%)
	i18n-controller.js - 82.14 KB (77.98%)
	i18n-attr-repo.js - 15.87 KB (15.07%)
	i18n-preference.js - 7.33 KB (6.95%)
lit-html - 43.51 KB (16.75%)
make-plural - 32.86 KB (12.65%)
i18n-format - 22.29 KB (8.58%)
i18n-number - 10.98 KB (4.23%)
wc-putty - 10.11 KB (3.89%)
deepcopy - 9.43 KB (3.63%)

Dependencies

i18n-element	i18n-behavior	Polymer	lit-html
4.x	4.x	3.x (optional)	1.x
3.x	3.x	3.x (mandatory)	1.x
2.x	2.x	1.x-2.x	-
-	1.x	1.x	-

Notes

If Polymer elements have to be supported in i18n-element 4.x, the elements themselves must have @polymer/polymer as their NPM dependencies since i18n-element@4.x and i18n-behavior@4.x do NOT have @polymer/polymer as their own NPM package dependencies.
As it is unlikely that any Polymer elements have dependencies on i18n-element@4.x but have no dependencies on @polymer/polymer, the missing explicit NPM package dependencies on @polymer/polymer in i18n-element@4.x and i18n-behavior@4.x NPM packages should not become issues.

Status

WIP in lit-html branch
NPM package
- npm install i18n-element@next or npm install i18n-element@4.0.0-pre.17
Try to keep external interfaces compatible with 3.0.0
- i18n.js is independent of Polymer library
i18n-core.js for preprocessed sources
Use i18n-behavior@4.0.0-pre.19
- i18n-behavior/i18n-controller-core.js omits the preprocessor code
- Dependent i18n-format@4.0.0-pre.13 and i18n-number@4.0.0-pre.6 render with lit-html

Tasks

3.0.0 with dependency on Polymer Library

Size of bundled and gzipped i18n.js ≈ 67.9KB

4.0.0 plan # 1 with no production dependency on Polymer Library

Roughly estimated size of bundled and gzipped i18n.js ≈ 23.5KB

Roughly Estimated Tasks on Plan # 1

i18n-number renders with lit-html, but has the same interfaces as 3.0.0
i18n-format renders with lit-html, but has the same interfaces as 3.0.0
i18n-attr-repo is a vanilla web component, but has the same interfaces as 3.0.0
i18n-preference is a vanilla web component, but has the same interfaces as 3.0.0, using localStorage API directly
i18n-controller.js is introduced for non-Polymer part of i18n-behavior.js, using XHR (or fetch with the help of whatwg-fetch on IE 11) directly
i18n-behavior.js contains only Polymer dependent part, depending on i18n-controller.js, but providing the same interfaces as 3.0.0
i18n-element.js and i18n-behavior.js are still supported if polymer is loaded
- polymer is a devDependency of i18n-element and i18n-behavior npm packages
- It is assumed that all the dependent modules of i18n-element.js depend on polymer and i18n-element and i18n-behaviro themselves do not have to depend on polymer as npm packages
live-localizer is still a Polymer element, but is required only in development phases and not required in production
LitElement has to be supported as well

Design Issues on Plan # 1

i18n-number, i18n-format, i18n-attr-repo, i18n-preference: Property/attribute management should be easier with LitElement
- LitElement footprint overheads?
i18n-number, i18n-format can be implemented as vanilla web components but rendering with ShadyDOM may be more compatible and easier with lit-html
intl dependency can be dropped if Safari 9 support is dropped
Should base elements with lit-html other than LitElement be officially supported?
Can fetch API be used instead of XHR?
- The fetch API can be polyfilled by whatwg-fetch on IE 11

Answer 1 · 2019-03-09T08:32:52.000Z

Log from `npm run size` with `bundled-import-meta`

i18n.js → test/build/i18n.bundled-not-usable-as-it-is.js...
i18n.js:
i18n-behavior - 105.34 KB (40.54%)
	i18n-controller.js - 82.14 KB (77.98%)
	i18n-attr-repo.js - 15.87 KB (15.07%)
	i18n-preference.js - 7.33 KB (6.95%)
lit-html - 43.51 KB (16.75%)
	lib/parts.js - 14.84 KB (34.10%)
	lib/template.js - 9.24 KB (21.23%)
	lib/template-instance.js - 4.07 KB (9.35%)
	lib/template-result.js - 3.42 KB (7.86%)
	lit-html.js - 2.52 KB (5.79%)
	lib/default-template-processor.js - 2.01 KB (4.61%)
	lib/template-factory.js - 1.9 KB (4.37%)
	lib/render.js - 1.78 KB (4.08%)
	lib/dom.js - 1.56 KB (3.58%)
	lib/directive.js - 1.37 KB (3.16%)
	lib/part.js - 834 B (1.87%)
make-plural - 32.86 KB (12.65%)
	es6/plurals.js - 32.86 KB (100.00%)
app - 25.29 KB (9.73%)
	i18n.js - 25.29 KB (100.00%)
i18n-format - 22.29 KB (8.58%)
	i18n-format.js - 22.29 KB (100.00%)
i18n-number - 10.98 KB (4.23%)
	i18n-number.js - 10.98 KB (100.00%)
wc-putty - 10.11 KB (3.89%)
	polyfill.js - 10.11 KB (100.00%)
deepcopy - 9.43 KB (3.63%)
	dist/deepcopy.js - 9.43 KB (100.00%)
┌─────────────────────────────────────────────────────────────────┐
│                                                                 │
│   Destination: test/build/i18n.bundled-not-usable-as-it-is.js   │
│   Bundle Size:  107.7 KB                                        │
│   Minified Size:  82.53 KB                                      │
│   Gzipped Size:  18.56 KB                                       │
│   Brotli size: 18.98 KB                                         │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
(!) rollup-plugin-sizes plugin: The ongenerate hook used by plugin rollup-plugin-sizes is deprecated. The generateBundle hook should be used instead.
created test/build/i18n.bundled-not-usable-as-it-is.js in 3.3s

> gulp size

[22:34:54] Using gulpfile ~/WebComponents/components/i18n-element/gulpfile.js
[22:34:54] Starting 'size'...
[22:34:54] gulp-debug: test/build/i18n.js
[22:34:54] gulp-debug: 1 item
[22:34:54] all files 115.25 kB
[22:34:54] gulp-debug: test/build/i18n.js.gz
[22:34:54] gulp-debug: 1 item
[22:34:54] all files 23.32 kB
[22:34:54] Finished 'size' after 35 ms

Answer 2 · 2019-03-10T10:06:52.000Z

`rollup.config.js` for `bundled-import-meta`

import resolve from 'rollup-plugin-node-resolve';
import sizes from 'rollup-plugin-sizes';
import filesize from 'rollup-plugin-filesize';
import babel from 'rollup-plugin-babel';
import minifyPreset from 'babel-preset-minify';

export default {
  input: 'i18n.js',
  output: {
    file: 'test/build/i18n.bundled-not-usable-as-it-is.js',
    format: 'esm',
  },
  plugins: [
    resolve({
      modulesOnly: true,
    }),
    babel({
      sourceMaps: false,
      comments: false,
      plugins: [
        '@babel/plugin-syntax-object-rest-spread',
        '@babel/plugin-syntax-async-generators',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-syntax-import-meta',
        // rollup rewrites import.meta.url, but makes them point to the file location after bundling
        // we want the location before bundling
        [ 'bundled-import-meta', {
          'mappings': {
            'node_modules': '/node_modules'
          },
          'bundleDir': '.',
          'importStyle': 'esm',
        } ],
      ],
      presets: [
        minifyPreset({}, {
          // Options from polymer-build/src/js-transform.ts
          // Disable the minify-constant-folding plugin because it has a bug relating
          // to invalid substitution of constant values into export specifiers:
          // https://github.com/babel/minify/issues/820
          evaluate: false,

          // TODO(aomarks) Find out why we disabled this plugin.
          simplifyComparisons: false,

          // Prevent removal of things that babel thinks are unreachable, but sometimes
          // gets wrong: https://github.com/Polymer/tools/issues/724
          deadcode: false,

          // Disable the simplify plugin because it can eat some statements preceeding
          // loops. https://github.com/babel/minify/issues/824
          simplify: false,

          // This is breaking ES6 output. https://github.com/Polymer/tools/issues/261
          mangle: false,
        }),
      ],
    }),
    sizes({
      details: true,
    }),
    filesize({
      showBrotliSize: true,
    }),
  ]
}

Answer 3 · 2019-03-10T14:24:17.000Z

`rollup.config.js` for `demo/preprocess/clock.js`

deployed to `build/esm-bundled/demo/preprocess/clock.js`

Deployment

polymer build # set up build/esm-bundled/...
rollup -c # deploy build/esm-bundled/demo/preprocess/clock.js
cd build/esm-bundled
python -m SimpleHTTPServer 8081 # http://localhost:8081/demo/preprocess/

Verification

// On DevTools Console
customElements.get('world-clock').importMeta
{ url: 'http://localhost:8081/demo/preprocess/clock.js' }
customElements.get('i18n-format').importMeta
{ url: 'http://localhost:8081/node_modules/i18n-format/i18n-format.js' }

`rollup.config.js`

import resolve from 'rollup-plugin-node-resolve';
import sizes from 'rollup-plugin-sizes';
import filesize from 'rollup-plugin-filesize';
import babel from 'rollup-plugin-babel';
import minifyPreset from 'babel-preset-minify';

export default {
  input: 'demo/preprocess/clock.js',
  output: {
    file: 'build/esm-bundled/demo/preprocess/clock.js',
    format: 'esm',
  },
  plugins: [
    resolve({
      modulesOnly: true,
    }),
    babel({
      sourceMaps: false,
      comments: false,
      plugins: [
        '@babel/plugin-syntax-object-rest-spread',
        '@babel/plugin-syntax-async-generators',
        '@babel/plugin-syntax-dynamic-import',
        '@babel/plugin-syntax-import-meta',
        // rollup rewrites import.meta.url, but makes them point to the file location after bundling
        // we want the location before bundling
        [ 'bundled-import-meta', {
          'mappings': {
            'node_modules': '../../node_modules'
          },
          'bundleDir': 'demo/preprocess',
          'importStyle': 'esm',
        } ],
      ],
      presets: [
        minifyPreset({}, {
          // Options from polymer-build/src/js-transform.ts
          // Disable the minify-constant-folding plugin because it has a bug relating
          // to invalid substitution of constant values into export specifiers:
          // https://github.com/babel/minify/issues/820
          evaluate: false,

          // TODO(aomarks) Find out why we disabled this plugin.
          simplifyComparisons: false,

          // Prevent removal of things that babel thinks are unreachable, but sometimes
          // gets wrong: https://github.com/Polymer/tools/issues/724
          deadcode: false,

          // Disable the simplify plugin because it can eat some statements preceeding
          // loops. https://github.com/babel/minify/issues/824
          simplify: false,

          // This is breaking ES6 output. https://github.com/Polymer/tools/issues/261
          mangle: false,
        }),
      ],
    }),
    sizes({
      details: true,
    }),
    filesize({
      showBrotliSize: true,
    }),
  ]
}

Answer 4 · 2019-03-15T06:09:37.000Z

`i18n-core.js` part of log from npm run size

i18n-core.js → test/build/i18n-core.bundled-not-usable-as-it-is.js...
i18n-core.js:
i18n-behavior - 60.73 KB (29.08%)
	i18n-controller-core.js - 37.53 KB (61.80%)
	i18n-attr-repo.js - 15.87 KB (26.14%)
	i18n-preference.js - 7.33 KB (12.06%)
lit-html - 43.51 KB (20.83%)
	lib/parts.js - 14.84 KB (34.10%)
	lib/template.js - 9.24 KB (21.23%)
	lib/template-instance.js - 4.07 KB (9.35%)
	lib/template-result.js - 3.42 KB (7.86%)
	lit-html.js - 2.52 KB (5.79%)
	lib/default-template-processor.js - 2.01 KB (4.61%)
	lib/template-factory.js - 1.9 KB (4.37%)
	lib/render.js - 1.78 KB (4.08%)
	lib/dom.js - 1.56 KB (3.58%)
	lib/directive.js - 1.37 KB (3.16%)
	lib/part.js - 834 B (1.87%)
make-plural - 32.86 KB (15.73%)
	es6/plurals.js - 32.86 KB (100.00%)
i18n-format - 22.29 KB (10.67%)
	i18n-format.js - 22.29 KB (100.00%)
app - 18.95 KB (9.07%)
	i18n-core.js - 18.95 KB (100.00%)
i18n-number - 10.98 KB (5.26%)
	i18n-number.js - 10.98 KB (100.00%)
wc-putty - 10.11 KB (4.84%)
	polyfill.js - 10.11 KB (100.00%)
deepcopy - 9.43 KB (4.52%)
	dist/deepcopy.js - 9.43 KB (100.00%)

Links to BundlePhobia

i18n-element@4.0.0 for i18n.js

i18n-element@4.0.0-core for i18n-core.js

Gzipped Bundled i18n-core.js - 15.26 kB including lit-html

Gzipped Bundled i18n.js - 18.82 kB including lit-html

Bundled Modules and Packages

Dependencies

Notes

Status

Tasks

3.0.0 with dependency on Polymer Library

4.0.0 plan # 1 with no production dependency on Polymer Library

Roughly Estimated Tasks on Plan # 1

Design Issues on Plan # 1

Log from npm run size with bundled-import-meta

rollup.config.js for bundled-import-meta

rollup.config.js for demo/preprocess/clock.js

deployed to build/esm-bundled/demo/preprocess/clock.js

Deployment

Verification

rollup.config.js

i18n-core.js part of log from npm run size

`i18n-element@4.0.0` for `i18n.js`

`i18n-element@4.0.0-core` for `i18n-core.js`

Gzipped Bundled `i18n-core.js` - 15.26 kB including `lit-html`

Gzipped Bundled `i18n.js` - 18.82 kB including `lit-html`

Log from `npm run size` with `bundled-import-meta`

`rollup.config.js` for `bundled-import-meta`

`rollup.config.js` for `demo/preprocess/clock.js`

deployed to `build/esm-bundled/demo/preprocess/clock.js`

`rollup.config.js`

`i18n-core.js` part of log from npm run size