fix: update ipfs versions (#365)

Updates all examples to use ESM versions of IPFS, swaps parcel for
vite everywhere and removes old browserify example because it only
understands CJS.

Author: achingbrain

.env

@@ -1,3 +1,6 @@
 # required because react-scripts scans *up* the tree from this project and finds
 # a conflicting version of eslint in the node_modules dir for js-ipfs.
 SKIP_PREFLIGHT_CHECK=true
+
+# Turning these on can cause OOM errors
+GENERATE_SOURCEMAP=false

package.json

@@ -37,11 +37,11 @@
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "dot-prop": "^7.1.1",
-    "ipfs-core": "^0.14.0",
+    "ipfs-core": "^0.15.2",
     "ipfs-css": "^1.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
+    "react-scripts": "5.0.1",
     "tachyons": "^4.12.0",
     "web-vitals": "^2.1.2"
   },

src/App.js

@@ -77,7 +77,7 @@ const IpfsId = ({keys, obj}) => {
       {keys?.map((key) => (
         <div className='mb4' key={key}>
           <Title>{key}</Title>
-          <div className='bg-white pa2 br2 truncate monospace' data-test={key}>{obj[key]}</div>
+          <div className='bg-white pa2 br2 truncate monospace' data-test={key}>{obj[key].toString()}</div>
         </div>
       ))}
     </>

src/index.js

@@ -5,8 +5,8 @@ import 'tachyons'
 import "ipfs-css";
 import './index.css'
 
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import App from './App.js';
+import reportWebVitals from './reportWebVitals.js';
 
 ReactDOM.render(
   <React.StrictMode>

tests/test.js renamed to tests/test.mjs

@@ -1,5 +1,5 @@
-const { test, expect } = require('@playwright/test');
-const { playwright } = require('test-util-ipfs-example');
+import { test, expect } from '@playwright/test';
+import { playwright } from 'test-util-ipfs-example';
 
 // Setup
 const play = test.extend({