ipfs-examples · oliveriosousa · Aug 23, 2021 · Aug 11, 2021 · Aug 11, 2021 · Aug 12, 2021
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "16"
+          cache: "yarn"
+      - name: Install dependencies
+        run: yarn install
+      - name: Install dependencies for browsers
+        run: npx playwright install-deps
+      - name: Run test:examples
+        run: npx xvfb-maybe yarn run test:examples
diff --git a/examples/browser-add-readable-stream/index.html b/examples/browser-add-readable-stream/index.html
@@ -9,12 +9,17 @@
     <link
       rel="stylesheet"
       href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"
+      crossorigin
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/ipfs-css@0.12.0/ipfs.css"
+      crossorigin
     />
-    <link rel="stylesheet" href="https://unpkg.com/ipfs-css@0.12.0/ipfs.css" />
     <link rel="shortcut icon" href="favicon.ico" />
     <link rel="stylesheet" href="./src/style.css" />
 
-    <script src="./src/index.js" defer></script>
+    <script type="module" src="./src/index.js" defer></script>
   </head>
 
   <body class="montserrat f5">
@@ -23,7 +28,7 @@
         <img
           alt="IPFS logo"
           src="./public/ipfs-logo.svg"
-          style="height: 50px;"
+          style="height: 50px"
           class="v-top"
         />
       </a>
@@ -73,7 +78,17 @@ <h3>Add file</h3>
         />
 
         <button
-          class="button-reset pv3 tc bn bg-animate bg-black-80 hover-bg-aqua white pointer w-100"
+          class="
+            button-reset
+            pv3
+            tc
+            bn
+            bg-animate bg-black-80
+            hover-bg-aqua
+            white
+            pointer
+            w-100
+          "
           id="add-submit"
           type="submit"
         >

diff --git a/examples/browser-add-readable-stream/package.json b/examples/browser-add-readable-stream/package.json
@@ -5,7 +5,6 @@
   "description": "How to add readable streams in the browser",
   "keywords": [],
   "license": "MIT",
-  "main": "dist/index.html",
   "scripts": {
     "clean": "rimraf ./dist ./.cache ./.parcel-cache",
     "build": "parcel build index.html --no-scope-hoist",
@@ -15,7 +14,7 @@
   },
   "browserslist": "last 1 Chrome version",
   "dependencies": {
-    "ipfs": "^0.57.0"
+    "ipfs": "^0.58.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.8",

diff --git a/examples/browser-angular/extra-webpack.config.ts b/examples/browser-angular/extra-webpack.config.ts
@@ -10,9 +10,7 @@ export default {
     // global `Buffer` until https://github.com/isaacs/core-util-is/issues/29
     // is fixed.
     new ProvidePlugin({
-      global: ['global'],
-      Buffer: ['buffer', 'Buffer'],
-      process: 'process/browser',
+      global: ['global']
     })
-  ],
+  ]
 } as Configuration;
diff --git a/examples/browser-angular/package.json b/examples/browser-angular/package.json
@@ -12,28 +12,28 @@
     "test:example": "npm run build && playwright test tests"
   },
   "dependencies": {
-    "@angular/animations": "~12.1.2",
-    "@angular/common": "~12.1.2",
-    "@angular/compiler": "~12.1.2",
-    "@angular/core": "~12.1.2",
-    "@angular/forms": "~12.1.2",
-    "@angular/platform-browser": "~12.1.2",
-    "@angular/platform-browser-dynamic": "~12.1.2",
-    "@angular/router": "~12.1.2",
+    "@angular/animations": "~12.2.0",
+    "@angular/common": "~12.2.0",
+    "@angular/compiler": "~12.2.0",
+    "@angular/core": "~12.2.0",
+    "@angular/forms": "~12.2.0",
+    "@angular/platform-browser": "~12.2.0",
+    "@angular/platform-browser-dynamic": "~12.2.0",
+    "@angular/router": "~12.2.0",
     "global": "^4.4.0",
-    "ipfs": "^0.55.4",
+    "ipfs": "^0.58.1",
     "rxjs": "~6.6.0",
-    "tslib": "^2.2.0",
+    "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^12.1.0",
-    "@angular-devkit/build-angular": "~12.1.2",
-    "@angular/cli": "~12.1.2",
-    "@angular/compiler-cli": "~12.1.2",
+    "@angular-devkit/build-angular": "~12.2.2",
+    "@angular/cli": "~12.2.2",
+    "@angular/compiler-cli": "~12.2.0",
     "@playwright/test": "^1.12.3",
     "@types/jasmine": "~3.8.0",
-    "@types/node": "^12.11.1",
+    "@types/node": "^16.6.2",
     "jasmine-core": "~3.8.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
@@ -42,9 +42,7 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "playwright": "^1.12.3",
-    "polka": "^0.5.2",
     "rimraf": "^3.0.2",
-    "sirv": "^1.0.12",
-    "typescript": "~4.3.2"
+    "typescript": "~4.3.5"
   }
 }
