npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

use-dcp-worker

v4.0.0

Published

Embed the DCP Worker in a React app

Downloads

383

Readme

use-dcp-worker

npm version standard-readme compliant

A React hook to use a DCP Worker.

The Distributive Compute Protocol (DCP), is a fast, secure, and powerful parallel computing platform built on web technology. DCP breaks large compute workloads into small slices, computes them in parallel on different devices, and returns the results to the client.

A DCP Worker performs compute tasks on the network in exchange for DCCs (Distributive Compute Credits). This package allows anyone to setup a DCP Worker within their own React projects.

Find out more at https://docs.dcp.dev/.

Table of Contents

Install

npm add use-dcp-worker

Usage

Load https://scheduler.distributed.computer/dcp-client/dcp-client.js before the React starts hydrating the web app. e.g.,

<script src="https://scheduler.distributed.computer/dcp-client/dcp-client.js"></script>

Then wrap the part of the app that well use useDCPWorker with a WorkerProvider component.

import ReactDOM from 'react-dom/client';
import { WorkerProvider } from 'use-dcp-worker';

ReactDOM.createRoot(document.getElementById('root')).render(
  <WorkerProvider>
    <App />
  </WorkerProvider>,
);

Finally, call the hook in the components and start hooking the worker's events into you app.

import { useDCPWorker } from 'use-dcp-worker';

export function App() {
  const { worker, workerState, workerStatistics } = useDCPWorker({
    workerOptions: {
      paymentAddress: address,
    },
  });

  // ...
}

API

How it works

The Worker requires an options object for configuration. This hook passes in dcpConfig.worker defined in the global scope, with options passed to the hook and those saved in local storage overwritten on top, straight to the constructor. The hook was written to handle multiple insances of the hook defined in a React application, ensuring a single instance of a Worker is used/instanciated (including between component updates) - achieved using React state management. Once a Worker is instantiated, it is in a global context state that all instances of the hook will reference. The state and statistics the hook provides, workerState and workerStatistics, is also handled in a global React state context. Custom handling of state and statistics can always be achieved using the worker returned with an understanding of the Worker API and Worker events.

Editing Worker Options

As part of the Worker API, the worker has a workerOptions property that describe the current active options configuring the worker, and mutating this object will modify worker options.

Note: To achieve desired React component updates regarding changes to certain options that may be featured in a UI, such as paymentAddress - worker.workerOptions is a Proxy object with custom handling to handle component updates and writes to local storage.

Parameters

The hook accepts a single object with the following parameters:

  • identity?: Keystore: A Keystore object (dcp.wallet.Keystore) which is passed to the Worker constructor and set as the Worker's identity when communicating over the network. If a Keystore is not provided, an arbitrary one will be generated.

  • useLocalStorage?: boolean = true: A flag to toggle the use of the browser's local storage. The workerOptions object is the entity to be saved to local storage and is updated accordingly when calling setWorkerOptions.

  • workerOptions: object: The contents of this object will override the default values coming from the worker configuration coming from dcpConfig(provided by dcp-client, worker node sourced from dcp-worker). The only required property of workerOptions is paymentAddress. The following properties describe the worker options object configuring the DCP Worker:

    • paymentAddress: string | Address | Keystore: A string, Address (dcp.wallet.Address) or Keystore (dcp.wallet.Keystore) identifying a DCP Bank Account to deposit earned DCCs.

      Note: Passing an invalid paymentAddress will be logged to the console but will not cause the hook to throw an error. The Worker will not be constructed (worker === undefined) and the hook will retry construction/initialization on each re-render.

    • trustComputeGroupOrigins?: boolean = true: Trust the scheduler to tell client about allowed origins for jobs in a compute group.

    • allowOrigins?: object: Allow list permitting network access beyond DCP messages to services. This list is used only in setting up the DCP Worker. After the worker is constructed/loaded, the originManager is responsible for managing origins (see Managing Origins). It's empty by default.

      • any: []: A list of origins that are allowed to communicate with, for all purposes.
      • fetchWorkFunctions: []: A list of origins that are allowed to fetch the work function from.
      • fetchArguments: []: A list of origins that are allowed to fetch work function arguments from.
      • fetchData: []: A list of origins that are allowed to fetch input set data from.
      • sendResults: []: A list of origins that are allowed to send results to.
    • minimumWage?: object: The minimum payout per slice the worker will accept from a job. Will default with the following structure:

      • CPU: number = 0
      • GPU: number = 0
      • in: number = 0
      • out: number = 0
    • computeGroups?: []: List of compute groups the worker is in and the authorization to join them. A compute group is to be described as { joinKey: 'exampleGroup', joinSecret: 'password' }.

    • leavePublicGroup?: boolean = false: A flag that controls if the worker should omit fetching work from the public compute group. If not defined, this flag is evaluated to false.

    • jobAddresses?: []: If populated, worker will only fetch slices from jobs corresponding to the job addresses in this list.

    • maxWorkingSandboxes?: number | undefined: Maximum number of sandboxes allowed to do work. If undefined, then the Supervisor will determine a safe limit, based off of machine hardware.

    • shouldStopWorkerImmediately?: boolean: If true, when the worker is called to stop, it will terminate all working sandboxes without waiting for them to finish. If false, the worker will wait for all sandboxes to finish computing before terminating.

