@maelgruand/simple-way

v2.0.0

Published

3 months ago

Simple Way, a better way to develop applications

Downloads

0High
0Medium
0Low

maelgruand

framework typescript dom

Simple Way

Simple Way is a lightweight JavaScript/TypeScript framework to easily create DOM components: View, Button, Form, Input, Text, Link, Form, Span, List, Modal, Tab, Toast, Toat Container, Navbar , Notifications
It’s simple, fast, and usable in any front-end project.

🚀 Installation

From GitHub

npm install github:MaelProgramming/simple-way

From npm (once published)

npm install @maelgruand/[email protected]

Basic Exemples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test Simple Way</title>
</head>

<body>
  <script type="module">
    import { View, Button, Input, Text, NavBar, Toast } 
      from "https://unpkg.com/@maelgruand/simple-way/dist/index.js";

    // Create main container
    const app = View("app");
    document.body.appendChild(app);

    // Input field
    const input = Input("name", "text");

    // Button with click event
    const btn = Button("btn1", () => {
      alert(`Hello ${input.value}`);
      Toast(`Hello ${input.value}`, "success");
    }, "Click me");

    app.appendChild(input);
    app.appendChild(btn);

    // Add a simple navigation bar
    const navbar = NavBar("mainNav", [
      { label: "Home", href: "#" },
      { label: "About", href: "#about" },
      { label: "Contact", href: "#contact" }
    ]);
    document.body.prepend(navbar);

  </script>
</body>
</html>

| Component | Description | | ---------------------------------------- | --------------------------------------------------------------------- | | View(id) | Creates a <div> with a specific id | | Text(id, content) | Creates a <p> element with given content | | Input(id, type) | Creates an <input> of type text, password, checkbox, etc. | | Button(id, functionToExecute, content) | Creates a <button> with a click callback and text | | Form(id, method, onSubmit) | Creates a <form> with a method (get/post) and onsubmit callback | | Link(id, href) | Creates an <a> element with a link | | Span(id, content, className) | Creates a <span> element with text and CSS class | | List(id, items, ordered) | Creates a <ul> or <ol> list with items | | Modal(id, title, content) | Creates a modal window with title and content | | Tab(id, tabs) | Creates a tabs component with multiple tabs | | Toast(message, type) | Shows a temporary notification (success, error, info) | | ToastContainer() | Creates a container for toasts | | NavBar(id, links, background, color) | Creates a sticky navigation bar with links and optional styling |

Notifications

That framework include Notification creation using:

import { Notification } from "@maelgruand/simple-way";


Notification.create("Hello !", { 
  body: "That's a notification.", 
  icon: "/icon.png" // your own icon of your page
}, () => {
  console.log("Notification cliquée !");
});

Included CSS classes

| Element | CSS Classes | |-----------|-------------| | Buttons | .muil-btn, .muil-btn-primary, .muil-btn-secondary | | Inputs | .muil-input | | Modals | .muil-modal-overlay, .muil-modal-box | | Toasts | .muil-toast, .muil-toast-success, .muil-toast-error, .muil-toast-info | | Navbar | .muil-navbar | | Tabs | .muil-tabs-header button, .muil-tabs-header button.active |

New Modification

Added database provider in core/Elements.ts

Introduced the createDatabase function to initialize and connect a database.
Currently supports IndexedDBDriver as the default provider.
Allows specifying the database name (providerName) and stores/collections (stores).
Returns a ready-to-use Database instance with all CRUD operations.

import { DB } from './index.ts'

const db = DB("MyAppDB", ["users", "posts"]);
await db.insert("users", { name: "YourName", age: 18 })

Adding backend integration

This framework now supports dynamic PHP backend calls via HTTP, making it easy to connect frontend logic to PHP scripts.

Setup

Make sure a PHP server is running (XAMPP, WAMP, Laragon, etc.).
Place your PHP scripts in a folder, e.g., php/. Example:

php/
├─ getUser.php
└─ processData.php

Example for php/getUser.php

<?php
header('Content-Type: application/json');

$input = json_decode(file_get_contents('php://input'), true);
$userId = $input['userId'] ?? null;

$users = [
    "1" => ["id" => "1", "name" => "Mael"],
    "2" => ["id" => "2", "name" => "Alice"]
];

echo json_encode($users[$userId] ?? null);

Usage

import { Backend } from '@maelgruand/simple-way';

const backend = new Backend('http://localhost/php');

// Dynamically call any PHP script
const user = await backend.call<{ id: string; name: string }>('getUser', { userId: '1' });
console.log(user); // { id: "1", name: "Mael" }

const result = await backend.call('processData', { data: { value: 42 } });
console.log(result);

npm License

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme