feat(explorer): add some elements

packages/explorer/.parcelrc

@@ -1,4 +1,11 @@
 {
+  "compressors": {
+    "*.{html,css,js,svg,map}": [
+      "...",
+      "@parcel/compressor-gzip",
+      "@parcel/compressor-brotli"
+    ]
+  },
   "extends": "@parcel/config-default",
   "transformers": {
     "*.svg": [

packages/explorer/README.md

@@ -3,3 +3,7 @@
 Simple playground to play around with DStack
 
 [Open](https://dstack-explorer.netlify.app/)
+
+### P.S.
+
+I'm not familiar with react, so there may be some dirty code, if you are web developer and want to join DStack text us in [discord](https://discord.gg/vWS9yzjA57).

packages/explorer/package.json

@@ -14,6 +14,8 @@
   "description": "DStack Web explorer/playground to debug your project or just play around",
   "devDependencies": {
     "@emotion/babel-plugin": "^11.7.2",
+    "@parcel/compressor-brotli": "^2.2.1",
+    "@parcel/compressor-gzip": "^2.2.1",
     "@parcel/config-default": "^2.2.1",
     "@parcel/transformer-svg-react": "^2.2.1",
     "@types/react": "^17.0.38",

packages/explorer/project.json

@@ -1,49 +1,31 @@
 {
   "projectType": "application",
   "root": "packages/explorer",
+  "serve": {
+    "executor": "@nrwl/workspace:run-commands",
+    "options": {
+      "commands": [
+        "nx build lib",
+        "nx build ipfs",
+        "cd packages/explorer && yarn serve"
+      ],
+      "cwd": "/"
+    }
+  },
   "sourceRoot": "packages/explorer/src",
   "tags": [],
   "targets": {
-    "build": {
-      "dependsOn": [
-        {
-          "projects": "dependencies",
-          "target": "ipfs:build"
-        },
-        {
-          "projects": "dependencies",
-          "target": "lib:build"
-        }
+    "executor": "@nrwl/workspace:run-commands",
+    "options": {
+      "commands": [
+        "nx build lib",
+        "nx build ipfs",
+        "yarn build"
       ],
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "commands": [
-          "yarn build"
-        ],
-        "cwd": "packages/explorer"
-      },
-      "outputs": [
-        "packages/explorer/dist"
-      ]
+      "cwd": "/"
     },
-    "serve": {
-      "dependsOn": [
-        {
-          "projects": "dependencies",
-          "target": "ipfs:build"
-        },
-        {
-          "projects": "dependencies",
-          "target": "lib:build"
-        }
-      ],
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "commands": [
-          "yarn serve"
-        ],
-        "cwd": "packages/explorer"
-      }
-    }
+    "outputs": [
+      "packages/explorer/dist"
+    ]
   }
 }

packages/explorer/src/app.tsx

@@ -1,28 +1,39 @@
 import { create } from '@dstack-js/ipfs';
 import { Stack } from '@dstack-js/lib';
 import React, { useState } from 'react';
+import { Dashboard } from './dashboard';
 
 export const App: React.FunctionComponent<{}> = () => {
-  const [ready, setReady] = useState(false);
+  const [stack, setStack] = useState<Stack | null>(null);
+  const [fillInfo, setFillInfo] = useState(true);
+  const [namespace, setNamespace] = useState('dstack');
 
   const init = async (): Promise<void> => {
+    setFillInfo(false);
     localStorage.setItem('debug', '*');
+
     const ipfs = await create();
-    const stack = await Stack.create('stack', ipfs);
+    const stack = await Stack.create(namespace, ipfs);
     stack.debug();
+
     // @ts-expect-error
     window.stack = stack;
 
-    setReady(true);
+    setStack(stack);
   };
 
-  React.useEffect(() => {
-    init();
-  }, []);
+  if (fillInfo) {
+    return (
+      <div>
+        <input
+          type="text"
+          value={namespace}
+          onChange={(e) => setNamespace(e.target.value)}
+        ></input>
+        <button onClick={init}>Start</button>
+      </div>
+    );
+  }
 
-  return ready ? (
-    <pre>use `window.stack` to get started</pre>
-  ) : (
-    <h3>Initializing</h3>
-  );
+  return stack ? <Dashboard stack={stack} /> : <h3>Initializing</h3>;
 };

packages/explorer/src/dashboard.tsx

@@ -0,0 +1,72 @@
+import { Stack, Peer } from '@dstack-js/lib';
+import React, { useEffect, useState } from 'react';
+
+export const Dashboard: React.FunctionComponent<{ stack: Stack }> = (props) => {
+  const [peers, setPeers] = useState<Peer[]>([]);
+  const [topic, setTopic] = useState<string>('date');
+  const [events, setEvents] = useState<string[]>([]);
+
+  useEffect(() => {
+    props.stack.pubsub.subscribe('$store', (msg) => {
+      events.push(`$store: ${msg.from} ${(msg.data as any).key}`);
+      setEvents(events.slice(1).slice(-5));
+    });
+
+    const updateState = async () => {
+      setPeers(await props.stack.peers());
+    };
+
+    const interval = setInterval(() => {
+      updateState();
+    }, 100);
+
+    return () => {
+      props.stack.pubsub.unsubscribe('$store');
+      clearInterval(interval);
+    };
+  }, []);
+
+  useEffect(() => {
+    props.stack.pubsub.subscribe(topic, (msg) => {
+      events.push(`${topic}: ${msg.from} ${msg.data}`);
+      setEvents(events.slice(1).slice(-5));
+    });
+
+    return () => {
+      props.stack.pubsub.unsubscribe(topic);
+    };
+  }, [topic]);
+
+  return (
+    <div>
+      <pre>use `window.stack` to interact with DStack</pre>
+      <br />
+      Topic:
+      <input
+        type="text"
+        value={topic}
+        onChange={(e) => setTopic(e.target.value)}
+      />
+      <br />
+      <button
+        onClick={() =>
+          props.stack.pubsub.publish(topic, new Date().toISOString())
+        }
+      >
+        Publish event that contains date
+      </button>
+      <br />
+      <h3>Connected Peers:</h3>
+      {peers.map((peer) => (
+        <li key={peer.id}>{peer.id}</li>
+      ))}
+      <br />
+      <h3>Captured events:</h3>
+      {events.map((event) => (
+        <div key={event}>
+          {event} <br />
+        </div>
+      ))}
+    </div>
+  );
+};

packages/lib/src/stack.ts

@@ -12,7 +12,7 @@ export class Stack {
   public store: Store
   public pubsub: PubSub
 
-  private constructor(public namespace: string, public ipfs: IPFS) {
+  private constructor(public namespace: string, public ipfs: IPFS, public id: string) {
     this.pubsub = new PubSub(ipfs, namespace)
     this.store = new Store(ipfs, namespace, this.pubsub)
   }
@@ -29,7 +29,8 @@ export class Stack {
    * @returns Stack instance
    */
   public static async create(namespace: string, ipfs: IPFS) {
-    const stack = new Stack(namespace, ipfs)
+    const { id } = await ipfs.id()
+    const stack = new Stack(namespace, ipfs, id)
 
     await stack.store.start()
     return stack

yarn.lock

@@ -3901,6 +3901,20 @@
     slice-ansi "^4.0.0"
     string-width "^4.2.0"
 
+"@parcel/compressor-brotli@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@parcel/compressor-brotli/-/compressor-brotli-2.2.1.tgz#0ebcb44f656e0f2093f6fa43ef074fbc12d77a49"
+  integrity sha512-CXmneKgudev9VthRShKL20JTV8paYS53A2LBA5nspfgEPnbFeAzX2LV0/QqY983+f+WCEWzieySGcVRxCxK5nQ==
+  dependencies:
+    "@parcel/plugin" "^2.2.1"
+
+"@parcel/compressor-gzip@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@parcel/compressor-gzip/-/compressor-gzip-2.2.1.tgz#3c9182888ca83f86e8f1da48bbe2059e50ee7bb1"
+  integrity sha512-aj9TQifbxqWNQxhUUMvC/UJ6+fY+nPrqJbAJHjrJGrbYncjS0jok1Wkh40iu0qY5OAz3YGUvzadr3nFgL5UsDQ==
+  dependencies:
+    "@parcel/plugin" "^2.2.1"
+
 "@parcel/compressor-raw@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@parcel/compressor-raw/-/compressor-raw-2.2.1.tgz#fd2d19d8939cfdee23e95b3e95a3d6b102c3f2f3"