breezy 0.1.4 → 0.2.0

data/lib/breezy.rb

@@ -7,7 +7,6 @@ require 'breezy/x_domain_blocker'
 require 'breezy/render'
 require 'breezy/helpers'
 require 'breezy/configuration'
-require 'breezy_template'
 
 module Breezy
   module Controller
@@ -55,12 +54,6 @@ module Breezy
         ActionDispatch::Routing::Redirect.class_eval do
           prepend XHRRedirect
         end
-      end
-
-      ActiveSupport.on_load(:action_view) do
-        ActionView::Template.register_template_handler :breezy, BreezyTemplate::Handler
-        require 'breezy_template/dependency_tracker'
-        require 'breezy/active_support'
 
         (ActionView::RoutingUrlFor rescue ActionView::Helpers::UrlHelper).module_eval do
           prepend XHRUrlFor

data/lib/breezy/configuration.rb

@@ -1,9 +1,15 @@
 module Breezy
   class Configuration
-    attr_accessor :track_assets
-
     def initialize
-      @track_assets = ['application.js', 'application.css']
+      BreezyTemplate.configuration = nil
+    end
+
+    def track_assets=(assets)
+      BreezyTemplate.configuration.track_assets = assets
+    end
+
+    def track_assets
+      BreezyTemplate.configuration.track_assets
     end
   end
 

data/lib/breezy/helpers.rb

@@ -9,7 +9,7 @@ module Breezy
     def breezy_snippet
       if defined?(@breezy) && @breezy
         snippet = @breezy.gsub(/\;$/, '')
-        "Breezy.replace(#{snippet});".html_safe
+        "#{snippet};".html_safe
       end
     end
 

data/lib/breezy/render.rb

@@ -17,7 +17,7 @@ module Breezy
         view_parts = _prefixes.reverse.push(action_name)[1..-1]
         view_name = view_parts.map(&:camelize).join
 
-        breezy[:view] ||= view_name
+        breezy[:screen] ||= view_name
         render_options[:locals] ||= {}
         render_options[:locals][:breezy] = breezy
       end

data/lib/breezy/version.rb

@@ -1,3 +1,3 @@
 module Breezy
-  VERSION = '0.1.4'
+  VERSION = '0.2.0'
 end

