vue-standalone

vue-standalone/.eslintrc.json

@@ -1,18 +1,56 @@
 {
+  "root": true,
   "ignorePatterns": ["!**/*"],
+  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
       "rules": {
-        "vue/multi-word-component-names": "off"
+        "vue/multi-word-component-names": "off",
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              },
+              {
+                "sourceTag": "type:feature",
+                "onlyDependOnLibsWithTags": ["type:feature", "type:ui"]
+              },
+              {
+                "sourceTag": "type:ui",
+                "onlyDependOnLibsWithTags": ["type:ui"]
+              },
+              {
+                "sourceTag": "scope:orders",
+                "onlyDependOnLibsWithTags": [
+                  "scope:orders",
+                  "scope:products",
+                  "scope:shared"
+                ]
+              },
+              {
+                "sourceTag": "scope:products",
+                "onlyDependOnLibsWithTags": ["scope:products", "scope:shared"]
+              },
+              {
+                "sourceTag": "scope:shared",
+                "onlyDependOnLibsWithTags": ["scope:shared"]
+              }
+            ]
+          }
+        ]
       }
     }
   ],
   "extends": [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/eslint-config-typescript",
-    "@vue/eslint-config-prettier/skip-formatting",
-    "./.eslintrc.base.json"
+    "@vue/eslint-config-prettier/skip-formatting"
   ]
 }

vue-standalone/.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  actions: read
+  contents: read
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      # Cache node_modules
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - run: npm ci
+      - uses: nrwl/nx-set-shas@v4
+
+      # uncomment to enable task distribution
+      # - run: npx nx-cloud start-ci-run --distributes-on="5 linux-medium"
+
+      - run: npx nx-cloud record -- nx format:check
+      - run: npx nx affected -t=lint,test,build --parallel=3

vue-standalone/.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "nrwl.angular-console",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
-  ]
+  "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode"]
 }

vue-standalone/e2e/.eslintrc.json

@@ -1,18 +1,21 @@
 {
-  "extends": [
-    "plugin:cypress/recommended",
-    "../.eslintrc.json",
-    "../.eslintrc.base.json"
-  ],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": ["*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {}
     },
     {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     }
-  ]
+  ],
+  "plugins": ["@nx"],
+  "extends": ["plugin:cypress/recommended"]
 }

vue-standalone/e2e/cypress.config.ts

@@ -1,8 +1,14 @@
-import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
 
+import { defineConfig } from 'cypress';
+
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname, {
-    bundler: 'vite',
-  }),
+  e2e: {
+    ...nxE2EPreset(__filename, {
+      cypressDir: 'src',
+      bundler: 'vite',
+      webServerCommands: { default: 'nx run myvueapp:serve' },
+    }),
+    baseUrl: 'http://localhost:4200',
+  },
 });

vue-standalone/e2e/project.json

@@ -1,33 +1,9 @@
 {
   "name": "e2e",
   "$schema": "../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "e2e/src",
   "projectType": "application",
-  "targets": {
-    "e2e": {
-      "executor": "@nx/cypress:cypress",
-      "options": {
-        "cypressConfig": "e2e/cypress.config.ts",
-        "devServerTarget": "myvueapp:serve:development",
-        "testingType": "e2e"
-      },
-      "configurations": {
-        "production": {
-          "devServerTarget": "myvueapp:serve:production"
-        },
-        "ci": {
-          "devServerTarget": "myvueapp:serve-static"
-        }
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["e2e/**/*.{js,ts}"]
-      }
-    }
-  },
+  "sourceRoot": "e2e/src",
+  "targets": {},
   "tags": [],
   "implicitDependencies": ["myvueapp"]
 }

vue-standalone/e2e/src/e2e/app.cy.ts

@@ -1,13 +1,13 @@
 import { getGreeting } from '../support/app.po';
 
