ngx-reactify 0.1.6 → 0.1.7

package/README.md

@@ -5,7 +5,7 @@ I will try to minimize breaking changes between minor version revisions but some
 
 This project aims to make using Angular components in React not suck, and vice-versa. This is a dependency of my other library, ngx-xyflow.
 
-### Getting started:
+## Getting started (React in Angular):
 
 ##### Install React
 
@@ -23,9 +23,9 @@ This project aims to make using Angular components in React not suck, and vice-v
     npm i ngx-reactify
 ```
 
-### Embed React component in Angular
+### Embed a React component in Angular
 
-##### Create component Interface
+##### Create the wrapper component
 Next, you.
 > This step is necessary as it creates Angular bindings that can be used.
 > Important: You can't use the normal stylesheet imports from React. Put your styles in the component.scss file.
@@ -83,37 +83,183 @@ export class DemoComponent {
 }
 ```
 
-### Embed Angular component in React
+## Getting started (Angular in React):
+
+### Install ngx-reactify
+
+```bash
+    npm i ngx-reactify
+```
+
+### Install Angular in your project
+You need at minimum the following dependencies:
+
+It has been tested on v19, other versions **should** work if they support standalone components.
+
+```bash
+    npm i @analogjs/vite-plugin-angular @angular/common@19 @angular/core@19 @angular/platform-browser@19 @angular/compiler@19
+```
+
+### Setup 
+
+##### Zone.js
+
+The init method currently requires zone.js, so you need to import that in the browser.
+I recommend placing the side-effect import in your entrypoint ts/tsx file like so:
 
