coatue-oss / react2angular Goto Github PK

Version 1.6.22 of @types/angular just got published.

This version is covered by your current version range and after updating it in your project the build failed.

@types/angular is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 1.6.26 of @types/angular just got published.

This version is covered by your current version range and after updating it in your project the build failed.

@types/angular is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 15.5.1 of @types/react-dom just got published.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react-dom is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Hi there, The controller that's being return doesn't have the $inject definition so in strict di angular fails to bootstrap.

The class extends NgComponent should provide the static $inject with $element.

I'll send you a PR too if you want to.

thanks

I've to wrap a react component inside angular, and I'm done with basic integration. But, I'd like to know if it is possible to get the data changed inside the react component back into my angular code.
While going through the angualr2react, this was mentioned as a caveat.
I'd need to create a React component that will pass the data back to the parent angular code. Please let me know if that will be possible Thanks in advance.

Hi, guys!

First of all, thank you for your time and efforts on react2angular. Right now I'm having an issue between the types used on my project and react2angular. I'm getting the following error:

[info] [compile:typescript] ERROR in /Users/marcelodiniz/dev/stackvista/stackstate/stackstate-ui/node_modules/react2angular/node_modules/@types/angular/jqlite.d.ts
[info] [compile:typescript] (803,11): error TS2300: Duplicate identifier 'cssPropertySetter'.
[info] [compile:typescript]
[info] [compile:typescript] ERROR in /Users/marcelodiniz/dev/stackvista/stackstate/stackstate-ui/node_modules/@types/jquery/index.d.ts
[info] [compile:typescript] (705,6): error TS2300: Duplicate identifier 'cssPropertySetter'.

Could you help me with that?

I'm using it with:
typescript: 2.3.2,
webpack: 2.5.1,
ts-loader: 2.0.3,
angular: 1.6.4,
@types/angular: 1.6.27,
jquery: 2.1.1
@types/jquery: "2.0.47",
react: 15.6.1,
react-dom: 15.6.1

Version 15.0.31 of @types/react just got published.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I'm a big fan of this project. It is helping us convert an old Angular project into React little by little. We don't update packages very often (company policy), so when we do, we rely on change logs and release notes to know what to watch for. We had been using version 1.1.3 of react2angular, but the latest is 4.0.2. If you're following semver, I'd suspect there is the possibility of a lot of breaking changes between those two versions, but without a changelog I have no way of knowing what the changes are.

Would it be possible to have a CHANGELOG file and/or use the Releases feature of GitHub to keep track of changes?

In my project I'm using my own typings file for angular (Legacy, don't ask..).
The problem is that when I use this (great) package, the ts compiler takes the package's typings file instead of mine.
The question is, is the @types/angular dependency necessary (and not under devDependencies)?

Thanks!

i'm interested in this project but im concerned with bundling react into my angular app.

do you know at all what the footprint of this is? would it work with a smaller library like preact the same?

Thanks for the great work!

If I pass functions to the component I need to wrap them with $scope.$apply, it would be nice if the module would check propTypes and wrap the right props with $scope.$apply

Is it possible to keep the React components in its own npm package to be included in the AngularJS project as a dependency? This way we wouldn't have to include React directly in the AngularJS project and wouldn't have to mix old code with new.

Hello.
Is it possible somehow to add Redux Store configuration, to be able to use this library with Redux?
Thank you.

This actually works with older versions of Angular... we've been running this for some time now on Angular 1.5.11. And until yesterday everything was fine until we tried to add ngSanitize.
For some reason, ngSanitize tries to bind against the react2angular version of angular... and so it doesn't work (because it's not installed)

Using AngularJS 1.4 with the angular-component polyfill only the first prop in the array of bindings is available. All the rest are undefined until you change a binding and you run a new digest cycle.

Here is an example where you can reproduce the issue -> https://stackblitz.com/edit/react2angular-binding-issue

