Merge Develop into master

.gitignore

@@ -44,7 +44,7 @@ build/Release
 node_modules/
 jspm_packages/
 
-# Typescript v1 declaration files
+# TypeScript v1 declaration files
 typings/
 
 # Optional npm cache directory

deploy.sh

@@ -1,10 +1,10 @@
-y#!/usr/bin/env sh
+#!/usr/bin/env sh
 
 # abort on errors
 set -e
 
 # build
-yern docs:build
+yarn docs:build
 
 # navigate into the build output directory
 cd docs/.vuepress/dist

docs/.vuepress/config.js

@@ -1,6 +1,6 @@
 module.exports = {
-  title: 'Pulse Framework',
-  description: 'Global state and logic framework for reactive JavaScript applications.',
+  title: 'Pulse',
+  description: 'A global state and logic framework for reactive JavaScript & TypeScript applications.',
   dest: 'dist',
   serviceWorker: true,
   base: '/',
@@ -9,8 +9,8 @@ module.exports = {
     logo: '/logo.svg',
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Documentation', link: '/v3/introduction/what-is-pulse' },
-      { text: 'Changelog', link: '/v3/introduction/changelog' }
+      { text: 'Documentation', link: '/v4/introduction/what-is-pulse' },
+      { text: 'Changelog', link: '/v4/introduction/changelog' }
     ],
     lastUpdated: 'Last Updated',
     // Assumes GitHub. Can also be a full GitLab url.
@@ -149,6 +149,42 @@ module.exports = {
           collapsable: false,
           children: ['resources/snippets', 'getting-started/style-guide', 'resources/ideas']
         }
+      ],
+      '/v4/': [
+        {
+          title: 'Introduction',
+          collapsable: false,
+          children: ['introduction/what-is-pulse', 'introduction/changelog']
+        },
+        {
+          title: 'Getting Started',
+          collapsable: false,
+          children: [
+            'getting-started/concepts',
+            'getting-started/setup-with-react',
+            'getting-started/setup-with-vue',
+            'getting-started/setup-with-next'
+          ]
+        },
+        {
+          title: 'Documentation',
+          collapsable: false,
+          children: [
+            'docs/state',
+            'docs/collections',
+            'docs/actions',
+            // 'docs/controllers',
+            'docs/core',
+            'docs/route',
+            'docs/persisting-data',
+            'docs/events'
+          ]
+        },
+        {
+          title: 'Resources',
+          collapsable: false,
+          children: ['resources/snippets', 'getting-started/style-guide', 'resources/ideas']
+        }
       ]
     }
   },

docs/.vuepress/styles/index.styl

@@ -1,15 +1,22 @@
 $pulseRed = #EF425A;
-$pulseRedLighter = #ff8c9e;
+$pulseRedLighter = #FF6292;
 $pulseCodeBackground = #282e3f;
 $pulseGrey = #7e9ab3;
 $pulseFaint = #526577;
-$pulseGreen = #28EBB0;
+$pulseGreen = #00FFB2;
 $pulseYellow = #FFD696;
 $pulseWhite = #F7F8F8;
 $pulseLightBlue = #B6DCFF;
 
-table code 
-    line-height: 2em !important;
+table
+    tr, td, th
+        border-color: $pulseGrey;
+    tr:nth-child(2n)
+        background-color: $pulseCodeBackground;
+
+    code 
+        line-height: 2em !important;
+
 
 pre.vue-container
   border-left-width: .5rem;
@@ -37,6 +44,7 @@ pre.vue-container
 
 .theme-default-content:not(.custom)
     margin 0
