Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/justinfernald/jstml
A simple HTML generator in native JavaScript Syntax. Inspired from the Flutter syntax.
https://github.com/justinfernald/jstml
Last synced: 5 days ago
JSON representation
A simple HTML generator in native JavaScript Syntax. Inspired from the Flutter syntax.
- Host: GitHub
- URL: https://github.com/justinfernald/jstml
- Owner: justinfernald
- Created: 2020-07-11T22:20:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T13:36:27.000Z (about 2 years ago)
- Last Synced: 2024-11-02T07:06:16.648Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 287 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JSTML (JavaScript Text Markup Language)
Currently not working on this. If someone wants to contribute feel free to make pull requests.
### Description
Tiny project I just wanted to make really quick to take a break. It is a simple HTML generator in native JavaScript Syntax. It is inspired from the Flutter syntax of generating views.
This runs off of Browserify, but this can easily just be a browser script, but I wanted to make everything packaged neatly. This code is also running a development server using Budo which live reloads on save and bundles the script files.
### Current Features
* Supports all HTML tags
* Has autoset unit types for style properties (passing in a number to padding converts it to number in pixel units)
* Supports adding into tree with DOM Element
* Supports all events (uses Camelcase ex. `onClick: e => console.log("I got clicked!")`)
### Plans
I am not planning to work on this that much as I am busy with other stuff, so it is very featureless, but things to add are:
* Style support (outside of setting them by string with attributes)
* Event support
* State managment
* Inline CSS properties with scoped styles (adding hover event CSS in the attributes)
* Have attribute titled `css` then create Style Sheet based on object just the inline style along with css attributes
* Hot Reload (maybe not)
* Tooling to convert DOM Element to JSTML
* Rebuild to use React.createElement
* VSCode Extension for better tooling and formatting
* Convert to TypeScript
* Documentation on how to use JSTML
* Making components simple (This is the essence of this library)
### Example
The idea is that you just import the tag you will use from JSTML then if you need to add properties, then the first argument will take in an object, but if it does not get an object you can pass it another JSTML Element, DOM Element, or String.
**Code:**
```javascript
let { a, div, p } = require("../JSTML.js");
let generatedDOM = a(
div(
"This is JSTML",
p(
{style: "color: red"},
"I'm a paragraph"),
div(
div(
"This is a quick example I whipped up.",
a(
{href: "https://justinfernald.com"},
"An anchor tag I am."
)
)
)
)
).toDOM();
window.onload = () => {
document.getElementById("app").appendChild(generatedDOM);
};
```
**Result:**
