0.1.2 • Published 7 days ago
sugilite v0.1.2
Sugilite
Sugilite is a frontend javascript ui library based on React, and powered by jQuery.
Include In Your Project
Script Tag
<script src="path/to/jquery"></script>
<script src="path/to/sugilite"></script>
CommonJS
const sugilite = require("sugilite");
If sugilite does not detect a browser, it will use the module jsdom.
AMD
require(["path/to/sugilite"], function (sugilite) {
// code here
});
Buildling and Compilation
JSDOM Exclusion
Often, bundlers will bundle jsdom as a dependency. You can get arround this by listing jsdom as an external.
JSX Factory
Sugilite's jsx factory function is c
.
/** @jsx sugilite.c */
// this
<h1>hi</h1>;
// gets compiled into
sugilite.c("h1", null, "hi");
Compiler
You can generally use anything designed for react and configure it to use sugilite.c
.
Babel
.babelrc
:
{
"presets": ["@babel/preset-react"]
}
jsx files:
/** @jsx sugilite.c */
/** @jsxFrag sugilite.f */
Typescript
tsconfig.json
:
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "sugilite.c"
}
}
Signals
Sugilite uses signals, which can be used as jsx children.
signal(initial)
Creates a new signal based with the passed initial value
const mysignal = signal(0);
.effect(callback)
Fires a callback whenever the value of a signal changes
mysignal.effect(() => console.log(mysignal.value));
.value
const mysignal = signal(0);
console.log(mysignal.value); // 0
mysignal.value = 1;
console.log(mysignal.value); // 1