Skip to content

Commit 645e4c6

Browse files
bietkulbietkul
committed
fix(vue): tree-shaking issues with reactivecomponent
1 parent 10eaaed commit 645e4c6

File tree

5 files changed

+94
-100
lines changed

5 files changed

+94
-100
lines changed

‎packages/vue/src/components/basic/ReactiveComponent.jsx‎

Lines changed: 1 addition & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,6 @@ import {
1111
import ComponentWrapper from './ComponentWrapper.jsx';
1212
import PreferencesConsumer from './PreferencesConsumer.jsx';
1313
import types from '../../utils/vueTypes';
14-
import { RLConnected as ReactiveList } from '../result/ReactiveList.jsx';
15-
import { SBConnected as SearchBox } from '../search/SearchBox.jsx';
16-
import { ListConnected as SingleList } from '../list/SingleList.jsx';
17-
import { ListConnected as MultiList } from '../list/MultiList.jsx';
18-
import { ListConnected as SingleDropdownList } from '../list/SingleDropdownList.jsx';
19-
import { ListConnected as MultiDropdownList } from '../list/MultiDropdownList.jsx';
20-
import { TBConnected as ToggleButton } from '../list/ToggleButton.jsx';
21-
import { RangeConnected as DynamicRangeSlider } from '../range/DynamicRangeSlider.jsx';
22-
import { RangeConnected as SingleRange } from '../range/SingleRange.jsx';
23-
import { RangeConnected as MultiRange } from '../range/MultiRange.jsx';
24-
import { RangeConnected as RangeSlider } from '../range/RangeSlider.jsx';
25-
import { RangeConnected as RangeInput } from '../range/RangeInput.jsx';
2614

2715
const { updateQuery, setQueryOptions, setCustomQuery, setDefaultQuery } = Actions;
2816
const {
@@ -340,50 +328,7 @@ const ConnectedComponent = ComponentWrapper(
340328
const RcConnected = PreferencesConsumer({
341329
name: 'RcConnected',
342330
render() {
343-
let component = ConnectedComponent;
344-
switch (this.$attrs.componentType) {
345-
case componentTypes.reactiveList:
346-
component = ReactiveList;
347-
break;
348-
case componentTypes.searchBox:
349-
component = SearchBox;
350-
break;
351-
// list components
352-
case componentTypes.singleList:
353-
component = SingleList;
354-
break;
355-
case componentTypes.multiList:
356-
component = MultiList;
357-
break;
358-
case componentTypes.singleDropdownList:
359-
component = SingleDropdownList;
360-
break;
361-
case componentTypes.multiDropdownList:
362-
component = MultiDropdownList;
363-
break;
364-
// basic components
365-
case componentTypes.toggleButton:
366-
component = ToggleButton;
367-
break;
368-
// range components
369-
case componentTypes.dynamicRangeSlider:
370-
component = DynamicRangeSlider;
371-
break;
372-
case componentTypes.singleRange:
373-
component = SingleRange;
374-
break;
375-
case componentTypes.multiRange:
376-
component = MultiRange;
377-
break;
378-
case componentTypes.rangeSlider:
379-
component = RangeSlider;
380-
break;
381-
case componentTypes.rangeInput:
382-
component = RangeInput;
383-
break;
384-
default:
385-
}
386-
return h(component, null, this.$slots);
331+
return h(ConnectedComponent, null, this.$slots);
387332
},
388333
});
389334
RcConnected.name = ReactiveComponent.name;

‎packages/vue/src/components/basic/ReactiveComponentPrivate.jsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
2+
import { h } from 'vue';
3+
import PreferencesConsumer from './PreferencesConsumer.jsx';
4+
import { RLConnected as ReactiveList } from '../result/ReactiveList.jsx';
5+
import { SBConnected as SearchBox } from '../search/SearchBox.jsx';
6+
import { ListConnected as SingleList } from '../list/SingleList.jsx';
7+
import { ListConnected as MultiList } from '../list/MultiList.jsx';
8+
import { ListConnected as SingleDropdownList } from '../list/SingleDropdownList.jsx';
9+
import { ListConnected as MultiDropdownList } from '../list/MultiDropdownList.jsx';
10+
import { TBConnected as ToggleButton } from '../list/ToggleButton.jsx';
11+
import { RangeConnected as DynamicRangeSlider } from '../range/DynamicRangeSlider.jsx';
12+
import { RangeConnected as SingleRange } from '../range/SingleRange.jsx';
13+
import { RangeConnected as MultiRange } from '../range/MultiRange.jsx';
14+
import { RangeConnected as RangeSlider } from '../range/RangeSlider.jsx';
15+
import { RangeConnected as RangeInput } from '../range/RangeInput.jsx';
16+
import ReactiveComponent from './ReactiveComponent.jsx';
17+
18+
const RcConnected = PreferencesConsumer({
19+
name: 'RcConnected',
20+
render() {
21+
let component = ReactiveComponent;
22+
switch (this.$attrs.componentType) {
23+
case componentTypes.reactiveList:
24+
component = ReactiveList;
25+
break;
26+
case componentTypes.searchBox:
27+
component = SearchBox;
28+
break;
29+
// list components
30+
case componentTypes.singleList:
31+
component = SingleList;
32+
break;
33+
case componentTypes.multiList:
34+
component = MultiList;
35+
break;
36+
case componentTypes.singleDropdownList:
37+
component = SingleDropdownList;
38+
break;
39+
case componentTypes.multiDropdownList:
40+
component = MultiDropdownList;
41+
break;
42+
// basic components
43+
case componentTypes.toggleButton:
44+
component = ToggleButton;
45+
break;
46+
// range components
47+
case componentTypes.dynamicRangeSlider:
48+
component = DynamicRangeSlider;
49+
break;
50+
case componentTypes.singleRange:
51+
component = SingleRange;
52+
break;
53+
case componentTypes.multiRange:
54+
component = MultiRange;
55+
break;
56+
case componentTypes.rangeSlider:
57+
component = RangeSlider;
58+
break;
59+
case componentTypes.rangeInput:
60+
component = RangeInput;
61+
break;
62+
default:
63+
}
64+
return h(component, null, this.$slots);
65+
},
66+
});
67+
RcConnected.name = ReactiveComponent.name;
68+
RcConnected.hasInternalComponent = ReactiveComponent.hasInternalComponent;
69+
// Add componentType for SSR
70+
RcConnected.componentType = componentTypes.reactiveComponent;
71+
RcConnected.install = function (Vue) {
72+
Vue.component(RcConnected.name, RcConnected);
73+
};
74+
export default RcConnected;

‎packages/vue/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import SingleDropdownList from './components/list/SingleDropdownList.jsx';
1313
import MultiDropdownList from './components/list/MultiDropdownList.jsx';
1414
import ToggleButton from './components/list/ToggleButton.jsx';
1515
import ReactiveComponent from './components/basic/ReactiveComponent.jsx';
16+
import ReactiveComponentPrivate from './components/basic/ReactiveComponentPrivate.jsx';
1617
import SelectedFilters from './components/basic/SelectedFilters.jsx';
1718
import SingleRange from './components/range/SingleRange.jsx';
1819
import MultiRange from './components/range/MultiRange.jsx';
@@ -47,6 +48,7 @@ export {
4748
RangeSlider,
4849
DynamicRangeSlider,
4950
ReactiveComponent,
51+
ReactiveComponentPrivate,
5052
SelectedFilters,
5153
SingleDropdownList,
5254
MultiDropdownList,

‎packages/vue/src/install.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import SingleDropdownList from './components/list/SingleDropdownList.jsx';
88
import MultiDropdownList from './components/list/MultiDropdownList.jsx';
99
import ToggleButton from './components/list/ToggleButton.jsx';
1010
import ReactiveComponent from './components/basic/ReactiveComponent.jsx';
11+
import ReactiveComponentPrivate from './components/basic/ReactiveComponentPrivate.jsx';
1112
import SelectedFilters from './components/basic/SelectedFilters.jsx';
1213
import SingleRange from './components/range/SingleRange.jsx';
1314
import MultiRange from './components/range/MultiRange.jsx';
@@ -31,6 +32,7 @@ const components = [
3132
RangeSlider,
3233
DynamicRangeSlider,
3334
ReactiveComponent,
35+
ReactiveComponentPrivate,
3436
SelectedFilters,
3537
ToggleButton,
3638
SingleDropdownList,

‎yarn.lock‎

Lines changed: 15 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -104,11 +104,14 @@
104104
version "0.0.2"
105105
resolved "https://codeload.github.com/appbaseio/Docs/tar.gz/6bdb1a3a7a248d525433b6876ae34867c1f290a6"
106106
dependencies:
107-
"@appbaseio/designkit" "^0.11.0"
108-
"@appbaseio/reactivemaps" "^3.0.0-beta.17"
109-
"@appbaseio/reactivesearch" "^3.29.0"
107+
"@appbaseio/designkit" "^0.13.0"
108+
"@appbaseio/reactivemaps" "^3.0.0"
109+
"@appbaseio/reactivesearch" "^3.30.3"
110110
"@loadable/component" "^5.15.2"
111111
"@reach/router" "^1.2.1"
112+
"@typeform/embed" "^1.34.1"
113+
"@typeform/embed-react" "^1.13.0"
114+
add "^2.0.6"
112115
antd "^4.19.1"
113116
emotion "9.2.4"
114117
emotion-server "9.2.4"
@@ -136,13 +139,16 @@
136139
gatsby-remark-external-links "0.0.4"
137140
gatsby-remark-images "6.9.0"
138141
gatsby-remark-prismjs "6.9.0"
142+
gatsby-remark-prismjs-copy-button "^0.3.1"
139143
gatsby-source-filesystem "4.9.0"
140144
gatsby-source-ghost "4.2.4"
141-
gatsby-transformer-remark "5.9.0"
145+
gatsby-transformer-remark "5.25.1"
142146
gatsby-transformer-sharp "^4.9.0"
143147
gatsby-transformer-yaml "4.9.0"
148+
hotkeys-js "^3.8.7"
144149
js-search "^1.4.2"
145-
moment "^2.24.0"
150+
lodash "^4.17.21"
151+
moment "^2.29.4"
146152
prismjs "1.27.0"
147153
react "16.8.4"
148154
react-autosuggest "9.4.3"
@@ -152,8 +158,10 @@
152158
react-modal "3.8.1"
153159
react-responsive-modal "^4.0.1"
154160
react-router "^6.0.1"
155-
react-router-dom "4.3.1"
156-
tocbot "4.5.0"
161+
react-router-dom "^4.3.1"
162+
react-use-fusejs "^1.0.1"
163+
tocbot "^4.18.0"
164+
yarn "^1.22.18"
157165

158166
"@appbaseio/[email protected]":
159167
version "9.14.37"
@@ -166,43 +174,6 @@
166174
redux "^4.0.0"
167175
redux-thunk "^2.3.0"
168176

169-
"@appbaseio/[email protected]":
170-
version "9.14.39"
171-
resolved "https://registry.yarnpkg.com/@appbaseio/reactivecore/-/reactivecore-9.14.39.tgz#c9b9914ca6a6e8134b314d29060079db1d9b6427"
172-
integrity sha512-g1+1JNnnPAocbOeMFSnI7PMn3oaAvMPUkZp9mGUPJrSGXJodhvx9+/5NClk/OR+8+FtthSxlDN2GOUC4SSW8Gg==
173-
dependencies:
174-
cross-fetch "^3.0.4"
175-
dayjs "^1.11.7"
176-
prop-types "^15.6.0"
177-
redux "^4.0.0"
178-
redux-thunk "^2.3.0"
179-
180-
"@appbaseio/[email protected]":
181-
version "3.43.8"
182-
resolved "https://registry.yarnpkg.com/@appbaseio/reactivesearch/-/reactivesearch-3.43.8.tgz#3467d4de74a1c712f569808b7efc3628600a784d"
183-
integrity sha512-NemRlFcQ4UQ10Q+VB4vafvbRa4+q+e/2tkpkPHY+w3slxhIji96j5Jh7yLzN7luDxkZ8vWX/HcIVlT6rsZ+13w==
184-
dependencies:
185-
"@appbaseio/analytics" "^1.1.1"
186-
"@appbaseio/reactivecore" "9.14.39"
187-
"@appbaseio/rheostat" "^1.0.0-alpha.15"
188-
"@emotion/core" "^10.0.28"
189-
"@emotion/styled" "^10.0.27"
190-
appbase-js "^5.2.0"
191-
cross-env "^5.2.0"
192-
dayjs "^1.11.7"
193-
downshift "^1.31.2"
194-
echarts "^5.3.3"
195-
echarts-for-react "^3.0.2"
196-
emotion-theming "^10.0.27"
197-
hoist-non-react-statics "^3.2.1"
198-
hotkeys-js "^3.8.7"
199-
polished "^1.9.3"
200-
prop-types "^15.6.0"
201-
react-day-picker "^7.0.5"
202-
react-redux "^6.0.1"
203-
url-search-params-polyfill "^7.0.0"
204-
xss "^1.0.11"
205-
206177
"@appbaseio/reactivesearch@^3.29.0":
207178
version "3.43.7"
208179
resolved "https://registry.yarnpkg.com/@appbaseio/reactivesearch/-/reactivesearch-3.43.7.tgz#33e28f3ca20b44499856f3b5f470ab940c187c8d"

0 commit comments

Comments
 (0)