From 4a675ac198775e39885634855a92c07f5d5742a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Sat, 29 May 2021 12:11:04 +0200 Subject: [PATCH] created base layouts and fixed structure --- .babelrc | 9 +++- .gitignore | 1 + .../BaseLayoutElement/BaseLayoutElement.ts | 27 ++++++++++++ src/common/layouts/index.ts | 1 + src/components/app-link/AppLinkElement.ts | 43 +++++++++++++++++++ src/components/app-main/AppMainElement.ts | 30 +++++++++++++ src/components/index.ts | 2 + src/core/services/base-service/BaseService.ts | 10 ++--- src/core/utils/closest-deco.ts | 2 +- src/index.ts | 2 + src/layouts/index.ts | 1 + src/layouts/menu-layout/MenuLayoutElement.ts | 25 +++++++++++ .../Home.ts => home-page/HomePageElement.ts} | 11 +++-- src/pages/index.ts | 2 +- tsconfig.json | 3 ++ webpack.config.js | 3 +- 16 files changed, 160 insertions(+), 12 deletions(-) create mode 100644 src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts create mode 100644 src/common/layouts/index.ts create mode 100644 src/components/app-link/AppLinkElement.ts create mode 100644 src/components/app-main/AppMainElement.ts create mode 100644 src/layouts/index.ts create mode 100644 src/layouts/menu-layout/MenuLayoutElement.ts rename src/pages/{home/Home.ts => home-page/HomePageElement.ts} (66%) 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 = {