Add ember-cli-addon-docs

.npmignore

@@ -19,3 +19,4 @@ testem.js
 .node_modules.ember-try/
 bower.json.ember-try
 package.json.ember-try
+/config/addon-docs.js

addon/index.js

@@ -1,52 +1 @@
-import Component from '@ember/component';
-import { get } from '@ember/object';
-import { schedule } from '@ember/runloop';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-export default function WithEmberSupport(Klass) {
-  return class extends Component {
-    constructor() {
-      super();
-
-      for (const key in Klass.prototype) {
-        this[key] = Klass.prototype[key];
-      }
-    }
-
-    _getPropsForReact() {
-      return Object.keys(this.attrs).reduce((acc, key) => {
-        const value = get(this, key);
-
-        acc[key] = value;
-
-        return acc;
-      }, {});
-    }
-
-    _mountElement() {
-      this._reactElement = ReactDOM.render(
-        <Klass {...this._getPropsForReact()} />,
-        this.element
-      );
-    }
-
-    didUpdateAttrs() {
-      schedule('render', () => {
-        this._mountElement();
-      });
-    }
-
-    didInsertElement() {
-      super.didInsertElement(...arguments);
-
-      this._mountElement();
-    }
-
-    willDestroyElement() {
-      ReactDOM.unmountComponentAtNode(this.element);
-
-      super.willDestroyElement(...arguments);
-    }
-  };
-}
+export { WithEmberSupport as default } from './with-ember-support';

addon/with-ember-support.js

@@ -0,0 +1,57 @@
+import Component from '@ember/component';
+import { get } from '@ember/object';
+import { schedule } from '@ember/runloop';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+/**
+ * @function WithEmberSupport
+ * @param {React.Component} klass The React class to "transform"
+ * @return {Ember.Component} the resulting class
+ */
+export function WithEmberSupport(Klass) {
+  return class extends Component {
+    constructor() {
+      super();
+
+      for (const key in Klass.prototype) {
+        this[key] = Klass.prototype[key];
+      }
+    }
+
+    _getPropsForReact() {
+      return Object.keys(this.attrs).reduce((acc, key) => {
+        const value = get(this, key);
+
+        acc[key] = value;
+
+        return acc;
+      }, {});
+    }
+
+    _mountElement() {
+      this._reactElement = ReactDOM.render(
+        <Klass {...this._getPropsForReact()} />,
+        this.element
+      );
+    }
+
+    didUpdateAttrs() {
+      schedule('render', () => {
+        this._mountElement();
+      });
+    }
+
+    didInsertElement() {
+      super.didInsertElement(...arguments);
+
+      this._mountElement();
+    }
+
+    willDestroyElement() {
+      ReactDOM.unmountComponentAtNode(this.element);
+
+      super.willDestroyElement(...arguments);
+    }
+  };
+}

config/addon-docs.js

@@ -0,0 +1,9 @@
+/* eslint-env node */
+'use strict';
+
+const AddonDocsConfig = require('ember-cli-addon-docs/lib/config');
+
+module.exports = class extends AddonDocsConfig {
+  // See https://ember-learn.github.io/ember-cli-addon-docs/latest/docs/deploying
+  // for details on configuration you can override here.
+};

config/deploy.js

@@ -0,0 +1,29 @@
+/* eslint-env node */
+'use strict';
+
+module.exports = function(deployTarget) {
+  let ENV = {
+    build: {}
+    // include other plugin configuration that applies to all deploy targets here
+  };
+
+  if (deployTarget === 'development') {
+    ENV.build.environment = 'development';
+    // configure other plugins for development deploy target here
+  }
+
+  if (deployTarget === 'staging') {
+    ENV.build.environment = 'production';
+    // configure other plugins for staging deploy target here
+  }
+
+  if (deployTarget === 'production') {
+    ENV.build.environment = 'production';
+    // configure other plugins for production deploy target here
+  }
+
+  // Note: if you need to build some configuration asynchronously, you can return
+  // a promise that resolves with the ENV object instead of returning the
+  // ENV object synchronously.
+  return ENV;
+};

