This may be obvious to everyone else, but today I found myself constructing a toy HTML/JS example and wanting to use the new hotness of ECMAScript 6 Modules.
I constructed the following page.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export default function crossPlatformSpanTextUpdate(span, text) { | |
| if ('textContent' in span) { | |
| span.textContent = text; | |
| } else { | |
| span.innerText = text; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>An E-commerce retailer</title> | |
| </head> | |
| <body> | |
| <h1> | |
| Hello <span id="greeting">Placeholder</span>!</h1> | |
| <h2> | |
| Please <a href="https://www.blogger.com/buy/12345">buy</a> this product</h2> | |
| </body> | |
| <script src="greeting.js" type="module"></script> | |
| <script type="text/javascript"> | |
| document.onready = greetCustomer(document.querySelector("#greeting")); | |
| </script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {getUserPreferredLanguage} from './language.js' | |
| import {crossPlatformSpanTextUpdate} from './cross_platform_span_update.js' | |
| export default function greetCustomer(location) { | |
| loadGreeting(location, getUserPreferredLanguage()); | |
| } | |
| function loadGreeting(span, lang) { | |
| var text = greeting(lang); | |
| crossPlatformSpanTextUpdate(span, text); | |
| } | |
| function greeting(lang) { | |
| if (lang === "es") { | |
| return "Dear dear Customer"; | |
| } | |
| return "Valued Shopper"; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| used for language detection from | |
| https://stackoverflow.com/questions/1043339/javascript-for-detecting-browser-language-preference | |
| */ | |
| export default function getUserPreferredLanguage() { | |
| return window.navigator.languages[0] || | |
| [window.navigator.language || window.navigator.userLanguage]; | |
| } |
This refused to work. I kept getting
ReferenceError: greetCustomer is not defined
Reading the docs a little more, I decided to change it. I changed my script tag to type module and removed the onready function bit. No joy.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>An E-commerce retailer</title> | |
| </head> | |
| <body> | |
| <h1> | |
| Hello <span id="greeting">Placeholder</span>!</h1> | |
| <h2> | |
| Please <a href="https://www.blogger.com/buy/12345">buy</a> this product</h2> | |
| </body> | |
| <script src="greeting.js" type="module"></script> | |
| <script type="module"> | |
| greetCustomer(document.querySelector("#greeting")); | |
| </script> | |
| </html> |
I tried importing directly, using an example I'd seen. Now I got:
SyntaxError: import not found: getUserPreferredLanguage
I finally got things working with the following
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>An E-commerce retailer</title> | |
| </head> | |
| <body> | |
| <h1> Hello <span id="greeting">Placeholder</span>!</h1> | |
| <h2> Please <a href="buy/12345">buy</a> this product</h2> | |
| </body> | |
| <script src="greeting.js" type="module"></script> | |
| <script type="module"> | |
| import greetCustomer from './greeting.js' | |
| greetCustomer(document.querySelector("#greeting")); | |
| </script> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import getUserPreferredLanguage from './language.js' | |
| import crossPlatformSpanTextUpdate from './cross_platform_span_update.js' | |
| export default function greetCustomer(location) { | |
| loadGreeting(location, getUserPreferredLanguage()); | |
| } | |
| function loadGreeting(span, lang) { | |
| var text = greeting(lang); | |
| crossPlatformSpanTextUpdate(span, text); | |
| } | |
| function greeting(lang) { | |
| if (lang === "es") { | |
| return "Dear dear Customer"; | |
| } | |
| return "Valued Shopper"; | |
| } |
