react-webpacker 1.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: a67759f981ad12f126e07ed80d2023669a5206a594c97d155b4f9d0e5454bd9d
+  data.tar.gz: 86d69472fa9c7ea222b41f265df482e0ea8038a9bf74b04230d0b08f490fc881
+SHA512:
+  metadata.gz: 0ba22aa7991fa1ca36911622aa97c0e94a5dc53b1be275752ae7e4e9de8a65d43f98056a2ffbe9bf81ea56e43d882ab4c9f1504be7fc89f4854402375b1c34b6
+  data.tar.gz: 9f588d5239cd5065a8ef064bc8443dd81443a7533194c6274d6ce58a89062326916f0ebddbd7ad7f78b098fd1a50cf7c039f0d86c159d07d659799ca96643f01

data/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}

data/.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+test/__build__

data/.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 7,
+    sourceType: 'module',
+    ecmaFeatures: { implicitStrict: true, jsx: true }
+  },
+  plugins: ['standard', 'jest', 'prettier', 'react'],
+  extends: [
+    'standard',
+    'prettier',
+    'prettier/react',
+    'plugin:import/errors',
+    'plugin:jest/recommended',
+    'plugin:react/recommended'
+  ],
+  rules: {
+    'prettier/prettier': [
+      2,
+      {
+        parser: 'flow',
+        semi: false,
+        singleQuote: true,
+        trailingComma: 'none'
+      }
+    ],
+    'no-process-env': 0,
+    'no-unused-vars': [
+      2,
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_'
+      }
+    ],
+    'prefer-arrow-callback': 2,
+    'prefer-const': 2,
+    'react/jsx-uses-vars': 2,
+    'standard/computed-property-even-spacing': 0
+  }
+}

data/.gitattributes

@@ -0,0 +1 @@
+yarn.lock binary

data/.gitignore

@@ -0,0 +1,5 @@
+vendor/bundle
+.bundle
+node_modules
+test/__build__
+

