import @textile: Textile Javascript gets ES Module support

javascript • Dec 22, 2020

Today we are excited to announce full support for ES modules across all Textile JS libraries. We have always been interested in supporting ES Modules but were focused on CommonJS flows and building modules via transpilers such as Webpack or via framework tooling like React. Now, our Typescript sources are compiled into CommonJS and ES modules, so those building for NodeJS and via transpilers are still covered... but folks can now also consume all active @textile/* libs directly as ES Modules.

ES Modules is the ECMAScript standard for working with Javascript modules. ECMAScript modules should work universally across all JavaScript environments. Support in major modern browsers is pretty good, and as of May 2020, Node.js v12.17.0 has also shipped with support for ECMAScript modules (without a flag). So what does that mean? It means you really can "write once, run everywhere"!

We're in the process of updating examples, creating new notebooks and demos, and generally kicking the tires on our shiny new modules. If you have a project or idea that you want to start testing, jump in and give it a go. We've already published the latest updates to NPMJS, and you can pull them in dynamically via your friendly local neighborhood CDN (we recommend UNPKG).

Like @textileio, but with more ES Modules! https://t.co/ypyOIuyCiq Also it actually IS @textileio because all our JS now comes with ES Module support 😉. Thanks to @unpkg for amazing modules support!
— Textile (@textileio) December 21, 2020

Tweet tweet!

Getting started with ES Modules is pretty easy. If you're running a recent version of NodeJS, then you're probably all set to go. You can npm i as per usual, and just start importing and exporting right away. If you want to develop for the browser, all you need to get started is some HTML, a little Javascript, and the ability to copy-and-paste some example code! Speaking of which, here's a little snippet you can try to create a random Identity for use with Threads, Buckets, or any other Textile remote libraries.

<!DOCTYPE html>
 <html>

 <head>
   <meta charset="utf-8" />
   <title>Textile ES Modules</title>
 </head>

 <body>
   <script type="module">
     // Import any/all @textile libs dynamically
     import { PrivateKey } from "https://unpkg.com/@textile/hub?module";

     // Create a random one
     const rando = PrivateKey.fromRandom()

     // Display it in the dom
     const h1 = document.createElement('h1');
     h1.textContent = rando.public.toString();
     document.body.appendChild(h1);
   </script>
 </body>

 </html>

That's it? Yes, that's it!

No transpiler required. Just plain ol' simple HTML and Javascript. Learn more about ES Modules and their benefits, like lazy loading, better code reuse, and so much more. Or better yet, read a cartoon version (where our header image comes from)! The future of Javascript is here, and ES Modules are it! Enjoy.