diff --git a/.babelrc b/.babelrc
index da78820..88e023a 100644
--- a/.babelrc
+++ b/.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
+ }
]
]
}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 37d7e73..c9d357f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
node_modules
.env
+public
\ No newline at end of file
diff --git a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts
new file mode 100644
index 0000000..3a36f40
--- /dev/null
+++ b/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}>`;
+ };
+}
+
+export default BaseLayoutElement;
diff --git a/src/common/layouts/index.ts b/src/common/layouts/index.ts
new file mode 100644
index 0000000..1305089
--- /dev/null
+++ b/src/common/layouts/index.ts
@@ -0,0 +1 @@
+export { default as BaseLayoutElement } from "./BaseLayoutElement/BaseLayoutElement";
diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts
new file mode 100644
index 0000000..efa0474
--- /dev/null
+++ b/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`${this.title}`,
+ this
+ );
+ }
+}
diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts
new file mode 100644
index 0000000..488dd49
--- /dev/null
+++ b/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 };
diff --git a/src/components/index.ts b/src/components/index.ts
index e69de29..6e9857d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./app-main/AppMainElement";
+export * from "./app-link/AppLinkElement";
diff --git a/src/core/services/base-service/BaseService.ts b/src/core/services/base-service/BaseService.ts
index 94d779b..9fb727b 100644
--- a/src/core/services/base-service/BaseService.ts
+++ b/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);
};
}
diff --git a/src/core/utils/closest-deco.ts b/src/core/utils/closest-deco.ts
index 1478aa9..5bd2ddb 100644
--- a/src/core/utils/closest-deco.ts
+++ b/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,
diff --git a/src/index.ts b/src/index.ts
index 8b456d2..1a8126a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1 +1,3 @@
+import "layouts";
import "pages";
+import "components";
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
new file mode 100644
index 0000000..65489b5
--- /dev/null
+++ b/src/layouts/index.ts
@@ -0,0 +1 @@
+export * from "./menu-layout/MenuLayoutElement";
diff --git a/src/layouts/menu-layout/MenuLayoutElement.ts b/src/layouts/menu-layout/MenuLayoutElement.ts
new file mode 100644
index 0000000..d226615
--- /dev/null
+++ b/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`
+ Menu
+
+ `,
+ this
+ );
+ }
+}
diff --git a/src/pages/home/Home.ts b/src/pages/home-page/HomePageElement.ts
similarity index 66%
rename from src/pages/home/Home.ts
rename to src/pages/home-page/HomePageElement.ts
index 25974d8..03c0585 100644
--- a/src/pages/home/Home.ts
+++ b/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` |
+ |
+ `,
+ this
+ );
}
}
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 13b830e..bcef41b 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -1 +1 @@
-export * from "./home/Home";
+export * from "./home-page/HomePageElement";
diff --git a/tsconfig.json b/tsconfig.json
index 66851af..314cde6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,9 @@
"services*": [
"src/services*"
],
+ "layouts*": [
+ "src/layouts"
+ ],
"@src*": [
"src*"
],
diff --git a/webpack.config.js b/webpack.config.js
index 53d8d97..92636b4 100644
--- a/webpack.config.js
+++ b/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 = {