data/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+test/__build__/*

data/.prettierrc

@@ -0,0 +1,4 @@
+parser: flow
+semi: false
+singleQuote: true
+trailingComma: none

data/Gemfile

@@ -0,0 +1,12 @@
+source 'https://rubygems.org'
+
+gemspec
+
+group :test do
+  gem 'activesupport'
+  gem 'byebug'
+  gem 'minitest'
+  gem 'rails'
+  gem 'rake'
+  gem 'webpacker'
+end

data/Gemfile.lock

@@ -0,0 +1,129 @@
+PATH
+  remote: .
+  specs:
+    react-webpacker (1.1.0)
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actioncable (5.1.4)
+      actionpack (= 5.1.4)
+      nio4r (~> 2.0)
+      websocket-driver (~> 0.6.1)
+    actionmailer (5.1.4)
+      actionpack (= 5.1.4)
+      actionview (= 5.1.4)
+      activejob (= 5.1.4)
+      mail (~> 2.5, >= 2.5.4)
+      rails-dom-testing (~> 2.0)
+    actionpack (5.1.4)
+      actionview (= 5.1.4)
+      activesupport (= 5.1.4)
+      rack (~> 2.0)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    actionview (5.1.4)
+      activesupport (= 5.1.4)
+      builder (~> 3.1)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.3)
+    activejob (5.1.4)
+      activesupport (= 5.1.4)
+      globalid (>= 0.3.6)
+    activemodel (5.1.4)
+      activesupport (= 5.1.4)
+    activerecord (5.1.4)
+      activemodel (= 5.1.4)
+      activesupport (= 5.1.4)
+      arel (~> 8.0)
+    activesupport (5.1.4)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    arel (8.0.0)
+    builder (3.2.3)
+    byebug (10.0.0)
+    concurrent-ruby (1.0.5)
+    crass (1.0.3)
+    erubi (1.7.0)
+    globalid (0.4.1)
+      activesupport (>= 4.2.0)
+    i18n (0.9.3)
+      concurrent-ruby (~> 1.0)
+    loofah (2.1.1)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.5.9)
+    mail (2.7.0)
+      mini_mime (>= 0.1.1)
+    method_source (0.9.0)
+    mini_mime (1.0.0)
+    mini_portile2 (2.3.0)
+    minitest (5.11.3)
+    nio4r (2.2.0)
+    nokogiri (1.8.2)
+      mini_portile2 (~> 2.3.0)
+    rack (2.0.4)
+    rack-proxy (0.6.3)
+      rack
+    rack-test (0.8.2)
+      rack (>= 1.0, < 3)
+    rails (5.1.4)
+      actioncable (= 5.1.4)
+      actionmailer (= 5.1.4)
+      actionpack (= 5.1.4)
+      actionview (= 5.1.4)
+      activejob (= 5.1.4)
+      activemodel (= 5.1.4)
+      activerecord (= 5.1.4)
+      activesupport (= 5.1.4)
+      bundler (>= 1.3.0)
+      railties (= 5.1.4)
+      sprockets-rails (>= 2.0.0)
+    rails-dom-testing (2.0.3)
+      activesupport (>= 4.2.0)
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.0.3)
+      loofah (~> 2.0)
+    railties (5.1.4)
+      actionpack (= 5.1.4)
+      activesupport (= 5.1.4)
+      method_source
+      rake (>= 0.8.7)
+      thor (>= 0.18.1, < 2.0)
+    rake (12.3.0)
+    sprockets (3.7.1)
+      concurrent-ruby (~> 1.0)
+      rack (> 1, < 3)
+    sprockets-rails (3.2.1)
+      actionpack (>= 4.0)
+      activesupport (>= 4.0)
+      sprockets (>= 3.0.0)
+    thor (0.20.0)
+    thread_safe (0.3.6)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    webpacker (3.2.1)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
+    websocket-driver (0.6.5)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  activesupport
+  byebug
+  minitest
+  rails
+  rake
+  react-webpacker!
+  webpacker
+
+BUNDLED WITH
+   1.16.1

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 euxn23
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,46 @@
+# React-Webpacker
+
+React-Webpacker is the smallest, enoughly-tested library for react with webpacker.
+
+## Features
+- View Helper to render react component. (using Custom Data Attributes)
+- JavaScript library to render react components, loading only used components.
+- Enoughly view testing.
+- **NOT Provide** Server-Side Rendering.
+
+## Usage
+- Add component to `window` scope.
+```js
+window.YourCoolComponent = YourCoolComponent
+```
+
+- Create JavaScript file to render components into webpacker target directory.
+```js:react-webpacker.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(['YourCoolComponent'])
+= render_component('YourCoolComponent', {props_object: :value})
+
+= javascript_pack_tag 'react-webpacker' 
+```
+
+## 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.
+- They don't test JavaScript library about rendering by E2E testing.
+
+## Supports
+- Ruby 2.3.x+
+- Webpacker 1.1+
+- Node.js 8.x+
+
+## License
+MIT

data/Rakefile

@@ -0,0 +1,11 @@
+require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << "test"
+  t.libs << "lib"
+  t.test_files = FileList["test/**/*_test.rb"]
+  t.verbose = true
+end
+
+task default: :test

data/lib/react-webpacker.rb

@@ -0,0 +1,4 @@
+require 'react-webpacker/use_components'
+require 'react-webpacker/render_component'
+
+ActionController::Base.helper ReactWebpacker

data/lib/react-webpacker/render_component.rb

@@ -0,0 +1,11 @@
+module ReactWebpacker
+  # @param [String] component_name
+  # @param [Hash] props
+  def render_component(component_name, props = {})
+    html_options = {
+      'data-component-name' => component_name,
+      'data-props' => props.map { |k, v| [k.to_s.camelize(:lower), v] }.to_h.to_json
+    }
+    content_tag('div', '', html_options).html_safe
+  end
+end

data/lib/react-webpacker/use_components.rb

@@ -0,0 +1,7 @@
+module ReactWebpacker
+  # @param [Array<String>] components
+  def use_components(components = [])
+    components.map { |component| javascript_pack_tag component }
+      .join("\n").html_safe
+  end
+end

