Integrate new `p2panda-js` `0.2.0` API in demo about zoo-adventures HOT 4 CLOSED

For working with the unpublished p2panda-js version:

cd p2panda
git pull origin main
cd p2panda-js
npm install
npm run build
npm link

And in the beep-boop repo:
npm link p2panda-js

In case a wasm error is thrown, copy the ***.module.wasm file from p2panda-js/lib into beep-boop/dist. After that, run in the beep-boop repo:
npx serve dist

from zoo-adventures.

Two issues I found that I can’t resolve

• loading issue:
  p2panda-js requires wasm. that means p2panda-js will try to import it over the network, but the code (e.g. createKeyPair()) can’t or won’t wait for wasm to be imported. For that, keyPair.ts and session.ts from p2panda-js probably can be improved.
• null pointer error:
  after calling the privateKey() we get this error

from zoo-adventures.

loading issue: p2panda-js requires wasm

To solve the issue with Webpack not importing the .wasm file of p2panda-js we just found a solution (not elegant, but working for now):

1. Install the CopyWebpackPlugin as a dev dependency

2. Add the following config under plugins in the webpack file (CopyPlugin needs to be imported first):

   new CopyPlugin({
     patterns: [
       { from: 'node_modules/p2panda-js/lib/*.wasm', to: '[name][ext]' },
     ],
   }),

3. Restart the npm run serve task. Webpack will now copy the needed .wasm file into the dist folder.

I'm making a ticket about this issue, we should evaluate if this is a fine solution for people using Webpack as a bundler or if we need to rewrite our bundling strategy in p2panda-js 😢 p2panda/p2panda#126

from zoo-adventures.

null pointer error: after calling the privateKey() we get this error

This might be related to this invalid syntax here: https://github.com/p2panda/beep-boop/blob/Integrate-new-p2panda-js-0.2.0-API/src/App.tsx#L50 : createKeyPair is a Promise and not a Class so the new keyword does not make sense here. Maybe this resolves the issue? 👍

from zoo-adventures.