🌅

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules
+*.d.ts
+*.js
+*.map
+!karma.conf.js

.npmignore

@@ -0,0 +1,9 @@
+.DS_Store
+circle.yml
+node_modules
+test.js
+test.d.ts
+test.map
+karma.conf.js
+logo.png
+logo.psd

LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2017 Coatue Management LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

README.md

@@ -0,0 +1,57 @@
+<img alt="Angular to React: The easiest way to embed Angular components in a React app" src="https://raw.githubusercontent.com/coatue/angular2react/master/logo.png" width="400px" />
+
+# angular2react [![Build Status](https://img.shields.io/circleci/project/coatue/angular2react.svg?branch=master&style=flat-square)](https://circleci.com/gh/coatue/angular2react) [![NPM](https://img.shields.io/npm/v/angular2react.svg?style=flat-square)](https://www.npmjs.com/package/angular2react) [![Apache2](https://img.shields.io/npm/l/angular2react.svg?style=flat-square)](https://opensource.org/licenses/Apache2)
+
+> One line of code to turn any Angular 1 Component into a React Component
+
+## Installation
+
+```sh
+npm install angular2react --save
+```
+
+## Usage
+
+### 1. Create a React component
+
+```jsx
+import { Component } from 'react'
+
+class MyComponent extends Component {
+  render() {
+    return <div>
+      <p>FooBar: {this.props.fooBar}</p>
+      <p>Baz: {this.props.baz}</p>
+    </div>
+  }
+}
+```
+
+### 2. Expose it to Angular
+
+```js
+import { angular2react } from 'angular2react'
+
+angular
+  .module('myModule', [])
+  .component('myComponent', angular2react(MyComponent, ['fooBar', 'baz']))
+```
+
+### 3. Use it in your Angular 1 code
+
+```html
+<my-component
+  foo-bar="3"
+  baz="'baz'"
+></my-component>
+```
+
+## Tests
+
+```sh
+npm test
+```
+
+## License
+
+Apache2

circle.yml

@@ -0,0 +1,3 @@
+machine:
+  node:
+    version: 6.7.0

index.tsx

@@ -0,0 +1,114 @@
+import { IScope } from 'angular'
+import { $compile, $log, $rootScope } from 'ngimport'
+import * as React from 'react'
+
+interface Scope<Props> extends IScope {
+  props: Props
+}
+
+interface State<Props> {
+  didInitialCompile: boolean
+  scope?: Scope<Props>
+}
+
+/**
+ * Wraps an Angular component in React. Returns a new React component.
+ *
+ * Usage:
+ *
+ *   ```ts
+ *   angular
+ *     .module('foo', [])
+ *     .component('bar', {...})
+ *
+ *   type Props = {
+ *     onChange(value: number): void
+ *   }
+ *
+ *   const Bar = angular2react<Props>(
+ *    '<bar on-change="props.onChange"></bar>
+ *   ')
+ *
+ *   <Bar onChange={...} />
+ *   ```
+ */
+export function angular2react<Props extends object>(template: string) {
+  return class extends React.Component<Props, State<Props>> {
+
+    state: State<Props> = {
+      didInitialCompile: false
+    }
+
+    componentWillMount() {
+      this.setState({
+        scope: Object.assign($rootScope.$new(true), { props: writable(this.props) })
+      })
+    }
+
+    componentWillUnmount() {
+      if (!this.state.scope) {
+        return
+      }
+      this.state.scope.$destroy()
+    }
+
+    shouldComponentUpdate(): boolean {
+      return false
+    }
+
+    // called only once to set up DOM, after componentWillMount
+    render() {
+      return <div ref={this.compile.bind(this)} />
+    }
+
+    // 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
+      }
+      this.state.scope.props = writable(props)
+      try { this.state.scope.$digest() } catch (e) { }
+    }
+
+    private compile(div: HTMLDivElement) {
+      if (this.state.didInitialCompile || !this.state.scope) {
+        return
+      }
+      div.innerHTML = template
+      $compile(div)(this.state.scope)
+      this.setState({ didInitialCompile: true })
+    }
+
+  }
+}
+
+/**
+ * Angular may try to bind back a value via 2-way binding, but React marks all
+ * properties on `props` as non-configurable and non-writable.
+ *
+ * If we use a `Proxy` to intercept writes to these non-writable properties,
+ * we run into an issue where the proxy throws when trying to write anyway,
+ * even if we `return false`.
+ *
+ * Instead, we use the below ad-hoc proxy to catch writes to non-writable
+ * properties in `object`, and log a helpful warning when it happens.
+ */
+function writable<T extends object>(object: T): T {
+  const _object = {} as T
+  for (const key in object) {
+    if (object.hasOwnProperty(key)) {
+      Object.defineProperty(_object, key, {
+        get() { return object[key] },
+        set(value: any) {
+          if (Object.getOwnPropertyDescriptor(object, key).writable) {
+            return object[key] = value
+          } else {
+            $log.warn(`Tried to write to non-writable property "${key}" of`, object, `. Consider using a callback instead of 2-way binding.`)
+          }
+        }
+      })
+    }
+  }
+  return _object
+}

karma.conf.js

@@ -0,0 +1,32 @@
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['source-map-support', 'browserify', 'jasmine'],
+    files: [
+      './test.js'
+    ],
+    preprocessors: {
+      '*.js': ['browserify']
+    },
+    browserify: {
+      debug: true,
+      external: ['angular', 'angular-mocks'],
+      extensions: ['.js'],
+      transform: ['rollupify']
+    },
+    reporters: ['mocha'],
+    port: 9876,
+    colors: true,
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_WARN,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    concurrency: Infinity,
+    browserConsoleLogOptions: {
+      level: 'log',
+      terminal: true
+    },
+    browserDisconnectTolerance: 30
+  })
+}

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "angular2react",
+  "version": "1.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",
+  "typings": "index.d.ts",
+  "scripts": {
+    "build": "npm run clean; tsc -d -m es2015 && mv ./index.js ./index.es2015.js && tsc -m commonjs -t es5",
+    "clean": "rm ./*.d.ts; rm ./*.map; exit 0",
+    "pretest": "npm run build",
+    "prepublish": "npm test",
+    "test": "karma start --single-run",
+    "tdd": "npm-run-all -pr watch:*",
+    "watch:ts": "tsc -w",
+    "watch:test": "karma start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/coatue/angular2react.git"
+  },
+  "keywords": [],
+  "author": "Boris Cherny <[email protected]>",
+  "license": "Apache2",
+  "bugs": {
+    "url": "https://github.com/coatue/angular2react/issues"
+  },
+  "homepage": "https://github.com/coatue/angular2react#readme",
+  "devDependencies": {
+    "@types/angular-mocks": "^1.5.9",
+    "@types/jasmine": "^2.5.44",
+    "@types/react-addons-test-utils": "^0.14.17",
+    "angular-mocks": "^1.6.2",
+    "jasmine": "^2.5.3",
+    "karma": "^1.5.0",
+    "karma-browserify": "^5.1.1",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-mocha-reporter": "^2.2.2",
+    "karma-source-map-support": "^1.2.0",
+    "npm-run-all": "^4.0.2",
+    "react-addons-test-utils": "^15.4.2",
+    "rollupify": "^0.3.9",
+    "tslint": "^4.5.1",
+    "typescript": "^2.2.1",
+    "watchify": "^3.9.0"
+  },
+  "dependencies": {
+    "@types/angular": "^1.6.9",
+    "@types/react": "^15.0.16",
+    "@types/react-dom": "^0.14.23",
+    "angular": "^1.6.3",
+    "ngimport": "^0.6.0",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  }
+}