+    max-width 820px
 
 @font-face {
   font-family: dank;
@@ -48,27 +56,26 @@ pre.vue-container
 // body, .sidebar, .navbar, .navbar .links {
 //   background-color: #1d1d1d !important;
 // }
-// .search-box input {
-//   background: #1d1d1d !important;
-// }
+.search-box input 
+  background-color: $codeBgColor !important;
 
-.custom-block.details {
+.custom-block.details 
     display: block;
     position: relative;
     border-radius: 3px;
     margin: 0.5em 0;
     padding: 0.6em 1.2em;
-    background-color: #eee;
-}
+    // background-color: #eee;
+
 
 .theme-default-content
     pre
-        background-color $pulseCodeBackground !important;
+        background-color $codeBgColor !important
         code 
-            color #CDD8E1 !important;
-            font-family: dank;
-            font-size: 1em;  
-
+            color #CDD8E1 !important
+            font-family dank
+            line-height 1.7rem !important
+            font-size 1rem !important
             // font-weight: bold;
 
 .theme-default-content a code
@@ -164,4 +171,9 @@ code.language-javascript,
     &.important
         color #a48774;
     &.entity
-        cursor help;
+        cursor help;
+
+
+.home .hero h1
+    font-size 6rem !important
+    font-weight 800 

docs/.vuepress/styles/palette.styl

@@ -1,7 +1,9 @@
 $accentColor = #EF425A
-$textColor = #2c3e50
-$borderColor = #eaecef
-$codeBgColor = #282c34
+$textColor = #9db2c8
+$codeBgColor = #131620
+$blockBgColor = #131620
+$borderColor = #1b1b1b
+$BgColor = #0e1117
 $badgeTipColor = #42b983
 $badgeWarningColor = darken(#ffe564, 35%)
 $badgeErrorColor = #DA5961

docs/.vuepress/theme/components/Navbar.vue

@@ -2,45 +2,33 @@
   <header class="navbar">
     <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
 
-    <RouterLink
-      :to="$localePath"
-      class="home-link"
-    >
-      <img
-        v-if="$site.themeConfig.logo"
-        class="logo"
-        :src="$withBase($site.themeConfig.logo)"
-        :alt="$siteTitle"
-      >
-      <span
-        v-if="$siteTitle"
-        ref="siteName"
-        class="site-name"
-        :class="{ 'can-hide': $site.themeConfig.logo }"
-      >{{ $siteTitle }}</span>
+    <RouterLink :to="$localePath" class="home-link">
+      <img v-if="$site.themeConfig.logo" class="logo" :src="$withBase($site.themeConfig.logo)" :alt="$siteTitle" />
+      <span v-if="$siteTitle" ref="siteName" class="site-name" :class="{ 'can-hide': $site.themeConfig.logo }">{{ $siteTitle }}</span>
     </RouterLink>
 
     <div
       class="links"
-      :style="linksWrapMaxWidth ? {
-        'max-width': linksWrapMaxWidth + 'px'
-      } : {}"
+      :style="
+        linksWrapMaxWidth
+          ? {
+              'max-width': linksWrapMaxWidth + 'px'
+            }
+          : {}
+      "
     >
-      <AlgoliaSearchBox
-        v-if="isAlgoliaSearch"
-        :options="algolia"
-      />
+      <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
       <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
       <NavLinks class="can-hide" />
     </div>
   </header>
 </template>
 
 <script>
-import AlgoliaSearchBox from '@AlgoliaSearchBox'
-import SearchBox from '@SearchBox'
-import SidebarButton from '@theme/components/SidebarButton.vue'
-import NavLinks from '@theme/components/NavLinks.vue'
+import AlgoliaSearchBox from '@AlgoliaSearchBox';
+import SearchBox from '@SearchBox';
+import SidebarButton from '@theme/components/SidebarButton.vue';
+import NavLinks from '@theme/components/NavLinks.vue';
 
 export default {
   name: 'Navbar',
@@ -52,43 +40,42 @@ export default {
     AlgoliaSearchBox
   },
 
-  data () {
+  data() {
     return {
       linksWrapMaxWidth: null
-    }
+    };
   },
 
   computed: {
-    algolia () {
-      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+    algolia() {
+      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {};
     },
 
-    isAlgoliaSearch () {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName
+    isAlgoliaSearch() {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName;
     }
   },
 
-  mounted () {
-    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
-    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
+  mounted() {
+    const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl
+    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'));
     const handleLinksWrapWidth = () => {
       if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.linksWrapMaxWidth = null
+        this.linksWrapMaxWidth = null;
       } else {
-        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
-          - (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
+        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING - ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
       }
-    }
-    handleLinksWrapWidth()
-    window.addEventListener('resize', handleLinksWrapWidth, false)
+    };
+    handleLinksWrapWidth();
+    window.addEventListener('resize', handleLinksWrapWidth, false);
   }
-}
+};
 
-function css (el, property) {
+function css(el, property) {
   // NOTE: Known bug, will return 'auto' if style value is 'auto'
-  const win = el.ownerDocument.defaultView
+  const win = el.ownerDocument.defaultView;
   // null means not to return pseudo styles
-  return win.getComputedStyle(el, null)[property]
+  return win.getComputedStyle(el, null)[property];
 }
 </script>
 
@@ -114,7 +101,6 @@ $navbar-horizontal-padding = 1.5rem
   .links
     padding-left 1.5rem
     box-sizing border-box
-    background-color white
     white-space nowrap
     font-size 0.9rem
     position absolute

docs/.vuepress/theme/styles/code.styl

@@ -4,7 +4,8 @@
     padding 0.25rem 0.5rem
     margin 0
     font-size 0.85em
-    background-color rgba(27,31,35,0.05)
+    // background-color rgba(27,31,35,0.05)
+    background-color $codeBgColor
     border-radius 3px
     .token
       &.deleted

docs/.vuepress/theme/styles/custom-blocks.styl

@@ -1,3 +1,4 @@
+$pulseCodeBackground = #282e3f;
 .custom-block
   .custom-block-title
     font-weight 600
@@ -8,22 +9,22 @@
     border-left-style solid
     margin 1rem 0
   &.tip
-    background-color #f3f5f7
+    background-color $blockBgColor
     border-color #42b983
   &.warning
-    background-color rgba(255,229,100,.3)
+    background-color #3b3510
     border-color darken(#ffe564, 35%)
-    color darken(#ffe564, 70%)
+    color darken(#ffe564, 10%)
     .custom-block-title
       color darken(#ffe564, 50%)
     a
       color $textColor
   &.danger
-    background-color #ffe6e6
+    background-color #4d1515
     border-color darken(red, 20%)
-    color darken(red, 70%)
+    color lighten(#4d1515, 60%)
     .custom-block-title
-      color darken(red, 40%)
+      color lighten(#4d1515, 80%)
     a
       color $textColor
   &.details
@@ -32,7 +33,7 @@
     border-radius 2px
     margin 1.6em 0
     padding 1.6em
-    background-color #eee
+    background-color $pulseCodeBackground
     h4
       margin-top 0
     figure, p