feat: rename no-ssr to client-only (#35)

BREAKING CHANGE:

* the component is renamed from `<no-ssr>` to `<client-only>`
* the class name for the placeholder is renamed from `no-ssr-placeholder` to `client-only-placeholder`

README.md

@@ -1,40 +1,42 @@
-# vue-no-ssr
+# vue-client-only
 
-[![NPM version](https://img.shields.io/npm/v/vue-no-ssr.svg?style=flat)](https://npmjs.com/package/vue-no-ssr) [![NPM downloads](https://img.shields.io/npm/dm/vue-no-ssr.svg?style=flat)](https://npmjs.com/package/vue-no-ssr) [![CircleCI](https://circleci.com/gh/egoist/vue-no-ssr/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-no-ssr/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)
+[![NPM version](https://img.shields.io/npm/v/vue-client-only.svg?style=flat)](https://npmjs.com/package/vue-client-only) [![NPM downloads](https://img.shields.io/npm/dm/vue-client-only.svg?style=flat)](https://npmjs.com/package/vue-client-only) [![CircleCI](https://circleci.com/gh/egoist/vue-client-only/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-client-only/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)
 
 ## Install
 
 ```bash
-yarn add vue-no-ssr
+yarn add vue-client-only
 ```
 
+> __This branch is for latest version, switch to [1.x](https://github.com/egoist/vue-client-only/tree/1.x) branch for the `vue-no-ssr` docs.__
+
 ## Usage
 
 ```vue
 <template>
   <div id="app">
     <h1>My Website</h1>
-    <no-ssr>
+    <client-only>
       <!-- this component will only be rendered on client-side -->
       <comments />
-    </no-ssr>
+    </client-only>
   </div>
 </template>
 
 <script>
-  import NoSSR from 'vue-no-ssr'
+  import ClientOnly from 'vue-client-only'
 
   export default {
     components: {
-      'no-ssr': NoSSR
+      ClientOnly
     }
   }
 </script>
 ```
 
 ### Placeholder
 
-Use a slot or text as placeholder until `<no-ssr />` is mounted on client-side.
+Use a slot or text as placeholder until `<client-only />` is mounted on client-side.
 
 eg, show a loading indicator.
 
@@ -43,23 +45,23 @@ eg, show a loading indicator.
   <div id="app">
     <h1>My Website</h1>
     <!-- use slot -->
-    <no-ssr>
+    <client-only>
       <comments />
       <comments-placeholder slot="placeholder" />
-    </no-ssr>
+    </client-only>
     <!-- or use text -->
-    <no-ssr placeholder="Loading...">
+    <client-only placeholder="Loading...">
       <comments />
-    </no-ssr>
+    </client-only>
   </div>
 </template>
 
 <script>
-  import NoSSR from 'vue-no-ssr'
+  import ClientOnly from 'vue-client-only'
 
   export default {
     components: {
-      'no-ssr': NoSSR
+      ClientOnly
     }
   }
 </script>
@@ -68,21 +70,21 @@ eg, show a loading indicator.
 By default the placeholder will be wrapped in a `div` tag, however you can use `placeholderTag` prop to customize it:
 
 ```vue
-<no-ssr placeholder="loading" placeholder-tag="span">
+<client-only placeholder="loading" placeholder-tag="span">
   <comments />
-</no-ssr>
+</client-only>
 ```
 
 And you get:
 
 ```html
-<span class="no-ssr-placeholder">
+<span class="client-only-placeholder">
   loading
 </span>
 ```
 
 If prop `placeholder` is an empty string (or `null`) and no `placeholder`
-slot is found, then `<no-ssr>` will render the Vue placeholder element `<!---->`
+slot is found, then `<client-only>` will render the Vue placeholder element `<!---->`
 instead of rendering the `placholder-tag` during SSR render.
 
 ## Development
@@ -105,7 +107,7 @@ yarn example
 
 ## Author
 
-**vue-no-ssr** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
-Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-no-ssr/contributors)).
+**vue-client-only** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
+Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-client-only/contributors)).
 
 > [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)

bili.config.js

@@ -2,7 +2,7 @@ const format = process.env.FORMAT
 
 exports.format = format
 
-exports.moduleName = 'NoSSR'
+exports.moduleName = 'ClientOnly'
 
 exports.banner = true
 

circle.yml

@@ -1,15 +1,27 @@
-machine:
-  node:
-    version: 7
-  environment:
-    PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
-
-dependencies:
-  override:
-    - yarn
-  cache_directories:
-    - ~/.cache/yarn
-
-test:
-  override:
-    - yarn test
+version: 2
+jobs:
+  build:
+    working_directory: ~/repo
+    docker:
+      - image: circleci/node:latest
+    branches:
+      ignore:
+        - gh-pages # list of branches to ignore
+        - /release\/.*/ # or ignore regexes
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+      - run:
+          name: install dependences
+          command: yarn
+      - save_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: test
+          command: yarn test
+      - run:
+          name: release
+          command: npx semantic-release

example/App.vue

@@ -1,18 +1,18 @@
 <template>
   <div id="app">
     <h1>Home</h1>
-    <no-ssr placeholder="hi">
+    <client-only placeholder="hi">
       <h2>This part is rendered on the client-side only</h2>
-    </no-ssr>
+    </client-only>
   </div>
 </template>
 
 <script>
-  import NoSSR from '../src'
+  import ClientOnly from '../src'
 
   export default {
     components: {
-      'no-ssr': NoSSR
+      ClientOnly
     }
   }
 </script>

package.json

@@ -1,13 +1,13 @@
 {
-  "name": "vue-no-ssr",
-  "version": "1.1.1",
+  "name": "vue-client-only",
+  "version": "0.0.0-semantic-release",
   "description": "Vue component to wrap non SSR friendly components",
   "repository": {
-    "url": "egoist/vue-no-ssr",
+    "url": "egoist/vue-client-only",
     "type": "git"
   },
-  "main": "dist/vue-no-ssr.common.js",
-  "unpkg": "dist/vue-no-ssr.min.js",
+  "main": "dist/vue-client-only.common.js",
+  "unpkg": "dist/vue-client-only.min.js",
   "files": [
     "dist"
   ],

src/index.js

@@ -1,5 +1,5 @@
 export default {
-  name: 'NoSsr',
+  name: 'ClientOnly',
   functional: true,
   props: {
     placeholder: String,
@@ -23,7 +23,7 @@ export default {
       return h(
         props.placeholderTag,
         {
-          class: ['no-ssr-placeholder']
+          class: ['client-only-placeholder']
         },
         props.placeholder || placeholderSlot
       )