package.json

@@ -11,7 +11,7 @@
     "doc": "doc",
     "test": "tests"
   },
-  "repository": "",
+  "repository": "https://github.com/alexlafroscia/ember-cli-react",
   "scripts": {
     "build": "ember build",
     "lint:js": "eslint ./*.js addon addon-test-support app config lib server test-support tests",
@@ -34,7 +34,13 @@
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^3.0.0",
     "ember-cli": "~3.0.2",
+    "ember-cli-addon-docs": "^0.2.4",
+    "ember-cli-addon-docs-yuidoc": "^0.1.1",
     "ember-cli-dependency-checker": "^2.0.0",
+    "ember-cli-deploy": "^1.0.2",
+    "ember-cli-deploy-build": "^1.1.1",
+    "ember-cli-deploy-git": "^1.3.2",
+    "ember-cli-deploy-git-ci": "^1.0.1",
     "ember-cli-eslint": "^4.2.1",
     "ember-cli-htmlbars-inline-precompile": "^1.0.0",
     "ember-cli-inject-live-reload": "^1.4.1",

tests/dummy/app/components/basic-component.js

@@ -1,9 +1,11 @@
+// BEGIN-SNIPPET basic-component.js
 import React from 'react';
 import WithEmberSupport from 'ember-cli-react';
 
 @WithEmberSupport
-export default class FromMixin extends React.Component {
+export default class BasicComponent extends React.Component {
   render() {
     return <h1>Hello from React</h1>;
   }
 }
+// END-SNIPPET

tests/dummy/app/docs/demo/basic-component/template.hbs

@@ -0,0 +1,8 @@
+{{#docs-demo as |demo|}}
+  {{#demo.example name='demo-basic-component.hbs'}}
+    {{basic-component}}
+  {{/demo.example}}
+
+  {{demo.snippet 'basic-component.js' label='components/basic-component.js'}}
+  {{demo.snippet 'demo-basic-component.hbs'}}
+{{/docs-demo}}

tests/dummy/app/docs/index/template.md

@@ -0,0 +1,5 @@
+# ember-cli-react
+
+Why choose one framework or another when you can just have both?
+
+{{docs/demo/basic-component}}

tests/dummy/app/docs/template.hbs

@@ -0,0 +1,13 @@
+{{#docs-viewer as |viewer|}}
+  {{#viewer.nav as |nav|}}
+    {{nav.item 'Introduction' 'docs.index'}}
+  {{/viewer.nav}}
+
+  {{#viewer.main}}
+    <div class="docs-container docs__center">
+      <div class="docs-section">
+        {{outlet}}
+      </div>
+    </div>
+  {{/viewer.main}}
+{{/docs-viewer}}

tests/dummy/app/router.js

@@ -6,6 +6,12 @@ const Router = EmberRouter.extend({
   rootURL: config.rootURL
 });
 
-Router.map(function() {});
+Router.map(function() {
+  this.route('docs', function() {
+    this.route('api', function() {
+      this.route('item', { path: '/*path' });
+    });
+  });
+});
 
 export default Router;

tests/dummy/app/routes/index.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  beforeModel() {
+    this.replaceWith('docs');
+  }
+});

tests/dummy/app/templates/application.hbs

@@ -1,13 +1 @@
-<h2 id="title">Hello from Ember</h2>
-
-<button {{action (mut showReactComponent) true}}>
-  Show react component
-</button>
-
-<button {{action (mut showReactComponent) false}}>
-  Hide react component
-</button>
-
-{{#if showReactComponent}}
-  {{from-mixin}}
-{{/if}}
+{{outlet}}

tests/dummy/config/environment.js

@@ -44,6 +44,8 @@ module.exports = function(environment) {
   }
 
   if (environment === 'production') {
+    // Allow ember-cli-addon-docs to update the rootURL in compiled assets
+    ENV.rootURL = 'ADDON_DOCS_ROOT_URL';
     // here you can enable a production-specific feature
   }