Git Product home page Git Product logo

ui5-cc-md's Introduction

UI5 custom control ui5-cc-md

This namespace contains a custom control rendering regular + github-flavored Markdown content, either provided as a string or from a file.
It outputs plain HTML, ready to be included in an XML view.

Install

$> yarn add ui5-cc-md
# or
$> npm install ui5-cc-md

Included controls

  • Markdown: transforms Markdown to HTML
    • properties: (note: either content or fromFile can be used, not both)
      • content: <String>: Markdown as raw string
      • fromFile: <Path>: relative path to a file containing Markdwon
    • aggregations: -

Usage

  1. define the dependeny in $yourapp/package.json

    // it is already in "dependencies" after installation
    "ui5": {
      "dependencies": [
        // ...
        "ui5-cc-md",
        // ...
      ]
    }
  2. declare the namespace in your XML view and use the custom control from that namespace

    <mvc:View ... 
            xmlns:md="cc.md"
            ...>
       <md:Markdown content="***markdown is nice!***&#13;&#10;&#13;&#10;if only there wasn't the CR problem in XML view string" />
       <md:Markdown fromFile="./fragment.md" />
       <md:Markdown content="{/markdownContent}" />
    </mvc:View>

How it works

Markdown uses the npm module marked for transforming content from Markdown to HTML.

Build time (in apps)

Use ui5 build --all to produce a deployable version of your app including ui5-cc-md and its’ control(s).

Other than that, nothing specific to note for using ui5-cc-md in builds in UI5 apps.

Tests

The test folder contains a minimal UI5 app requiring ui5-cc-md.

For testing manually, do:

$> yarn test:manual # runs ui5 serve
# now point a browser to http://localhost:8080

The livereload middleware is included, so changes to the test app get reloaded immediately.

A full automated test suite is setup with Jest + puppeteer, starting ui5 serve and running all /test/**/*.test.js :

$> cd test/ui5-app
$> yarn # for installing runtime dependencies
$> cd ..
$> yarn test
# sample output:
 PASS  test/ui5-app/basic.test.js
  Markdown
    ✓ should render markdown via content property (2374 ms)
    ✓ should render markdown via fromFile property (854 ms)
    ✓ should render markdown via binding (672 ms)

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        4.512 s, estimated 5 s
Ran all test suites.
✨  Done in 11.90s.

License

This work is dual-licensed under Apache 2.0 and the Derived Beer-ware License. The official license will be Apache 2.0, but ultimately you can choose between one of them if you use this work.

When you like this stuff, buy @vobu, @matz3, @wridgeu a beer or buy @pmuessig a coke when you see them.

ui5-cc-md's People

Contributors

vobu avatar marianfoo avatar wridgeu avatar phreis avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.