JSPM

  • Created
  • Published
  • Downloads 19
  • Score
    100M100P100Q37231F
  • License MIT

The Plugin merkur

Package Exports

  • @ima/plugin-merkur
  • @ima/plugin-merkur/dist/cjs/main.js
  • @ima/plugin-merkur/dist/esm/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ima/plugin-merkur) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@ima/plugin-merkur

The @ima/plugin-merkur is for easy integration merkur widget to ima application.

Instalace

npm install @ima/plugin-merkur --save
// /app/build.js

var vendors = {
    common: [
      '@ima/plugin-merkur'
    ]
};

Usage

// /app/page/home/HomeController
import { AbstractController } from '@ima/core';
import { MerkurResource } from '@ima/plugin-merkur';

class HomeController extends AbstractController {
  /** @type {import('@ima/core').Dependencies} */
  static get $dependencies() {
    return [MerkurResource];
  }

  constructor(merkurResource) {
    super();

    this._merkurResource = merkurResource;
  }

  load() {
    const data = {
      containerSelector: '.widget__container',
      // When using merkur slot
      slot: {
        headline: {
          containerSelector: '.widget__headline-slot'
        }
      }
    };

    const widgetProperties = this._merkurResource
      .get('http://localhost:4444/widget', data)
      .then((response) => response.body);


    return {
      widgetProperties
    }
  }
}

// /app/page/home/HomeView
import React from 'react';
import { MerkurWidget } from '@merkur/integration-react';

class HomeView extends React.Component {
  render() {
    const { widgetProperties } = this.props;

    return (
      <div>
        <MerkurWidget widgetProperties={widgetProperties}>
          <div>Loading phrase</div>
        </MerkurWidget>
      </div>
    );
  }
}