tarhon
Advanced tools
Readme
Tarhon is a Javascript Library for building user interfaces.
Declarative Tarhon makes it truly painless to build interactive UIs. Create simple views using its html templating mechanism, and Tarhon will efficiently make use of the browser capacities to render, and the Observable series allow you to manage state changes at every level with instant UI response.
Component based Tarhon allows you to create interactive UI in a Component Object Model fashion. Since the actual HTML code and the component logic are written together in javascript rather than having extra languages or templating engines, you can easily pass rich data through to the components.
Learn Once, Write anywhere Tarhon uses technology present in all modern browsers and since you already know most of the things it relies on, you have very little to learn. We do not make any assumptions on the other frameworks you may use and due to the way it's designed it can be used with any of them painlessly.
True HTML, no JSX Tarhon uses named template literals rather than relying on a transpiler and some subset / superset of HTML language. It works exactly as you expect it to.
use a browser window where you import our module file: unpkg.com CDN
Import as script type module
<script crossorigin type="module" src="https://unpkg.com/tarhon?module"></script>
import as ESM Module
import * as tarhon from 'https://unpkg.com/tarhon?module';
use npm and link into your public folder
npm install tarhon
and then you can import from the npm package (please note that you may need to link or use a bundler.)
import * as tarhon from 'tarhon';
More examples and an actual documentation will come soon.
/index.mjs
import { observeComponent, html, styled } from 'tarhon';
export class Button extends observeComponent(HTMLElement) {
static get selector() {
return 'zalter-button';
}
static style = styled({
':host': {
'align-items': 'center',
'appearance': 'none',
'border-radius': '4px',
'cursor': 'pointer',
'display': 'inline-flex',
'justify-content': 'center',
'font-family': 'Arial, sans-serif',
'font-weight': 600,
'font-size': '14px',
'line-height': '1.3',
'letter-spacing': '0.25px',
'outline': 0,
'padding': '8px 12px',
'position': 'relative',
'user-select': 'none',
'white-space': 'nowrap',
'background-color': '#4f44e0',
'color': '#ffffff'
},
':host(:active)': {
'box-shadow': '0px 0px 0px 4px rgba(79, 68, 224, 0.2)'
}
});
constructor() {
super();
this.render();
}
render() {
super.render();
this.renderRoot.appendChild(html`
<div>
<slot></slot>
</div>
`);
}
}
customElements.define(Button.selector, Button);
/index.html
<html>
<head>
<script type="module" src="index.mjs"></script>
</head>
<body>
<zalter-button>
Click Me
</zalter-button>
</body>
</html>
FAQs
Web Component Library
The npm package tarhon receives a total of 0 weekly downloads. As such, tarhon popularity was classified as not popular.
We found that tarhon 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.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.