webpacker-react 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 0b2bf95c452f63279e5f6ca108129cd39e7a9a0e
-  data.tar.gz: 17f0a6a4b80916879c8c0a400aa6e38462f4ef93
+  metadata.gz: ab20541e11a8ca3cfda69b8359711dc6ec01b878
+  data.tar.gz: 44795485fe7bdec875cdc9975bfb5c79d036dcc0
 SHA512:
-  metadata.gz: c7ef3bb80a1aa78f930deaf1c8defe431eba0d84f4329d3663ee563d51c8dd567ee2cb1da45bba9b17267011e98ccf4a221833f0217072b86ce354c8b59f7cbb
-  data.tar.gz: a5ca92600867b135ed67e4c0dae9171ea79931259ac8f6f22b0e02224eed61f5c842c670e7d2a6cbf1cabee0cb8af58ad52a9a0c2e12513c7faec3607b07b6b9
+  metadata.gz: 89a2087cf23242199f588d80139f809fb35b87a5b3abc530bd7ad2ff0aea3c08c399a3bd7bd875b5cd5b2b7d7d1e5a7a19028bee27d7066ce523e007186fd409
+  data.tar.gz: b20d46ad6d1ac3dfb130aa6c691be91738b879ec4d457fa84f25f8a40f9bee175da743d5180f1af50cfd8f3abf5a8d6801ca6931a394f26a40543be033135a10

data/.github/PULL_REQUEST_TEMPLATE