diff --git a/examples/browser-angular/src/app/ipfs.service.ts b/examples/browser-angular/src/app/ipfs.service.ts
@@ -60,119 +60,4 @@ export class IpfsService {
     const node = await this.ipfs;
     return await node.isOnline();
   }
-
-  /**
-   * @description Add a file with the given options
-   * @param {IPFS_UTILS_TYPES.ImportCandidate} entry
-   * @param {IPFS_ROOT_TYPES.AddOptions} [options={}]
-   * @return {Promise<IPFS_ROOT_TYPES.AddResult>}
-   */
-  async add(entry: IPFS_UTILS_TYPES.ImportCandidate, options: IPFS_ROOT_TYPES.AddOptions = {}): Promise<IPFS_ROOT_TYPES.AddResult>{
-    console.log(`Adding file ${entry} ...`)
-    console.log(entry)
-
-    const node = await this.ipfs
-    const result = await node.add(entry, options)
-
-    this._ipfsSource.next(node);
-    console.log(result)
-    return result;
-  }
-
-  /**
-   * @description Add files with the given options
-   * @param {IPFS_UTILS_TYPES.ImportCandidate[]} entries
-   * @param {IPFS_ROOT_TYPES.AddAllOptions} [options={}]
-   * @return {Promise<IPFS_ROOT_TYPES.AddResult[]>}
-   */
-  async addAll(entries: IPFS_UTILS_TYPES.ImportCandidate[], options: IPFS_ROOT_TYPES.AddAllOptions = {}): Promise<IPFS_ROOT_TYPES.AddResult[]>{
-    console.log("Adding files...")
-    const results = []
-    const node = await this.ipfs
-
-    for await (const result of node.addAll(entries, options)) {
-      console.log(result)
-      results.push(result)
-    }
-
-    this._ipfsSource.next(node);
-    return results;
-  }
-
-  /**
-   * @description Get file(s) of a given path
-   * @param {IPFS_UTILS_TYPES.IPFSPath} ipfsPath
-   * @param {IPFS_ROOT_TYPES.GetOptions} [options={}]
-   * @param {boolean} [onlyFiles=true]
-   * @return {Promise<Array<[IPFS_ROOT_TYPES.IPFSEntry, string]>>}
-   */
-  async get(ipfsPath: IPFS_UTILS_TYPES.IPFSPath, options: IPFS_ROOT_TYPES.GetOptions = {}, onlyFiles = true):
-    Promise<Array<[IPFS_ROOT_TYPES.IPFSEntry, string]>>{
-    console.log(`Returning file for ${ipfsPath}...`)
-    const results = [] as Array<[IPFS_ROOT_TYPES.IPFSEntry, string]>
-    const node = await this.ipfs
-
-    for await (const file of node.get(ipfsPath, options)) {
-      const content = []
-
-      if ('content' in file && file.content) {
-        for await (const chunk of file.content) {
-          content.push(chunk)
-        }
-      }
-
-      if (content.length > 0 || !onlyFiles) {
-        results.push([file, content.toString()])
-      }
-    }
-
-    console.log(results)
-    return results
-  }
-
-  /**
-   * @description Read a file
-   * @param {IPFS_UTILS_TYPES.IPFSPath} ipfsPath
-   * @param {IPFS_ROOT_TYPES.CatOptions} [options={}]
-   * @return {(Promise<string | null>)}
-   */
-  async cat (ipfsPath: IPFS_UTILS_TYPES.IPFSPath, options: IPFS_ROOT_TYPES.CatOptions = {}):
-    Promise<string | null> {
-    console.log(`Reading file for ${ipfsPath} ...`);
-    const content = []
-    const node = await this.ipfs
-
-    for await (const chunk of node.cat(ipfsPath, options)) {
-        content.push(chunk)
-    }
-
-    let result = null;
-
-    if (content.length > 0) {
-        result = content.toString();
-    }
-
-    console.log(content)
-    return result;
-  }
-
-  /**
-   * @description List the file(s) and directory(ies) of a given path
-   * @param {IPFS_UTILS_TYPES.IPFSPath} ipfsPath
-   * @param {IPFS_ROOT_TYPES.ListOptions} [options={}]
-   * @returns {Promise<Array<IPFS_ROOT_TYPES.IPFSEntry>>}
-   */
-  async ls (ipfsPath: IPFS_UTILS_TYPES.IPFSPath, options: IPFS_ROOT_TYPES.ListOptions = {}):
-    Promise<Array<IPFS_ROOT_TYPES.IPFSEntry>> {
-    console.log(`Listing files for ${ipfsPath} ...`);
-    const result = [];
-    const node = await this.ipfs
-
-    for await (const data of node.ls(ipfsPath, options)) {
-        result.push(data)
-    }
-
-    console.log(result)
-    return result;
-  }
 }
