Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arnavk-09/flawed
💩 Time pass Useless JS/TS & Html Framework
https://github.com/arnavk-09/flawed
framework hybrid npm npm-package timepass-project typescript
Last synced: 25 days ago
JSON representation
💩 Time pass Useless JS/TS & Html Framework
- Host: GitHub
- URL: https://github.com/arnavk-09/flawed
- Owner: ArnavK-09
- License: mit
- Created: 2022-11-04T10:34:13.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-13T06:41:10.000Z (about 2 years ago)
- Last Synced: 2024-04-25T22:43:22.484Z (9 months ago)
- Topics: framework, hybrid, npm, npm-package, timepass-project, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@arnavk-09/flawed
- Size: 480 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flawed - Javascript/Typescript Html Framework
Timepass Useless JS/TS & Html Framework
# 💾 Installation
> Package On [NPM](https://www.npmjs.com/package/@arnavk-09/flawed)
```
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
```js
// 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 (
`
${props.title}
`
);
};
};
// 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
```ts
// 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 (
`
${props.title}
`
);
};
};
// 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...](https://github.com/ArnavK-09/flawed-docs/)
# 🚔 Need help?
- [Chat With Me On Discord](https://discord.gg/V3WBURuh4N)
- [Check Documentation](https://github.com/ArnavK-09/flawed-docs)
# 🎒 Packages
Here are some packages from Flawed
| Package | Description |
| ------------------------------------------------------------------------------ | ------------------------------------------------------------ |
| [`@arnavk-09/flawed`](https://www.npmjs.com/package/@arnavk-09/flawed) | Useless JS/TS & Html Framework |
| [`@arnavk-09/create-flawed`](https://www.npmjs.com/package/@arnavk-09/flawed) | TODO |
# 💪 Classes
There is a system that allows you to create your site with Flawed
- [`FlawedClient`](https://github.com/ArnavK-09/flawed/blob/main/src/FlawedClient.ts)
- [`FlawedComponent`](https://github.com/ArnavK-09/flawed/blob/main/src/classes/FlawedComponent.ts)
- [`FlawedScreen`](https://github.com/ArnavK-09/flawed/blob/main/src/classes/FlawedScreen.ts)
- [`FlawedHead`](https://github.com/ArnavK-09/flawed/blob/main/src/classes/FlawedHead.ts)
# 📚 Documentation
> You can view documentation [here](https://github.com/ArnavK-09/flawed-docs)
# 🆕 Newest Change
### • v1.0.3
- [x] **Added Docs Site**
# 💝 Thank you
You can support **[@arnavk-09/flawed](https://www.npmjs.com/package/@arnavk-09/flawed)** by giving it a **[GitHub](https://github.com/ArnavK-09/flawed)** star.