clapsit 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# clapsit
+
+**clapsit** is a simple and declarative JavaScript framework for building user interfaces, inspired by Flutter's component-based architecture. It allows you to build a web application's UI using a declarative, function-based syntax.
+
+## Installation
+
+To install clapsit, you can use npm or yarn:
+
+```bash
+npm install clapsit
+```
+
+```bash
+yarn add clapsit
+```
+
+## Usage
+
+Here is a simple example of a clapsit component:
+
+```typescript
+import { div, h1, p, button } from 'clapsit';
+
+function MyComponent() {
+    return div(
+        h1('Hello, clapsit!'),
+        p('This is a simple component.'),
+        button('Click me!')
+            .onClick(() => alert('Button clicked!'))
+            .style({ backgroundColor: 'blue', color: 'white' })
+    );
+}
+```
+
+To render a component to the DOM, use the `render` function:
+
+```typescript
+import { render } from 'clapsit';
+
+render('#app', MyComponent());
+```
+
+## Example
+
+This repository contains an example application in the `/example` directory. To run it:
+
+1.  Navigate to the `example` directory:
+    ```bash
+    cd example
+    ```
+
+2.  Install the dependencies:
+    ```bash
+    npm install
+    ```
+
+3.  Start the development server:
+    ```bash
+    npm run start
+    ```
+
+This will start a Parcel development server and open the example application in your browser.

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+declare class DomElement {
+    element: HTMLElement;
+    constructor(tagName: string, ...children: (DomElement | HTMLElement | string)[]);
+    private addChildren;
+    style(styles: Partial<CSSStyleDeclaration>): this;
+    settings(attributes: {
+        [key: string]: string;
+    }): this;
+    onClick(handler: (e: MouseEvent) => void): this;
+    on(event: string, handler: (e: Event) => void): this;
+    render(): HTMLElement;
+}
+type Child = DomElement | HTMLElement | string;
+export declare const div: (...children: Child[]) => DomElement;
+export declare const h1: (...children: Child[]) => DomElement;
+export declare const p: (...children: Child[]) => DomElement;
+export declare const a: (...children: Child[]) => DomElement;
+export declare const span: (...children: Child[]) => DomElement;
+export declare const img: () => DomElement;
+export declare const input: () => DomElement;
+export declare const button: (...children: Child[]) => DomElement;
+export declare function render(selector: string, component: DomElement): void;
+export {};

package/dist/index.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = exports.button = exports.input = exports.img = exports.span = exports.a = exports.p = exports.h1 = exports.div = void 0;
+// A simple DOM element wrapper
+class DomElement {
+    constructor(tagName, ...children) {
+        this.element = document.createElement(tagName);
+        this.addChildren(children);
+    }
+    addChildren(children) {
+        for (const child of children) {
+            if (typeof child === 'string') {
+                this.element.appendChild(document.createTextNode(child));
+            }
+            else if (child instanceof DomElement) {
+                this.element.appendChild(child.render());
+            }
+            else if (child instanceof HTMLElement) {
+                this.element.appendChild(child);
+            }
+        }
+    }
+    style(styles) {
+        for (const key in styles) {
+            if (Object.prototype.hasOwnProperty.call(styles, key)) {
+                const styleKey = key;
+                this.element.style[styleKey] = styles[styleKey];
+            }
+        }
+        return this;
+    }
+    settings(attributes) {
+        for (const key in attributes) {
+            if (Object.prototype.hasOwnProperty.call(attributes, key)) {
+                this.element.setAttribute(key, attributes[key]);
+            }
+        }
+        return this;
+    }
+    onClick(handler) {
+        this.element.onclick = handler;
+        return this;
+    }
+    on(event, handler) {
+        this.element.addEventListener(event, handler);
+        return this;
+    }
+    render() {
+        return this.element;
+    }
+}
+// Factory functions for creating elements
+const div = (...children) => new DomElement('div', ...children);
+exports.div = div;
+const h1 = (...children) => new DomElement('h1', ...children);
+exports.h1 = h1;
+const p = (...children) => new DomElement('p', ...children);
+exports.p = p;
+const a = (...children) => new DomElement('a', ...children);
+exports.a = a;
+const span = (...children) => new DomElement('span', ...children);
+exports.span = span;
+const img = () => new DomElement('img');
+exports.img = img;
+const input = () => new DomElement('input');
+exports.input = input;
+const button = (...children) => new DomElement('button', ...children);
+exports.button = button;
+// The top-level render function
+function render(selector, component) {
+    const app = document.querySelector(selector);
+    if (app) {
+        app.innerHTML = '';
+        app.appendChild(component.render());
+    }
+}
+exports.render = render;

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "clapsit",
+  "version": "0.1.0",
+  "description": "A simple and declarative JavaScript framework for building user interfaces, inspired by Flutter.",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "framework",
+    "ui",
+    "declarative",
+    "frontend"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "typescript": "^4.5.0"
+  },
+  "files": [
+    "dist"
+  ]
+}