feat!: release hybrid browser-nodejs as commonjs and module dependency (

#142)

BREAKING CHANGE: The SDK is now exportes as default, in order to import it use import sdk from '@atala/prism-wallet-sdk', vs import * as sdk from '@atala/prism-wallet-sdk'. Browsers now also don't need to build complex webpack configuration, check the demos for more info.

.vscode/settings.json

@@ -1,14 +1,14 @@
 {
-    "editor.formatOnSave": true,
-
-
-    "typescript.tsdk": "./node_modules/typescript/lib",
-
-    "files.exclude": {
-      "**/.git": true,
-      "**/.DS_Store": true
-    },
-
-    "eslint.validate": ["typescript"]
-  }
-  
+  "editor.formatOnSave": true,
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true
+  },
+  "files.associations": {
+    "*.scss": "postcss"
+  },
+  "eslint.validate": [
+    "typescript"
+  ]
+}

README.md

@@ -38,13 +38,6 @@ or with yarn
 yarn add @atala/prism-wallet-sdk
 ```
 
-> **Note for Webpack:**
-> 
-> The application builds code with wasm files for DIDComm and Anoncreds for both browsers and nodejs. When webpack builds public website the wasm files need to be copied manually into the public folder. See examples
-
-
-
-
 ### Running a demo project
 
 #### Building from source
@@ -67,47 +60,37 @@ npm i
 npm run build
 ```
 
-### For NodeJS CJS
-
-After building `prism-wallet-sdk`, cd into `{path}/demos/node-cjs` or use visual studio debugger "CJS DEMO":
+### Running the sample applications
+We have enabled sample implementations for browser (react or nextjs) and nodejs.
+In order to run each demo, make sure the whole SDK is built from source, then cd into the demo.
 
+Nodejs CommonJS
 ```bash
 cd demos/node-cjs
 npm i
 npm run start
 ```
 
-> **Note:**
-> 
-> The installation in the `{path}/demos/node-cjs` directory requires the `build` folder from the wallet-sdk to be available.
-
-### For NodeJS ESM
-
-After building `prism-wallet-sdk`, cd into `{path}/demos/node-esm` or use visual studio debugger "ESM DEMO":
-
+Nodejs Module
 ```bash
 cd demos/node-esm
 npm i
 npm run start
 ```
 
-> **Note:**
-> 
-> The installation in the `{path}/demos/node-esm` directory requires the `build` folder from the wallet-sdk to be available.
-
-
-### For browser
-
-After building `prism-wallet-sdk`, cd into the demo directory `{path}/demos/browser`
-
+Browser React
 ```bash
 cd demos/browser
 npm i
 npm run start
 ```
 
-
-
+Browser NextJS
+```bash
+cd demos/next
+npm i
+npm run start
+```
 
 ### Implementing storage for the SDK
 This SDK exposes Pluto, a storage interface that should be implemented by the user, in the most appropriate way for a particular use case.

build_dependencies.sh

@@ -7,13 +7,21 @@ buildDIDComm() {
     cd $DIDCommFolder/wasm
     wasm-pack build --target=web --out-dir=../../../generated/didcomm-wasm-browser
     wasm-pack build --target=nodejs --out-dir=../../../generated/didcomm-wasm-node
+    #TODO: find better way to approach this
+    #This code fails on browser when wasm is first loaded, it can just be ignored
+    #The code will fully work
+    sed "/if (typeof input === 'undefined') {/,/}/d" ../../../generated/didcomm-wasm-browser/didcomm_js.js > temp_file && mv temp_file ../../../generated/didcomm-wasm-browser/didcomm_js.js
     cd ../../../
     git submodule | grep didcomm | awk '{print $1}' > ./didcomm.commit
 }
 
 buildAnoncreds() {
     cd $AnonCredsFolder
     wasm-pack build --target=web --no-default-features --features=wasm 
+    #TODO: find better way to approach this
+    #This code fails on browser when wasm is first loaded, it can just be ignored
+    #The code will fully work
+    sed '/if (typeof input === '\''undefined'\'') {/,/}/d' pkg/anoncreds.js > temp_file && mv temp_file pkg/anoncreds.js
     rm -rf ../../generated/anoncreds-wasm-browser
     mv pkg ../../generated/anoncreds-wasm-browser
     wasm-pack build --target=nodejs --no-default-features --features=wasm 

demos/browser/craco.config.js

@@ -1,54 +1,12 @@
-const CopyPlugin = require("copy-webpack-plugin");
-const path = require("path");
-
 module.exports = {
   webpack: {
     configure: (webpackConfig) => {
-      const moduleScopePlugin = webpackConfig.resolve.plugins.find(({ constructor }) => constructor?.name === "ModuleScopePlugin");
-      const demosPath = path.resolve(__dirname, "../");
-      moduleScopePlugin.appSrcs = [demosPath];
-      const oneOfRule = webpackConfig.module.rules.find(x => x.oneOf);
-      const tsxRule = oneOfRule.oneOf.find(x => x.test && x.test.toString().includes("tsx"));
-      const plutoPath = `${demosPath}/pluto/`;
-      tsxRule.include = [tsxRule.include, plutoPath];
-
-      // Force browser entry
-      webpackConfig.resolve.alias = {
-        ...webpackConfig.resolve.alias,
-        '@atala/prism-wallet-sdk': path.resolve(
-          __dirname,
-          'node_modules/@atala/prism-wallet-sdk/build/browser/index.js'
-        ),
-      }
-      // Wasms - copy to public
-      webpackConfig.resolve.extensions.push(".wasm");
-      webpackConfig.plugins = [
-        new CopyPlugin({
-          patterns: [
-            {
-              force: true,
-              from: path.resolve(
-                __dirname,
-                "node_modules/@atala/prism-wallet-sdk/build/browser/*.wasm"
-              ),
-              // Define the destination directory within the project
-              to: path.resolve(__dirname, "public"),
-            },
-          ],
-        }),
-        ...(webpackConfig.plugins || []),
-      ];
-
       webpackConfig.resolve.fallback = {
         fs: false,
         crypto: false,
-        // assert: require.resolve("assert/"),
-        // url: require.resolve("url/"),
-        // buffer: require.resolve("buffer/"),
-        stream: require.resolve("stream-browserify"),
-        path: require.resolve("path-browserify"),
+        stream: false,
+        path: false,
       };
-
       return webpackConfig;
     },
   },