npm package: @kdh/widgets
Description: OS.js v3 Widgets
Author: Anders Evenrud
Latest version: 3.0.5

<p align="center">
  <img alt="OS.js Logo" src="https://raw.githubusercontent.com/os-js/gfx/master/logo-big.png" />
</p>

[OS.js](https://www.os-js.org/) is an [open-source](https://raw.githubusercontent.com/os-js/OS.js/master/LICENSE) desktop implementation for your browser with a fully-fledged window manager, Application APIs, GUI toolkits and filesystem abstraction.

[![Build Status](https://travis-ci.org/os-js/osjs-widgets.svg?branch=master)](https://travis-ci.org/os-js/osjs-widgets)
[![Support](https://img.shields.io/badge/patreon-support-orange.svg)](https://www.patreon.com/user?u=2978551&ty=h&u=2978551)
[![Back](https://opencollective.com/osjs/tiers/backer/badge.svg?label=backer&color=brightgreen)](https://opencollective.com/osjs)
[![Sponsor](https://opencollective.com/osjs/tiers/sponsor/badge.svg?label=sponsor&color=brightgreen)](https://opencollective.com/osjs)
[![Donate](https://img.shields.io/badge/liberapay-donate-yellowgreen.svg)](https://liberapay.com/os-js/)
[![Donate](https://img.shields.io/badge/paypal-donate-yellow.svg)](https://paypal.me/andersevenrud)
[![Community](https://img.shields.io/badge/join-community-green.svg)](https://community.os-js.org/)

# OS.js v3 Widgets module

This is the Widgets module for OS.js v3

* https://manual.os-js.org/v3/install/
* https://manual.os-js.org/v3/guide/provider/
* https://manual.os-js.org/v3/tutorial/widget/

## Installation

First, install the module:

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

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

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

osjs.register(WidgetServiceProvider);
```

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

```css
@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`):

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

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

## Contribution

* **Become a [Patreon](https://www.patreon.com/user?u=2978551&ty=h&u=2978551)**
* **Support on [Open Collective](https://opencollective.com/osjs)**
* [Contribution Guide](https://github.com/os-js/OS.js/blob/v3/CONTRIBUTING.md)

## Documentation

See the [Official Manuals](https://manual.os-js.org/v3/) for articles, tutorials and guides.

## Links

* [Official Chat](https://gitter.im/os-js/OS.js)
* [Community Forums and Announcements](https://community.os-js.org/)
* [Homepage](https://os-js.org/)
* [Twitter](https://twitter.com/osjsorg) ([author](https://twitter.com/andersevenrud))
* [Google+](https://plus.google.com/b/113399210633478618934/113399210633478618934)
* [Facebook](https://www.facebook.com/os.js.org)
* [Docker Hub](https://hub.docker.com/u/osjs/)

```
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 = '<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;
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