added catalyst library

src/core/services/http-service/HttpClient.ts

@@ -104,8 +104,11 @@ function resolveUrl(url: string, path: string): string {
     if (path.includes("http") || path.includes("://")) {
         return path;
     }
-    const fixedPath = path.split("/").join("/");
-    const urlWithPath = `${url.endsWith("/") ? url : `${url}/`}${path}`;
+    const fixedPath = path
+        .split("/")
+        .filter((i) => i)
+        .join("/");
+    const urlWithPath = `${url.endsWith("/") ? url : `${url}/`}${fixedPath}`;
     return urlWithPath;
 }
 

src/core/utils/closest-deco.ts

@@ -0,0 +1,15 @@
+import { toKebabCase } from "core/utils";
+
+export default function closest(proto: Object, key: string): Object {
+    const kebab: string = toKebabCase(key);
+    return Object.defineProperty(proto, key, {
+        configurable: true,
+        get() {
+            return findClosest(this, kebab);
+        },
+    });
+}
+
+function findClosest(element: HTMLElement, key: string) {
+    return element.closest(key);
+}

src/core/utils/index-deco.ts

@@ -0,0 +1,8 @@
+export default function index(proto: Object, key: string): Object {
+    return Object.defineProperty(proto, key, {
+        configurable: true,
+        get() {
+            return Array.from(this.parentNode.children).indexOf(this);
+        },
+    });
+}

src/core/utils/index.ts

@@ -0,0 +1,5 @@
+export { default as toKebabCase } from "./toKebabCase";
+export { default as update } from "./update-deco";
+export { default as index } from "./index-deco";
+export { default as closest } from "./closest-deco";
+export { default as isTrue } from "./isTrue";

src/core/utils/isTrue.ts

@@ -0,0 +1,3 @@
+export default function isTrue(bool: string) {
+    return bool === "true";
+}

src/core/utils/toKebabCase.ts

@@ -0,0 +1,6 @@
+export default function toKebabCase(text: string) {
+    return text
+        .replace(/([a-z])([A-Z])/g, "$1-$2")
+        .replace(/\s+/g, "-")
+        .toLowerCase();
+}

src/core/utils/update-deco.ts

@@ -0,0 +1,8 @@
+export default function update(proto: any, key?: string, dir?: any) {
+    const method = dir.value!;
+    dir.value = function () {
+        const _return = method.apply(this, arguments);
+        if (proto.update) proto.update.call(this);
+        return _return;
+    };
+}

src/index.ts

@@ -1,3 +1 @@
-const main = document.querySelector("app-main");
-
-if (main) main.innerHTML = "Works";
+import "pages";

src/pages/home/Home.ts

@@ -0,0 +1,32 @@
+import { attr, targets, controller, target } from "@github/catalyst";
+import { closest, index, update, isTrue } from "core/utils";
+import { html, render, until } from "@github/jtml";
+import { PingService } from "services";
+
+@controller
+class AppMainElement extends HTMLElement {
+    private pingService: PingService;
+    constructor() {
+        super();
+        this.pingService = new PingService();
+    }
+    @update
+    connectedCallback() {}
+
+    getPong = async () => {
+        try {
+            const response = await this.pingService.getAll();
+            return response.api;
+        } catch (err) {
+            console.log(err);
+        }
+    };
+
+    pongEl = () => {
+        return html`<div>${until(this.getPong())}</div>`;
+    };
+
+    update() {
+        render(html`${this.pongEl()}`, this);
+    }
+}

src/pages/index.ts

@@ -0,0 +1 @@
+export * from "./home/Home";

src/services/PingService.ts

@@ -0,0 +1,9 @@
+import { BaseService } from "core/services";
+
+class PingService extends BaseService {
+    constructor() {
+        super("/api");
+    }
+}
+
+export default PingService;

src/services/index.ts

@@ -0,0 +1 @@
+export { default as PingService } from "./PingService";