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>or
<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>