created base layouts and fixed structure

.babelrc

@@ -29,9 +29,16 @@
                     "components": "./src/components",
                     "pages": "./src/pages",
                     "configs": "./src/configs",
-                    "services": "./src/services"
+                    "services": "./src/services",
+                    "layouts": "./src/layouts"
                 }
             }
+        ],
+        [
+            "@babel/plugin-proposal-private-methods",
+            {
+                "loose": true
+            }
         ]
     ]
 }

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 .env
+public

src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts

@@ -0,0 +1,27 @@
+import { target } from "@github/catalyst";
+
+class BaseLayoutElement extends HTMLElement {
+    @target slotted: HTMLElement;
+    public isLayout: boolean = true;
+    constructor() {
+        super();
+    }
+
+    get slotTag() {
+        return this.slotted?.firstElementChild?.tagName;
+    }
+
+    compareTags = (tag: string | HTMLElement): boolean => {
+        if (typeof tag === "string") {
+            return this.slotTag === tag;
+        }
+        return tag?.tagName === this.slotTag;
+    };
+
+    setElement = (newTag: string) => {
+        console.log(this.innerHTML);
+        this.slotted.innerHTML = `<${newTag}></${newTag}>`;
+    };
+}
+
+export default BaseLayoutElement;

src/common/layouts/index.ts

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

src/components/app-link/AppLinkElement.ts

@@ -0,0 +1,43 @@
+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/";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { RouterService } from "core/services";
+
+@controller
+class AppLinkElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    @attr to: string;
+    @attr title: string;
+    @target main: Element;
+    routerService: RouterService;
+    constructor() {
+        super();
+    }
+
+    public connectedCallback(): void {
+        this.update();
+        this.routerService = this.appMain?.routerService;
+        this.main.addEventListener("click", this.goTo);
+    }
+
+    public disconnectedCallback(): void {
+        this.main.removeEventListener("click", this.goTo);
+    }
+
+    goTo = () => {
+        this.routerService.goTo(this.to);
+    };
+
+    update() {
+        render(
+            html`<span
+                data-target="app-link.main"
+                style="text-decoration: underline; cursor: pointer;"
+                >${this.title}</span
+            >`,
+            this
+        );
+    }
+}

src/components/app-main/AppMainElement.ts

@@ -0,0 +1,30 @@
+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/";
+import { RouterService } from "core/services";
+
+@controller
+class AppMainElement extends HTMLElement {
+    public routerService: RouterService;
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.routerService = new RouterService(this);
+        this.routerService.setRoutes([
+            {
+                path: "/",
+                component: "home-page",
+                layout: "menu-layout",
+            },
+            {
+                path: "/home",
+                component: "home-page",
+            },
+        ]);
+        this.routerService.init();
+    }
+}
+
+export type { AppMainElement };

src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./app-main/AppMainElement";
+export * from "./app-link/AppLinkElement";

src/core/services/base-service/BaseService.ts

@@ -6,23 +6,23 @@ class BaseService {
         this.httpClient = new HttpClient();
     }
 
-    getAll = (headers: HeadersInit) => {
+    getAll = (headers?: HeadersInit) => {
         return this.httpClient.get(this.endpoint, null, headers);
     };
 
-    get = (params: Object, headers: HeadersInit) => {
+    get = (params?: Object, headers?: HeadersInit) => {
         return this.httpClient.get(this.endpoint, params, headers);
     };
 
-    put = (data: Object, headers: HeadersInit) => {
+    put = (data?: Object, headers?: HeadersInit) => {
         return this.httpClient.put(this.endpoint, data, headers);
     };
 
-    post = (data: Object, headers: HeadersInit) => {
+    post = (data?: Object, headers?: HeadersInit) => {
         return this.httpClient.post(this.endpoint, data, headers);
     };
 
-    delete = (data: Object, headers: HeadersInit) => {
+    delete = (data?: Object, headers?: HeadersInit) => {
         return this.httpClient.delete(this.endpoint, data, headers);
     };
 }

src/core/utils/closest-deco.ts

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

src/index.ts

@@ -1 +1,3 @@
+import "layouts";
 import "pages";
+import "components";

src/layouts/index.ts

@@ -0,0 +1 @@
+export * from "./menu-layout/MenuLayoutElement";

src/layouts/menu-layout/MenuLayoutElement.ts

@@ -0,0 +1,25 @@
+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/";
+import { BaseLayoutElement } from "common/layouts";
+
+@controller
+class MenuLayoutElement extends BaseLayoutElement {
+    constructor() {
+        super();
+    }
+
+    @update
+    connectedCallback() {}
+
+    update() {
+        render(
+            html`
+                <div>Menu</div>
+                <div data-target="menu-layout.slotted"></div>
+            `,
+            this
+        );
+    }
+}

src/pages/home-page/HomePageElement.ts

@@ -1,10 +1,10 @@
 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";
+import { PingService } from "services/";
 
 @controller
-class AppMainElement extends HTMLElement {
+class HomePageElement extends HTMLElement {
     private pingService: PingService;
     constructor() {
         super();
@@ -27,6 +27,11 @@ class AppMainElement extends HTMLElement {
     };
 
     update() {
-        render(html`${this.pongEl()}`, this);
+        render(
+            html`<app-link data-to="/home" data-title="Home"></app-link> |
+                <app-link data-to="/" data-title="Main"></app-link> |
+                <app-link data-to="/rb" data-title="$1"></app-link>`,
+            this
+        );
     }
 }

src/pages/index.ts

@@ -1 +1 @@
-export * from "./home/Home";
+export * from "./home-page/HomePageElement";

tsconfig.json

@@ -32,6 +32,9 @@
             "services*": [
                 "src/services*"
             ],
+            "layouts*": [
+                "src/layouts"
+            ],
             "@src*": [
                 "src*"
             ],

webpack.config.js

@@ -7,7 +7,8 @@ const alias = {
     configs: path.resolve(__dirname, '/configs'),
     components: path.resolve(__dirname, '/components'),
     pages: path.resolve(__dirname, '/pages'),
-    services: path.resolve(__dirname, '/services')
+    services: path.resolve(__dirname, '/services'),
+    layouts: path.resolve(__dirname, "/layouts")
 };
 
 module.exports = {