vue_rails 0.1.1

data/.travis.yml

@@ -0,0 +1,7 @@
+---
+sudo: false
+language: ruby
+cache: bundler
+rvm:
+  - 2.5.1
+before_install: gem install bundler -v 1.17.2

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 team at jiyr@wfl-ischool.cn. 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/Gemfile

@@ -0,0 +1,6 @@
+source "https://rubygems.org"
+
+git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }
+
+# Specify your gem's dependencies in vue_rails.gemspec
+gemspec

data/Gemfile.lock

@@ -0,0 +1,137 @@
+PATH
+  remote: .
+  specs:
+    vue_rails (0.1.1)
+      execjs
+
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actioncable (5.2.2)
+      actionpack (= 5.2.2)
+      nio4r (~> 2.0)
+      websocket-driver (>= 0.6.1)
+    actionmailer (5.2.2)
+      actionpack (= 5.2.2)
+      actionview (= 5.2.2)
+      activejob (= 5.2.2)
+      mail (~> 2.5, >= 2.5.4)
+      rails-dom-testing (~> 2.0)
+    actionpack (5.2.2)
+      actionview (= 5.2.2)
+      activesupport (= 5.2.2)
+      rack (~> 2.0)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.2)
+    actionview (5.2.2)
+      activesupport (= 5.2.2)
+      builder (~> 3.1)
+      erubi (~> 1.4)
+      rails-dom-testing (~> 2.0)
+      rails-html-sanitizer (~> 1.0, >= 1.0.3)
+    activejob (5.2.2)
+      activesupport (= 5.2.2)
+      globalid (>= 0.3.6)
+    activemodel (5.2.2)
+      activesupport (= 5.2.2)
+    activerecord (5.2.2)
+      activemodel (= 5.2.2)
+      activesupport (= 5.2.2)
+      arel (>= 9.0)
+    activestorage (5.2.2)
+      actionpack (= 5.2.2)
+      activerecord (= 5.2.2)
+      marcel (~> 0.3.1)
+    activesupport (5.2.2)
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      i18n (>= 0.7, < 2)
+      minitest (~> 5.1)
+      tzinfo (~> 1.1)
+    arel (9.0.0)
+    builder (3.2.3)
+    concurrent-ruby (1.1.4)
+    crass (1.0.4)
+    erubi (1.8.0)
+    execjs (2.7.0)
+    globalid (0.4.2)
+      activesupport (>= 4.2.0)
+    i18n (1.5.3)
+      concurrent-ruby (~> 1.0)
+    loofah (2.2.3)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.5.9)
+    mail (2.7.1)
+      mini_mime (>= 0.1.1)
+    marcel (0.3.3)
+      mimemagic (~> 0.3.2)
+    method_source (0.9.2)
+    mimemagic (0.3.3)
+    mini_mime (1.0.1)
+    mini_portile2 (2.4.0)
+    minitest (5.11.3)
+    nio4r (2.3.1)
+    nokogiri (1.10.1)
+      mini_portile2 (~> 2.4.0)
+    rack (2.0.6)
+    rack-proxy (0.6.5)
+      rack
+    rack-test (1.1.0)
+      rack (>= 1.0, < 3)
+    rails (5.2.2)
+      actioncable (= 5.2.2)
+      actionmailer (= 5.2.2)
+      actionpack (= 5.2.2)
+      actionview (= 5.2.2)
+      activejob (= 5.2.2)
+      activemodel (= 5.2.2)
+      activerecord (= 5.2.2)
+      activestorage (= 5.2.2)
+      activesupport (= 5.2.2)
+      bundler (>= 1.3.0)
+      railties (= 5.2.2)
+      sprockets-rails (>= 2.0.0)
+    rails-dom-testing (2.0.3)
+      activesupport (>= 4.2.0)
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.0.4)
+      loofah (~> 2.2, >= 2.2.2)
+    railties (5.2.2)
+      actionpack (= 5.2.2)
+      activesupport (= 5.2.2)
+      method_source
+      rake (>= 0.8.7)
+      thor (>= 0.19.0, < 2.0)
+    rake (10.5.0)
+    sprockets (3.7.2)
+      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.3)
+    thread_safe (0.3.6)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    webpacker (3.5.5)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
+    websocket-driver (0.7.0)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  bundler (>= 1.2.2)
+  minitest (~> 5.0)
+  rails (>= 5.1)
+  rake (~> 10.0)
+  vue_rails!
+  webpacker
+
+BUNDLED WITH
+   2.0.1

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 纪亚荣
+
+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,279 @@
+# VueRails
+
+## Get started with Webpacker
+#### add webpacker and vue_rails to your gemfile
+```ruby
+gem 'webpacker'
+gem 'vue_rails'
+```
+
+#### run installers
+```shell
+$ bundle install
+$ rails webpacker:install
+$ rails webpacker:install:vue
+$ rails generate vue:install
+```
+
+#### confirm your webpacker source_entry path
+```
+|-- app
+   |-- javascript
+      |-- packs
+         |-- application.js
+         |-- vue_server_render.js
+      |-- vue_components
+         |-- hello.vue
+      |-- rails_vue_ujs.js
+```
+#### all the vue components should be initialized in `vue_componects`
+
+## Basic Usage
+
+**1. add javascript_pack_tag to application.html**
+```ruby
+<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+```
+**2. generate a controller and view**
+
+example:
+```shell
+$ rails generate controller home index
+```
+and don't forget the router config!
+
+**3. add vue_components in your home/index.html**
+```ruby
+<%= vue_component("hello") %>
+```
+
+multiple components render is also work!
+```
+<%= vue_component("hello") %>
+<%= vue_component("hello") %>
+<%= vue_component("hello") %>
+```
+
+**4. open the browser and check it, it should been works!** 
+
+## Advanced Usage
+
+### pass props to your components
+```ruby
+<%= vue_component("hello", {foo: 'bar'}) %>
+```
+in your component hello.vue:
+```vue
+<template>
+  <div id="app">
+    <p>{{ outside.foo }}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['outside'],
+    data: function () {
+      return {
+        message: "Hello Vue!"
+      }
+    }
+  }
+</script>
+```
+
+hash or array is also works
+```ruby
+<%= vue_component("hello", {foo: {name: 'Peter'}}) %>
+```
+
+```vue
+<template>
+  <div id="app">
+    <p>{{ outside.foo.name }}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['outside'],
+    data: function () {
+      return {
+        message: "Hello Vue!"
+      }
+    }
+  }
+</script>
+```
+
+```ruby
+<%= vue_component("hello", {foo: [1,2,3]}) %>
+```
+
+```vue
+<template>
+  <div id="app">
+  	<template v-for="i in outside.foo">
+  	  <div>{{i}}</div>
+	</template>	
+    <p>{{ outside.foo.name }}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['outside'],
+    data: function () {
+      return {
+        message: "Hello Vue!"
+      }
+    }
+  }
+</script>
+```
+
+### server side render
+**If you're just a component for rendering small parts, you should not use server side render!**
+
+with options `prerender`, server side will prerender a dom before vue components initialize in client side
+
+```
+<%= vue_component("hello", {foo: [1,2,3]}, {prerender: true}) %>
+```
+
+
+### server side render with vue-router
+```shell
+$ yarn add vue-router
+```
+in both application.js and vue_server_render.js
+```js
+import VueRouter from 'vue-router';
+
+RailsVueUJS.use(VueRouter);
+
+```
+
+and your vue component
+
+```html
+<template>
+    <div class="container">
+      <div class="content">
+        <router-view :outside="outside"></router-view>
+      </div>
+    </div>
+</template>
+
+<script>
+  import VueRouter from 'vue-router';
+  import PostList from './posts/index';
+  import PostDetail from './posts/show';
+  import newPost from './posts/new';
+  import EditPost from './posts/edit';
+
+  const routes = [
+    {
+      path: '/',
+      component: PostList,
+      name: 'post_index',
+      props: true
+    },
+    {
+      path: '/posts/new',
+      component: newPost,
+      name: 'new_post'
+    },
+    {
+      path: '/posts/edit/:id',
+      component: EditPost,
+      name: 'edit_post'
+    },
+    {
+      path: '/posts/:id',
+      component: PostDetail,
+      name: 'post_detail'
+    }
+  ];
+
+  const router = new VueRouter({
+    mode: 'history',
+    routes
+  });
+
+  export default {
+    props: ['outside'],
+    router
+  };
+</script>
+```
+
+option prerender can receive a path for vue router
+```html
+<%= vue_component("hello", {foo: [1,2,3]}, {prerender: request.path}) %>
+```
+
+in your routes.rb
+```ruby
+  get '*path', to: 'home#index'
+```
+
+### server side render with vuex
+```shell
+$ yarn add vuex
+```
+
+initialize a store
+
+```js
+import Vue from 'vue'
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+const store = new Vuex.Store({
+  state: {
+    currentUser: {},
+    hasLogin: false
+  }
+});
+
+export default store;
+```
+
+in both application.js and vue_server_render.js
+```js
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+import store from "../vue_components/store";
+
+RailsVueUJS.use(VueRouter, Vuex);
+RailsVueUJS.initializeVuexStore(store);
+...
+```
+
+in your html file
+```html
+<%= vue_component("hello", {foo: [1,2,3]}, {prerender: true, state: {
+  hasLogin: true
+}}) %>
+```
+
+with option `state`, it will replace your vuex state, for more information see the doc with vuex 
+
+in your component
+```html
+...
+<div v-if="$store.state.hasLogin">
+  <a href="/users/logout">logout</a>
+</div>
+...
+```
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Code of Conduct
+
+Everyone interacting in the VueRails project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/vue_rails/blob/master/CODE_OF_CONDUCT.md).