This article contains my most used workflow when working on the TypeScript repo with VSCode.

This is a memo to me on how to implement the down level compiling of
ECMAScript proposal Do Expression and
Async do Expression in
TypeScript.

Need to be reviewed to make sure I’m not missing anything.

Report error

“It would be nice if my library can work across different JavaScript environments…” you thought.

Here is a guideline about how to achieve this goal. I’ll list the most general principles first then explain them in detail and finally give you a recommended pattern to develop this kind of library.

To make the discussion easier, we will call the ability to run on any ECMAScript environment as having zero host dependency.

When we say run on any ECMAScript environment, we mean: users of the library can run this library on a modern ECMAScript environment (at least ES2015) that supports the ECMAScript module with proper setups (e.g. provide IO functions) without modifying the library code.

Restrictions:

1. Do not use anything that is not defined in the ECMAScript specification directly. (e.g. Web or Node APIs).

2. Do not use module specifier ("./file.js" in import x from "./file.js") to refer to any module.

3. Be aware of language features (eval, Date.now(), import(), Math.random(), etc…) are disabled in some special environments.

If you’re strictly following the rules described above, you’ll find that you’re almost not able to develop anything. But this article is going to introduce a comfortable paradigm for developing libraries with zero host dependency.

The generator and the generated type definitions are available at GitHub.

On Feb 2020, @huan contribute his type definition to DefinitelyTyped @types/matrix-js-sdk, you can compare and choose one.

Motivation

Matrix is a decentralized IM protocol, the matrix-js-sdk is the official SDK for this protocol. Back time to Nov 2019, I need to integrate this SDK into my working project.

As a TypeScript fan, work with a huge library with totally no typing is a pain so I was going to look for @types/matrix-js-sdk. Unfortunately, there is none. I also looked for the GitHub issues and found [TypeScript] Typing Support. @huan supplied a hand-written type definition, I tried it in our project, and found too few APIs is typed, and somehow becomes useless.

The matrix-js-sdk is well-documented with JSDoc, and in Typescript 3.7 there is a new feature that allows developers to generate declaration file for JS projects. Therefore, I decided to generate one.

Demo: Loader with ESModule example

In a frontend group, there was a discussion about how to use a template (like a Vue template or efml template) without a bundler directly.

1

import markdown from "./markdown.md";

Unfortunately, there is no proposal such as a custom import handler.
(The import-map can’t load other types than JS)

TLDR: import.meta.url is the core part.

TLDR:

It is pretty easy if you’re using manifest v2 🎇 after 2021/05/18 (Firefox 89 release).

For background page, popup, ..etc:

1

<script type="module" src="./background.js"></script>

For content scripts:

1
2

import(chrome.runtime.getURL('...'))
import(browser.runtime.getURL('...'))

Demo: hybird-angular-react-custom-element

There’s a lot of discussion about all of those front-end libraries/frameworks. I noticed that there is a common argument saying “React is just a view library” and “Angular is a full-function framework”.

Angular is considered a framework because it offers strong opinions as to how your application should be structured. It also has much more functionality “out-of-the-box”. You don’t need to decide which routing libraries to use or other such considerations – you can just start coding.

– React vs. Angular: The Complete Comparison

They’re referenceable. It raises an interesting question regarding whether we use React just as a view library to handle queries regarding UI, and use Angular to structure all others?