Split frontend into 2 modules.

Author: smack0007

Diff for: .eslintrc.cjs

@@ -33,12 +33,12 @@ module.exports = {
           {
             target: "apps/backend/",
             from: "apps/frontend/",
-            message: "Backend should not import from frontend. Use hotel-management-shared instead.",
+            message: "Backend should not import from frontend. Move code to libs and import from there instead.",
           },
           {
             target: "apps/frontend/",
             from: "apps/backend/",
-            message: "Frontend should not import from backend. Use hotel-management-shared instead.",
+            message: "Frontend should not import from backend. Move code to libs and import from there instead.",
           },
         ],
       },

Diff for: .gitignore

@@ -4,6 +4,9 @@
 !.yarn/plugins
 .pnp.*
 
+# rollup
+.rollup.cache
+
 # Logs
 logs
 *.log

Diff for: apps/frontend/.eslintrc.cjs renamed to apps/frontend/core/.eslintrc.cjs

@@ -0,0 +1 @@
+export {};

Diff for: apps/frontend/e2e/tsconfig.json renamed to apps/frontend/core/e2e/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "name": "hotel-management-frontend-core",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "run -T vite",
+    "build": "run -T run-p type-check build-only",
+    "clean": "run -T rimraf ./dist",
+    "preview": "run -T vite preview",
+    "test:unit": "run -T vitest --environment jsdom --root src/",
+    "test:e2e": "run -T playwright test",
+    "build-only": "run -T vite build",
+    "type-check": "run -T vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "run -T eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "hotel-management-frontend-rooms": "workspace:apps/frontend/rooms",
+    "hotel-management-shared": "workspace:libs/shared"
+  }
+}

Diff for: apps/frontend/core/e2e/vue.spec.d.ts

@@ -0,0 +1 @@
+@import "../../../../../node_modules/@picocss/pico/css/pico.min.css";

Diff for: apps/frontend/e2e/vue.spec.ts renamed to apps/frontend/core/e2e/vue.spec.ts

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 // import type { Hotel } from "hotel-management-shared";
 
-import type { BackendHotel } from "../../../backend/dist/main.js";
+import type { Hotel } from "hotel-management-shared";
 
 const props = defineProps<{
-  hotels: BackendHotel[];
+  hotels: Hotel[];
 }>();
 </script>
 

Diff for: apps/frontend/env.d.ts renamed to apps/frontend/core/env.d.ts

@@ -0,0 +1,29 @@
+import { createApp } from "vue";
+import { createRouter, createWebHistory } from "vue-router";
+import { createPinia } from "pinia";
+import Rooms from "hotel-management-frontend-rooms";
+
+import App from "./App.vue";
+import { routes } from "./routes.js";
+
+import "./assets/main.scss";
+
+const libs = { "hotel-management-frontend-rooms": Rooms };
+
+for (const [libName, lib] of Object.entries(libs)) {
+  routes.push(...lib.routes);
+}
+
+console.dir(routes);
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+});
+
+const app = createApp(App);
+
+app.use(createPinia());
+app.use(router);
+
+app.mount("#app");

Diff for: apps/frontend/index.html renamed to apps/frontend/core/index.html

@@ -0,0 +1,9 @@
+import HomePage from "./pages/HomePage.vue";
+
+export const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: HomePage,
+  },
+];

Diff for: apps/frontend/core/package.json

@@ -0,0 +1,15 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "playwright.config.*",
+    "core/playwright.config.ts",
+    "core/vite.config.ts"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

Diff for: apps/frontend/playwright.config.ts renamed to apps/frontend/core/playwright.config.ts

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "references": [
+    { "path": "./tsconfig.config.json" },
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.vitest.json" },
+    { "path": "../../../libs/shared/tsconfig.json" },
+    { "path": "../rooms/tsconfig.json" }
+  ]
+}

Diff for: apps/frontend/public/favicon.ico renamed to apps/frontend/core/public/favicon.ico

