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

@equinor/workspace-core

v1.0.0

Published

[![Version](https://img.shields.io/npm/v/@equinor/workspace-core.svg)](https://npmjs.org/package/@equinor/workspace-core) [![Downloads/week](https://img.shields.io/npm/dw/@equinor/workspace-core.svg)](https://npmjs.org/package/@equinor/workspace-core) [![

Downloads

46

Readme

Workspace Core

Version Downloads/week License Sisze

<< Project Readme

Install from NPM

npm install @equinor/workspace-core --save

Workspace Controller

import { createWorkspaceController } from "@equinor/workspace-core"
const workspaceController = createWorkspaceController();

The workspace controller is a common hub for all controllers. The idea is for the workspace controller to be pure JS/TS and not be dependent on any JS framework. The Workspace controller will consist of the followings sections.

Controllers

A collection of building blocks allows the creation of a workspace. And the building blocks themselves are interchangeable and will be customized toward the workspaces needs. Controllers are the actuators of the workspace; nothing happens without a controller. The goal is to create many small and specific controllers that do one thing well. To add a controller use the addController function on the workspace controller.


const controller = {
    name: 'dataSource',
    controller: dataSourceController,
    config: (dc, ws) => {
        dc.onDataChanged(data) => {
          wc.setData(data);
        });
    },
};

const workspaceController = createWorkspaceController();

workspaceController.addController(controller)

Middleware

Controllers are supposed to be 100% decoupled from each other. Middleware is the translator that connects one or multiple controllers. When adding a controller a sort of middleware can be added to the config as shown above. This ensures that all controllers can be used standalone and ensures high flexibility with low complexity. The addMiddleware function allows you to do the same as the config but you only get supplied the workspace controller.

function myDataSourceMiddleware( ws) => {
        ws.controller.dataSource.onDataChanged(data) => {
          wc.setData(data);
        });
    };

workspaceController.addMiddleware(myDataSourceMiddleware);

This will do the same as when you registered the controller but middleware allows for extreme flexibility, having the whole workspace at your disposal.

Data

A workspace i driven by data has a data and filteredData field. to sett these use the corresponding setDataand setFilteredData functions. When data is has changed all callback registered ont the onDataChanged event is triggered. Same thing goes for onFilteredDataChanged.

Context

Reserved slot for the developer(you) to define and utilize. Most common use for it is to share data from one controller to another. Through context and middleware but can be used passed data inn to the context.

setContext

workspaceController.setContext((currentContext)=> ({
  ...currentContext,
  person: {
    name: "Tom",
    lastName: "Jones"
    age: 82
  }
}));

Click and onClick

To be abel to trigger events by click, this will trigger the onClick event on the workspace controller.


workspaceController.addController({
    name: 'dataSource',
    controller: dataSourceController,
    config: (dc, ws) => {
        dc.onDataChanged((data) => {
          wc.setData(data);
        });
        wc.onClick((e, ws) => {
          if (e.type === "updateData") {
            ws.setData(e.data);
          }
        });
    },
});

workspaceController.click({
  type: "updateData",
  data: [
    // some data...
  ]
});

Error

The workspace controller consists of the "Core" events that most controllers will depend on in some form. Core Workspace events are the following.

  • onError

Core Functions:

  • throwError

Controllers and middleware usually bind through workspace controller events. Alternatively, you can extend the workspace controller with common data fields through the controller's context property.

Here is an diagram of use se figure1:

flowchart LR
    classDef default fill:#0000,stroke:#333,stroke-width:4px,stroke-dasharray: 5 5,text-align:center,color:#fff;
    classDef controller fill:#006699,stroke:none,text-align:left;
    classDef config fill:#008899,stroke:none
    classDef middleware fill:#996666,stroke:none

    wc[<h2>Workspace Controller</h2><span><br> - Controllers <br> - Middleware/Binders <br> - Config <br> - Context<br>- Workspace Events </span>]:::controller
    wsDataSource[<b>Data Source</b> Controller]:::controller
    wsFilter[<b>Data Filter</b> Controller]:::controller

    wsFilterConfig[Data Source - Config]:::config
    wsDataSourceConfig[Data Filter - Config]:::config

    subgraph Read Controller
        wcErrorConfig[Error Config]:::config
        wcError[Error Controller]:::controller
    end

    subgraph Middleware
        wcLoggerMiddleware[Development Logger]:::middleware
    end

    wc --> wcLoggerMiddleware
    wsDataSource --> wcLoggerMiddleware
    wsFilter --> wcLoggerMiddleware


    wc --> wcErrorConfig --> wcError


    subgraph Controllers
        direction BT
        wsFilter --> wsFilterConfig
        wsDataSource --> wsDataSourceConfig
    end

    wsDataSourceConfig <--> wc
    wsFilterConfig <--> wc

Figure 1. Workspace Controller connections for Fusion Workspace Framework

This library was generated with Nx.

Building

Run nx build workspace-core to build the library.

Running unit tests

Run nx test workspace-core to execute the unit tests via Jest.