@compossibru/compossibru v1.1.1

@compossibru/compossibru

compossibru helps you to build a composite UI easily.

How does it work?

compossibru is a wrapper around next.js.

How to install and configure?

Install it:

npm install @compossibru/compossibru

Add widgets:

npm install @compossibru/widget-twitter-widgets

Add scripts in your package.json:

{
  "scripts": {
    "start": "npx compossibru start",
    "build": "npx compossibru build"
  }
}

Add configuration to your .compossibrurc file:

Version: 1
Routes:
  Home:
    Route: /
    Layout: layouts/main.ejs
    Containers:
      left:
        - "@compossibru/widget-twitter-widgets":
            type: Timeline
            options:
              dataSource:
                sourceType: profile
                screenName: npmjs
              options:
                username: npmjs
                height: 400
      middle:
        - "@compossibru/widget-twitter-widgets":
            type: Timeline
            options:
              dataSource:
                sourceType: profile
                screenName: github
              options:
                username: github
                height: 400
      right:
        - "@compossibru/widget-twitter-widgets":
            type: Timeline
            options:
              dataSource:
                sourceType: profile
                screenName: internetofshit
              options:
                username: internetofshit
                height: 400

Add custom layouts to your layouts folder (e.g. main.ejs):

<div>
    <div>
        <%- left %>
    </div>
    <div>
        <%- middle %>
    </div>
    <div>
        <%- right %>
    </div>
</div>

The final project structure looks as following:

.
├── layouts
│   ├── main.ejs   
├── .compossibrurc
├── package.json

Congrats. You are done. compossibru is configured!

To start:

npm start

Enter http://localhost:3000

How to write a widget?

A widget can be written with different libraries (e.g. React, Vue, jQuery, etc.). Important here is that the entrypoint needs to be a function where widgetId and widgetContext is passed to.

See the following example implementations using different libraries:

Example: React

import React from 'react';
import ReactDOM from 'react-dom';

export default (widgetId, widgetContext) => {
    ReactDOM.render(
        <div>{JSON.stringify(widgetContext)}</div>,
        document.getElementById(widgetId)
    );
}

Example: Vue

import Vue from 'vue';

export default (widgetId, widgetContext) => {
    new Vue({
        render: h => h('div', JSON.stringify(widgetContext))
    }).$mount(`#${widgetId}`)
};

Example: jQuery

import $ from 'jquery';

export default (widgetId, widgetContext) => {
    $(document).ready(() => {
        $(`#${widgetId}`).html(`<div>${JSON.stringify(widgetContext)}</div>`);
    });
};

What is a widget context?

Beside the basic widget configuration (which widget should be used in which container), it is possible to pass extended configurations to each widget and that's called widget context.

See the following example configurations and the corresponding widget context:

Configuration

[...]
Containers:
  main:
    - my-awesome-widget
    - my-second-awesome-widget:
        someKey: someValue
    - my-third-awesome-widget:
        someObjectKey:
          someArrayKey:
            - someArrayElement1
            - someArrayElement2

Widget context for my-awesome-widget

{}

Widget context for my-second-awesome-widget

{
    "someKey": "someValue"
}

Widget context for my-third-awesome-widget

{
    "someObjectKey": {
        "someArrayKey": [
            "someArrayElement1",
            "someArrayElement2"
        ]
    }
}

Which features are still left?

• create CI/CD (possibly GitHub Actions)
• create init CLI command to auto-generate configuration
• improve path handling in bin/cli.js
• change configuration to be case insensitive
• add pub/sub support
• add plugin support
• add i18n plugin
• add auth plugin
• add logger plugin

License

MIT