-> :warn: Under construction.
-<!-- 
 ```ts
-import React from 'react';
-import { ReactifyReactComponent } from 'ngx-reactify';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
-import { ReactDemoComponent } from './react-demo.component';
+import "zone.js";
+```
+
+##### tsconfig
+
+You **must** add a tsconfig.app.json file. The sample below has been tested and works.
+`tsconfig.app.json`
+```json
+{
+    "extends": "./tsconfig.json",
+    "compileOnSave": false,
+    "compilerOptions": {
+        "baseUrl": "./",
+        "outDir": "./dist/out-tsc",
+        "forceConsistentCasingInFileNames": true,
+        "strict": true,
+        "noImplicitOverride": true,
+        "noPropertyAccessFromIndexSignature": true,
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        "sourceMap": true,
+        "declaration": false,
+        "downlevelIteration": true,
+        "experimentalDecorators": true,
+        "moduleResolution": "node",
+        "importHelpers": true,
+        "noEmit": false,
+        "target": "es2020",
+        "module": "es2020",
+        "lib": [
+            "es2020",
+            "dom"
+        ],
+        "skipLibCheck": true
+    },
+    "angularCompilerOptions": {
+        "enableI18nLegacyMessageIdFormat": false,
+        "strictInjectionParameters": true,
+        "strictInputAccessModifiers": true,
+        "strictTemplates": true
+    },
+    "files": [],
+    "include": [
+        "src/**/*.ts"
+    ]
+}
+
+```
+
+##### vite.config.js
+
+You need to import the angular plugin from @analogjs/vite-plugin-angular.
+
+```js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import angular from '@analogjs/vite-plugin-angular';
+
+export default defineConfig({
+    plugins: [
+        // Angular plugin **MUST** be imported before the react plugin.
+        angular(),
+        react()
+    ]
+});
+```
+
+### Using an Angular component in your React app
+
+There are two ways in which you can transform an Angular component into a React entity.
+
+Option one is to perform a one-time wrapping of the Angular component. This allows you to
+use it like a normal react component, and you can even import the transformed component 
+throughout your project like normal react components.
+Option two is to perform an ad-hoc transformation. This is more useful where you need to 
+pass providers into the Angular ecosystem.
+
+
+#### One time auto-wrap of an Angular component to a React component
+
+Angular Component:
+
+```ts
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-    selector: 'app-demo',
-    template: `<div (click)="onNodeClick($event)"></div>`,
-    standalone: true
+    selector: 'ngx-child',
+    standalone: true,
+    template: `
+    <div class="angular">
+      <h1>Hello from Angular, {{name}}!</h1>
+      <p>Clicks: {{ clicks }}</p>
+      <button (click)="increment()">Click me!</button>
+    </div>
+  `,
+    styles: [``]
 })
-export class DemoComponent {
-    onNodeClick(evt) {
-        console.log(evt)
+export class AngularComponent {
+
+    @Input() clicks = 0;
+    @Output() clickChange = new EventEmitter<number>();
+
+    @Input() name;
+
+    increment() {
+        this.clicks++;
+        this.clickChange.emit(this.clicks);
     }
 }
+```
+
+React component
+```tsx
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import './main.css';
+import { ReactifyStandaloneAngularComponent } from 'ngx-reactify';
+import { AngularComponent } from './angular.component';
 
-const AngularReactComponent = ReactifyReactComponent(DemoComponent)
+import "zone.js";
 
-export default function App() {
+const AngularReactComponent = ReactifyStandaloneAngularComponent(AngularComponent, [], 'ngx-react-wrapped', true)
 
-    return (
-        <img src="https://picsum.photos/200" className={'picture'}></img>
+// Main App component
+const App = () => {
+    const [angularClicks, setAngularClicks] = useState(10);
 
-        <div>
-            
-        </div>
-    )
+    return <div>
+        <AngularReactComponent
+            // This causes React to re-render the Angular
+            // component every time angularClicks changes
+            // it also enables pre-seeding 2-way bindings
+            // This is sub-optimal for Angular flows but
+            // follows the intended React practice
+            clicks={angularClicks}
+            clickChange={setAngularClicks}
+
+            name="Alex"
+        />
+    </div>;
 }
-``` -->
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);
+```
+
+
+
+#### ad-hoc transformation (WIP)

package/fesm2022/ngx-reactify.mjs

@@ -377,7 +377,7 @@ class ReactifyNgComponent {
                             // there's only ever one item in the arguments list.
                             this._props[k] = (arg) => {
                                 this[k].emit(arg);
-                                this.ngChangeDetector.markForCheck();
+                                this.ngChangeDetector?.markForCheck();
                             };
                         }
                         else {
@@ -385,7 +385,7 @@ class ReactifyNgComponent {
                             // everything back to the parent component in an array.
                             this._props[k] = (...args) => {
                                 this[k].emit(args);
-                                this.ngChangeDetector.markForCheck();
+                                this.ngChangeDetector?.markForCheck();
                             };
                         }
                     });

package/fesm2022/ngx-reactify.mjs.map

@@ -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 * 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        reactTemplate ??= (el) => el;\n        return React.memo((args) => {\n            const _props = {};\n            Object.assign(_props, props);\n            Object.assign(_props, args);\n\n            // Is there a better way to do this?\n            let subscriptions: 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            return reactTemplate(React.createElement(containerTag, {\n                ...attrObj,\n                ref: async (node) => {\n                    // When the node is empty, we can safely clean up the angular instance\n                    // and detach views.\n                    if (!node) {\n                        // Cleanup and dispose leftover Angular objects\n                        appRef?.detachView(componentInstance.hostView);\n                        subscriptions?.forEach(s => s?.unsubscribe());\n                        componentInstance?.destroy();\n                    }\n\n                    if (componentInstance) return;\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                    // Bootstrap in the Angular zone if it's provided\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\ntype TransformProperties<T> = {\n    [K in keyof T]: T[K] extends EventEmitter<infer U> ? React.Dispatch<React.SetStateAction<U>> : T[K];\n};\n\nexport function ReactifyStandaloneAngularComponent<T extends Type<any>>(\n    component: T,\n    providers: (Provider | EnvironmentProviders)[] = [],\n    containerTag: string = 'div',\n    debug = false\n) {\n    return React.memo((props: Partial<TransformProperties<InstanceType<T>>>) => {\n        return ReactifyStandaloneAngularElement(\n            component as any,\n            props,\n            providers,\n            containerTag,\n            debug\n        );\n    });\n}\n\nexport function ReactifyStandaloneAngularElement(\n    component: Type<any>,\n    props: any = {},\n    providers: (Provider | EnvironmentProviders)[] = [],\n    containerTag: string = 'div',\n    debug = false\n) {\n    if (debug) {\n        console.info(`[ngx-reactify/${containerTag}]: Begin render`, { args: { component, props, providers, containerTag } });\n    }\n\n    // Preserve React execution context\n    const ctx = this;\n\n    let subscriptions: Subscription[];\n    let app: ApplicationRef;\n\n    // The Angular component instance\n    let instance;\n\n    let containerNode = document.createElement(\"ngx-container\");\n\n    const attachProperties = () => {\n        subscriptions?.forEach(s => s.unsubscribe());\n        subscriptions = [];\n\n        Object.keys(props).filter((k) => {\n            // If the property is being passed in as a bound dispatchState, we'll\n            // handle it as a eventEmitter on Angular's side.\n            if (props[k].name == 'bound dispatchSetState') {\n                subscriptions.push(\n                    instance[k]?.subscribe(evt => props[k].call(ctx, evt))\n                );\n            }\n            // else 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\n    React.useEffect(() => {\n        if (!instance) return;\n\n        attachProperties();\n    });\n\n    return React.createElement(containerTag, {\n        ref: async (node: HTMLElement) => {\n\n            // If the node is removed, we need to cleanup\n            if (!node) {\n                if (debug) {\n                    console.info(`[ngx-reactify/${containerTag}]: Dispose`, { args: { component, props, providers, containerTag } });\n                }\n\n                subscriptions?.forEach(s => s?.unsubscribe());\n                app?.destroy();\n\n                return;\n            }\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: NG Bootstrap`, { args: { component, props, providers, containerTag } });\n            }\n            node.append(containerNode);\n\n            // Init an Angular application root & bootstrap it to a DOM element.\n            app = await createApplication({ providers });\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: NG App Created`, { args: { component, props, providers, containerTag } });\n            }\n\n            const base = app.bootstrap(component, containerNode);\n            instance = base.instance;\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: NG Bootstrapped`, { args: { component, props, providers, containerTag } });\n            }\n\n            // Wait for the JS to finish rendering and initing.\n            await firstValueFrom(app.isStable);\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: NG Stable`, { args: { component, props, providers, containerTag } });\n            }\n\n            // Now that everything has settled, bind inputs and outputs.\n            attachProperties();\n\n            base.changeDetectorRef.detectChanges();\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: Render Complete`, { args: { component, props, providers, containerTag } });\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, ChangeDetectorRef, Directive, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';\nimport * as React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\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@Directive({\n    standalone: true\n})\nexport class ReactifyNgComponent\n    implements OnChanges, OnDestroy, AfterViewInit\n    {\n\n    /**\n     * The react component to be wrapped.\n     * ! Must be overridden for this wrapper to work\n     */\n    ngReactComponent: React.FC;\n\n    private _root: Root;\n\n    private _reactElement: React.ReactElement;\n\n    public _props = {} as any as React.ComponentProps<this['ngReactComponent']>;\n\n    constructor(\n        protected readonly ngContainer: ViewContainerRef,\n        protected readonly ngZone: NgZone,\n        protected readonly ngChangeDetector: ChangeDetectorRef\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 => {\n                        if (k.endsWith(\"Change\") && Object.hasOwn(this, k.replace(/Change$/, ''))) {\n                            // Detect if this should be treated as a 2-way binding. If so we'll assume\n                            // there's only ever one item in the arguments list.\n                            this._props[k] = (arg) => {\n                                (this[k] as EventEmitter<any>).emit(arg);\n                                this.ngChangeDetector.markForCheck();\n                            }\n                        }\n                        else {\n                            // We're assuming this is NOT a 2-way binding, just an event so we'll pass\n                            // everything back to the parent component in an array.\n                            this._props[k] = (...args) => {\n                                (this[k] as EventEmitter<any>).emit(args);\n                                this.ngChangeDetector.markForCheck();\n                            }\n                        }\n                    });\n                })\n\n                this._reactElement = React.createElement(this.ngReactComponent, { props: this._props as any } as any);\n                this._root.render(this._reactElement);\n            }\n            catch(err) {\n                console.error(err)\n            }\n        })\n    }\n}\n\n// We replace all React functions with Angular EventEmitters\n// thus, anything typed as a function will automatically be transformed.\nexport type ReactifyPropsTypeToAngular<T> = {\n    [K in keyof T]: T[K] extends (...args) => any ? EventEmitter<\n        Parameters<T[K]> extends [any] ? Parameters<T[K]>[0] : Parameters<T[K]>\n    > : T[K];\n};\n\n// export function ReactifyNgComponent2<T = any>(): new() => ReactifyNgComponent & ReactifyPropsTypeToAngular<T> {\n//     return ReactifyNgComponent as never;\n// };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"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        reactTemplate ??= (el) => el;\n        return React.memo((args) => {\n            const _props = {};\n            Object.assign(_props, props);\n            Object.assign(_props, args);\n\n            // Is there a better way to do this?\n            let subscriptions: 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            return reactTemplate(React.createElement(containerTag, {\n                ...attrObj,\n                ref: async (node) => {\n                    // When the node is empty, we can safely clean up the angular instance\n                    // and detach views.\n                    if (!node) {\n                        // Cleanup and dispose leftover Angular objects\n                        appRef?.detachView(componentInstance.hostView);\n                        subscriptions?.forEach(s => s?.unsubscribe());\n                        componentInstance?.destroy();\n                    }\n\n                    if (componentInstance) return;\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                    // Bootstrap in the Angular zone if it's provided\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\ntype TransformProperties<T> = {\n    [K in keyof T]: T[K] extends EventEmitter<infer U> ? React.Dispatch<React.SetStateAction<U>> : T[K];\n};\n\nexport function ReactifyStandaloneAngularComponent<T extends Type<any>>(\n    component: T,\n    providers: (Provider | EnvironmentProviders)[] = [],\n    containerTag: string = 'div',\n    debug = false\n) {\n    return React.memo((props: Partial<TransformProperties<InstanceType<T>>>) => {\n        return ReactifyStandaloneAngularElement(\n            component as any,\n            props,\n            providers,\n            containerTag,\n            debug\n        );\n    });\n}\n\nexport function ReactifyStandaloneAngularElement(\n    component: Type<any>,\n    props: any = {},\n    providers: (Provider | EnvironmentProviders)[] = [],\n    containerTag: string = 'div',\n    debug = false\n) {\n    if (debug) {\n        console.info(`[ngx-reactify/${containerTag}]: Begin render`, { args: { component, props, providers, containerTag } });\n    }\n\n    // Preserve React execution context\n    const ctx = this;\n\n    let subscriptions: Subscription[];\n    let app: ApplicationRef;\n\n    // The Angular component instance\n    let instance;\n\n    let containerNode = document.createElement(\"ngx-container\");\n\n    const attachProperties = () => {\n        subscriptions?.forEach(s => s.unsubscribe());\n        subscriptions = [];\n\n        Object.keys(props).filter((k) => {\n            // If the property is being passed in as a bound dispatchState, we'll\n            // handle it as a eventEmitter on Angular's side.\n            if (props[k].name == 'bound dispatchSetState') {\n                subscriptions.push(\n                    instance[k]?.subscribe(evt => props[k].call(ctx, evt))\n                );\n            }\n            // else 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\n    React.useEffect(() => {\n        if (!instance) return;\n\n        attachProperties();\n    });\n\n    return React.createElement(containerTag, {\n        ref: async (node: HTMLElement) => {\n\n            // If the node is removed, we need to cleanup\n            if (!node) {\n                if (debug) {\n                    console.info(`[ngx-reactify/${containerTag}]: Dispose`, { args: { component, props, providers, containerTag } });\n                }\n\n                subscriptions?.forEach(s => s?.unsubscribe());\n                app?.destroy();\n\n                return;\n            }\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: NG Bootstrap`, { args: { component, props, providers, containerTag } });\n            }\n            node.append(containerNode);\n\n            // Init an Angular application root & bootstrap it to a DOM element.\n            app = await createApplication({ providers });\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: NG App Created`, { args: { component, props, providers, containerTag } });\n            }\n\n            const base = app.bootstrap(component, containerNode);\n            instance = base.instance;\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: NG Bootstrapped`, { args: { component, props, providers, containerTag } });\n            }\n\n            // Wait for the JS to finish rendering and initing.\n            await firstValueFrom(app.isStable);\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: NG Stable`, { args: { component, props, providers, containerTag } });\n            }\n\n            // Now that everything has settled, bind inputs and outputs.\n            attachProperties();\n\n            base.changeDetectorRef.detectChanges();\n\n            if (debug) {\n                console.info(`[ngx-reactify/${containerTag}]: Render Complete`, { args: { component, props, providers, containerTag } });\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, ChangeDetectorRef, Directive, EventEmitter, NgZone, OnChanges, OnDestroy, SimpleChanges, ViewContainerRef } from '@angular/core';\nimport * as React from 'react';\nimport { createRoot, Root } from 'react-dom/client';\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@Directive({\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        protected readonly ngChangeDetector: ChangeDetectorRef\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 => {\n                        if (k.endsWith(\"Change\") && Object.hasOwn(this, k.replace(/Change$/, ''))) {\n                            // Detect if this should be treated as a 2-way binding. If so we'll assume\n                            // there's only ever one item in the arguments list.\n                            this._props[k] = (arg) => {\n                                (this[k] as EventEmitter<any>).emit(arg);\n                                this.ngChangeDetector?.markForCheck();\n                            };\n                        }\n                        else {\n                            // We're assuming this is NOT a 2-way binding, just an event so we'll pass\n                            // everything back to the parent component in an array.\n                            this._props[k] = (...args) => {\n                                (this[k] as EventEmitter<any>).emit(args);\n                                this.ngChangeDetector?.markForCheck();\n                            };\n                        }\n                    });\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// We replace all React functions with Angular EventEmitters\n// thus, anything typed as a function will automatically be transformed.\nexport type ReactifyPropsTypeToAngular<T> = {\n    [K in keyof T]: T[K] extends (...args) => any ? EventEmitter<\n        Parameters<T[K]> extends [any] ? Parameters<T[K]>[0] : Parameters<T[K]>\n    > : T[K];\n};\n\n// export function ReactifyNgComponent2<T = any>(): new() => ReactifyNgComponent & ReactifyPropsTypeToAngular<T> {\n//     return ReactifyNgComponent as never;\n// };\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-reactify",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "repository": {
     "url": "https://github.com/knackstedt/ngx-reactify"
   },

