Merge pull request cerebral#208 from cerebral/VuePlugin

docs(website): fix get started docs for new Vue Plugin

Author: christianalfoni

packages/overmind-website/examples/guide/getstarted/connectapp.ts

@@ -25,14 +25,20 @@ export default connect(Posts)
   ],
   vue: [
     {
-      fileName: 'Posts.vue (template)',
-      target: 'markup',
+      fileName: 'index.js',
       code: `
-<h4 v-if="state.isLoadingPosts">
-  Loading posts...
-</h4>
-<div v-else></div>
-    `,
+import Vue from 'vue'
+import { OvermindPlugin } from './overmind'
+import Posts from './components/Posts'
+
+Vue.use(OvermindPlugin)
+
+new Vue({
+  el: '#app',
+  render: (h) => h(App),
+})
+
+`,
     },
   ],
 }

packages/overmind-website/examples/guide/getstarted/createapp.ts

@@ -1,11 +1,47 @@
 import { tsAppIndex } from '../../templates'
 
-export default (ts, view) =>
-  ts
-    ? [
-        {
-          fileName: 'overmind/state.ts',
-          code: `
+const javascript = {
+  react: [
+    {
+      fileName: 'overmind/index.js',
+      code: `
+import { Overmind } from 'overmind'
+import { createConnect } from 'overmind-react'
+
+export const overmind = new Overmind({
+  state: {
+    isLoadingPosts: false
+  }
+})
+
+export const connect = createConnect(overmind)
+`,
+    },
+  ],
+  vue: [
+    {
+      fileName: 'overmind/index.js',
+      code: `
+import { Overmind } from 'overmind'
+import { createPlugin } from 'overmind-vue'
+
+export const overmind = new Overmind({
+  state: {
+    isLoadingPosts: false
+  }
+})
+
+export const OvermindPlugin = createPlugin(overmind)
+`,
+    },
+  ],
+}
+
+const typescript = {
+  react: [
+    {
+      fileName: 'overmind/state.ts',
+      code: `
 export type Post = {
   id: number
   title: string
@@ -21,36 +57,58 @@ export const state: State = {
   isLoadingPosts: false,
   posts: []
 }
-    `,
-        },
-        {
-          fileName: 'overmind/index.ts',
-          code: tsAppIndex(
-            view,
-            `
+`,
+    },
+    {
+      fileName: 'overmind/index.ts',
+      code: tsAppIndex(
+        'react',
+        `
 import { state } from './state'
 
 const config = {
   state,
 }
 `
-          ),
-        },
-      ]
-    : [
-        {
-          fileName: 'overmind/index.js',
-          code: `
-import { Overmind } from 'overmind'
-import { createConnect } from 'overmind-${view}'
+      ),
+    },
+  ],
+  vue: javascript.vue,
+  angular: [
+    {
+      fileName: 'overmind/state.ts',
+      code: `
+export type Post = {
+  id: number
+  title: string
+  body: string
+}
 
-export const overmind = new Overmind({
-  state: {
-    isLoadingPosts: false
-  }
-})
+export type State = {
+  isLoadingPosts: boolean
+  posts: Post[]
+}
 
-export const connect = createConnect(overmind)
-    `,
-        },
-      ]
+export const state: State = {
+  isLoadingPosts: false,
+  posts: []
+}
+`,
+    },
+    {
+      fileName: 'overmind/index.ts',
+      code: tsAppIndex(
+        'angular',
+        `
+import { state } from './state'
+
+const config = {
+  state,
+}
+`
+      ),
+    },
+  ],
+}
+
+export default (ts, view) => (ts ? typescript[view] : javascript[view])

packages/overmind-website/guides/beginner/01_getstarted.md

@@ -4,10 +4,6 @@ If you are moving from an existing state management solution, please read the re
 
 To get started with Overmind you have to set up a project. You can do this with whatever tool your framework of choice provides or you can use [webpack](https://webpack.js.org/) or [parceljs](https://parceljs.org/). You can also use [codesandbox.io](https://codesandbox.io/) to play around with Overmind directly in the browser.
 
-```marksy
-h(TypescriptNotice, null, "Overmind requires Typescript version **3.2** or above")
-```
-
 ```marksy
 h(Notice, null, "Due to using the Proxy feature of JavaScript, Overmind does not support **Internet Explorer 11**.")
 ```
@@ -19,6 +15,12 @@ When you have your project up and running install the Overmind dependency by usi
 h(Example, { name: "guide/getstarted/install" })
 ```
 
+```marksy
+h(TypescriptNotice, null, "Overmind requires Typescript version **3.2** or above")
+```
+
+
+
 Great, we are good to go!
 
 ## Our first state
@@ -31,7 +33,7 @@ Let us imagine we get what we need from Overmind in a component:
 h(Example, { name: "guide/getstarted/loadingposts" })
 ```
 
-This will of course not work. To make this work we have to create an Overmind application instance.
+This will of course not work. To make this work we have to create an Overmind application instance and expose it to our component.
 
 ```marksy
 h(Example, { name: "guide/getstarted/createapp" })
@@ -43,7 +45,7 @@ Now that we have our application, let us expose it to our component.
 h(Example, { name: "guide/getstarted/connectapp" })
 ```
 
-That is it, your component will now render whenever the state accessed changes. 
+That is it, your component will now render whenever the state accessed changes. Please read more about connecting state to components in the [guides section](/guides).
 
 ## Effects