ngx-reactify 0.0.2 → 0.1.0

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

@@ -1,18 +1,143 @@
-import { Type, ApplicationRef, Injector, NgZone } from '@angular/core';
+import { Type, ApplicationRef, Injector, NgZone, Provider, EnvironmentProviders } from '@angular/core';
 import * as React from 'react';
 /**
- * Wrap an angular component inside of a React memo object.
+ * Wrap an Angular component inside of a React memo object.
  * Will attempt to bind @Input and @Output properties if provided,
  * and will bind the react arguments directly as @Input properties.
  *
+ * Usage: An Angular top-level application with a ReactifyNgComponent react implementation
+ * that needs to embed Angular components as children of the react-wrapped component.
+ *
+ * This is replaced by `WrapAngularComponentInReact`.
+ * @deprecated
+ */
+export declare const ReactifyAngularComponent: ({ component, appRef, injector, ngZone, staticInputs, staticOutputs, preSiblings, postSiblings, additionalChildren, rootElementName, containerElementName }: {
+    component: Type<any>;
+    appRef: Omit<ApplicationRef, '_runningTick'>;
+    injector: Injector;
+    ngZone: NgZone;
+    staticInputs?: {
+        [key: string]: any;
+    };
+    staticOutputs?: {
+        [key: string]: Function;
+    };
+    preSiblings?: React.ReactNode[];
+    postSiblings?: React.ReactNode[];
+    additionalChildren?: React.ReactNode[];
+    rootElementName?: Parameters<typeof React.createElement>[0];
+    containerElementName?: string;
+}) => React.NamedExoticComponent<object>;
+/**
+ * Do not use this.
+ * @hidden
+ * @experimental
+ */
+export declare const ng2ReactProps: (obj?: {}) => {};
+/**
+ * This method will create a React component that
+ * wraps an Angular component.
+ * @returns React.NamedExoticComponent
+ *
+ * @hidden
+ * @experimental
+ */
+export declare function WrapAngularComponentInReact({ component, ngZone, appRef, injector, props, containerTag, reactTemplate, projectableNodes }: {
+    /**
+     * Angular Component to be rendered within React
+     */
+    component: Type<any>;
+    /**
+     * Angular Application Reference. Used for bootstrapping
+     * and change detection hierarchy.
+     */
+    appRef: Omit<ApplicationRef, '_runningTick'>;
+    /**
+     * Instance of NgZone class.
+     * Very important to prevent Zone.js event performance issues.
+     * Do not set if running Zoneless CD.
+     */
+    ngZone?: NgZone;
+    /**
+     * Static properties to be passed into the Angular instance.
+     * Automatically generates event proxies for Angular EventEmitters.
+     */
+    props?: Record<string, any>;
+    /**
+     * Local Element Injector provided to the Angular object
+     */
+    injector?: Injector;
+    /**
+     * HTML Tag for the created DOM wrapper. Defaults to `div`.
+     */
+    containerTag?: string;
+    /**
+     * React Function template
+     */
+    reactTemplate?: (el: React.ReactElement) => React.ReactElement;
+    /**
+     * Nodes to be passed to the `ng-content` of the child Angular component.
+     */
+    projectableNodes?: Node[][];
+}): React.NamedExoticComponent<object>;
+/**
+ * This method will automatically wrap an Angular
+ * Component or Directive into a React object.
+ * @Outputs (EventEmitters) will be automatically
+ * linked into the input properties along with
+ * all of the @Inputs.
+ * @returns React.NamedExoticComponent
  * @experimental
- * @param componentClass Angular component
- * @param envInjector    An `EnvironmentInjector` instance to be used for the component
- * @param injector       An `ElementInjector` instance
- * @param _inputs
- * @param _outputs
- * @returns
  */
