[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 #58

• Minimal Conversions

  • [x] Modules

  • [x] i18n-element.js

  • [x] i18n-dom-bind.js

  • [x] define-element.js

  • [x] Demos

  • [x] demo/poc/

    • [x] elements/localizable-element.js
    • [x] elements/i18n-subclass-element.js
    • [x] elements/i18n-thin-element.js
    • [x] elements/i18n-legacy-element.js
    • [x] elements/i18n-behavior-demo.js

  • [x] demo/poc_preprocess/

  • [x] demo/gulpfile.js

  • [x] polymer.json

  • [x] 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

• [x] 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
  • [x] Remove unreachable code as document.currentScript is always null in ES modules
  • [x] Remove codes only for Polymer 2.x
  • [x] Remove codes only for HTML Imports

Issues

• [x] Thin syntax must be reconsidered as the following patterns
  • [x] Pattern 1) <template id> Define = class Is {}
  • [x] Pattern 2) <template id> Define = class { is }
  • [x] Pattern 3) Define = class Is { template }
  • [x] Pattern 4) Define = class { is, template }
• [x] 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.
• [x] Coverage is skipped for Sauce Labs due to the issue https://github.com/t2ym/web-component-tester-istanbul/issues/6
  • [x] Patch: Introduce a new "client-event-fragment" socket.io message to send large data with 64KB chunks in separate HTTP POST requests
  • https://github.com/t2ym/web-component-tester/commit/5f265e75cee7e7fb279ff9b3c8878f7eac69f5dd
    • The Sauce Labs support team reported the fix had finally been deployed.
    • [x] The patches have been reverted as the fix had been verified.
• [x] Test timeouts
  • [x] Some delay timers in tests are too short to load the suites in an acceptable timing for slow VMs on Sauce Labs
• [x] IE 11 and Safari 9 do not support new.target and Reflect
  • [x] Fix: Eliminate new.target and Reflect
  • [x] Invoke _renameTemplate() within _template setter call, at which timing has this and this.constructor (=new.target) available
• [x] Export namespace objects as well as global ones
  • [x] Export Mixins object
  • [x] Export BaseElements object
• [x] Export mixins and base element
  • [x] Export Localizable mixin function
  • [x] Export I18nElement base element class
• [x] Base URL for i18n-dom-bind locales is invalid
  • [x] Ad-hoc Fix: Use location.href for Base URL
  • [x] Fix: The value should be startUrl

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

• [x] 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