This JavaScript Declarative UI library provides an easy to use wrapper to create HTMLElements in your web application. This allows you to build web apps without the direct use of HTML in a declarative way.
Install with NPM using your CLI:
npm install --save tool-shop-js-widget
Import ES Module into your JavaScript file and create Widget.
import { Widget } from "tool-shop-js-widget";
Widget({
text: "Hello World",
// Further options go here...
});
Load your script as module into a index.html file:
<!-- ... -->
<script type="module" src="index.js"></script>
</head>
<!-- ... -->
Createa index.js file, import the JS UI Kit Widget and render your first Widget to the page:
import { Widget } from "tool-shop-js-widget";
Widget({
parent: document.body,
text: "Hello World!"
});
Run your app locally with Parcel (You can use any tool like Webpack or Browserify for that.):
# Install Parcel globally
npm install -g parcel
# Run app locally:
parcel index.html
# Open your browser at http://localhost:1234
A GitHub Action is setup to automatically publish the latest version on making a GitHub Release. Just bump the version in the package.json file and create a tag on GitHub for the release.
There is a default Widget to cover all needs. For all native HTML elments short hand Widget constructors are available.
// General constructor:
const htmlElement = Widget({
tag: "h1",
text: "Hello World"
});
// Equivalent is:
const htmlElement = Headline("Hello World");
Remove an instance of HTMLElement from DOM:
Widget.remove(element);
All options are optional!
Will define the HTML tag to use for the underlaying HTML element.
Default: "div"
Type: string
Example:
Widget({
tag: "button"
});
Will define the inner text.
Type: string | ((string) => void) => void
Examples:
// Pass a string
Widget({
text: "Hello World"
});
// Pass to callback. Can be used with async actions.
Widget({
text: async cb => {
// ... await something async
cb("Hello World");
}
});
Events do always have the related HTML element bind to the this context. All native HTML elements events like onClick, onMouseOver, etc. are available.
Example:
Widget({
onClick() {
this.style.backgroundColor = "red";
}
});
This is a special non native event that gets called when the HTML element is created.
Image({
onCreate() {
this.style.opacity = 0;
},
onLoad() {
this.style.opacity = 1;
}
});
TBA
TBA
TBA
TBA
TBA
TBA
TBA
Slots allow you to easily replace child elements that are nested. In example you want to change the page element in a layout.
// Create instance of our layout
const layout = Widget({
style: "layout",
children: [
Widget(/* ... header ... */ ),
Widget({
slot: "content"
}),
Widget(/* ... footer ... */ ),
]
});
// Change the page rendered inside the layout
layout.slots.content(
Widget(/* ... page ... */)
);
The library comes with some custom in build Widgets ready to use.
TBA
TBA
TBA
TBA
TBA
TBA
TBA
TBA
TBA
- Complete readme file