![Page 1: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/1.jpg)
SYD
![Page 2: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/2.jpg)
PolymerSYD
Sam Thorogood
@samthor
ES6 Modules ...& Polymer
![Page 3: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/3.jpg)
PolymerSYD
ES Modules
![Page 4: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/4.jpg)
PolymerSYD
ES ModulesJavaScript Modules
![Page 5: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/5.jpg)
PolymerSYD
ES ModulesJavaScript ModulesECMAScript Modules
![Page 6: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/6.jpg)
PolymerSYD
ES ModulesJavaScript ModulesECMAScript Modules
commonJS modules / require()
![Page 7: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/7.jpg)
<!-- code.js will run as a module --> <script type="module" src="code.js"></script>
<!-- an inline script tag as as module --> <script type="module"> console.info(`It's module time!`); </script>
PolymerSYD
![Page 8: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/8.jpg)
type="module"
type="module"
<!-- code.js will run as a module --> <script type="module" src="code.js"></script>
<!-- an inline script tag as as module --> <script type="module"> console.info(`It's module time!`); </script>
PolymerSYD
![Page 9: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/9.jpg)
<!-- index.html --> <script type="module" src="code.js"></script>
// code.js import {answer} from './question.js'; console.info(`It's ${answer()} time!`);
// question.js export function answer() { return 'module'; }
PolymerSYD
![Page 10: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/10.jpg)
<!-- index.html --> <script type="module" src="code.js"></script>
// code.js import {answer} from './question.js'; console.info(`It's ${answer()} time!`);
// question.js export function answer() { return 'module'; }
PolymerSYD
both importedas modules
![Page 11: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/11.jpg)
🛠💕
🏴 ~May 2018
![Page 12: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/12.jpg)
🛠💕
🏴 ~May 2018
![Page 13: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/13.jpg)
‣ JS run with <script type="module">
‣ Supported* in all evergreen browsers
‣ Gives your code superpowers—to import or export
What is a module? The spec definition_
PolymerSYD
![Page 14: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/14.jpg)
‣ Always in strict mode
‣ Can't pollute global scope
‣ Implicit defer
‣ Modules are singletons
PolymerSYD
JS in Modules Righting some wrongs_
![Page 15: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/15.jpg)
'use strict'; (function() {
}).call(undefined);
/* module code goes here */
PolymerSYD
![Page 16: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/16.jpg)
'use strict'; (function() {
}).call(undefined);
with (foo) {} // syntax error, 'with' considered harmful q = 123; // error, variable not declared
var x = 123; // ok console.info(window.x); // will log undefined console.info(this); // will log undefined buttonId.click(); // still works on <button id="buttonId">...
PolymerSYD
![Page 17: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/17.jpg)
PolymerSYD
Trade restrictions $🚢
![Page 18: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/18.jpg)
‣ Exported values can be variable
‣ Imports and exports cannot be conditional
Shipping code Or: how to run an import/export company_
PolymerSYD
export var foo = callMethod();
if (true) { export var bar = ...; }
✅
❌
![Page 19: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/19.jpg)
‣ The top-level import cannot be dynamic
‣ import() to the rescue—in Chrome/Safari
Dynamic imports Responding to change_
PolymerSYD
import './' + path + '.js';
import(`./${path}.js`).then(...)😕
❌
![Page 20: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/20.jpg)
‣ import must target a relative or absolute path
Relative imports Qualify yo paths_
PolymerSYD
import 'foo/bar.js';❌
![Page 21: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/21.jpg)
‣ 🔎 Google it
The actual syntax Is actually boring and well documented_
PolymerSYD
![Page 22: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/22.jpg)
‣ Module spec is simple
‣ Easy to work with (cf. Rollup)
‣ Static analysis possible
PolymerSYD
Takeaways The relevant CS bits_
![Page 23: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/23.jpg)
‣ Older browsers ignore type="module"
‣ Use the nomodule attribute to load transpiled code on legacy browsers—ignored by modern browsers*
Pre-modules browsers What's the catch?_
PolymerSYD
![Page 24: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/24.jpg)
‣ Older browsers ignore type="module"
‣ Use the nomodule attribute to load transpiled code on legacy browsers—ignored by modern browsers*
Pre-modules browsers What's the catch?_
PolymerSYD
<script nomodule src="old.js">
![Page 25: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/25.jpg)
<!-- for ES module browsers --> <script src="new-hotness.js" type="module"></script>
<!-- for older browsers --> <script src="old-built-coldness.js" defer nomodule></script>
PolymerSYD
<!-- Caveat: Safari 10.1 (<1.5% global) shipped without nomodule support! Fix: https://tinyurl.com/safari-nomodule -->
![Page 26: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/26.jpg)
‣ ES modules are a🌊 high water mark
‣ Every browser supporting modules supports...
PolymerSYD
The Benefit Why ship modules at all?_
![Page 27: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/27.jpg)
![Page 28: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/28.jpg)
![Page 29: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/29.jpg)
🌊+👍
![Page 30: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/30.jpg)
‣ Avoid anti-patterns, e.g.loosely-coupled code
‣ We want to #UseThePlatform
PolymerSYD
And the obvious... Stop doing this_
<script src="dependency.js"></script> <script src="other.js"></script> <script src="app_code.js"></script> <!-- forever -->
![Page 31: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/31.jpg)
PolymerSYD
Build modern + Compile for legacy
![Page 32: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/32.jpg)
➕
![Page 33: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/33.jpg)
const babel = require('rollup-plugin-babel');
gulp.task('rollup', function() { const options = {plugins: [babel()]}; return gulp.src(['entrypoint.js']) .pipe(rollup(options, {format: 'iife'})) .pipe(gulp.dest('./dist')); });
PolymerSYD
![Page 34: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/34.jpg)
const babel = require('rollup-plugin-babel')
gulp.task('rollup', function() { const options = {plugins: [babel()]}; return gulp.src(['entrypoint.js']) .pipe(rollup(options, {format: 'iife'})) .pipe(gulp.dest('./dist')); });
const babel = require('rollup-plugin-babel');
babel()
format: 'iife'
babel plugin
IIFE out
PolymerSYD
![Page 35: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/35.jpg)
Module splitting The case study_Polymer 3.0 ES6 Modules Ahoy_
![Page 36: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/36.jpg)
‣ ES6 Modules
‣ Published on NPM—not bower (...but use Yarn?)
‣ Mechanical rewrite of 2.0—no material differences
Big changes Just a few_
PolymerSYD
![Page 37: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/37.jpg)
<!-- Polymer 2.0 --> <dom-module id="paper-icon-button"> <template strip-whitespace> <style>...</style> <div><!-- button stuff --></div> </template> <script> Polymer({ /* as expected */ }); </script> </dom-module>
PolymerSYD
![Page 38: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/38.jpg)
import '../polymer/polymer.js'; import '../iron-icon/iron-icon.js'; import { Polymer } from '../polymer/lib/legacy/polymer-fn.js'; const $_documentContainer = document.createElement('div'); $_documentContainer.setAttribute('style', 'display: none;');
$_documentContainer.innerHTML = `<dom-module id="paper-icon-button"> <template strip-whitespace=""> <style>...</style> <div><!-- button stuff --></div> </template> </dom-module>`;
Polymer({ /* as expected */ });
PolymerSYD
![Page 39: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/39.jpg)
import '../polymer/polymer.js'; import '../iron-icon/iron-icon.js'; import { Polymer } from '../polymer/lib/legacy/polymer-fn.js'; const $_documentContainer = document.createElement('div'); $_documentContainer.setAttribute('style', 'display: none;');
$_documentContainer.innerHTML = `<dom-module id="paper-icon-button"> <template strip-whitespace=""> <style>...</style> <div><!-- button stuff --></div> </template> </dom-module>`;
Polymer({ /* as expected */ });
PolymerSYD
Polymer
<dom-module id="paper-icon-button"> <template strip-whitespace=""> <style>...</style> <div><!-- button stuff --></div> </template> </dom-module>
Polymer({ /* as expected */ });
![Page 40: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/40.jpg)
‣ class-based elements...although superclass needs be imported
‣ lit-html
Not part of 3.0 But interesting anyway_
PolymerSYD
![Page 41: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/41.jpg)
class MyAppElement extends PolymerElement { static get template() { return html`<div>I'm a template</div> <div>[[withBindings]]</div> <button on-click="clickHandler">Click me!</button>` } ... } customElements.define('my-app-element', MyAppElement);
PolymerSYD
![Page 42: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/42.jpg)
class MyAppElement extends PolymerElement { static get template() { return html`<div>I'm a template</div> <div>[[withBindings]]</div> <button on-click="clickHandler">Click me!</button>` } ... } customElements.define('my-app-element', MyAppElement);
PolymerSYD
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
![Page 43: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/43.jpg)
‣ Polymer 1.0—createShadowRoot is going away in favour of attachShadow
‣ HTML imports will slowly be killed off
Deprecated features Or long-term challenging_
PolymerSYD
![Page 44: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/44.jpg)
‣ Polymer 1.0—createShadowRoot is going away in favour of attachShadow
‣ HTML imports will slowly be killed off
Deprecated features Or long-term challenging_
PolymerSYD
![Page 45: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/45.jpg)
PolymerSYD
![Page 46: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/46.jpg)
‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string'
‣ Nor importing non-JS
PolymerSYD
Bare specifiers Forgot about those?_
import {thing} from 'something';
import {stuff} from 'un/qualified.js';
import html from './htmlfile.html';
![Page 47: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/47.jpg)
‣ Rollup and other tools will do the sensible thing—import bare specifiers from node_modules and switch modes
‣ ...but this is unlikely to come to browsers anytime soon
Build tools help us Undefined behaviour => party time_
PolymerSYD
import leftPad from 'left-pad';
![Page 48: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/48.jpg)
‣ As of March 2018, Polymer takes this approach
‣ Polymer's tooling will support this out-of-the-box...but tooling is required
Polymer 3.0 uses bare specifiers The Pragmatic Choice®_
PolymerSYD
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
![Page 49: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/49.jpg)
‣ As of March 2018, Polymer takes this approach
‣ Polymer's tooling will support this out-of-the-box...but tooling is required
Polymer 3.0 uses bare specifiers The Pragmatic Choice®_
PolymerSYD
import {PolymerElement} from '@polymer/polymer/polymer-element.js';
![Page 50: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/50.jpg)
‣ You can run—yarn add @polymer/polymer@^3.0.0-pre.11
‣ But this is hilariously before the bare specifiers change
Try it out today I just did!_
PolymerSYD
![Page 51: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/51.jpg)
import {Element as PolymerElement} from "./node_modules/@polymer/polymer/polymer-element.js"
class MyAppElement extends PolymerElement { static get template() { return html`<div>I'm a template</div> <div>[[withBindings]]</div> <button on-click="clickHandler">Click me!</button>` } ... } customElements.define('my-app-element', MyAppElement);
PolymerSYD
![Page 52: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/52.jpg)
PolymerSYD
![Page 53: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/53.jpg)
PolymerSYD
‣ Jake Archibaldhttps://jakearchibald.com/2017/es-modules-in-browsers/
‣ Sam Thorogood https://github.com/samthor/srcgraphhttps://tinyurl.com/samthor-modules
Further reading Take advice home with you_
![Page 54: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/54.jpg)
Thank You!
PolymerSYD
Sam Thorogood
@samthor@samthor
![Page 55: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/55.jpg)
PolymerSYD
‣ Polymer Summit photo https://twitter.com/JorgeCasar/status/899915056535785472
‣ Other photos from Pixabay
‣ Emoji by Emojityper
Attribution Legalese_
![Page 56: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/56.jpg)
PolymerSYD
Appendix: build modern ... even with modules
![Page 57: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/57.jpg)
‣ Use Rollup to combine all ES modules into a single file
‣ Don't transpile for modern browsers...they get modern, smaller JS—but with new features! ...tree shaking and fewer requests
Idea: Ship Rolled Up For simple apps_
PolymerSYD
![Page 58: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/58.jpg)
‣ Use Rollup to combine all ES modules into a single file
‣ Don't transpile for modern browsers...they get modern, smaller JS—but with new features! ...tree shaking and fewer requests
Idea: Ship Rolled Up For simple apps_
PolymerSYD
rollup -f es
![Page 59: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/59.jpg)
PolymerSYD
Appendix: Module nuances
![Page 60: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/60.jpg)
‣ Modules don't have to export anything ... but may have side-effects, such as exporting on window
‣ Fits traditional polyfills or minified, single-file JS libraries
Export vs side-effects Both options_
PolymerSYD
![Page 61: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/61.jpg)
// base64.min.js window.base64lib = {encode: function() { ... }, decode: ... };
PolymerSYD
![Page 62: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/62.jpg)
// base64.min.js window.base64lib = {encode: function() { ... }, decode: ... };
// main.js import './node_modules/base64/base64.min.js'; console.info(base64lib.encode('hello!'));
PolymerSYD
![Page 63: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/63.jpg)
‣ Modules are implicit defer...might import lots of deps...script blocking was a mistake™
‣ You can add async to run before page load
Modules are deferred No page-blocking_
PolymerSYD
![Page 64: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/64.jpg)
‣ Modules are singletons and are only run once...no matter how they are imported—directly or via import
Modules only import once Even if popular_
PolymerSYD
![Page 65: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/65.jpg)
‣ Modules are singletons and are only run once...no matter how they are imported—directly or via import
Modules only import once Even if popular_
<script src="a.js" type="module"></script> <script type="module"> import './a.js'; </script>
PolymerSYD
![Page 66: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/66.jpg)
// call method at top excitingMethod();
// import can happen later import {excitingMethod} from './excitingFile.js';
‣ Imports are hoisted...like a top-level function
‣ Executed in graph order
Hoisted imports Going all the way up_
PolymerSYD
![Page 67: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/67.jpg)
// call method at top excitingMethod();
// import can happen later import {excitingMethod} from './excitingFile.js';
‣ Imports are hoisted...like a top-level function
‣ Executed in graph order
Hoisted imports Going all the way up_
// effectively at top of file import {excitingMethod} from './excitingFile.js';
// call method at top excitingMethod();
PolymerSYD
![Page 68: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/68.jpg)
// new emoji polyfill window.emojiPolyfill = {...};‣ Imports are hoisted
...like a top-level function
‣ Executed in graph order
Modules, hoisted Going all the way up_
// we need it for emojineer import './node_modules/🤔/emoji.js';
PolymerSYD
![Page 69: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/69.jpg)
‣ Imports are hoisted...like a top-level function
‣ Executed in graph order
Modules, hoisted Going all the way up_
// we need it for emojineer import './node_modules/🤔/emoji.js';
// include as an import import './emojiPolyfill.js';
PolymerSYD
![Page 70: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/70.jpg)
‣ Modules can import each other safely...but some exports aren't available until completion
‣ Rule of thumb: don't do any work in top-level of module
Circular dependencies are allowed* *with some caveats_
PolymerSYD
![Page 71: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/71.jpg)
// vehicle.js
let id = 0; export class Vehicle { constructor() { this.id = ++id; } }
PolymerSYD
![Page 72: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/72.jpg)
// vehicle.js
let id = 0; export class Vehicle { constructor() { this.id = ++id; } }
// car.js import {Vehicle} from './vehicle.js';
export class Car extends Vehicle { ... }
PolymerSYD
![Page 73: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/73.jpg)
// vehicle.js import {Car} from './car.js';
let id = 0; export class Vehicle { constructor() { this.id = ++id; } static build() { return new Car(...); } }
// vehicle.js import {Car} from './car.js';
static build() { return new Car(...); }
// car.js import {Vehicle} from './vehicle.js';
export class Car extends Vehicle { ... }
export class Car extends Vehicle
PolymerSYD
![Page 74: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/74.jpg)
// vehicle.js import {Car} from './car.js';
let id = 0; export class Vehicle { constructor() { this.id = ++id; } static build() { return new Car(...); } }
// vehicle.js import {Car} from './car.js';
static build() { return new Car(...); }
// car.js import {Vehicle} from './vehicle.js';
export class Car extends Vehicle { ... }
export class Car extends Vehicle
PolymerSYD
![Page 75: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/75.jpg)
// vehicle.js import {Car} from './car.js';
let id = 0; export class Vehicle { constructor() { this.id = ++id; } static build() { return new Car(...); } }
// car.js import {Vehicle} from './vehicle.js';
export class Car extends Vehicle { ... }
let id = 0;
this.id = ++id;
PolymerSYD
![Page 76: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/76.jpg)
// vehicle.js import {Car} from './car.js';
let id = 0; export class Vehicle { constructor() { this.id = ++id; } static build() { return new Car(...); } }
// car.js import {Vehicle} from './vehicle.js';
export class Car extends Vehicle { ... }
let id = 0;
this.id = ++id; let testCar = new Car();
PolymerSYD
![Page 77: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/77.jpg)
export class Vehicle { // id not in scope }
// Vehicle gets hoisted
export class Vehicle {
}
// vehicle.js import {Car} from './car.js';
let id = 0;
// car.js import {Vehicle} from './vehicle.js';
export class Car extends Vehicle { ... }
let testCar = new Car();
PolymerSYD
![Page 78: ES6 Modules - PolymerSYD · ‣ ES6 modules spec doesn't define this behaviour— import from 'raw_string' ‣ Nor importing non-JS PolymerSYD Bare specifiers Forgot about those?_](https://reader033.vdocument.in/reader033/viewer/2022052104/603f94960936043c0758114b/html5/thumbnails/78.jpg)
export class Vehicle { // id not in scope }
// Vehicle gets hoisted
export class Vehicle {
}
// vehicle.js import {Car} from './car.js';
let id = 0;
// car.js import {Vehicle} from './vehicle.js';
export class Car extends Vehicle { ... }
let testCar = new Car();
PolymerSYD