Currently React and React-Dom are set as dependencies in the package.json for ^15.6.1, which does not fit the standard model for React libraries, where they list them as peerDeps instead and extend the acceptable range to >=15 (or higher for the minimum). This causes npm to download another version of React and causes a variety of issues. Considering that any React project already has their own version declared, this should make the library much more flexible.

Is there any way to using the component like this?

<totalizer amount="{{var_of_scope}}" />

See #11:

1. Mark the component as transclude: true
2. Compile transcluded children in the component's scope
3. Convert the compiled elements to JSX, and pass them to the component as children

For step 2, the $transclude service could be a good way to go.

Step 3 is where things get hairy. Ideally we would pass the DOM provided by $transclude through something like htmltojsx and into the React component. Alternatively we could pass in transcluded DOM via this.props or this.context, and make rendering it the consumer's responsibility.

Hi, I am in the research phase of angularjs migrations and I have found react2angular to be the clearest way forward to incrementally migrate our angularjs 1.6 app to react. I was wondering if anyone has any thoughts or knowledge of preact with respect to its "drop in replacement"-ness for react in this library.

That is, I would like to use preact, but if this great library will require react, then I will use react until the migration is complete and then think about moving to preact eventually.

Thanks.

I'm in the need to migrate a old angular 1.4 directive to a React component.
Most of the code of this directive was coded as part of the link function and are callbacks to angular events wrapped inside $scope.$on

How can I listen to that events from the react component? Is the $scope "injectable" in some way ?

Hi there, I've started using react2angular and I like it :)
But package.json dependencies are quite inconsistent, first, there are @types in dependencies which are in conflict with my project's typings. I guess they're supposed to be in devDeps. Also angular version is bound strictly to 1.6.2 and higher, but I use 1.5.9 in project, maybe you could put something like ">=1.5.0"

