ngx-reactify 0.0.3 → 0.1.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/esm2022/util/angular-to-react.mjs +187 -113
- package/esm2022/util/react-to-angular.mjs +41 -16
- package/fesm2022/ngx-reactify.mjs +226 -127
- package/fesm2022/ngx-reactify.mjs.map +1 -1
- package/package.json +1 -1
- package/util/angular-to-react.d.ts +113 -19
- package/util/angular-to-react.d.ts.map +1 -1
- package/util/react-to-angular.d.ts +31 -5
- package/util/react-to-angular.d.ts.map +1 -1
|
@@ -13,137 +13,205 @@ import { createRoot } from 'react-dom/client';
|
|
|
13
13
|
* Usage: An Angular top-level application with a ReactifyNgComponent react implementation
|
|
14
14
|
* that needs to embed Angular components as children of the react-wrapped component.
|
|
15
15
|
*
|
|
16
|
-
*
|
|
17
|
-
* @
|
|
18
|
-
* @param envInjector An `EnvironmentInjector` instance to be used for the component
|
|
19
|
-
* @param injector An `ElementInjector` instance
|
|
20
|
-
* @param _inputs
|
|
21
|
-
* @param _outputs
|
|
22
|
-
* @returns
|
|
16
|
+
* This is replaced by `WrapAngularComponentInReact`.
|
|
17
|
+
* @deprecated
|
|
23
18
|
*/
|
|
24
19
|
const ReactifyAngularComponent = ({ component, appRef, injector, ngZone, staticInputs = {}, staticOutputs = {}, preSiblings = [], postSiblings = [], additionalChildren = [], rootElementName = '', containerElementName = '' }) => React.memo((args) => {
|
|
25
20
|
return ngZone.runOutsideAngular(() => {
|
|
26
|
-
|
|
21
|
+
let outputSubscriptions;
|
|
22
|
+
let componentInstance;
|
|
23
|
+
const tripChangeDetection = () => componentInstance?.changeDetectorRef?.detectChanges();
|
|
24
|
+
// These attributes will trigger change detection when they fire from
|
|
25
|
+
// the underlying React element.
|
|
26
|
+
// ... This will break things. FUCK.
|
|
27
|
+
const attributes = ['onCopy', 'onCut', 'onPaste', 'onAbort', 'onBlur', 'onFocus', 'onCanPlay', 'onCanPlayThrough', 'onChange', 'onClick', 'onContextMenu', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onDurationChange', 'onEmptied', 'onEnded', 'onInput', 'onInvalid', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onLoad', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onReset', 'onScroll', 'onSeeked', 'onSeeking', 'onSelect', 'onStalled', 'onSubmit', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', 'onError'];
|
|
28
|
+
const attrObj = {};
|
|
29
|
+
attributes.forEach(a => attrObj[a] = tripChangeDetection);
|
|
27
30
|
React.useEffect(() => {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
appRef.attachView(componentInstance.hostView);
|
|
35
|
-
// @ts-ignore
|
|
36
|
-
// component.hostView = hostView;
|
|
37
|
-
Object.assign(staticInputs, args);
|
|
38
|
-
const { inputs, outputs } = component['ɵcmp'];
|
|
39
|
-
// Returns a list of entries that need to be set
|
|
40
|
-
// This makes it so that unnecessary setters are not invoked.
|
|
41
|
-
const updated = Object.entries(inputs).filter(([parentKey, childKey]) => {
|
|
42
|
-
return componentInstance.instance[childKey] != staticInputs[parentKey];
|
|
43
|
-
});
|
|
44
|
-
updated.forEach(([parentKey, childKey]) => {
|
|
45
|
-
if (staticInputs.hasOwnProperty(parentKey))
|
|
46
|
-
componentInstance.instance[childKey] = staticInputs[parentKey];
|
|
47
|
-
});
|
|
48
|
-
const outputSubscriptions = {};
|
|
49
|
-
// Get a list of unregistered outputs
|
|
50
|
-
const newOutputs = Object.entries(outputs).filter(([parentKey, childKey]) => {
|
|
51
|
-
return !outputSubscriptions[parentKey];
|
|
52
|
-
});
|
|
53
|
-
// Reverse bind via subscription
|
|
54
|
-
newOutputs.forEach(([parentKey, childKey]) => {
|
|
55
|
-
if (!staticOutputs.hasOwnProperty(parentKey))
|
|
56
|
-
return;
|
|
57
|
-
const target = componentInstance.instance[childKey];
|
|
58
|
-
const outputs = staticOutputs;
|
|
59
|
-
const sub = target.subscribe((...args) => {
|
|
60
|
-
// Run the callback in the provided zone
|
|
61
|
-
ngZone.run(() => {
|
|
62
|
-
outputs[parentKey](...args);
|
|
63
|
-
});
|
|
64
|
-
}); // Subscription
|
|
65
|
-
outputSubscriptions[parentKey] = sub;
|
|
66
|
-
});
|
|
67
|
-
// Wrap the destroy method to safely release the subscriptions
|
|
68
|
-
const originalDestroy = componentInstance.onDestroy?.bind(componentInstance);
|
|
69
|
-
componentInstance.onDestroy = (cb) => {
|
|
70
|
-
Object.values(outputSubscriptions).forEach(s => s.unsubscribe());
|
|
71
|
-
originalDestroy?.(cb);
|
|
72
|
-
};
|
|
73
|
-
componentInstance.changeDetectorRef.detectChanges();
|
|
74
|
-
}
|
|
75
|
-
catch (err) {
|
|
76
|
-
console.error(err);
|
|
77
|
-
}
|
|
31
|
+
return () => {
|
|
32
|
+
// Code to run when the component unmounts
|
|
33
|
+
appRef?.detachView(componentInstance.hostView);
|
|
34
|
+
Object.values(outputSubscriptions).forEach(s => s.unsubscribe());
|
|
35
|
+
componentInstance?.destroy();
|
|
36
|
+
};
|
|
78
37
|
}, []);
|
|
79
38
|
const elements = [
|
|
80
39
|
...(preSiblings || []),
|
|
81
|
-
React.createElement(containerElementName || "div", {
|
|
40
|
+
React.createElement(containerElementName || "div", {
|
|
41
|
+
...attrObj,
|
|
42
|
+
ref: node => {
|
|
43
|
+
const { inputs, outputs } = component['ɵcmp'];
|
|
44
|
+
if (componentInstance)
|
|
45
|
+
return;
|
|
46
|
+
ngZone.run(() => {
|
|
47
|
+
componentInstance = createComponent(component, {
|
|
48
|
+
environmentInjector: appRef.injector,
|
|
49
|
+
elementInjector: injector,
|
|
50
|
+
hostElement: node
|
|
51
|
+
});
|
|
52
|
+
Object.assign(staticInputs, args);
|
|
53
|
+
appRef.attachView(componentInstance.hostView);
|
|
54
|
+
});
|
|
55
|
+
// Returns a list of entries that need to be set
|
|
56
|
+
// This makes it so that unnecessary setters are not invoked.
|
|
57
|
+
const updated = Object.entries(inputs).filter(([parentKey, childKey]) => {
|
|
58
|
+
return componentInstance.instance[childKey] != staticInputs[parentKey];
|
|
59
|
+
});
|
|
60
|
+
updated.forEach(([parentKey, childKey]) => {
|
|
61
|
+
if (staticInputs.hasOwnProperty(parentKey))
|
|
62
|
+
componentInstance.instance[childKey] = staticInputs[parentKey];
|
|
63
|
+
});
|
|
64
|
+
outputSubscriptions = {};
|
|
65
|
+
// Get a list of unregistered outputs
|
|
66
|
+
const newOutputs = Object.entries(outputs).filter(([parentKey, childKey]) => {
|
|
67
|
+
return !outputSubscriptions[parentKey];
|
|
68
|
+
});
|
|
69
|
+
// Reverse bind via subscription
|
|
70
|
+
newOutputs.forEach(([parentKey, childKey]) => {
|
|
71
|
+
if (!staticOutputs.hasOwnProperty(parentKey))
|
|
72
|
+
return;
|
|
73
|
+
const target = componentInstance.instance[childKey];
|
|
74
|
+
const outputs = staticOutputs;
|
|
75
|
+
const sub = target.subscribe((...args) => {
|
|
76
|
+
// Run the callback in the provided zone
|
|
77
|
+
ngZone.run(() => {
|
|
78
|
+
outputs[parentKey](...args);
|
|
79
|
+
});
|
|
80
|
+
}); // Subscription
|
|
81
|
+
outputSubscriptions[parentKey] = sub;
|
|
82
|
+
});
|
|
83
|
+
// Wrap the destroy method to safely release the subscriptions
|
|
84
|
+
const originalDestroy = componentInstance.onDestroy?.bind(componentInstance);
|
|
85
|
+
componentInstance.onDestroy = (cb) => {
|
|
86
|
+
Object.values(outputSubscriptions).forEach(s => s.unsubscribe());
|
|
87
|
+
originalDestroy?.(cb);
|
|
88
|
+
};
|
|
89
|
+
componentInstance.changeDetectorRef.detectChanges();
|
|
90
|
+
}
|
|
91
|
+
}),
|
|
82
92
|
...(postSiblings || []),
|
|
83
93
|
...(additionalChildren || [])
|
|
84
94
|
].filter(e => e);
|
|
85
95
|
return React.createElement(rootElementName || "div", {}, ...elements);
|
|
86
96
|
});
|
|
87
97
|
});
|
|
88
|
-
// TODO: Remove in major release.
|
|
89
|
-
const ReactifyReactComponent = ReactifyAngularComponent;
|
|
90
98
|
/**
|
|
91
99
|
* Do not use this.
|
|
92
100
|
* @hidden
|
|
93
101
|
* @experimental
|
|
94
102
|
*/
|
|
95
|
-
|
|
103
|
+
const ng2ReactProps = (obj = {}) => {
|
|
104
|
+
const props = {};
|
|
105
|
+
Object.entries(obj).forEach(([k, v]) => {
|
|
106
|
+
// Omit things prefixed with an underscore
|
|
107
|
+
if (k.startsWith('_'))
|
|
108
|
+
return;
|
|
109
|
+
// Omit output event emitters
|
|
110
|
+
if (v instanceof EventEmitter) {
|
|
111
|
+
props[k] = (...args) => v.emit([args]);
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
props[k] = v;
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
return props;
|
|
118
|
+
};
|
|
119
|
+
/**
|
|
120
|
+
* This method will create a React component that
|
|
121
|
+
* wraps an Angular component.
|
|
122
|
+
* @returns React.NamedExoticComponent
|
|
123
|
+
*
|
|
124
|
+
* @hidden
|
|
125
|
+
* @experimental
|
|
126
|
+
*/
|
|
127
|
+
function WrapAngularComponentInReact({ component, ngZone, appRef, injector, props, containerTag, reactTemplate, projectableNodes }) {
|
|
128
|
+
props ??= {};
|
|
129
|
+
containerTag ??= 'div';
|
|
96
130
|
const ctx = this;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
131
|
+
const createWrappedElement = () => {
|
|
132
|
+
reactTemplate ??= (el) => el;
|
|
133
|
+
return React.memo((args) => {
|
|
134
|
+
// Is there a better way to do this?
|
|
135
|
+
let subscriptions;
|
|
136
|
+
let componentInstance;
|
|
137
|
+
Object.assign(props, args);
|
|
138
|
+
React.useEffect(() => {
|
|
139
|
+
return () => {
|
|
140
|
+
// Cleanup and dispose leftover Angular objects
|
|
141
|
+
appRef?.detachView(componentInstance.hostView);
|
|
142
|
+
subscriptions?.forEach(s => s?.unsubscribe());
|
|
143
|
+
componentInstance?.destroy();
|
|
144
|
+
};
|
|
145
|
+
}, []);
|
|
146
|
+
const tripChangeDetection = () => componentInstance?.changeDetectorRef?.detectChanges();
|
|
147
|
+
// These attributes will trigger change detection when they fire from
|
|
148
|
+
// the underlying React element.
|
|
149
|
+
// ... This will break things. FUCK.
|
|
150
|
+
const attributes = ['onCopy', 'onCut', 'onPaste', 'onAbort', 'onBlur', 'onFocus', 'onCanPlay', 'onCanPlayThrough', 'onChange', 'onClick', 'onContextMenu', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onDurationChange', 'onEmptied', 'onEnded', 'onInput', 'onInvalid', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onLoad', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onReset', 'onScroll', 'onSeeked', 'onSeeking', 'onSelect', 'onStalled', 'onSubmit', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', 'onError'];
|
|
151
|
+
const attrObj = {};
|
|
152
|
+
attributes.forEach(a => attrObj[a] = tripChangeDetection);
|
|
153
|
+
return reactTemplate(React.createElement(containerTag, {
|
|
154
|
+
...attrObj,
|
|
155
|
+
ref: async (node) => {
|
|
156
|
+
if (componentInstance)
|
|
157
|
+
return;
|
|
158
|
+
// Not sure if this ever actually happens, added as a preventative measure
|
|
159
|
+
// to memory leaks.
|
|
160
|
+
subscriptions?.forEach(s => s?.unsubscribe());
|
|
161
|
+
const bootstrap = () => {
|
|
162
|
+
// Init the Angular component with the context of the root Angular app.
|
|
163
|
+
componentInstance = createComponent(component, {
|
|
164
|
+
environmentInjector: appRef.injector,
|
|
165
|
+
elementInjector: injector,
|
|
166
|
+
hostElement: node,
|
|
167
|
+
projectableNodes: projectableNodes
|
|
168
|
+
});
|
|
169
|
+
appRef.attachView(componentInstance.hostView);
|
|
170
|
+
};
|
|
171
|
+
ngZone?.runTask
|
|
172
|
+
? ngZone?.runTask(bootstrap)
|
|
173
|
+
: bootstrap();
|
|
174
|
+
// Now that everything has settled, bind inputs and outputs.
|
|
175
|
+
subscriptions = [];
|
|
176
|
+
Object.entries(props).filter(([k, v]) => {
|
|
177
|
+
// @Outputs are always Event Emitters (I think)
|
|
178
|
+
if (v instanceof EventEmitter) {
|
|
179
|
+
subscriptions.push(componentInstance.instance[k]?.subscribe(evt => props[k].call(ctx, evt)));
|
|
180
|
+
}
|
|
181
|
+
else {
|
|
182
|
+
componentInstance.instance[k] = props[k];
|
|
183
|
+
}
|
|
184
|
+
});
|
|
185
|
+
componentInstance.changeDetectorRef.detectChanges();
|
|
186
|
+
}
|
|
187
|
+
}));
|
|
144
188
|
});
|
|
145
|
-
}
|
|
189
|
+
};
|
|
190
|
+
return ngZone?.runOutsideAngular
|
|
191
|
+
? ngZone?.runOutsideAngular(createWrappedElement)
|
|
192
|
+
: createWrappedElement();
|
|
146
193
|
}
|
|
194
|
+
/**
|
|
195
|
+
* This method will automatically wrap an Angular
|
|
196
|
+
* Component or Directive into a React object.
|
|
197
|
+
* @Outputs (EventEmitters) will be automatically
|
|
198
|
+
* linked into the input properties along with
|
|
199
|
+
* all of the @Inputs.
|
|
200
|
+
* @returns React.NamedExoticComponent
|
|
201
|
+
* @experimental
|
|
202
|
+
*/
|
|
203
|
+
const AutoWrapAngularObject = ({ component, appRef, ngZone, instance, injector, containerTag, reactTemplate, }) => {
|
|
204
|
+
const props = ng2ReactProps(instance);
|
|
205
|
+
return WrapAngularComponentInReact({
|
|
206
|
+
component,
|
|
207
|
+
ngZone,
|
|
208
|
+
appRef,
|
|
209
|
+
injector,
|
|
210
|
+
containerTag,
|
|
211
|
+
props,
|
|
212
|
+
reactTemplate
|
|
213
|
+
});
|
|
214
|
+
};
|
|
147
215
|
/**
|
|
148
216
|
* Bootstrap an Angular component with `createApplication` and export it under a
|
|
149
217
|
* react Element.
|
|
@@ -161,7 +229,8 @@ function ReactifyStandaloneAngularComponent(component, props = {}, providers = [
|
|
|
161
229
|
app?.destroy();
|
|
162
230
|
};
|
|
163
231
|
}, []);
|
|
164
|
-
return React.createElement(containerTag, {
|
|
232
|
+
return React.createElement(containerTag, {
|
|
233
|
+
ref: async (node) => {
|
|
165
234
|
// Not sure if this ever actually happens, added as a preventative measure
|
|
166
235
|
// to memory leaks.
|
|
167
236
|
subscriptions?.forEach(s => s?.unsubscribe());
|
|
@@ -184,21 +253,51 @@ function ReactifyStandaloneAngularComponent(component, props = {}, providers = [
|
|
|
184
253
|
}
|
|
185
254
|
});
|
|
186
255
|
base.changeDetectorRef.detectChanges();
|
|
187
|
-
}
|
|
256
|
+
}
|
|
257
|
+
});
|
|
188
258
|
}
|
|
259
|
+
// These exports exist to attempt to make the API have minimal breaking changes.
|
|
260
|
+
const ReactifyReactComponent = ReactifyAngularComponent;
|
|
261
|
+
const ReactifyAngularComponent3 = WrapAngularComponentInReact;
|
|
262
|
+
;
|
|
189
263
|
|
|
190
264
|
/**
|
|
191
|
-
*
|
|
192
|
-
* bindings
|
|
265
|
+
* This component can be used to automatically wrap a React
|
|
266
|
+
* component into Angular bindings with functional change detection.
|
|
267
|
+
* All you need to provide is the @Input and @Output interface
|
|
268
|
+
* for the component in order to tell Angular which keys correspond to what.
|
|
269
|
+
*
|
|
270
|
+
* ### You _must_ override the property `ngReactComponent`.
|
|
193
271
|
*
|
|
194
|
-
* ! You _must_ override the property `ngReactComponent`
|
|
195
272
|
* Failure to do so will result in errors
|
|
196
|
-
*
|
|
273
|
+
*
|
|
274
|
+
* `override readonly ngReactComponent = SomeReactFunction;`
|
|
275
|
+
*
|
|
276
|
+
* Example:
|
|
277
|
+
*
|
|
278
|
+
* ```ts
|
|
279
|
+
* @Component({
|
|
280
|
+
* selector: "app-react-wrapped",
|
|
281
|
+
* standalone: true
|
|
282
|
+
* })
|
|
283
|
+
* export class MyReactWrappedComponent extends ReactifyNgComponent {
|
|
284
|
+
*
|
|
285
|
+
* @Input() data: any;
|
|
286
|
+
* @Input() options: any;
|
|
287
|
+
* @Input() version: any;
|
|
288
|
+
*
|
|
289
|
+
* // Notice how we wrap the result in an array, this is important because
|
|
290
|
+
* // React can pass multiple properties to a callback and Angular can't.
|
|
291
|
+
* @Output() onClick = new EventEmitter<[any]>();
|
|
292
|
+
*
|
|
293
|
+
* }
|
|
294
|
+
* ```
|
|
197
295
|
*/
|
|
198
296
|
class ReactifyNgComponent {
|
|
199
297
|
constructor(ngContainer, ngZone) {
|
|
200
298
|
this.ngContainer = ngContainer;
|
|
201
299
|
this.ngZone = ngZone;
|
|
300
|
+
this._props = {};
|
|
202
301
|
}
|
|
203
302
|
ngOnInit() {
|
|
204
303
|
if (!this.ngReactComponent) {
|
|
@@ -226,33 +325,33 @@ class ReactifyNgComponent {
|
|
|
226
325
|
// List all keys that do not start with `_` nor `ng`
|
|
227
326
|
const keys = Object.keys(this).filter(k => !/^(?:_|ng)/.test(k));
|
|
228
327
|
// Get all property keys from the class
|
|
229
|
-
const propKeys = keys.filter(k => !k
|
|
328
|
+
const propKeys = keys.filter(k => !(this[k] instanceof EventEmitter));
|
|
230
329
|
// Get all event handler keys from the class
|
|
231
|
-
const evtKeys = keys.filter(k => k
|
|
232
|
-
const props = {};
|
|
330
|
+
const evtKeys = keys.filter(k => this[k] instanceof EventEmitter);
|
|
233
331
|
// Project all key properties onto `props`
|
|
234
|
-
propKeys.forEach(k =>
|
|
332
|
+
propKeys.forEach(k => this._props[k] = this[k]);
|
|
235
333
|
// Attempt to ensure no zone is lost during the event emitter fires
|
|
236
334
|
this.ngZone.runGuarded(() => {
|
|
237
335
|
// Bind all event handlers.
|
|
238
336
|
// ! important Angular uses EventEmitter, React uses
|
|
239
337
|
// a different method of event binding
|
|
240
|
-
evtKeys.forEach(k =>
|
|
338
|
+
evtKeys.forEach(k => this._props[k] = (...args) => this[k].next(args));
|
|
241
339
|
});
|
|
242
|
-
this.
|
|
340
|
+
this._reactElement = React.createElement(this.ngReactComponent, { props: this._props });
|
|
341
|
+
this._root.render(this._reactElement);
|
|
243
342
|
}
|
|
244
343
|
catch (err) {
|
|
245
344
|
console.error(err);
|
|
246
345
|
}
|
|
247
346
|
});
|
|
248
347
|
}
|
|
249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.
|
|
250
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.
|
|
348
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactifyNgComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ReactifyNgComponent, isStandalone: true, selector: "ngx-reactify", usesOnChanges: true, ngImport: i0, template: ``, isInline: true }); }
|
|
251
350
|
}
|
|
252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ReactifyNgComponent, decorators: [{
|
|
253
352
|
type: Component,
|
|
254
353
|
args: [{
|
|
255
|
-
selector: '
|
|
354
|
+
selector: 'ngx-reactify',
|
|
256
355
|
template: ``,
|
|
257
356
|
standalone: true
|
|
258
357
|
}]
|
|
@@ -262,5 +361,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
|
|
|
262
361
|
* Generated bundle index. Do not edit.
|
|
263
362
|
*/
|
|
264
363
|
|
|
265
|
-
export { ReactifyAngularComponent, ReactifyAngularComponent3, ReactifyNgComponent, ReactifyReactComponent, ReactifyStandaloneAngularComponent };
|
|
364
|
+
export { AutoWrapAngularObject, ReactifyAngularComponent, ReactifyAngularComponent3, ReactifyNgComponent, ReactifyReactComponent, ReactifyStandaloneAngularComponent, WrapAngularComponentInReact, ng2ReactProps };
|
|
266
365
|
//# sourceMappingURL=ngx-reactify.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ngx-reactify.mjs","sources":["../../../src/util/angular-to-react.ts","../../../src/util/react-to-angular.ts","../../../src/ngx-reactify.ts"],"sourcesContent":["import { Type, ApplicationRef, Injector, NgZone, createComponent, EventEmitter, Provider, EnvironmentProviders, ComponentRef } from '@angular/core';\nimport { createApplication } from '@angular/platform-browser';\nimport * as React from 'react';\nimport { firstValueFrom, Subscription } from 'rxjs';\n\n\n/**\n * Wrap an Angular component inside of a React memo object.\n * Will attempt to bind @Input and @Output properties if provided,\n * and will bind the react arguments directly as @Input properties.\n *\n * Usage: An Angular top-level application with a ReactifyNgComponent react implementation\n * that needs to embed Angular components as children of the react-wrapped component.\n *\n * @experimental\n * @param componentClass Angular component\n * @param envInjector An `EnvironmentInjector` instance to be used for the component\n * @param injector An `ElementInjector` instance\n * @param _inputs\n * @param _outputs\n * @returns\n */\nexport const ReactifyAngularComponent = ({\n component,\n appRef,\n injector,\n ngZone,\n staticInputs = {},\n staticOutputs = {},\n preSiblings = [],\n postSiblings = [],\n additionalChildren = [],\n rootElementName = '',\n containerElementName = ''\n}: {\n component: Type<any>,\n appRef: Omit<ApplicationRef, '_runningTick'>,\n injector: Injector,\n ngZone: NgZone,\n staticInputs?: { [key: string]: any; },\n staticOutputs?: { [key: string]: Function; },\n preSiblings?: React.ReactNode[],\n postSiblings?: React.ReactNode[],\n additionalChildren?: React.ReactNode[],\n rootElementName?: Parameters<typeof React.createElement>[0],\n containerElementName?: string;\n}) => React.memo((args) => {\n\n return ngZone.runOutsideAngular(() => {\n const id = Math.random().toString();\n React.useEffect(() => {\n try {\n\n const componentInstance = createComponent(component, {\n environmentInjector: appRef.injector,\n elementInjector: injector,\n hostElement: document.getElementById(id)\n });\n\n appRef.attachView(componentInstance.hostView);\n // @ts-ignore\n // component.hostView = hostView;\n\n Object.assign(staticInputs, args);\n\n const { inputs, outputs } = component['ɵcmp'];\n\n // Returns a list of entries that need to be set\n // This makes it so that unnecessary setters are not invoked.\n const updated = Object.entries(inputs).filter(([parentKey, childKey]: [string, string]) => {\n return componentInstance.instance[childKey] != staticInputs[parentKey];\n });\n\n updated.forEach(([parentKey, childKey]: [string, string]) => {\n if (staticInputs.hasOwnProperty(parentKey))\n componentInstance.instance[childKey] = staticInputs[parentKey];\n });\n\n const outputSubscriptions: { [key: string]: Subscription; } = {};\n // Get a list of unregistered outputs\n const newOutputs = Object.entries(outputs).filter(([parentKey, childKey]: [string, string]) => {\n return !outputSubscriptions[parentKey];\n });\n\n // Reverse bind via subscription\n newOutputs.forEach(([parentKey, childKey]: [string, string]) => {\n if (!staticOutputs.hasOwnProperty(parentKey)) return;\n\n const target: EventEmitter<unknown> = componentInstance.instance[childKey];\n const outputs = staticOutputs;\n\n const sub = target.subscribe((...args) => {\n // Run the callback in the provided zone\n ngZone.run(() => {\n outputs[parentKey](...args);\n });\n }); // Subscription\n\n outputSubscriptions[parentKey] = sub;\n });\n\n // Wrap the destroy method to safely release the subscriptions\n const originalDestroy = componentInstance.onDestroy?.bind(componentInstance);\n componentInstance.onDestroy = (cb) => {\n Object.values(outputSubscriptions).forEach(s => s.unsubscribe());\n originalDestroy?.(cb);\n };\n\n componentInstance.changeDetectorRef.detectChanges();\n }\n catch (err) {\n console.error(err);\n }\n }, []);\n\n const elements = [\n ...(preSiblings || []),\n React.createElement(containerElementName || \"div\", { id }),\n ...(postSiblings || []),\n ...(additionalChildren || [])\n ].filter(e => e);\n\n return React.createElement(rootElementName || \"div\", {}, ...elements);\n })\n});\n// TODO: Remove in major release.\nexport const ReactifyReactComponent = ReactifyAngularComponent;\n\n/**\n * Do not use this.\n * @hidden\n * @experimental\n */\nexport function ReactifyAngularComponent3(\n component: Type<any>,\n ngZone: NgZone,\n appRef: Omit<ApplicationRef, '_runningTick'>,\n injector: Injector,\n props: any = {},\n containerTag: string = 'div'\n) {\n const ctx = this;\n console.log(\"ReactifyAngularComponent3\")\n\n return ngZone.runOutsideAngular(() => {\n // Is there a better way to do this?\n let subscriptions: Subscription[];\n let app: ApplicationRef;\n let componentInstance: ComponentRef<any>;\n\n React.useEffect(() => {\n return () => {\n // Code to run when the component unmounts\n subscriptions?.forEach(s => s?.unsubscribe());\n // app?.destroy();\n\n appRef.detachView(componentInstance.hostView);\n };\n }, []);\n\n return React.createElement(containerTag, {\n ref: async (node) => {\n // Not sure if this ever actually happens, added as a preventative measure\n // to memory leaks.\n subscriptions?.forEach(s => s?.unsubscribe());\n app?.destroy();\n\n\n // ngZone.run(async () => {\n // Init an Angular application root & bootstrap it to a DOM element.\n\n componentInstance = createComponent(component, {\n environmentInjector: appRef.injector,\n elementInjector: injector,\n hostElement: node\n });\n\n appRef.attachView(componentInstance.hostView);\n // app = await createApplication({ providers });\n // const base = app.bootstrap(component, node);\n // const { instance } = base;\n\n\n // Wait for the JS to finish rendering and initing.\n // await firstValueFrom(app.isStable);\n\n // Now that everything has settled, bind inputs and outputs.\n subscriptions = [];\n Object.entries(props).filter(([k, v]) => {\n // @Outputs are always Event Emitters (I think)\n if (v instanceof EventEmitter) {\n subscriptions.push(\n componentInstance.instance[k]?.subscribe(evt => props[k].call(ctx, evt))\n );\n }\n else {\n componentInstance.instance[k] = props[k];\n }\n });\n // })\n\n // app.tick();\n }\n });\n });\n}\n\n\n/**\n * Bootstrap an Angular component with `createApplication` and export it under a\n * react Element.\n * Usage: React top-level application embedding an Angular component.\n */\nexport function ReactifyStandaloneAngularComponent(\n component: Type<any>,\n props: any = {},\n providers: (Provider | EnvironmentProviders)[] = [],\n containerTag: string = 'div'\n) {\n const ctx = this;\n\n // Is there a better way to do this?\n let subscriptions: Subscription[];\n let app: ApplicationRef;\n\n React.useEffect(() => {\n return () => {\n // Code to run when the component unmounts\n subscriptions?.forEach(s => s?.unsubscribe());\n app?.destroy();\n };\n }, []);\n\n return React.createElement(containerTag, { ref: async (node) => {\n // Not sure if this ever actually happens, added as a preventative measure\n // to memory leaks.\n subscriptions?.forEach(s => s?.unsubscribe());\n app?.destroy();\n\n // Init an Angular application root & bootstrap it to a DOM element.\n app = await createApplication({ providers });\n const base = app.bootstrap(component, node);\n const { instance } = base;\n\n\n // Wait for the JS to finish rendering and initing.\n await firstValueFrom(app.isStable);\n\n // Now that everything has settled, bind inputs and outputs.\n subscriptions = [];\n Object.entries(props).filter(([k, v]) => {\n // @Outputs are always Event Emitters (I think)\n if (v instanceof EventEmitter) {\n subscriptions.push(\n instance[k]?.subscribe(evt => props[k].call(ctx, evt))\n );\n }\n else {\n instance[k] = props[k];\n }\n });\n\n base.changeDetectorRef.detectChanges();\n } });\n}\n","import { AfterViewInit, Component, NgZone, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';\nimport * as React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\n\n\n/**\n * Extend this component to automatically generate\n * bindings to a React component.\n *\n * ! You _must_ override the property `ngReactComponent`\n * Failure to do so will result in errors\n * `override readonly ngReactComponent = ReactFlowWrappableComponent;`\n */\n@Component({\n selector: 'app-react-magic-wrapper',\n template: ``,\n standalone: true\n})\nexport class ReactifyNgComponent implements OnChanges, OnDestroy, AfterViewInit {\n\n /**\n * The react component to be wrapped.\n * ! Must be overridden for this wrapper to work\n */\n ngReactComponent: React.FunctionComponent<any> | React.ComponentClass<any>;\n\n private _root: Root;\n\n constructor(\n protected readonly ngContainer: ViewContainerRef,\n protected readonly ngZone: NgZone\n ) {\n }\n\n ngOnInit() {\n if (!this.ngReactComponent) {\n throw new Error(\"ReactifyNgComponent cannot be inherited without a provided ngReactComponent!\");\n }\n }\n\n ngOnChanges(changes?: SimpleChanges): void {\n this._render();\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n ngOnDestroy() {\n this._root?.unmount();\n }\n\n private _render() {\n if (!this.ngReactComponent) {\n console.log(\"Render no component. May be context issue\")\n return\n };\n\n this.ngZone.runOutsideAngular(() => {\n try {\n this._root ??= createRoot(this.ngContainer.element.nativeElement);\n\n // List all keys that do not start with `_` nor `ng`\n const keys = Object.keys(this).filter(k => !/^(?:_|ng)/.test(k));\n\n // Get all property keys from the class\n const propKeys = keys.filter(k => !k.startsWith(\"on\"));\n // Get all event handler keys from the class\n const evtKeys = keys.filter(k => k.startsWith(\"on\"));\n\n const props = {};\n // Project all key properties onto `props`\n propKeys.forEach(k => props[k] = this[k]);\n\n // Attempt to ensure no zone is lost during the event emitter fires\n this.ngZone.runGuarded(() => {\n // Bind all event handlers.\n // ! important Angular uses EventEmitter, React uses\n // a different method of event binding\n evtKeys.forEach(k => props[k] = (...args) => this[k].next(args));\n })\n\n this._root.render(\n React.createElement(this.ngReactComponent, { props: props as any })\n );\n }\n catch(err) {\n console.error(err)\n }\n })\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ngx-reactify.mjs","sources":["../../../src/util/angular-to-react.ts","../../../src/util/react-to-angular.ts","../../../src/ngx-reactify.ts"],"sourcesContent":["import { Type, ApplicationRef, Injector, NgZone, createComponent, EventEmitter, Provider, EnvironmentProviders, ComponentRef } from '@angular/core';\nimport { createApplication } from '@angular/platform-browser';\nimport * as React from 'react';\nimport { firstValueFrom, Subscription } from 'rxjs';\n\n\n/**\n * Wrap an Angular component inside of a React memo object.\n * Will attempt to bind @Input and @Output properties if provided,\n * and will bind the react arguments directly as @Input properties.\n *\n * Usage: An Angular top-level application with a ReactifyNgComponent react implementation\n * that needs to embed Angular components as children of the react-wrapped component.\n *\n * This is replaced by `WrapAngularComponentInReact`.\n * @deprecated\n */\nexport const ReactifyAngularComponent = ({\n component,\n appRef,\n injector,\n ngZone,\n staticInputs = {},\n staticOutputs = {},\n preSiblings = [],\n postSiblings = [],\n additionalChildren = [],\n rootElementName = '',\n containerElementName = ''\n}: {\n component: Type<any>,\n appRef: Omit<ApplicationRef, '_runningTick'>,\n injector: Injector,\n ngZone: NgZone,\n staticInputs?: { [key: string]: any; },\n staticOutputs?: { [key: string]: Function; },\n preSiblings?: React.ReactNode[],\n postSiblings?: React.ReactNode[],\n additionalChildren?: React.ReactNode[],\n rootElementName?: Parameters<typeof React.createElement>[0],\n containerElementName?: string;\n}) => React.memo((args) => {\n\n return ngZone.runOutsideAngular(() => {\n let outputSubscriptions: { [key: string]: Subscription; };\n let componentInstance: ComponentRef<any>;\n\n const tripChangeDetection = () =>\n componentInstance?.changeDetectorRef?.detectChanges();\n\n // These attributes will trigger change detection when they fire from\n // the underlying React element.\n // ... This will break things. FUCK.\n const attributes: Array<keyof React.DOMAttributes<any>> = ['onCopy', 'onCut', 'onPaste', 'onAbort', 'onBlur', 'onFocus', 'onCanPlay', 'onCanPlayThrough', 'onChange', 'onClick', 'onContextMenu', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onDurationChange', 'onEmptied', 'onEnded', 'onInput', 'onInvalid', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onLoad', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onReset', 'onScroll', 'onSeeked', 'onSeeking', 'onSelect', 'onStalled', 'onSubmit', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', 'onError'];\n\n const attrObj = {};\n attributes.forEach(a => attrObj[a] = tripChangeDetection);\n\n React.useEffect(() => {\n return () => {\n // Code to run when the component unmounts\n appRef?.detachView(componentInstance.hostView);\n Object.values(outputSubscriptions).forEach(s => s.unsubscribe());\n componentInstance?.destroy();\n };\n }, []);\n\n\n const elements = [\n ...(preSiblings || []),\n React.createElement(containerElementName || \"div\", {\n ...attrObj,\n ref: node => {\n const { inputs, outputs } = component['ɵcmp'];\n\n if (componentInstance) return;\n\n ngZone.run(() => {\n componentInstance = createComponent(component, {\n environmentInjector: appRef.injector,\n elementInjector: injector,\n hostElement: node\n });\n\n Object.assign(staticInputs, args);\n appRef.attachView(componentInstance.hostView);\n });\n\n // Returns a list of entries that need to be set\n // This makes it so that unnecessary setters are not invoked.\n const updated = Object.entries(inputs).filter(([parentKey, childKey]: [string, string]) => {\n return componentInstance.instance[childKey] != staticInputs[parentKey];\n });\n\n updated.forEach(([parentKey, childKey]: [string, string]) => {\n if (staticInputs.hasOwnProperty(parentKey))\n componentInstance.instance[childKey] = staticInputs[parentKey];\n });\n\n outputSubscriptions = {};\n // Get a list of unregistered outputs\n const newOutputs = Object.entries(outputs).filter(([parentKey, childKey]: [string, string]) => {\n return !outputSubscriptions[parentKey];\n });\n\n // Reverse bind via subscription\n newOutputs.forEach(([parentKey, childKey]: [string, string]) => {\n if (!staticOutputs.hasOwnProperty(parentKey)) return;\n\n const target: EventEmitter<unknown> = componentInstance.instance[childKey];\n const outputs = staticOutputs;\n\n const sub = target.subscribe((...args) => {\n // Run the callback in the provided zone\n ngZone.run(() => {\n outputs[parentKey](...args);\n });\n }); // Subscription\n\n outputSubscriptions[parentKey] = sub;\n });\n\n // Wrap the destroy method to safely release the subscriptions\n const originalDestroy = componentInstance.onDestroy?.bind(componentInstance);\n componentInstance.onDestroy = (cb) => {\n Object.values(outputSubscriptions).forEach(s => s.unsubscribe());\n originalDestroy?.(cb);\n };\n\n componentInstance.changeDetectorRef.detectChanges();\n }\n }),\n ...(postSiblings || []),\n ...(additionalChildren || [])\n ].filter(e => e);\n\n return React.createElement(rootElementName || \"div\", {}, ...elements);\n });\n});\n\n\n/**\n * Do not use this.\n * @hidden\n * @experimental\n */\nexport const ng2ReactProps = (obj = {}) => {\n const props = {};\n Object.entries(obj).forEach(([k, v]) => {\n // Omit things prefixed with an underscore\n if (k.startsWith('_')) return;\n\n // Omit output event emitters\n if (v instanceof EventEmitter) {\n props[k] = (...args) => v.emit([args]);\n }\n else {\n props[k] = v;\n }\n });\n return props;\n};\n\n/**\n * This method will create a React component that\n * wraps an Angular component.\n * @returns React.NamedExoticComponent\n *\n * @hidden\n * @experimental\n */\nexport function WrapAngularComponentInReact({\n component,\n ngZone,\n appRef,\n injector,\n props,\n containerTag,\n reactTemplate,\n projectableNodes\n}: {\n /**\n * Angular Component to be rendered within React\n */\n component: Type<any>,\n /**\n * Angular Application Reference. Used for bootstrapping\n * and change detection hierarchy.\n */\n appRef: Omit<ApplicationRef, '_runningTick'>,\n /**\n * Instance of NgZone class.\n * Very important to prevent Zone.js event performance issues.\n * Do not set if running Zoneless CD.\n */\n ngZone?: NgZone,\n /**\n * Static properties to be passed into the Angular instance.\n * Automatically generates event proxies for Angular EventEmitters.\n */\n props?: Record<string, any>,\n /**\n * Local Element Injector provided to the Angular object\n */\n injector?: Injector,\n /**\n * HTML Tag for the created DOM wrapper. Defaults to `div`.\n */\n containerTag?: string,\n /**\n * React Function template\n */\n reactTemplate?: (el: React.ReactElement) => React.ReactElement;\n /**\n * Nodes to be passed to the `ng-content` of the child Angular component.\n */\n projectableNodes?: Node[][];\n}) {\n props ??= {};\n containerTag ??= 'div';\n const ctx = this;\n\n const createWrappedElement = () => {\n\n reactTemplate ??= (el) => el;\n return React.memo((args) => {\n // Is there a better way to do this?\n let subscriptions: Subscription[];\n let componentInstance: ComponentRef<any>;\n\n Object.assign(props, args);\n\n React.useEffect(() => {\n return () => {\n // Cleanup and dispose leftover Angular objects\n appRef?.detachView(componentInstance.hostView);\n subscriptions?.forEach(s => s?.unsubscribe());\n componentInstance?.destroy();\n };\n }, []);\n\n const tripChangeDetection = () =>\n componentInstance?.changeDetectorRef?.detectChanges();\n\n // These attributes will trigger change detection when they fire from\n // the underlying React element.\n // ... This will break things. FUCK.\n const attributes: Array<keyof React.DOMAttributes<any>> = ['onCopy', 'onCut', 'onPaste', 'onAbort', 'onBlur', 'onFocus', 'onCanPlay', 'onCanPlayThrough', 'onChange', 'onClick', 'onContextMenu', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onDurationChange', 'onEmptied', 'onEnded', 'onInput', 'onInvalid', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onLoad', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onReset', 'onScroll', 'onSeeked', 'onSeeking', 'onSelect', 'onStalled', 'onSubmit', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', 'onError'];\n\n const attrObj = {};\n attributes.forEach(a => attrObj[a] = tripChangeDetection);\n\n return reactTemplate(React.createElement(containerTag, {\n ...attrObj,\n ref: async (node) => {\n if (componentInstance) return;\n\n // Not sure if this ever actually happens, added as a preventative measure\n // to memory leaks.\n subscriptions?.forEach(s => s?.unsubscribe());\n\n const bootstrap = () => {\n // Init the Angular component with the context of the root Angular app.\n componentInstance = createComponent(component, {\n environmentInjector: appRef.injector,\n elementInjector: injector,\n hostElement: node,\n projectableNodes: projectableNodes\n });\n appRef.attachView(componentInstance.hostView);\n };\n\n ngZone?.runTask\n ? ngZone?.runTask(bootstrap)\n : bootstrap();\n\n // Now that everything has settled, bind inputs and outputs.\n subscriptions = [];\n Object.entries(props).filter(([k, v]) => {\n // @Outputs are always Event Emitters (I think)\n if (v instanceof EventEmitter) {\n subscriptions.push(\n componentInstance.instance[k]?.subscribe(evt => props[k].call(ctx, evt))\n );\n }\n else {\n componentInstance.instance[k] = props[k];\n }\n });\n\n componentInstance.changeDetectorRef.detectChanges();\n }\n }));\n });\n };\n\n return ngZone?.runOutsideAngular\n ? ngZone?.runOutsideAngular(createWrappedElement)\n : createWrappedElement();\n}\n\n/**\n * This method will automatically wrap an Angular\n * Component or Directive into a React object.\n * @Outputs (EventEmitters) will be automatically\n * linked into the input properties along with\n * all of the @Inputs.\n * @returns React.NamedExoticComponent\n * @experimental\n */\nexport const AutoWrapAngularObject = ({\n component,\n appRef,\n ngZone,\n instance,\n injector,\n containerTag,\n reactTemplate,\n}: (Parameters<typeof WrapAngularComponentInReact>[0] & {\n /**\n * Angular Component/Directive instance that will have properties bound to the created\n */\n instance?: InstanceType<Type<any>> | Record<string, any>,\n\n})) => {\n const props = ng2ReactProps(instance);\n\n return WrapAngularComponentInReact({\n component,\n ngZone,\n appRef,\n injector,\n containerTag,\n props,\n reactTemplate\n });\n};\n\n/**\n * Bootstrap an Angular component with `createApplication` and export it under a\n * react Element.\n * Usage: React top-level application embedding an Angular component.\n */\nexport function ReactifyStandaloneAngularComponent(\n component: Type<any>,\n props: any = {},\n providers: (Provider | EnvironmentProviders)[] = [],\n containerTag: string = 'div'\n) {\n const ctx = this;\n\n // Is there a better way to do this?\n let subscriptions: Subscription[];\n let app: ApplicationRef;\n\n React.useEffect(() => {\n return () => {\n // Code to run when the component unmounts\n subscriptions?.forEach(s => s?.unsubscribe());\n app?.destroy();\n };\n }, []);\n\n return React.createElement(containerTag, {\n ref: async (node) => {\n // Not sure if this ever actually happens, added as a preventative measure\n // to memory leaks.\n subscriptions?.forEach(s => s?.unsubscribe());\n app?.destroy();\n\n // Init an Angular application root & bootstrap it to a DOM element.\n app = await createApplication({ providers });\n const base = app.bootstrap(component, node);\n const { instance } = base;\n\n\n // Wait for the JS to finish rendering and initing.\n await firstValueFrom(app.isStable);\n\n // Now that everything has settled, bind inputs and outputs.\n subscriptions = [];\n Object.entries(props).filter(([k, v]) => {\n // @Outputs are always Event Emitters (I think)\n if (v instanceof EventEmitter) {\n subscriptions.push(\n instance[k]?.subscribe(evt => props[k].call(ctx, evt))\n );\n }\n else {\n instance[k] = props[k];\n }\n });\n\n base.changeDetectorRef.detectChanges();\n }\n });\n}\n\n\n\n// These exports exist to attempt to make the API have minimal breaking changes.\nexport const ReactifyReactComponent = ReactifyAngularComponent;\nexport const ReactifyAngularComponent3 = WrapAngularComponentInReact;;\n","import { AfterViewInit, Component, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';\nimport * as React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\n\n\n/**\n * This component can be used to automatically wrap a React\n * component into Angular bindings with functional change detection.\n * All you need to provide is the @Input and @Output interface\n * for the component in order to tell Angular which keys correspond to what.\n *\n * ### You _must_ override the property `ngReactComponent`.\n *\n * Failure to do so will result in errors\n *\n * `override readonly ngReactComponent = SomeReactFunction;`\n *\n * Example:\n *\n * ```ts\n * @Component({\n * selector: \"app-react-wrapped\",\n * standalone: true\n * })\n * export class MyReactWrappedComponent extends ReactifyNgComponent {\n *\n * @Input() data: any;\n * @Input() options: any;\n * @Input() version: any;\n *\n * // Notice how we wrap the result in an array, this is important because\n * // React can pass multiple properties to a callback and Angular can't.\n * @Output() onClick = new EventEmitter<[any]>();\n *\n * }\n * ```\n */\n@Component({\n selector: 'ngx-reactify',\n template: ``,\n standalone: true\n})\nexport class ReactifyNgComponent implements OnChanges, OnDestroy, AfterViewInit {\n\n /**\n * The react component to be wrapped.\n * ! Must be overridden for this wrapper to work\n */\n ngReactComponent: React.FunctionComponent<any> | React.ComponentClass<any>;\n\n private _root: Root;\n\n private _reactElement: React.ReactElement;\n\n private _props: Object = {};\n\n constructor(\n protected readonly ngContainer: ViewContainerRef,\n protected readonly ngZone: NgZone\n ) {\n }\n\n ngOnInit() {\n if (!this.ngReactComponent) {\n throw new Error(\"ReactifyNgComponent cannot be inherited without a provided ngReactComponent!\");\n }\n }\n\n ngOnChanges(changes?: SimpleChanges): void {\n this._render();\n }\n\n ngAfterViewInit() {\n this._render();\n }\n\n ngOnDestroy() {\n this._root?.unmount();\n }\n\n private _render() {\n if (!this.ngReactComponent) {\n console.log(\"Render no component. May be context issue\")\n return\n };\n\n this.ngZone.runOutsideAngular(() => {\n try {\n this._root ??= createRoot(this.ngContainer.element.nativeElement);\n\n // List all keys that do not start with `_` nor `ng`\n const keys = Object.keys(this).filter(k => !/^(?:_|ng)/.test(k));\n\n // Get all property keys from the class\n const propKeys = keys.filter(k => !(this[k] instanceof EventEmitter));\n // Get all event handler keys from the class\n const evtKeys = keys.filter(k => this[k] instanceof EventEmitter);\n\n // Project all key properties onto `props`\n propKeys.forEach(k => this._props[k] = this[k]);\n\n // Attempt to ensure no zone is lost during the event emitter fires\n this.ngZone.runGuarded(() => {\n // Bind all event handlers.\n // ! important Angular uses EventEmitter, React uses\n // a different method of event binding\n evtKeys.forEach(k => this._props[k] = (...args) => this[k].next(args));\n })\n\n this._reactElement = React.createElement(this.ngReactComponent, { props: this._props as any });\n this._root.render(this._reactElement);\n }\n catch(err) {\n console.error(err)\n }\n })\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|