vue-generators 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7111d3c1bf4eb4b6f78b8ddc14fd15069cd577b035e7f49faacd4ea23522783d
-  data.tar.gz: 58248b82ab40d0ea8eb7d58b753b783adde13143dd6276979c4705d82a7c58c9
+  metadata.gz: 8ca22a1be57230f90cb0848c49db99329c9cb4eb3eebc90f30e797b98347dc95
+  data.tar.gz: 30f654be8f2d389b3f17ded84a6d5c23e90fbbe4a09fb2f4724e57041e5f4a90
 SHA512:
-  metadata.gz: affc94a7d4ff54352a5427f7d6bb5aa775bf0c28def06b0ccafd6b46698d3ed7980da9b8155aee34844e37cf048a6674ed05cb73020df3a3aec7895bd6daf0d7
-  data.tar.gz: 261ce989780e1abe7bd40c514cdbfd0b9a9f10e61480d4957318af7694ce1443d21bf2f4337713cf39d37a767018b70a491e92fe19dcd85e4be6ca0e2de11a19
+  metadata.gz: 9d4d78678668437f5694f7a383a17da40f1fbfaa2057f81a75c7d547c3ffea7ea0e6e41e23e1f9bcb952b396edc117330ef1118bca3ac0cace0bca91c390a3ea
+  data.tar.gz: 0bacaedd570143d4605a0bbd801eab4e0971ebe05eee83c48d7ea27a2176338a319656a3e7c23427a10947fad32ab966568ec588842f47069a1c9abd30ccbfba

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.1.2
+
+* Add store generation
+
 ## 0.1.1
 
 * Fix mixin generation path

data/README.md

@@ -1,6 +1,6 @@
 # Vue::Generators
-vue-generators is an opinionated library for generating Vue components and mixins
-for a Rails project.
+vue-generators is an opinionated library for generating Vue components, mixins,
+and stores for a Rails project.
 
 ## Usage
 
@@ -8,6 +8,7 @@ for a Rails project.
 ```bash
 rails g vue:component -h
 rails g vue:mixin -h
+rails g vue:store -h
 ```
 
 ### Generate a component
@@ -16,7 +17,9 @@ rails g vue:mixin -h
 rails g vue:component ButtonCounter
 ```
 
-*This will generate `app/javascript/components/ButtonCounter.vue`*
+**This will generate:**
+
+*`app/javascript/components/ButtonCounter.vue`*
 ```JavaScript
 <template>
   <div>
