add browser build for sdk #3756

tintinthong · 2023-06-08T10:25:15Z

This PR makes a browser build of the sdk (standalone). The sdk is expected to work in browser. I use esbuild since we use a lot of tsup (esbuild under the hood). Esbuild is simpler and faster. This will build a minified browser.js with sourcemap in the dist folder of the sdk when calling yarn prepack.

inspect browser.js for import and require statements or dependencies with externals
at least test claim in browser
verify that it doesn't break other packages. If we don't add the browser field it shud be fine.
how would it work with cdn (maybe unpkg can work with it once its merged)

github-actions · 2023-06-08T10:31:10Z

ssr-web test results

180 tests 180 ✔️ 11s ⏱️
    1 suites     0 💤
    1 files     0 ❌

Results for commit 6a7b3e2.

♻️ This comment has been updated with latest results.

github-actions · 2023-06-08T10:31:48Z

web-client test results

528 tests 528 ✔️ 1m 22s ⏱️
    1 suites     0 💤
    1 files     0 ❌

Results for commit 6a7b3e2.

♻️ This comment has been updated with latest results.

tintinthong · 2023-06-08T12:25:09Z

packages/cardpay-sdk/package.json

@@ -5,6 +5,7 @@
  "author": "Hassan Abdel-Rahman @habdelra",
  "main": "./dist/esm/index.js",
  "types": "./dist/index.d.ts",
+  "browser": "browser.js",


im think I will remove this. Because consumers of the sdk may look for different keys depending on their target. I think webpack default behaviour may be to prefer "browser" over "main", but i think there are complex set of rules that decide this.

"resolve.mainFields" can specify the priority eg ["browser", "main"] for consumers of the sdk but I think this affects other dependencies (bad)

another way is to use alias to point to the specific main file of the sdk (ok)

For my purposes, since I can point to the correct file (even using unpkg), there is no need to have this key. (probably best)

tintinthong · 2023-06-08T12:36:54Z

I used this to test the claim in browser

<!DOCTYPE html>
<html>

<head>
    <title>Your Application</title>
</head>

<body>
    <!-- Your application's HTML structure -->

    <!-- Add a button with an id -->
    <button id="main-button">Connect</button>

    <!-- Include your bundled JavaScript file -->
    <script type="module" src="./dist/browser.js"></script>
    <script type="module">
        import { getSDK, Web3Provider } from './dist/browser.js';
        async function main() {
            // Your main function code...
            let moduleAddress = "0xCF726Ff23Fb821e8aC9253f2ad663E96A0Cb5036"
            let safeAddress = "0xEDC43a390C8eE324cC9d21C93C55c04bD6B8257f"
            let ethersProvider = new Web3Provider(window.ethereum);
            let claimSettlementModule = await getSDK(
                'ClaimSettlementModule',
                ethersProvider
            );
            let encoded = '0x200e5de5be507d1063f89d1fdbace15198e0e5622e70b03a18fe4a5e1e3f0f0fad1fa6b406c07f94fc12859a731bc85feca8dd0ab16a282e772759e62b38ef7604cf0c5b1db4f67bcd80f58b8278f67770c2510d0ff802430de4c4df8418eda30000000000000000000000000000000000000000000000000000000000000120045e442362637657f624856ae562b748ad26c382b03ec7e0d34c0a535465d1c50000000000000000000000000000000000000000000000000000000000000180d2f580d93fd63852846304057772a7bca9c7d7e65a76a8ab33831ffb4c91323300000000000000000000000000000000000000000000000000000000000001e00000000000000000000000000000000000000000000000000000000000000240000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000648196480000000000000000000000000000000000000000000000000000995c3bf0ee80000000000000000000000000000000000000000000000000000000000000004000000000000000000000000046a160d7831bf361e5faa14c1e523758840d0116000000000000000000000000edc43a390c8ee324cc9d21c93c55c04bd6b8257f00000000000000000000000000000000000000000000000000000000000000400000000000000000000000002791bca1f2de4661ed88a30c99a7a9449aa84174000000000000000000000000000000000000000000000000000000000000ea600000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000ea60'
            let signature = '0xf2089370b092b9f4f91a0861e6b0201757a166c0601bb2b0913e2455c53227545297b8263d418651497f24bdac979cd23daa7e443e503ecc7e6343265369cd071b'
            let registered = await claimSettlementModule.isRegistered(safeAddress)
            let did = await claimSettlementModule.getDid(moduleAddress)
            console.log("===")
            console.log(moduleAddress)
            console.log(safeAddress)
            console.log(encoded)
            console.log(signature)
            const r = await claimSettlementModule.executeSafe(
                moduleAddress,
                safeAddress,
                {
                    signature,
                    encoded
                },
            );
            if (r) {
                console.log('You have succesfully claimed your reward!');
                console.log(r); //TODO: should be replaced with a transaction card being created
            }
        }

        async function connectWallet() {
            // Check if window.ethereum is available
            if (window.ethereum) {
                try {
                    // Request account access
                    let accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                    console.log(accounts)
                    let ethersProvider = new Web3Provider(window.ethereum);
                    // Update the button event listener to call main instead of connectWallet
                    document.getElementById('main-button').removeEventListener('click', connectWallet);
                    document.getElementById('main-button').addEventListener('click', main);
                    document.getElementById('main-button').innerText = "Run Main";
                } catch (error) {
                    console.log(error)
                    console.error("User denied account access");
                }
            }
            // Non-dapp browsers...
            else {
                console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
            }
        }

        // Find the button by its id and add a click event listener
        document.getElementById('main-button').addEventListener('click', connectWallet);
    </script>
