@kdh/widgets NPM

OS.js is an open-source desktop implementation for your browser with a fully-fledged window manager, Application APIs, GUI toolkits and filesystem abstraction.

OS.js v3 Widgets module

This is the Widgets module for OS.js v3

Installation

First, install the module:

npm install --save --production @osjs/widgets

In your client bootstrap (src/client/index.js):

import {WidgetServiceProvider} from '@osjs/widgets';

osjs.register(WidgetServiceProvider);

And in your stylesheet (src/client/index.scss):

@import "~@osjs/widgets/dist/main.css";

To set up a default set of widgets in the user settings, modify your client configuration file (src/client/config.js):

{
  desktop: {
    settings: {
      widgets: [{
        name: 'digitalclock'
      }]
    }
  }
}

A contextmenu entry on the desktop is automatically added so users can add these themselves.

Contribution

Become a Patreon
Support on Open Collective
Contribution Guide

Documentation

See the Official Manuals for articles, tutorials and guides.

Links

const { JSDOM } = require('jsdom');
const DEFAULT_HTML = '<html><body></body></html>';
const jsdom = new JSDOM(DEFAULT_HTML, {
    url: "https://www.bbc.co.uk",
    referrer: "https://www.bbc.co.uk",
    contentType: "text/html",
    userAgent: "node.js",
    includeNodeLocations: true
});
const { window } = jsdom;
const { document, navigator } = window;

Why dts-gen works by running the code of the module you're targeting and this causes problems for modules that rely on the browser to run (since it runs from a node environment).

The following errors are common in these cases.

ReferenceError: window is not defined SecurityError: localStorage is not available for opaque origins The following instructions will help to fix these.

Instructions Install dts-gen as a dependency of the module you're using. Also install jsdom. Later we'll use the local versions of these modules to run the command and prevent polluting the global namespace.

yarn add dts-gen jsdom Make sure the target module you want is also installed and navigate to this the nodemodules package json.

For my usecase I'm working with storejs.

yarn add storejs

If you use vscode and have it set up on your command line run the following.

code node_modules/storejs/package.json Look for the main key in the package.json.

{ "main": "dist/store.common.js", } This is the file that needs to be edited. Open the file and add the following snippet to the top of that file.

const { JSDOM } = require('jsdom'); const DEFAULT_HTML = ''; const jsdom = new JSDOM(DEFAULT_HTML, { url: "https://www.bbc.co.uk", referrer: "https://www.bbc.co.uk", contentType: "text/html", userAgent: "node.js", includeNodeLocations: true }); const { window } = jsdom; const { document, navigator } = window; Finally run the following to generate the types.

yarn dts-gen -m storejs This will create a storejs.d.ts file in the package root.

You can now safely remove dts-gen and (optional) jsdom from your dependencies.

yarn remove dts-gen jsdom

osjs

@kdh/client @kdh/common @kdh/dialogs @types/deepmerge @types/jest @types/typescript @types/webpack-env deepmerge ts-loader typescript

@infinitebrahmanuniverse/nolb-_kd @everything-registry/sub-chunk-512 @kdh/osjs

4 years ago

4 years ago

4 years ago

4 years ago