react-webpacker 1.2.2 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 98f2c734a253ddb4c6f0d2b16337a26c9bd242991d37968c1698f87bde43a749
-  data.tar.gz: c4f03b857ef10020a0f8ac09d5c9d95e85749fa61cbb6dfc31a67a04c00aefb1
+  metadata.gz: f9653948301c33e8c40030fb395ce91fba9091f8ee2bb2562a6802712f1679f5
+  data.tar.gz: 567c3bf3f323d03e2bc1f9af3484dd010984800598ddfbed05092991adccea7b
 SHA512:
-  metadata.gz: bd784e8946cf42bde823627899fc1121da02eee8349d92525b7b9a0bb2cf61d98dd5e6eea42925051379a3a89b351ee0b3a24d828339a09ab4a2920b4d75eca9
-  data.tar.gz: baaad81738e0289562f070f44ff5ef7c15e2dcc34b1cababa95383bea24383ebe80a87c2914891baf472e1d5a61d26fb425e97311afc20c97a472c53cb03184b
+  metadata.gz: cbebfd2c71bebd5c7362ffdb3259d841e7209e1516c44dd9405eff8b31b68c20ba2ccef75bcec4905fd47ae741bcba8379d5ac547a34b81568590794abec1567
+  data.tar.gz: 4aa678150006c34f53fa3235aa0ce08abcd94b93abf094592071962c3679232b054b1834921c74676ebba8638b81f325858e9454b93555df030b0e6cf130ce5e

data/.gitignore

@@ -4,3 +4,4 @@ node_modules
 test/__build__
 
 dist
+*.gem

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    react-webpacker (1.2.0)
+    react-webpacker (1.3.0)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -9,29 +9,62 @@ React-Webpacker is the smallest, enoughly-tested library for react with webpacke
 - **NOT Provide** Server-Side Rendering.
 
 ## Usage
-- Add component to `window` scope.
+
+### Notes
+- From Ruby to JS, `snake_case` in props will be transformed to `camelCase` **AUTOMATICALLY**.
+- `react-webpacker` script should be called **ONCE** per rendered html page, **DON'T** call in looped views.
+
+### ES Modules Way Usage
+
+your-view.js
 ```js
-window.YourCoolComponent = YourCoolComponent
+import ReactWebpacker from 'react-webpacker'
+import YourCoolComponent from 'path/to/YourCoolComponent'
+
+const components = {
+  YourCoolComponent
+}
+
+ReactWebpacker.render(components)
+```
+
+your-view.html.erb
+```erb
+<%= javascript_pack_tag 'your-view', defer: true %>
+
+<%= render_component('YourCoolComponent', {props_key: :value}) %>
 ```
 
-- Create JavaScript file to render components into webpacker target directory.
-```js:react-webpacker.js
+### or Easy Usage
+
+YourCoolComponent.js
+```js
+// Add component to `window` scope.
+Object.assign(window, { YourCoolComponent })
+```
+
+react-webpacker.js
+```js
 import ReactWebpacker from 'react-webpacker'
 
 ReactWebpacker.render()
 ```
 
-- Add View Helper and JavaScript tag.
-    - From Ruby to JS, `snake_case` in props will be transformed to `camelCase` **AUTOMATICALLY**.
-    - `react-webpacker` script should be called **ONCE** per rendered html page, **DON'T** call in looped views.
-    - DOM is rendered in order from the top, so you should call `react-webpacker` script after `use_components` and `render_component`
-```slim
-= use_components(['path/to/YourCoolComponent'])
-= render_component('YourCoolComponent', {props_object: :value})
+your-view.html.erb
+```erb
+<%= use_components ['path/to/YourCoolComponent'], defer: true %>
+<%= javascript_pack_tag 'react-webpacker', defer: true %>
+
+<%= render_component('YourCoolComponent', {props_key: :value}) %>
 
-= javascript_pack_tag 'react-webpacker'
 ```
 
+#### Notes
+- DOM is rendered in order from the top, so you should call `ReactWebpacker#render()` with `defer` attribute.
+    - or after `render_component`
+- You should call `ReactWebpacker#render()` after `use_components`, even if using `defer`.
+
+
 ## Compared with `React-Rails` and `React on Rails`
 - They provide JavaScript library to load **ALL COMPONENTS**, too heavy and harmful for browser performance.
 - They provide Server-Side Rendering, so library is too large.

data/lib/react-webpacker/version.rb

@@ -1,3 +1,3 @@
 module ReactWebpacker
-  VERSION = '1.2.2'.freeze
+  VERSION = '1.3.0'.freeze
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-webpacker",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "The smallest, enoughly-tested library for react with webpacker.",
   "main": "dist/react-webpacker.js",
   "scripts": {

data/src/react-webpacker.js

@@ -2,11 +2,11 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 
 export default {
-  render() {
+  render(components = window) {
     Array.from(document.querySelectorAll('div[data-component-name]')).forEach(
       dom => {
         const componentName = dom.getAttribute('data-component-name')
-        const component = window[componentName]
+        const component = components[componentName]
         if (!component)
           return console.error(
             `Component ${componentName} is not defined in window scope`

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react-webpacker
 version: !ruby/object:Gem::Version
-  version: 1.2.2
+  version: 1.3.0
 platform: ruby
 authors:
 - euxn23
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2018-03-26 00:00:00.000000000 Z
+date: 2018-03-28 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: euxn23@gmail.com
@@ -35,8 +35,6 @@ files:
 - package.json
 - react-webpacker.gemspec
 - src/react-webpacker.js
-- test/__build__/packs/components/MyComponent.js
-- test/__build__/packs/react-webpacker.js
 - test/dummy/components/MyComponent.jsx
 - test/dummy/react-webpacker.js
 - test/react-webpacker_test.js