ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update to use <client-only> instead of <no-ssr>

Browse Source
This commit is contained in:
Matt Rider 2019-08-26 17:09:24 +02:00
parent f11091c4ce
commit 2af4151918
24 changed files with 80 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/components/Comment.spec.js
View File

@ -8,7 +8,7 @@ const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(Styleguide)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
describe('Comment.vue', () => {
let propsData

4
webapp/components/Comment.vue
View File

@ -15,7 +15,7 @@
<hc-user :user="author" :date-time="comment.createdAt" />
</ds-space>
<!-- Content Menu (can open Modals) -->
<no-ssr>
<client-only>
<content-menu
placement="bottom-end"
resource-type="comment"
@ -25,7 +25,7 @@
:is-owner="isAuthor(author.id)"
@showEditCommentMenu="editCommentMenu"
/>
</no-ssr>
</client-only>
<ds-space margin-bottom="small" />
<div v-if="openEditCommentMenu">

2
webapp/components/CommentList/CommentList.spec.js
View File

@ -14,7 +14,7 @@ localVue.filter('truncate', string => string)
config.stubs['v-popover'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>'
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
describe('CommentList.vue', () => {
let mocks

2
webapp/components/ContributionForm/ContributionForm.spec.js
View File

@ -16,7 +16,7 @@ localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>'

4
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -14,7 +14,7 @@
<ds-space />
<ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
<small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small>
<no-ssr>
<client-only>
<hc-editor
:users="users"
:value="form.content"
@ -22,7 +22,7 @@
@input="updateEditorContent"
/>
<small class="smallTag">{{ form.contentLength }}/{{ contentMax }}</small>
</no-ssr>
</client-only>
<ds-space margin-bottom="xxx-large" />
<hc-categories-select
model="categoryIds"

4
webapp/components/CountTo.vue
View File

@ -1,6 +1,6 @@
<template>
<span>
<no-ssr placeholder="0" tag="span">
<client-only placeholder="0" tag="span">
<count-to
:start-val="startVal"
:end-val="endVal"
@ -8,7 +8,7 @@
:autoplay="autoplay"
:separator="separator"
/>
</no-ssr>
</client-only>
</span>
</template>

2
webapp/components/EditCommentForm/EditCommentForm.vue
View File

@ -2,7 +2,7 @@
<ds-form v-model="form" @submit="handleSubmit">
<template slot-scope="{ errors }">
<ds-card>
<!-- with no-ssr the content is not shown -->
<!-- with client-only the content is not shown -->
<hc-editor ref="editor" :users="users" :value="form.content" @input="updateEditorContent" />
<ds-space />
<ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">

2
webapp/components/PostCard/index.spec.js
View File

@ -10,7 +10,7 @@ localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>'
describe('PostCard', () => {

8
webapp/components/PostCard/index.vue
View File

@ -13,9 +13,9 @@
<ds-space margin-bottom="small" />
<!-- Username, Image & Date of Post -->
<div>
<no-ssr>
<client-only>
<hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
</no-ssr>
</client-only>
<hc-ribbon :text="$t('post.name')" />
</div>
<ds-space margin-bottom="small" />
@ -42,7 +42,7 @@
:icon="category.icon"
/>
</div>
<no-ssr>
<client-only>
<div style="display: inline-block; float: right">
<!-- Shouts Count -->
<span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
@ -63,7 +63,7 @@
:is-owner="isAuthor"
/>
</div>
</no-ssr>
</client-only>
</template>
</ds-card>
</template>

4
webapp/components/User/index.vue
View File

@ -25,9 +25,9 @@
<div v-if="dateTime" style="display: inline;">
<ds-text align="left" size="small" color="soft">
<ds-icon name="clock" />
<no-ssr>
<client-only>
<hc-relative-date-time :date-time="dateTime" />
</no-ssr>
</client-only>
</ds-text>
</div>
</div>

2
webapp/components/notifications/Notification/Notification.spec.js
View File

@ -8,7 +8,7 @@ const localVue = createLocalVue()
localVue.use(Styleguide)
localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
describe('Notification', () => {
let stubs

4
webapp/components/notifications/Notification/Notification.vue
View File

@ -1,6 +1,6 @@
<template>
<ds-space :class="[{ read: notification.read }, notification]" margin-bottom="x-small">
<no-ssr>
<client-only>
<ds-space margin-bottom="x-small">
<hc-user
v-if="resourceType == 'Post'"
@ -13,7 +13,7 @@
<ds-text color="soft">
{{ $t('notifications.menu.mentioned', { resource: resourceType }) }}
</ds-text>
</no-ssr>
</client-only>
<ds-space margin-bottom="x-small" />
<nuxt-link
class="notification-mention-post"

2
webapp/components/notifications/NotificationList/NotificationList.spec.js
View File

@ -13,7 +13,7 @@ localVue.use(Styleguide)
localVue.use(Filters)
localVue.filter('truncate', string => string)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>'
describe('NotificationList.vue', () => {

20
webapp/layouts/default.vue
View File

@ -37,14 +37,14 @@
:width="{ base: '15%', sm: '15%', md: '10%', lg: '10%' }"
:class="{ 'hide-mobile-menu': !toggleMobileMenu }"
>
<no-ssr>
<client-only>
<filter-posts
v-show="showFilterPostsDropdown"
placement="top-start"
offset="8"
:categories="categories"
/>
</no-ssr>
</client-only>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '100%', md: '10%', lg: '2%' }" />
<ds-flex-item
@ -59,14 +59,14 @@
'hide-mobile-menu': !toggleMobileMenu,
}"
>
<no-ssr>
<client-only>
<locale-switch class="topbar-locale-switch" placement="top" offset="8" />
</no-ssr>
</client-only>
<template v-if="isLoggedIn">
<no-ssr>
<client-only>
<notification-menu placement="top" />
</no-ssr>
<no-ssr>
</client-only>
<client-only>
<dropdown class="avatar-menu" offset="8">
<template slot="default" slot-scope="{ toggleMenu }">
<a
@ -113,7 +113,7 @@
</div>
</template>
</dropdown>
</no-ssr>
</client-only>
</template>
</div>
</ds-flex-item>
@ -140,9 +140,9 @@
<nuxt-link to="/changelog">{{ $t('site.changelog') }}</nuxt-link>
</div>
<div id="overlay" />
<no-ssr>
<client-only>
<modal />
</no-ssr>
</client-only>
</div>
</template>

40
webapp/pages/admin/index.vue
View File

@ -1,23 +1,23 @@
<template>
<ds-card>
<no-ssr>
<client-only>
<ds-space margin="large">
<ds-flex>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.users')" size="x-large" uppercase>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countUsers" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.posts')" size="x-large" uppercase>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countPosts" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
@ -29,9 +29,9 @@
size="x-large"
uppercase
>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countComments" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
@ -43,9 +43,9 @@
size="x-large"
uppercase
>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countNotifications" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
@ -57,9 +57,9 @@
size="x-large"
uppercase
>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countOrganizations" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
@ -71,42 +71,42 @@
size="x-large"
uppercase
>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countProjects" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.invites')" size="x-large" uppercase>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countInvites" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.follows')" size="x-large" uppercase>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countFollows" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
<ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
<ds-space margin="small">
<ds-number :count="0" :label="$t('admin.dashboard.shouts')" size="x-large" uppercase>
<no-ssr slot="count">
<client-only slot="count">
<hc-count-to :end-val="statistics.countShouts" />
</no-ssr>
</client-only>
</ds-number>
</ds-space>
</ds-flex-item>
</ds-flex>
</ds-space>
</no-ssr>
</client-only>
</ds-card>
</template>

2
webapp/pages/index.spec.js
View File

@ -15,7 +15,7 @@ localVue.use(Filters)
localVue.use(VTooltip)
localVue.use(InfiniteScroll)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['router-link'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>'

4
webapp/pages/index.vue
View File

@ -36,7 +36,7 @@
</ds-grid-item>
</template>
</masonry-grid>
<no-ssr>
<client-only>
<ds-button
v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }"
:path="{ name: 'post-create' }"
@ -45,7 +45,7 @@
size="x-large"
primary
/>
</no-ssr>
</client-only>
<div
v-if="hasMore"
v-infinite-scroll="showMoreContributions"

4
webapp/pages/login.vue
View File

@ -10,9 +10,9 @@
<ds-card class="login-card">
<ds-flex gutter="small">
<ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
<no-ssr>
<client-only>
<locale-switch class="login-locale-switch" offset="5" />
</no-ssr>
</client-only>
<ds-space margin-top="small" margin-bottom="xxx-small" centered>
<img
class="login-image"

2
webapp/pages/post/_id/_slug/index.spec.js
View File

@ -10,7 +10,7 @@ localVue.use(Vuex)
localVue.use(Styleguide)
localVue.use(Filters)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
describe('PostSlug', () => {
let wrapper

4
webapp/pages/post/_id/_slug/index.vue
View File

@ -8,7 +8,7 @@
<ds-space margin-bottom="small" />
<hc-user :user="post.author" :date-time="post.createdAt" />
<!-- Content Menu (can open Modals) -->
<no-ssr>
<client-only>
<content-menu
placement="bottom-end"
resource-type="contribution"
@ -16,7 +16,7 @@
:modalsData="menuModalsData"
:is-owner="isAuthor(post.author ? post.author.id : null)"
/>
</no-ssr>
</client-only>
<ds-space margin-bottom="small" />
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
<ds-space margin-bottom="small" />

2
webapp/pages/profile/_id/_slug.spec.js
View File

@ -13,7 +13,7 @@ localVue.use(Filters)
localVue.use(InfiniteScroll)
localVue.filter('date', d => d)
config.stubs['no-ssr'] = '<span><slot /></span>'
config.stubs['client-only'] = '<span><slot /></span>'
config.stubs['v-popover'] = '<span><slot /></span>'
config.stubs['nuxt-link'] = '<span><slot /></span>'

32
webapp/pages/profile/_id/_slug.vue
View File

@ -15,7 +15,7 @@
</hc-upload>
<hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
<!-- Menu -->
<no-ssr>
<client-only>
<content-menu
placement="bottom-end"
resource-type="user"
@ -25,7 +25,7 @@
@block="block"
@unblock="unblock"
/>
</no-ssr>
</client-only>
<ds-space margin="small">
<ds-heading tag="h3" align="center" no-margin>{{ userName }}</ds-heading>
<ds-text v-if="user.location" align="center" color="soft" size="small">
@ -41,18 +41,18 @@
</ds-space>
<ds-flex>
<ds-flex-item>
<no-ssr>
<client-only>
<ds-number :label="$t('profile.followers')">
<hc-count-to slot="count" :end-val="user.followedByCount" />
</ds-number>
</no-ssr>
</client-only>
</ds-flex-item>
<ds-flex-item>
<no-ssr>
<client-only>
<ds-number :label="$t('profile.following')">
<hc-count-to slot="count" :end-val="user.followingCount" />
</ds-number>
</no-ssr>
</client-only>
</ds-flex-item>
</ds-flex>
<ds-space margin="small">
@ -89,9 +89,9 @@
<template v-if="user.following && user.following.length">
<ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
<!-- TODO: find better solution for rendering errors -->
<no-ssr>
<client-only>
<user :user="follow" :trunc="15" />
</no-ssr>
</client-only>
</ds-space>
<ds-space v-if="user.followingCount - user.following.length" margin="small">
<ds-text size="small" color="softer">
@ -119,9 +119,9 @@
<template v-if="user.followedBy && user.followedBy.length">
<ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
<!-- TODO: find better solution for rendering errors -->
<no-ssr>
<client-only>
<user :user="follow" :trunc="15" />
</no-ssr>
</client-only>
</ds-space>
<ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
<ds-text size="small" color="softer">
@ -166,33 +166,33 @@
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'post' }">
<a @click="handleTab('post')">
<ds-space margin="small">
<no-ssr placeholder="Loading...">
<client-only placeholder="Loading...">
<ds-number :label="$t('common.post', null, user.contributionsCount)">
<hc-count-to slot="count" :end-val="user.contributionsCount" />
</ds-number>
</no-ssr>
</client-only>
</ds-space>
</a>
</li>
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'comment' }">
<a @click="handleTab('comment')">
<ds-space margin="small">
<no-ssr placeholder="Loading...">
<client-only placeholder="Loading...">
<ds-number :label="$t('profile.commented')">
<hc-count-to slot="count" :end-val="user.commentedCount" />
</ds-number>
</no-ssr>
</client-only>
</ds-space>
</a>
</li>
<li class="Tabs__tab Tab pointer" :class="{ active: tabActive === 'shout' }">
<a @click="handleTab('shout')">
<ds-space margin="small">
<no-ssr placeholder="Loading...">
<client-only placeholder="Loading...">
<ds-number :label="$t('profile.shouted')">
<hc-count-to slot="count" :end-val="user.shoutedCount" />
</ds-number>
</no-ssr>
</client-only>
</ds-space>
</a>
</li>

2
webapp/storybook/config.js
View File

@ -13,7 +13,7 @@ Vue.component('nuxt-link', {
},
template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>',
})
Vue.component('no-ssr', {
Vue.component('client-only', {
render() {
return this.$slots.default
},

6
webapp/yarn.lock
View File

@ -1318,7 +1318,7 @@
vue "^2.6.10"
vue-client-only "^2.0.0"
vue-meta "^2.2.1"
vue-no-ssr "^1.1.1"
vue-client-only "^1.1.1"
vue-router "~3.0.7"
vue-template-compiler "^2.6.10"
vuex "^3.1.1"
@ -15185,9 +15185,9 @@ vue-meta@^2.2.1:
dependencies:
deepmerge "^4.0.0"
vue-no-ssr@^1.1.1:
vue-client-only@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
vue-resize@^0.4.5: