Newton's Principia Mathematica
    Have ideas to improve npm?Join in the discussion! »

    @agiledigital/mule-preview
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/agiledigital__mule-preview package

    2.2.5 • Public • Published

    Mule Preview

    GitHub License Known Vulnerabilities npm (scoped) FOSSA Status semantic-release

    Summary

    This is the core module of the Mule Preview project.

    It is a self contained bundle that can be included in other projects to render Mule XML files in a browser context using React.

    See the Mule Preview Browser Extension for example usage.

    Instructions

    The module exposes four components that can be imported and used in a React project:

    • <MulePreviewDiffUrl contentUrls={["https://a.xml", "https://b.xml"] contentRoot="."} />
    • <MulePreviewDiffContent contentStrings={["<mule></mule>", "<mule></mule>"] contentRoot="."} />
    • <MulePreviewUrl contentUrl="https://a.xml" contentRoot="."} />
    • <MulePreviewContent contentString="<mule></mule>" contentRoot="."} />

    where:

    • contentUrls is a tuple of two URLs to be diffed

    • contentStrings is a tuple of two strings with XML content to be diffed

    • contentUrl is a URL to be rendered as a preview

    • contentString is a string with XML to be rendered as a preview

    • contentRoot is the a prefix to prepend to any requests for the Mule component image files.

        import React from "react";
        import ReactDOM from "react-dom";
        import {
            MulePreviewDiffUrl,
        } from "mule-preview";
      
      
        ReactDOM.render(
            <MulePreviewDiffUrl
              contentUrls={["https://example.com/muleA.xml", "https://example.com/muleB.xml"]}
              contentRoot="."
            />,
            document.getElementById('root-node')
        );
      

    Preparing

    On a fresh checkout of the codebase you will need to extract the mappings and icon assets from Anypoint Studio using mule-metadata-extractor.

    Download the latest release of mule-metadata-extractor and run the following commands:

    export ANYPOINT_STUDIO_INSTALLATION=/opt/AnypointStudio
    java -jar mule-metadata-extractor-1.0.14-standalone.jar -d "${ANYPOINT_STUDIO_INSTALLATION}" -o public/ generate-mappings
    java -jar mule-metadata-extractor-1.0.14-standalone.jar -d "${ANYPOINT_STUDIO_INSTALLATION}" -o public/img/icons extract-images
    java -jar mule-metadata-extractor-1.0.14-standalone.jar-d "${ANYPOINT_STUDIO_INSTALLATION}" -o public/img/icons apply-light-theme
    

    At some point we may provide pre-extracted bundles that can be used with Mule Preview. We are still unsure about the licencing conditions around bundling and redistributing Mulesoft assets. We are waiting for a response from Mulesoft. In the meantime feel free to extract the files yourself for personal use.

    Developing

    To work on this module, the following command will mount Mule Preview in a test environment with hot reloading.

    $ npm start
    

    Simply navigate to http://localhost:8080 in a browser to view the test environment

    Building

    Simply run these command to produce a production build

    $ npm run build
    

    The release files will be placed in the "dist" folder

    Acknowledgements

    Math icons made by Freepik from www.flaticon.com

    License

    FOSSA Status

    Keywords

    none

    Install

    npm i @agiledigital/mule-preview

    DownloadsWeekly Downloads

    29

    Version

    2.2.5

    License

    Apache-2.0

    Unpacked Size

    14.4 MB

    Total Files

    267

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar