https://github.com/omarefg/miru

A lightweight library that allows you to create reactive components using vanilla javascript
https://github.com/omarefg/miru

miru react reactive-components vanilla-javascript vuejs

Last synced: 3 months ago
JSON representation

A lightweight library that allows you to create reactive components using vanilla javascript

• Host: GitHub
• URL: https://github.com/omarefg/miru
• Owner: omarefg
• License: mit
• Created: 2020-12-30T21:58:11.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-30T22:39:28.000Z (about 4 years ago)
• Last Synced: 2024-10-01T17:07:53.870Z (3 months ago)
• Topics: miru, react, reactive-components, vanilla-javascript, vuejs
• Language: JavaScript
• Homepage:
• Size: 104 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Miru

Miru is a lightweight library that allows you to create reactive components using vanilla javascript

## Instructions

```bash

npm i @omarefg/miru

yarn add @omarefg/miru

```

## Example

First create your component

```js

import Miru from '@omarefg/miru'

// First create a View function, this function that must return an HMTL element

function View() {

  const { counter } = this.state;

  const { containerStyle, buttonStyle } = this.props;

  const container = document.createElement('div');

  const prevButton = document.createElement('button');

  const nextButton = document.createElement('button');

  const count = document.createElement('span');

  count.innerText = counter;

  prevButton.innerText = 'Prev';

  nextButton.innerText = 'Next';

  Object.keys(containerStyle).forEach((key) => {

    container.style[key] = containerStyle[key];

  });

  Object.keys(buttonStyle).forEach((key) => {

    prevButton.style[key] = buttonStyle[key];

    nextButton.style[key] = buttonStyle[key];

  });

  prevButton.addEventListener('click', this.handleButtonPressed(-1));

  nextButton.addEventListener('click', this.handleButtonPressed(1));

  container.appendChild(prevButton);

  container.appendChild(count);

  container.appendChild(nextButton);

  return container;

}

// Now, this is your component

// It must return a Miru instance

// The Miru instance receive two parameters

// 1. The view

// 2. The config object

export default MySuperFancyCounterComponent = (props) => new Miru(View, {

  props,

  defaultProps: {

    containerStyle: {

      width: '100vw',

      height: '100vh',

      display: 'flex',

      justifyContent: 'center',

      alignItems: 'center',

    },

    buttonStyle: {

      padding: '10px 30px',

      backgroundColor: 'green',

      borderRadius: '5px',

      border: 'none',

      color: 'white',

      margin: '0 5px',

    },

  },

  handlers: {

    handleButtonPressed(step) {

      const self = this;

      return () => {

        self.update({ counter: self.state.counter + step });

      };

    },

  },

  state: {

    counter: 0,

  },

});

```

Now you can call your component

```js

import MySuperFancyCounterComponent from 'path/to/MySuperFancyCounterComponent'

document.getElementById('app').appendChild(MySuperFancyCounterComponent())

```

## Config object

```js

{

    props: {}, // The props object, it represents the data passed to the component

    defaultProps: {}, // It represent the default value for the props in case the value was not passed

    handlers: {}, // All the logic your component will be using will be inside this object, then access to the handler just using this.handlerName

    state: {} // The state object

}

```

## API

- update: Must receive an object (the state) inside, this method triggers an update in the component with the new state.

## Why should I use Miru?

Why not?🤷🤷‍♀️ Give it a shot if you want a simple reactive SPA and dont want the tons of dependencies.