feat(explorer, lib): some refactoring, add custom namespace in explorer

Author: 0x77dev

package.json

@@ -40,6 +40,7 @@
     "@typescript-eslint/eslint-plugin": "5.16.0",
     "@typescript-eslint/parser": "5.16.0",
     "babel-jest": "27.5.1",
+    "compression-webpack-plugin": "^9.2.0",
     "cypress": "9.5.2",
     "eslint": "8.11.0",
     "eslint-config-prettier": "8.5.0",
@@ -66,6 +67,7 @@
     "ts-jest": "27.1.3",
     "typescript": "^4.6.2",
     "util": "^0.12.4",
+    "webpack-bundle-analyzer": "^4.5.0",
     "yaml-crypt": "0.7.6",
     "zx": "6.0.7"
   },

packages/explorer/src/main.tsx

@@ -1,25 +1,52 @@
 import React, { useEffect, useState, StrictMode } from 'react'
 import * as ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
-import { Stack } from '@dstack-js/lib'
+import { Stack, Shard, ShardKind } from '@dstack-js/lib'
+
+declare global {
+  interface Window {
+    stack: Stack;
+    Shard: typeof Shard;
+    ShardKind: typeof ShardKind;
+  }
+}
 
 export const App: React.FC = () => {
-  const namespace = 'explorer'
+  const namespace: string = localStorage['namespace'] || 'explorer'
   const [stack, setStack] = useState<Stack | null>()
 
   useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    let stop = () => {}
+
     const run = async () => {
       const stack = await Stack.create({ namespace })
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       window.stack = stack
+      window.Shard = Shard
+      window.ShardKind = ShardKind
       setStack(stack)
+      stop = () => stack.stop().catch(console.error)
     }
 
-    run().catch(console.error)
-  }, [])
+    run().catch((err) => {
+      alert(err)
+      console.error(err)
+    })
+
+    return () => stop()
+  }, [namespace])
 
-  return stack ? <div>use window.stack</div> : <div>Initializing Stack</div>
+  return stack
+    ? (
+    <div>
+      namespace: <pre>{namespace}</pre> <br /> <code>window.stack</code>,{' '}
+      <code>window.Shard</code>, <code>window.ShardKind</code>,{' '}
+      <code>localStorage.namespace</code>
+    </div>
+      )
+    : (
+    <div>Initializing Stack</div>
+      )
 }
 
 ReactDOM.render(

packages/lib/src/shard.ts

@@ -95,8 +95,7 @@ export class Shard<TData extends Data = Data> {
     stack: Stack,
     path: string
   ): Promise<Shard<TData>> {
-    // eslint-disable-next-line no-unused-vars
-    const [_, shard, cid, kind] = path.split('/')
+    const [shard, cid, kind] = path.split('/').slice(-3)
 
     if (shard !== 'shard') {
       throw new InvalidShardPathError()

packages/lib/src/stack.ts

@@ -53,7 +53,7 @@ export class Stack {
   public store: Store
 
   private announceInterval?: ReturnType<typeof setTimeout>
-  public announce = false
+  public announce = true
 
   constructor(public namespace: CID, public ipfs: IPFS, storage: Storage) {
     this.pubsub = new PubSub(ipfs, namespace.toString())
@@ -92,13 +92,9 @@ export class Stack {
     if (this.announceInterval) clearInterval(this.announceInterval)
     await this.store.stop()
     await this.pubsub.stop()
+    await this.ipfs.stop()
   }
 
-  /**
-   * Create stack
-   *
-   * @returns Stack instance
-   */
   public static async create({
     namespace,
     ipfs,
@@ -119,11 +115,6 @@ export class Stack {
     return stack
   }
 
-  /**
-   * Get connected peers
-   *
-   * @returns connected peers list
-   */
   public async peers(): Promise<Peer[]> {
     const peers = await this.ipfs.swarm.peers()
 
@@ -133,13 +124,6 @@ export class Stack {
     }))
   }
 
-  /**
-   * Connect to peer
-   *
-   * By default IPFS will connect to some peers automatically, no need to use it without a reason
-   *
-   * @param address MultiAddr to connect
-   */
   public async connect(address: string): Promise<void> {
     await this.ipfs.swarm.connect(address)
   }
@@ -150,8 +134,6 @@ export class Stack {
    * @param listener Will be called with peer info
    */
   public onPeerConnect(listener: (peer: Peer) => void): void {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     this.libp2p.addressManager.on('peer:connect', (event) => {
       listener({
         id: event.remotePeer.toB58String(),
@@ -166,8 +148,6 @@ export class Stack {
    * @param listener Will be called with peer info
    */
   public onPeerDisconnected(listener: (peer: Peer) => void): void {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     this.libp2p.addressManager.on('peer:disconnect', (event) => {
       listener({
         id: event.remotePeer.toB58String(),

packages/relay/project.json

@@ -10,8 +10,7 @@
         "assets": [
           "packages/relay/*.md",
           "packages/relay/Dockerfile",
-          "packages/relay/fly.toml",
-          "yarn.lock"
+          "packages/relay/fly.toml"
         ],
         "main": "packages/relay/src/index.ts",
         "outputPath": "dist/packages/relay",

webpack.config.js

@@ -3,6 +3,8 @@ const { join } = require('path');
 
 const nrwlConfig = require('@nrwl/react/plugins/webpack.js');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const CompressionPlugin = require('compression-webpack-plugin');
 
 module.exports = (config) => {
   nrwlConfig(config);
@@ -16,7 +18,15 @@ module.exports = (config) => {
         Buffer: ['buffer', 'Buffer'],
         process: 'process/browser',
       }),
+      new CompressionPlugin(),
+      // new BundleAnalyzerPlugin({ analyzerMode: 'static' })
     ],
+    optimization: {
+      mergeDuplicateChunks: true,
+      minimize: true,
+      moduleIds: 'size',
+      nodeEnv: 'production',
+    },
     resolve: {
       fallback: {
         util: require.resolve('util'),

yarn.lock

@@ -10032,6 +10032,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compression-webpack-plugin@npm:^9.2.0":
+  version: 9.2.0
+  resolution: "compression-webpack-plugin@npm:9.2.0"
+  dependencies:
+    schema-utils: ^4.0.0
+    serialize-javascript: ^6.0.0
+  peerDependencies:
+    webpack: ^5.1.0
+  checksum: 50ef78d0973f87ed8d7c30fdb31b009d409c288a77ee842d9b3b5b2348048f55148f510d3a0bd30b5c954e6701ed9fc08c3616ce46ad1eec8e0954b336a5f4b9
+  languageName: node
+  linkType: hard
+
 "compression@npm:^1.7.4":
   version: 1.7.4
   resolution: "compression@npm:1.7.4"
@@ -11941,6 +11953,7 @@ __metadata:
     "@typescript-eslint/parser": 5.16.0
     babel-jest: 27.5.1
     clsx: 1.1.1
+    compression-webpack-plugin: ^9.2.0
     core-js: 3.21.1
     cypress: 9.5.2
     eslint: 8.11.0
@@ -11974,6 +11987,7 @@ __metadata:
     tslib: 2.3.1
     typescript: ^4.6.2
     util: ^0.12.4
+    webpack-bundle-analyzer: ^4.5.0
     yaml-crypt: 0.7.6
     zx: 6.0.7
   languageName: unknown