Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

tarhon

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tarhon

Web Component Library

  • 0.2.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
decreased by-100%
Maintainers
1
Weekly downloads
 
Created
Source

Tarhon · GitHub license npm version

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.

Installation

Using a CDN

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';
    

Using NPM

  • 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';
    

Examples

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>

Keywords

FAQs

Package last updated on 19 Jul 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc