Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qrailibs/cwml
CWML is JS library that extends your HTML and adds support for custom-defined tags/components.
https://github.com/qrailibs/cwml
css css-framework css-grid custom-markup dynamic-html framework html js js-framework library markup-language reactive
Last synced: 2 days ago
JSON representation
CWML is JS library that extends your HTML and adds support for custom-defined tags/components.
- Host: GitHub
- URL: https://github.com/qrailibs/cwml
- Owner: qrailibs
- License: mit
- Created: 2021-02-06T07:26:26.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-12-30T07:45:04.000Z (about 3 years ago)
- Last Synced: 2024-12-04T03:13:05.608Z (2 months ago)
- Topics: css, css-framework, css-grid, custom-markup, dynamic-html, framework, html, js, js-framework, library, markup-language, reactive
- Language: JavaScript
- Homepage:
- Size: 131 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
CWML is brand-new JavaScript micro-framework to extend HTML and add support for defining custom reactive tags. Micro-framework takes only 3kb and doesn't requires any compilation.
**CWML 2.0 is here - [CWML2](https://github.com/qrai/CWML2)**
# Installation
1. Copy code of src/cwml.min.js
2. Create file cwml.min.js in your project dist folder
3. Write `` in your .html page
# How to use
If you need to basically **register new tag** for your HTML page:
```html
Hello World Tag!
cwml.init();
cwml.registerTag(
$tag = 'my-tag'
);
```
**NOTE: place your <script> tag at bottom of the <body>**
If you need to **add support of custom attributes to your tag**:
```html
Hello World Tag!
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = {
'my-attribute': function(el,oldVal,newVal) {
console.log('my-attribute was changed to ' + newVal + '!');
}
}
);
```
Also **you can add event-handling to your tag**.
Event will be handled for every instance of your tag, you can get handled instance by `el` argument.
You can handle every html event and also cwml events:
- `__init__` event (When tag was initialized/registered)
- `__added__` event (When tag element was added to document)
- `__removed__` event (When tag element was removed from document)
- `__adopted__` event (When tag element was moved/adopted by another element in document)
Example of `click` event handling:
```html
Hello World Tag!
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = {},
$events = {
click: function(el) {
console.log('my-tag was clicked!');
}
},
);
```
If you need to **define style of the element** you can use `$props` to set css properties of the tag. Example:
```html
Hello World Tag!
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = {},
$events = {},
$props = {
'color': 'red',
'background-color': 'black'
}
);
```
Also **you can define inner HTML of your tag** aka **template of the tag**. That template of tag is defined by specifying `$content` attribute. You can receive attributes of element with `{name-of-attribute}` and initial inner with `{inner}`. Example:
Example:
```html
My initial inner
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = {}, // we dont have to specify attributes if we dont need to observe them
$events = {},
$props = {},
$content = `
<h1>{inner} (Attribute value:{my-attribute})</h1>
`
);
```
Content of custom tag works fine and `my-attribute` value assigned. But what if we wil change `my-attribute` dynamicly? - Content will not update. That's because our tag isn't reactive, but **you can make it reactive**! Example:
```html
My initial inner
cwml.init();
cwml.registerTag(
$tag = 'my-tag',
$attrs = ['my-attribute'], // specify attributes, they will be observed
$events = {},
$props = {},
$content = `
<h1>{inner} (Attribute value:{my-attribute})</h1>
`
);
```
Also CWML allows you to register attributes for existing HTML tags, example:
```html
Some header
cwml.init();
cwml.registerAttr(
$query = 'h1', // what elements will support that tag (css-like query)
$attr = 'my-attribute',
$callback = function(el,newVal) {
console.log('my-attribute value was changed to ' + newVal);
},
);
```
# Browsers Support
| Feature | Chrome | Firefox | Safari | Opera | Edge | IE | Android WebView |
|-------------|--------|---------|--------|-------|------|----|-----------------|
| Custom tags | v66+ | v63+ | v10.1+ | v53+ | v79+ | - | v66+ |
### Global support: 94.1%
But you can use web-components polyfill also.