@@ -0,0 +1,6 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  extends: ["plugin:vue/vue3-essential", "@vue/eslint-config-typescript"],
+};

Diff for: apps/frontend/src/App.vue renamed to apps/frontend/core/src/App.vue

@@ -0,0 +1,4 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["./**/*"]
+}

Diff for: apps/frontend/src/assets/logo.svg renamed to apps/frontend/core/src/assets/logo.svg

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+
+// See here how to get started:
+// https://playwright.dev/docs/intro
+test("visits the app root url", async ({ page }) => {
+  await page.goto("/");
+  await expect(page.locator("div.greetings > h1")).toHaveText("You did it!");
+});

Diff for: apps/frontend/core/src/assets/main.scss

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

Diff for: apps/frontend/src/components/HotelList.vue renamed to apps/frontend/core/src/components/HotelList.vue

@@ -0,0 +1,30 @@
+{
+  "name": "hotel-management-frontend-rooms",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./dist/lib.js",
+  "module": "./dist/lib.js",
+  "types": "./dist/lib.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/lib.js",
+      "import": "./dist/lib.js",
+      "types": "./dist/lib.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "run -T vite",
+    "build": "run -T run-p type-check build-only",
+    "clean": "run -T rimraf ./dist",
+    "preview": "run -T vite preview",
+    "test:unit": "run -T vitest --environment jsdom --root src/",
+    "test:e2e": "run -T playwright test",
+    "build-only": "run -T vite build",
+    "type-check": "run -T vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "run -T eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "hotel-management-shared": "workspace:libs/shared"
+  }
+}

Diff for: apps/frontend/core/src/main.ts

@@ -0,0 +1,112 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./e2e",
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000,
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:5173",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+
+    /* Only on CI systems run the tests headless */
+    headless: !!process.env.CI,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+    {
+      name: "firefox",
+      use: {
+        ...devices["Desktop Firefox"],
+      },
+    },
+    {
+      name: "webkit",
+      use: {
+        ...devices["Desktop Safari"],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    /**
+     * Use the dev server by default for faster feedback loop.
+     * Use the preview server on CI for more realistic testing.
+    Playwright will re-use the local server if there is already a dev-server running.
+     */
+    command: process.env.CI ? "vite preview --port 5173" : "vite dev",
+    port: 5173,
+    reuseExistingServer: !process.env.CI,
+  },
+};
+
+export default config;

Diff for: apps/frontend/src/pages/HomePage.vue renamed to apps/frontend/core/src/pages/HomePage.vue

@@ -0,0 +1 @@
+@import "../../../../../node_modules/@picocss/pico/css/pico.min.css";

Diff for: apps/frontend/core/src/routes.ts

@@ -0,0 +1,5 @@
+import { routes } from "./routes";
+
+export default {
+  routes,
+};

Diff for: apps/frontend/src/stores/counter.ts renamed to apps/frontend/core/src/stores/counter.ts

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <h1>Rooms</h1>
+</template>

Diff for: apps/frontend/tsconfig.app.json renamed to apps/frontend/core/tsconfig.app.json

@@ -0,0 +1,9 @@
+import RoomsPage from "./pages/RoomsPage.vue";
+
+export const routes = [
+  {
+    path: "/rooms",
+    name: "rooms",
+    component: RoomsPage,
+  },
+];

Diff for: apps/frontend/core/tsconfig.config.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

Diff for: apps/frontend/core/tsconfig.json

@@ -0,0 +1 @@
+{"version":"4.8.4"}

Diff for: apps/frontend/tsconfig.vitest.json renamed to apps/frontend/core/tsconfig.vitest.json

@@ -1,10 +1,9 @@
 {
-  "extends": "../../tsconfig.json",
-  "files": [],
+  "extends": "../../../tsconfig.json",
   "references": [
     { "path": "./tsconfig.config.json" },
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.vitest.json" },
-    { "path": "../../libs/shared/tsconfig.json" }
+    { "path": "../../../libs/shared/tsconfig.json" }
   ]
 }