package/util/react-to-angular.d.ts

@@ -41,10 +41,10 @@ export declare class ReactifyNgComponent implements OnChanges, OnDestroy, AfterV
      * The react component to be wrapped.
      * ! Must be overridden for this wrapper to work
      */
-    ngReactComponent: React.FC;
+    ngReactComponent: React.FunctionComponent<any> | React.ComponentClass<any>;
     private _root;
     private _reactElement;
-    _props: React.ComponentProps<this["ngReactComponent"]>;
+    private _props;
     constructor(ngContainer: ViewContainerRef, ngZone: NgZone, ngChangeDetector: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes?: SimpleChanges): void;

package/util/react-to-angular.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-to-angular.d.ts","sourceRoot":"","sources":["../../../src/util/react-to-angular.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAa,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACzJ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAGa,mBACT,YAAW,SAAS,EAAE,SAAS,EAAE,aAAa;IAgB1C,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,gBAAgB;IAChD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM;IACjC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,iBAAiB;IAf1D;;;OAGG;IACH,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAE3B,OAAO,CAAC,KAAK,CAAO;IAEpB,OAAO,CAAC,aAAa,CAAqB;IAEnC,MAAM,EAAgB,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC;gBAGrD,WAAW,EAAE,gBAAgB,EAC7B,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,iBAAiB;IAI1D,QAAQ;IAMR,WAAW,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI;IAI1C,eAAe;IAIf,WAAW;IAIX,OAAO,CAAC,OAAO;yCAzCN,mBAAmB;2CAAnB,mBAAmB;CA+F/B;AAID,MAAM,MAAM,0BAA0B,CAAC,CAAC,IAAI;KACvC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,OAAA,KAAK,GAAG,GAAG,YAAY,CACxD,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC1E,GAAG,CAAC,CAAC,CAAC,CAAC;CACX,CAAC"}
+{"version":3,"file":"react-to-angular.d.ts","sourceRoot":"","sources":["../../../src/util/react-to-angular.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAa,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACzJ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAGa,mBAAoB,YAAW,SAAS,EAAE,SAAS,EAAE,aAAa;IAevE,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,gBAAgB;IAChD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM;IACjC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,EAAE,iBAAiB;IAf1D;;;OAGG;IACH,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAE3E,OAAO,CAAC,KAAK,CAAO;IAEpB,OAAO,CAAC,aAAa,CAAqB;IAE1C,OAAO,CAAC,MAAM,CAAc;gBAGL,WAAW,EAAE,gBAAgB,EAC7B,MAAM,EAAE,MAAM,EACd,gBAAgB,EAAE,iBAAiB;IAI1D,QAAQ;IAMR,WAAW,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI;IAI1C,eAAe;IAIf,WAAW;IAIX,OAAO,CAAC,OAAO;yCAvCN,mBAAmB;2CAAnB,mBAAmB;CA6F/B;AAID,MAAM,MAAM,0BAA0B,CAAC,CAAC,IAAI;KACvC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,OAAA,KAAK,GAAG,GAAG,YAAY,CACxD,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC1E,GAAG,CAAC,CAAC,CAAC,CAAC;CACX,CAAC"}