Merge branch 'lit-html' into test

t2ym · Feb 20, 2019 · 87debba · 87debba
2 parents fad7922 + 7b1f610
commit 87debba
Show file tree

Hide file tree

Showing 79 changed files with 1,164 additions and 618 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -21,7 +21,7 @@ addons:
   sauce_connect: true
 script:
   - gulp patch-wct-browser-legacy # cp -vf test/browser.js node_modules/wct-browser-legacy/browser.js
-  - gulp patch-browser-capabilities # treat Edge as ES5 browser
+  - #gulp patch-browser-capabilities # treat Edge as ES5 browser
   - # for target in lit; do { export COVERAGE_DIR=test/coverage-report-${target}-safari9 && wct --npm --module-resolution node --root . --config-file test/safari9-wct.conf.js --skip-plugin istanbul test/${target}-index.html; } done
   - #for target in lit; do { export COVERAGE_DIR=test/coverage-report-${target}-non-safari9 && wct --npm --module-resolution node --root . --config-file test/non-safari9-wct.conf.js test/${target}-index.html; } done
   - #wct --npm --module-resolution node --root . --config-file test/non-safari9-wct.conf.js --skip-plugin istanbul test/lit-bundled-index.html 

diff --git a/demo/clock/clock.js b/demo/clock/clock.js
@@ -38,7 +38,7 @@ export class LitClock extends i18n(HTMLElement) {
 
   static get observedAttributes() {
     let attributes = new Set(super.observedAttributes);
-    [/* list of additional observedAttributes */].forEach(attr => attributes.add(attr));
+    [/* list of additional observedAttributes */].forEach(attr => attributesSet.add(attr));
     return [...attributes];
   }
 
@@ -170,7 +170,7 @@ export class LitClock extends i18n(HTMLElement) {
   attributeChangedCallback(name, oldValue, newValue) {
     const handleOnlyBySelf = [];
     if (!handleOnlyBySelf.indexOf(name) >= 0) {
-      if (typeof super.attributeChangedCallback === 'function') {
+      if (super.attributeChangedCallback) {
         super.attributeChangedCallback(name, oldValue, newValue);
       }
     }

diff --git a/demo/clock/xliff/bundle.ja.xlf b/demo/clock/xliff/bundle.ja.xlf
@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE xliff PUBLIC "-//XLIFF//DTD XLIFF//EN" "http://www.oasis-open.org/committees/xliff/documents/xliff.dtd">
 <xliff version="1.0">
-  <file xml:space="default" source-language="en" target-language="ja" datatype="plaintext" original="messages" date="2019-01-22T09:40:32Z" product-name="messages">
+  <file xml:space="default" source-language="en" target-language="ja" datatype="plaintext" original="messages" date="2019-02-20T11:08:35Z" product-name="messages">
     <header>
-      <tool tool-id="xliff-conv" tool-name="xliff-conv" tool-version="1.0.11"/>
+      <tool tool-id="xliff-conv" tool-name="xliff-conv" tool-version="1.0.12"/>
     </header>
     <body>
       <trans-unit id="get-message.div" approved="yes">

diff --git a/demo/gulpfile.js b/demo/gulpfile.js
@@ -13,6 +13,7 @@ const vulcanize = require('gulp-vulcanize');
 const debug = require('gulp-debug');
 const replace = require('gulp-replace');
 const uglify = require('gulp-uglify');
+const htmlMinifier = require('html-minifier');
 const runSequence = require('run-sequence');
 const del = require('del');
 const gutil = require('gulp-util');
@@ -111,6 +112,13 @@ const escodegenOptionsCompact = {
   comment: false
 };
 
+const minifyHtmlTemplates = false;
+const htmlMinifierOptions = {
+  // Same options as polymer build minify: true
+  collapseWhitespace: true,
+  removeComments: true,
+};
+
 function UncamelCase (name) {
   return name
     // insert a hyphen between lower & upper
@@ -239,6 +247,12 @@ function traverseAst(ast, templates) {
             let localizableTextJSON = preprocessedTemplate.substring(indexOfLocalizableText + localizableTextPrefix.length, indexOfLocalizableTextPostfix);
             localizableTextJSON = JSON.stringify(JSON.parse(localizableTextJSON), ((key, value) => typeof value === 'string' ? he.decode(value) : value), 2)
             let strippedTemplate = preprocessedTemplate.substring(0, indexOfLocalizableText);
+            if (minifyHtmlTemplates) {
+              //console.log(`${name}: original ${strippedTemplate}`);
+              strippedTemplate = htmlMinifier.minify(strippedTemplate, htmlMinifierOptions);
+              //console.log(`${name}: minified ${strippedTemplate}`);
+            }
+
             let strings = [{
               "type": "Literal",
               "value": "<!-- localizable -->",

diff --git a/demo/preprocess/clock.js b/demo/preprocess/clock.js
@@ -39,7 +39,7 @@ export class LitClock extends i18n(HTMLElement) {
   }
   static get observedAttributes() {
     let attributes = new Set(super.observedAttributes);
-    [].forEach(attr => attributes.add(attr));
+    [].forEach(attr => attributesSet.add(attr));
     return [...attributes];
   }
   get date() {
@@ -137,7 +137,7 @@ export class LitClock extends i18n(HTMLElement) {
   attributeChangedCallback(name, oldValue, newValue) {
     const handleOnlyBySelf = [];
     if (!handleOnlyBySelf.indexOf(name) >= 0) {
-      if (typeof super.attributeChangedCallback === 'function') {
+      if (super.attributeChangedCallback) {
         super.attributeChangedCallback(name, oldValue, newValue);
       }
     }

diff --git a/demo/tmp/i18n-attr-repo.js b/demo/tmp/i18n-attr-repo.js
@@ -2,10 +2,7 @@
 @license https://github.com/t2ym/i18n-behavior/blob/master/LICENSE.md
 Copyright (c) 2016, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserved.
 */
-import '@polymer/polymer/polymer-legacy.js';
-
 import { Polymer as Polymer$0 } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-// import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js'; // dom() is unnecessary
 import { DomModule } from '@polymer/polymer/lib/elements/dom-module.js';
 const $_documentContainer = document.createElement('template');
 
@@ -30,7 +27,6 @@ $_documentContainer.innerHTML = `<template id="i18n-attr-repo">
     </template>
 </template>`;
 
-//document.head.appendChild($_documentContainer.content);
 // shared data
 var sharedData = {};
 
@@ -228,7 +224,6 @@ Handle and judge JSON object attributes.
 @group I18nBehavior
 @element i18n-attr-repo
 @hero hero.svg
-@demo demo/index.html
 */
 Polymer({
   importMeta: import.meta,

diff --git a/i18n.js b/i18n.js
@@ -5,42 +5,9 @@ Copyright (c) 2018, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserved.
 
 import {html as litHtml, render, svg} from 'lit-html/lit-html.js';
 import { _I18nBehavior, I18nControllerBehavior } from 'i18n-behavior/i18n-behavior.js';
-
-// Polyfill IE 11
-if (!Object.getOwnPropertyDescriptor(DocumentFragment.prototype, 'children')) {
-  Object.defineProperty(DocumentFragment.prototype, 'children', {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-      var childNodes = this.childNodes;
-      var children = Array.prototype.filter.call(childNodes, function (node) { return node.nodeType === node.ELEMENT_NODE; });
-      return children;
-    }
-  });
-}
-if (!Object.getOwnPropertyDescriptor(Element.prototype, 'children')) {
-  Object.defineProperty(SVGElement.prototype, 'children', {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-      var childNodes = this.childNodes;
-      var children = Array.prototype.filter.call(childNodes, function (node) { return node.nodeType === node.ELEMENT_NODE; });
-      return children;
-    }
-  });
-}
+import { polyfill } from './polyfill.js';
 
 const isEdge = navigator.userAgent.indexOf(' Edge/') >= 0;
-const isAttributeChangedPolyfillRequired = (function () {
-  class DummyCustomElementToCheckAttributeChangedCallbackCapability extends HTMLElement {
-    static get observedAttributes() { return ['lang']; }
-    attributeChangedCallback(name, oldValue, newValue) { this.attributeChangedCallbackCalled = true; }
-  }
-  customElements.define('dummy-custom-element-to-check-attribute-changed-callback-capability', DummyCustomElementToCheckAttributeChangedCallbackCapability);
-  const dummyElement = document.createElement('dummy-custom-element-to-check-attribute-changed-callback-capability');
-  dummyElement.lang = 'en'; // set lang "property" not "attribute"
-  return !dummyElement.attributeChangedCallbackCalled;
-})();
 
 const nameCache = new Map(); // for UncamelCase()
 const UncamelCase = function UncamelCase (name) {
@@ -163,7 +130,7 @@ const boundElements = new Map();
  * @param {HTMLElement} base Base class to support I18N
  * @summary I18N mixin for lit-html
  */
-export const i18n = (base) => class I18nBaseElement extends mixinMethods(_I18nBehavior, i18nMethods, base) {
+export const i18n = (base) => class I18nBaseElement extends mixinMethods(_I18nBehavior, i18nMethods, polyfill(base)) {
 
   /**
    * Fired when its locale resources are updated
@@ -186,9 +153,11 @@ export const i18n = (base) => class I18nBaseElement extends mixinMethods(_I18nBe
    * @type {Array} list of observed attributes
    */
   static get observedAttributes() {
-    let attributes = new Set(super.observedAttributes);
-    ['lang'].forEach(attr => attributes.add(attr));
-    return [...attributes];
+    let attributesSet = new Set();
+    let attributes = [];
+    ['lang'].concat(super.observedAttributes || []).forEach(attr => attributesSet.add(attr));
+    attributesSet.forEach(attr => attributes.push(attr)); // forEach is supported by IE 11
+    return attributes;
   }
 
   /**
@@ -221,9 +190,6 @@ export const i18n = (base) => class I18nBaseElement extends mixinMethods(_I18nBe
       };
     }
     this.addEventListener('lang-updated', this._updateEffectiveLang.bind(this));
-    if (isAttributeChangedPolyfillRequired) {
-      this._polyfillAttributeChangedCallback();
-    }
     this._startMutationObserver();
   }
 
@@ -411,31 +377,6 @@ export const i18n = (base) => class I18nBaseElement extends mixinMethods(_I18nBe
     }, this);
   }
 
-  /**
-   * Setup polyfill for attributeChangedCallback() of custom elements v1 for unsupported browsers
-   */
-  _polyfillAttributeChangedCallback() {
-    this._selfObserver = this._selfObserver || 
-      new MutationObserver(this._handleSelfAttributeChange.bind(this));
-    this._selfObserver.observe(this, { attributes: true, attributeOldValue: true, attributeFilter: this.constructor.observedAttributes });
-  }
-
-  /**
-   * Polyfills calls to attributeChangedCallback()
-   * @param {Array} mutations Array of mutations of observedAttributes
-   */
-  _handleSelfAttributeChange(mutations) {
-    mutations.forEach(function(mutation) {
-      switch (mutation.type) {
-      case 'attributes':
-        this.attributeChangedCallback(mutation.attributeName, mutation.oldValue, this.getAttribute(mutation.attributeName));
-        break;
-      default:
-        break;
-      }
-    }, this);
-  }
-
   /**
    * attributeChangedCallback of custom elements v1 to catch lang attribute changes
    * It calls super.attributeChangedCallback() for attriutes other than lang
@@ -445,7 +386,8 @@ export const i18n = (base) => class I18nBaseElement extends mixinMethods(_I18nBe
    */
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === 'lang') {
-      // super.attributeChangedCallbck() is not called
+      // super.attributeChangedCallback() is not called
+      //console.log(`${this.is}#${this.number}.attributeChangedCallback("${name}", "${oldValue}"(${typeof oldValue}), "${newValue}"(${typeof newValue}))`);
       if (oldValue !== newValue) {
         if (I18nControllerBehavior.properties.masterBundles.value[''][this.constructor.is]) {
           this._langChanged(newValue, oldValue);
@@ -457,7 +399,7 @@ export const i18n = (base) => class I18nBaseElement extends mixinMethods(_I18nBe
       }
     }
     else {
-      if (typeof super.attributeChangedCallback === 'function') {
+      if (super.attributeChangedCallback) {
         super.attributeChangedCallback(name, oldValue, newValue);
       }
     }
@@ -472,6 +414,7 @@ export const i18n = (base) => class I18nBaseElement extends mixinMethods(_I18nBe
       while (task = this._tasks.shift()) {
         this[task[0]].apply(this, task[1]);
       }
+      this._tasks = null;
     }
   }
 }
@@ -519,7 +462,10 @@ export const html = (strings, ...parts) => {
   else if (strings.length > 0 && strings[0] === '<!-- localizable -->' && parts[0] instanceof BindingBase) {
     //name = parts[0].name;
     //meta = parts[0].meta;
-    //element = parts[0].element;
+    element = parts[0].element;
+    if (element._tasks) {
+      element._processTasks();
+    }
     //console.log('html: rendering preprocessed HTML template for ' + parts[0].name);
     strings.shift();
     parts.shift();
@@ -532,6 +478,9 @@ export const html = (strings, ...parts) => {
   if (cachedTemplate) {
     preprocessedStrings = cachedTemplate.preprocessedStrings;
     preprocessedPartsGenerator = cachedTemplate.preprocessedPartsGenerator;
+    if (element._tasks) {
+      element._processTasks();
+    }
   }
   else {
     let originalHtml = '';

diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/t2ym/i18n-element#readme",
   "name": "i18n-element",
-  "version": "3.0.0-pre.28-lit-html.28",
+  "version": "3.0.0-pre.28-lit-html.33",
   "main": "i18n.js",
   "directories": {
     "test": "test"