data/lib/generators/breezy/view/templates/view.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
+import { connect } from 'react-redux'
+
+class <%= @js_filename %> extends React.Component {
+  render () {
+    return (
+      <div> {this.props.greetings}
+      </div>
+    )
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(<%= @js_filename %>)

data/lib/generators/breezy/view/templates/view.js.breezy

@@ -13,3 +13,5 @@
 #     json.delete_url post_path(post)
 #   end
 # end
+#
+json.greetings 'Change me'

data/lib/generators/breezy/view/templates/view.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {mapStateToProps, mapDispatchToProps} from '@jho406/breezy'
+import { connect } from 'react-redux'
+import {View, Text} from 'react-native'
+
+class <%= @js_filename %> extends React.Component {
+  render () {
+    return (
+      <View> 
+        <Text>
+          {this.props.greetings}
+        </Text>
+      </View>
+    )
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(<%= @js_filename %>)

data/lib/generators/breezy/view/view_generator.rb

@@ -5,6 +5,13 @@ module Breezy
 Description:
     Creates a content view and jsx view.
 DESC
+      class_option :target,
+        aliases: '-t',
+        type: :string,
+        default: 'web',
+        desc: 'Specify target platform',
+        enum: ['web', 'mobile']
+
       argument :actions, type: :array, default: [], banner: "action action"
 
       def self.source_root
@@ -13,23 +20,49 @@ DESC
 
       def copy_view_files
         base_parts = class_path + [file_name]
-        content_destination =  File.join("app/views", base_parts)
-        view_destination = "app/assets/javascripts/views"
+        destination =  File.join("app/views", base_parts)
 
-        empty_directory content_destination
-        empty_directory view_destination
 
         actions.each do |action|
           @action = action
           @js_filename = (base_parts + [action]).map(&:camelcase).join
-          @content_path =  File.join(content_destination, "#{@action}.js.breezy")
-          @view_path = File.join(view_destination, "#{@js_filename}.js.jsx")
+          @content_path =  File.join(destination, "#{@action}.js.props")
+
+          if options[:target] == 'mobile'
+            @view_ext = 'jsx'
+          else
+            @view_ext = 'js'
+          end
 
-          template 'View.js.jsx', @view_path
+          @view_path = File.join(destination, "#{@action}.#{@view_ext}")
+
+          template "view.#{@view_ext}", @view_path
           template 'view.js.breezy', @content_path
         end
       end
 
+      def append_mapping
+        if options[:platform] == 'mobile'
+          app_js = 'app/javascript/packs/application.js'
+        else
+          app_js = 'App.js'
+        end
+
+        base_parts = class_path + [file_name]
+        destination =  File.join("views", base_parts)
+
+        actions.each do |action|
+          @js_filename = (base_parts + [action]).map(&:camelcase).join
+
+          inject_into_file app_js, after: "from '@jho406/breezy'" do
+            "\nimport #{@js_filename} from '#{destination}/#{action}'"
+          end
+
+          inject_into_file app_js, after: 'const mapping = {' do
+            "\n  #{@js_filename},"
+          end
+        end
+      end
     end
   end
 end

data/lib/install/mobile.rb

@@ -0,0 +1,54 @@
+babelrc = Rails.root.join(".babelrc")
+
+if File.exist?(babelrc)
+  react_babelrc = JSON.parse(File.read(babelrc))
+  react_babelrc["presets"] ||= []
+  react_babelrc["plugins"] ||= []
+
+  if !react_babelrc["presets"].include?("react")
+    react_babelrc["presets"].push("react")
+    say "Copying react preset to your .babelrc file"
+
+    File.open(babelrc, "w") do |f|
+      f.puts JSON.pretty_generate(react_babelrc)
+    end
+  end
+
+  if !react_babelrc["plugins"].any?{|plugin| Array(plugin).include?("module-resolver")}
+    react_babelrc["plugins"].push(["module-resolver", {
+      "root": ["./app"],
+      "alias": {
+        "views": "./app/views",
+        "components": "./app/components",
+        "javascripts": "./app/javascripts"
+      }
+    }])
+
+    say "Copying module-resolver preset to your .babelrc file"
+
+    File.open(babelrc, "w") do |f|
+      f.puts JSON.pretty_generate(react_babelrc)
+    end
+  end
+
+else
+  say "Copying .babelrc to app root"
+  copy_file "#{__dir__}/templates/mobile/.babelrc", Rails.root.join(".babelrc")
+end
+
+say "Copying application.js file to app root"
+copy_file "#{__dir__}/templates/mobile/app.js", Rails.root.join("App.js")
+
+say "Copying rn-cli.config.js file to app root"
+copy_file "#{__dir__}/templates/mobile/rn-cli.config.js", Rails.root.join("rn-cli.config.js")
+
+say "Copying app.json expo file to app root"
+copy_file "#{__dir__}/templates/mobile/app.json", Rails.root.join("app.json")
+
+say "Copying package.json expo file to app root"
+copy_file "#{__dir__}/templates/mobile/package.json", Rails.root.join("package.json")
+
+say "Installing all breezy dependencies"
+run "yarn"
+
+say "Rails Breezy and ReactNative! 🎉", :green

data/lib/install/templates/mobile/app.js

@@ -0,0 +1,84 @@
+import React from 'react'
+import {combineReducers, createStore, applyMiddleware} from 'redux'
+import thunk from 'redux-thunk'
+import { Provider } from 'react-redux'
+import Breezy, {
+  rootReducer,
+  remote,
+  pageToInitialState,
+} from '@jho406/breezy'
+import {visit} from '@jho406/breezy/dist/action_creators'
+import { StackNavigator } from 'react-navigation'
+
+//Change the below when you have your first screen
+const baseUrl = 'http://localhost:3000'
+const initialPath = '/example'
+const initialPage = {
+  data: {},
+  screen: 'ExampleScreen'
+}
+
+// Remove me when you have your first screen
+import {View, Text} from 'react-native'
+class ExampleScreen extends React.Component {
+  render() {
+    return (
+      <View>
+        <Text>Looks like you're up and running!</Text>
+        <Text>Next create your rails routes and controllers as usual</Text>
+        <Text>Then run the view generators `rails g breezy:view Post index -t mobile`</Text>
+        <Text>When ready, remove this ExampleScreen from App.js</Text>
+      </View>
+    )
+  }
+}
+
+// This mapping can be auto populate through
+// Breezy generators, for example:
+// Run `rails g breezy:view Post index --mobile`
+const mapping = {
+  ExampleScreen, //Remove me when you have your first screen
+}
+
+
+const navMapping = Object.entries(mapping).reduce((memo, [key, value])=> {
+  return {[key]: {screen: value}}
+}, {})
+
+
+function start({url, baseUrl='', initialPage={}}) {
+  const store = createStore(
+    rootReducer,
+    pageToInitialState(url, initialPage),
+    applyMiddleware(thunk)
+  )
+
+  Breezy.connect(store)
+  store.dispatch({type: 'BREEZY_SET_BASE_URL', baseUrl})
+
+  // Uncomment below if you need to fetch on the initial screen
+  // store.dispatch(visit({url}))
+
+  const Nav = StackNavigator(navMapping, {
+    initialRouteName: initialPage.screen,
+    initialRouteParams: {url}
+  })
+
+  return class extends React.Component {
+    render() {
+      return <Provider store={store}>
+        <Nav url={url}/>
+      </Provider>
+    }
+  }
+}
+
+
+const App = start({
+  url: initialPath,
+  baseUrl,
+  initialPage
+})
+
+export default App
+

data/lib/install/templates/mobile/app.json

@@ -0,0 +1,6 @@
+{
+  "expo": {
+    "sdkVersion": "22.0.0"
+  }
+}
+

data/lib/install/templates/mobile/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "myapp",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "jest-expo": "^22.0.0",
+    "react-native-scripts": "1.7.0",
+    "react-test-renderer": "16.0.0-beta.5"
+  },
+  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
+  "scripts": {
+    "start": "react-native-scripts start",
+    "eject": "react-native-scripts eject",
+    "android": "react-native-scripts android",
+    "ios": "react-native-scripts ios",
+    "test": "node node_modules/jest/bin/jest.js --watch"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "expo": "^22.0.2",
+    "react": "16.0.0-beta.5",
+    "react-native": "^0.49.5",
+    "react-navigation": "^1.0.0-beta.19",
+    "react-redux": "^5.0.6",
+    "redux": "^3.7.2",
+    "redux-thunk": "^2.2.0"
+    "@jho406/breezy": "^0.2.3"
+  }
+}
+

data/lib/install/templates/mobile/rn-cli.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  getSourceExts: () => [ 'jsx' ],
+}
+

data/lib/install/templates/web/application.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import {combineReducers, createStore, applyMiddleware} from 'redux'
+import thunk from 'redux-thunk'
+import { Provider } from 'react-redux'
+import { render } from 'react-dom'
+import createHistory from 'history/createBrowserHistory'
+import Breezy, {
+  rootReducer,
+  pageToInitialState,
+  setDOMListenersForNav,
+  setWindow,
+  argsForHistory,
+  argsForNavInitialState
+} from '@jho406/breezy'
+//The navigator is pretty bare bones
+//Feel free to replace the implementation
+import {Nav} from '@jho406/breezy/dist/utils/react'
+
+
+// This mapping can be auto populate through
+// Breezy generators, for example:
+// Run `rails g breezy:view Post index`
+const mapping = {
+}
+
+function start({window, url, baseUrl='', history, initialPage={}}) {
+  setWindow(window)
+
+  history.replace(...argsForHistory(url, initialPage))
+
+  const store = createStore(
+    rootReducer,
+    pageToInitialState(url, initialPage),
+    applyMiddleware(thunk)
+  )
+
+  Breezy.connect(store)
+  store.dispatch({type: 'BREEZY_SET_BASE_URL', baseUrl: baseUrl})
+
+  return class extends React.Component {
+    render() {
+      return <Provider store={store}>
+        <Nav ref={setDOMListenersForNav}
+          mapping={this.props.mapping}
+          initialState={argsForNavInitialState(url, initialPage)}
+          history={history}
+        />
+      </Provider>
+    }
+  }
+}
+
+const App = start({
+  window: window,
+  url: window.location.href,
+  initialPage: window.BREEZY_INITIAL_PAGE_STATE,
+  history: createHistory({})
+})
+
+document.addEventListener("DOMContentLoaded", function() {
+  render(<App mapping={mapping}/>, document.getElementById('app'))
+})

data/lib/install/web.rb

@@ -0,0 +1,72 @@
+require "webpacker/configuration"
+
+babelrc = Rails.root.join(".babelrc")
+
+def append_js_tags
+  app_html = 'app/views/layouts/application.html.erb'
+  js_tag = <<-JS_TAG
+
+    <script type="text/javascript">
+      window.BREEZY_INITIAL_PAGE_STATE=<%= breezy_snippet %>;
+    </script>
+  JS_TAG
+
+  inject_into_file app_html, after: '<head>' do
+    js_tag
+  end
+
+  inject_into_file app_html, after: '<body>' do
+    "\n    <div id='app'></div>"
+  end
+end
+
+
+if File.exist?(babelrc)
+  react_babelrc = JSON.parse(File.read(babelrc))
+  react_babelrc["presets"] ||= []
+  react_babelrc["plugins"] ||= []
+
+  if !react_babelrc["presets"].include?("react")
+    react_babelrc["presets"].push("react")
+    say "Copying react preset to your .babelrc file"
+
+    File.open(babelrc, "w") do |f|
+      f.puts JSON.pretty_generate(react_babelrc)
+    end
+  end
+
+  if !react_babelrc["plugins"].any?{|plugin| Array(plugin).include?("module-resolver")}
+    react_babelrc["plugins"].push(["module-resolver", {
+      "root": ["./app"],
+      "alias": {
+        "views": "./app/views",
+        "components": "./app/components",
+        "javascripts": "./app/javascripts"
+      }
+    }])
+
+    say "Copying module-resolver preset to your .babelrc file"
+
+    File.open(babelrc, "w") do |f|
+      f.puts JSON.pretty_generate(react_babelrc)
+    end
+  end
+
+else
+  say "Copying .babelrc to app root directory"
+  copy_file "#{__dir__}/templates/web/.babelrc", ".babelrc"
+end
+
+say "Copying application.js file to #{Webpacker.config.source_entry_path}"
+copy_file "#{__dir__}/templates/web/application.js", "#{Webpacker.config.source_entry_path}/application.js"
+
+say "Appending js tags to your application.html.erb"
+append_js_tags
+
+say "Installing all breezy dependencies"
+run "yarn add history react react-dom babel-preset-react prop-types --save"
+run "yarn add babel-plugin-module-resolver --save-dev"
+run "yarn add react-redux redux --save-dev"
+run "yarn add @jho406/breezy"
+
+say "Webpacker now supports breezy.js 🎉", :green