Skip to content

Commit c584a29

Browse files
author
Gérard Collin
committed
fix: Enhanced readme
1 parent 2d03a2c commit c584a29

4 files changed

Lines changed: 116 additions & 38 deletions

File tree

‎README.md‎

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -27,28 +27,32 @@ ng-xtend is an Angular library that enables you to:
2727
### ☕ Coffee Bean Evaluation
2828
A real-world example of an app handling complex data (lists, views, and editions) entirely through dynamic plugins.
2929

30-
[![Coffee Bean Evaluation](docs/screenshots/xt-host-list-view-plugins.png)](https://test.dont-code.net/apps/latest/xt-host/?project=Coffee%20Beans%20Evaluation)
30+
[![Coffee Bean Evaluation](docs/screenshots/xt-host-list-view-plugins.png)](https://test.dont-code.net/apps/latest/host/?project=Coffee%20Beans%20Evaluation)
3131

32-
### ️Repository of examples
33-
To better understand the real-world usage of ng-xtend, we've developed a set of example projects, in the [ng-xtend examples](https://github.com/dont-code/ng-xtend-examples) repository.
32+
### Other Demos
3433

35-
Here is a short description of each one:
34+
Demo applications can be seen here:
3635

37-
| Example | Description |
38-
|----------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
39-
| [basic-example](https://github.com/dont-code/ng-xtend-examples/tree/main/basic) | Displays any object in various format in a generic way |
40-
| [typed-example](https://github.com/dont-code/ng-xtend-examples/tree/main/typed) | By describing the type handled, ng-xtend supports more use cases |
41-
| [plugin-example](https://github.com/dont-code/ng-xtend-examples/tree/main/plugin) | Countries and Money fields looks nicer thanks to the newly added plugins. They are discovered and used transparently by the ng-xtend framework |
42-
| [inout-example](https://github.com/dont-code/ng-xtend-examples/tree/main/inout) | A full list / edit / view flow is setup thanks to inputs / outputs connecting unknown components together. |
43-
| [store-example](https://github.com/dont-code/ng-xtend-examples/tree/main/store) | Edited elements are persisted between sessions thanks to the xt-store library included with the ng-xtend framework. |
44-
| [advanced-type-example](https://github.com/dont-code/ng-xtend-examples/tree/main/advanced-type) | Showcase support for advanced types and models (like references) |
45-
| [dynamic-example](https://github.com/dont-code/ng-xtend-examples/tree/main/dynamic) | Loads all plugins dynamically from another website using [Native-Federation](https://github.com/angular-architects/module-federation-plugin/tree/main/libs/native-federation)|
36+
[![Dont-code Demo Apps](docs/screenshots/dont-code-demo-apps.png)](https://dont-code.net/apps/repo/default/)
4637

38+
---
4739

48-
### 🛠️ Plugin Tester
49-
Curious about how plugins are dynamically injected? Try the dedicated tester:
40+
## News
41+
- ***2026-01-27:*** Added repository with multiple examples of ng-xtend usage. => [ng-xtend-examples](https://github.com/dont-code/ng-xtend-examples)
42+
- ***2026-01-04:*** Version 0.5.5, supports for many to one references
43+
- ***2025-11-02:*** Added support for actions, allowing plugins to add features dynamically, and added the agenda plugin, with support for recurrent tasks
44+
- ***2025-09-06:*** Version 0.5, moved to Angular 20.2, added country selection plugin.
45+
- ***2025-08-24:*** Published of apps developed: [Dashboard](https://dont-code.net/apps/repo/default)
46+
- ***2025-07-14:*** First release, with support for dynamic plugins (thanks to [Angular architects!](https://github.com/angular-architects/module-federation-plugin)) and a few plugins for Financial, Web and International applications. As well, added a default plugin to edit any data.
5047

51-
[![Plugin tester](docs/screenshots/plugin-tester-web-plugin-details.png)](https://test.dont-code.net/apps/latest/plugin-tester)
48+
49+
## 🚀 How it Works (The Magic)
50+
51+
The host application doesn't need to know its plugins at compile time. It simply sets **Render Points (`xt-render`)**:
52+
53+
1. **Configuration:** A simple JSON file defines which plugins to load from which remote URLs.
54+
2. **Registration:** Upon loading, the plugin registers itself and declares which data types or actions it supports.
55+
3. **Resolution:** When ng-xtend encounters a specific type (e.g., `Rating`, `Currency`), it automatically finds and injects the correct component from the loaded plugins.
5256

5357
---
5458

@@ -65,13 +69,17 @@ Currently, ng-xtend supports four major extension points:
6569

6670
---
6771

68-
## 🚀 How it Works (The Magic)
72+
## Some examples ?
73+
Here are screenshots of an application automatically handling list, view and edition of complex data (evaluations of coffee beans) using ng-xtend, a [dont-code application](https://dont-code.net/){target="_blank"}, and the [default plugin](https://github.com/dont-code/ng-xtend/tree/main/plugins/xt-default) and [web plugin](https://github.com/dont-code/ng-xtend/tree/main/plugins/xt-web)
74+
You can see how the different plugins work together without knowing each other. Even the host application does not know them.
6975

70-
The host application doesn't need to know its plugins at compile time. It simply sets **Render Points (`xt-render`)**:
76+
![List view screenshot](docs/screenshots/xt-host-list-view-split.png)
77+
![Edit object screenshot](docs/screenshots/xt-host-edit-view-split.png)
7178

72-
1. **Configuration:** A simple JSON file defines which plugins to load from which remote URLs.
73-
2. **Registration:** Upon loading, the plugin registers itself and declares which data types or actions it supports.
74-
3. **Resolution:** When ng-xtend encounters a specific type (e.g., `Rating`, `Currency`), it automatically finds and injects the correct component from the loaded plugins.
79+
### 🛠️ Plugin Tester
80+
Curious about how plugins are dynamically injected? Try the dedicated tester:
81+
82+
[![Plugin tester](docs/screenshots/plugin-tester-web-plugin-details.png)](https://test.dont-code.net/apps/latest/plugin-tester)
7583

7684
---
7785

@@ -83,14 +91,34 @@ The host application doesn't need to know its plugins at compile time. It simply
8391
- [x] Strong type support
8492
- [x] Remote dynamic loading
8593
- [x] Action components support
94+
- [ ] Workflows
95+
- [ ] Enhanced modelization support
8696
- [ ] **v1.0 Release!** 🏁
87-
- [ ] Enhanced component selection (context-aware)
97+
- [ ] AI application generation
98+
- [ ] Enhanced plugin isolation
8899
- [ ] v2.0 & beyond
89100

90101
---
91102

92103
## 🧑‍💻 Getting Started
93104

105+
### ️Repository of examples
106+
To better understand the real-world usage of ng-xtend, we've developed a set of example projects, in the [ng-xtend examples](https://github.com/dont-code/ng-xtend-examples) repository.
107+
108+
Here is a short description of each one:
109+
110+
| Example | Description |
111+
|----------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
112+
| [basic-example](https://github.com/dont-code/ng-xtend-examples/tree/main/basic) | Displays any object in various format in a generic way |
113+
| [typed-example](https://github.com/dont-code/ng-xtend-examples/tree/main/typed) | By describing the type handled, ng-xtend supports more use cases |
114+
| [plugin-example](https://github.com/dont-code/ng-xtend-examples/tree/main/plugin) | Countries and Money fields looks nicer thanks to the newly added plugins. They are discovered and used transparently by the ng-xtend framework |
115+
| [inout-example](https://github.com/dont-code/ng-xtend-examples/tree/main/inout) | A full list / edit / view flow is setup thanks to inputs / outputs connecting unknown components together. |
116+
| [store-example](https://github.com/dont-code/ng-xtend-examples/tree/main/store) | Edited elements are persisted between sessions thanks to the xt-store library included with the ng-xtend framework. |
117+
| [advanced-type-example](https://github.com/dont-code/ng-xtend-examples/tree/main/advanced-type) | Showcase support for advanced types and models (like references) |
118+
| [dynamic-example](https://github.com/dont-code/ng-xtend-examples/tree/main/dynamic) | Loads all plugins dynamically from another website using [Native-Federation](https://github.com/angular-architects/module-federation-plugin/tree/main/libs/native-federation)|
119+
120+
---
121+
94122
### Developing a Plugin
95123
We use a monorepo structure powered by [Rush](https://rushjs.io/).
96124
```bash
@@ -99,21 +127,6 @@ rush update
99127
rush build
100128
```
101129

102-
## News
103-
- ***2026-01-27:*** Added repository with multiple examples of ng-xtend usage. => [ng-xtend-examples](https://github.com/dont-code/ng-xtend-examples)
104-
- ***2026-01-04:*** Version 0.5.5, supports for many to one references
105-
- ***2025-11-02:*** Added support for actions, allowing plugins to add features dynamically, and added the agenda plugin, with support for recurrent tasks
106-
- ***2025-09-06:*** Version 0.5, moved to Angular 20.2, added country selection plugin.
107-
- ***2025-08-24:*** Published of apps developed: [Dashboard](https://dont-code.net/apps/repo/default)
108-
- ***2025-07-14:*** First release, with support for dynamic plugins (thanks to [Angular architects!](https://github.com/angular-architects/module-federation-plugin)) and a few plugins for Financial, Web and International applications. As well, added a default plugin to edit any data.
109-
110-
## Some examples ?
111-
Here are screenshots of an application automatically handling list, view and edition of complex data (evaluations of coffee beans) using ng-xtend, a [dont-code application](https://dont-code.net/){target="_blank"}, and the [default plugin](https://github.com/dont-code/ng-xtend/tree/main/plugins/xt-default) and [web plugin](https://github.com/dont-code/ng-xtend/tree/main/plugins/xt-web)
112-
You can see how the different plugins work together without knowing each other. Even the host application does not know them.
113-
114-
![List view screenshot](docs/screenshots/xt-host-list-view-split.png)
115-
![Edit object screenshot](docs/screenshots/xt-host-edit-view-split.png)
116-
117130

118131
## Detailed plugin development guide
119132
1. Checkout the repository [ng-xtend](https://github.com/dont-code/ng-xtend){target="_blank"}

‎docs/Advertisements.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
Hey, let me introduce you to [ng-xtend](https://ng-xtend.dev), the open-source plugin framework for Angular!
2+
3+
Notice how Wordpress, Nextcloud or Drupal are successful thanks to their ecosystem of plugins?
4+
Notice how easy it is to develop, discover and install them?
5+
6+
*Wouldn't it be great to have the same extensibility for Angular apps?*
7+
8+
That's what **ng-xtend** is for !
9+
10+
With it, your application can
11+
- Statically or dynamically loads plugins
12+
- Assign a plugin to display, edit or act on a particular data type
13+
- Have all plugins work together in a page, a list, a form or for data persistence
14+
15+
Today with release 0.6, with a simple json file like this:
16+
17+
```
18+
{
19+
"type": "Application",
20+
"name": "Coffee Bean Evaluator",
21+
"entities": {
22+
"a": {
23+
"name": "Coffee Evaluation",
24+
"fields": {
25+
"e": {
26+
"name": "Name",
27+
"type": "Text"
28+
},
29+
"b": {
30+
"name": "Picture",
31+
"type": "Image"
32+
},
33+
"c": {
34+
"name": "Comment",
35+
"type": "Text"
36+
},
37+
"d": {
38+
"name": "Note",
39+
"type": "Rating"
40+
},
41+
"a": {
42+
"name": "Maxicoffee",
43+
"type": "Price"
44+
}
45+
}
46+
}
47+
}
48+
```
49+
50+
You instantly get this: *(click to see the real application)*
51+
[![Coffee Beans Evaluation](https://ng-xtend.dev/docs/screenshots/xt-host-list-view-plugins.png)](https://test.dont-code.net/apps/latest/host/?repository=default&project=Coffee%20Beans%20Evaluation)
52+
53+
Other examples here:[Demo Repository](https://dont-code.net/apps/repo/default)
54+
55+
You can check [ng-xtend-examples repo](https://github.com/dont-code/ng-xtend-examples) to learn how to use [ng-xtend](https://github.com/dont-code/ng-xtend).
56+
57+
Developing a new plugin is basically just wrapping existing angular components into a lightweight framework, you can check here for an example.
58+
59+
The framework is growing in several directions:
60+
- Obviously enhance the UI/UX of the default plugin. It works but would really need to be more user friendly.
61+
- Extend support of any kind of datamodels, like "list of sub elements" or "many-to-one", "many-to-many relationship"
62+
- Look at how a non-IT user could leverage AI and LLM to generate their application. As it just needs a json file, it should be feasible
63+
- Have more and more plugins by making them easy to develop and to consume
64+
- Add support for advanced workflows, in addition to the master-detail provided.

‎docs/screenshots/dont-code-demo-apps.png‎

279 KB
Loading

‎docs/workflow-requirements.txt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ Configuration:
1717
- Menu to Workflow
1818
- Plugin components as workflow
1919
- Workflow provides sort, filtering info, read-only or not
20-
Default workflow is a generic one
20+
21+
Default workflow as a generic one
2122
- Workflow is list of Components, with outputs to next component
2223
- Page input and outputs. Outputs are triggering the next page
2324

0 commit comments

Comments
 (0)