@@ -0,0 +1,9 @@
+Fixes # .
+
+Changes:
+
+Please ensure that:
+- [ ] Changelog is updated if not a minor patch
+- [ ] Ruby linting is ok: `rubocop` is all green
+- [ ] Javascript linting is ok: `cd javascript/webpacker_react-npm-module/ && yarn lint` is all green
+- [ ] [Tests](https://github.com/renchap/webpacker-react#testing) are all green

data/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+## 0.2.0 - 2017-03-20
+### Added
+- support for Turbolinks 5, Turbolinks 2.4 and PJAX. Components will be mounted and unmounted when Turbolinks-specific events occur. Also, the integration works with Turbolinks 5 cache.
+- New `WebpackerReact.setup({Component1, Component2, ...})` initialization API. The old API couldn't properly detect the components' names, thus user is required to provide the names in the configuration object's keys.
+### Removed
+- `WebpackerReact.register(Component)` has been dropped in favor of `WebpackerReact.setup({Component})`
+## 0.1.0 - 2017-02-23
+### Added
+- First released version
+- render React components from views using the `react_component` helper
+- render React components from controllers using `render react_component: 'name'` (#1 by @daninfpj)
+- basic Hot Module Remplacement (#7 by @mfazekas)
+
+[Unreleased]: https://github.com/renchap/webpacker-react/compare/v0.1.0...HEAD

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project maintainer at renchap@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/README.md

@@ -22,20 +22,16 @@ Your Rails application needs to use Webpacker and have the React integration don
 First, you need to add the webpacker-react gem to your Rails app Gemfile:
 
 ```ruby
-gem 'webpacker-react', "~>0.1.0"
+gem 'webpacker-react', "~> 0.1.0"
 ```
 
-Once done, run `bundler` to install the gem.
+Once done, run `bundle` to install the gem.
 
-Then you need to update your `vendor/package.json` file to include the `webpacker-react` NPM module:
-```json
-  "dependencies": {
-    "..."
-    "webpacker-react": "~>0.1.0"
-  },
-```
+Then you need to update your `package.json` file to include the `webpacker-react` NPM module:
+
+`./bin/yarn add webpacker-react`
 
-Finally, run `./bin/yarn` to install the module. You are now all set!
+You are now all set!
 
 ### Note about versions
 
@@ -50,9 +46,33 @@ In your pack file (`app/javascript/packs/*.js`), import your components as well
 import Hello from 'components/hello'
 import WebpackerReact from 'webpacker-react'
 
-WebpackerReact.register(Hello)
+WebpackerReact.setup({Hello}) // ES6 shorthand for {Hello: Hello}
 ```
 
+### With Turbolinks
+
+You have to make sure Turbolinks is loaded before calling `WebpackerReact.initialize()`.
+
+For example:
+
+```javascript
+import Hello from 'components/hello'
+import WebpackerReact from 'webpacker-react'
+import Turbolinks from 'turbolinks'
+
+Turbolinks.start()
+
+WebpackerReact.setup({Hello})
+```
+
+You may also load turbolinks in regular asset pipeline `application.js`:
+
+```javascript
+//= require "turbolinks"
+```
+
+In that case, make sure your packs are loaded *after* `application.js`
+
 Now you can render React components from your views or your controllers.
 
 ### Rendering from a view
@@ -101,7 +121,7 @@ significantly different than the standard Webpacker config:
 var configureHotModuleReplacement = require('webpacker-react/configure-hot-module-replacement')
 
 var sharedConfig = require('./shared.js')
-sharedConfig = configureHotModuleReplacement(sharedConfig)
+sharedConfig.config = configureHotModuleReplacement(sharedConfig.config)
 
 module.exports = merge(sharedConfig, ...)
 ```
@@ -160,7 +180,7 @@ and start `webpack-dev-server` in hot replacement mode:
     import SomeRootReactComponent from 'components/some-root-react-component'
     import WebpackerReact from 'webpacker-react/hmr'
 
-    WebpackerReact.register(SomeRootReactComponent)
+    WebpackerReact.setup({SomeRootReactComponent})
     if (module.hot)
       module.hot.accept('components/some-root-react-component', () =>
         WebpackerReact.renderOnHMR(SomeRootReactComponent) )
@@ -179,12 +199,15 @@ gem 'webpacker-react', path: '~/code/webpacker-react/'
 Finally, you need to tell Yarn to use your local copy of the NPM module in this application, using [`yarn link`](https://yarnpkg.com/en/docs/cli/link):
 
 ```
-$ cd ~/code/webpacker-react/javascript/webpacker_react-npm-module/dist/
-$ yarn             # builds the code
+$ cd ~/code/webpacker-react/javascript/webpacker_react-npm-module/
+$ yarn
+$ cd dist/
+$ yarn             # compiles the code from src/ to dist/
 $ yarn link
 success Registered "webpacker-react".
 info You can now run `yarn link "webpacker-react"` in the projects where you want to use this module and it will be used instead.
 $ cd ~/code/webpacker-react-example/
+$ yarn link webpacker-react
 success Registered "webpacker-react".
 ```
 
@@ -212,6 +235,13 @@ Finally, run the test suite:
 $ rake test
 ```
 
+If you change the javascript code, please ensure there are no style errors:
+
+```sh
+$ cd javascript/webpacker_react-npm-module/
+$ yarn lint
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/renchap/webpacker-react.

data/_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

data/circle.yml

@@ -9,9 +9,13 @@ checkout:
         pwd: javascript/webpacker_react-npm-module/dist
     - yarn link:
         pwd: javascript/webpacker_react-npm-module/dist
-test:
-  pre:
+compile:
+  override:
     - test/example_app/bin/yarn
     - yarn link webpacker-react:
         pwd: test/example_app/vendor
     - test/example_app/bin/webpack
+test:
+  pre:
+    - yarn lint:
+        pwd: javascript/webpacker_react-npm-module

data/javascript/webpacker_react-npm-module/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  'extends': 'airbnb',
+  'rules': {
+    'comma-dangle': ['error', 'never'],
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/extensions': 'off',
+    'no-console': 'off',
+    semi: ['error', 'never'],
+  },
+  'env': {
+    'browser': true,
+    'node': true,
+  },
+}

data/javascript/webpacker_react-npm-module/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpacker-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Javascript",
   "main": "index.js",
   "homepage": "https://github.com/renchap/webpacker-react",

data/javascript/webpacker_react-npm-module/package.json

@@ -2,10 +2,19 @@
   "name": "webpacker-react-build",
   "private": true,
   "scripts": {
-    "build": "babel src --presets=babel-preset-es2015 --out-dir dist"
+    "build": "babel src --presets=babel-preset-es2015 --out-dir dist",
+    "lint": "eslint src/"
   },
   "devDependencies": {
     "babel-cli": "^6.18.0",
-    "babel-preset-es2015": "^6.18.0"
+    "babel-preset-es2015": "^6.22.0",
+    "eslint": "^3.16.1",
+    "eslint-config-airbnb": "^14.1.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
+    "eslint-plugin-react": "^6.10.0"
+  },
+  "dependencies": {
+    "lodash": "^4.0.0"
   }
 }

data/javascript/webpacker_react-npm-module/src/configure-hot-module-replacement.js

@@ -1,13 +1,14 @@
 import webpack from 'webpack'
 import merge from 'webpack-merge'
 
-function configureHotModuleReplacement(config) {
-  let webpackDevServerAddr = process.env['WEBPACK_DEV_SERVER_ADDR'] || 'http://localhost:8080/'
-  config = merge(
-    config,
+function configureHotModuleReplacement(originalConfig) {
+  const webpackDevServerAddr = process.env.WEBPACK_DEV_SERVER_ADDR || 'http://localhost:8080/'
+  const config = merge(
+    originalConfig,
     {
       output: {
-        publicPath: webpackDevServerAddr // needed for HMR to know where to load the hot update chunks
+        // needed for HMR to know where to load the hot update chunks
+        publicPath: webpackDevServerAddr
       },
       plugins: [
         new webpack.NamedModulesPlugin()
@@ -15,20 +16,19 @@ function configureHotModuleReplacement(config) {
     }
   )
 
-  config.module.rules = config.module.rules.map( rule => {
+  config.module.rules = config.module.rules.map((rule) => {
     if (rule.loader === 'babel-loader') {
-      return merge(rule, {options: {plugins: ['react-hot-loader/babel']}})
-    } else {
-      return rule
+      return merge(rule, { options: { plugins: ['react-hot-loader/babel'] } })
     }
+    return rule
   })
 
-  for (let key of Object.keys(config.entry)) {
+  Object.keys(config.entry).forEach((key) => {
     if (!(config.entry[key] instanceof Array)) {
       config.entry[key] = [config.entry[key]]
     }
     config.entry[key].unshift('react-hot-loader/patch')
-  }
+  })
   return config
 }
 

data/javascript/webpacker_react-npm-module/src/hmr.js

@@ -2,8 +2,8 @@ import { AppContainer } from 'react-hot-loader'
 import WebpackerReact from 'webpacker-react'
 import React from 'react'
 
-WebpackerReact.registerWrapForHMR( (reactElement) => {
-  return React.createElement(AppContainer, {}, reactElement)
-})
+WebpackerReact.registerWrapForHMR(reactElement =>
+  React.createElement(AppContainer, {}, reactElement)
+)
 
 export default WebpackerReact

data/javascript/webpacker_react-npm-module/src/index.js

@@ -1,17 +1,18 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { intersection, keys, assign, omit } from 'lodash'
+import ujs from './ujs'
 
 const CLASS_ATTRIBUTE_NAME = 'data-react-class'
 const PROPS_ATTRIBUTE_NAME = 'data-react-props'
 
-var WebpackerReact = {
-  eventsRegistered: false,
-  registeredComponents : {},
+const WebpackerReact = {
+  registeredComponents: {},
   wrapForHMR: null,
 
-  render: function(node, component) {
-    var propsJson = node.getAttribute(PROPS_ATTRIBUTE_NAME)
-    var props = propsJson && JSON.parse(propsJson)
+  render(node, component) {
+    const propsJson = node.getAttribute(PROPS_ATTRIBUTE_NAME)
+    const props = propsJson && JSON.parse(propsJson)
 
     let reactElement = React.createElement(component, props)
     if (this.wrapForHMR) {
@@ -20,17 +21,18 @@ var WebpackerReact = {
     ReactDOM.render(reactElement, node)
   },
 
-  renderOnHMR: function(component) {
-    var name = component.name
+  renderOnHMR(component) {
+    const name = component.name
+
     this.registeredComponents[name] = component
 
     if (!this.wrapForHMR) {
-      console.warn('webpack-react: renderOnHMR called but not elements not wrapped for HMR')
+      console.warn('webpacker-react: renderOnHMR called but not elements not wrapped for HMR')
     }
 
-    var toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}=${name}]`)
-    for (var i = 0; i < toMount.length; ++i) {
-      var node = toMount[i]
+    const toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}=${name}]`)
+    for (let i = 0; i < toMount.length; i += 1) {
+      const node = toMount[i]
 
       this.render(node, component)
     }
@@ -40,47 +42,49 @@ var WebpackerReact = {
     this.wrapForHMR = wrapForHMR
   },
 
-  register: function(component) {
-    var name = component.name
-
-    if (this.registeredComponents[name]) {
-      console.warn('webpacker-react: Cant register component, another one with this name is already registered: ' + name)
-      return false
+  registerComponents(components) {
+    const collisions = intersection(keys(this.registeredComponents), keys(components))
+    if (collisions.length > 0) {
+      console.error(`webpacker-react: can not register components. Following components are already registered: ${collisions}`)
     }
 
-    this.registeredComponents[name] = component
+    assign(this.registeredComponents, omit(components, collisions))
     return true
   },
 
-  addEventEventhandlers: function() {
-    var registeredComponents = this.registeredComponents
-
-    if (this.eventsRegistered == true) {
-      console.warn("webpacker-react: events have already been registered")
-      return false
+  unmountComponents() {
+    const mounted = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
+    for (let i = 0; i < mounted.length; i += 1) {
+      ReactDOM.unmountComponentAtNode(mounted[i])
     }
+  },
 
-    document.addEventListener("DOMContentLoaded", () => {
-      var toMount = document.querySelectorAll('[' + CLASS_ATTRIBUTE_NAME + ']')
+  mountComponents() {
+    const registeredComponents = this.registeredComponents
+    const toMount = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
 
-      for (var i = 0; i < toMount.length; ++i) {
-        var node = toMount[i]
-        var className = node.getAttribute(CLASS_ATTRIBUTE_NAME)
-        var component = registeredComponents[className]
+    for (let i = 0; i < toMount.length; i += 1) {
+      const node = toMount[i]
+      const className = node.getAttribute(CLASS_ATTRIBUTE_NAME)
+      const component = registeredComponents[className]
 
-        if (component) {
-          this.render(node, component)
-        } else {
-          console.error('webpacker-react: cant render a component that has not been registered: ' + className)
-        }
+      if (component) {
+        if (node.innerHTML.length === 0) this.render(node, component)
+      } else {
+        console.error(`webpacker-react: cant render a component that has not been registered: ${className}`)
       }
-    });
+    }
+  },
 
-    this.eventsRegistered = true
-    return true
-  }
-};
+  setup(components = {}) {
+    if (typeof window.WebpackerReact === 'undefined') {
+      window.WebpackerReact = this
+      ujs.setup(this.mountComponents.bind(this), this.unmountComponents.bind(this))
+    }
 
-WebpackerReact.addEventEventhandlers()
+    window.WebpackerReact.registerComponents(components)
+    window.WebpackerReact.mountComponents()
+  }
+}
 
 export default WebpackerReact