Phase 2 Tracking

[oliveriosousa]

Tracking for Phase 2: Improve ergonomics

• Update existing examples to be more concise (readme's, content itself, versions, etc)
• Check if it actually works properly
• Check if dependencies need to be updated
• Check if the code can be made simpler
• Check if the tooling (npm script, bundler configs, etc) can be made simpler
• Add more examples
• Web Frameworks/Libraries: svelte, angular
• Bundlers: Vite, Rollup, snowpack
• Deno
• Fix current issues
• browser-service-worker: Cannot run the example correctly #17

Current work:

New examples

• Angular: feat: add example with angular 12 #4
• Next.js: feat: add example with nextjs #5
• Nuxt.JS: feat: add example with nuxtjs #13
• Lit: feat: add example with Lit #12

Outside examples:

Cherry pick from old example repo

• chore: restore git and eth graph traversal examples #9
• chore: make ipfs get output tarballs #18
• chore: fix up examples #19
• chore: updated example dependencies #20
• chore: updated example dependencies #21
• fix: detect ed25519 keys in ws test #22

Move examples:

• chore: move examples to external repo ipfs/js-ipfs#3821

Waiting for discussion

• Rollup: wip: example with rollup #7
• Svelte: wip: example with svelte #10
• Deno: wip: example with deno #11

In Progress

• Vite:
• Snowpack:
• Microbundle:
• SvelteKit

[oliveriosousa]

Hi team, @autonome @hugomrdias

1. I noticed that a lot of commits in the examples are updates to the version of IPFS. It is possible to add tags to IPFS release? Or just target the latest release?

For example:
Stable, Beta, Next, Preview

2. What should be the core for all examples ? (MFS API ?)
3. Suggestions for more examples 😃

[hugomrdias]

Hi team, @autonome @hugomrdias

1. I noticed that a lot of commits in the examples are updates to the version of IPFS. It is possible to add tags to IPFS release? Or just target the latest release?

I don't see this has a problem, its just keeping the same history as the source.

1. What should be the core for all examples ? (MFS API ?)

For new examples that focus only on new frameworks and bundlers it should just be similar to ipfs-101 i.e. ipfs.version(), ipfs.id(), ipfs.add(cid) and ipfs.cat(cid)

Perform bump version automatically

What do you mean by this ? We dont need versions in the examples.

The first task for phase 2 should be just, go through each example and make sure it's as easy as it can be.

• Check if it actually works properly
• Check if dependencies need to be updated
• Check if the code can be made simpler
• Check if the tooling (npm script, bundler configs, etc) can be made simpler

All of these should be made as PRs in the js-ipfs repo.
Updating the readme and making the examples look better should be done in Phase 4.

The second tasks looks good, if for some reason you can't make js-ipfs work with some new framework or bundler an issue should be created explaining why so the devs can look into it.

[hugomrdias]

@oliveriosousa after talking with @autonome and @achingbrain we feel that the examples should be extracted from the js-ipfs monorepo and recreated in this org

The high level task should be:

• Create ipfs-examples/js-ipfs-examples repo
• Copy all the examples in js-ipfs to the above repo
• The new repo should be a mono-repo using node 16, npm 7 workspaces
• Each example should have tests using https://playwright.dev/docs/test-intro and the npm test script should run everything needed
• The standalone repos should be updated to pull from this new mono-repo instead of js-ipfs repo
• js-ipfs repo should be able to run tests for each example using the external testing setup that is already used for partners repos

@achingbrain
The PRs already opened in the js-ipfs should be ported over or can we merge them before creating the new examples mono.repo ?

[achingbrain]

The PRs already opened in the js-ipfs should be ported over or can we merge them before creating the new examples mono.repo ?

I think it would be less disruptive if they go straight into the new examples monorepo.

[oliveriosousa]

Current issues:

1. IPNS

Issue description

When publishing a IPFS hash it is being thrown an error running the following code:

js-ipfs-examples/examples/browser-ipns-publish/src/index.js

Line 209 in 120d263

const topic = `${namespace}${uint8ArrayToString(ipnsKeys.routingKey, 'base64url')}`;

Steps to reproduce the issue

1. Install and run the example:

• npm install
• npm start

2. Create and init an IPFS node (I used IPFS desktop)
3. Add new address to handle WS connections
4. In the browser (see image below)

• Connect with the API
• Connect via Websocket
• IPFS Hash

What's the expected result?

• Being able to publish an IPFS Hash to IPNS

What's the actual result?

• See image below

Additional details / screenshot

---

2. Service Worker

Issue description

Not able to run correctly the example, simply just can't replicate the expected behaviour

Steps to reproduce the issue

1. Install and run the example:

• npm install
• npm start

2. Perform all the steps described in the Readme file

What's the expected result?

• Being able to see IPFS content locally using the URL

What's the actual result?

• It is being displayed always the homepage

Additional details / screenshot

• N/A

---

3. Exchange files

Issue description

Need some help improving the migrated test, it is very inconsistent.

Steps to reproduce the issue

npx playwright test tests --headed

What's the expected result?

-Run the test always with success :)