+export declare const AutoWrapAngularObject: ({ component, appRef, ngZone, instance, injector, containerTag, reactTemplate, }: {
+    /**
+     * Angular Component to be rendered within React
+     */
+    component: Type<any>;
+    /**
+     * Angular Application Reference. Used for bootstrapping
+     * and change detection hierarchy.
+     */
+    appRef: Omit<ApplicationRef, '_runningTick'>;
+    /**
+     * Instance of NgZone class.
+     * Very important to prevent Zone.js event performance issues.
+     * Do not set if running Zoneless CD.
+     */
+    ngZone?: NgZone;
+    /**
+     * Static properties to be passed into the Angular instance.
+     * Automatically generates event proxies for Angular EventEmitters.
+     */
+    props?: Record<string, any>;
+    /**
+     * Local Element Injector provided to the Angular object
+     */
+    injector?: Injector;
+    /**
+     * HTML Tag for the created DOM wrapper. Defaults to `div`.
+     */
+    containerTag?: string;
+    /**
+     * React Function template
+     */
+    reactTemplate?: (el: React.ReactElement) => React.ReactElement;
+    /**
+     * Nodes to be passed to the `ng-content` of the child Angular component.
+     */
+    projectableNodes?: Node[][];
+} & {
+    /**
+     * Angular Component/Directive instance that will have properties bound to the created
+     */
+    instance?: InstanceType<Type<any>> | Record<string, any>;
+}) => React.NamedExoticComponent<object>;
+/**
+ * Bootstrap an Angular component with `createApplication` and export it under a
+ * react Element.
+ * Usage: React top-level application embedding an Angular component.
+ */
+export declare function ReactifyStandaloneAngularComponent(component: Type<any>, props?: any, providers?: (Provider | EnvironmentProviders)[], containerTag?: string): React.DOMElement<React.DOMAttributes<Element>, Element>;
 export declare const ReactifyReactComponent: ({ component, appRef, injector, ngZone, staticInputs, staticOutputs, preSiblings, postSiblings, additionalChildren, rootElementName, containerElementName }: {
     component: Type<any>;
     appRef: Omit<ApplicationRef, '_runningTick'>;
@@ -30,5 +155,5 @@ export declare const ReactifyReactComponent: ({ component, appRef, injector, ngZ
     rootElementName?: Parameters<typeof React.createElement>[0];
     containerElementName?: string;
 }) => React.NamedExoticComponent<object>;
-export declare const ReactifyAngularComponent2: (component: Type<any>, props: any) => React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+export declare const ReactifyAngularComponent3: typeof WrapAngularComponentInReact;
 //# sourceMappingURL=angular-to-react.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"angular-to-react.d.ts","sourceRoot":"","sources":["../../../src/util/angular-to-react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAiC,MAAM,eAAe,CAAC;AAEtG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,sBAAsB;eAapB,KAAK,GAAG,CAAC;YACZ,KAAK,cAAc,EAAE,cAAc,CAAC;cAClC,QAAQ;YACV,MAAM;;;;;;;kBAGA,MAAM,SAAS,EAAE;mBAChB,MAAM,SAAS,EAAE;yBACX,MAAM,SAAS,EAAE;sBACpB,WAAW,OAAO,MAAM,aAAa,CAAC,CAAC,CAAC,CAAC;2BACpC,MAAM;wCA6E/B,CAAC;AAGH,eAAO,MAAM,yBAAyB,cACvB,KAAK,GAAG,CAAC,SACb,GAAG,mFA0Cb,CAAA"}
+{"version":3,"file":"angular-to-react.d.ts","sourceRoot":"","sources":["../../../src/util/angular-to-react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAiC,QAAQ,EAAE,oBAAoB,EAAgB,MAAM,eAAe,CAAC;AAEpJ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;GAUG;AACH,eAAO,MAAM,wBAAwB;eAatB,KAAK,GAAG,CAAC;YACZ,KAAK,cAAc,EAAE,cAAc,CAAC;cAClC,QAAQ;YACV,MAAM;;;;;;;kBAGA,MAAM,SAAS,EAAE;mBAChB,MAAM,SAAS,EAAE;yBACX,MAAM,SAAS,EAAE;sBACpB,WAAW,OAAO,MAAM,aAAa,CAAC,CAAC,CAAC,CAAC;2BACpC,MAAM;wCAkG/B,CAAC;AAGH;;;;GAIG;AACH,eAAO,MAAM,aAAa,kBAezB,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,EACxC,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,aAAa,EACb,gBAAgB,EACnB,EAAE;IACC;;OAEG;IACH,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IACrB;;;OAGG;IACH,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;IAC7C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IAC/D;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,CAAC;CAC/B,sCAiFA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB;IAhI9B;;OAEG;eACQ,KAAK,GAAG,CAAC;IACpB;;;OAGG;YACK,KAAK,cAAc,EAAE,cAAc,CAAC;IAC5C;;;;OAIG;aACM,MAAM;IACf;;;OAGG;YACK,OAAO,MAAM,EAAE,GAAG,CAAC;IAC3B;;OAEG;eACQ,QAAQ;IACnB;;OAEG;mBACY,MAAM;IACrB;;OAEG;yBACkB,MAAM,YAAY,KAAK,MAAM,YAAY;IAC9D;;OAEG;uBACgB,IAAI,EAAE,EAAE;;IAsG3B;;OAEG;eACQ,aAAa,KAAK,GAAG,CAAC,CAAC,GAAG,OAAO,MAAM,EAAE,GAAG,CAAC;wCAc3D,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,kCAAkC,CAC9C,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,EACpB,KAAK,GAAE,GAAQ,EACf,SAAS,GAAE,CAAC,QAAQ,GAAG,oBAAoB,CAAC,EAAO,EACnD,YAAY,GAAE,MAAc,2DAiD/B;AAKD,eAAO,MAAM,sBAAsB;eAlXpB,KAAK,GAAG,CAAC;YACZ,KAAK,cAAc,EAAE,cAAc,CAAC;cAClC,QAAQ;YACV,MAAM;;;;;;;kBAGA,MAAM,SAAS,EAAE;mBAChB,MAAM,SAAS,EAAE;yBACX,MAAM,SAAS,EAAE;sBACpB,WAAW,OAAO,MAAM,aAAa,CAAC,CAAC,CAAC,CAAC;2BACpC,MAAM;wCAwW6B,CAAC;AAC/D,eAAO,MAAM,yBAAyB,oCAA8B,CAAC"}

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

@@ -2,22 +2,48 @@ import { AfterViewInit, NgZone, OnChanges, OnDestroy, SimpleChanges, ViewContain
 import * as React from 'react';
 import * as i0 from "@angular/core";
 /**
- * Extend this component to automatically generate
- * bindings to a React component.
+ * This component can be used to automatically wrap a React
+ * component into Angular bindings with functional change detection.
+ * All you need to provide is the @Input and @Output interface
+ * for the component in order to tell Angular which keys correspond to what.
+ *
+ * ### You _must_ override the property `ngReactComponent`.
  *
- * ! You _must_ override the property `ngReactComponent`
  * Failure to do so will result in errors
- * `override readonly ngReactComponent = ReactFlowWrappableComponent;`
+ *
+ * `override readonly ngReactComponent = SomeReactFunction;`
+ *
+ * Example:
+ *
+ * ```ts
+ *  @Component({
+ *      selector: "app-react-wrapped",
+ *      standalone: true
+ *  })
+ *  export class MyReactWrappedComponent extends ReactifyNgComponent {
+ *
+ *      @Input() data: any;
+ *      @Input() options: any;
+ *      @Input() version: any;
+ *
+ *      // Notice how we wrap the result in an array, this is important because
+ *      // React can pass multiple properties to a callback and Angular can't.
+ *      @Output() onClick = new EventEmitter<[any]>();
+ *
+ * }
+ * ```
  */
 export declare class ReactifyNgComponent implements OnChanges, OnDestroy, AfterViewInit {
-    private readonly ngContainer;
-    private readonly ngZone;
+    protected readonly ngContainer: ViewContainerRef;
+    protected readonly ngZone: NgZone;
     /**
      * The react component to be wrapped.
      * ! Must be overridden for this wrapper to work
      */
     ngReactComponent: React.FunctionComponent<any> | React.ComponentClass<any>;
     private _root;
+    private _reactElement;
+    private _props;
     constructor(ngContainer: ViewContainerRef, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(changes?: SimpleChanges): void;
@@ -25,6 +51,6 @@ export declare class ReactifyNgComponent implements OnChanges, OnDestroy, AfterV
     ngOnDestroy(): void;
     private _render;
     static ɵfac: i0.ɵɵFactoryDeclaration<ReactifyNgComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ReactifyNgComponent, "app-react-magic-wrapper", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ReactifyNgComponent, "ngx-reactify", never, {}, {}, never, never, true, never>;
 }
 //# sourceMappingURL=react-to-angular.d.ts.map

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,EAAoG,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAQ,gBAAgB,EAA4B,MAAM,eAAe,CAAC;AAC/O,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;AAI/B;;;;;;;GAOG;AACH,qBAKa,mBAAoB,YAAW,SAAS,EAAE,SAAS,EAAE,aAAa;IAWvE,OAAO,CAAC,QAAQ,CAAC,WAAW;IAC5B,OAAO,CAAC,QAAQ,CAAC,MAAM;IAV3B;;;OAGG;IACH,gBAAgB,EAAE,KAAK,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;IAE3E,OAAO,CAAC,KAAK,CAAO;gBAGC,WAAW,EAAE,gBAAgB,EAC7B,MAAM,EAAE,MAAM;IAInC,QAAQ;IAMR,WAAW,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI;IAI1C,eAAe;IAIf,WAAW;IAIX,OAAO,CAAC,OAAO;yCAlCN,mBAAmB;2CAAnB,mBAAmB;CAuE/B"}
+{"version":3,"file":"react-to-angular.d.ts","sourceRoot":"","sources":["../../../src/util/react-to-angular.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA2B,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtI,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;AAI/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBAKa,mBAAoB,YAAW,SAAS,EAAE,SAAS,EAAE,aAAa;IAevE,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,gBAAgB;IAChD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM;IAdrC;;;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;IAIrC,QAAQ;IAMR,WAAW,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI;IAI1C,eAAe;IAIf,WAAW;IAIX,OAAO,CAAC,OAAO;yCAtCN,mBAAmB;2CAAnB,mBAAmB;CA2E/B"}