bazlama-web-component

v0.1.0

Published

a month ago

A lightweight, TypeScript-first Web Component framework with decorators, property management, and event handling

0High
0Medium
0Low

bazlama web-component web-components custom-elements decorators typescript javascript shadow-dom frontend ui-components component-library

Bazlama Web Component

A lightweight, decorator-based TypeScript framework for building modern Web Components with reactive properties, automatic DOM updates, and zero dependencies.

Features

Zero Dependencies: No external runtime dependencies - pure TypeScript compiled to standard Web Components
Lightweight and Fast: Minimal size with high performance
Decorator-Based API: Use familiar TypeScript decorators like @Property, @Attribute, and @EventAction
Reactive Properties: Automatic DOM updates when properties change with @ChangeHooks
Shadow DOM Support: Choose between Shadow DOM (open/closed) or Light DOM
Built-in Hooks: 11+ pre-built hooks for common DOM operations
TypeScript First: Full TypeScript support with type-safe decorators and intellisense
MIT License: Free to use in any project

Live Demos

Try out Bazlama Web Component with interactive examples:

Full Documentation & Interactive Samples - Complete documentation with live examples
Core Examples - Basic usage examples

Installation

npm install bazlama-web-component

TypeScript Configuration

Enable decorators in your tsconfig.json:

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "target": "ES2020",
        "module": "ESNext",
        "moduleResolution": "bundler"
    }
}

Quick Example

import { 
    BazlamaWebComponent, 
    CustomElement, 
    Property, 
    Attribute,
    ChangeHooks,
    EventAction,
    useElementText 
} from "bazlama-web-component"

@CustomElement("hello-world")
class HelloWorld extends BazlamaWebComponent {
    constructor() {
        super()
        this.InitBazlamaWebComponent()
    }

    @ChangeHooks([useElementText(".greeting")])
    @Attribute("name", true)
    @Property({ defaultValue: "World" })
    name: string = "World"

    @EventAction(".btn", "click")
    onButtonClick() {
        this.name = "Bazlama"
    }

    getRenderTemplate() {
        return `
            <div class="container">
                <h1 class="greeting">Hello, World!</h1>
                <button class="btn">Change Name</button>
            </div>
        `
    }
}

Usage in HTML

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="./hello-world.ts"></script>
</head>
<body>
    <hello-world name="Developer"></hello-world>
</body>
</html>

Built-in Hooks

useElementText - Update element text content
useElementProperty - Sync with element properties
useElementAttribute - Manage element attributes
useElementStyle - Apply CSS styles
useToggleClass - Toggle CSS classes
useSwitchClass - Switch between classes
useAddRemoveClass - Add/remove classes conditionally
useElementInputValue - Sync with input values
useFunction - Execute custom functions
useCustomHook - Create custom logic
And more...

Documentation

For complete documentation, examples, and live demos, visit our GitHub repository.

License

MIT License - see LICENSE file for details.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme