t2ym/live-localizer

[3.0] Support Polymer 3.0 and lit-html

Closed this issue · 0 comments

t2ym commented

[3.0] Support Polymer 3.0

Status

Install

npm install live-localizer@next

Import

  <!-- required for live-localizer -->
  <script src="/node_modules/web-animations-js/web-animations-next.min.js"></script>
  <script type="module" src="live-localizer/live-localizer-lazy.js"></script>

Apply

<body>
  ...
  <live-localizer>
    <!--
      Firebase Cloud Storage configuration with the example parameters for Live Localizer demo app:
      For each target app, a dedicated Firebase project has to be configured.
    -->
    <live-localizer-firebase-storage id="firebase-storage" class="storage cloud"
      auth-provider="google"
      auth-domain="live-localizer-demo.firebaseapp.com"
      database-url="https://live-localizer-demo.firebaseio.com"
      api-key="AIzaSyCjrlPhl0cLSZVRsDvuajq16vkerhcu_UM">
    </live-localizer-firebase-storage>
  </live-localizer>
</body>

Demo

  • polyserve --npm --module-resolution node
    • /components/live-localizer/demo/src - raw sources
    • /components/live-localizer/demo/preprocess - preprocessed
  • npm run demo - I18N automation
  • npm run fetch-xliff, npm run watch-xliff, npm run unwatch-xliff
    • Parameters of these scripts have to be customized for the target apps.

Test

  • gulp patch-polyserve-lastModified-true
    • polyserve has to be patched to provide last-modified header
    • Tests on browsers
      • /components/live-localizer/test/ - For Chrome for now
    • Automated
      • wct --npm --module-resolution node --skip-plugin sauce --plugin local
        • Be sure to use wct depending on the patched polyserve

Tasks

  • Minimal Conversion
    • Web Component Modules
      • draggable-behavior.js
      • firebase-storage-icons.js
      • invalidate-polyfill.js
      • live-localizer-browser-storage.js
      • live-localizer-dialog.js
      • live-localizer-fab.js
      • live-localizer-firebase-storage.js
      • live-localizer-lazy.js
      • live-localizer-list-view.js
      • live-localizer-local-file-storage.js
      • live-localizer-locale-icon-view.js
      • live-localizer-locale-icon.js
      • live-localizer-main.js
      • live-localizer-model.js
      • live-localizer-panel.js
      • live-localizer-storage-icon.js
      • live-localizer-storage-view.js
      • live-localizer.js
    • TBD
    • Demo
      • Components
        • Convert to .js modules
          • In Polymer 1.x legacy format
          • TBD
        • Remove *.html modules
        • Hybrid App
          • Add lit-html elements
      • demo/gulpfile.js
        • I18N automation
          • npm run demo
            • Support lit-html/Polymer3 hybrid apps
        • Firebase watcher
          • npm run fetch-xliff - Fetch XLIFF from Firebase
          • npm run watch-xliff - Watch Firebase for XLIFF updates continuously and trigger fetch-xliff
          • npm run unwatch-xliff - Gracefully stop npm run watch-xliff
      • TBD
  • Tools
    • Local Web Servers for automatic loading of XLIFF files
      • TBD
  • Tests
    • Browsers
      • Chrome 71
      • TBD
  • Documentation
    • TBD