Skip to content

Commit 15128f5

Browse files
atinuxegoist
atinux
authored and
egoist
committed
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`
1 parent 41f9aa4 commit 15128f5

File tree

6 files changed

+61
-47
lines changed

6 files changed

+61
-47
lines changed

‎README.md

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,42 @@
1-
# vue-no-ssr
1+
# vue-client-only
22

3-
[![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)
3+
[![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)
44

55
## Install
66

77
```bash
8-
yarn add vue-no-ssr
8+
yarn add vue-client-only
99
```
1010

11+
> __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.__
12+
1113
## Usage
1214

1315
```vue
1416
<template>
1517
<div id="app">
1618
<h1>My Website</h1>
17-
<no-ssr>
19+
<client-only>
1820
<!-- this component will only be rendered on client-side -->
1921
<comments />
20-
</no-ssr>
22+
</client-only>
2123
</div>
2224
</template>
2325
2426
<script>
25-
import NoSSR from 'vue-no-ssr'
27+
import ClientOnly from 'vue-client-only'
2628
2729
export default {
2830
components: {
29-
'no-ssr': NoSSR
31+
ClientOnly
3032
}
3133
}
3234
</script>
3335
```
3436

3537
### Placeholder
3638

37-
Use a slot or text as placeholder until `<no-ssr />` is mounted on client-side.
39+
Use a slot or text as placeholder until `<client-only />` is mounted on client-side.
3840

3941
eg, show a loading indicator.
4042

@@ -43,23 +45,23 @@ eg, show a loading indicator.
4345
<div id="app">
4446
<h1>My Website</h1>
4547
<!-- use slot -->
46-
<no-ssr>
48+
<client-only>
4749
<comments />
4850
     <comments-placeholder slot="placeholder" />
49-
   </no-ssr>
51+
   </client-only>
5052
<!-- or use text -->
51-
<no-ssr placeholder="Loading...">
53+
<client-only placeholder="Loading...">
5254
<comments />
53-
</no-ssr>
55+
</client-only>
5456
</div>
5557
</template>
5658
5759
<script>
58-
import NoSSR from 'vue-no-ssr'
60+
import ClientOnly from 'vue-client-only'
5961
6062
export default {
6163
components: {
62-
'no-ssr': NoSSR
64+
ClientOnly
6365
}
6466
}
6567
</script>
@@ -68,21 +70,21 @@ eg, show a loading indicator.
6870
By default the placeholder will be wrapped in a `div` tag, however you can use `placeholderTag` prop to customize it:
6971

7072
```vue
71-
<no-ssr placeholder="loading" placeholder-tag="span">
73+
<client-only placeholder="loading" placeholder-tag="span">
7274
<comments />
73-
</no-ssr>
75+
</client-only>
7476
```
7577

7678
And you get:
7779

7880
```html
79-
<span class="no-ssr-placeholder">
81+
<span class="client-only-placeholder">
8082
loading
8183
</span>
8284
```
8385

8486
If prop `placeholder` is an empty string (or `null`) and no `placeholder`
85-
slot is found, then `<no-ssr>` will render the Vue placeholder element `<!---->`
87+
slot is found, then `<client-only>` will render the Vue placeholder element `<!---->`
8688
instead of rendering the `placholder-tag` during SSR render.
8789

8890
## Development
@@ -105,7 +107,7 @@ yarn example
105107

106108
## Author
107109

108-
**vue-no-ssr** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
109-
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-no-ssr/contributors)).
110+
**vue-client-only** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
111+
Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-client-only/contributors)).
110112

111113
> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)

‎bili.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const format = process.env.FORMAT
22

33
exports.format = format
44

5-
exports.moduleName = 'NoSSR'
5+
exports.moduleName = 'ClientOnly'
66

77
exports.banner = true
88

‎circle.yml

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
1-
machine:
2-
node:
3-
version: 7
4-
environment:
5-
PATH: "${PATH}:${HOME}/${CIRCLE_PROJECT_REPONAME}/node_modules/.bin"
6-
7-
dependencies:
8-
override:
9-
- yarn
10-
cache_directories:
11-
- ~/.cache/yarn
12-
13-
test:
14-
override:
15-
- yarn test
1+
version: 2
2+
jobs:
3+
build:
4+
working_directory: ~/repo
5+
docker:
6+
- image: circleci/node:latest
7+
branches:
8+
ignore:
9+
- gh-pages # list of branches to ignore
10+
- /release\/.*/ # or ignore regexes
11+
steps:
12+
- checkout
13+
- restore_cache:
14+
key: dependency-cache-{{ checksum "yarn.lock" }}
15+
- run:
16+
name: install dependences
17+
command: yarn
18+
- save_cache:
19+
key: dependency-cache-{{ checksum "yarn.lock" }}
20+
paths:
21+
- ./node_modules
22+
- run:
23+
name: test
24+
command: yarn test
25+
- run:
26+
name: release
27+
command: npx semantic-release

‎example/App.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<template>
22
<div id="app">
33
<h1>Home</h1>
4-
<no-ssr placeholder="hi">
4+
<client-only placeholder="hi">
55
<h2>This part is rendered on the client-side only</h2>
6-
</no-ssr>
6+
</client-only>
77
</div>
88
</template>
99

1010
<script>
11-
import NoSSR from '../src'
11+
import ClientOnly from '../src'
1212
1313
export default {
1414
components: {
15-
'no-ssr': NoSSR
15+
ClientOnly
1616
}
1717
}
1818
</script>

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
2-
"name": "vue-no-ssr",
3-
"version": "1.1.1",
2+
"name": "vue-client-only",
3+
"version": "0.0.0-semantic-release",
44
"description": "Vue component to wrap non SSR friendly components",
55
"repository": {
6-
"url": "egoist/vue-no-ssr",
6+
"url": "egoist/vue-client-only",
77
"type": "git"
88
},
9-
"main": "dist/vue-no-ssr.common.js",
10-
"unpkg": "dist/vue-no-ssr.min.js",
9+
"main": "dist/vue-client-only.common.js",
10+
"unpkg": "dist/vue-client-only.min.js",
1111
"files": [
1212
"dist"
1313
],

‎src/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
name: 'NoSsr',
2+
name: 'ClientOnly',
33
functional: true,
44
props: {
55
placeholder: String,
@@ -23,7 +23,7 @@ export default {
2323
return h(
2424
props.placeholderTag,
2525
{
26-
class: ['no-ssr-placeholder']
26+
class: ['client-only-placeholder']
2727
},
2828
props.placeholder || placeholderSlot
2929
)

0 commit comments

Comments
 (0)