feat(cdn builds): usage in browsers via a script tag (#469)

* CDN build work in progress

* rollup configuration for CDN deploy.

* umd + esm builds.

* fixes for 3 tests.

* replace ky by axios.

* eslint fixed.

* node test app.

* readme update.

* changeset.

* package.json fix after merge.

* run_scripts.sh

* small fixes.

* reduce the size of the packages.

* reduce the size of the packages.

Co-authored-by: Shalom Ogunshola <shalomogunshola@gmail.com>

.changeset/modern-roses-live.md

@@ -0,0 +1,14 @@
+---
+'@moralisweb3/core': patch
+'@moralisweb3/evm': patch
+'@moralisweb3/evm-api': patch
+'@moralisweb3/evm-connector-utils': patch
+'@moralisweb3/evm-metamask-connector': patch
+'@moralisweb3/evm-wallet-connect-connector': patch
+'@moralisweb3/wallet-connect-wrapper': patch
+'@moralisweb3/integration': patch
+'moralis': patch
+'@moralisweb3/server': patch
+---
+
+CommonJS/UMD/ESM builds.

.changeset/shaggy-apes-invite.md

@@ -0,0 +1,5 @@
+---
+'@moralisweb3/core': patch
+---
+
+Replaced HTTP client `ky` by `axios`.

.editorconfig

@@ -0,0 +1,16 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+tab_width = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+indent_style = space
+max_line_length = off
+trim_trailing_whitespace = false

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
-  ignorePatterns: ['**/__tests__/**/*', '**/lib/**/*', '**/lib.esm/**/*', '**/*.test.ts'],
+  ignorePatterns: ['**/__tests__/**/*', '**/lib/**/*', '**/lib.esm/**/*', '**/*.test.ts', '**/dist/**/*'],
   env: {
     browser: true,
     es6: true,

README.md

@@ -41,11 +41,11 @@ Current Features in this alpha build:
 - [x] Authenticate to the server via password
 - [x] Evm transfer, and executeFunction utilities
 - [x] EvmApi
+- [x] Usage in browsers via a script tag
 
 Coming up:
 
 - [ ] Connect to an Evm network with other connectors
-- [ ] Usage in browsers via a script tag
 - [ ] Support for NodeJs
 - [ ] Support for react-native
 - [ ] Solana support
@@ -89,31 +89,59 @@ Install the package via `npm`:
 npm install moralis
 ```
 
-or `yarn`
+or `yarn`:
 
 ```shell
 yarn add moralis
 ```
 
+Import Moralis:
+
+```js
+import Moralis from 'moralis';
+```
+
 #### Browser (UMD)
 
 If you want to use a pre-compiled file from unpkg:
 
-TODO
+```html
+<script src="https://unpkg.com/moralis/dist/index.umd.js"></script>
+<script src="https://unpkg.com/@moralisweb3/evm-wallet-connect-connector/dist/index.umd.js"></script>
+```
 
 #### Browser (ESM)
 
 Or if you prefer the more modern EsModule build:
 
-TODO
+```html
+<script type="importmap">
+{
+  "imports": {
+    "@moralisweb3/core": "https://unpkg.com/@moralisweb3/core/dist/index.esm.js",
+    "@moralisweb3/evm": "https://unpkg.com/@moralisweb3/evm/dist/index.esm.js",
+    "@moralisweb3/evm-api": "https://unpkg.com/@moralisweb3/evm-api/dist/index.esm.js",
+    "@moralisweb3/server": "https://unpkg.com/@moralisweb3/server/dist/index.esm.js",
+    "@moralisweb3/evm-connector-utils": "https://unpkg.com/@moralisweb3/evm-connector-utils/dist/index.esm.js",
+    "@moralisweb3/evm-metamask-connector": "https://unpkg.com/@moralisweb3/evm-metamask-connector/dist/index.esm.js",
+    "@moralisweb3/evm-wallet-connect-connector": "https://unpkg.com/@moralisweb3/evm-wallet-connect-connector/dist/index.esm.js",
+    "moralis": "https://unpkg.com/moralis/dist/index.esm.js"
+  }
+}
+</script>
+<script type="module">
+  import Moralis from 'moralis';
+  // ...
+</script>
+```
+
+⚠ Import maps are [not well supported](https://caniuse.com/import-maps) by modern browsers yet. We don't recommend using it for a production.
 
 #### 2. Initialise Moralis
 
 After your dependency is added, you simply need to initialize moralis via the `start` method:
 
 ```javascript
-import { Moralis } from 'moralis';
-
 Moralis.start({
   serverUrl: '<YOUR_SERVER_URL>',
   appId: '<YOUR_APP_ID>',

demos/test-app-all/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@morlaisweb3/test-app-all",
+  "name": "@moralisweb3/test-app-all",
   "version": "2.0.0-alpha.1",
   "private": true,
   "dependencies": {
@@ -20,6 +20,7 @@
     "start": "craco start",
     "dev": "craco start",
     "build": "craco build",
+    "build:dev": "craco build",
     "eject": "craco eject",
     "format": "prettier . '**/*.+(js|ts|json)' --write",
     "format:check": "prettier . '**/*.+(js|ts|json)' --check",
@@ -45,6 +46,7 @@
   },
   "devDependencies": {
     "@types/eslint": "^8.4.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "eslint-config-react-app": "^6.0.0"
   }
 }

demos/test-app-all/src/App.tsx

@@ -15,6 +15,8 @@ Moralis.start({
   defaultEvmApiChain: 'eth',
 });
 
+console.log('Moralis started', Moralis.Core.config.get('serverUrl'));
+
 function App() {
   return (
     <div>

demos/test-app-all/src/Core.tsx

@@ -1,4 +1,4 @@
-import { Moralis } from 'moralis';
+import Moralis from 'moralis';
 import MoralisCore from '@moralisweb3/core';
 import Server from '@moralisweb3/server';
 import EvmApi from '@moralisweb3/evm-api';

demos/test-app-all/src/Evm.tsx

@@ -1,4 +1,4 @@
-import { Moralis } from 'moralis';
+import Moralis from 'moralis';
 import { Erc20Value, EvmNative } from '@moralisweb3/core';
 import WalletConnectConnector from '@moralisweb3/evm-wallet-connect-connector';
 import MetamaskConnector from '@moralisweb3/evm-metamask-connector';