[Polymer 2.4] Support Polymer.html`<tag></tag>`

[t2ym]

[Polymer 2.4] Support Polymer.html``

Notes

• i18n-element 2.0.1 supports this syntax.
  • Importing i18n-element 2.0.1 and i18n-behavior 2.0.0 as ES modules is NOT supported
  • polymer-modulizer conversion has not been verified yet.
• gulp-i18n-preprocess 1.2.3 does NOT support this syntax.
  • Script for conversion is attached below.

Example Code

class I18nSubclassElement extends BaseElements.I18nElement {
  static get is() { return 'i18n-subclass-element'; }
  static get template() {
    return this._i18nPreprocess(Polymer.html`
      <span id="label1">Subclass UI label 1</span><br>
      <span id="label2">Subclass UI label 2</span><br>
      <span id="label3">Subclass UI label 3</span><br>
    `);
  }
}
customElements.define(I18nSubclassElement.is, I18nSubclassElement);

[t2ym]

Script to generate <dom-module> for gulp-i18n-preprocess from Polymer.html templates

unmodularize.js

#!/usr/bin/env node
/*
@license https://github.com/t2ym/thin-hook/blob/master/LICENSE.md
Copyright (c) 2018, Tetsuya Mori <t2y3141592@gmail.com>. All rights reserved.
*/

const fs = require('fs');
const path = require('path');

if (process.argv.length <= 2) {
  let cmd = path.basename(process.argv[1]);
  console.log(
`Unmodularize Polymer.html templates for gulp-i18n-preprocess

Usage: ${cmd} --htmlTemplate='{htmlTemplate}' my-custom-element.js ...

Options:
  --htmlTemplate={htmlTemplate} : HTML template. Default value: '<link rel="import" href="../../../i18n-element.html"><dom-module>'

Outputs: my-custom-element.html ...
(Target extensions are converted from .js to .html)
`);
}

let htmlTemplate = `<link rel="import" href="../../../i18n-element.html"><dom-module>`;

for (let i = 2; i < process.argv.length; i++) {
  let match = process.argv[i].match(/^--htmlTemplate=(.*)$/);
  if (match) {
    htmlTemplate = match[1];
    continue;
  }
  match = process.argv[i].match(/^(.*)[.]js$/)
  if (match) {
    let code = fs.readFileSync(process.argv[i], 'UTF-8');
    let outPath = match[1] + '.html';
    let name = path.basename(match[1]);
    let template = code.match(/Polymer[.]html`([^`]*)`/);
    if (!template) {
      console.error('Cannot find template in ' + process.argv[i]);
      continue;
    }
    let html = htmlTemplate.replace('<dom-module>', `<dom-module id="${name}"><template>${template[1]}</template></dom-module>\n`);
    fs.writeFileSync(outPath, html);
  }
}

Example Command

./unmodularize.js --htmlTemplate='<link rel="import" href="../../../../i18n-element.html"><dom-module>' i18n-subclass-element.js

Example Input

class I18nSubclassElement extends BaseElements.I18nElement {
  static get is() { return 'i18n-subclass-element'; }
  static get template() {
    return this._i18nPreprocess(Polymer.html`
      <span id="label1">Subclass UI label 1</span><br>
      <span id="label2">Subclass UI label 2</span><br>
      <span id="label3">Subclass UI label 3</span><br>
    `);
  }
}
customElements.define(I18nSubclassElement.is, I18nSubclassElement);

Example Output

<link rel="import" href="../../../../i18n-element.html"><dom-module id="i18n-subclass-element"><template>
      <span id="label1">Subclass UI label 1</span><br>
      <span id="label2">Subclass UI label 2</span><br>
      <span id="label3">Subclass UI label 3</span><br>
    </template></dom-module>

Extracted Core Logic to reuse in custom build processes

let htmlTemplate = `<link rel="import" href="../../../i18n-element.html"><dom-module>`;
let code = '**JavaScript with Polymer.html**';
let template = code.match(/Polymer[.]html`([^`]*)`/);
let html = htmlTemplate.replace('<dom-module>', 
  `<dom-module id="${name}"><template>${template[1]}</template></dom-module>\n`);

Notes

• Inline variables are not supported

  Polymer.html`<span>hello</span>${variable_is_not_supported}`; // Not supported

[t2ym]

Supported in 3.0.0-rc.1