/MiniJs

Simple FrontEnd Library built with vanilla JavaScript

Primary LanguageJavaScriptMIT LicenseMIT

Mini Js

Introduction

  • MiniJs is a frontEnd library

Instalation

    git clone https://github.com/mohammedhrima/MiniJs.git Project_name
    cd Project_name

Folders_Structure

  • your directory will look something like this:
.
├── Mini
│   ├── lib.js
│   └── validTags.js
│
├── src
│   ├── pages
│   │   ├── App.js
│   │   ├── your_page1.js
│   │   ├── your_page2.js
│   │   └── ... 
│   │
│   ├── main.js
│   └── style.css
│
├── static (output files/ don't bother yourself with them)
│   ├── index.js
│   └── index.css
│
├── .gitignore
├── esbuild.config.js
├── index.html
├── package.json
├── server.js
└── README.md

Get_Started

  • run:
    npm i
  • open 2 terminals:
    # first Terminal (here you will get parsing errors)
    npm run transpile
    # seconds Terminal (here you will get serving errors)
    npm run serve

Your_first_component

  • create new file HelloWorld.js in pages folder
    // ./pages/HelloWorld.js

    // all js files should starts with the following line
    import Mini from "../../Mini/lib";

    function HelloWorld()
    {
        return (<h1>Hello World</h1>);
    }

    export default HelloWorld

Routes

    // main.js
    import Mini from "../Mini/lib";
    import HelloWorld from "./pages/HelloWorld";

    function Main() {
        return (
            <>
                {/* means default path for all routes if not found */}
                <Mini.Routes path="*" element={HelloWorld} />
            </>
        );
    }

    Mini.render(<Main />, document.getElementById("app"));

Pass_arguments_to_component_from_another_component

    // ./pages/SayMyName.js
    import Mini from "../../Mini/lib";
    import "./SayMyName.css";
    
    function SayMyName({ name }) {
        return (
            <>
                <h1>Say My name: {name}</h1>
            </>
        );
    }
    export default SayMyName;
    import Mini from "../../Mini/lib";
    import SayMyName from "./SayMyName";

    function HelloWorld() {
        return (
            <>
                <SayMyName name={"Heisenberg"} />
                <h1>You're goddamn right </h1>
            </>
        );
    }
    export default HelloWorld;

Pass_arguments_to_component_from_router

    // main.js
    import Mini from "../Mini/lib";
    import HelloWorld from "./pages/HelloWorld";
    import SayMyName from "./pages/SayMyName";

    function Main() {
        return (
            <>
                <Mini.Routes path="*" element={HelloWorld } />
                <Mini.Routes path="/saymyname/:name" element={SayMyName } />
            </>
        );
    }

    Mini.render(<Main />, document.getElementById("app"));

let's_add_some_styling

  • create file pages/SayMyName.css
    // ./pages/SayMyName.js
    import Mini from "../../Mini/lib";
    import "./SayMyName.css";
    
    function SayMyName({ name }) {
        return (
            <>
                <h1 className="_name" >Say My name: {name}</h1>
            </>
        );
    }
    export default SayMyName;
    /*  ./pages/SayMyName.css  */
    ._name {
        color: red;
        text-align: center;
    }

Variables

  • similar to useState in react
    // pages/State.js
    import Mini from "../../Mini/lib";
    
    function State() {
      let count = new Mini.Variable(0);
      const handleclique = () => {
        count.value += 1;
      };
    
      return (
            <div>
                  <h1>
                    count: <p>{count}</p>
                  </h1>
                  <button onclick={handleclique}>clique me</button>
            </div>
      );
    }
    
    export default State;
  • add the following route in main.js
<Mini.Routes path="/state" element={State} />

Mouse_events

  • mouseover / mouseout
    function Coponent() {
        const check = (event) => {
            console.log("event is ", event);
        }
        return (<div onmouseover={() => check("mouse over")} onmouseout={() => check("mouse out")} ></div>);
    }

Ressources

JSX parsing:

Routing:

States: