wowojs 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Devied Rahmadsyah
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# Wowo.js
+Wowo.js adalah sebuah library yang difokuskan untuk kemudahan membuat *Web Component* yang lebih ringkas dan menggunakan state global yang disimpan di *Session Storage* untuk meminimalkan kode yang rumit daripada MBG yang terlalu rumit ngurus anggaran.
+
+### berikut panduan dasar Wowo.js
+
+##### Membuat Component
+membuat component menggunakan $BuatWilayah 
+```js
+import { $BuatWilayah } from "wowo"
+$BuatWilayah({
+  namaWilayah: "sumatra",
+  isiWilayah: () => {
+    return `
+      <h1>Halo dunia</h1>
+    `
+  }
+})
+```
+
+ cara menjalankannya di file .html
+ ````html
+ <wowo-sumatra></wowo-sumatra>
+  ````

package/example/main.js

@@ -0,0 +1,6 @@
+/// INI HANYA CONTOH
+
+import { sawit } from "./sawit";
+import { $BangunEkonomi } from "./src";
+
+$BangunEkonomi([sawit()]);

package/example/sawit.js

@@ -0,0 +1,76 @@
+/// INI HANYA CONTOH
+
+import {
+  $antek2,
+  $BuatWilayah,
+  $PecatAntek2,
+  $Sejarah,
+  $UrusKeuangan,
+} from "./src";
+export function sawit() {
+  let sawit = $antek2("sawit", 100);
+  const reducer = (aksi) => {
+    switch (aksi.tipe) {
+      case "TAMBAH":
+        return (sawit = $antek2("sawit", (t) => t + 100));
+      case "KURANG":
+        return (sawit = $antek2("sawit", (t) => (t >= 100 ? t - 100 : 0)));
+      case "RESET":
+        if (sawit === undefined) {
+          return 0;
+        } else {
+          sawit = $PecatAntek2("sawit") || 0;
+        }
+    }
+  };
+  $BuatWilayah({
+    namaWilayah: "sumatra",
+    isiWilayah: () => {
+      return /*html*/ `
+        <div class="bg">
+          <h1>Ssumatra</h1>
+          <main>
+            <p>Total sawit: ${sawit || 0}</p>
+            <button @click="tambah">Tambah</button>
+            <button @click="kurang">Kurang</button>
+            <button @click="reset">Reset</button>
+            <button @click="debug">Debug</button>
+        </main>
+        </div>
+      `;
+    },
+    methods: {
+      tambah() {
+        $UrusKeuangan(reducer, { tipe: "TAMBAH" });
+      },
+      kurang() {
+        $UrusKeuangan(reducer, { tipe: "KURANG" });
+      },
+      reset() {
+        $UrusKeuangan(reducer, { tipe: "RESET" });
+      },
+      debug() {
+        $Sejarah({ aktif: true });
+      },
+    },
+    style: /*css*/ `
+      .bg{
+        background: linear-gradient(45deg, #8cc7e9, #f03737);
+        text-align: center;
+        color: #ffffff;
+        width: 100vw;
+        height: 100vh;
+      }
+      h1{
+        margin-bottom: 100px;
+      }
+      button{
+        border-radius: 30px;
+        text-align: center;
+        font-size: 17px;
+        background: #95f8e3;
+        border: none
+      }
+    `,
+  });
+}

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "wowojs",
+  "version": "1.0.0",
+  "description": "Wowo.js adalah sebuah library yang difokuskan untuk kemudahan membuat *Web Component* yang lebih ringkas dan menggunakan state global yang disimpan di *Session Storage* untuk meminimalkan kode yang rumit daripada MBG yang terlalu rumit ngurus anggaran.",
+  "main": "src/index.js",
+  "directories": {
+    "example": "example"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Devied Rahmadsyah",
+  "license": "MIT",
+  "types": "./src/index.d.ts"
+}

package/src/component.js

@@ -0,0 +1,90 @@
+import { $Sejarah } from "./history";
+
+/**
+ * Buat wilayah untuk membuat kekuasaan pakai komponen (Web Component)
+ * dengan sistem event handling otomatis menggunakan tanda '$'.
+ * @param {Object} options - Konfigurasi wilayah.
+ * @param {string} options.namaWilayah - Nama unik untuk komponen (akan menjadi tag wowo-nama).
+ * @param {Function|string} options.isiWilayah - Konten HTML atau fungsi yang mengembalikan template string.
+ * @param {Object} [options.methods={}] - Kumpulan fungsi yang bisa dipanggil oleh atribut event ($click, $input, dll).
+ * @param {string} [options.deskripsi] - Catatan opsional mengenai tujuan wilayah.
+ * @param {string} [options.style] - Styling css kamu
+ * @example
+ * let sawit = 1000;
+ * const aksi = {
+ *   tambah() { sawit += 100; }
+ * };
+ * $BuatWilayah({
+ *   namaWilayah: "sumatra",
+ *   methods: aksi,
+ *   isiWilayah: () => {
+ *   return `
+ *     <h1>sawit di sumatra ada ${sawit}</h1>
+ *     <button $click="tambah">Tambah sawit</button>
+ *   `;
+ *   }
+ * });
+ * @author Devied Rahmadsyah
+ * @license MIT
+ */
+export function $BuatWilayah({
+  namaWilayah,
+  isiWilayah,
+  style = "",
+  methods = {},
+  deskripsi,
+}) {
+  $Sejarah({
+    modul: "Component: $BuatWilayah",
+    detail: {
+      namaWilayah: namaWilayah,
+      isiWilayah: isiWilayah,
+      style: style || "tidak ada",
+      methods: methods || "tidak ada",
+      deskripsi: deskripsi || "tidak ada",
+    },
+  });
+  const tagName = `wowo-${namaWilayah.toLowerCase()}`;
+  if (customElements.get(tagName)) return;
+
+  customElements.define(
+    tagName,
+    class extends HTMLElement {
+      constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+      }
+
+      connectedCallback() {
+        this.render();
+      }
+
+      render() {
+        const konten =
+          typeof isiWilayah === "function" ? isiWilayah() : isiWilayah;
+        let css = style ? `<style>${style}</style>` : "";
+        this.shadowRoot.innerHTML = konten + css;
+
+        const allElements = this.shadowRoot.querySelectorAll("*");
+
+        allElements.forEach((el) => {
+          [...el.attributes].forEach((attr) => {
+            if (attr.name.startsWith("@")) {
+              const eventType = attr.name.slice(1);
+              const functionName = attr.value.replace("()", "");
+
+              if (methods[functionName]) {
+                el.addEventListener(eventType, (e) => {
+                  methods[functionName](e);
+                  this.render();
+                });
+
+                el.removeAttribute(attr.name);
+              }
+            }
+          });
+        });
+      }
+    },
+  );
+}

package/src/history.js

@@ -0,0 +1,21 @@
+let history = [];
+
+/**
+ * Lihat sejarah penggunaan library ini
+ * @param {Object} opsi
+ * @param {string} opsi.modul
+ * @param {string} opsi.detail
+ * @param {boolean} [opsi.aktif=false] - Jika true, tabel sejarah akan muncul di console
+ * @license MIT
+ * @author Devied Rahmadsyah
+ */
+export function $Sejarah({ modul, detail, aktif = false }) {
+  history.push({
+    waktu: new Date().toLocaleTimeString(),
+    modul,
+    detail,
+  });
+  if (aktif) {
+    console.dir(history);
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,95 @@
+/**
+ * State sederhana untuk antek-antek wowo
+ * @param {string} name nama antek nya
+ * @param {any} value isi identitas dia
+ * @example
+ * const antek = $antek2("antek", 1)
+ * function addAntek(){
+ *   antek = $antek2("antek",(antek2) => {
+ *     antek2 += 1
+ * })
+ * }
+ * @license MIT
+ * @author Devied Rahmadsyah
+ */
+export declare function $antek2(name: string, value: any, ...args: any[]): any;
+
+/**
+ * Render component agar bisa membangun ekonomi
+ * @param {string|string[]} options.components ambil component untuk component yang ingin dirender
+ * @example
+ * function addSawit(){
+ *   sawit + 12
+ *   $BangunEkonomi("wowo-sumatra")
+ * }
+ * @license MIT
+ * @author Devied Rahmadsyah
+ */
+export declare function $BangunEkonomi(components: any): void;
+
+/**
+ * Buat wilayah untuk membuat kekuasaan pakai komponen (Web Component)
+ * dengan sistem event handling otomatis menggunakan tanda '$'.
+ * @param {Object} options - Konfigurasi wilayah.
+ * @param {string} options.namaWilayah - Nama unik untuk komponen (akan menjadi tag wowo-nama).
+ * @param {Function|string} options.isiWilayah - Konten HTML atau fungsi yang mengembalikan template string.
+ * @param {Object} [options.methods={}] - Kumpulan fungsi yang bisa dipanggil oleh atribut event ($click, $input, dll).
+ * @param {string} [options.deskripsi] - Catatan opsional mengenai tujuan wilayah.
+ * @param {string} [options.style] - Styling css kamu
+ * @example
+ * let sawit = 1000;
+ * const aksi = {
+ *   tambah() { sawit += 100; }
+ * };
+ * $BuatWilayah({
+ *   namaWilayah: "sumatra",
+ *   methods: aksi,
+ *   isiWilayah: () => {
+ *   return `
+ *     <h1>sawit di sumatra ada ${sawit}</h1>
+ *     <button $click="tambah">Tambah sawit</button>
+ *   `;
+ *   }
+ * });
+ * @author Devied Rahmadsyah
+ * @license MIT
+ */
+export declare function $BuatWilayah({ namaWilayah, isiWilayah, style, methods, deskripsi, }: {
+    namaWilayah: string;
+    isiWilayah: Function | string;
+    methods?: Object | undefined;
+    deskripsi?: string | undefined;
+    style?: string | undefined;
+}): void;
+
+/**
+ * Pecat antek-antek yang berulah
+ * @param {string} name Hapus antek-antek yang ada
+ * @example
+ * $PecatAntek2("mul")
+ */
+export declare function $PecatAntek2(name: string): void;
+
+/**
+ * Lihat sejarah penggunaan library ini
+ * @param {Object} opsi
+ * @param {string} opsi.modul
+ * @param {string} opsi.detail
+ * @param {boolean} [opsi.aktif=false] - Jika true, tabel sejarah akan muncul di console
+ * @license MIT
+ * @author Devied Rahmadsyah
+ */
+export declare function $Sejarah({ modul, detail, aktif }: {
+    modul: string;
+    detail: string;
+    aktif?: boolean | undefined;
+}): void;
+
+/**
+ * Reducer bawaan wowojs
+ * @license MIT
+ * @author Devied Rahmadsyah
+ */
+export declare function $UrusKeuangan(reducer: any, action: any): any;
+
+export { }

package/src/index.js

@@ -0,0 +1,5 @@
+export * from "./component";
+export * from "./render";
+export * from "./state";
+export * from "./reducer";
+export * from "./history";

package/src/reducer.js

@@ -0,0 +1,24 @@
+import { $Sejarah } from "./history";
+
+/**
+ * Reducer bawaan wowojs
+ * @license MIT
+ * @author Devied Rahmadsyah
+ */
+export function $UrusKeuangan(reducer, action) {
+  $Sejarah({
+    modul: "Reducer: $UrusKeuangan",
+    detail: [
+      {
+        reducer: reducer,
+        action: action,
+      },
+    ],
+  });
+  try {
+    return reducer(action);
+  } catch (error) {
+    console.error(`terjadi error ${reducer} 
+      ${error}`);
+  }
+}

package/src/render.js

@@ -0,0 +1,41 @@
+import { $Sejarah } from "./history";
+
+/**
+ * Render component agar bisa membangun ekonomi
+ * @param {string|string[]} options.components ambil component untuk component yang ingin dirender
+ * @example
+ * function addSawit(){
+ *   sawit + 12
+ *   $BangunEkonomi("wowo-sumatra")
+ * }
+ * @license MIT
+ * @author Devied Rahmadsyah
+ */
+export function $BangunEkonomi(components) {
+  $Sejarah({
+    modul: "Render: $BangunEkonomi",
+    detail: components,
+  });
+  if (Array.isArray(components)) {
+    components.forEach((comp) => {
+      const selector = typeof comp === "string" ? comp : comp;
+      eksekusi(selector);
+    });
+  } else {
+    eksekusi(components);
+  }
+}
+function eksekusi(components) {
+  const element = document.querySelector(components);
+  if (element && typeof element.render === "function") {
+    element.render();
+  } else {
+    document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        if (element) element.render();
+      },
+      { once: true },
+    );
+  }
+}

