[3.0] Support Polymer 3.0

[t2ym]

[3.0] Support Polymer 3.0

Status

• WIP in 3.0-develop branch
• WIP Pre-Release Version: https://github.com/t2ym/i18n-element/tree/3.0.0-pre.27 with @next tag
• Install with npm install i18n-element@3.0.0-pre.27 or npm install i18n-element@next
• Interfaces may change
• Unused legacy codes remaining

Tasks

• Roughly summarized in [Polymer 3.0-preview] Preliminary research on Polymer 3.0 support (ES Modules instead of HTML Imports) #58
• Minimal Conversions
  • Modules
    • i18n-element.js
    • i18n-dom-bind.js
    • define-element.js
  • Demos
    • demo/poc/
      • elements/localizable-element.js
      • elements/i18n-subclass-element.js
      • elements/i18n-thin-element.js
      • elements/i18n-legacy-element.js
      • elements/i18n-behavior-demo.js
    • demo/poc_preprocess/
    • demo/gulpfile.js
    • polymer.json
    • Add locales by cd demo; ../node_modules/.bin/gulp locales --targets="de es fr ja zh-Hans"

    cd demo
    # populate empty locales/*.{de|es|fr|ja|zh-Hans}.json
    # existing JSON files are not touched
    ../node_modules/.bin/gulp locales --targets="de es fr ja zh-Hans"
    # merge en resources into localized ones
    ../node_modules/.bin/gulp
    # translate xliff/bundle.{de|es|fr|ja|zh-Hans}.xlf
    # merge XLIFF translations into localized JSON files
    ../node_modules/.bin/gulp

- [ ] TBD

• Tests (Mixin, BaseElement, Thin, Legacy syntaxes)

browser	raw	preprocessed	bundled	coverage
Chrome 71	✔︎	✔︎	✔︎	✔︎
Firefox 64	✔︎	✔︎	✔︎	✔︎
Safari 12	✔︎	✔︎	✔︎	✔︎
Safari 9	✔︎	✔︎	✔︎	✔︎
Edge 17	✔︎	✔︎	✔︎	✔︎
IE 11	✔︎	✔︎	✔︎	✔︎

• Documents
  • TBD
• Code cleanup
  • Remove unreachable code as document.currentScript is always null in ES modules
  • Remove codes only for Polymer 2.x
  • Remove codes only for HTML Imports

Issues

• Thin syntax must be reconsidered as the following patterns
  • Pattern 1) <template id> Define = class Is {}
  • Pattern 2) <template id> Define = class { is }
  • Pattern 3) Define = class Is { template }
  • Pattern 4) Define = class { is, template }
• In Polymer 3.x, <template id="X"> is sought in the main document when both static get template() and <dom-module id="X"> are unavailable. Even if the template is in the main document, the base URI for the element must come from this.importMeta, not from document.baseURI, which can no longer serve as a base for the custom element.
• Coverage is skipped for Sauce Labs due to the issue [SauceLabs][Edge/IE/Safari] Large coverage data in POST are blocked in SauceLabs web-component-tester-istanbul#6
  • Patch: Introduce a new "client-event-fragment" socket.io message to send large data with 64KB chunks in separate HTTP POST requests
    • t2ym/web-component-tester@5f265e7
      • The Sauce Labs support team reported the fix had finally been deployed.
        • The patches have been reverted as the fix had been verified.
• Test timeouts
  • Some delay timers in tests are too short to load the suites in an acceptable timing for slow VMs on Sauce Labs
• IE 11 and Safari 9 do not support new.target and Reflect
  • Fix: Eliminate new.target and Reflect
    • Invoke _renameTemplate() within _template setter call, at which timing has this and this.constructor (=new.target) available
• Export namespace objects as well as global ones
  • Export Mixins object
  • Export BaseElements object
• Export mixins and base element
  • Export Localizable mixin function
  • Export I18nElement base element class
• Base URL for i18n-dom-bind locales is invalid
  • Ad-hoc Fix: Use location.href for Base URL
  • Fix: The value should be startUrl

  class I18nDomBind ...
  static get importMeta() {
    return { url: new URL(BehaviorsStore.I18nControllerBehavior.properties.startUrl.value, location.href).href };
  }

• Handle the case if current script is undefined for "thin" syntax
• i18n-dom-bind may have to be attached to DOM AFTER the load event of the page
  • Under Investigation

Notes