Skip to content

Latest commit

 

History

History
226 lines (176 loc) · 5.36 KB

README.md

File metadata and controls

226 lines (176 loc) · 5.36 KB

Flawed - Javascript/Typescript Html Framework

NPM version NPM downloads

Timepass Useless JS/TS & Html Framework

💾 Installation

Package On NPM

npm install @arnavk-09/flawed

Also install 'tslib' if any error comes on .ts

🔑 Features

  • Support Dynamic Components
  • Full Access To Routes
  • Simple AF (Fast)
  • Automatically Beatuifies Code
  • Handler All Things Yourself
  • Logs Everything
  • Classes Based
  • Compatible With ECM & CJS
  • Out Of The Box Head Component
  • Supports Static Files
  • Automatic Favicon Picking

Simple Examples

In Javascript
// Imports 
const { FlawedClient, FlawedScreen, FlawedComponent, UseComponent } = require('@arnavk-09/flawed');

// Init Flawed App 
const app = new FlawedClient({
    port: 3000
});

// Nav Bar Component 
class Navbar extends FlawedComponent {
    // Giving Name To Component
    constructor() {
        super({
            name: 'Navbar'
        });
    };

    // Component Content 
    view(props) {
        return (
            `
            <a href='${props.link}'> ${props.title} </a>
            <br>
          `
        );
    };
};

// Creating Main Screen 
class MainScreen extends FlawedScreen {
    // Giving ID To Screen
    constructor() {
        super({
            route: 'main', // use 'main' for index route
        });
    };

    // Screen Content  
    render() {
        return {
            page: `
                ${UseComponent('Navbar', app, { title: 'Navbar (Props)', link: '/' })}
                Hellow Flawed!
            `,
        };
    };
};

// Adding Screens To App 
app.setScreens([new MainScreen()]);

// Register Components 
app.registerComponents([new Navbar()]);

// Setup 404 Page 
app.set404Content(`404 Page!`);

// Starting Flawed App 
app.start();

In Typescript
// Imports 
import { FlawedClient, FlawedScreen, FlawedComponent, UseComponent } from '@arnavk-09/flawed';

// Init Flawed App 
const app = new FlawedClient({
    port: 3000
});

// Nav Bar Component 
class Navbar extends FlawedComponent {
    // Giving Name To Component
    constructor() {
        super({
            name: 'Navbar'
        });
    };

    // Component Content 
    view(props) {
        return (
            `
            <a href='${props.link}'> ${props.title} </a>
            <br>
          `
        );
    };
};

// Creating Main Screen 
class MainScreen extends FlawedScreen {
    // Giving ID To Screen
    constructor() {
        super({
            route: 'main', // use 'main' for index route
        });
    };

    // Screen Content  
    render() {
        return {
            page: `
                ${UseComponent('Navbar', app, { title: 'Navbar (Props)', link: '/' })}
                Hellow Flawed!
            `,
        };
    };
};

// Adding Screens To App 
app.setScreens([new MainScreen()]);

// Register Components 
app.registerComponents([new Navbar()]);

// Setup 404 Page 
app.set404Content(`404 Page!`);

// Starting Flawed App 
app.start();

Checkout Structured Flawed Site Here...

🚔 Need help?

🎒 Packages

Here are some packages from Flawed

Package Description
@arnavk-09/flawed Useless JS/TS & Html Framework
@arnavk-09/create-flawed TODO

💪 Classes

There is a system that allows you to create your site with Flawed

📚 Documentation

You can view documentation here

🆕 Newest Change

• v1.0.3

  • Added Docs Site

💝 Thank you

You can support @arnavk-09/flawed by giving it a GitHub star.