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

.github/workflows/ci.yml

@@ -15,19 +15,18 @@ jobs:
         project:
           - browser-add-readable-stream
           - browser-angular
-          - browser-browserify
           - browser-create-react-app
           - browser-exchange-files
           - browser-ipns-publish
           - browser-lit
           - browser-mfs
           - browser-nextjs
-          - browser-parceljs
           - browser-readablestream
           - browser-script-tag
           - browser-service-worker
           - browser-sharing-node-across-tabs
           - browser-video-streaming
+          - browser-vite
           - browser-vue
           - browser-webpack
           - circuit-relaying
@@ -39,7 +38,7 @@ jobs:
           - http-client-name-api
           - http-client-upload-file
           - ipfs-101
-          - ipfs-client-add-files
+          #- ipfs-client-add-files
           - run-in-electron
           - running-multiple-nodes
           - traverse-ipld-graphs

examples/browser-add-readable-stream/package.json

@@ -2,28 +2,29 @@
   "name": "example-browser-add-readable-stream",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "description": "How to add readable streams in the browser",
   "keywords": [],
   "license": "MIT",
   "scripts": {
-    "clean": "rimraf ./dist ./.cache ./.parcel-cache",
-    "build": "parcel build index.html --no-scope-hoist",
-    "serve": "parcel serve index.html --open -p 8888",
+    "clean": "rimraf ./dist ./.cache ./node_modules/.vite",
+    "build": "vite build",
+    "serve": "vite dev --port 8888",
     "start": "npm run serve",
     "test": "npm run build && playwright test tests"
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs-core": "^0.14.0"
+    "ipfs-core": "^0.15.2"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@playwright/test": "^1.12.3",
-    "parcel": "^2.3.2",
     "playwright": "^1.12.3",
     "process": "^0.11.10",
     "rimraf": "^3.0.2",
     "test-util-ipfs-example": "^1.0.2",
-    "util": "^0.12.4"
+    "util": "^0.12.4",
+    "vite": "^3.0.0-beta.1"
   }
 }

examples/browser-add-readable-stream/src/index.js

@@ -1,5 +1,3 @@
-'use strict'
-
 import { create } from 'ipfs-core'
 
 const main = async () => {

examples/browser-add-readable-stream/tests/test.js

@@ -1,7 +1,5 @@
-'use strict'
-
-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({

examples/browser-add-readable-stream/vite.config.js

@@ -0,0 +1,10 @@
+export default {
+  build: {
+    target: 'esnext',
+    minify: false
+  },
+  define: {
+    'process.env.NODE_DEBUG': 'false',
+    'global': 'globalThis'
+  }
+}

examples/browser-angular/angular.json

@@ -18,7 +18,7 @@
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "customWebpackConfig": {
-              "path": "./extra-webpack.config.ts"
+              "path": "./extra-webpack.config.js"
             },
             "outputPath": "dist/",
             "index": "src/index.html",

examples/browser-angular/extra-webpack.config.ts renamed to examples/browser-angular/extra-webpack.config.js

@@ -1,5 +1,5 @@
-import { Configuration, ProvidePlugin } from 'webpack';
-import * as NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
+import webpack from 'webpack';
+import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
 
 export default {
   plugins: [
@@ -9,8 +9,8 @@ export default {
     // dependencies causing runtime errors. This is a workaround to provide
     // global `Buffer` until https://github.com/isaacs/core-util-is/issues/29
     // is fixed.
-    new ProvidePlugin({
+    new webpack.ProvidePlugin({
       global: ['global']
     })
   ]
-} as Configuration;
+};

examples/browser-angular/package.json

@@ -2,6 +2,7 @@
   "name": "example-browser-angular",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "clean": "rimraf ./dist",
     "ng": "ng",
@@ -20,9 +21,10 @@
     "@angular/platform-browser": "^13.2.0",
     "@angular/platform-browser-dynamic": "^13.2.0",
     "@angular/router": "^13.2.0",
+    "@libp2p/interface-peer-id": "^1.0.2",
     "global": "^4.4.0",
-    "ipfs-core": "^0.14.0",
-    "ipfs-core-types": "^0.10.0",
+    "ipfs-core": "^0.15.2",
+    "ipfs-core-types": "^0.11.0",
     "rxjs": "^7.5.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

examples/browser-angular/src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { IpfsService } from './ipfs.service';
+import { PeerId } from '@libp2p/interface-peer-id';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +9,7 @@ import { IpfsService } from './ipfs.service';
 })
 export class AppComponent implements OnInit {
   title = 'browser-angular';
-  id: string | null = null;
+  id: PeerId | null = null;
   version: string | null  = null;
   status: string | null  = null;
 

examples/browser-angular/tests/test.js

@@ -1,7 +1,5 @@
-'use strict'
-
-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({