diff --git a/examples/browser-angular/src/index.html b/examples/browser-angular/src/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>BrowserAngular</title>
+  <title>IPFS Angular</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">

diff --git a/examples/browser-angular/tsconfig.json b/examples/browser-angular/tsconfig.json
@@ -14,9 +14,9 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "esnext",
     "module": "es2020",
-    "lib": ["es2018", "dom"],
+    "lib": ["esnext", "dom", "es2020"],
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true
   },

diff --git a/examples/browser-browserify/package.json b/examples/browser-browserify/package.json
@@ -5,7 +5,6 @@
   "description": "Bundle js-ipfs with Browserify",
   "keywords": [],
   "license": "MIT",
-  "main": "dist/index.html",
   "scripts": {
     "clean": "rimraf ./dist",
     "build": "copyfiles -u 1 -a './public/**/*' './dist' && browserify ./src/index.js > ./dist/bundle.js",
@@ -14,15 +13,15 @@
     "test:example": "npm run build && playwright test tests"
   },
   "dependencies": {
-    "ipfs": "^0.57.0"
+    "ipfs": "^0.58.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.12.3",
     "browserify": "^17.0.0",
     "concat-stream": "^2.0.0",
     "copyfiles": "^2.4.1",
     "execa": "^5.0.0",
-    "http-server": "^0.12.3",
+    "http-server": "^13.0.0",
     "playwright": "^1.12.3",
     "rimraf": "^3.0.2",
     "test-util-ipfs-example": "^1.0.2"

diff --git a/examples/browser-browserify/public/index.html b/examples/browser-browserify/public/index.html
@@ -9,8 +9,13 @@
     <link
       rel="stylesheet"
       href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"
+      crossorigin
+    />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/ipfs-css@0.12.0/ipfs.css"
+      crossorigin
     />
-    <link rel="stylesheet" href="https://unpkg.com/ipfs-css@0.12.0/ipfs.css" />
     <link rel="shortcut icon" href="favicon.ico" />
 
     <script defer src="bundle.js"></script>
@@ -66,7 +71,7 @@
         <img
           alt="IPFS logo"
           src="ipfs-logo.svg"
-          style="height: 50px;"
+          style="height: 50px"
           class="v-top"
         />
       </a>
@@ -97,7 +102,17 @@ <h1 class="pa0 f2 ma0 mb4 aqua tc">Add data to IPFS from the browser</h1>
         />
 
         <button
-          class="button-reset pv3 tc bn bg-animate bg-black-80 hover-bg-aqua white pointer w-100"
+          class="
+            button-reset
+            pv3
+            tc
+            bn
+            bg-animate bg-black-80
+            hover-bg-aqua
+            white
+            pointer
+            w-100
+          "
           id="add-submit"
           type="submit"
         >

diff --git a/examples/browser-create-react-app/package.json b/examples/browser-create-react-app/package.json
@@ -35,7 +35,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "dot-prop": "^6.0.1",
-    "ipfs": "^0.57.0",
+    "ipfs": "^0.58.1",
     "ipfs-css": "^1.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

diff --git a/examples/browser-exchange-files/index.html b/examples/browser-exchange-files/index.html
@@ -11,11 +11,11 @@
     <link rel="icon" href="./favicon.ico" />
 
     <!-- The app bundled with IPFS -->
-    <script src="./src/app.js" defer></script>
+    <script type="module" src="./src/app.js" defer></script>
   </head>
   <body ondragover="event.preventDefault()">
     <header>
-      <img width="200" src="public/assets/ipfs-logo.svg" alt="IPFS" />
+      <img width="200" src="public/ipfs-logo.svg" alt="IPFS" />
     </header>
 
     <main>
@@ -101,7 +101,7 @@ <h2>Files</h2>
           </div>
 
           <div id="drag-container">
-            <img width="100" src="public/assets/upload.svg" alt="Upload" />
+            <img width="100" src="public/upload.svg" alt="Upload" />
             <p><b>Drag &amp; drop</b> a file to upload it.</p>
           </div>