From 5eab288eb2e5a63b2d61d5adaa89d833417c71dd Mon Sep 17 00:00:00 2001 From: Andrea Giannoni Date: Fri, 23 Apr 2021 14:50:24 +0200 Subject: [PATCH 1/5] small fixes for injection --- index.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/index.tsx b/index.tsx index f4067d9..761c215 100644 --- a/index.tsx +++ b/index.tsx @@ -1,7 +1,7 @@ import * as angular from 'angular' import kebabCase = require('lodash.kebabcase') -import { $injector as defaultInjector } from 'ngimport' import * as React from 'react' +import { $injector as defaultInjector } from 'ngimport' interface Scope extends angular.IScope { props: Props @@ -45,7 +45,12 @@ export function angular2react( didInitialCompile: false } + getInjector() { + return $injector || angular.element(document.querySelectorAll('[ng-app]')[0]).injector(); + } + componentWillMount() { + const $injector = this.getInjector(); this.setState({ scope: Object.assign($injector.get('$rootScope').$new(true), { props: writable(this.props) }) }) @@ -64,10 +69,15 @@ export function angular2react( // called only once to set up DOM, after componentWillMount render() { - const bindings: {[key: string]: string} = {} + const bindings: { [key: string]: string } = {} if (component.bindings) { for (const binding in component.bindings) { - bindings[kebabCase(binding)] = `props.${binding}` + if (component.bindings[binding].includes('@')) { + // @ts-ignore + bindings[kebabCase(binding)] = this.props[binding]; + } else { + bindings[kebabCase(binding)] = `props.${binding}`; + } } } return React.createElement(kebabCase(componentName), @@ -90,6 +100,7 @@ export function angular2react( return } + const $injector = this.getInjector(); $injector.get('$compile')(element)(this.state.scope) this.digest() this.setState({ didInitialCompile: true }) From c664c9be11e25b32e29d26a0008339e1b3ddd965 Mon Sep 17 00:00:00 2001 From: Andrea Giannoni Date: Fri, 23 Apr 2021 14:50:50 +0200 Subject: [PATCH 2/5] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 85aae95..cbb236f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular2react", - "version": "3.0.2", + "version": "5.1.0", "description": "One line of code to turn any Angular 1 Component into a React Component", "main": "index.js", "main:esnext": "index.es2015.js", From 9092b5b4ad5d04f672398574423990f575beae4e Mon Sep 17 00:00:00 2001 From: Alessandro Pagiaro Date: Wed, 9 Jun 2021 16:50:45 +0200 Subject: [PATCH 3/5] Update to use latest method introduced in React 17 --- index.tsx | 32 ++++++++++++++------------------ 1 file changed, 14 insertions(+), 18 deletions(-) diff --git a/index.tsx b/index.tsx index 761c215..e12d67a 100644 --- a/index.tsx +++ b/index.tsx @@ -39,23 +39,17 @@ export function angular2react( $injector = defaultInjector ): React.ComponentClass { - return class extends React.Component> { + return class Component extends React.Component> { state: State = { - didInitialCompile: false + didInitialCompile: false, + scope: Object.assign(this.getInjector().get('$rootScope').$new(true), { props: writable(this.props) }), } getInjector() { return $injector || angular.element(document.querySelectorAll('[ng-app]')[0]).injector(); } - componentWillMount() { - const $injector = this.getInjector(); - this.setState({ - scope: Object.assign($injector.get('$rootScope').$new(true), { props: writable(this.props) }) - }) - } - componentWillUnmount() { if (!this.state.scope) { return @@ -87,12 +81,14 @@ export function angular2react( // makes angular aware of changed props // if we're not inside a digest cycle, kicks off a digest cycle before setting. - componentWillReceiveProps(props: Props) { - if (!this.state.scope) { - return + static getDerivedStateFromProps(props: Props, state: State) { + if (!state.scope) { + return null } - this.state.scope.props = writable(props) - this.digest() + state.scope.props = writable(props) + Component.digest(state.scope) + + return {...state}; } private compile(element: HTMLElement) { @@ -102,15 +98,15 @@ export function angular2react( const $injector = this.getInjector(); $injector.get('$compile')(element)(this.state.scope) - this.digest() + Component.digest(this.state.scope) this.setState({ didInitialCompile: true }) } - private digest() { - if (!this.state.scope) { + static digest(scope: Scope) { + if (!scope) { return } - try { this.state.scope.$digest() } catch (e) { } + try {scope.$digest() } catch (e) { } } } From b68d7fad727e2da2f11820c2145e19b95226a1e5 Mon Sep 17 00:00:00 2001 From: Alessandro Pagiaro Date: Wed, 9 Jun 2021 16:52:40 +0200 Subject: [PATCH 4/5] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cbb236f..256a1ed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular2react", - "version": "5.1.0", + "version": "6.0.0", "description": "One line of code to turn any Angular 1 Component into a React Component", "main": "index.js", "main:esnext": "index.es2015.js", From 2638a87321f2e14526614b389a5a21d24d2a68b0 Mon Sep 17 00:00:00 2001 From: Alessandro Pagiaro Date: Wed, 9 Jun 2021 16:55:34 +0200 Subject: [PATCH 5/5] Update peerDependencies --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 256a1ed..450d3af 100644 --- a/package.json +++ b/package.json @@ -69,10 +69,10 @@ }, "peerDependencies": { "@types/angular": ">=1.5.0", - "@types/react": ">=15.0.0", - "@types/react-dom": ">=15.0.0", + "@types/react": ">=17.0.0", + "@types/react-dom": ">=17.0.0", "angular": ">=1.5.0", - "react": ">=15.0.0", - "react-dom": ">=15.0.0" + "react": ">=17.0.0", + "react-dom": ">=17.0.0" } }