What's the actual result?

• Fails a lot of times

Additional details / screenshot

• N/A

---

4. Explore Ethereum Blockchain

UPDATE: was removed 4 days ago

---

5. Custom IPFS Repo

Issue description

After this commit ( feat: upgrade to the new multiformats (#3556) ) the test started to fail

Steps to reproduce the issue

npm run test:example

What's the expected result?

-Run the test always with success :)

What's the actual result?

Swarm listening on /ip4/127.0.0.1/tcp/4002/p2p/QmQwLBDzt1amc8mSxRCznsPuEx9yr8Jafj6wAPByXyLk16
Swarm listening on /ip4/192.168.1.86/tcp/4002/p2p/QmQwLBDzt1amc8mSxRCznsPuEx9yr8Jafj6wAPByXyLk16
Swarm listening on /ip4/127.0.0.1/tcp/4003/ws/p2p/QmQwLBDzt1amc8mSxRCznsPuEx9yr8Jafj6wAPByXyLk16
/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/blockstore-datastore-adapter/src/index.js:22
throw errcode(new Error('Not a valid cid'), 'ERR_INVALID_CID')
^
Error: Not a valid cid
at cidToKey (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/blockstore-datastore-adapter/src/index.js:22:19)
at BlockstoreDatastoreAdapter.get (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/blockstore-datastore-adapter/src/index.js:187:27)
at Object.get (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-repo/src/pinned-blockstore.js:46:20)
at Object.get (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-repo/src/idstore.js:50:20)
at loadOrFetchFromNetwork (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-bitswap/src/index.js:246:45)
at Bitswap.get (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-bitswap/src/index.js:279:7)
at BlockService.get (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-block-service/src/index.js:97:28)
at IPLDResolver.get (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipld/src/index.js:155:33)
at unixFsResolver (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-unixfs-exporter/src/resolvers/unixfs-v1/index.js:48:27)
at resolve (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-unixfs-exporter/src/resolvers/index.js:34:10) {
code: 'ERR_INVALID_CID'
}

---

6. Custom IPLD format

Issue description

After this commit ( feat: upgrade to the new multiformats (#3556) ) the test started to fail

Steps to reproduce the issue

npm run test:example

What's the expected result?

-Run the test always with success :)

What's the actual result?

Testing in-process node
Swarm listening on /ip4/127.0.0.1/tcp/4002/p2p/QmdJHXdL4heVQof5sibvmY5QyVU9F7PVj3bVLuMPuBchL1
Swarm listening on /ip4/192.168.1.86/tcp/4002/p2p/QmdJHXdL4heVQof5sibvmY5QyVU9F7PVj3bVLuMPuBchL1
Swarm listening on /ip4/127.0.0.1/tcp/4003/ws/p2p/QmdJHXdL4heVQof5sibvmY5QyVU9F7PVj3bVLuMPuBchL1
Error: Codec "dag-test" not found
at Object.getCodeFromName (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/multicodec/src/index.js:90:11)
at nameToCodec (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-core/src/components/dag/put.js:18:40)
at encodingCodes (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-core/src/components/dag/put.js:98:40)
at readEncodingOptions (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-core/src/components/dag/put.js:81:7)
at put (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-core/src/components/dag/put.js:37:45)
at DagAPI.put (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/ipfs-core-utils/src/with-timeout-option.js:21:46)
at main (/Users/oliveriosousa/Projects/PL/js-ipfs-examples/examples/custom-ipld-formats/in-process-node.js:28:30)
/Users/oliveriosousa/Projects/PL/js-ipfs-examples/node_modules/execa/lib/error.js:60
error = new Error(message);

---

7. Create-React-App and Vue

Issue description

When using npm workspaces to install all the necessary dependencies it is not possible to build the projects, but if installed them in the package it works.

Maybe this packages are not properly build to work with monorepos and some dependencies are not being installed...

Steps to reproduce the issue

npm install (in the root project)
npm run test:example OR npm run build

What's the expected result?

-Run the build with success using npm workspaces

What's the actual result?

Build fails with:

example-browser-create-react-app@1.0.0 test:example
npm run build && playwright test tests

example-browser-create-react-app@1.0.0 build
react-scripts build

Creating an optimized production build...
Failed to compile.
Cannot read property 'includes' of undefined