Merge pull request #291 from markuczy/feat/webcomponents-props

feat: props passing to webcomponents

libs/angular-remote-components/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/model/remote-component'
+export * from './lib/model/remote-webcomponent'
 export * from './lib/model/remote-component-config.model'
 export * from './lib/model/injection-tokens'
 export * from './lib/components/slot/slot.component'

libs/angular-remote-components/src/lib/components/slot/slot.component.ts

@@ -15,6 +15,7 @@ import { BehaviorSubject, Subscription, Observable, combineLatest } from 'rxjs'
 import { RemoteComponentInfo, SLOT_SERVICE, SlotComponentConfiguration, SlotService } from '../../services/slot.service'
 import { ocxRemoteComponent } from '../../model/remote-component'
 import { Technologies } from '@onecx/integration-interface'
+import { RemoteComponentConfig } from '../../model/remote-component-config.model'
 
 @Component({
   selector: 'ocx-slot[name]',
@@ -84,6 +85,12 @@ export class SlotComponent implements OnInit, OnDestroy {
     ) {
       if (componentInfo.remoteComponent.elementName) {
         const element = document.createElement(componentInfo.remoteComponent.elementName)
+        ;(element as any)['ocxRemoteComponentConfig'] = {
+          appId: componentInfo.remoteComponent.appId,
+          productName: componentInfo.remoteComponent.productName,
+          baseUrl: componentInfo.remoteComponent.baseUrl,
+          permissions: permissions,
+        } satisfies RemoteComponentConfig
         viewContainer?.element.nativeElement.appendChild(element)
       }
     }

libs/angular-remote-components/src/lib/model/remote-webcomponent.ts

@@ -0,0 +1,5 @@
+import { RemoteComponentConfig } from './remote-component-config.model'
+
+export interface ocxRemoteWebcomponent {
+  ocxRemoteComponentConfig: RemoteComponentConfig
+}

libs/angular-webcomponents/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "ocx",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "ocx",
+            "style": "kebab-case"
+          }
+        ],
+        "no-restricted-syntax": [
+          "off",
+          {
+            "selector": "CallExpression[callee.object.name=\"console\"][callee.property.name=/^(debug|info|time|timeEnd|trace)$/]"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": "error"
+      }
+    }
+  ]
+}

libs/angular-webcomponents/README.md

@@ -0,0 +1,7 @@
+# angular-webcomponents
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test angular-webcomponents` to execute the unit tests.

libs/angular-webcomponents/jest.config.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+export default {
+  displayName: 'angular-webcomponents',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/libs/angular-webcomponents',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+}

libs/angular-webcomponents/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/angular-webcomponents",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/angular-webcomponents/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@onecx/angular-webcomponents",
+  "version": "4.33.0",
+  "peerDependencies": {
+  },
+  "dependencies": {},
+  "publishConfig": {
+    "access": "public"
+  }
+}

libs/angular-webcomponents/project.json

@@ -0,0 +1,55 @@
+{
+  "name": "angular-webcomponents",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/angular-webcomponents/src",
+  "prefix": "onecx",
+  "tags": [],
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "@nx/angular:package",
+      "outputs": [
+        "{workspaceRoot}/dist/{projectRoot}"
+      ],
+      "options": {
+        "project": "libs/angular-webcomponents/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "libs/angular-webcomponents/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "libs/angular-webcomponents/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "libs/angular-webcomponents/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nx/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/angular-webcomponents/**/*.ts", "libs/angular-webcomponents/**/*.html"]
+      }
+    },
+    "release": {
+      "executor": "nx-release:build-update-publish",
+      "options": {
+        "libName": "angular-webcomponents"
+      }
+    }
+  }
+}

libs/angular-webcomponents/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/utils/webcomponent-router-initializer.utils'

libs/angular-webcomponents/src/lib/utils/webcomponent-router-initializer.utils.ts

@@ -0,0 +1,3 @@
+export function initializeRouter() {
+  console.log('tmp')
+}

libs/angular-webcomponents/src/test-setup.ts

@@ -0,0 +1,8 @@
+// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
+globalThis.ngJest = {
+  testEnvironmentOptions: {
+    errorOnUnknownElements: true,
+    errorOnUnknownProperties: true,
+  },
+}
+import 'jest-preset-angular/setup-jest'

libs/angular-webcomponents/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.lib.prod.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

libs/angular-webcomponents/tsconfig.lib.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "target": "es2022",
+    "useDefineForClassFields": false
+  },
+  "exclude": ["**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "**/*.test.ts", "**/*.stories.ts", "jest.config.ts"],
+  "include": ["**/*.ts"]
+}

libs/angular-webcomponents/tsconfig.lib.prod.json

@@ -0,0 +1,13 @@
+{
+    "extends": "./tsconfig.lib.json",
+    "compilerOptions": {
+      "declarationMap": false,
+      "target": "es2022",
+      "useDefineForClassFields": false
+    },
+    "angularCompilerOptions": {
+      "compilationMode": "partial"
+    },
+    "exclude": ["jest.config.ts"]
+  }
+

libs/angular-webcomponents/tsconfig.spec.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "target": "es2016",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}

tsconfig.base.json

@@ -24,6 +24,7 @@
       "@onecx/angular-remote-components": ["libs/angular-remote-components/src/index.ts"],
       "@onecx/angular-standalone-shell": ["libs/angular-standalone-shell/src/index.ts"],
       "@onecx/angular-testing": ["libs/angular-testing/src/index.ts"],
+      "@onecx/angular-webcomponents": ["libs/angular-webcomponents/src/index.ts"],
       "@onecx/integration-interface": ["libs/integration-interface/src/index.ts"],
       "@onecx/keycloak-auth": ["libs/keycloak-auth/src/index.ts"],
       "@onecx/portal-integration-angular": ["libs/portal-integration-angular/src/index.ts"],