"dependencies": {
    "@types/angular": "^1.6.7",
    "@types/lodash.frompairs": "^4.0.1",
    "@types/react": "^15.0.12",
    "@types/react-dom": "^0.14.23",
    "angular": "^1.6.2",
    "lodash.frompairs": "^4.0.1",
    "ngcomponent": "^2.0.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }

Unfortunately, what I am observing is that if I bind ng-disabled to a property that's lazy loaded by an AJAX request, the form stays disabled.

Here's the mapStateToThis:

mapStateToThis({ $ngRedux, state, proceed, me }) {
    //  $onInit dispatches an AJAX request to populate these values.
    //  on component init, the component is readonly. 
    //  After the AJAX request completes, the component is NOT readonly.
    // However, the underlying angular form is invalid.
    // That is, the form uses the initial readonly value but does not update these values when the redux state changes.
    const readonly = userCompletionReadonlyFields(state);
    const user = userCompletionProfile(state);
    // outputs `undefined` followed by `false`.
    console.log(this.angularState.form.$valid)
    return {
      user,
      readonly,
   }
}

Here's the template:

                <input name="email"
                       ng-model="$ctrl.user.email"
                       ng-disabled='!!$ctrl.readonly.email'
                />

Currently there are two dependencies for @types definitions that should be in the devDependencies instead:

"dependencies": {
    "@types/angular": ">=1.5",
    "@types/lodash.frompairs": "^4.0.3",
    "angular": ">=1.5",
    "lodash.frompairs": "^4.0.1",
    "ngcomponent": "^4.1.0"
  }

The reason this is an issue is because if you are already using @types/angular (or @types/lodash.frompairs for that matter) in your project, after adding react2angular the two type definitions will clash, resulting in the following error:

Failed to compile.

[at-loader] ./node_modules/react2angular/node_modules/@types/angular/jqlite.d.ts:29:5 
    TS2375: Duplicate number index signature.

I therefore propose moving those two type definitions to dev dependencies instead of regular dependencies. Thoughts?

I use Webpack and React Hot Loader, but I'm having trouble figuring out how to integrate this solution with it. If I wrap the AngularJS loader component with AppContainer, it doesn't refresh the browser when AngularJS files update because it tries to rerender the component instead of reloading the page and allowing Angular to re-run all its global angular.module calls.

Without wrapping the AngularJS files with AppContainer, they refresh the page as I'd expect; although, the problem is, so do all my React components setup as AngularJS Components.

Is there some way to get Hot Module Reloading working with only the React components inside of AngularJS?

Hi,
I have a list defined in an angular directive with a react component embedded using react2angular. When I update the list, the data binding doesn't seem to propagate down to the react component. Any ideas?

https://react2angular-binding-issue-ey652s.stackblitz.io

First of all, thanks so much for the library. Very good work!

I am creating a react component that doesn't require any bindings from the angular app. So I just omit the propTypes in the react component and in the react2angular function. But in this way the react component cannot be rendered. Is this a bug or a desired behavior?

Example:

// React component
import { Component } from 'react'

class MyComponent extends Component {
  render() {
    return <div>foo</div>
  }
}

// angular
angular
  .module('myModule', [])
  .component('myComponent', react2angular(MyComponent))

The react component is not rendered unless I add a non-empty in react2angular:

// I don't need foo propType but I have to add something in the second argument
// to make react2angular work
angular
  .module('myModule', [])
  .component('myComponent', react2angular(MyComponent, 'foo'))

Hello,
Container form component in angularjs and I need to migrate one by one.
for example.
payment page contains:

• contact details form.
• credit card form.
• guest form.

so the point now I migrated guest form and validation works fine. but I need to map the validation on click the payment button which inside the parent component.

P.S using formsy-react

there any way to map between two validation angular and react on submit?

Hey this is a great tool and we're using this to slowly migrate from AngularJS to React.

When I use react2angular I love how it inspects propTypes to determine the input bindings so I don't have to repeat myself in the function call. However this breaks if I have injections, because I notice that injected props are undefined because I specify them in my propTypes because eslint fails otherwise. I think changing this line:

render(<Class {...this.injectedProps} {...this.props} />, this.$element[0])

to this

render(<Class {...this.props} {...this.injectedProps}/>, this.$element[0])

would fix this. it would allow me to initialize my react component with injected services without needing to specify injected props.

react2angular(MyHeader, null, ['authentication', '$state', '$stateParams'])

What's the best/ recommend way to use a angular factory inside a react component?
Like, how can I import/inject inside the component? Do I need a scope apply after calling the factory function?

It seems latest version published to NPM shows below warning:

warning " > [email protected]" has unmet peer dependency "@types/prop-types@>=15".
warning " > [email protected]" has unmet peer dependency "@types/react@>=16".
warning " > [email protected]" has unmet peer dependency "@types/react-dom@>=16".

which is due to below peerDependencies declaration in package.json

"peerDependencies": {
    "@types/prop-types": ">=15",
    "@types/react": ">=16",
    "@types/react-dom": ">=16",
    "prop-types": ">=15",
    "react": ">=15",
    "react-dom": ">=15"
}

I think for "Non Typescript Project" it's a common practice to NOT install @types/* dependencies. Can we please remove the @types/* from peerDependencies from package.json?

Great plugin! It really simplifies the process of putting React components in pre-existing AngularJS templates.

In a directive, I can render the component when scope.$watch fires so it re-renders on change. I don't see a way to do that with react2angular.

Can you be more specific on what versions of AngularJS this works with?

Right now, two build targets are produced (index.js and index.es2015.js). Could we also add a browser-compatible target?

I quickly hacked together a build using rollup without realising rollupify also already being run for the Karma tests. Could this be reused?

Please forgive my ignorance.. I am trying to just implement the most basic sample that you have in the readme. I am unsure where to place the react component. Should it be in the same file in my angular project?

hey @bcherny

would you accept allowing something like this?
react2angular(Component, null, { serviceName: 'propName'})
where serviceName is some angular service and propName is the alias i'd like to use inside the React component.

If so, I'll implement and PR it.

EDIT: given the nature of angular DI, I guess an unordered type, like a map, wouldn't work
in this case, maybe we can do:
react2angular(Component, null, ['serviceName'], {serviceName: 'propName'})
so the 4th argument is a map of aliases

styled components not initialized with IE11, was checking the following solution but I'm still facing the same issue

styled-components/styled-components#657 (comment)

We are using angular and react in our application with majority being written in angular. In one of our react components, we are using react select for the drop down. When we convert from react to angular using react2angular/ngreact/react-in-angular npm, the react-select isn't working as it should be. When clicked on the select, it opens and immediately closes. This is happening only on iPad and android. It is working fine on Desktop. Looks like the touch events are triggering twice (just an assumption). Can you please let me know if there is a possible workaround for this issue?

Either that or tsconfig.json should be amended.

I've got a React component that is used in my AngularJS app using react2angular. When I try to put AngularJS components in my HTML/JSX, they don't get turned into the angular components they represent.

class ProjectListContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <my-angular-component></my-angular-component>
    )
  }
}