data/lib/react-webpacker/version.rb

@@ -0,0 +1,3 @@
+module ReactWebpacker
+  VERSION = '1.1.0'.freeze
+end

data/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "react-webpacker",
+  "version": "1.1.0",
+  "description": "The smallest, enoughly-tested library for react with webpacker.",
+  "main": "src/react-webpacker.js",
+  "scripts": {
+    "fmt": "prettier --write \"{src,test}/**/*.js{,x}\"",
+    "lint": "eslint \"{src,test}/**/*.js{,x}\"",
+    "test": "jest test/react-webpacker_test.js"
+  },
+  "author": "euxn23",
+  "license": "MIT",
+  "devDependencies": {
+    "babel": "^6.23.0",
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.1",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "eslint": "^4.17.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-standard": "^11.0.0-beta.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.12.1",
+    "eslint-plugin-node": "^6.0.0",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-react": "^7.6.1",
+    "eslint-plugin-standard": "^3.0.1",
+    "express": "^4.16.2",
+    "jest": "^22.2.2",
+    "prettier": "^1.10.2",
+    "prettier-cli": "^0.1.0",
+    "puppeteer": "^1.0.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "webpack": "^3.11.0"
+  }
+}

data/react-webpacker.gemspec

@@ -0,0 +1,18 @@
+$:.push File.expand_path('../lib', __FILE__)
+require 'react-webpacker/version'
+
+Gem::Specification.new do |s|
+  s.name = 'react-webpacker'
+  s.version = ReactWebpacker::VERSION
+  s.authors = ['euxn23']
+  s.email = 'euxn23@gmail.com'
+  s.homepage = 'https://github.com/euxn23/webpacker-react'
+  s.summary = 'The smallest, enoughly-tested library for react with webpacker.'
+  s.license = 'MIT'
+  s.required_ruby_version = '>= 2.3.0'
+
+  s.require_paths = ['lib']
+
+  s.files = `git ls-files`.split("\n")
+end
+

data/src/react-webpacker.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+export default {
+  render() {
+    document.querySelectorAll('div[data-component-name]').forEach(dom => {
+      const componentName = dom.getAttribute('data-component-name')
+      const component = window[componentName]
+      if (!component)
+        return console.error(
+          `Component ${componentName} is not defined in window scope`
+        )
+      ReactDOM.render(
+        React.createElement(
+          component,
+          JSON.parse(dom.getAttribute('data-props') || {})
+        ),
+        dom
+      )
+    })
+  }
+}

data/test/dummy/components/MyComponent.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const MyComponent = ({ myName, value }) => (
+  <h1>
+    {myName}: {value}
+  </h1>
+)
+
+MyComponent.propTypes = {
+  myName: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired
+}
+
+export default MyComponent
+window.MyComponent = MyComponent

data/test/dummy/react-webpacker.js

@@ -0,0 +1,2 @@
+import ReactWebpacker from '../../src/react-webpacker'
+ReactWebpacker.render()

data/test/react-webpacker_test.js

@@ -0,0 +1,61 @@
+import fs from 'fs'
+import path from 'path'
+
+import express from 'express'
+import puppeteer from 'puppeteer'
+import webpack from 'webpack'
+
+import webpackConfig from '../webpack.config.js'
+
+const compiler = webpack(webpackConfig)
+compiler.run((err, stats) => {
+  if (err) console.error(err)
+  else if (stats.hasErrors())
+    console.error('Error is occured while webpack compiling.')
+})
+
+const useComponentsHtml = fs.readFileSync(
+  'test/use-components_expected.html',
+  'utf8'
+)
+const renderComponentHtml = fs.readFileSync(
+  'test/render-component_expected.html',
+  'utf8'
+)
+
+const html = `
+<html>
+<body>
+${renderComponentHtml}
+${useComponentsHtml}
+<script src="/packs/react-webpacker.js"></script>
+</body>
+</html>
+`
+
+const app = express()
+app.get('/', (req, res) => res.status(200).send(html))
+app.use(express.static(path.resolve(__dirname, '__build__')))
+
+let browser
+let page
+let server
+
+beforeAll(async () => {
+  server = await app.listen(8888)
+  browser = await puppeteer.launch({ headless: true })
+  page = await browser.newPage()
+})
+
+describe('tagged javascript', async () => {
+  it('is worked properly.', async () => {
+    await page.goto('http://localhost:8888/')
+    const element = await page.$eval('body > div > h1', e => e.textContent)
+    expect(element).toBe('test: 1')
+  })
+})
+
+afterAll(async () => {
+  await browser.close()
+  await server.close()
+})

