@wix/headless-instagram 0.0.8 → 0.0.10
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/cjs/dist/react/InstagramFeed.js +11 -4
- package/cjs/dist/react/InstagramFeedRoot.js +9 -6
- package/cjs/dist/react/InstagramMedia.js +80 -40
- package/cjs/dist/react/InstagramMedias.js +45 -6
- package/cjs/dist/react/UserName.js +45 -6
- package/cjs/dist/react/core/InstagramMedia.js +19 -12
- package/cjs/dist/react/core/InstagramMedias.js +7 -4
- package/cjs/dist/react/core/Root.js +9 -6
- package/cjs/dist/react/core/UserName.js +7 -4
- package/cjs/dist/react/core/index.js +15 -4
- package/cjs/dist/react/index.js +39 -2
- package/cjs/dist/services/index.js +10 -2
- package/cjs/dist/services/instagram-feed-service.js +16 -12
- package/cjs/dist/services/instagram-media-item-service.js +8 -5
- package/package.json +4 -4
- package/cjs/dist/vitest.setup.d.ts +0 -1
- package/cjs/dist/vitest.setup.js +0 -1
- package/dist/vitest.setup.d.ts +0 -1
- package/dist/vitest.setup.js +0 -1
|
@@ -1,6 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
// Instagram Feed compound component exports following stores pattern
|
|
2
3
|
// This file creates the Instagram namespace with all components
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
5
|
+
exports.InstagramMedia = exports.InstagramMedias = exports.UserName = exports.Root = void 0;
|
|
6
|
+
var InstagramFeedRoot_js_1 = require("./InstagramFeedRoot.js");
|
|
7
|
+
Object.defineProperty(exports, "Root", { enumerable: true, get: function () { return InstagramFeedRoot_js_1.Root; } });
|
|
8
|
+
var UserName_js_1 = require("./UserName.js");
|
|
9
|
+
Object.defineProperty(exports, "UserName", { enumerable: true, get: function () { return UserName_js_1.UserName; } });
|
|
10
|
+
var InstagramMedias_js_1 = require("./InstagramMedias.js");
|
|
11
|
+
Object.defineProperty(exports, "InstagramMedias", { enumerable: true, get: function () { return InstagramMedias_js_1.InstagramMedias; } });
|
|
12
|
+
var InstagramMedia_js_1 = require("./InstagramMedia.js");
|
|
13
|
+
Object.defineProperty(exports, "InstagramMedia", { enumerable: true, get: function () { return InstagramMedia_js_1.InstagramMedia; } });
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Root = Root;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const services_manager_react_1 = require("@wix/services-manager-react");
|
|
6
|
+
const services_manager_1 = require("@wix/services-manager");
|
|
7
|
+
const index_js_1 = require("../services/index.js");
|
|
5
8
|
/**
|
|
6
9
|
* Root component that provides Instagram feed service context using WixServices.
|
|
7
10
|
* This follows the same service-based pattern as the stores package.
|
|
@@ -9,11 +12,11 @@ import { InstagramFeedService, InstagramFeedServiceDefinition, } from '../servic
|
|
|
9
12
|
* @order 1
|
|
10
13
|
* @component
|
|
11
14
|
*/
|
|
12
|
-
|
|
15
|
+
function Root(props) {
|
|
13
16
|
const { children, instagramFeedServiceConfig, className, ...attrs } = props;
|
|
14
17
|
const attributes = {
|
|
15
18
|
className,
|
|
16
19
|
...attrs,
|
|
17
20
|
};
|
|
18
|
-
return (
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)(services_manager_react_1.WixServices, { servicesMap: (0, services_manager_1.createServicesMap)().addService(index_js_1.InstagramFeedServiceDefinition, index_js_1.InstagramFeedService, instagramFeedServiceConfig), children: (0, jsx_runtime_1.jsx)("div", { ...attributes, children: children }) }));
|
|
19
22
|
}
|
|
@@ -1,71 +1,111 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.InstagramMedia = exports.MediaGalleryItems = exports.MediaGalleries = exports.Timestamp = exports.UserName = exports.MediaType = exports.Caption = exports.TestIds = exports.MediaGalleryRepeater = void 0;
|
|
40
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
|
+
const react_1 = __importDefault(require("react"));
|
|
42
|
+
const react_2 = require("@wix/headless-utils/react");
|
|
43
|
+
const CoreInstagramMedia = __importStar(require("./core/InstagramMedia.js"));
|
|
44
|
+
const services_manager_react_1 = require("@wix/services-manager-react");
|
|
45
|
+
const services_manager_1 = require("@wix/services-manager");
|
|
46
|
+
const index_js_1 = require("../services/index.js");
|
|
47
|
+
const CoreInstagramMedias = __importStar(require("./core/InstagramMedias.js"));
|
|
48
|
+
const react_3 = require("@wix/headless-media/react");
|
|
10
49
|
/**
|
|
11
50
|
* Repeats children for each Instagram media item, providing a per-item service context.
|
|
12
51
|
*/
|
|
13
|
-
|
|
14
|
-
return (
|
|
52
|
+
const MediaGalleryRepeater = ({ children, }) => {
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(CoreInstagramMedias.InstagramMedias, { children: ({ hasItems, mediaItems }) => {
|
|
15
54
|
console.log('mediaItems', mediaItems);
|
|
16
55
|
if (!hasItems)
|
|
17
56
|
return null;
|
|
18
|
-
return (
|
|
57
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mediaItems.map((mediaItem, index) => {
|
|
19
58
|
console.log('mediaItem', mediaItem.mediaGalleryItems);
|
|
20
|
-
return (
|
|
59
|
+
return ((0, jsx_runtime_1.jsx)(services_manager_react_1.WixServices, { servicesMap: (0, services_manager_1.createServicesMap)().addService(index_js_1.InstagramMediaItemServiceDefinition, index_js_1.InstagramMediaItemService, { mediaItem, index }), children: (0, jsx_runtime_1.jsx)(react_3.MediaGallery.Root, { mediaGalleryServiceConfig: {
|
|
21
60
|
media: mediaItem.mediaGalleryItems,
|
|
22
61
|
}, children: children }) }, mediaItem.id || index));
|
|
23
62
|
}) }));
|
|
24
63
|
} }));
|
|
25
64
|
};
|
|
26
|
-
|
|
65
|
+
exports.MediaGalleryRepeater = MediaGalleryRepeater;
|
|
66
|
+
var TestIds;
|
|
27
67
|
(function (TestIds) {
|
|
28
68
|
TestIds["instagramMediaCaption"] = "instagram-media-caption";
|
|
29
69
|
TestIds["instagramMediaType"] = "instagram-media-type";
|
|
30
70
|
TestIds["instagramMediaUserName"] = "instagram-media-username";
|
|
31
71
|
TestIds["instagramMediaTimestamp"] = "instagram-media-timestamp";
|
|
32
72
|
TestIds["instagramMediaGalleries"] = "instagram-media-galleries";
|
|
33
|
-
})(TestIds || (TestIds = {}));
|
|
34
|
-
|
|
73
|
+
})(TestIds || (exports.TestIds = TestIds = {}));
|
|
74
|
+
exports.Caption = react_1.default.forwardRef((props, ref) => {
|
|
35
75
|
const { asChild, children, className, ...otherProps } = props;
|
|
36
|
-
return (
|
|
76
|
+
return ((0, jsx_runtime_1.jsx)(CoreInstagramMedia.Caption, { children: ({ caption }) => ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaCaption, customElement: children, customElementProps: { caption }, content: caption ?? '', ...otherProps, children: (0, jsx_runtime_1.jsx)("span", { children: caption }) })) }));
|
|
37
77
|
});
|
|
38
|
-
|
|
78
|
+
exports.MediaType = react_1.default.forwardRef((props, ref) => {
|
|
39
79
|
const { asChild, children, className, ...otherProps } = props;
|
|
40
|
-
return (
|
|
80
|
+
return ((0, jsx_runtime_1.jsx)(CoreInstagramMedia.MediaType, { children: ({ mediaType }) => ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaType, customElement: children, customElementProps: { mediaType }, content: mediaType, ...otherProps, children: (0, jsx_runtime_1.jsx)("span", { children: mediaType }) })) }));
|
|
41
81
|
});
|
|
42
|
-
|
|
82
|
+
exports.UserName = react_1.default.forwardRef((props, ref) => {
|
|
43
83
|
const { asChild, children, className, ...otherProps } = props;
|
|
44
|
-
return (
|
|
84
|
+
return ((0, jsx_runtime_1.jsx)(CoreInstagramMedia.UserName, { children: ({ userName }) => ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaUserName, customElement: children, customElementProps: { userName }, content: userName ?? '', ...otherProps, children: (0, jsx_runtime_1.jsx)("span", { children: userName }) })) }));
|
|
45
85
|
});
|
|
46
|
-
|
|
86
|
+
exports.Timestamp = react_1.default.forwardRef((props, ref) => {
|
|
47
87
|
const { asChild, children, className, ...otherProps } = props;
|
|
48
|
-
return (
|
|
88
|
+
return ((0, jsx_runtime_1.jsx)(CoreInstagramMedia.Timestamp, { children: ({ timestamp }) => ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.instagramMediaTimestamp, customElement: children, customElementProps: { timestamp }, content: timestamp, ...otherProps, children: (0, jsx_runtime_1.jsx)("time", { dateTime: timestamp, children: timestamp }) })) }));
|
|
49
89
|
});
|
|
50
|
-
|
|
90
|
+
exports.MediaGalleries = react_1.default.forwardRef((props, ref) => {
|
|
51
91
|
const { children, className, ...otherProps } = props;
|
|
52
|
-
return (
|
|
92
|
+
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, "data-testid": TestIds.instagramMediaGalleries, ...otherProps, children: children }));
|
|
53
93
|
});
|
|
54
|
-
|
|
55
|
-
return (
|
|
94
|
+
exports.MediaGalleryItems = react_1.default.forwardRef(({ children, className, ...otherProps }, ref) => {
|
|
95
|
+
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, ...otherProps, children: children }));
|
|
56
96
|
});
|
|
57
|
-
|
|
58
|
-
Root: ({ children }) =>
|
|
59
|
-
Caption,
|
|
60
|
-
MediaType,
|
|
61
|
-
UserName,
|
|
62
|
-
Timestamp,
|
|
63
|
-
MediaGalleries,
|
|
64
|
-
MediaGalleryItems,
|
|
65
|
-
MediaGalleryRepeater,
|
|
97
|
+
exports.InstagramMedia = {
|
|
98
|
+
Root: ({ children }) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }),
|
|
99
|
+
Caption: exports.Caption,
|
|
100
|
+
MediaType: exports.MediaType,
|
|
101
|
+
UserName: exports.UserName,
|
|
102
|
+
Timestamp: exports.Timestamp,
|
|
103
|
+
MediaGalleries: exports.MediaGalleries,
|
|
104
|
+
MediaGalleryItems: exports.MediaGalleryItems,
|
|
105
|
+
MediaGalleryRepeater: exports.MediaGalleryRepeater,
|
|
66
106
|
// lowercase aliases (new interface)
|
|
67
|
-
caption: Caption,
|
|
68
|
-
mediaType: MediaType,
|
|
69
|
-
userName: UserName,
|
|
70
|
-
timestamp: Timestamp,
|
|
107
|
+
caption: exports.Caption,
|
|
108
|
+
mediaType: exports.MediaType,
|
|
109
|
+
userName: exports.UserName,
|
|
110
|
+
timestamp: exports.Timestamp,
|
|
71
111
|
};
|
|
@@ -1,16 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.InstagramMedias = void 0;
|
|
40
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
|
+
const react_1 = __importDefault(require("react"));
|
|
42
|
+
const CoreInstagramMedias = __importStar(require("./core/InstagramMedias.js"));
|
|
4
43
|
/**
|
|
5
44
|
* Container for Instagram media items list.
|
|
6
45
|
* Renders nothing (or emptyState) when there are no media items.
|
|
7
46
|
*/
|
|
8
|
-
|
|
47
|
+
exports.InstagramMedias = react_1.default.forwardRef((props, ref) => {
|
|
9
48
|
const { children, emptyState } = props;
|
|
10
|
-
return (
|
|
49
|
+
return ((0, jsx_runtime_1.jsx)(CoreInstagramMedias.InstagramMedias, { children: ({ hasItems }) => {
|
|
11
50
|
if (!hasItems) {
|
|
12
51
|
return emptyState || null;
|
|
13
52
|
}
|
|
14
|
-
return
|
|
53
|
+
return (0, jsx_runtime_1.jsx)("div", { ref: ref, children: children });
|
|
15
54
|
} }));
|
|
16
55
|
});
|
|
@@ -1,8 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
+
};
|
|
38
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
+
exports.UserName = void 0;
|
|
40
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
|
+
const react_1 = __importDefault(require("react"));
|
|
42
|
+
const react_2 = require("@wix/headless-utils/react");
|
|
43
|
+
const CoreUserName = __importStar(require("./core/UserName.js"));
|
|
44
|
+
exports.UserName = react_1.default.forwardRef((props, ref) => {
|
|
6
45
|
const { asChild, children, className, ...otherProps } = props;
|
|
7
|
-
return (
|
|
46
|
+
return ((0, jsx_runtime_1.jsx)(CoreUserName.UserName, { unknownLabel: props.unknownLabel, children: ({ displayName, displayValue }) => ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, customElementProps: { displayName }, content: displayValue, ...otherProps, children: (0, jsx_runtime_1.jsx)("span", { children: displayValue }) })) }));
|
|
8
47
|
});
|
|
@@ -1,10 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Caption = Caption;
|
|
4
|
+
exports.MediaType = MediaType;
|
|
5
|
+
exports.UserName = UserName;
|
|
6
|
+
exports.Timestamp = Timestamp;
|
|
7
|
+
exports.MediaGalleryRepeater = MediaGalleryRepeater;
|
|
8
|
+
const services_manager_react_1 = require("@wix/services-manager-react");
|
|
9
|
+
const index_js_1 = require("../../services/index.js");
|
|
3
10
|
/**
|
|
4
11
|
* Headless component for Instagram media caption
|
|
5
12
|
*/
|
|
6
|
-
|
|
7
|
-
const mediaItemService = useService(InstagramMediaItemServiceDefinition);
|
|
13
|
+
function Caption(props) {
|
|
14
|
+
const mediaItemService = (0, services_manager_react_1.useService)(index_js_1.InstagramMediaItemServiceDefinition);
|
|
8
15
|
const { caption } = mediaItemService.mediaItem.get();
|
|
9
16
|
return props.children({
|
|
10
17
|
caption,
|
|
@@ -13,8 +20,8 @@ export function Caption(props) {
|
|
|
13
20
|
/**
|
|
14
21
|
* Headless component for Instagram media type
|
|
15
22
|
*/
|
|
16
|
-
|
|
17
|
-
const mediaItemService = useService(InstagramMediaItemServiceDefinition);
|
|
23
|
+
function MediaType(props) {
|
|
24
|
+
const mediaItemService = (0, services_manager_react_1.useService)(index_js_1.InstagramMediaItemServiceDefinition);
|
|
18
25
|
const { type } = mediaItemService.mediaItem.get();
|
|
19
26
|
return props.children({
|
|
20
27
|
mediaType: type,
|
|
@@ -23,8 +30,8 @@ export function MediaType(props) {
|
|
|
23
30
|
/**
|
|
24
31
|
* Headless component for Instagram media username
|
|
25
32
|
*/
|
|
26
|
-
|
|
27
|
-
const feedService = useService(InstagramFeedServiceDefinition);
|
|
33
|
+
function UserName(props) {
|
|
34
|
+
const feedService = (0, services_manager_react_1.useService)(index_js_1.InstagramFeedServiceDefinition);
|
|
28
35
|
const account = feedService.feedData.get().account;
|
|
29
36
|
const userName = account?.instagramInfo?.instagramUsername;
|
|
30
37
|
return props.children({
|
|
@@ -34,8 +41,8 @@ export function UserName(props) {
|
|
|
34
41
|
/**
|
|
35
42
|
* Headless component for Instagram media timestamp
|
|
36
43
|
*/
|
|
37
|
-
|
|
38
|
-
const mediaItemService = useService(InstagramMediaItemServiceDefinition);
|
|
44
|
+
function Timestamp(props) {
|
|
45
|
+
const mediaItemService = (0, services_manager_react_1.useService)(index_js_1.InstagramMediaItemServiceDefinition);
|
|
39
46
|
const { timestamp } = mediaItemService.mediaItem.get();
|
|
40
47
|
return props.children({
|
|
41
48
|
timestamp,
|
|
@@ -44,8 +51,8 @@ export function Timestamp(props) {
|
|
|
44
51
|
/**
|
|
45
52
|
* Headless component for Instagram media gallery repeater
|
|
46
53
|
*/
|
|
47
|
-
|
|
48
|
-
const mediaItemService = useService(InstagramMediaItemServiceDefinition);
|
|
54
|
+
function MediaGalleryRepeater(props) {
|
|
55
|
+
const mediaItemService = (0, services_manager_react_1.useService)(index_js_1.InstagramMediaItemServiceDefinition);
|
|
49
56
|
const mediaItem = mediaItemService.mediaItem.get();
|
|
50
57
|
const media = (mediaItem?.type === 'video' ? mediaItem.thumbnailUrl : mediaItem?.mediaUrl)
|
|
51
58
|
? [
|
|
@@ -1,11 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.InstagramMedias = InstagramMedias;
|
|
4
|
+
const services_manager_react_1 = require("@wix/services-manager-react");
|
|
5
|
+
const index_js_1 = require("../../services/index.js");
|
|
3
6
|
/**
|
|
4
7
|
* Headless component for Instagram medias
|
|
5
8
|
* Handles service logic and provides render props with media items data
|
|
6
9
|
*/
|
|
7
|
-
|
|
8
|
-
const instagramFeedService = useService(InstagramFeedServiceDefinition);
|
|
10
|
+
function InstagramMedias(props) {
|
|
11
|
+
const instagramFeedService = (0, services_manager_react_1.useService)(index_js_1.InstagramFeedServiceDefinition);
|
|
9
12
|
const feedData = instagramFeedService.feedData.get();
|
|
10
13
|
const hasItems = feedData.mediaItems.length > 0;
|
|
11
14
|
// Convert Instagram media items to MediaGallery format
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Root = Root;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const services_manager_1 = require("@wix/services-manager");
|
|
6
|
+
const services_manager_react_1 = require("@wix/services-manager-react");
|
|
7
|
+
const index_js_1 = require("../../services/index.js");
|
|
8
|
+
function Root(props) {
|
|
6
9
|
const { children, instagramFeedServiceConfig } = props;
|
|
7
|
-
return (
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)(services_manager_react_1.WixServices, { servicesMap: (0, services_manager_1.createServicesMap)().addService(index_js_1.InstagramFeedServiceDefinition, index_js_1.InstagramFeedService, instagramFeedServiceConfig), children: children }));
|
|
8
11
|
}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.UserName = UserName;
|
|
4
|
+
const services_manager_react_1 = require("@wix/services-manager-react");
|
|
5
|
+
const index_js_1 = require("../../services/index.js");
|
|
3
6
|
/**
|
|
4
7
|
* Headless component for Instagram account username
|
|
5
8
|
* Handles service logic and provides render props with username data
|
|
6
9
|
*/
|
|
7
|
-
|
|
10
|
+
function UserName(props) {
|
|
8
11
|
const { unknownLabel = 'unknown' } = props;
|
|
9
|
-
const instagramFeedService = useService(InstagramFeedServiceDefinition);
|
|
12
|
+
const instagramFeedService = (0, services_manager_react_1.useService)(index_js_1.InstagramFeedServiceDefinition);
|
|
10
13
|
const feedData = instagramFeedService.feedData.get();
|
|
11
14
|
const displayName = feedData.account?.instagramInfo?.instagramUsername || unknownLabel;
|
|
12
15
|
const displayValue = `@${displayName}`;
|
|
@@ -1,5 +1,16 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.MediaGalleryRepeater = exports.InstagramMediaTimestamp = exports.InstagramMediaUserName = exports.InstagramMediaType = exports.InstagramMediaCaption = exports.InstagramMedias = exports.CoreUserName = exports.Root = void 0;
|
|
4
|
+
var Root_js_1 = require("./Root.js");
|
|
5
|
+
Object.defineProperty(exports, "Root", { enumerable: true, get: function () { return Root_js_1.Root; } });
|
|
2
6
|
// New core components
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
7
|
+
var UserName_js_1 = require("./UserName.js");
|
|
8
|
+
Object.defineProperty(exports, "CoreUserName", { enumerable: true, get: function () { return UserName_js_1.UserName; } });
|
|
9
|
+
var InstagramMedias_js_1 = require("./InstagramMedias.js");
|
|
10
|
+
Object.defineProperty(exports, "InstagramMedias", { enumerable: true, get: function () { return InstagramMedias_js_1.InstagramMedias; } });
|
|
11
|
+
var InstagramMedia_js_1 = require("./InstagramMedia.js");
|
|
12
|
+
Object.defineProperty(exports, "InstagramMediaCaption", { enumerable: true, get: function () { return InstagramMedia_js_1.Caption; } });
|
|
13
|
+
Object.defineProperty(exports, "InstagramMediaType", { enumerable: true, get: function () { return InstagramMedia_js_1.MediaType; } });
|
|
14
|
+
Object.defineProperty(exports, "InstagramMediaUserName", { enumerable: true, get: function () { return InstagramMedia_js_1.UserName; } });
|
|
15
|
+
Object.defineProperty(exports, "InstagramMediaTimestamp", { enumerable: true, get: function () { return InstagramMedia_js_1.Timestamp; } });
|
|
16
|
+
Object.defineProperty(exports, "MediaGalleryRepeater", { enumerable: true, get: function () { return InstagramMedia_js_1.MediaGalleryRepeater; } });
|
package/cjs/dist/react/index.js
CHANGED
|
@@ -1,2 +1,39 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
19
|
+
var ownKeys = function(o) {
|
|
20
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
21
|
+
var ar = [];
|
|
22
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
23
|
+
return ar;
|
|
24
|
+
};
|
|
25
|
+
return ownKeys(o);
|
|
26
|
+
};
|
|
27
|
+
return function (mod) {
|
|
28
|
+
if (mod && mod.__esModule) return mod;
|
|
29
|
+
var result = {};
|
|
30
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
31
|
+
__setModuleDefault(result, mod);
|
|
32
|
+
return result;
|
|
33
|
+
};
|
|
34
|
+
})();
|
|
35
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
+
exports.InstagramMedia = exports.InstagramFeed = void 0;
|
|
37
|
+
exports.InstagramFeed = __importStar(require("./InstagramFeed.js"));
|
|
38
|
+
var InstagramMedia_js_1 = require("./InstagramMedia.js");
|
|
39
|
+
Object.defineProperty(exports, "InstagramMedia", { enumerable: true, get: function () { return InstagramMedia_js_1.InstagramMedia; } });
|
|
@@ -1,2 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.InstagramMediaItemServiceDefinition = exports.InstagramMediaItemService = exports.loadInstagramFeedServiceConfig = exports.InstagramFeedServiceDefinition = exports.InstagramFeedService = void 0;
|
|
4
|
+
var instagram_feed_service_js_1 = require("./instagram-feed-service.js");
|
|
5
|
+
Object.defineProperty(exports, "InstagramFeedService", { enumerable: true, get: function () { return instagram_feed_service_js_1.InstagramFeedService; } });
|
|
6
|
+
Object.defineProperty(exports, "InstagramFeedServiceDefinition", { enumerable: true, get: function () { return instagram_feed_service_js_1.InstagramFeedServiceDefinition; } });
|
|
7
|
+
Object.defineProperty(exports, "loadInstagramFeedServiceConfig", { enumerable: true, get: function () { return instagram_feed_service_js_1.loadInstagramFeedServiceConfig; } });
|
|
8
|
+
var instagram_media_item_service_js_1 = require("./instagram-media-item-service.js");
|
|
9
|
+
Object.defineProperty(exports, "InstagramMediaItemService", { enumerable: true, get: function () { return instagram_media_item_service_js_1.InstagramMediaItemService; } });
|
|
10
|
+
Object.defineProperty(exports, "InstagramMediaItemServiceDefinition", { enumerable: true, get: function () { return instagram_media_item_service_js_1.InstagramMediaItemServiceDefinition; } });
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.InstagramFeedService = exports.InstagramFeedServiceDefinition = void 0;
|
|
4
|
+
exports.loadInstagramFeedServiceConfig = loadInstagramFeedServiceConfig;
|
|
5
|
+
const services_definitions_1 = require("@wix/services-definitions");
|
|
6
|
+
const signals_1 = require("@wix/services-definitions/core-services/signals");
|
|
7
|
+
const instagram_account_1 = require("@wix/instagram-account");
|
|
8
|
+
const instagram_media_1 = require("@wix/instagram-media");
|
|
5
9
|
/**
|
|
6
10
|
* Default Instagram feed data
|
|
7
11
|
*/
|
|
@@ -13,7 +17,7 @@ const defaultInstagramFeedData = {
|
|
|
13
17
|
* Service definition for the Instagram Feed service.
|
|
14
18
|
* This defines the reactive API contract for managing Instagram feed data.
|
|
15
19
|
*/
|
|
16
|
-
|
|
20
|
+
exports.InstagramFeedServiceDefinition = (0, services_definitions_1.defineService)('instagram-feed');
|
|
17
21
|
/**
|
|
18
22
|
* Implementation of the Instagram Feed service that manages reactive Instagram feed data.
|
|
19
23
|
* This service provides signals for feed data, loading state, and error handling,
|
|
@@ -47,8 +51,8 @@ export const InstagramFeedServiceDefinition = defineService('instagram-feed');
|
|
|
47
51
|
* }
|
|
48
52
|
* ```
|
|
49
53
|
*/
|
|
50
|
-
|
|
51
|
-
const signalsService = getService(SignalsServiceDefinition);
|
|
54
|
+
exports.InstagramFeedService = services_definitions_1.implementService.withConfig()(exports.InstagramFeedServiceDefinition, ({ getService, config }) => {
|
|
55
|
+
const signalsService = getService(signals_1.SignalsServiceDefinition);
|
|
52
56
|
const feedData = signalsService.signal(config.feedData || defaultInstagramFeedData);
|
|
53
57
|
const isLoading = signalsService.signal(!!config.accountId);
|
|
54
58
|
const error = signalsService.signal(null);
|
|
@@ -57,9 +61,9 @@ export const InstagramFeedService = implementService.withConfig()(InstagramFeedS
|
|
|
57
61
|
isLoading.set(true);
|
|
58
62
|
error.set(null);
|
|
59
63
|
// Load Instagram account information
|
|
60
|
-
const accountResponse = await accounts.getInstagramAccount(accountId);
|
|
64
|
+
const accountResponse = await instagram_account_1.accounts.getInstagramAccount(accountId);
|
|
61
65
|
// Load Instagram media for the account
|
|
62
|
-
const mediaResponse = await media.listInstagramAccountMedia(accountId);
|
|
66
|
+
const mediaResponse = await instagram_media_1.media.listInstagramAccountMedia(accountId);
|
|
63
67
|
// Transform SDK media to our interface format
|
|
64
68
|
const transformedMedia = mediaResponse.media?.map((mediaItem) => ({
|
|
65
69
|
id: mediaItem._id || mediaItem.mediaId || '',
|
|
@@ -149,19 +153,19 @@ export const InstagramFeedService = implementService.withConfig()(InstagramFeedS
|
|
|
149
153
|
* }
|
|
150
154
|
* ```
|
|
151
155
|
*/
|
|
152
|
-
|
|
156
|
+
async function loadInstagramFeedServiceConfig(input) {
|
|
153
157
|
try {
|
|
154
158
|
const { accountId, limit } = input;
|
|
155
159
|
if (!accountId) {
|
|
156
160
|
return { type: 'notFound' };
|
|
157
161
|
}
|
|
158
162
|
// Load Instagram account information using SDK
|
|
159
|
-
const accountResponse = await accounts.getInstagramAccount(accountId);
|
|
163
|
+
const accountResponse = await instagram_account_1.accounts.getInstagramAccount(accountId);
|
|
160
164
|
if (!accountResponse) {
|
|
161
165
|
return { type: 'notFound' };
|
|
162
166
|
}
|
|
163
167
|
// Load initial media items using SDK
|
|
164
|
-
const mediaResponse = await media.listInstagramAccountMedia(accountId);
|
|
168
|
+
const mediaResponse = await instagram_media_1.media.listInstagramAccountMedia(accountId);
|
|
165
169
|
// Transform SDK media to our interface format
|
|
166
170
|
const transformedMedia = mediaResponse.media?.map((mediaItem) => ({
|
|
167
171
|
id: mediaItem._id || mediaItem.mediaId || '',
|
|
@@ -1,9 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.InstagramMediaItemService = exports.InstagramMediaItemServiceDefinition = void 0;
|
|
4
|
+
const services_definitions_1 = require("@wix/services-definitions");
|
|
5
|
+
const signals_1 = require("@wix/services-definitions/core-services/signals");
|
|
3
6
|
/**
|
|
4
7
|
* Service definition for Instagram Media Item
|
|
5
8
|
*/
|
|
6
|
-
|
|
9
|
+
exports.InstagramMediaItemServiceDefinition = (0, services_definitions_1.defineService)('instagramMediaItem');
|
|
7
10
|
/**
|
|
8
11
|
* Implementation of the Instagram Media Item service that manages reactive media item data.
|
|
9
12
|
* This service provides signals for individual media item data and its index position.
|
|
@@ -44,8 +47,8 @@ export const InstagramMediaItemServiceDefinition = defineService('instagramMedia
|
|
|
44
47
|
* }
|
|
45
48
|
* ```
|
|
46
49
|
*/
|
|
47
|
-
|
|
48
|
-
const signalsService = getService(SignalsServiceDefinition);
|
|
50
|
+
exports.InstagramMediaItemService = services_definitions_1.implementService.withConfig()(exports.InstagramMediaItemServiceDefinition, ({ getService, config }) => {
|
|
51
|
+
const signalsService = getService(signals_1.SignalsServiceDefinition);
|
|
49
52
|
const mediaItem = signalsService.signal(config.mediaItem);
|
|
50
53
|
const index = signalsService.signal(config.index);
|
|
51
54
|
return {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/headless-instagram",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -49,12 +49,12 @@
|
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"@radix-ui/react-slot": "^1.2.3",
|
|
51
51
|
"@wix/essentials": "^0.1.24",
|
|
52
|
-
"@wix/headless-media": "0.0.
|
|
52
|
+
"@wix/headless-media": "0.0.21",
|
|
53
53
|
"@wix/headless-utils": "0.0.8",
|
|
54
54
|
"@wix/instagram-account": "^1.0.16",
|
|
55
55
|
"@wix/instagram-media": "^1.0.13",
|
|
56
56
|
"@wix/services-definitions": "^1.0.1",
|
|
57
|
-
"@wix/services-manager-react": "^1.0.
|
|
57
|
+
"@wix/services-manager-react": "^1.0.3"
|
|
58
58
|
},
|
|
59
59
|
"peerDependencies": {
|
|
60
60
|
"@wix/headless-components": "^0.0.0"
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"groupId": "com.wixpress.headless-components"
|
|
70
70
|
}
|
|
71
71
|
},
|
|
72
|
-
"falconPackageHash": "
|
|
72
|
+
"falconPackageHash": "2f0e6859fb6bb76d3e7df1efa2bd8ef2f11ad0163e385535853715f3"
|
|
73
73
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom/vitest';
|
package/cjs/dist/vitest.setup.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom/vitest';
|
package/dist/vitest.setup.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom/vitest';
|
package/dist/vitest.setup.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@testing-library/jest-dom/vitest';
|