Note: Learn more about Keystore and Address in our Wallet API documentation.

Returns

This hook returns an object with the following properties:

  • worker: Worker: Refer to the Worker API documentation.
  • workerState: object: Stores status of worker states. Stored globally and preseved between component updates.
    • isLoaded: boolean: True once the worker is properly initialized.
    • working: boolean: True if the worker is doing work, false otherwise.
    • willWork: boolean: True when the worker is starting to do work, false when the worker is stopping.
    • fetching: boolean: True when the worker is fetching for slices to compute, false otherwise.
    • submitting: boolean: True when the worker is submitting results to the scheduler, false otherwise.
    • error: Error | boolean: Set when a worker error has occured, false otherwise.
    • workingSandboxes: number: Number of sandboxes currently doing work.
  • workerStatistics: object: Stores a global count of worker statistics for a browser session. Stored globally and preseved between component updates.
    • slices: number: Number of slices completed.
    • credits: BigNumber: Total credits earned.
    • computeTime: number: Total time computed (ms).

Note: Learn more about Sandbox in our Sandbox API & Compute API docs.

Managing Origins

The worker returned has the originManager property, which is an instance of the OriginAccessManager class responsible for managing the worker's allowed origins. originManager is undefined until the worker is properly initialized.

Upon construction of the worker, the worker options allowOrigins property is read into the construction of the OriginAccessManager. Properties of allowOrigins translate to a purpose on the OAM, with their values, being a list of origins, are added under that purpose (and null key). The any property translates to a null purpose, which matches any purpose. For example, isAllowed will return true for origins stored under a null purpose, regardless the purpose and key combination queried.

OriginAccessManager Methods

  • add(origin, purpose, key): Adds (allows) the origin under the purpose and key. A null purpose and/or key will match any purpose and/or key, respectively.
  • remove(origin, purpose, key): Removes (un-allows) the origin under the purpose and key. A null purpose and/or key will not match any purpose and/or key.
  • remove_byKey(key): Removes all origins for all purposes under the key. A null key is not accepted, must be a string.
  • getAllowList(purpose, key): returns a list of origins under the purpose and key. A null purpose is not accepted, must be a string. Previously added origins under null purpose and/or key will match any purpose and/or key, respectively.
  • isAllowed(origin, purpose, key): returns true if origin is allowed under the purpose and key. A null purpose is not accepted, must be a string. Previously added origins under null purpose and/or key will match any purpose and/or key, respectively.

Maintainers

@bryan-hoang

Contributing

PRs accepted.

Small note: If editing the README, please conform to the standard-readme specification.

License

MIT © 2024 Distributive Corp.