data/test/react-webpacker_test.rb

@@ -0,0 +1,44 @@
+require 'byebug'
+require 'minitest/autorun'
+require 'rails'
+require 'rails/test_help'
+require 'react-webpacker'
+require 'webpacker'
+require 'active_support/core_ext/string'
+
+class ReactWebpackerTest < ActionView::TestCase
+  tests ReactWebpacker
+  include Webpacker::Helper
+
+  def test_use_components
+    pack_tag_stub = Proc.new do |arg|
+      "<script src=\"/packs/#{arg}.js\"></script>"
+    end
+    File.open 'test/use-components_expected.html' do |f|
+      stub('javascript_pack_tag', pack_tag_stub) do
+        components = ['components/MyComponent']
+        expect_tags = f.read.chomp
+        assert_equal expect_tags, use_components(components)
+      end
+    end
+  end
+
+  def test_render_component
+    File.open 'test/render-component_expected.html' do |f|
+      component_name = 'MyComponent'
+      props = {my_name: :test, value: 1}
+      expect_tags = f.read.chomp
+      assert_equal expect_tags, render_component(component_name, props)
+    end
+  end
+
+  def test_version
+    File.open('package.json') do |f|
+      js_version = JSON.load(f)['version']
+      ruby_version = ReactWebpacker::VERSION
+
+      assert_equal js_version, ruby_version
+    end
+  end
+end
+

data/test/render-component_expected.html

@@ -0,0 +1 @@
+<div data-component-name="MyComponent" data-props="{&quot;myName&quot;:&quot;test&quot;,&quot;value&quot;:1}"></div>

data/test/use-components_expected.html

@@ -0,0 +1 @@
+<script src="/packs/components/MyComponent.js"></script>

data/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path')
+
+module.exports = {
+  entry: {
+    'react-webpacker': './test/dummy/react-webpacker.js',
+    'components/MyComponent': './test/dummy/components/MyComponent.jsx'
+  },
+  output: {
+    path: path.resolve(__dirname, 'test', '__build__', 'packs'),
+    filename: '[name].js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.jsx?/,
+        exclude: /node_modules/,
+        use: [{ loader: 'babel-loader' }]
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.js', '.jsx']
+  }
+}

metadata

@@ -0,0 +1,72 @@
+--- !ruby/object:Gem::Specification
+name: react-webpacker
+version: !ruby/object:Gem::Version
+  version: 1.1.0
+platform: ruby
+authors:
+- euxn23
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2018-02-14 00:00:00.000000000 Z
+dependencies: []
+description: 
+email: euxn23@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".babelrc"
+- ".eslintignore"
+- ".eslintrc.js"
+- ".gitattributes"
+- ".gitignore"
+- ".prettierignore"
+- ".prettierrc"
+- Gemfile
+- Gemfile.lock
+- LICENSE
+- README.md
+- Rakefile
+- lib/react-webpacker.rb
+- lib/react-webpacker/render_component.rb
+- lib/react-webpacker/use_components.rb
+- lib/react-webpacker/version.rb
+- 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
+- test/react-webpacker_test.rb
+- test/render-component_expected.html
+- test/use-components_expected.html
+- webpack.config.js
+- yarn.lock
+homepage: https://github.com/euxn23/webpacker-react
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.3.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.7.3
+signing_key: 
+specification_version: 4
+summary: The smallest, enoughly-tested library for react with webpacker.
+test_files: []