@folklore/ads 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs.js +23 -26
- package/dist/es.js +22 -25
- package/package.json +2 -2
package/dist/cjs.js
CHANGED
|
@@ -32,12 +32,12 @@ var createDebug__default = /*#__PURE__*/_interopDefaultLegacy(createDebug);
|
|
|
32
32
|
const adPath = PropTypes__default["default"].string;
|
|
33
33
|
const adSize = PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].string]))]);
|
|
34
34
|
const adSizeMapping = PropTypes__default["default"].arrayOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), adSize])));
|
|
35
|
-
const
|
|
35
|
+
const adViewports = PropTypes__default["default"].objectOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].number));
|
|
36
|
+
const adSlot = PropTypes__default["default"].shape({
|
|
36
37
|
size: adSize,
|
|
37
38
|
sizeMapping: PropTypes__default["default"].objectOf(adSize)
|
|
38
39
|
});
|
|
39
|
-
const
|
|
40
|
-
const adViewports = PropTypes__default["default"].objectOf(PropTypes__default["default"].arrayOf(PropTypes__default["default"].number));
|
|
40
|
+
const adSlots = PropTypes__default["default"].objectOf(adSlot);
|
|
41
41
|
const adTargeting = PropTypes__default["default"].shape({
|
|
42
42
|
domain: PropTypes__default["default"].string
|
|
43
43
|
});
|
|
@@ -47,9 +47,9 @@ var propTypes$3 = /*#__PURE__*/Object.freeze({
|
|
|
47
47
|
adPath: adPath,
|
|
48
48
|
adSize: adSize,
|
|
49
49
|
adSizeMapping: adSizeMapping,
|
|
50
|
-
adPosition: adPosition,
|
|
51
|
-
adPositions: adPositions,
|
|
52
50
|
adViewports: adViewports,
|
|
51
|
+
adSlot: adSlot,
|
|
52
|
+
adSlots: adSlots,
|
|
53
53
|
adTargeting: adTargeting
|
|
54
54
|
});
|
|
55
55
|
|
|
@@ -85,7 +85,7 @@ const buildSizeMappingFromSizes = (sizes, viewports) => getSortedViewports(viewp
|
|
|
85
85
|
} = _ref2;
|
|
86
86
|
return [viewPortSize, sizes.filter(size => sizeFitsInViewport(size, name === 'default' ? [300, 300] : viewPortSize))];
|
|
87
87
|
});
|
|
88
|
-
const
|
|
88
|
+
const getSizeMappingFromSlot = (_ref3, viewports) => {
|
|
89
89
|
let {
|
|
90
90
|
size: allSizes = [],
|
|
91
91
|
sizeMapping = null
|
|
@@ -582,7 +582,7 @@ const viewports = {
|
|
|
582
582
|
desktop: [1024, 0],
|
|
583
583
|
laptop: [1400, 700]
|
|
584
584
|
};
|
|
585
|
-
const
|
|
585
|
+
const slots = {
|
|
586
586
|
top: {
|
|
587
587
|
size: [[320, 50], [1382, 600], [320, 100], [970, 90], [1024, 300], [970, 250], [300, 150], [1382, 300], [300, 100], [250, 250], [300, 250]],
|
|
588
588
|
sizeMapping: {
|
|
@@ -633,7 +633,7 @@ const propTypes$2 = {
|
|
|
633
633
|
autoInit: PropTypes__default["default"].bool,
|
|
634
634
|
resizeDebounceDelay: PropTypes__default["default"].number,
|
|
635
635
|
refreshOnResize: PropTypes__default["default"].bool,
|
|
636
|
-
|
|
636
|
+
slots: adSlots,
|
|
637
637
|
viewports: adViewports
|
|
638
638
|
};
|
|
639
639
|
const defaultProps$2 = {
|
|
@@ -643,7 +643,7 @@ const defaultProps$2 = {
|
|
|
643
643
|
autoInit: true,
|
|
644
644
|
resizeDebounceDelay: 500,
|
|
645
645
|
refreshOnResize: false,
|
|
646
|
-
|
|
646
|
+
slots: slots,
|
|
647
647
|
viewports: viewports
|
|
648
648
|
};
|
|
649
649
|
function AdsProvider(_ref) {
|
|
@@ -656,7 +656,7 @@ function AdsProvider(_ref) {
|
|
|
656
656
|
resizeDebounceDelay,
|
|
657
657
|
refreshOnResize,
|
|
658
658
|
viewports,
|
|
659
|
-
|
|
659
|
+
slots
|
|
660
660
|
} = _ref;
|
|
661
661
|
const [ready, setReady] = React.useState(false);
|
|
662
662
|
const adsRef = React.useRef(null);
|
|
@@ -704,14 +704,14 @@ function AdsProvider(_ref) {
|
|
|
704
704
|
ready,
|
|
705
705
|
ads,
|
|
706
706
|
viewports,
|
|
707
|
-
|
|
707
|
+
slots,
|
|
708
708
|
slotsPath: defaultSlotPath !== null ? {
|
|
709
709
|
default: defaultSlotPath,
|
|
710
710
|
...slotsPath
|
|
711
711
|
} : {
|
|
712
712
|
...slotsPath
|
|
713
713
|
}
|
|
714
|
-
}), [ready, ads, viewports,
|
|
714
|
+
}), [ready, ads, viewports, slots, slotsPath, defaultSlotPath]);
|
|
715
715
|
return /*#__PURE__*/jsxRuntime.jsx(AdsContext.Provider, {
|
|
716
716
|
value: value,
|
|
717
717
|
children: children
|
|
@@ -898,8 +898,7 @@ function useAd(path, size) {
|
|
|
898
898
|
}
|
|
899
899
|
|
|
900
900
|
const propTypes = {
|
|
901
|
-
|
|
902
|
-
slot: PropTypes__default["default"].string,
|
|
901
|
+
slot: PropTypes__default["default"].string.isRequired,
|
|
903
902
|
path: adPath,
|
|
904
903
|
size: adSize,
|
|
905
904
|
sizeMapping: adSizeMapping,
|
|
@@ -914,7 +913,6 @@ const propTypes = {
|
|
|
914
913
|
};
|
|
915
914
|
const defaultProps = {
|
|
916
915
|
path: null,
|
|
917
|
-
slot: 'default',
|
|
918
916
|
size: null,
|
|
919
917
|
sizeMapping: null,
|
|
920
918
|
targeting: null,
|
|
@@ -928,7 +926,6 @@ const defaultProps = {
|
|
|
928
926
|
};
|
|
929
927
|
function Ad(_ref) {
|
|
930
928
|
let {
|
|
931
|
-
position: positionName,
|
|
932
929
|
slot: slotName,
|
|
933
930
|
path,
|
|
934
931
|
size,
|
|
@@ -944,21 +941,21 @@ function Ad(_ref) {
|
|
|
944
941
|
} = _ref;
|
|
945
942
|
const {
|
|
946
943
|
viewports,
|
|
947
|
-
|
|
944
|
+
slots,
|
|
948
945
|
slotsPath
|
|
949
946
|
} = useAdsContext();
|
|
950
|
-
const
|
|
951
|
-
const finalPath = path || (slotName !== null ? slotsPath[slotName] : null) ||
|
|
952
|
-
const finalSize = size !== null ? size :
|
|
947
|
+
const slot = slotName !== null ? slots[slotName] || null : null;
|
|
948
|
+
const finalPath = path || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default;
|
|
949
|
+
const finalSize = size !== null ? size : slot.size;
|
|
953
950
|
|
|
954
951
|
// Targeting
|
|
955
952
|
const contextTargeting = useAdsTargeting();
|
|
956
|
-
const finalSizeMapping = React.useMemo(() => sizeMapping !== null ? sizeMapping :
|
|
957
|
-
const allTargeting = React.useMemo(() => contextTargeting !== null || targeting !== null ||
|
|
958
|
-
|
|
953
|
+
const finalSizeMapping = React.useMemo(() => sizeMapping !== null ? sizeMapping : getSizeMappingFromSlot(slot, viewports), [sizeMapping, slot, viewports]);
|
|
954
|
+
const allTargeting = React.useMemo(() => contextTargeting !== null || targeting !== null || slotName !== null ? {
|
|
955
|
+
slot: slotName,
|
|
959
956
|
...contextTargeting,
|
|
960
957
|
...targeting
|
|
961
|
-
} : null, [contextTargeting, targeting,
|
|
958
|
+
} : null, [contextTargeting, targeting, slotName]);
|
|
962
959
|
const finalAdTargeting = React.useMemo(() => {
|
|
963
960
|
const {
|
|
964
961
|
refreshAds = null,
|
|
@@ -1050,10 +1047,10 @@ exports.buildSizeMappingFromSizes = buildSizeMappingFromSizes;
|
|
|
1050
1047
|
exports.buildSizeMappingFromViewports = buildSizeMappingFromViewports;
|
|
1051
1048
|
exports.getAdSizes = getAdSizes;
|
|
1052
1049
|
exports.getMinimumAdSize = getMinimumAdSize;
|
|
1053
|
-
exports.
|
|
1050
|
+
exports.getSizeMappingFromSlot = getSizeMappingFromSlot;
|
|
1054
1051
|
exports.getSortedViewports = getSortedViewports;
|
|
1055
|
-
exports.positions = positions;
|
|
1056
1052
|
exports.sizeFitsInViewport = sizeFitsInViewport;
|
|
1053
|
+
exports.slots = slots;
|
|
1057
1054
|
exports.useAd = useAd;
|
|
1058
1055
|
exports.useAdsContext = useAdsContext;
|
|
1059
1056
|
exports.useAdsTargeting = useAdsTargeting;
|
package/dist/es.js
CHANGED
|
@@ -15,12 +15,12 @@ import { useTracking } from '@folklore/tracking';
|
|
|
15
15
|
const adPath = PropTypes.string;
|
|
16
16
|
const adSize = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.string), PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.arrayOf(PropTypes.string), PropTypes.string]))]);
|
|
17
17
|
const adSizeMapping = PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), adSize])));
|
|
18
|
-
const
|
|
18
|
+
const adViewports = PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number));
|
|
19
|
+
const adSlot = PropTypes.shape({
|
|
19
20
|
size: adSize,
|
|
20
21
|
sizeMapping: PropTypes.objectOf(adSize)
|
|
21
22
|
});
|
|
22
|
-
const
|
|
23
|
-
const adViewports = PropTypes.objectOf(PropTypes.arrayOf(PropTypes.number));
|
|
23
|
+
const adSlots = PropTypes.objectOf(adSlot);
|
|
24
24
|
const adTargeting = PropTypes.shape({
|
|
25
25
|
domain: PropTypes.string
|
|
26
26
|
});
|
|
@@ -30,9 +30,9 @@ var propTypes$3 = /*#__PURE__*/Object.freeze({
|
|
|
30
30
|
adPath: adPath,
|
|
31
31
|
adSize: adSize,
|
|
32
32
|
adSizeMapping: adSizeMapping,
|
|
33
|
-
adPosition: adPosition,
|
|
34
|
-
adPositions: adPositions,
|
|
35
33
|
adViewports: adViewports,
|
|
34
|
+
adSlot: adSlot,
|
|
35
|
+
adSlots: adSlots,
|
|
36
36
|
adTargeting: adTargeting
|
|
37
37
|
});
|
|
38
38
|
|
|
@@ -68,7 +68,7 @@ const buildSizeMappingFromSizes = (sizes, viewports) => getSortedViewports(viewp
|
|
|
68
68
|
} = _ref2;
|
|
69
69
|
return [viewPortSize, sizes.filter(size => sizeFitsInViewport(size, name === 'default' ? [300, 300] : viewPortSize))];
|
|
70
70
|
});
|
|
71
|
-
const
|
|
71
|
+
const getSizeMappingFromSlot = (_ref3, viewports) => {
|
|
72
72
|
let {
|
|
73
73
|
size: allSizes = [],
|
|
74
74
|
sizeMapping = null
|
|
@@ -565,7 +565,7 @@ const viewports = {
|
|
|
565
565
|
desktop: [1024, 0],
|
|
566
566
|
laptop: [1400, 700]
|
|
567
567
|
};
|
|
568
|
-
const
|
|
568
|
+
const slots = {
|
|
569
569
|
top: {
|
|
570
570
|
size: [[320, 50], [1382, 600], [320, 100], [970, 90], [1024, 300], [970, 250], [300, 150], [1382, 300], [300, 100], [250, 250], [300, 250]],
|
|
571
571
|
sizeMapping: {
|
|
@@ -616,7 +616,7 @@ const propTypes$2 = {
|
|
|
616
616
|
autoInit: PropTypes.bool,
|
|
617
617
|
resizeDebounceDelay: PropTypes.number,
|
|
618
618
|
refreshOnResize: PropTypes.bool,
|
|
619
|
-
|
|
619
|
+
slots: adSlots,
|
|
620
620
|
viewports: adViewports
|
|
621
621
|
};
|
|
622
622
|
const defaultProps$2 = {
|
|
@@ -626,7 +626,7 @@ const defaultProps$2 = {
|
|
|
626
626
|
autoInit: true,
|
|
627
627
|
resizeDebounceDelay: 500,
|
|
628
628
|
refreshOnResize: false,
|
|
629
|
-
|
|
629
|
+
slots: slots,
|
|
630
630
|
viewports: viewports
|
|
631
631
|
};
|
|
632
632
|
function AdsProvider(_ref) {
|
|
@@ -639,7 +639,7 @@ function AdsProvider(_ref) {
|
|
|
639
639
|
resizeDebounceDelay,
|
|
640
640
|
refreshOnResize,
|
|
641
641
|
viewports,
|
|
642
|
-
|
|
642
|
+
slots
|
|
643
643
|
} = _ref;
|
|
644
644
|
const [ready, setReady] = useState(false);
|
|
645
645
|
const adsRef = useRef(null);
|
|
@@ -687,14 +687,14 @@ function AdsProvider(_ref) {
|
|
|
687
687
|
ready,
|
|
688
688
|
ads,
|
|
689
689
|
viewports,
|
|
690
|
-
|
|
690
|
+
slots,
|
|
691
691
|
slotsPath: defaultSlotPath !== null ? {
|
|
692
692
|
default: defaultSlotPath,
|
|
693
693
|
...slotsPath
|
|
694
694
|
} : {
|
|
695
695
|
...slotsPath
|
|
696
696
|
}
|
|
697
|
-
}), [ready, ads, viewports,
|
|
697
|
+
}), [ready, ads, viewports, slots, slotsPath, defaultSlotPath]);
|
|
698
698
|
return /*#__PURE__*/jsx(AdsContext.Provider, {
|
|
699
699
|
value: value,
|
|
700
700
|
children: children
|
|
@@ -881,8 +881,7 @@ function useAd(path, size) {
|
|
|
881
881
|
}
|
|
882
882
|
|
|
883
883
|
const propTypes = {
|
|
884
|
-
|
|
885
|
-
slot: PropTypes.string,
|
|
884
|
+
slot: PropTypes.string.isRequired,
|
|
886
885
|
path: adPath,
|
|
887
886
|
size: adSize,
|
|
888
887
|
sizeMapping: adSizeMapping,
|
|
@@ -897,7 +896,6 @@ const propTypes = {
|
|
|
897
896
|
};
|
|
898
897
|
const defaultProps = {
|
|
899
898
|
path: null,
|
|
900
|
-
slot: 'default',
|
|
901
899
|
size: null,
|
|
902
900
|
sizeMapping: null,
|
|
903
901
|
targeting: null,
|
|
@@ -911,7 +909,6 @@ const defaultProps = {
|
|
|
911
909
|
};
|
|
912
910
|
function Ad(_ref) {
|
|
913
911
|
let {
|
|
914
|
-
position: positionName,
|
|
915
912
|
slot: slotName,
|
|
916
913
|
path,
|
|
917
914
|
size,
|
|
@@ -927,21 +924,21 @@ function Ad(_ref) {
|
|
|
927
924
|
} = _ref;
|
|
928
925
|
const {
|
|
929
926
|
viewports,
|
|
930
|
-
|
|
927
|
+
slots,
|
|
931
928
|
slotsPath
|
|
932
929
|
} = useAdsContext();
|
|
933
|
-
const
|
|
934
|
-
const finalPath = path || (slotName !== null ? slotsPath[slotName] : null) ||
|
|
935
|
-
const finalSize = size !== null ? size :
|
|
930
|
+
const slot = slotName !== null ? slots[slotName] || null : null;
|
|
931
|
+
const finalPath = path || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default;
|
|
932
|
+
const finalSize = size !== null ? size : slot.size;
|
|
936
933
|
|
|
937
934
|
// Targeting
|
|
938
935
|
const contextTargeting = useAdsTargeting();
|
|
939
|
-
const finalSizeMapping = useMemo(() => sizeMapping !== null ? sizeMapping :
|
|
940
|
-
const allTargeting = useMemo(() => contextTargeting !== null || targeting !== null ||
|
|
941
|
-
|
|
936
|
+
const finalSizeMapping = useMemo(() => sizeMapping !== null ? sizeMapping : getSizeMappingFromSlot(slot, viewports), [sizeMapping, slot, viewports]);
|
|
937
|
+
const allTargeting = useMemo(() => contextTargeting !== null || targeting !== null || slotName !== null ? {
|
|
938
|
+
slot: slotName,
|
|
942
939
|
...contextTargeting,
|
|
943
940
|
...targeting
|
|
944
|
-
} : null, [contextTargeting, targeting,
|
|
941
|
+
} : null, [contextTargeting, targeting, slotName]);
|
|
945
942
|
const finalAdTargeting = useMemo(() => {
|
|
946
943
|
const {
|
|
947
944
|
refreshAds = null,
|
|
@@ -1023,4 +1020,4 @@ function Ad(_ref) {
|
|
|
1023
1020
|
Ad.propTypes = propTypes;
|
|
1024
1021
|
Ad.defaultProps = defaultProps;
|
|
1025
1022
|
|
|
1026
|
-
export { Ad, AdSlot, AdsManager, AdsProvider, AdsTargetingProvider, propTypes$3 as PropTypes, buildSizeMappingFromSizes, buildSizeMappingFromViewports, getAdSizes, getMinimumAdSize,
|
|
1023
|
+
export { Ad, AdSlot, AdsManager, AdsProvider, AdsTargetingProvider, propTypes$3 as PropTypes, buildSizeMappingFromSizes, buildSizeMappingFromViewports, getAdSizes, getMinimumAdSize, getSizeMappingFromSlot, getSortedViewports, sizeFitsInViewport, slots, useAd, useAdsContext, useAdsTargeting, useTrackAd as useAdsTracking, viewports };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@folklore/ads",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "Ads library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"publishConfig": {
|
|
51
51
|
"access": "public"
|
|
52
52
|
},
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "534c66f1119953e57b47773878494c1b7bab2620",
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@folklore/hooks": "^0.0.41",
|
|
56
56
|
"@folklore/tracking": "^0.0.16",
|