vaw-js 0.0.1

package/README.md

@@ -0,0 +1,33 @@
+<p align="center">
+    <img alt="VAW Icon" src="https://i.imgur.com/mHV90x7.png" align="center">
+</p>
+
+# vaw-js [![npm](https://img.shields.io/npm/v/vaw-js.svg)](https://www.npmjs.com/package/vaw-js)
+
+## Getting Started
+
+vaw-js is an educational project; it clearly isn’t looking to compete with the established frameworks on the market. Instead, it aims to replicate and adapt some of their best features, with the ultimate goal of learning and sharing knowledge among its contributors.
+
+
+## Questions
+
+For any questions, doubts, or support, please send a message to the contact methods listed below in this README.
+
+## Stay In Touch
+
+- Email: srui@alumnos.exa.unicen.edu.ar
+- Discord: santiagorbsd
+
+## Contribution
+
+Contributing is simple: just submit a pull request, and we will review your suggestion to ensure it aligns with our current project goals.
+
+Meet the contributors board
+
+<a href="https://github.com/vaw-js/graphs/contributors"><img src="https://opencollective.com/vaw-js/contributors.svg?width=890&limit=500" /></a>
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)
+
+Copyright (c) 2026-present, Santiago Rui

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Initialize the virtual DOM and renderize the virtual nodes
+ * @param rootComponent
+ * @param container - Root container, usually a div with #app tag.
+ */
+export declare function createApp(rootComponent: () => VNode, container: HTMLElement): void;
+
+/**
+ * Create a virtual node object
+ * @param type - String or function
+ * @param props - Classes or events
+ * @param children
+ * @returns
+ */
+export declare function h(type: VNodeType, props?: any, ...children: VNodeChild[]): VNode;
+
+export declare function mount(vnode: VNode | string, container: HTMLElement): Text;
+
+export declare function nextTick<T = void>(fn?: (this: T) => any): Promise<void>;
+
+/**
+ * Compare nodes, update their props and childrens.
+ * @param n1
+ * @param n2
+ */
+export declare function patch(n1: VNode, n2: VNode): void;
+
+/**
+ * Create an reactive to changes object based in an original Object.
+ * @param target - Base object
+ * @returns Reactive Proxy
+ */
+export declare function reactive<T extends object>(target: T): T;
+
+declare interface VNode {
+    type: VNodeType;
+    props: any;
+    children: (VNode | string)[];
+    el?: HTMLElement;
+    componentInstance?: any;
+    onMounted?: () => void;
+    onUnmounted?: () => void;
+    onUpdated?: () => void;
+}
+
+declare type VNodeChild = VNode | string | number | boolean | null | undefined;
+
+declare type VNodeType = string | Function;
+
+export declare function watch<T = any>(source: WatchSource<T>, cb: WatchCallback<T>): void;
+
+declare type WatchCallback<T = any> = (val: T, oldVal: T) => void;
+
+declare type WatchSource<T = any> = () => T;
+
+export { }

package/dist/vaw-js.js

@@ -0,0 +1,123 @@
+const u = /* @__PURE__ */ new Set();
+let p = !1, a = !1;
+const w = Promise.resolve();
+let g = null;
+function x(e) {
+  const o = g || w;
+  return e ? o.then(() => e.call(void 0)) : o;
+}
+function y(e) {
+  u.has(e) || (u.add(e), C());
+}
+function C() {
+  !p && !a && (a = !0, g = w.then(M));
+}
+function M() {
+  a = !1, p = !0;
+  try {
+    u.forEach((e) => {
+      e();
+    });
+  } finally {
+    p = !1, u.clear(), g = null;
+  }
+}
+let d = null;
+function c(e) {
+  d = e;
+}
+const h = /* @__PURE__ */ new WeakMap();
+function P(e, o) {
+  if (!d) return;
+  let n = h.get(e);
+  if (n || (n = /* @__PURE__ */ new Map(), h.set(e, n)), n) {
+    let t = n.get(o);
+    t || n.set(o, t = /* @__PURE__ */ new Set()), t.add(d);
+  }
+}
+function U(e, o) {
+  const n = h.get(e);
+  if (!n) return;
+  const t = n.get(o);
+  t && t.forEach((s) => y(s));
+}
+function L(e) {
+  return new Proxy(e, {
+    get(o, n, t) {
+      const s = Reflect.get(o, n, t);
+      return P(o, n), s;
+    },
+    set(o, n, t, s) {
+      const i = o[n], r = Reflect.set(o, n, t, s);
+      return r && i !== t && U(o, n), r;
+    }
+  });
+}
+function V(e, o) {
+  let n;
+  typeof e == "function" ? n = e : n = () => e;
+  let t, s;
+  c(() => {
+    c(null), s = n(), s !== t && (o(s, t), t = s);
+  }), t = n(), c(null);
+}
+function A(e, o = {}, ...n) {
+  const { onMounted: t, onUnmounted: s, onUpdated: i, ...r } = o;
+  return {
+    type: e,
+    props: r || {},
+    children: n.flat(),
+    onMounted: t,
+    onUnmounted: s,
+    onUpdated: i
+  };
+}
+function m(e, o) {
+  if (typeof e == "string") {
+    const t = document.createTextNode(e);
+    return o.appendChild(t), t;
+  }
+  const n = document.createElement(e.type);
+  e.el = n;
+  for (const t in e.props)
+    t.startsWith("on") ? n.addEventListener(t.slice(2).toLowerCase(), e.props[t]) : n.setAttribute(t, e.props[t]);
+  e.children.forEach((t) => m(t, n)), o.appendChild(n), e.onMounted && e.onMounted();
+}
+function E(e, o) {
+  const n = o.el = e.el;
+  if (e.type !== o.type) {
+    const t = n.parentElement;
+    e.onUnmounted && e.onUnmounted(), t == null || t.removeChild(n), m(o, t);
+  } else {
+    const t = e.props || {}, s = o.props || {};
+    for (const l in s)
+      if (s[l] !== t[l])
+        if (l.startsWith("on")) {
+          const f = l.slice(2).toLowerCase();
+          n.removeEventListener(f, t[l]), n.addEventListener(f, s[l]);
+        } else
+          n.setAttribute(l, s[l]);
+    const i = e.children, r = o.children;
+    typeof r[0] == "string" ? r[0] !== i[0] && (n.textContent = r[0]) : r.forEach((l, f) => {
+      typeof l != "string" && typeof i[f] != "string" && E(i[f], l);
+    }), o.onUpdated && o.onUpdated();
+  }
+}
+function N(e, o) {
+  let n = null;
+  const t = () => {
+    c(t);
+    const s = e();
+    n ? E(n, s) : m(s, o), n = s, c(null);
+  };
+  c(t), t();
+}
+export {
+  N as createApp,
+  A as h,
+  m as mount,
+  x as nextTick,
+  E as patch,
+  L as reactive,
+  V as watch
+};

