5.0.0-alpha

Author: Zoran Liu

apps/docs/src/app/react-components/react-dot/react-dot.component.ts

@@ -14,7 +14,9 @@ import {
 } from '@angular/core';
 import * as React from 'react';
 import { ReactWrapperComponent } from '@angular-react/core';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Component({
   selector: 'app-react-dot',
   template: `
@@ -38,7 +40,6 @@ import { ReactWrapperComponent } from '@angular-react/core';
     </ReactDot>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: ['react-renderer { display: none; }'],
 })
 export class ReactDotComponent extends ReactWrapperComponent<ReactDotProps> {
   @ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;

libs/core/src/lib/declarations/interfaces.ts

@@ -0,0 +1 @@
+export type AngularReactMetadata = unknown;

libs/core/src/lib/declarations/public-api.ts

@@ -5,3 +5,4 @@ export * from './known-keys';
 export * from './many';
 export * from './omit';
 export * from './string-map';
+export * from './interfaces';

libs/core/src/lib/decorators/angular-react.ts

@@ -0,0 +1,19 @@
+import { Type, ɵNG_COMP_DEF, ɵComponentDef } from '@angular/core'
+import { AngularReactMetadata } from '../declarations/interfaces';
+import { setAngularReactMetadata } from '../utils/angular-react/metadata';
+
+export function AngularReact(metadata?: AngularReactMetadata) {
+  return <T>(componentType: Type<T>) => {
+    Promise.resolve().then(() => {
+      const componentDef: ɵComponentDef<T> = componentType[ɵNG_COMP_DEF];
+
+      if (componentDef === undefined) {
+        throw new Error('Ivy is not enabled.');
+      }
+
+      setAngularReactMetadata(componentDef, metadata ?? {});
+    });
+
+    return componentType as any;
+  }
+}

libs/core/src/lib/decorators/index.ts

@@ -0,0 +1 @@
+export { AngularReact } from './angular-react';

libs/core/src/lib/renderer/renderer.ts

@@ -9,6 +9,7 @@ import { ReactContent } from './react-content';
 import { isReactNode, ReactNode } from './react-node';
 import { registerElement } from './registry';
 import './geteventlisteners';
+import { isAngularReactComponent } from '../utils/angular-react/metadata';
 
 const DEBUG = false;
 
@@ -41,7 +42,7 @@ export class AngularReactRendererFactory extends ɵDomRendererFactory2 {
   }
 
   createRenderer(element: any, type: RendererType2 | null): Renderer2 {
-    if (typeof type.styles?.[0] === 'string' && type.styles[0].startsWith('react-renderer')) {
+    if (type.styles?.[0] === 'react-renderer' || isAngularReactComponent(type)) {
       return this.defaultReactRenderer;
     }
 

libs/core/src/lib/utils/angular-react/metadata.ts

@@ -0,0 +1,35 @@
+import { AngularReactMetadata } from '../../declarations/interfaces';
+import { RendererType2 } from '@angular/core';
+
+const KEY = 'angularReact';
+
+export const setAngularReactMetadata = (
+  componentDef: {
+    data: {
+      [kind: string]: any;
+    };
+  },
+  metadata: AngularReactMetadata
+): void => {
+  if (componentDef.data) {
+    componentDef.data[KEY] = metadata;
+  } else {
+    componentDef.data = {
+      [KEY]: metadata
+    }
+  }
+};
+
+export const getAngularReactMetadata = (
+  type: {
+    data: {
+      [kind: string]: any;
+    };
+  }
+): AngularReactMetadata => {
+  return type?.data?.[KEY] as AngularReactMetadata;
+};
+
+export const isAngularReactComponent = (type: RendererType2 | null): boolean => {
+  return type?.data?.[KEY] != null;
+};

libs/core/src/public-api.ts

@@ -15,3 +15,4 @@ export {
   InputRendererOptions,
   RenderPropOptions,
 } from './lib/components/render-props';
+export * from './lib/decorators/index';

libs/fabric/lib/components/breadcrumb/breadcrumb.component.ts

@@ -14,7 +14,9 @@ import {
 } from '@angular/core';
 import { IBreadcrumbItem, IBreadcrumbProps } from '@fluentui/react/lib/Breadcrumb';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabBreadcrumbComponent')
 @Component({
   selector: 'fab-breadcrumb',
@@ -40,7 +42,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
     >
     </Breadcrumb>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabBreadcrumbComponent extends ReactWrapperComponent<IBreadcrumbProps> implements OnInit {

libs/fabric/lib/components/button/action-button.component.ts

@@ -12,7 +12,9 @@ import {
 } from '@angular/core';
 import { FabBaseButtonComponent } from './base-button.component';
 import { Styled } from '@angular-react/fabric/lib/utils';
+import { AngularReact } from '@angular-react/core';
 
+@AngularReact()
 @Styled('FabActionButtonComponent')
 @Component({
   selector: 'fab-action-button',
@@ -65,7 +67,6 @@ import { Styled } from '@angular-react/fabric/lib/utils';
       <ReactContent><ng-content></ng-content></ReactContent>
     </ActionButton>
   `,
-  styles: ['react-renderer { display: none; }'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FabActionButtonComponent extends FabBaseButtonComponent {