https://github.com/seraprogrammer/goodway
Goodway - Lightweight Component Library
https://github.com/seraprogrammer/goodway
Last synced: 3 months ago
JSON representation
Goodway - Lightweight Component Library
- Host: GitHub
- URL: https://github.com/seraprogrammer/goodway
- Owner: seraprogrammer
- Created: 2025-02-19T18:53:33.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-19T19:09:31.000Z (11 months ago)
- Last Synced: 2025-02-19T20:20:07.041Z (11 months ago)
- Language: JavaScript
- Homepage: https://seraprogrammer.github.io/goodway/
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Goodway - Lightweight Component Library
Goodway is a minimal and efficient JavaScript component library designed to
simplify UI development. With a size of just 410 bytes, Goodway provides a
structured way to create reusable components with built-in support for props,
templates, and modularity.
## Features
- 🪶 **Ultra-lightweight** - Only 410 bytes!
- ⚡ **Simple API** - Easy-to-use component structure.
- 📦 **Modular** - Components are self-contained and reusable.
- 🏗 **Props System** - Pass dynamic data easily.
- 🖼 **Template-based Rendering** - Define UI structure with placeholders.
## Getting Started
### Installation
Goodway requires no installation! Simply include the Goodway core script and your component files in your HTML project. You can use a CDN or host the files yourself.
```bash
import createApp from "//unpkg.com/goodway";
```
### Creating a Component
A Goodway component is created using `createApp()`, which defines the
component’s name, props, and template.
#### Example: `hero.js`
```js
import createApp from "//unpkg.com/goodway";
export default createApp(() => {
return {
name: "hero-component",
props: {
title: "Designer, Front-end Developer & Mentor",
description:
"I design and code beautifully simple things, and I love what I do.",
image:
"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/640px-Cat03.jpg",
},
template: `
{title}
{description}
`,
};
});
```
### Using the Component
To use a Goodway component, add it to your HTML file and ensure it is properly
imported.
#### Example: `index.html`
```html
Goodway Example
```
## Why Use Goodway?
- **Minimal Footprint** - It’s super lightweight and does not bloat your
project.
- **Easy to Use** - Define, import, and use components seamlessly.
- **Scalable** - Create a structured UI with reusable components.
## License
MIT License. Feel free to use and contribute!
Happy coding! 🚀