</body>

</html>

habdelra · 2023-06-08T13:30:59Z

.gitignore

@@ -59,6 +59,7 @@ package-lock.json
 /packages/cardpay-sdk/**/*.js.map
 /packages/cardpay-sdk/generated/
 # Let's keep this though!
+!/packages/cardpay-sdk/scripts/browser-build.js


why do we want to commit the build artifacts to git? isn't that what the ! does?

Oh this is the script NOT the build. previously js files was being ignored

Ah, got it!

you can always just write it in typescript and then use ts-node to execute it too. but js is fine for this purpose.

habdelra · 2023-06-08T13:38:22Z

in terms of the CDN you can include a deploy script to deploy it to some bucket on s3, that is projected to cloudfront (I'm not sure which bucket or which cloudfront we'd want to use, probably we could talk to @pcjun97 about that). Otherwise, the act of doing an npm publish with this new browser artifact will ultimately trigger unpkg to pick it up.

tintinthong added 5 commits June 8, 2023 18:18

add browser build

bbcaac2

fix

fe29ebe

add command to build sdk

8b85e6d

improve script messages

210d0a9

adding browser key

fddad28

add useful comment

be2a1dc

tintinthong commented Jun 8, 2023

View reviewed changes

tintinthong requested review from habdelra and backspace June 8, 2023 12:37

habdelra reviewed Jun 8, 2023

View reviewed changes

habdelra approved these changes Jun 8, 2023

View reviewed changes

remove browser key

6a7b3e2

tintinthong merged commit d868a74 into main Jun 8, 2023
31 checks passed

delete-merged-branch bot deleted the bundle-sdk branch June 8, 2023 14:24

tintinthong mentioned this pull request Jun 12, 2023

Load cardpay-sdk for claim card (dynamic import) cardstack/boxel#400

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add browser build for sdk #3756

add browser build for sdk #3756

tintinthong commented Jun 8, 2023 •

edited

github-actions bot commented Jun 8, 2023 •

edited

github-actions bot commented Jun 8, 2023 •

edited

tintinthong Jun 8, 2023 •

edited

tintinthong commented Jun 8, 2023

habdelra Jun 8, 2023 •

edited

tintinthong Jun 8, 2023 •

edited

habdelra Jun 8, 2023

habdelra Jun 8, 2023

habdelra commented Jun 8, 2023 •

edited

add browser build for sdk #3756

add browser build for sdk #3756

Conversation

tintinthong commented Jun 8, 2023 • edited

github-actions bot commented Jun 8, 2023 • edited

ssr-web test results

github-actions bot commented Jun 8, 2023 • edited

web-client test results

tintinthong Jun 8, 2023 • edited

Choose a reason for hiding this comment

tintinthong commented Jun 8, 2023

habdelra Jun 8, 2023 • edited

Choose a reason for hiding this comment

tintinthong Jun 8, 2023 • edited

Choose a reason for hiding this comment

habdelra Jun 8, 2023

Choose a reason for hiding this comment

habdelra Jun 8, 2023

Choose a reason for hiding this comment

habdelra commented Jun 8, 2023 • edited

tintinthong commented Jun 8, 2023 •

edited

github-actions bot commented Jun 8, 2023 •

edited

github-actions bot commented Jun 8, 2023 •

edited

tintinthong Jun 8, 2023 •

edited

habdelra Jun 8, 2023 •

edited

tintinthong Jun 8, 2023 •

edited

habdelra commented Jun 8, 2023 •

edited