The following documentation is just relevant for dash4 plugin development. For informations on how to use Dash4 please read this: Dash4 documentation

Table of Contents

* Installation
* Usage
* License

Installation

``shell
npm i @dash4/server
`

Usage

`ts
import { Dash4Plugin, IDash4Plugin } from '@dash4/server';
import { IncomingMessage, ServerResponse } from 'http';

interface IClientConfig {
something: string;
}

interface IOptions {
something: string;
// enable/disable dark mode
dark?: boolean;
// grid with per breakpoint
// [12,6,3] means 100% width on small viewports, 50% on medium viewports and 33.3% on large viewports
width?: number[];
}

class PluginName extends Dash4Plugin implements IDash4Plugin {

private _something: string;

constructor({ dark, width, something }: IOptions) {
super({
dark,
width,
name: 'PluginName',
lowerCaseName: 'plugin-name',
});

this._something = something;
}

/**
* clientConfig object will be accessible in client via Plugin component props
*/
public get clientConfig() {
return {
something: this._something,
};
}

/**
* add files as script/style tag to the index.html and make them available
* it's also possible to define them like this:
* {
* pathName: string;
* scriptTag?: boolean;
* }
* this is needed for dynamic imports
*/
public get clientFiles() {
return [path.join(__dirname, '../../dist/plugins/plugin-name/main.js')];
}

/**
* method connected will be executed after a connection via sockets is established
* super class provides a on and send method
*/
public connected = async (on: TOn, send: TSend) => {
this.on('connected', () => {
this.send('data', 'some conntent');
});
};

/**
* method severRequest allowes to provide rest endpoints (for example images)
*/
public serverRequest = async (req: IncomingMessage, res: ServerResponse) => {
if (req.url === imagePublicPath) {
res.writeHead(200, {
'Content-Type': 'image/png',
});
res.end(await fs.readFile(imageDiskPath));
return true;
}
return false;
};
}
``

License

The @dash4/server is MIT licensed