package/src/state.js

@@ -0,0 +1,81 @@
+import { $Sejarah } from "./history";
+
+/**
+ * State sederhana untuk antek-antek wowo
+ * @param {string} name nama antek nya
+ * @param {any} value isi identitas dia
+ * @example
+ * const antek = $antek2("antek", 1)
+ * function addAntek(){
+ *   antek = $antek2("antek",(antek2) => {
+ *     antek2 += 1
+ * })
+ * }
+ * @license MIT
+ * @author Devied Rahmadsyah
+ */
+export function $antek2(name, value) {
+  $Sejarah({
+    modul: "State: $antek2",
+    detail: {
+      nama: name,
+      value: value,
+    },
+  });
+  const dataLama = sessionStorage.getItem(name);
+  let parsedLama = null;
+
+  try {
+    if (dataLama !== null) {
+      parsedLama = JSON.parse(dataLama);
+    }
+
+    if (typeof value === "function") {
+      const newValue = value(parsedLama);
+      sessionStorage.setItem(name, JSON.stringify(newValue));
+      return newValue;
+    } else if (arguments.length === 1) {
+      return parsedLama;
+    } else {
+      sessionStorage.setItem(name, JSON.stringify(value));
+      return value;
+    }
+  } catch (e) {
+    console.error(`Gagal memproses JSON untuk "${name}", mereset data...`, e);
+    if (arguments.length > 1) {
+      const defaultValue = typeof value === "function" ? value(null) : value;
+      sessionStorage.setItem(name, JSON.stringify(defaultValue));
+      return defaultValue;
+    }
+    return null;
+  }
+}
+
+/**
+ * Pecat antek-antek yang berulah
+ * @param {string} name Hapus antek-antek yang ada
+ * @example
+ * $PecatAntek2("mul")
+ */
+
+export function $PecatAntek2(name) {
+  $Sejarah({
+    modul: "State: $PecatAntek2",
+    detail: {
+      nama: name,
+    },
+  });
+  if (typeof name !== "string" || !name.trim()) {
+    console.warn(`Nama tidak valid: ${name}`);
+  }
+
+  if (sessionStorage.getItem(name) === null) {
+    console.info(`Key "${name}" tidak ditemukan, tidak ada yang dihapus.`);
+  }
+
+  try {
+    sessionStorage.removeItem(name);
+  } catch (e) {
+    console.error(`Gagal menghapus ${name}:`, e);
+  }
+}