-describe('myvueapp', () => {
+describe('e2e', () => {
   beforeEach(() => cy.visit('/'));
 
   it('should display welcome message', () => {
     // Custom command example, see `../support/commands.ts` file
     cy.login('[email protected]', 'myPassword');
 
     // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains('Welcome');
+    getGreeting().contains(/Welcome/);
   });
 });

vue-standalone/e2e/src/fixtures/example.json

@@ -1,4 +1,5 @@
 {
   "name": "Using fixtures to represent data",
-  "email": "[email protected]"
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
 }

vue-standalone/e2e/src/support/commands.ts

@@ -1,5 +1,7 @@
+/// <reference types="cypress" />
+
 // ***********************************************
-// This example commands.js shows you how to
+// This example commands.ts shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
@@ -15,7 +17,7 @@ declare namespace Cypress {
     login(email: string, password: string): void;
   }
 }
-//
+
 // -- This is a parent command --
 Cypress.Commands.add('login', (email, password) => {
   console.log('Custom command example: Login', email, password);

vue-standalone/e2e/src/support/e2e.ts

@@ -1,5 +1,5 @@
 // ***********************************************************
-// This example support/index.js is processed and
+// This example support/e2e.ts is processed and
 // loaded automatically before your test files.
 //
 // This is a great place to put global configuration and
@@ -13,5 +13,5 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
-// Import commands.js using ES2015 syntax:
+// Import commands.ts using ES2015 syntax:
 import './commands';

vue-standalone/e2e/tsconfig.json

@@ -1,11 +1,20 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
-    "sourceMap": false,
-    "moduleResolution": "node",
-    "outDir": "../dist/out-tsc",
     "allowJs": true,
-    "types": ["cypress", "node"]
+    "outDir": "../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"],
+    "sourceMap": false
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "cypress.config.ts",
+    "**/*.cy.ts",
+    "**/*.cy.tsx",
+    "**/*.cy.js",
+    "**/*.cy.jsx",
+    "**/*.d.ts"
+  ]
 }

vue-standalone/modules/orders/.eslintrc.json

@@ -4,7 +4,7 @@
     "eslint:recommended",
     "@vue/eslint-config-typescript",
     "@vue/eslint-config-prettier/skip-formatting",
-    "../../.eslintrc.base.json"
+    "../../.eslintrc.json"
   ],
   "ignorePatterns": ["!**/*"],
   "overrides": [

vue-standalone/modules/orders/project.json

@@ -4,37 +4,5 @@
   "sourceRoot": "modules/orders/src",
   "projectType": "library",
   "tags": ["type:feature", "scope:orders"],
-  "targets": {
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": ["modules/orders/**/*.{ts,tsx,js,jsx,vue}"]
-      }
-    },
-    "build": {
-      "executor": "@nx/vite:build",
-      "outputs": ["{options.outputPath}"],
-      "defaultConfiguration": "production",
-      "options": {
-        "outputPath": "dist/modules/orders"
-      },
-      "configurations": {
-        "development": {
-          "mode": "development"
-        },
-        "production": {
-          "mode": "production"
-        }
-      }
-    },
-    "test": {
-      "executor": "@nx/vite:test",
-      "outputs": ["{options.reportsDirectory}"],
-      "options": {
-        "passWithNoTests": true,
-        "reportsDirectory": "../../coverage/modules/orders"
-      }
-    }
-  }
+  "targets": {}
 }

vue-standalone/modules/orders/src/index.ts

@@ -1 +1 @@
-export { default as Orders } from './lib/orders.vue';
+export { default as OrderList } from './order-list/order-list.vue';

vue-standalone/modules/orders/src/order-list/order-list.spec.ts

@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils';
+import OrderList from './order-list.vue';
+
+describe('OrderList', () => {
+  it('renders properly', () => {
+    const wrapper = mount(OrderList, {});
+    expect(wrapper.text()).toContain('Welcome to OrderList');
+  });
+});