@microzord/react 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +139 -0
- package/index.esm.d.ts +1 -0
- package/index.esm.js +83 -0
- package/package.json +34 -0
- package/src/index.d.ts +1 -0
- package/src/lib/createApp.d.ts +3 -0
package/README.md
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# <img src="apps/demo/src/assets/images/microzord.png" alt="microzord logo" width="36px"> microzord
|
|
2
|
+
|
|
3
|
+
[](https://npmjs.com/package/@microzord/core)
|
|
4
|
+
[](https://bundlephobia.com/result?p=@microzord/core)
|
|
5
|
+
[](https://codecov.io/gh/taiga-family/microzord)
|
|
6
|
+
|
|
7
|
+
## What is it?
|
|
8
|
+
|
|
9
|
+
It is a small tool that allows you to add and render multiple apps on one page. It has simple ideomatic APIs for all modern frameworks and builds bridges between them.
|
|
10
|
+
|
|
11
|
+
🧙 **Framework agnostic**. You can have an Angular application with a React app header and a Vue app footer. Each app can have endless amount of nested apps inside. There are also wrappers for every modern framework with simple API.
|
|
12
|
+
|
|
13
|
+
🧩 **Modular**. You can insert another app in your app in any place as an ordinary component. Use the same methods to bind data and to handle its events.
|
|
14
|
+
|
|
15
|
+
🐝 **Tiny as a bee and works as well**. No new code in the bundle of child application and a bit more than 1 KB library for host application to get all the benefits!
|
|
16
|
+
|
|
17
|
+
## Angular version support
|
|
18
|
+
|
|
19
|
+
| Microzord Version | Angular version |
|
|
20
|
+
| ----------------- | --------------- |
|
|
21
|
+
| v2.x | 16+ |
|
|
22
|
+
| v1.x | 12 - 15 |
|
|
23
|
+
|
|
24
|
+
## Installation and usage
|
|
25
|
+
|
|
26
|
+
An extensive demo is coming soon...
|
|
27
|
+
|
|
28
|
+
### An example of usage external apps in Angular app
|
|
29
|
+
|
|
30
|
+
app.module.ts
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
@NgModule({
|
|
34
|
+
imports: [
|
|
35
|
+
MicrozordHostModule.register({
|
|
36
|
+
apps: [
|
|
37
|
+
{
|
|
38
|
+
name: 'react-menu',
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
name: 'vue-footer-app',
|
|
42
|
+
},
|
|
43
|
+
],
|
|
44
|
+
}),
|
|
45
|
+
],
|
|
46
|
+
})
|
|
47
|
+
export class AppModule {}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Usage in application:
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<header microzordApp="react-menu"></header>
|
|
54
|
+
|
|
55
|
+
<div>Any content</div>
|
|
56
|
+
|
|
57
|
+
<footer microzordApp="vue-footer-app" (hook)="onFooterLifecycleEvent($event)"></footer>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Core team
|
|
61
|
+
|
|
62
|
+
<table>
|
|
63
|
+
<tr>
|
|
64
|
+
<td align="center">
|
|
65
|
+
<a href="https://twitter.com/katsuba_igor"
|
|
66
|
+
><img
|
|
67
|
+
src="https://github.com/IKatsuba.png?size=100"
|
|
68
|
+
width="100"
|
|
69
|
+
style="margin-bottom: -4px; border-radius: 8px;"
|
|
70
|
+
alt="Igor Katsuba"
|
|
71
|
+
/><br /><sub><b>Igor Katsuba</b></sub></a
|
|
72
|
+
>
|
|
73
|
+
<div style="margin-top: 4px">
|
|
74
|
+
<a
|
|
75
|
+
href="https://twitter.com/katsuba_igor"
|
|
76
|
+
title="Twitter"
|
|
77
|
+
><img
|
|
78
|
+
style="width: 16px;"
|
|
79
|
+
width="16"
|
|
80
|
+
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg"
|
|
81
|
+
/></a>
|
|
82
|
+
<a href="https://github.com/IKatsuba" title="Github"
|
|
83
|
+
><img
|
|
84
|
+
width="16"
|
|
85
|
+
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg"
|
|
86
|
+
/></a>
|
|
87
|
+
<a
|
|
88
|
+
href="https://t.me/Katsuba"
|
|
89
|
+
title="Telegram"
|
|
90
|
+
><img
|
|
91
|
+
width="16"
|
|
92
|
+
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg"
|
|
93
|
+
/></a>
|
|
94
|
+
</div>
|
|
95
|
+
</td>
|
|
96
|
+
<td align="center">
|
|
97
|
+
<a href="http://marsibarsi.me"
|
|
98
|
+
><img
|
|
99
|
+
src="https://github.com/marsibarsi.png?size=100"
|
|
100
|
+
width="100"
|
|
101
|
+
style="margin-bottom: -4px; border-radius: 8px;"
|
|
102
|
+
alt="Roman Sedov"
|
|
103
|
+
/><br /><b>Roman Sedov</b></a
|
|
104
|
+
>
|
|
105
|
+
<div style="margin-top: 4px">
|
|
106
|
+
<a
|
|
107
|
+
href="https://twitter.com/marsibarsi"
|
|
108
|
+
title="Twitter"
|
|
109
|
+
><img
|
|
110
|
+
width="16"
|
|
111
|
+
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/twitter.svg"
|
|
112
|
+
/></a>
|
|
113
|
+
<a
|
|
114
|
+
href="https://github.com/marsibarsi"
|
|
115
|
+
title="GitHub"
|
|
116
|
+
><img
|
|
117
|
+
width="16"
|
|
118
|
+
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/github.svg"
|
|
119
|
+
/></a>
|
|
120
|
+
<a
|
|
121
|
+
href="https://t.me/marsibarsi"
|
|
122
|
+
title="Telegram"
|
|
123
|
+
><img
|
|
124
|
+
width="16"
|
|
125
|
+
src="https://raw.githubusercontent.com/MarsiBarsi/readme-icons/main/send.svg"
|
|
126
|
+
/></a>
|
|
127
|
+
</div>
|
|
128
|
+
</td>
|
|
129
|
+
</tr>
|
|
130
|
+
|
|
131
|
+
</table>
|
|
132
|
+
|
|
133
|
+
## License
|
|
134
|
+
|
|
135
|
+
🆓 Feel free to use our library in your commercial and private applications
|
|
136
|
+
|
|
137
|
+
All microzord packages are covered by [Apache 2.0](/LICENSE)
|
|
138
|
+
|
|
139
|
+
Read more about this license [here](https://choosealicense.com/licenses/apache-2.0/)
|
package/index.esm.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./src/index";
|
package/index.esm.js
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { Application, MicrozordLifecycleEvent } from '@microzord/core';
|
|
2
|
+
import { createRoot } from 'react-dom/client';
|
|
3
|
+
|
|
4
|
+
/******************************************************************************
|
|
5
|
+
Copyright (c) Microsoft Corporation.
|
|
6
|
+
|
|
7
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
8
|
+
purpose with or without fee is hereby granted.
|
|
9
|
+
|
|
10
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
11
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
12
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
13
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
14
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
15
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
16
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
17
|
+
***************************************************************************** */
|
|
18
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
function __awaiter(thisArg, _arguments, P, generator) {
|
|
22
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
23
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
24
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
25
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
26
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
27
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
32
|
+
var e = new Error(message);
|
|
33
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
function createApp(name, element) {
|
|
37
|
+
class ReactApplication extends Application {
|
|
38
|
+
bootstrap(container, props) {
|
|
39
|
+
const _super = Object.create(null, {
|
|
40
|
+
bootstrap: {
|
|
41
|
+
get: () => super.bootstrap
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
45
|
+
container = typeof container === 'string' ? document.querySelector(container) : container;
|
|
46
|
+
this.root = createRoot(container);
|
|
47
|
+
yield _super.bootstrap.call(this, container, props);
|
|
48
|
+
this.root.render(element);
|
|
49
|
+
//https://github.com/reactwg/react-18/discussions/5#discussioncomment-796012
|
|
50
|
+
requestIdleCallback(() => {
|
|
51
|
+
this.emitHook(MicrozordLifecycleEvent.bootstrapped());
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
destroy() {
|
|
56
|
+
super.destroy();
|
|
57
|
+
if (this.root) {
|
|
58
|
+
this.root.unmount();
|
|
59
|
+
}
|
|
60
|
+
this.container = '';
|
|
61
|
+
this.emitHook(MicrozordLifecycleEvent.destroyed());
|
|
62
|
+
}
|
|
63
|
+
navigate(_url, _props) {
|
|
64
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
65
|
+
return undefined;
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
send(_msg) {
|
|
69
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
70
|
+
return undefined;
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
document.dispatchEvent(new CustomEvent('microzord:load', {
|
|
75
|
+
detail: {
|
|
76
|
+
name,
|
|
77
|
+
appConstructor: ReactApplication
|
|
78
|
+
}
|
|
79
|
+
}));
|
|
80
|
+
return ReactApplication;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export { createApp };
|
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@microzord/react",
|
|
3
|
+
"version": "2.0.1",
|
|
4
|
+
"dependencies": {
|
|
5
|
+
"@microzord/core": "2.0.1"
|
|
6
|
+
},
|
|
7
|
+
"publishConfig": {
|
|
8
|
+
"access": "public"
|
|
9
|
+
},
|
|
10
|
+
"license": "Apache-2.0",
|
|
11
|
+
"keywords": [
|
|
12
|
+
"microfrontends",
|
|
13
|
+
"single-page-application",
|
|
14
|
+
"framework",
|
|
15
|
+
"angular",
|
|
16
|
+
"react",
|
|
17
|
+
"routing",
|
|
18
|
+
"microservices"
|
|
19
|
+
],
|
|
20
|
+
"authors": [
|
|
21
|
+
"Igor Katsuba <katsuba.igor@gmail.ru>",
|
|
22
|
+
"Roman Sedov <79601794011@ya.ru>"
|
|
23
|
+
],
|
|
24
|
+
"contributors": [
|
|
25
|
+
"Igor Katsuba <katsuba.igor@gmail.ru>",
|
|
26
|
+
"Roman Sedov <79601794011@ya.ru>",
|
|
27
|
+
"Vsevolod Arutyunov <sevaru@inbox.ru>"
|
|
28
|
+
],
|
|
29
|
+
"repository": "https://github.com/taiga-family/microzord",
|
|
30
|
+
"homepage": "https://taiga-family.github.io/microzord",
|
|
31
|
+
"module": "./index.esm.js",
|
|
32
|
+
"type": "module",
|
|
33
|
+
"main": "./index.esm.js"
|
|
34
|
+
}
|
package/src/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './lib/createApp';
|