altschool / ember-cli-react Goto Github PK

There are some files that are probably not in use anymore. We can consider removing them to streamline this repo.

Some that I notice:

• .gitkeep
• .travis.yml (or circle.yml depending on which one to keep)
• .jshintrc
• .eslintrc.js if we go for Prettier #13

I'm just scoping the field, I'm somewhat of an Ember newbie, not using this project (yet), but I noticed that you say that to-link doesn't work, and it reminded me of this approach for generic links:

• put a click handler around the whole app
• on click, see if a link was clicked (here's some example code)
• if the link was one for this website, pass it to the routing mechanism

So in other words, the React component would just have to generate regular <a href="..."/> and it would be injected into Ember.

Seems that ember-views/compat/attrs got removed or moved somewhere else on 3.2 (earlier 3.x perhaps too), loading breaks in ember-cli-react/addon/utils/get-mutable-attributes.js

if (isGlimmer) {
  const { MUTABLE_CELL } = Ember.__loader.require('ember-views/compat/attrs');

with

loader.js:12 Uncaught Error: Could not find module ember-views/compat/attrs
    at missingModule (loader.js:12)
    at internalRequire (loader.js:34)
    at Object.requireModule [as require] (loader.js:88)
    at Module.callback (get-mutable-attributes.js:16)
    at Module.exports (loader.js:106)
    at Module._reify (loader.js:143)
    at Module.reify (loader.js:130)
    at Module.exports (loader.js:104)
    at Module._reify (loader.js:143)
    at Module.reify (loader.js:130)

When I do npm install ember-cli-react the latest code is not installed.

PR #26 seems to have broken tests in Ember 2.8. This is because Ember 2.8 inserts an html comment inside an empty component, which means that our test that expects no child nodes actually has a single child of type comment.

I think the solution here would be to ensure that we only pass children to the react component if there are more than 0 non comment child nodes.

With Prettier we are free from being distracted by code style during code reviews. We can also use ESLint but it still requires some decision making.

If we go with Prettier then it's good if we enforce it with lint-staged and husky as recommended here. This has the advantage of being IDE/editor -agnostic and requiring zero-setup.

Here's a outline of what we need to do to deploy Prettier:

• Remove .jshintrc
• Add Prettier as dependency and enforce it with lint-staged
• Use eslint-plugin-prettier to benefit from editor highlighting
• Make .editorconfig compatible with Prettier, if needed

@alexgb what do you think?

Can the changes on master be released to NPM?

Like above ^^ Is it possible to use ember-cli-react with .embem not .hbs extension

Is any way to get only one solution?

CircleCI is showing this banner

We need to migrate before 31 Aug 2018. Or maybe we can migrate to travis since ember-cli generates travis.yml :)
https://circleci.com/docs/2.0/migration/

It is affecting this: https://github.com/AltSchool/ember-cli-react/blob/master/addon/utils/has-block.js#L16

HAS_BLOCK is now in ember-htmlbars/node-managers/component-node-manager.

Probably we need to wrap them in try-catch so that it can fallback to the getOwnPropertyNames way.

When I'm changing the resolver to 'ember-cli-react/resolver', I'm getting error: 'Uncaught Error: Could not find module ember-htmlbars/hooks/get-value' and application is not loading. Anything I'm missing?

Not sure if this is related to #45 but a fresh install with ember 3.7.2, i'm getting this error:
Uncaught Error: Could not find module ember-views/lib/compat/attrs

Followed README say-hi example and the component is not being found. Ember is throwing error:

Uncaught Error: Assertion Failed: A helper named 'say-hi' could not be found

Any ideas what I might be missing?

With the recent changes, it's probably good to keep a changelog.

This format seems pretty good: https://keepachangelog.com/en/1.0.0/

If there are no child nodes of the component (i.e. it is not being used as a block), there is still a children array passed to the React.createElement containing a YieldWrapper component. We have a component that throws an error (beyond our control) when passed children.

Would it make sense to only create the children/YieldWrapper when childNodes.length > 0 like below? Happy to send a PR.

    let children = props.children;
    if (!children) {
      const childNodes = get(this, 'element.childNodes');
      if (childNodes.length > 0) {
        children = [
          React.createElement(YieldWrapper, {
            key: get(this, 'elementId'),
            nodes: [...childNodes]
          })
        ];
      }
    }

Hey,

I was able to create a fork of the project and make the library work with React 18.
The thing is I don't know how to run the tests/build in order to check that it passes it.

Let me know of further docs, or lets setup a meeting so I can open a PR that solves it

I'm thinking that it would be possible to build the react component(s) with webpack, and have webpack include all the dependencies.

This way, the dependencies for React are tree-shaken and work like normally in the React ecosystem, and any shared dependencies can be marked as external globals in the webpack configuration. Furthermore, it can use the hot reload capabilities of webpack and react-hot-loader.

Disadvantage would be having to run 2 processes to develop.

Does that sound reasonable or am I missing something?

This is an issue from embroider-build/ember-auto-import#50, that is caused by webpack/webpack#5627.

I don't know whether it is possible to pass webpack options from Ember app to ember-auto-import included by addon. However I think this is a sensible default we can provide to our user.

{
  devtool: 'inline-source-map'
}

I'm doing the following:

ember new myapp
ember install ember-cli-react

creating a new app/components/foo-bar/component.jsx:

import React from 'react';

export default class SomeExample extends React.Component {
  state = {
    value: null,
  }
}

But ember chokes on a Build Error (ReactFilter) when it gets to the class property definition in the component.

I'm on ember 3.10:

"devDependencies": {
    "@ember/jquery": "^0.6.0",
    "@ember/optional-features": "^0.7.0",
    "broccoli-asset-rev": "^3.0.0",
    "ember-ajax": "^5.0.0",
    "ember-auto-import": "^1.5.2",
    "ember-cli": "~3.10.0",
    "ember-cli-app-version": "^3.2.0",
    "ember-cli-babel": "^7.7.3",
    "ember-cli-dependency-checker": "^3.1.0",
    "ember-cli-eslint": "^5.1.0",
    "ember-cli-htmlbars": "^3.0.1",
    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
    "ember-cli-inject-live-reload": "^1.8.2",
    "ember-cli-react": "^1.0.2",
    "ember-cli-sri": "^2.1.1",
    "ember-cli-template-lint": "^1.0.0-beta.1",
    "ember-cli-uglify": "^2.1.0",
    "ember-data": "~3.10.0",
    "ember-export-application-global": "^2.0.0",
    "ember-load-initializers": "^2.0.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-qunit": "^4.4.1",
    "ember-resolver": "^5.0.1",
    "ember-source": "~3.10.0",
    "ember-welcome-page": "^4.0.0",
    "eslint-plugin-ember": "^6.2.0",
    "eslint-plugin-node": "^8.0.1",
    "loader.js": "^4.7.0",
    "qunit-dom": "^0.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },

The linter also raises an error in that component.jsx file. I've tried explicitly loading that plugin in the babel config in ember-cli-build.js, but to no avail.

Referring a comment in #21, looks like Ember CLI has finally dropped support for broccoli 1. It's time to move to broccoli funnel now.

My app currently is stuck on ember v3.14. When I upgrade to Ember 3.15 or later, I get the following error when running ember s:

`WARNING: Invalid Broccoli2 node detected, falling back to broccoli-builder. Broccoli error:

ReactFilter: The .read/.rebuild API is no longer supported as of Broccoli 1.0. Plugins must now derive from broccoli-plugin. https://github.com/broccolijs/broccoli/blob/master/docs/broccoli-1-0-plugin-api.md
used as input node to Analyzer (ember-auto-import-analyzer)
-- created here: --
at new Plugin (/Users/jnate/Projects/BFCore/frontend/node_modules/ember-auto-import/node_modules/broccoli-plugin/dist/index.js:47:36)
at new Analyzer (/Users/jnate/Projects/BFCore/frontend/node_modules/ember-auto-import/js/analyzer.js:72:9)
at AutoImport.analyze (/Users/jnate/Projects/BFCore/frontend/node_modules/ember-auto-import/js/auto-import.js:44:24)
at Object.toTree (/Users/jnate/Projects/BFCore/frontend/node_modules/ember-auto-import/js/index.js:31:59)
at /Users/jnate/Projects/BFCore/frontend/node_modules/ember-cli-preprocess-registry/preprocessors.js:188:26
at Array.forEach ()
at processPlugins (/Users/jnate/Projects/BFCore/frontend/node_modules/ember-cli-preprocess-registry/preprocessors.js:186:11)
at module.exports.preprocessJs (/Users/jnate/Projects/BFCore/frontend/node_modules/ember-cli-preprocess-registry/preprocessors.js:179:10)
at DefaultPackager.processJavascript (/Users/jnate/Projects/BFCore/frontend/node_modules/ember-cli/lib/broccoli/default-packager.js:503:29)
at DefaultPackager.processAppAndDependencies (/Users/jnate/Projects/BFCore/frontend/node_modules/ember-cli/lib/broccoli/default-packager.js:240:35)
-- (end) -----------------

WatcherAdapter's first argument must be an array of SourceNodeWrapper nodes`

It looks like the React addon needs updating, it's still using Broccoli v1. The dependencies of ember-cli-react v1.0.2 are:
broccoli-react "^0.8.0" ember-auto-import "^1.0.1" ember-cli-babel "^6.3.0" react "^15.5.4 || ^16.0.0" react-dom "^15.5.4 || ^16.0.0"
The versions of broccoli-react and ember-auto-import in particular are really old. Perhaps updating them will do the trick?