PHXGMBH/phx-frontend-plugin-webcomponent-demo
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

public-packages #1

Merged
marcel.reichelt merged 2 commits from public-packages into master 2026-06-11 20:59:46 +02:00
Conversation 0 Commits 2 Files Changed 14 +103 -135
9 changed files with 103 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b6e9ddbb0e - Show all commits

43
README.DE.md
View File

@@ -2,7 +2,7 @@
> [English version](README.md) > [English version](README.md)
Beispielprojekt, das zeigt, wie ein **PHX-ERP-Frontend-Plugin** als Angular-Web-Component mit `@phx/shared` und `@phx/shared-ui` erstellt wird. Beispielprojekt, das zeigt, wie ein **PHX-ERP-Frontend-Plugin** als Angular-Web-Component mit `@phx-erp/shared` und `@phx-erp/shared-ui` erstellt wird.
Dieselbe Codebasis unterstützt zwei Arbeitsweisen: Dieselbe Codebasis unterstützt zwei Arbeitsweisen:
@@ -67,7 +67,6 @@ Ein PHX-Frontend-Plugin ist eine Angular-Anwendung, die als **Custom Element** (
- [Node.js](https://nodejs.org/) (LTS empfohlen) - [Node.js](https://nodejs.org/) (LTS empfohlen)
- [Yarn v4](https://yarnpkg.com/getting-started/install) - [Yarn v4](https://yarnpkg.com/getting-started/install)
- Eine laufende PHX-Instanz (für Plugin-Host-Tests und GraphQL-Schema/Codegen) - Eine laufende PHX-Instanz (für Plugin-Host-Tests und GraphQL-Schema/Codegen)
- Ein **npm-Zugangstoken** mit Lesezugriff auf PHXGMBH-Pakete — anfordern über Ihren PHX-Partner
Für die lokale eigenständige Entwicklung benötigen Sie außerdem eines der folgenden: Für die lokale eigenständige Entwicklung benötigen Sie außerdem eines der folgenden:
@@ -78,15 +77,13 @@ Für die lokale eigenständige Entwicklung benötigen Sie außerdem eines der fo
## Schnellstart ## Schnellstart
1. **Yarn konfigurieren**, um auf die PHX-npm-Registry zuzugreifen (siehe [PHX-Bibliotheken](#5-phx-bibliotheken)). `.yarnrc.yml` nicht committen. 1. **Abhängigkeiten installieren:**
2. **Abhängigkeiten installieren:**
```bash ```bash
yarn install yarn install
``` ```
3. **Lokale Development-Umgebung anlegen** (optional, für den Standalone-Modus): 2. **Lokale Development-Umgebung anlegen** (optional, für den Standalone-Modus):
```bash ```bash
cp src/environments/environment.example.ts src/environments/environment.development.ts cp src/environments/environment.example.ts src/environments/environment.development.ts
@@ -94,13 +91,13 @@ Für die lokale eigenständige Entwicklung benötigen Sie außerdem eines der fo
Passen Sie `apiUrl`, `wsUrl` und optional `apiKey` in dieser Datei an. Die Datei ist gitignored. Passen Sie `apiUrl`, `wsUrl` und optional `apiKey` in dieser Datei an. Die Datei ist gitignored.
4. **GraphQL-Typen generieren** (erfordert PHX Admin API unter der in `codegen.ts` konfigurierten Schema-URL): 3. **GraphQL-Typen generieren** (erfordert PHX Admin API unter der in `codegen.ts` konfigurierten Schema-URL):
```bash ```bash
yarn codegen yarn codegen
``` ```
5. **In einem der Entwicklungsmodi** unten starten. 4. **In einem der Entwicklungsmodi** unten starten.
--- ---
@@ -367,24 +364,12 @@ Fügen Sie `fileReplacements` zur **Development**-Build-Konfiguration in `angula
### 5. PHX-Bibliotheken ### 5. PHX-Bibliotheken
`@phx/shared` und `@phx/shared-ui` werden in der PHXGMBH-npm-Registry veröffentlicht. `@phx-erp/shared` und `@phx-erp/shared-ui` werden in der öffentlichen npm-Registry veröffentlicht.
Erstellen Sie `.yarnrc.yml` im Projektroot (oder bearbeiten Sie `~/.yarnrc.yml` für eine globale Konfiguration): Installieren Sie die Bibliotheken:
```yml
nodeLinker: node-modules
npmScopes:
phx:
npmRegistryServer: "https://gitea.phx-erp.de/api/packages/PHXGMBH/npm/"
npmAuthToken: "*YOUR-TOKEN*"
```
> **Wichtig:** Nehmen Sie `.yarnrc.yml` in `.gitignore` auf, wenn sie Ihren Token enthält.
Installieren Sie anschließend die Bibliotheken:
```bash ```bash
yarn add @phx/shared @phx/shared-ui yarn add @phx-erp/shared @phx-erp/shared-ui
``` ```
### 6. Plugin-Setup ### 6. Plugin-Setup
@@ -396,7 +381,7 @@ Fügen Sie `providePhoenixPluginWithPrimeNG` in `src/app/app.config.ts` hinzu:
```ts ```ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router'; import { provideRouter } from '@angular/router';
import { providePhoenixPluginWithPrimeNG } from '@phx/shared-ui'; import { providePhoenixPluginWithPrimeNG } from '@phx-erp/shared-ui';
import { routes } from './app.routes'; import { routes } from './app.routes';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
@@ -424,7 +409,7 @@ Erstellen Sie `src/app/services/phoenix-host-bridge.service.ts`:
```ts ```ts
import { Injectable, Injector, signal } from '@angular/core'; import { Injectable, Injector, signal } from '@angular/core';
import type { IPluginServices } from '@phx/shared-ui'; import type { IPluginServices } from '@phx-erp/shared-ui';
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class PhoenixHostBridgeService { export class PhoenixHostBridgeService {
@@ -459,7 +444,7 @@ Ihre Root-Komponente empfängt `pluginServices` und `hostInjector` von PHX und l
import { Component, effect, inject, Injector, input } from '@angular/core'; import { Component, effect, inject, Injector, input } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { PhoenixHostBridgeService } from './services/phoenix-host-bridge.service'; import { PhoenixHostBridgeService } from './services/phoenix-host-bridge.service';
import { IPluginServices, syncPhoenixHostInjector } from '@phx/shared-ui'; import { IPluginServices, syncPhoenixHostInjector } from '@phx-erp/shared-ui';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@@ -492,7 +477,7 @@ Registrieren Sie in `src/main.ts` Ihr Plugin als Custom Element (ersetzen Sie `*
```ts ```ts
import { appConfig } from './app/app.config'; import { appConfig } from './app/app.config';
import { App } from './app/app'; import { App } from './app/app';
import { bootstrapPhoenixPluginCustomElement } from '@phx/shared-ui'; import { bootstrapPhoenixPluginCustomElement } from '@phx-erp/shared-ui';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
bootstrapPhoenixPluginCustomElement(App, '*YOUR-TAG*', appConfig).then((app) => { bootstrapPhoenixPluginCustomElement(App, '*YOUR-TAG*', appConfig).then((app) => {
@@ -764,7 +749,7 @@ Dieses Repository führt zusätzlich `copy-latest.mjs` parallel zu `build` aus,
|---------|-----------| |---------|-----------|
| PHX zeigt eine alte Plugin-Version | Hard-Refresh; prüfen, ob `serve.json` `Cache-Control: no-store` für JS setzt; `yarn run plugin` neu starten | | PHX zeigt eine alte Plugin-Version | Hard-Refresh; prüfen, ob `serve.json` `Cache-Control: no-store` für JS setzt; `yarn run plugin` neu starten |
| `401` / GraphQL-Auth-Fehler im Standalone-Modus | `apiKey` in `environment.development.ts` setzen oder über `/login` anmelden | | `401` / GraphQL-Auth-Fehler im Standalone-Modus | `apiKey` in `environment.development.ts` setzen oder über `/login` anmelden |
| `yarn add @phx/shared` schlägt fehl | Token in `.yarnrc.yml` prüfen; Ihren PHX-Partner kontaktieren | | `yarn add @phx-erp/shared` schlägt fehl | Netzwerkzugriff auf die öffentliche npm-Registry prüfen; `yarn install` erneut ausführen |
| Routing in PHX funktioniert nicht | Routen-Segmente zu `stripTrailingSegments` in `providePhoenixPluginWithPrimeNG` hinzufügen | | Routing in PHX funktioniert nicht | Routen-Segmente zu `stripTrailingSegments` in `providePhoenixPluginWithPrimeNG` hinzufügen |
| Tailwind-Klassen fehlen in einer Komponente | `@tailwind`-Direktiven in den `styles` der Komponente ergänzen | | Tailwind-Klassen fehlen in einer Komponente | `@tailwind`-Direktiven in den `styles` der Komponente ergänzen |
| `yarn codegen` schlägt fehl | PHX muss laufen und die Schema-URL in `codegen.ts` erreichbar sein | | `yarn codegen` schlägt fehl | PHX muss laufen und die Schema-URL in `codegen.ts` erreichbar sein |
@@ -774,4 +759,4 @@ Dieses Repository führt zusätzlich `copy-latest.mjs` parallel zu `build` aus,
## Support ## Support
Bei Registry-Zugang, Integrationsfragen oder PHX-spezifischen APIs wenden Sie sich an Ihren PHX-Partner. Bei Integrationsfragen oder PHX-spezifischen APIs wenden Sie sich an Ihren PHX-Partner.

43
README.md
View File

@@ -2,7 +2,7 @@
> [Deutsche Version](README.DE.md) > [Deutsche Version](README.DE.md)
Example project showing how to build a **PHX ERP frontend plugin** as an Angular web component, using `@phx/shared` and `@phx/shared-ui`. Example project showing how to build a **PHX ERP frontend plugin** as an Angular web component, using `@phx-erp/shared` and `@phx-erp/shared-ui`.
The same codebase supports two workflows: The same codebase supports two workflows:
@@ -67,7 +67,6 @@ A PHX frontend plugin is an Angular application packaged as a **custom element**
- [Node.js](https://nodejs.org/) (LTS recommended) - [Node.js](https://nodejs.org/) (LTS recommended)
- [Yarn v4](https://yarnpkg.com/getting-started/install) - [Yarn v4](https://yarnpkg.com/getting-started/install)
- A running PHX instance (for plugin-host testing and GraphQL schema/codegen) - A running PHX instance (for plugin-host testing and GraphQL schema/codegen)
- An **npm access token** with read access to PHXGMBH packages — request one at your PHX partner
For local standalone development you also need either: For local standalone development you also need either:
@@ -78,15 +77,13 @@ For local standalone development you also need either:
## Quick start ## Quick start
1. **Configure Yarn** to access the PHX npm registry (see [PHX libraries](#5-phx-libraries)). Do not commit `.yarnrc.yml`. 1. **Install dependencies:**
2. **Install dependencies:**
```bash ```bash
yarn install yarn install
``` ```
3. **Create a local development environment** (optional, for standalone mode): 2. **Create a local development environment** (optional, for standalone mode):
```bash ```bash
cp src/environments/environment.example.ts src/environments/environment.development.ts cp src/environments/environment.example.ts src/environments/environment.development.ts
@@ -94,13 +91,13 @@ For local standalone development you also need either:
Adjust `apiUrl`, `wsUrl`, and optionally `apiKey` in that file. The file is gitignored. Adjust `apiUrl`, `wsUrl`, and optionally `apiKey` in that file. The file is gitignored.
4. **Generate GraphQL types** (requires PHX admin API at the schema URL configured in `codegen.ts`): 3. **Generate GraphQL types** (requires PHX admin API at the schema URL configured in `codegen.ts`):
```bash ```bash
yarn codegen yarn codegen
``` ```
5. **Run in one of the development modes** below. 4. **Run in one of the development modes** below.
--- ---
@@ -367,24 +364,12 @@ Add `fileReplacements` to the **development** build configuration in `angular.js
### 5. PHX libraries ### 5. PHX libraries
`@phx/shared` and `@phx/shared-ui` are published on the PHXGMBH npm registry. `@phx-erp/shared` and `@phx-erp/shared-ui` are published on the public npm registry.
Create `.yarnrc.yml` in the project root (or edit `~/.yarnrc.yml` for a global setup): Install the libraries:
```yml
nodeLinker: node-modules
npmScopes:
phx:
npmRegistryServer: "https://gitea.phx-erp.de/api/packages/PHXGMBH/npm/"
npmAuthToken: "*YOUR-TOKEN*"
```
> **Important:** Add `.yarnrc.yml` to `.gitignore` if it contains your token.
Then install the libraries:
```bash ```bash
yarn add @phx/shared @phx/shared-ui yarn add @phx-erp/shared @phx-erp/shared-ui
``` ```
### 6. Plugin setup ### 6. Plugin setup
@@ -396,7 +381,7 @@ Add `providePhoenixPluginWithPrimeNG` in `src/app/app.config.ts`:
```ts ```ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core'; import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router'; import { provideRouter } from '@angular/router';
import { providePhoenixPluginWithPrimeNG } from '@phx/shared-ui'; import { providePhoenixPluginWithPrimeNG } from '@phx-erp/shared-ui';
import { routes } from './app.routes'; import { routes } from './app.routes';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
@@ -424,7 +409,7 @@ Create `src/app/services/phoenix-host-bridge.service.ts`:
```ts ```ts
import { Injectable, Injector, signal } from '@angular/core'; import { Injectable, Injector, signal } from '@angular/core';
import type { IPluginServices } from '@phx/shared-ui'; import type { IPluginServices } from '@phx-erp/shared-ui';
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class PhoenixHostBridgeService { export class PhoenixHostBridgeService {
@@ -459,7 +444,7 @@ Your root component receives `pluginServices` and `hostInjector` from PHX and fo
import { Component, effect, inject, Injector, input } from '@angular/core'; import { Component, effect, inject, Injector, input } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { PhoenixHostBridgeService } from './services/phoenix-host-bridge.service'; import { PhoenixHostBridgeService } from './services/phoenix-host-bridge.service';
import { IPluginServices, syncPhoenixHostInjector } from '@phx/shared-ui'; import { IPluginServices, syncPhoenixHostInjector } from '@phx-erp/shared-ui';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@@ -492,7 +477,7 @@ In `src/main.ts`, register your plugin as a custom element (replace `*YOUR-TAG*`
```ts ```ts
import { appConfig } from './app/app.config'; import { appConfig } from './app/app.config';
import { App } from './app/app'; import { App } from './app/app';
import { bootstrapPhoenixPluginCustomElement } from '@phx/shared-ui'; import { bootstrapPhoenixPluginCustomElement } from '@phx-erp/shared-ui';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
bootstrapPhoenixPluginCustomElement(App, '*YOUR-TAG*', appConfig).then((app) => { bootstrapPhoenixPluginCustomElement(App, '*YOUR-TAG*', appConfig).then((app) => {
@@ -764,7 +749,7 @@ This repository additionally runs `copy-latest.mjs` alongside `build` to publish
|---------|-----------------| |---------|-----------------|
| PHX shows an old version of the plugin | Hard-refresh; confirm `serve.json` sets `Cache-Control: no-store` for JS; restart `yarn run plugin` | | PHX shows an old version of the plugin | Hard-refresh; confirm `serve.json` sets `Cache-Control: no-store` for JS; restart `yarn run plugin` |
| `401` / GraphQL auth errors in standalone mode | Set `apiKey` in `environment.development.ts` or log in via `/login` | | `401` / GraphQL auth errors in standalone mode | Set `apiKey` in `environment.development.ts` or log in via `/login` |
| `yarn add @phx/shared` fails | Verify `.yarnrc.yml` token; contact your PHX partner | | `yarn add @phx-erp/shared` fails | Check network access to the public npm registry; retry `yarn install` |
| Routing broken inside PHX | Add route segments to `stripTrailingSegments` in `providePhoenixPluginWithPrimeNG` | | Routing broken inside PHX | Add route segments to `stripTrailingSegments` in `providePhoenixPluginWithPrimeNG` |
| Tailwind classes missing in a component | Add `@tailwind` directives to that component's `styles` | | Tailwind classes missing in a component | Add `@tailwind` directives to that component's `styles` |
| `yarn codegen` fails | Ensure PHX is running and the schema URL in `codegen.ts` is reachable | | `yarn codegen` fails | Ensure PHX is running and the schema URL in `codegen.ts` is reachable |
@@ -774,4 +759,4 @@ This repository additionally runs `copy-latest.mjs` alongside `build` to publish
## Support ## Support
For registry access, integration questions, or PHX-specific APIs, contact your PHX partner. For integration questions or PHX-specific APIs, contact your PHX partner.

124
latest/main.js
View File

File diff suppressed because one or more lines are too long

4
package.json
View File

@@ -36,8 +36,8 @@
"@angular/platform-browser": "^20.3.0", "@angular/platform-browser": "^20.3.0",
"@angular/router": "^20.3.0", "@angular/router": "^20.3.0",
"@apollo/client": "^4.0.1", "@apollo/client": "^4.0.1",
"@phx/shared": "^0.1.4", "@phx-erp/shared": "^0.1.4",
"@phx/shared-ui": "^0.1.4", "@phx-erp/shared-ui": "^0.1.4",
"@primeng/themes": "20", "@primeng/themes": "20",
"apollo-angular": "14.0.0", "apollo-angular": "14.0.0",
"graphql": "^16", "graphql": "^16",

2
src/app/app.config.ts
View File

@@ -2,7 +2,7 @@ import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChang
import { provideRouter } from '@angular/router'; import { provideRouter } from '@angular/router';
import { routes } from './app.routes'; import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http'; import { provideHttpClient } from '@angular/common/http';
import { providePhoenixPluginWithPrimeNG } from '@phx/shared-ui'; import { providePhoenixPluginWithPrimeNG } from '@phx-erp/shared-ui';
import { environment } from '../environments/environment'; import { environment } from '../environments/environment';
import { apolloProvider } from './apollo.provider'; import { apolloProvider } from './apollo.provider';
import { AuthGuard } from './auth-guard'; import { AuthGuard } from './auth-guard';

2
src/app/app.ts
View File

@@ -1,7 +1,7 @@
import { Component, effect, inject, Injector, input } from '@angular/core'; import { Component, effect, inject, Injector, input } from '@angular/core';
import { RouterOutlet } from '@angular/router'; import { RouterOutlet } from '@angular/router';
import { PhoenixHostBridgeService } from './services/phoenix-host-bridge.service'; import { PhoenixHostBridgeService } from './services/phoenix-host-bridge.service';
import { IPluginServices, syncPhoenixHostInjector } from '@phx/shared-ui'; import { IPluginServices, syncPhoenixHostInjector } from '@phx-erp/shared-ui';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',

2
src/app/services/phoenix-host-bridge.service.ts
View File

@@ -1,5 +1,5 @@
import { Injectable, Injector, signal } from '@angular/core'; import { Injectable, Injector, signal } from '@angular/core';
import type { IPluginServices } from '@phx/shared-ui'; import type { IPluginServices } from '@phx-erp/shared-ui';
@Injectable({ providedIn: 'root' }) @Injectable({ providedIn: 'root' })
export class PhoenixHostBridgeService { export class PhoenixHostBridgeService {

4
src/main.ts
View File

@@ -1,8 +1,6 @@
import { appConfig } from './app/app.config'; import { appConfig } from './app/app.config';
import { App } from './app/app'; import { App } from './app/app';
import { bootstrapPhoenixPluginCustomElement } from '@phx/shared-ui'; import { bootstrapPhoenixPluginCustomElement } from '@phx-erp/shared-ui';
import { createApplication } from '@angular/platform-browser';
import { createCustomElement } from '@angular/elements';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
bootstrapPhoenixPluginCustomElement(App, 'frontend-plugin-demo', appConfig) bootstrapPhoenixPluginCustomElement(App, 'frontend-plugin-demo', appConfig)

14
yarn.lock
View File

@@ -2000,17 +2000,17 @@
"@parcel/watcher-win32-ia32" "2.5.6" "@parcel/watcher-win32-ia32" "2.5.6"
"@parcel/watcher-win32-x64" "2.5.6" "@parcel/watcher-win32-x64" "2.5.6"
"@phx/shared-ui@^0.1.4": "@phx-erp/shared-ui@^0.1.4":
version "0.1.4" version "0.1.4"
resolved "https://gitea.phx-erp.de/api/packages/PHXGMBH/npm/%40phx%2Fshared-ui/-/0.1.4/shared-ui-0.1.4.tgz#e9ed9ede01366aaca92086c2ac50d114a4e2c5b9" resolved "https://registry.yarnpkg.com/@phx-erp/shared-ui/-/shared-ui-0.1.4.tgz#666cb2d820a02ebad0b5df3c1c356166132632f9"
integrity sha512-ZJrb68JosqjN1p3l0K+VEF2SQbOCxe7HK0U1Uj/6ZeMTHtCWuEAo/XxGVLJvjUpGE5pF5gw+jcvIBJsvafNxYg== integrity sha512-WJFpDoy6G7HHbB4/0ZTTWiLXgw3VyKgYhkVK3YN0cZ+xJWATbPGXrdEsuVxrVYxUlzVK0XVuCBRZ/MGDiIDtFA==
dependencies: dependencies:
"@phx/shared" "^0.1.4" "@phx-erp/shared" "^0.1.4"
"@phx/shared@^0.1.4": "@phx-erp/shared@^0.1.4":
version "0.1.4" version "0.1.4"
resolved "https://gitea.phx-erp.de/api/packages/PHXGMBH/npm/%40phx%2Fshared/-/0.1.4/shared-0.1.4.tgz#082ebe561ce1614df6ab664252fa6e525ae96e72" resolved "https://registry.yarnpkg.com/@phx-erp/shared/-/shared-0.1.4.tgz#33f343564f6a111308f185257adfd8ecea63aebf"
integrity sha512-4UKLpDJxBRRgX5sNBtdTAeYYb0mftPcBNyuxbpdI/YIqQcTPmTJRE+QkhmEq/GDRGHYnFjn+DBDr95UwzKZSjQ== integrity sha512-XCNduBKSHC7bJlYqHaVGaRvjPuW0+eoFyeH25hvoDIqDn8/lGP7R8lVM3UAca08aL41BqsTcI6oPyaDzQldxCA==
dependencies: dependencies:
"@apollo/client" "^3.9.6" "@apollo/client" "^3.9.6"
graphql "16.8.2" graphql "16.8.2"