ESM support (#1297)

* rename require -> import

* esm all ts files

* fix all unit tests

* add config.ts

* workaround with React unused variable error (#1299)

* fix function order

* 0.10.1

* add esm badge

* 0.10.2

Author: huan

.eslintrc.js renamed to .eslintrc.cjs

@@ -13,3 +13,5 @@ tmp/
 
 hash.file
 jekyll/_posts/2020-12-31-osschat-a-bridge-to-the-apache-way-in-china.md
+
+.nyc_output/

.gitignore

@@ -3,6 +3,7 @@
 [![GitHub Pages CI](https://github.com/wechaty/wechaty.js.org/workflows/GitHub%20Pages%20CI/badge.svg)](https://github.com/wechaty/wechaty.js.org/actions?query=workflow%3A%22GitHub+Pages+CI%22)
 [![Powered by Wechaty](https://img.shields.io/badge/Powered%20By-Wechaty-brightgreen.svg)](https://github.com/Wechaty/wechaty)
 [![DIVIO documentation system](https://img.shields.io/badge/DIVIO-Documentation%20System-blue)](https://documentation.divio.com/)
+[![ES Modules](https://img.shields.io/badge/ES-Modules-brightgreen)](https://github.com/Chatie/tsconfig/issues/16)
 
 ![Wechaty Docusaurus](docs/images/wechaty-docusaurus.png)
 

README.md

@@ -83,7 +83,7 @@ Creates an instance of Wechaty.
 **Example** _\(The World's Shortest ChatBot Code: 6 lines of JavaScript\)_
 
 ```javascript
-const { Wechaty } = require('wechaty')
+import { Wechaty }  from 'wechaty'
 const bot = new Wechaty()
 bot.on('scan',    (qrcode, status) => console.log(['https://api.qrserver.com/v1/create-qr-code/?data=',encodeURIComponent(qrcode),'&size=220x220&margin=20',].join('')))
 bot.on('login',   user => console.log(`User ${user} logined`))
@@ -356,7 +356,7 @@ Get the global instance of Wechaty
 **Example** _\(The World's Shortest ChatBot Code: 6 lines of JavaScript\)_
 
 ```javascript
-const { Wechaty } = require('wechaty')
+import { Wechaty }  from 'wechaty'
 
 Wechaty.instance() // Global instance
 .on('scan', (url, code) => console.log(`Scan QR Code to login: ${code}\n${url}`))

docusaurus/docs/api/wechaty.md

@@ -208,9 +208,9 @@ Create a new file `busy-bot.js`. You will be writing code here.
 Let's import required packages in `busy-bot.js` and initialize the bot by providing it a name and puppet to be used.
 
 ```js
-const { Wechaty, log } = require("wechaty");
+import { Wechaty, log }  from 'wechaty';
 
-const qrTerm = require("qrcode-terminal");
+import qrTerm  from 'qrcode-terminal';
 
 const bot = new Wechaty({
   name: "busy-bot",

docusaurus/docs/examples/advanced/busy-bot.mdx

@@ -219,8 +219,8 @@ Start by creating a new file `friend-bot.js`. We will be writing the code here.
 Let's import the required packages in the JavaScript file:
 
 ```js
-const qrTerm = require("qrcode-terminal");
-const { log, Wechaty, Friendship } = require("wechaty");
+import qrTerm  from 'qrcode-terminal';
+import { log, Wechaty, Friendship }  from 'wechaty';
 ```
 
 Define some functions required for handling different events returned by the Wechaty bot:

docusaurus/docs/examples/advanced/friend-bot.mdx

@@ -214,8 +214,8 @@ Start by creating a new file `media-file-bot.js`. We will be writing the code he
 Let's import the required packages in the JavaScript file:
 
 ```js
-const qrTerm = require("qrcode-terminal");
-const { Wechaty, Message } = require("wechaty");
+import qrTerm  from 'qrcode-terminal';
+import { Wechaty, Message }  from 'wechaty';
 ```
 
 Specify some functions that you will require for handling different events returned by the Wechaty bot.

docusaurus/docs/examples/advanced/media-file-bot.mdx

@@ -218,9 +218,9 @@ Let's import required packages in `room-bot.js` file and create a `HELPER_CONTAC
 // or room create function will not work.
 const HELPER_CONTACT_NAME = "huan";
 
-const qrTerm = require("qrcode-terminal");
+import qrTerm  from 'qrcode-terminal';
 
-const { Wechaty, log } = require("wechaty");
+import { Wechaty, log }  from 'wechaty';
 ```
 Now, we will write some functions which will be required for handling different events returned by bot.
 

docusaurus/docs/examples/advanced/room-bot.mdx

@@ -215,8 +215,8 @@ Start by creating a new folder called `src`, and add a file `contact-bot.js`. We
 Let's import the required packages in the JavaScript file:
 
 ```js
-const qrTerm = require("qrcode-terminal");
-const { Contact, log, Wechaty } = require("wechaty");
+import qrTerm  from 'qrcode-terminal';
+import { Contact, log, Wechaty }  from 'wechaty';
 ```
 
 Specify some functions that you will require for handling different events returned by the Wechaty bot.

docusaurus/docs/examples/basic/contact-bot.mdx

@@ -195,8 +195,8 @@ Start by creating a new file `tuling-bot.js`. We will be writing the code here.
 Let's import the required packages in the JavaScript file:
 
 ```js
-const qrTerm = require('qrcode-terminal')
-const Tuling123 = require('tuling123-client')
+import qrTerm  from 'qrcode-terminal'
+import Tuling123  from 'tuling123-client'
 
 const {
   Wechaty,

docusaurus/docs/examples/professional/tuling123-bot.mdx

@@ -103,7 +103,7 @@ const {
   log,
 }= require('wechaty')
 
-const qrTerm = require('qrcode-terminal')
+import qrTerm  from 'qrcode-terminal'
 
 console.log(welcome)
 const bot = new Wechaty()

docusaurus/docs/howto/deploy-whatsapp.md

@@ -131,7 +131,7 @@ await bot.start()
 <TabItem value="js">
 
 ```ts
-const { Wechaty,ScanStatus,log } = require('wechaty')
+import { Wechaty,ScanStatus,log }  from 'wechaty'
 
 async function onScan (qrcode,status)
  {

docusaurus/docs/howto/event.md

@@ -36,7 +36,7 @@ await bot.say(fileBox)
 <TabItem value="js">
 
 ```js
-const { FileBox } = require('wechaty')
+import { FileBox }  from 'wechaty'
 
 const fileBox = FileBox.fromUrl('https://wechaty.js.org/img/icon.png')
 await bot.say(fileBox)
@@ -141,7 +141,7 @@ bot.on('message', onMessage)
 <TabItem value="js">
 
 ```js
-const { Message } = require('wechaty')
+import { Message }  from 'wechaty'
 
 async function onMessage (message) {
   const fileTypeList = [

docusaurus/docs/howto/file-box.md

@@ -14,7 +14,7 @@ We have a Wechaty [starter repository](https://github.com/wechaty/wechaty-gettin
 
 ```javascript
 
-const { Wechaty } = require('wechaty') // import { Wechaty } from 'wechaty'
+import { Wechaty }  from 'wechaty' // import { Wechaty } from 'wechaty'
 
 Wechaty.instance() // Global Instance
 .on('scan', (qrcode, status) => console.log(`Scan QR Code to login: ${status}\nhttps://wechaty.js.org/qrcode/${encodeURIComponent(qrcode)}`))

docusaurus/docs/howto/install.md

@@ -56,7 +56,7 @@ bot.on('message', onMessage)
 <TabItem value="js">
 
 ```js
-const { Message } = require('wechaty')
+import { Message }  from 'wechaty'
 
 async function onMessage(message) {
   if (await message.mentionSelf()) {
@@ -178,7 +178,7 @@ bot.on('message', onMessage)
 <TabItem value="js">
 
 ```js
-const { Message } = require('wechaty')
+import { Message }  from 'wechaty'
 
 async function onMessage(message) {
   if (message.self()) {

docusaurus/docs/howto/message.md

@@ -47,7 +47,7 @@ main()
 <TabItem value="js">
 
 ```js
-const { Wechaty } = require('wechaty')
+import { Wechaty }  from 'wechaty'
 
 async function main () {
   const bot = new Wechaty()

docusaurus/docs/howto/wechaty.md

@@ -1,5 +1,5 @@
 ```js
-const { Wechaty } = require('wechaty')
+import { Wechaty }  from 'wechaty'
 
 async function main () {
   const bot = new Wechaty()

docusaurus/docs/polyglot/typescript/transclusions/shortest-chatbot-js.mdx

@@ -49,7 +49,7 @@ Just scan the generated QR code with **WeChat** app, and you are ready to play w
 ```ts
 import { Wechaty }        from 'wechaty'
 import { WechatyVorpal }  from 'wechaty-vorpal'
-const hackerNews = require('vorpal-hacker-news')
+import hackerNews  from 'vorpal-hacker-news'
 
 const wechaty = new Wechaty()
 
@@ -244,7 +244,7 @@ import {
 
 import { WechatyVorpal } from 'wechaty-vorpal'
 import { generate } from 'qrcode-terminal'
-const hackerNews = require('vorpal-hacker-news')
+import hackerNews  from 'vorpal-hacker-news'
 ```
 
 Now, you have to define some functions that will help you to handle the different events returned by the Wechaty bot.

docusaurus/docs/tutorials/using-vorpal-with-wechaty.mdx

@@ -1,6 +1,8 @@
 import React from 'react'
 
-export default function FridayQrCodeImage (_props) {
+void React
+
+export default function FridayQrCodeImage (_props: any) {
   return <img
     src='/img/friday-qrcode.svg'
   />

docusaurus/src/components/friday-qrcode-image.tsx

@@ -1,7 +1,9 @@
 import React from 'react'
 import { QRCode } from 'react-qr-svg'
 
-export default function QrCodeComponent (props) {
+void React
+
+export default function QrCodeComponent (props: any) {
   const value = decodeURIComponent(props.match.params[0]) || 'https://wechaty.js.org'
 
   return <QRCode

docusaurus/src/components/qrcode.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
+import type { FunctionComponent } from 'react'
 import clsx from 'clsx'
 import Layout from '@theme/Layout'
 import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import styles from './styles.module.css'
 
-import { DocusaurusConfig } from '@docusaurus/types'
+import type { DocusaurusConfig } from '@docusaurus/types'
+
+void React
 
 // one-pager - Encapsulates the essence of a technology onto a single page.
 
@@ -44,14 +47,14 @@ const features = [
   },
 ]
 
-function Feature ({ key, imageUrl, title, description }) {
+const Feature: FunctionComponent<any> = ({ key, imageUrl, title, description }) => {
   void key
   const imgUrl = useBaseUrl(imageUrl)
   return (
-    <div className={clsx('col col--4', styles.feature)}>
+    <div className={clsx('col col--4', styles['feature'])}>
       {imgUrl && (
         <div className="text--center">
-          <img className={styles.featureImage} src={imgUrl} alt={title} />
+          <img className={styles['featureImage']} src={imgUrl} alt={title} />
         </div>
       )}
       <h3>{title}</h3>
@@ -67,15 +70,15 @@ function Home () {
     <Layout
       title={`${siteConfig.title}`}
       description="RPA SDK for Chatbot Makers.">
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <header className={clsx('hero hero--primary', styles['heroBanner'])}>
         <div className="container">
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
+          <div className={styles['buttons']}>
             <Link
               className={clsx(
                 'button button--outline button--secondary button--lg',
-                styles.getStarted,
+                styles['getStarted'],
               )}
               to={useBaseUrl('/docs/')}>
               Get Started
@@ -85,7 +88,7 @@ function Home () {
       </header>
       <main>
         {features && features.length > 0 && (
-          <section className={styles.features}>
+          <section className={styles['features']}>
             <div className="container">
               <div className="row">
                 {features.map((props, idx) => (

docusaurus/src/pages/index.tsx

@@ -1,12 +1,15 @@
 import React from 'react'
+import type { FunctionComponent } from 'react'
 import clsx from 'clsx'
 import Layout from '@theme/Layout'
 import Link from '@docusaurus/Link'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 import useBaseUrl from '@docusaurus/useBaseUrl'
 import styles from './styles.module.css'
 
-import { DocusaurusConfig } from '@docusaurus/types'
+import type { DocusaurusConfig } from '@docusaurus/types'
+
+void React
 
 const features = [
   {
@@ -42,14 +45,14 @@ const features = [
   },
 ]
 
-function Feature ({ key, imageUrl, title, description }) {
+const Feature: FunctionComponent<any> = ({ key, imageUrl, title, description }) => {
   void key
   const imgUrl = useBaseUrl(imageUrl)
   return (
-    <div className={clsx('col col--4', styles.feature)}>
+    <div className={clsx('col col--4', styles['feature'])}>
       {imgUrl && (
         <div className="text--center">
-          <img className={styles.featureImage} src={imgUrl} alt={title} />
+          <img className={styles['featureImage']} src={imgUrl} alt={title} />
         </div>
       )}
       <h3>{title}</h3>
@@ -65,15 +68,15 @@ function Home () {
     <Layout
       title='Press and Media'
       description="Read about the most recent press releases, release launches, and open source community announcements.">
-      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <header className={clsx('hero hero--primary', styles['heroBanner'])}>
         <div className="container">
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{'For inquiries, please contact us at:'}</p>
-          <div className={styles.buttons}>
+          <div className={styles['buttons']}>
             <Link
               className={clsx(
                 'button button--outline button--secondary button--lg',
-                styles.getStarted,
+                styles['getStarted'],
               )}
               to={useBaseUrl('/press')}>
               {'[email protected]'}
@@ -85,7 +88,7 @@ function Home () {
       </header>
       <main>
         {features && features.length > 0 && (
-          <section className={styles.features}>
+          <section className={styles['features']}>
             <div className="container">
               <div className="row">
                 {features.map((props, idx) => (

docusaurus/src/pages/press.tsx

@@ -21,7 +21,7 @@ Wechaty is a easy to use **ChatBot Framework** which can help you write **the wo
 The following 6 lines javascript code example will show you how does Wechaty work:
 
 ```javascript
-const { Wechaty } = require('wechaty')
+import { Wechaty }  from 'wechaty'
 
 Wechaty.instance() // Singleton
 .on('scan', (url, code) => console.log(`Scan QR Code to login: ${code}\n${url}`))

jekyll/_posts/2016-12-03-welcome-to-wechaty.md

@@ -28,7 +28,7 @@ wechaty使用node编写，所以支持几乎所有的平台，wechaty的hello-wo
 Step 1: 新建一个mybot.js，内容如下：
 
 ```javascript
-const { Wechaty } = require('wechaty')
+import { Wechaty }  from 'wechaty'
 
 Wechaty.instance() // Singleton
 .on('scan', (url, code) => console.log(`Scan QR Code to login: ${code}\n${url}`))

jekyll/_posts/2016-12-05-ghostcloud-wechaty-docker.md

@@ -107,7 +107,7 @@ Wechaty依赖的很多包都在墙外，建议使用国外的VPS，我使用的
 环境部署好以后下面6行代码，就可以成功的实现基础的bot功能：将微信机器人收到的所有消息打印出来：
 
 ```shell
-const { Wechaty } = require('wechaty')
+import { Wechaty }  from 'wechaty'
 
 Wechaty.instance()
 .on('scan', (url, code) => console.log(`Scan QR Code to login: ${code}\n${url}`))

jekyll/_posts/2016-12-10-try-to-write-wexinrobot.md

@@ -88,7 +88,7 @@ npm i --save wechaty chromedriver request
 Then create a new file named `bot.js` with this code base:
 
 ```javascript
-const { Wechaty } = require('wechaty');
+import { Wechaty }  from 'wechaty';
 
 function startBot() {
     const bot = Wechaty.instance({ profile: 'chatieme' });
@@ -104,7 +104,7 @@ startBot();
 Since we'd like to send the message to Rails app, we have to build a JSON object:
 
 ```javascript
-const { Wechaty } = require('wechaty');
+import { Wechaty }  from 'wechaty';
 
 function startBot() {
     const bot = Wechaty.instance({ profile: 'chatieme' });
@@ -338,8 +338,8 @@ We can test the API provided by Rails app using `curl`:
 We could take advantages of the library [request](https://github.com/request/request), posting the data to Rails:
 
 ```javascript
-const { Wechaty } = require('wechaty');
-const request = require('request');
+import { Wechaty }  from 'wechaty';
+import request  from 'request';
 
 function startBot() {
     const bot = Wechaty.instance({ profile: 'chatieme' });