https://github.com/infantiablue/vanjs

Pure vanilla javascript toolkit
https://github.com/infantiablue/vanjs

javascript jsx

Last synced: about 5 hours ago
JSON representation

Pure vanilla javascript toolkit

• Host: GitHub
• URL: https://github.com/infantiablue/vanjs
• Owner: infantiablue
• License: mit
• Created: 2021-04-26T14:48:03.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-09-20T16:14:46.000Z (about 2 years ago)
• Last Synced: 2024-04-22T20:07:46.612Z (7 months ago)
• Topics: javascript, jsx
• Language: JavaScript
• Homepage: https://infantiablue.github.io/vanjs/
• Size: 176 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vanjs

Vanilla Javascript toolkits for basic web opearations.

## Introduction

Inspired from [Vanilla Javascript library](http://vanilla-js.com/). The VanJS's goal is to implement some daily-used functions in pure javascript such as `notify`, `ready` ... and even JSX without React. It's not a library, think it like a toolkit, especially when making prototype.

## Usage

### Requirements

For now, you will need [Babel](https://babeljs.io/), [Bootstrap 5.x](https://getbootstrap.com/) and [Animate CSS 4.x](https://animate.style/) for user interface. The native components will be updated later

### Installation

Use in browser

```html

    

```

Use as Node module

```bash

yarn add vanjs-toolkit

#or

npm i vanjs-toolkit

```

then

```javascript

import { fadeIn, ready } from "vanjs-toolkit";

```

### JSX

Implement JSX in pure vanilla javscript. It's really convenient to use JSX without get the whole burden from React.

```html

  

  

    /** @jsx createElement */

    /*** @jsxFrag createFragment */

    const { createElement, appendChild, createFragment } = vanjs;

    const UsingFragment = (

        <div>

            <h1>VanJS Toolkit</h1>

                <div>

                <>

                    <p>This is a paragraph in a fragment in JSX without React.</p>

                </>

                    <p>This is a list by using map.  </p>

                <ul>

                    {[1, 2, 3].map((item) => (

                        <li>{item}</li>

                    ))}

                </ul>

            </div>

        </div>

    );

    document.querySelector("#root").appendChild(UsingFragment);

  

```

### ready()

This is called to check if the DOM is loaded. Example:

```javascript

    const { ready } = vanjs;

    ready(() => {

        // The DOM is loaded

    })

```

### notify()

Create simple pop up notification message, with Bootstrap CSS. Example:

```javascript

    const { notify } = vanjs;

    notify("There is an error", "danger");

```

### djangoCall()

To be updated

### getCookie()

To be updated

### countWords()

To be updated

### fadeIn(), fadeOut()

To be updated

### loadingDots()

To be updated

### randomColor()

To be updated

### isEmail()

To be updated

### minLength()

To be updated

### maxLength()

To be updated

### raneg()

Inspired from *range()* in Python, return a list from a pair of integer

```javascript

console.log(range(1,10)) // [1, 2, 3, 4, 5,6, 7, 8, 9]

```

## TODO

[] Develop own CSS style to remove Bootstrap dependency or partial import Bootstrap components

[] Implement Rollup

[] Test suite