@@ -80,8 +83,9 @@ export default {
 ```bash
 rails g vue:mixin MyMixin
 ```
+**This will generate:**
 
-*This will generate `app/javascript/mixins/MyMixin.js`*
+*`app/javascript/mixins/MyMixin.js`*
 
 ```JavaScript
 export default {
@@ -120,6 +124,59 @@ export default {
   },
 }
 ```
+### Generate a store
+
+```bash
+rails g vue:store Application
+```
+
+**This will generate:**
+
+*`app/javascript/application/store/Store.js`*
+```JavaScript
+import { actions }    from "./actions"
+import { getters }    from "./getters"
+import { mutations }  from "./mutations"
+import { state }      from "./state"
+
+export default {
+  namespaced: true,
+
+  actions:    actions,
+  getters:    getters,
+  mutations:  mutations,
+  state:      state
+}
+```
+
+*`app/javascript/application/store/actions.js`*
+```JavaScript
+export const actions = {
+
+}
+```
+
+*`app/javascript/application/store/getters.js`*
+```JavaScript
+export const getters = {
+
+}
+```
+
+*`app/javascript/application/store/mutations.js`*
+```JavaScript
+export const mutations = {
+}
+
+```
+
+*`app/javascript/application/store/state.js`*
+```JavaScript
+export const state = {
+
+}
+```
+
 
 ## Installation
 Add this line to your application's Gemfile:

data/lib/vue/generators/version.rb

@@ -1,5 +1,5 @@
 module Vue
   module Generators
-    VERSION = '0.1.1'
+    VERSION = '0.1.2'
   end
 end

data/lib/vue/generators/vue/store/USAGE

@@ -0,0 +1,23 @@
+Description:
+    Generates a namespaced, blank Vuex store split into multiple files
+
+Example:
+    rails generate vue:store Application
+
+    This will create:
+        app/javascript/application/store/Store.js
+        app/javascript/application/store/actions.js
+        app/javascript/application/store/getters.js
+        app/javascript/application/store/mutations.js
+        app/javascript/application/store/state.js
+
+Example:
+    rails generate vue:store pets/Kittens
+
+    This will create:
+        app/javascript/pets/kittens/store/Store.js
+        app/javascript/pets/kittens/store/actions.js
+        app/javascript/pets/kittens/store/getters.js
+        app/javascript/pets/kittens/store/mutations.js
+        app/javascript/pets/kittens/store/state.js
+

data/lib/vue/generators/vue/store/store_generator.rb

@@ -0,0 +1,24 @@
+module Vue
+  class StoreGenerator < Rails::Generators::NamedBase
+    source_root File.expand_path('../templates', __FILE__)
+
+    def generate_store
+      [
+        'Store', 'actions', 'getters', 'mutations', 'state'
+      ].each do |template|
+        template "#{template}.template", Rails.root.join("app", "javascript", *path, "#{template}.js")
+      end
+    end
+
+    private
+    def store_name
+      # name is from Rails::Generators::NamedBase which expects a single argument to the generator
+      store = name.split("/").last
+      store.camelize(:lower) # makesTheFirstLetterLowerCase
+    end
+
+    def path
+      name.split("/").map {|part| part.underscore.tr('_', '-') } + ['store']
+    end
+  end
+end

data/lib/vue/generators/vue/store/templates/Store.template

@@ -0,0 +1,27 @@
+import { actions }    from "./actions"
+import { getters }    from "./getters"
+import { mutations }  from "./mutations"
+import { state }      from "./state"
+
+// https://vuex.vuejs.org/guide/
+//
+// At the center of every Vuex application is the store. A "store" is basically a
+// container that holds your application state. There are two things that make a
+// Vuex store different from a plain global object:
+//
+// Vuex stores are reactive. When Vue components retrieve state from it, they will
+// reactively and efficiently update if the store's state changes.
+//
+// You cannot directly mutate the store's state. The only way to change a store's
+// state is by explicitly committing mutations. This ensures every state change
+// leaves a track-able record, and enables tooling that helps us better understand
+// our applications
+//
+export default {
+  namespaced: true,
+
+  actions:    actions,
+  getters:    getters,
+  mutations:  mutations,
+  state:      state
+}

data/lib/vue/generators/vue/store/templates/actions.template

@@ -0,0 +1,18 @@
+// https://vuex.vuejs.org/guide/actions.html
+//
+// Actions are similar to mutations, the differences being that:
+//  - Instead of mutating the state, actions commit mutations.
+//  - Actions can contain arbitrary asynchronous operations.
+//
+// Action handlers receive a context object which exposes the same set of
+// methods/properties on the store instance, so you can call context.commit to
+// commit a mutation, or access the state and getters via context.state and
+// context.getters. We can even call other actions with context.dispatch
+//
+// Mutations have to be synchronous. Actions don't
+export const actions = {
+  // // this.$store.dispatch('<%= store_name %>/createPost', { .. } )
+  // createPost(context, payload) {
+  //   ...
+  // },
+}

data/lib/vue/generators/vue/store/templates/getters.template

@@ -0,0 +1,15 @@
+// https://vuex.vuejs.org/guide/getters.html
+//
+// Getters provide a way to re-use a computation of derived state.  Getters
+// are like computed properties for stores.  A getter's result is cached based
+// on its dependencies, and will only re-evaluate when some of its dependencies
+// have changed.
+//
+export const getters = {
+  // /**
+  //  * getters['<%= store_name %>/counter']
+  //  */
+  // counter: (state) => () => {
+  //   return state.counter
+  // },
+}

data/lib/vue/generators/vue/store/templates/mutations.template

@@ -0,0 +1,16 @@
+// https://vuex.vuejs.org/guide/mutations.html
+//
+// The only way to actually change state in a Vuex store is by committing a
+// mutation. Vuex mutations are very similar to events: each mutation has a
+// string type and a handler. The handler function is where we perform actual
+// state modifications, and it will receive the state as the first argument
+//
+// One important rule to remember is that mutation handler functions must be
+// synchronous
+//
+export const mutations = {
+  // // this.$store.commit('<%= store_name %>/incrementCounter', 42 )
+  // setCounter(state, payload) {
+  //   state.counter = payload
+  // },
+}

data/lib/vue/generators/vue/store/templates/state.template

@@ -0,0 +1,12 @@
+// https://vuex.vuejs.org/guide/state.html
+//
+// Vuex uses a single state tree - that is, this single object contains all your
+// application level state and serves as the "single source of truth.
+//
+export const state = {
+  // // this.$store.state.<%= store_name %>.posts
+  // posts: [],
+
+  // // this.$store.state.<%= store_name %>.counter
+  // counter: 0
+}

data/lib/vue/generators.rb

@@ -1,2 +1,3 @@
 require "vue/generators/vue/component/component_generator.rb"
 require "vue/generators/vue/mixin/mixin_generator.rb"
+require "vue/generators/vue/store/store_generator.rb"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue-generators
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - John Naegle
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-02-01 00:00:00.000000000 Z
+date: 2019-04-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -59,6 +59,13 @@ files:
 - lib/vue/generators/vue/mixin/USAGE
 - lib/vue/generators/vue/mixin/mixin_generator.rb
 - lib/vue/generators/vue/mixin/templates/Mixin.template
+- lib/vue/generators/vue/store/USAGE
+- lib/vue/generators/vue/store/store_generator.rb
+- lib/vue/generators/vue/store/templates/Store.template
+- lib/vue/generators/vue/store/templates/actions.template
+- lib/vue/generators/vue/store/templates/getters.template
+- lib/vue/generators/vue/store/templates/mutations.template
+- lib/vue/generators/vue/store/templates/state.template
 homepage: https://github.com/GoodMeasuresLLC/vue-generators
 licenses:
 - MIT