// ########## ANGULAR ROUTE #############/
var angular = require('angular');
require('./project-list.less');
var uiScaffolding = require('@aver/ui-scaffolding');

module.exports = angular.module('aver.episode-workbench.projectListReact', [uiScaffolding])
.component('reactTestComponentAsPage', react2angular(ProjectListContainer, [], ['$state']))
.config(function($stateProvider) {

  var reactComponentAsPageState = {
    name: 'project-list-react',
    url: '/project-list-react',
    component: 'reactTestComponentAsPage',
  };
  $stateProvider.state(reactComponentAsPageState);
})
.name;

Is this supposed to work? I know the component is included in the source as it's part of the uiScaffolding library and I can see it in the compiled JS. Should this work?

Furthermore I tested a similar situation not using react2angular and it seems to work.

'use strict';

var angular = require('angular');
var templateUrl = require('./react-page.html');

import React from 'react';
import ReactDOM from 'react-dom';
import { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <p>FooBar: {this.props.fooBar}</p>
        <p>Baz: {this.props.baz}</p>
        <privacy-policy></privacy-policy> <<--- THIS IS AN ANGULAR COMPONENT
      </div>
    )
  }
}

module.exports = angular.module('aver.episode-workbench.reactPage', [])
.config(function($stateProvider) {

  var reactPageState = {
    name: 'reactPage',
    url: '/react-page',
    controller: 'reactPageCtrl',
    controllerAs: 'reactPageCtrl',
    templateUrl: templateUrl,
    requiresPermission: 'view_episode_workbench'
  };
  $stateProvider.state(reactPageState);
})
.component('reactTestComponent', {
    restrict: 'E',
    template: ['$element', '$attrs', function($element, $attrs) {
      console.log('template func', $attrs);
      ReactDOM.render(
        <MyComponent fooBar={'corey'} baz={'snyder'}/>,
        $element[0]
      );

    }],
    scope: {
      data: '=theData'
    },
})

.controller('reactPageCtrl', function() {
  var vm = this;

  vm.$onInit = function() {
    console.log('reactPageCtrl init');
  };

})

.name;

Assume an AngularJS 1.7 app with components and ui-router and a state configuration like this

.state('userlist', {
  url: '/users',
  component: 'users', // The component's name
  resolve: {
    list: function(UserService) {
      return UserService.list();
    }
  }
});

In AngularJS with ui-router, list can be bound to the component like so:

.component('users', {
  bindings: {
    // automatically bound to `list` on the controller
    list: '<'
  },

  controller: () => { ... },
  template: `...`,
});

I'm attempting to migrate some AngularJS components to React components. That means, my state now looks like:

.state('userlist', {
  url: '/users',
  component: 'reactUsers', // The react component's name
  resolve: {
    list: function(UserService) {
      return UserService.list();
    }
  }
});

import { Component } from 'react'
import { react2angular } from 'react2angular'
import PropTypes from 'prop-types'

