[angular-mercury] Add Angular with Mercury integration example
#17
Conversation
|
It would be nice to update the PR title to better reflect the meaning of the change. For example:
|
ncamera
left a comment
ncamera
left a comment
There was a problem hiding this comment.
Thanks for the example!
| @@ -0,0 +1,11098 @@ | |||
| { | |||
There was a problem hiding this comment.
This monorepo uses yarn, not npm. Delete this file and install the dependencies with yarn.
| "version": "0.0.0", | ||
| "scripts": { | ||
| "ng": "ng", | ||
| "start": "ng serve", |
There was a problem hiding this comment.
Open the browser when executing the start command:
| "start": "ng serve", | |
| "start": "ng serve -o", |
| "@genexus/chameleon-controls-library": "^6.16.0", | ||
| "@genexus/mercury": "^0.26.0" |
There was a problem hiding this comment.
Since Mercury does not use semantic versioning, we can't recommend minor updates at this moment.
| "@genexus/chameleon-controls-library": "^6.16.0", | |
| "@genexus/mercury": "^0.26.0" | |
| "@genexus/chameleon-controls-library": "~6.16.0", | |
| "@genexus/mercury": "~0.26.0" |
| "@types/jasmine": "~5.1.0", | ||
| "@types/node": "^20.17.19", | ||
| "jasmine-core": "~5.7.0", | ||
| "karma": "~6.4.0", | ||
| "karma-chrome-launcher": "~3.2.0", | ||
| "karma-coverage": "~2.2.0", | ||
| "karma-jasmine": "~5.1.0", | ||
| "karma-jasmine-html-reporter": "~2.1.0", |
There was a problem hiding this comment.
We can remove this dependencies, as they are not being used.
| "@types/jasmine": "~5.1.0", | |
| "@types/node": "^20.17.19", | |
| "jasmine-core": "~5.7.0", | |
| "karma": "~6.4.0", | |
| "karma-chrome-launcher": "~3.2.0", | |
| "karma-coverage": "~2.2.0", | |
| "karma-jasmine": "~5.1.0", | |
| "karma-jasmine-html-reporter": "~2.1.0", | |
| "@types/node": "^20.17.19", |
| <ch-theme [model]="mercuryIconsBundle"></ch-theme> | ||
| <custom-dialog></custom-dialog> |
There was a problem hiding this comment.
We need to match the design of the other examples (NextJS, React and SolidJS) to properly demonstrate that the same design can be achieved with any framework.
| getImagePathCallbackDefinitions, | ||
| } from "@genexus/mercury"; | ||
| setBundleMapping(bundleToHashMappings); | ||
| registerMercury(); |
There was a problem hiding this comment.
| registerMercury(); | |
| // It registers a mapping between the icons metadata and its path. | |
| registerMercury(); |
| } from "@genexus/mercury"; | ||
| setBundleMapping(bundleToHashMappings); | ||
| registerMercury(); | ||
| registryProperty("getImagePathCallback", getImagePathCallbackDefinitions); |
There was a problem hiding this comment.
| registryProperty("getImagePathCallback", getImagePathCallbackDefinitions); | |
| // Register the default value for the getImagePathCallback property in all Chameleon | |
| // components. This implementation allows us to remove the need for binding the | |
| // getImagePathCallback property in all Chameleon controls that must render icons. | |
| registryProperty("getImagePathCallback", getImagePathCallbackDefinitions); |
| "test": { | ||
| "builder": "@angular/build:karma", | ||
| "options": { | ||
| "polyfills": ["zone.js", "zone.js/testing"], | ||
| "tsConfig": "tsconfig.spec.json", | ||
| "inlineStyleLanguage": "scss", | ||
| "assets": [ | ||
| { | ||
| "glob": "**/*", | ||
| "input": "public" | ||
| } | ||
| ], | ||
| "styles": ["src/styles.scss"] | ||
| } | ||
| } |
There was a problem hiding this comment.
We are not using this.
| "test": { | |
| "builder": "@angular/build:karma", | |
| "options": { | |
| "polyfills": ["zone.js", "zone.js/testing"], | |
| "tsConfig": "tsconfig.spec.json", | |
| "inlineStyleLanguage": "scss", | |
| "assets": [ | |
| { | |
| "glob": "**/*", | |
| "input": "public" | |
| } | |
| ], | |
| "styles": ["src/styles.scss"] | |
| } | |
| } | |
| "test": { | |
| "builder": "@angular/build:karma", | |
| "options": { | |
| "polyfills": ["zone.js", "zone.js/testing"], | |
| "tsConfig": "tsconfig.spec.json", | |
| "inlineStyleLanguage": "scss", | |
| "assets": [ | |
| { | |
| "glob": "**/*", | |
| "input": "public" | |
| } | |
| ], | |
| "styles": ["src/styles.scss"] | |
| } | |
| } |
| standalone: true, | ||
| imports: [RouterOutlet, CustomDialogComponent], | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA], | ||
| templateUrl: "./app.html", |
There was a problem hiding this comment.
Angular components must use OnPush change detection strategy for better performance.
You can see an example here (selected the "Angular" tab in a code block):
https://mercury-showcase.genexus.com/mercury/components/button
| templateUrl: "./app.html", | |
| changeDetection: ChangeDetectionStrategy.OnPush, | |
| templateUrl: "./app.html", |
There was a problem hiding this comment.
Remove this file and update the .gitignore file to untrack this Mac file.
| # Angular | ||
|
|
||
| This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.5. | ||
|
|
||
| ## Development server | ||
|
|
||
| To start a local development server, run: | ||
|
|
||
| ```bash | ||
| ng serve | ||
| ``` | ||
|
|
||
| Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. | ||
|
|
||
| ## Code scaffolding | ||
|
|
||
| Angular CLI includes powerful code scaffolding tools. To generate a new component, run: | ||
|
|
||
| ```bash | ||
| ng generate component component-name | ||
| ``` | ||
|
|
||
| For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: | ||
|
|
||
| ```bash | ||
| ng generate --help | ||
| ``` | ||
|
|
||
| ## Building | ||
|
|
||
| To build the project run: | ||
|
|
||
| ```bash | ||
| ng build | ||
| ``` | ||
|
|
||
| This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. | ||
|
|
||
| ## Running unit tests | ||
|
|
||
| To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command: | ||
|
|
||
| ```bash | ||
| ng test | ||
| ``` | ||
|
|
||
| ## Running end-to-end tests | ||
|
|
||
| For end-to-end (e2e) testing, run: | ||
|
|
||
| ```bash | ||
| ng e2e | ||
| ``` | ||
|
|
||
| Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. | ||
|
|
||
| ## Additional Resources | ||
|
|
||
| For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. |
There was a problem hiding this comment.
This readme file should be simplified. It should also be consistent with the other readme files:
https://github.com/genexuslabs/chameleon-integrations/blob/main/packages/react-mercury/README.md
|
@bsastregx Update the main readme file in this PR to reflect the new example. |
bsastregx
changed the title
[angular-mercury] Initial commit[angular-mercury] Add Angular with Mercury integration example
Changes in this PR:
Offer a Mercury + Angular project that I worked on, that may be helpfull on this repo.