GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bundling pages and details for ESbuild and Webpack

Browse Source
This commit is contained in:
Lorexia
2023-10-02 17:29:21 +02:00
parent 4aa7d08e65
commit 91f1552a88
11 changed files with 186 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sdk/typescript/docs/pages/_meta.json
+2 -2
View File
@@ -3,9 +3,9 @@
"overview": "SDK overview",
"installation": "Installation",
"start": "Getting started",
"guides": "Examples",
"examples": "Step-by-step examples",
"playground": "Live Playground",
"bundling": "Bundling",
"contact": {
"title": "Contact ↗",
sdk/typescript/docs/pages/bundling.mdx
-134
View File
@@ -1,134 +0,0 @@
# Troubleshooting Bundling
You might need some help bundling packages from the Nym Typescript SDK into your package.
Here are some things that could go wrong:
## WebAssembly (WASM) and web worker not included in output bundle
### Webpack
You might need to use the CopyPlugin by adding this to your Webpack config:
```js
const CopyPlugin = require('copy-webpack-plugin');
...
module.exports = {
...
plugins: [
...
new CopyPlugin({
patterns: [
{
from: path.resolve(path.dirname(require.resolve('@nymproject/mix-fetch/package.json')), '*.wasm'),
to: '[name][ext]',
},
{
from: path.resolve(path.dirname(require.resolve('@nymproject/mix-fetch/package.json')), '*worker*.js'),
to: '[name][ext]',
},
],
}),
],
}
```
How does this work? The statement `require.resolve('@nymproject/mix-fetch/package.json')` finds the disk location of
the Nym SDK package, and resolve the directory name is `path.dirname`, the add the `*.wasm` glob to the search pattern
list. Use `[name][ext]` to preserve the output filename, because the package expects the filename to stay the same.
## ESM not supported
If your bundler does not support ECMAScript Modules (ESM) we provide CommonJS packages for most parts of the SDK.
For those that don't have ESM versions, you will need to use a tool like [Babel](https://babeljs.io/) to convert
ESM to CommonJS.
## CSP prevents loading
If you are using a `*-full-fat` package, or if you inline WASM or web workers, you may not be able to load them if the
[CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) prevents WASM from being instantiated from a string.
You'll have to experiment with either adjusting the CSP or use another variant that is unbundled.
## Webpack > 5 ESM
You´ll need the following rule in your `webpack.config.js` above version 5:
```json
{
test: /\.(m?js)$/,
resolve: {
fullySpecified: false
}
}
```
### Nextjs
NextJS doesn´t allow you access to the webpack config without ejecting, which you override as follows:
```bash
npx create-react-app nymapp --template typescript
cd nymapp
```
#### Install contract-clients dependencies
```bash
npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing
```
#### polyfilling
Copy the following to your terminal and run:
```bash
npm install react-app-rewired
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
cat <<EOF > config-overrides.js
const webpack = require('webpack');
const path = require('path')
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
config.module.rules = (config.module.rules || []).concat([
{
test: /\.(m?js)$/,
resolve: {
fullySpecified: false
}
}
])
return config;
}
EOF
```
#### Edit the `package.json` file as follows:
```json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
```
sdk/typescript/docs/pages/bundling/_meta.json
+6
View File
@@ -0,0 +1,6 @@
{
"bundling": "General troubleshooting",
"esbuild": "ESbuild",
"webpack": "Webpack"
}
sdk/typescript/docs/pages/bundling/bundling.mdx
+54
View File
@@ -0,0 +1,54 @@
# Troubleshooting Bundling
You might need some help bundling packages from the Nym Typescript SDK into your package.
Here are some things that could go wrong:
## WebAssembly (WASM) and web worker not included in output bundle
### Webpack
You might need to use the CopyPlugin by adding this to your Webpack config:
```js
const CopyPlugin = require('copy-webpack-plugin');
...
module.exports = {
...
plugins: [
...
new CopyPlugin({
patterns: [
{
from: path.resolve(path.dirname(require.resolve('@nymproject/mix-fetch/package.json')), '*.wasm'),
to: '[name][ext]',
},
{
from: path.resolve(path.dirname(require.resolve('@nymproject/mix-fetch/package.json')), '*worker*.js'),
to: '[name][ext]',
},
],
}),
],
}
```
How does this work? The statement `require.resolve('@nymproject/mix-fetch/package.json')` finds the disk location of
the Nym SDK package, and resolve the directory name is `path.dirname`, the add the `*.wasm` glob to the search pattern
list. Use `[name][ext]` to preserve the output filename, because the package expects the filename to stay the same.
## ESM not supported
If your bundler does not support ECMAScript Modules (ESM) we provide CommonJS packages for most parts of the SDK.
For those that don't have ESM versions, you will need to use a tool like [Babel](https://babeljs.io/) to convert
ESM to CommonJS.
## CSP prevents loading
If you are using a `*-full-fat` package, or if you inline WASM or web workers, you may not be able to load them if the
[CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) prevents WASM from being instantiated from a string.
You'll have to experiment with either adjusting the CSP or use another variant that is unbundled.
sdk/typescript/docs/pages/bundling/esbuild.mdx
+25
View File
@@ -0,0 +1,25 @@
# Troubleshooting bundling with ESbuild
If you've been following the steps outlined in the Examples section, your development environment should be configured as follows:
#### Environment Setup
Begin by creating a directory and configuring your application environment:
Create your directory and set-up your app environment:
```bash
npm create vite@latest
```
During the environment setup, choose React and subsequently opt for Typescript if you want your application to function smoothly following this tutorial. Next, navigate to your application directory and run the following commands:
```bash
cd < YOUR_APP >
npm i
npm run dev
```
##### Installation
Install the required package:
```bash
npm install @nymproject/< PACKAGE_NAME >
```
By implementing the provided code for the various components in the step-by-step examples section, you should be able to set-up and run your application without encountering any bundling challenges!
sdk/typescript/docs/pages/bundling/webpack.mdx
+82
View File
@@ -0,0 +1,82 @@
# Troubleshooting bundling with Webpack
## Webpack > 5 ESM
You´ll need the following rule in your `webpack.config.js` above version 5:
```json
{
test: /\.(m?js)$/,
resolve: {
fullySpecified: false
}
}
```
### Create-react-app
Create-react-app doesn´t allow you access to the Webpack config without ejecting, which you override as follows:
```bash
npx create-react-app nymapp --template typescript
cd nymapp
```
#### Install contract-clients dependencies
```bash
npm install @nymproject/contract-clients @cosmjs/cosmwasm-stargate @cosmjs/proto-signing
```
#### Polyfilling
Copy the following to your terminal and run:
```bash
npm install react-app-rewired
npm install --save-dev crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
cat <<EOF > config-overrides.js
const webpack = require('webpack');
const path = require('path')
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
config.module.rules = (config.module.rules || []).concat([
{
test: /\.(m?js)$/,
resolve: {
fullySpecified: false
}
}
])
return config;
}
EOF
```
#### Edit the `package.json` file as follows:
```json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
```
sdk/typescript/docs/pages/guides/_meta.json → sdk/typescript/docs/pages/examples/_meta.json
View File
sdk/typescript/docs/pages/guides/cosmos-kit.mdx → sdk/typescript/docs/pages/examples/cosmos-kit.mdx
+4 -4
View File
@@ -7,14 +7,14 @@ Nym, these include:
- using the [Ledger hardware wallet](https://docs.cosmoskit.com/integrating-wallets/ledger) from the browser
- any wallet that supports [Wallet Connect v2.0](https://docs.cosmoskit.com/integrating-wallets/adding-new-wallets)
##### Set-up your environment
##### Environment Setup
Begin by creating a directory and configuring your application environment:
Create your directory and set-up your app environment:
```bash
npm create vite@latest
```
Select `React` and later `Typescript` as you go to your environment set-up if you want your app to work off the bat following this tutorial.
Then,
During the environment setup, choose React and subsequently opt for Typescript if you want your application to function smoothly following this tutorial. Next, navigate to your application directory and run the following commands:
```bash
cd < YOUR_APP >
npm i
sdk/typescript/docs/pages/guides/mix-fetch.mdx → sdk/typescript/docs/pages/examples/mix-fetch.mdx
+4 -4
View File
@@ -55,14 +55,14 @@ const mixFetchOptions: SetupMixFetchOps = {
};
```
##### Set-up your environment
##### Environment Setup
Begin by creating a directory and configuring your application environment:
Create your directory and set-up your app environment:
```bash
npm create vite@latest
```
Select `React` and later `Typescript` as you go to your environment set-up if you want your app to work off the bat following this tutorial.
Then,
During the environment setup, choose React and subsequently opt for Typescript if you want your application to function smoothly following this tutorial. Next, navigate to your application directory and run the following commands:
```bash
cd < YOUR_APP >
npm i
sdk/typescript/docs/pages/guides/mixnet.mdx → sdk/typescript/docs/pages/examples/mixnet.mdx
+4 -4
View File
@@ -10,14 +10,14 @@ Replying can be done in two ways:
- reveal the sender's address to the recipient (as part of the payload)
- use a SURB (single use reply block) that allows the recipient to reply to the sender without compromising the identity of either party
##### Set-up your environment
##### Environment Setup
Begin by creating a directory and configuring your application environment:
Create your directory and set-up your app environment:
```bash
npm create vite@latest
```
Select `React` and later `Typescript` as you go to your environment set-up if you want your app to work off the bat following this tutorial.
Then,
During the environment setup, choose React and subsequently opt for Typescript if you want your application to function smoothly following this tutorial. Next, navigate to your application directory and run the following commands:
```bash
cd < YOUR_APP >
npm i
sdk/typescript/docs/pages/guides/nym-smart-contracts.mdx → sdk/typescript/docs/pages/examples/nym-smart-contracts.mdx
+5 -4
View File
@@ -23,14 +23,15 @@ Depending on your app or project's architecture, this could be any of the ESM or
This and the following examples will use the ESbuild bundler.
If you'd like to use another one, we will document different bundlers and polyfills in the [bundling](https://sdk.nymtech.net/bundling) page.
</Callout>
##### Set-up your environment
Create your directory and set-up your app environment:
##### Environment Setup
Begin by creating a directory and configuring your application environment:
```bash
npm create vite@latest
```
Select `React` and later `Typescript` as you go to your environment set-up if you want your app to work off the bat following this tutorial.
Then,
During the environment setup, choose React and subsequently opt for Typescript if you want your application to function smoothly following this tutorial. Next, navigate to your application directory and run the following commands:
```bash
cd < YOUR_APP >
npm i