@allnulled/ui-script
Advanced tools
UI-Script is a shorter & simpler substitute for HTML syntax.
You have a free tester online version here:
The documentation can be found:
Before starting, import the package via npm:
npm install --save @allnulled/ui-script
First, you import the CSS file for general and per-component styling:
<link rel="stylesheet" type="text/css" href="./node_modules/@allnulled/ui-script/docs/lib/ui-script/ui-script.css" />
Second, you import the JS file for general and per-component logic:
<script src="./node_modules/@allnulled/ui-script/docs/lib/ui-script/ui-script.js"></script>
Once you have done this, 2 variables are added into the global scope window:
uiscript_api anduiscript_components.However, you can use import statement too to retrieve the uiscript_api.
The uiscript_api comes packed like this:
window.uiscript_api = {
ast: { parser: ast_parser },
parser,
components: window.uiscript_components
};
The uiscript_api.parser.parse(uiscript) function returns HTML syntax from uiscript syntax.
The uiscript_api.ast.parser.parse(uiscript) function returns an object syntax from uiscript syntax.
The uiscript_api.components holds the uiscript_components object.
The uiscript_components holds all the ui-script (Vue2) components of the library, this is:
The following example demonstrates how to create a new Vue.js v2 component from UI-Scripting markup.
<script>
Vue.component("CustomComponent", {
template: uiscript_api.parser.parse(`
!div {
!xwindow {
!xwindowtitle {{ Título de la ventana }}
!xwindowbody {
!xtitle {{ Título de página }}
!xsubtitle {{ Subttulo de página }}
!xbreadcrumb {{ Ruta » a » subdireccion }}
!xpanel {
!xform {
!xformfield {{ Usuario: }}
!xformfield {{ Contraseña: }}
}
}
!xlayoutnopaddingtop [style="text-align: right;"] {
!xbutton {{ Entrar }}
}
}
!xwindowfooter {
!xwindowfooteritem {{ Pie de ventana }}
}
}
}
`)
});
</script>
uiscriptTo parse uiscript code into html you can simply:
uiscript file1.uis file2.uis file3.uis
This will output the equivalent html files beside each.
xcomponentsTo create a setup of files (lib folder) you can simply:
xcomponents docs
This will create a lib folder inside the docs folder with:
calo: castelog import statement.win7: win7 CSS library.ui-script: ui-script JS and CSS files, and the whole component API too, in case you need to modify it.The xdialogport provides a special API for Windows 7 based dialogs with very easy asynchronous methods. Visit its documentation here to take full advantage of this API.
As easy as:
const confirmation_1 = await Vue.prototype.$dialogs.confirm("Did you like it?", "Question", "A daily custion", "Yes", "No");
const confirmation_2 = await Vue.prototype.$dialogs.confirm({
html: "Did you like it?",
title: "Question",
footer: "A daily custion",
button_accept: "Yes",
button_reject: "No"
});
The most of them are just CSS. But useful anyway to wrap the contents of your templates.
FAQs
UI-Script is a shorter & simpler substitute for HTML syntax
We found that @allnulled/ui-script demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.