https://github.com/denull/swick

A micro framework for building reactive DOM components, state management and publishing events.
https://github.com/denull/swick

dom events framework state-management ui

Last synced: 20 days ago
JSON representation

A micro framework for building reactive DOM components, state management and publishing events.

• Host: GitHub
• URL: https://github.com/denull/swick
• Owner: denull
• License: mit
• Created: 2020-07-08T00:50:36.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-10-19T18:54:05.000Z (4 months ago)
• Last Synced: 2024-12-17T03:38:59.297Z (about 2 months ago)
• Topics: dom, events, framework, state-management, ui
• Language: JavaScript
• Homepage:
• Size: 241 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Swick

**Swick** is a very lightweight and efficient alternative to popular UI frameworks, such as Vue, React or Angular. Conceptually it's closest to Svelte (because it operates without Virtual DOM), but it does not require any preprocessing (transpiling) of your code. It's state and event management model is similar to (and inspired by) Backbone.JS.

## ⚠️ Warning: Early Development

Please note that Swick is still being developed, and version 1.0 has not been released yet. This means that some parts of it are already usable, but others are not, and its API can just at any moment (and possibly many times before 1.0 release). Use at your own risk, and feel free to leave your thoughts and suggestions.

## Getting started

Currently the intended use is either manually import `swick.js` (or `swick.min.js`) from Swick repository, or use CDN:

```html

```

Put this `script` tag in your page's `head` element.

*Note*. By default, **Swick does not support Internet Explorer** as it uses modern ES6 syntax. If your app still requires IE11 support, add polyfills (from `https://polyfill.io/v3/polyfill.min.js`, for example), and use compatability version: `swick-compat.js` or `swick-compat.min.js` (they are slightly larger than ES6 versions).

Now you can declare components and initialise Swick:

```html

  

    

  

  

    


      

      


    


    


      

      


        


      

    


    

      // Declare component named 'a-button'

      const AButton = Swick.component('a-button', function(data, watch) {

        // Link 'label' property of this component to textContent of the child named 'label'

        watch(data, 'label', this.childContent.bind(this, 'label'));

      });

      // Initialise your app

      Swick.mount();

    

  

```

Swick uses some conventions about the way your HTML should be structured and how CSS classes should be named. It's strongly recommended to follow those rules:

* Your app should contain an element with id `templates`, with a child element per each component you will declare. Each such element must have a class with the same name as corresponding component (in kebab-case, like `a-button` in example above). Those children will be removed at page load and used to instantiate components. You may want to add a CSS rule `#templates { display: none; }` in the page head to prevent flash of those elements before the page is fully loaded. Do not use `script` tag for your `templates` element: it should contain actual DOM nodes, not just text content.

* It's recommended to have a root element with id `app`. After `Swick.mount()` call it will become the root of your application and all components will be initialised within it. Alternatively, you can pass root element to `Swick.mount()` call.

* Your components should have kebab-cased CSS classes corresponding to their names (like `a-button` above). For top-level components, the component name should always be the first class in the `class` attribute (and the second one if it's a part of another component). By convention, all component names should start with `a-` prefix (but that convention is not enforced in any way).

* All parts of your components must have CSS classes in form of `component-name__part-name`: like `a-button__label` above. This class should always be the first class in the `class` attribute (and if it's a component itself, it's name should be the second class). That part will become available on your component instance as `label` property.

This was an example of how a simple component could be defined and used. Before reading about Swick components in more detail it's worth learning about Swick [event system](https://denull.github.io/swick#events) and [state management](https://denull.github.io/swick#models).