Integrate new p2panda-js 0.2.0 API in demo

[adzialocha]

Currently we're mocking the (outdated) p2panda-js API inside of beep-boop here: https://github.com/p2panda/beep-boop/tree/main/src/p2panda-api. We will soon release the real p2panda-js 0.2.0 API (see https://github.com/p2panda/p2panda/tree/main/p2panda-js#usage) which should be used instead in this demo.

[sophiiistika]

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

[sophiiistika]

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

[adzialocha]

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

[adzialocha]

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? 👍