npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vasille

v2.3.9

Published

Vasille - Safe. Simple. Powerful.

Downloads

49

Readme

Vasille

Vasille.js logo

Vasille core library is frontend solution for safe, performant & powerful applications.

npm

Table of content

Installation

npm install vasille --save
npm install vasille-less --save
npm install vasille-magic --save

How to use Vasille

There are several modes to use Vasille.

Documentation for beginners (how to create the first project step by step):

Full documentation:

Getting ready be example

How SAFE is Vasille

The safe of your application is ensured by

  • 100% coverage of vasille code by unit tests. Each function, each branch is working as designed.
  • strong typing makes your javascript/typescript code safe as C++ code. All entities of vasille core library are strongly typed, including:
    • data fields & properties.
    • computed properties (function parameters & result).
    • methods.
    • events (defined handlers & event emit).
    • DOM events & DOM operation (attributing, styling, etc.).
    • slots of component.
    • references to children.
  • What you write is what you get. There are no hidden operations, you can control everything.
  • No asynchronous code, when the line of code is executed, the DOM and reactive things are already synced.

How SIMPLE is Vasille

Can you detect the correct order of console logs in the next code snippet:

import logo from './logo.svg';
import './App.css';
import {useEffect} from 'react';

function C1 ({children}) {
  console.log(1);

  useEffect(() => {
    console.log(2);
  });

  return <div>{children}</div>;
}

function C2 () {
  console.log(3);

  useEffect(() => {
    console.log(4);
  });

  return <div></div>;
}

function App() {
  return <C1>
    <C2/>
  </C1>;
}

export default App;

So let's see the same example using Vasille:

interface Options extends FragmentOptions {
    slot?: () => void;
}

const C1 : VFragment<Options> = ({slot}) => {
  console.log(1);
  
  <div>
    <vxSlot model={slot} />
  </div>;
  
  console.log(2);
}

const C2: VFragment = () => {
  console.log(3);
  
  <div></div>;
    
  console.log(4);
}

const App: VApp = () => {
  <C1>
    <C2/>
  </C1>
}

The C2 function is sent to C1 as function, so it will be called after console.log(1) and before console.log(2). No return is present in this case, then construction like for & if can be used in place of [].map() and ternary operator. The component function is called once, no recalls on component update.

How POWERFUL is Vasille

The secret of Vasille is a good task decomposition. The core library is composed of an effective reactive module and a DOM generation engine based on it.

Reactivity Module

Reactivity module is used to create a model of data. It can contain self-updating values, forward-only shared data. Reactivity of objects/fields can be disabled/enabled manually.

Reactivity Module

  • Destroyable is an entity which has a custom destructor.
  • IValue<T> is a common interface for any value container, with next members:
    • get $ gets the encapsulated value.
    • set $ manually update the encapsulated value, if enabled triggers updating of all linked data.
    • disable disables the reactivity.
    • enable enables the reactivity and triggers updating of all linked data.
  • Reference<T> contains a value of type T.
  • Mirror<T> syncs self value with another IValue container, can be used to share a value forward-only.
  • Pointer<T> same as Mirror, but it can switch between IValue target anytime.
  • Expression<ReturnType, Args...> is a self-updating value.
  • Reactive is a reactive object which can have multiple reactive fields, emit/receive events/signals.

DOM Generation Engine

DOM Generation Engine is used to describe a virtual DOM of reactive fragments, which will be reflected into a browser DOM and keep up to date it.

DOM Generation Engine

  • Fragment describes a virtual DOM node, which has siblings, children, parent & slots.
  • TextNode reflects a Text node.
  • INode reflects a Element node.
  • Tag reflect a self created Element node.
  • Extension reflects an existing Element node.
  • Component reflects a Element node created by a Tag child.
  • AppNode is root of a Vasille application, can be used to create applications in application.
  • App is root of a definitive Vasille application.
  • DebugNode reflects a Comment node, useful for debug.
  • Watch recompose children nodes on model value change.
  • RepeatNode creates multiples children nodes using the same code multiple time.
  • BaseView represent a view in context of MVC (Model-View-Controller).
  • ObjectView repeats slot content for each value of ObjectModel.
  • MapView repeats slot content for each MapModel value.
  • SetView repeats slot content for each SetModel value.
  • ArrayView repeats slot content for each ArrayModel value respecting its order.

CDN

<script src="https://unpkg.com/vasille"></script>

Best Practices applicable to Vasille Core Library

Questions

If you have questions, feel free to contact the maintainer of the project: