Skip to content

Commit a9efd8c

Browse files
committed
Merge branch 'main' into r102139999/hardcoded-strings-i18n
2 parents 79dfcee + cfa5ec5 commit a9efd8c

File tree

8 files changed

+90
-7
lines changed

8 files changed

+90
-7
lines changed

package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"intersection-observer": "0.12.0",
2828
"portal-vue": "2.1.7",
2929
"vue-i18n": "^8.28.2",
30-
"vue-virtual-scroller": "^1.0.10",
30+
"vue-virtual-scroller": "^1.1.2",
3131
"webpack-theme-resolver-plugin": "3.0.0"
3232
},
3333
"devDependencies": {

src/components/ContentNode/TabNavigator.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
<script>
3434
import Tabnav from 'docc-render/components/Tabnav.vue';
3535
import TabnavItem from 'docc-render/components/TabnavItem.vue';
36+
import ImageLoadingStrategy from 'docc-render/constants/ImageLoadingStrategy';
3637
3738
/**
3839
* Tab navigation component, that renders `ContentNode`,
@@ -46,6 +47,9 @@ export default {
4647
TabnavItem,
4748
Tabnav,
4849
},
50+
provide: {
51+
imageLoadingStrategy: ImageLoadingStrategy.eager,
52+
},
4953
props: {
5054
vertical: {
5155
type: Boolean,

src/components/ImageAsset.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,11 @@ function constructAttributes(sources) {
9393
export default {
9494
name: 'ImageAsset',
9595
mixins: [imageAsset],
96+
inject: {
97+
imageLoadingStrategy: {
98+
default: null,
99+
},
100+
},
96101
data: () => ({
97102
appState: AppStore.state,
98103
fallbackImageSrcSet: null,
@@ -109,7 +114,10 @@ export default {
109114
}) => lightVariantAttributes || darkVariantAttributes,
110115
darkVariantAttributes: ({ darkVariants }) => constructAttributes(darkVariants),
111116
lightVariantAttributes: ({ lightVariants }) => constructAttributes(lightVariants),
112-
loading: ({ appState }) => appState.imageLoadingStrategy,
117+
loading: ({ appState, imageLoadingStrategy }) => (
118+
// use an image loading strategy, injected by a parent component, or the default app one
119+
imageLoadingStrategy || appState.imageLoadingStrategy
120+
),
113121
preferredColorScheme: ({ appState }) => appState.preferredColorScheme,
114122
prefersAuto: ({ preferredColorScheme }) => preferredColorScheme === ColorScheme.auto,
115123
prefersDark: ({ preferredColorScheme }) => preferredColorScheme === ColorScheme.dark,

src/components/Navigator/NavigatorCard.vue

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,10 @@
4747
@keydown.up.exact.capture.prevent="focusPrev"
4848
@keydown.down.exact.capture.prevent="focusNext"
4949
>
50-
<DynamicScrollerItem v-bind="{ active, item, dataIndex: index }">
50+
<DynamicScrollerItem
51+
v-bind="{ active, item, dataIndex: index }"
52+
:ref="`dynamicScroller_${item.uid}`"
53+
>
5154
<NavigatorCardItem
5255
:item="item"
5356
:isRendered="active"
@@ -484,6 +487,18 @@ export default {
484487
// if we remove APIChanges, remove all related tags as well
485488
this.selectedTags = this.selectedTags.filter(t => !this.$t(ChangeNames[t]));
486489
},
490+
async activeUID(newUid, oldUID) {
491+
// Update the dynamicScroller item's size, when we change the UID,
492+
// to fix cases where applying styling that changes
493+
// the size of active items.
494+
await this.$nextTick();
495+
const item = this.$refs[`dynamicScroller_${oldUID}`];
496+
if (item && item.updateSize) {
497+
// call the `updateSize` method on the `DynamicScrollerItem`, since it wont get triggered,
498+
// on its own from changing the active item.
499+
item.updateSize();
500+
}
501+
},
487502
},
488503
methods: {
489504
toggleAllNodes() {

tests/unit/components/ContentNode/TabNavigator.spec.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import TabNavigator from '@/components/ContentNode/TabNavigator.vue';
1212
import { mount } from '@vue/test-utils';
1313
import Tabnav from '@/components/Tabnav.vue';
1414
import TabnavItem from '@/components/TabnavItem.vue';
15+
import ImageLoadingStrategy from '@/constants/ImageLoadingStrategy';
1516
import { flushPromises } from '../../../../test-utils';
1617

1718
const titles = ['Long tab title', 'A Longer tab title'];
@@ -45,6 +46,8 @@ describe('TabNavigator.spec', () => {
4546
});
4647
expect(wrapper.findAll(TabnavItem)).toHaveLength(2);
4748
expect(wrapper.find('.tabs-content').text()).toEqual('First');
49+
// eslint-disable-next-line no-underscore-dangle
50+
expect(wrapper.vm._provided).toHaveProperty('imageLoadingStrategy', ImageLoadingStrategy.eager);
4851
});
4952

5053
it('sets the TabNavigator in `vertical` mode', async () => {

tests/unit/components/ImageAsset.spec.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import { shallowMount } from '@vue/test-utils';
1212
import ImageAsset from 'docc-render/components/ImageAsset.vue';
1313

14+
import ImageLoadingStrategy from '@/constants/ImageLoadingStrategy';
1415
import { flushPromises } from '../../../test-utils';
1516

1617
jest.mock('docc-render/stores/AppStore', () => ({
@@ -431,4 +432,31 @@ describe('ImageAsset', () => {
431432

432433
consoleSpy.mockRestore();
433434
});
435+
436+
it('allows setting the loading strategy by a parent component', async () => {
437+
const url = 'https://www.example.com/image.png';
438+
const wrapper = shallowMount(ImageAsset, {
439+
provide: {
440+
imageLoadingStrategy: ImageLoadingStrategy.eager,
441+
},
442+
propsData: {
443+
variants: [
444+
{
445+
traits: [
446+
'2x',
447+
'light',
448+
],
449+
url,
450+
size: {
451+
width: 1202,
452+
height: 630,
453+
},
454+
},
455+
],
456+
},
457+
});
458+
459+
const image = wrapper.find('img');
460+
expect(image.attributes('loading')).toBe(ImageLoadingStrategy.eager);
461+
});
434462
});

tests/unit/components/Navigator/NavigatorCard.spec.js

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import NavigatorCard from '@/components/Navigator/NavigatorCard.vue';
1212
import BaseNavigatorCard from '@/components/Navigator/BaseNavigatorCard.vue';
1313
import { shallowMount } from '@vue/test-utils';
1414
import { TopicTypes } from '@/constants/TopicTypes';
15-
import { DynamicScroller } from 'vue-virtual-scroller';
15+
import { DynamicScroller, DynamicScrollerItem } from 'vue-virtual-scroller';
1616
import 'intersection-observer';
1717
import { INDEX_ROOT_KEY, SIDEBAR_ITEM_SIZE } from '@/constants/sidebar';
1818
import NavigatorCardItem from '@/components/Navigator/NavigatorCardItem.vue';
@@ -43,6 +43,16 @@ const DynamicScrollerStub = {
4343
scrollToItem: jest.fn(),
4444
},
4545
};
46+
47+
const DynamicScrollerItemStub = {
48+
name: DynamicScrollerItem.name,
49+
props: DynamicScrollerItem.props,
50+
template: '<div class="dynamic-scroller-item-stub"><slot/></div>',
51+
methods: {
52+
updateSize: jest.fn(),
53+
},
54+
};
55+
4656
const root0 = {
4757
type: TopicTypes.collection,
4858
path: '/documentation/testkit',
@@ -162,6 +172,7 @@ const createWrapper = ({ propsData, ...others } = {}) => shallowMount(NavigatorC
162172
},
163173
stubs: {
164174
DynamicScroller: DynamicScrollerStub,
175+
DynamicScrollerItem: DynamicScrollerItemStub,
165176
NavigatorCardItem: {
166177
props: NavigatorCardItem.props,
167178
template: '<div><button></button></div>',
@@ -1994,6 +2005,20 @@ describe('NavigatorCard', () => {
19942005
});
19952006
});
19962007

2008+
it('updates the size of the DynamicScrollerItem, for the previous UID item', async () => {
2009+
attachDivWithID(root0Child0.uid);
2010+
const wrapper = createWrapper();
2011+
await flushPromises();
2012+
const allItems = wrapper.findAll(NavigatorCardItem);
2013+
const allDynamicItems = wrapper.findAll(DynamicScrollerItemStub);
2014+
allItems.at(2).vm.$emit('navigate', root0Child1.uid);
2015+
await flushPromises();
2016+
expect(DynamicScrollerItemStub.methods.updateSize).toHaveBeenCalledTimes(1);
2017+
expect(DynamicScrollerItemStub.methods.updateSize.mock.instances[0]).toEqual(
2018+
allDynamicItems.at(1).vm,
2019+
);
2020+
});
2021+
19972022
it('allows going back/forward, relative to last opened item, ignoring foreign trees', async () => {
19982023
const duplicatedTree = {
19992024
type: 'article',

0 commit comments

Comments
 (0)