added catalyst library

.babelrc

@@ -16,6 +16,22 @@
             {
                 "loose": true
             }
+        ],
+        [
+            "module-resolver",
+            {
+                "root": [
+                    "."
+                ],
+                "alias": {
+                    "core": "./src/core",
+                    "common": "./src/common",
+                    "components": "./src/components",
+                    "pages": "./src/pages",
+                    "configs": "./src/configs",
+                    "services": "./src/services"
+                }
+            }
         ]
     ]
 }

package.json

@@ -15,7 +15,10 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
+    "@github/catalyst": "^1.1.3",
+    "@github/jtml": "^0.4.0",
     "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-polyfill": "^6.26.0",
     "connect-history-api-fallback": "^1.6.0",
     "html-webpack-plugin": "^5.3.1",

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";

tsconfig.json

@@ -29,6 +29,9 @@
             "pages*": [
                 "src/pages*"
             ],
+            "services*": [
+                "src/services*"
+            ],
             "@src*": [
                 "src*"
             ],

webpack.config.js

@@ -6,7 +6,8 @@ const alias = {
 	core: path.resolve(__dirname, '/core'),
     configs: path.resolve(__dirname, '/configs'),
     components: path.resolve(__dirname, '/components'),
-    pages: path.resolve(__dirname, '/pages')
+    pages: path.resolve(__dirname, '/pages'),
+    services: path.resolve(__dirname, '/services')
 };
 
 module.exports = {
@@ -47,6 +48,12 @@ module.exports = {
                     loader: 'babel-loader'
                 }
             },
+            {
+                test: /\.m?js/,
+                resolve: {
+                    fullySpecified: false
+                }
+            }
         ]
     },
     plugins: [

yarn.lock

@@ -914,6 +914,23 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
   integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
 
+"@github/catalyst@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@github/catalyst/-/catalyst-1.1.3.tgz#852311b3097927ef594a77041472ad6e3ae46c7d"
+  integrity sha512-GHacM4STeyWTBosHFZlKbcIgFZ8PztEXJ7kAdxEoQG+Fb9kkQ+GVSFZYcFsqQkjyy49mNVfofiiLnJiWO8y5MA==
+
+"@github/jtml@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@github/jtml/-/jtml-0.4.0.tgz#67afe0c3570dea800725970f931373ef71ccee52"
+  integrity sha512-749dmX5totDaFnRkr3gTCz9cIswRf4BgN1G1skyYx7MZHoYS+5qvCXTep0gae4YxX6N28EnS3vZvD8pYvyLI7w==
+  dependencies:
+    "@github/template-parts" "^0.3.0"
+
+"@github/template-parts@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@github/template-parts/-/template-parts-0.3.2.tgz#2b286983e7e8fe677de93d27078ea615d655e7bd"
+  integrity sha512-ErF88+S6rV0DRnXgs7cv2K/FGiYyipWKUZtGewfWz/8Dbddw0B5wXvZa0Ebph8ptcvYcAzDqSxy7AHCREX4xbw==
+
 "@types/eslint-scope@^3.7.0":
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.0.tgz#4792816e31119ebd506902a482caec4951fabd86"
@@ -1265,6 +1282,17 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-module-resolver@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.1.0.tgz#22a4f32f7441727ec1fbf4967b863e1e3e9f33e2"
+  integrity sha512-MlX10UDheRr3lb3P0WcaIdtCSRlxdQsB1sBqL7W0raF070bGl1HQQq5K3T2vf2XAYie+ww+5AKC/WrkjRO2knA==
+  dependencies:
+    find-babel-config "^1.2.0"
+    glob "^7.1.6"
+    pkg-up "^3.1.0"
+    reselect "^4.0.0"
+    resolve "^1.13.1"
+
 babel-plugin-polyfill-corejs2@^0.2.0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz#e9124785e6fd94f94b618a7954e5693053bf5327"
@@ -2176,6 +2204,14 @@ finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-babel-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.2.0.tgz#a9b7b317eb5b9860cda9d54740a8c8337a2283a2"
+  integrity sha512-jB2CHJeqy6a820ssiqwrKMeyC6nNdmrcgkKWJWmpoxpE8RKciYJXCcXRq1h2AzCo5I5BJeN2tkGEO3hLTuePRA==
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
@@ -2294,7 +2330,7 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@^7.0.3, glob@^7.1.3:
+glob@^7.0.3, glob@^7.1.3, glob@^7.1.6:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
   integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
@@ -2816,6 +2852,11 @@ json3@^3.3.3:
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
   integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
 
+json5@^0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
+  integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
+
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -3409,6 +3450,13 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
 portfinder@^1.0.26:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -3662,6 +3710,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -3691,7 +3744,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.14.2, resolve@^1.9.0:
+resolve@^1.13.1, resolve@^1.14.2, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==