package/dist/vaw-js.umd.cjs

@@ -0,0 +1 @@
+(function(s,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(s=typeof globalThis<"u"?globalThis:s||self,f(s.Vaw={}))})(this,(function(s){"use strict";const f=new Set;let p=!1,h=!1;const E=Promise.resolve();let m=null;function M(e){const o=m||E;return e?o.then(()=>e.call(void 0)):o}function P(e){f.has(e)||(f.add(e),C())}function C(){!p&&!h&&(h=!0,m=E.then(T))}function T(){h=!1,p=!0;try{f.forEach(e=>{e()})}finally{p=!1,f.clear(),m=null}}let g=null;function u(e){g=e}const w=new WeakMap;function U(e,o){if(!g)return;let n=w.get(e);if(n||(n=new Map,w.set(e,n)),n){let t=n.get(o);t||n.set(o,t=new Set),t.add(g)}}function V(e,o){const n=w.get(e);if(!n)return;const t=n.get(o);t&&t.forEach(i=>P(i))}function b(e){return new Proxy(e,{get(o,n,t){const i=Reflect.get(o,n,t);return U(o,n),i},set(o,n,t,i){const r=o[n],c=Reflect.set(o,n,t,i);return c&&r!==t&&V(o,n),c}})}function A(e,o){let n;typeof e=="function"?n=e:n=()=>e;let t,i;u(()=>{u(null),i=n(),i!==t&&(o(i,t),t=i)}),t=n(),u(null)}function L(e,o={},...n){const{onMounted:t,onUnmounted:i,onUpdated:r,...c}=o;return{type:e,props:c||{},children:n.flat(),onMounted:t,onUnmounted:i,onUpdated:r}}function a(e,o){if(typeof e=="string"){const t=document.createTextNode(e);return o.appendChild(t),t}const n=document.createElement(e.type);e.el=n;for(const t in e.props)t.startsWith("on")?n.addEventListener(t.slice(2).toLowerCase(),e.props[t]):n.setAttribute(t,e.props[t]);e.children.forEach(t=>a(t,n)),o.appendChild(n),e.onMounted&&e.onMounted()}function y(e,o){const n=o.el=e.el;if(e.type!==o.type){const t=n.parentElement;e.onUnmounted&&e.onUnmounted(),t==null||t.removeChild(n),a(o,t)}else{const t=e.props||{},i=o.props||{};for(const l in i)if(i[l]!==t[l])if(l.startsWith("on")){const d=l.slice(2).toLowerCase();n.removeEventListener(d,t[l]),n.addEventListener(d,i[l])}else n.setAttribute(l,i[l]);const r=e.children,c=o.children;typeof c[0]=="string"?c[0]!==r[0]&&(n.textContent=c[0]):c.forEach((l,d)=>{typeof l!="string"&&typeof r[d]!="string"&&y(r[d],l)}),o.onUpdated&&o.onUpdated()}}function v(e,o){let n=null;const t=()=>{u(t);const i=e();n?y(n,i):a(i,o),n=i,u(null)};u(t),t()}s.createApp=v,s.h=L,s.mount=a,s.nextTick=M,s.patch=y,s.reactive=b,s.watch=A,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "vaw-js",
+  "version": "0.0.1",
+  "type": "module",
+  "author": "Santiago Rui",
+  "license": "MIT",
+  "description": "Virtual Atomic Web - A lightweight reactive framework",
+  "main": "./dist/vaw-js.umd.cjs",
+  "module": "./dist/vaw-js.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vaw-js.js",
+      "require": "./dist/vaw-js.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "~5.7.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}