class ReactUsers extends Component {
  static propTypes = {
   list: PropTypes.array,
  };
  render() {
    console.log(this.props.list)
    return null
  }
}

angular
  .module('myModule', [])
  .component('reactUsers', react2angular(ReactUsers, ['list'], ['list']))

I've tried adding a propType list and adding list in the array of the 2nd parameter and 3rd parameter to react2angular. But it isn't being injected as a prop.

Are ui-router resolve variables not yet supported or am I missing something?

Hi there, awesome project, I wanted to ask you maybe providing another way of declaring the bindings.

instead of passing them as the second argument in the definition, maybe if the propTypes are declare you could use that instead.

That way is much easier to maintain and the binding are next to the component, instead of the angular definition.

import { Component } from 'react'

class MyComponent extends Component {
  static propTypes = {
    fooBar: React.PropTypes.string.isRequired,
    baz: React.PropTypes.string.isRequired
  };

  render() {
    return <div>
      <p>FooBar: {this.props.fooBar}</p>
      <p>Baz: {this.props.baz}</p>
    </div>
  }
}

import { react2angular } from 'react2angular'

angular
  .module('myModule', [])
  .component('myComponent', react2angular(MyComponent))

That way in the library instead of doing:
bindings: fromPairs(bindingNames.map(_ => [_, '<'])),

you could do something like:
bindings: fromPairs(Object.keys(MyComponent.propTypes).map(_ => [_, '<']),

You could support both ways, propTypes being the default and if the array of bindings is declare you would use that one instead overriding propTypes.

Thanks!

I'm testing the waters with using react2angular to start migrating parts of a large Angular 1.5 app to React. It seems that while you can pass functions from a parent angular component into a react2angular component, click events don't trigger the Angular digest cycle, forcing you to manually trigger scope.$apply() if you want Angular to re-render. Any ideas on a better way to handle this with react2angular?

Parent controller:

parentControllerMethod() {
  console.log('do something in the parent');
  // set some value that shows/hides something
}

Parent template:

<my-react-component
  on-trigger="vm.parentControllerMethod"
></my-react-component>

React component:

const myReactComponent = (props) => (
  <div>
    <button onClick={() => props.onTrigger()}>Trigger Something</button>
  </div>
);

When I click the button, parentControllerMethod will be called, but the UI doesn't re-render unless I then do a scope.$apply().

Version 15.0.38 of @types/react just got published.

This version is covered by your current version range and after updating it in your project the build failed.

@types/react is a direct dependency of this project this is very likely breaking your project right now. If other packages depend on you it’s very likely also breaking them.
I recommend you give this issue a very high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Version 2.3.1 of typescript just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As typescript is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

Could you please suggest an approach to use sevices/factories inside react2angular component?
Thanks.

Are custom directives supported out of the box or is there something special that needs to be done to get them working. For instance:

class MyComponent extends React.Component {
    render(){
        return <custom-chart></custom-chart>
    }
}

When I inspect this html, it looks like it's just spitting this back out as if it were valid HTML. How do I get custom directives working in my component?

Hey, so I'm currently using react2angular and Im having problems with nested react elements. I was wondering if you supported this.

<react-select
  label="'this is a label'"
  hintText="'hintText''">

  <react-option
  value="1"
  primaryText="Option 1">
  </react-option>

  <react-option
  value="2"
  primaryText="Option 2">
  </react-option>

  <react-option
  value="3"
  primaryText="Option 3">
  </react-option>

</react-select>

So i have this react component for select, and a react component for the options, and was wondering how to nest the options in the select component.

Hey guys, we have an angular app and we're migrating to react slowly.

My question is, once I get a lot of independent react component in my angular app, how can I share redux store resources with all those components?

Thanks.

I can pass a controller function just fine into react, so that it gets notified on an event:

But if I try to pass the same function binded to the controller (so I can use this) and to a parameter:

That doesn't seem to work, browser hangs and it keeps printing:

thanks