@gelight/sml-client

v0.2.2

Published

2 years ago

SML - The Simple Markup Language for Browsers

Downloads

0High
0Medium
0Low

gelight

ReliableTxt WhitespaceSV SimpleML SML Simple Markup Language

SML Client

The Simple Markup Language for clients

You also can get help in the german version inside the @gelight/sml package.

Releases

UMD runtime browser version available on Github in the /releases directory.

Installation

There are three primary ways of adding SML to a project:

Import it as a CDN package on the page
Download the JavaScript file and host them yourself
Install it using npm

Release Notes

Latest version:

Detailed release notes for each version are available on GitHub.

CDN

For using SML as runtime build in your browser you can use the latest version with:

<script src="https://unpkg.com/@gelight/sml-client"></script>

<script src="https://cdn.jsdelivr.net/npm/@gelight/sml-client"></script>

Download and Self Host

If you want to avoid using build tools but can't use a CDN in production then you can download the relevant .js file and host it using your own web server. You can then include it using a <script> tag, just like with the CDN approach.

The files can be browsed and downloaded from a CDN such as unpkg or jsDelivr.

NPM

NPM is the recommended installation method.

npm install @gelight/sml-client

yarn add @gelight/sml-client

Examples

Parse a simple SML document your node project

Parse your first simple SML Dokument

import { SmlDocument } from "@gelight/sml";

const doc = SmlDocument.parse(`
Hello
  About
    Name My name is SML
    Description I am a Simple Markup Language
  End
  About This is "a simple" SML document
End
`);

// Get all attributes from SML document
const attrs = doc.getRoot().getElement("About").getAttributes();

console.log(values);

A complete browser example by using per CDN import

The complete example is also available as on codepen.io

Create a index.html file on your local computer
Copy the sources below in your created html file and open it in your browser.

<html>
    <head>
        <title>SML - Simple Markup Language</title>
        <style>
            html, body {
                width: 100%;
                height: 100%;
              }
              body {
                background: linear-gradient(161deg, #333a47 0%, #1c1d24 100%);
                color: #8ca0c5;
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .output {
                padding: 1rem;
                background: #3b4d6e;
                background: linear-gradient(161deg, #333a47 0%, #1c1d24 100%);
                box-shadow: 0 0 1rem 0 rgba(0,0,0,.5);
                border: 1px dashed #8ca0c5;
                border-radius: .5rem;
                margin: auto;
                display: flex;
                flex-direction: column;
              }
              
              .attribute {
                display: flex;
                
              }
              
              .value {
                border: .2rem solid #90ef8d;
                background: #5f9467;
                color: #fff;
                margin: .2rem;
                padding: .5rem;
                border-radius: .5rem;
              }
        </style>
    </head>
    <body>
        <div class="output"></div>

        <script src="https://unpkg.com/@gelight/sml-client"></script>
        <script>
          const renderAttributes = (attrs) => {
            let v = document.querySelector(".output");
            for (const attr of attrs) {
              let attrElm = document.createElement("div");
              attrElm.className = "attribute";

              for (const value of attr.getValues()) {
                let valueElm = document.createElement("div");
                valueElm.className = "value";
                let valueText = document.createTextNode(value);
                valueElm.appendChild(valueText);
                attrElm.appendChild(valueElm);
              }

              v.append(attrElm);
            }
          }

          const doc = SML.SmlDocument.parse(`
          Hello
            About
              Name My name is SML
              Description I am a Simple Markup Language
            End
            About This is "a simple" SML document
          End
          `);

          // Get all attributes from SML document
          const attrs = doc.getRoot().getElement("About").getAttributes();

          console.log(attrs);

          // Show attrubutes from element "About" as HTML
          renderAttributes(attrs);
        </script>
    </body>
</html>

Client to server requests with SmlRequest

This client example use the new SmlRequest class which is in experimental state.

<script src="https://unpkg.com/@gelight/sml-client"></script>
<script>
  const doc = await SML.SmlRequest.post("/peoples", SML.SmlDocument.parse(`
  MyBodyData
    FirstName William
    LastName Smith
    Age 37
  End
  `));

  /**
   * SmlRequest use the fatech api for requests and 
   * only expects a SmlDocument as a text/plain response from the server.
   * 
   * The SmlRequest class will parse the response for you and returns the 
   * response as an SmlDocument.
   * 
   * Available methods are GET, POST, PUT, PATCH and DELETE
   */
  const attrs = doc.getRoot().getAttributes();
</script>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme