@fragmentsx/client-core 0.3.0 → 0.4.1
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/createAreaManager.d.ts +18 -0
- package/dist/createAreaManager.d.ts.map +1 -0
- package/dist/fragmentsClient.d.ts +3 -2
- package/dist/fragmentsClient.d.ts.map +1 -1
- package/dist/index.cjs.js +254 -235
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +254 -235
- package/dist/plugins/fetch/areaQueries.test.d.ts +2 -0
- package/dist/plugins/fetch/areaQueries.test.d.ts.map +1 -0
- package/dist/plugins/fetch/index.d.ts +10 -7
- package/dist/plugins/fetch/index.d.ts.map +1 -1
- package/dist/plugins/fetch/restFetcher.d.ts +6 -0
- package/dist/plugins/fetch/restFetcher.d.ts.map +1 -0
- package/dist/plugins/fetch/restFetcher.test.d.ts +2 -0
- package/dist/plugins/fetch/restFetcher.test.d.ts.map +1 -0
- package/dist/plugins/filters/__tests__/filtersPlugin.test.d.ts +2 -0
- package/dist/plugins/filters/__tests__/filtersPlugin.test.d.ts.map +1 -0
- package/dist/plugins/filters/index.d.ts +9 -0
- package/dist/plugins/filters/index.d.ts.map +1 -0
- package/dist/plugins/fonts/index.d.ts.map +1 -1
- package/dist/plugins/fonts/index.test.d.ts +2 -0
- package/dist/plugins/fonts/index.test.d.ts.map +1 -0
- package/dist/plugins/fragments/index.d.ts.map +1 -1
- package/dist/plugins/load/index.d.ts +1 -1
- package/dist/plugins/load/index.d.ts.map +1 -1
- package/dist/plugins/metrics/globalMetrics.d.ts +8 -1
- package/dist/plugins/metrics/globalMetrics.d.ts.map +1 -1
- package/dist/plugins/metrics/index.d.ts.map +1 -1
- package/dist/plugins/properties/index.d.ts +17 -0
- package/dist/plugins/properties/index.d.ts.map +1 -0
- package/dist/plugins/properties/index.test.d.ts +2 -0
- package/dist/plugins/properties/index.test.d.ts.map +1 -0
- package/dist/plugins/styleSheet/utils/autoInjector.d.ts.map +1 -1
- package/dist/testing/createTestFragmentsClient.d.ts +4 -0
- package/dist/testing/createTestFragmentsClient.d.ts.map +1 -1
- package/package.json +3 -3
- package/dist/plugins/fetch/fetcher.d.ts +0 -8
- package/dist/plugins/fetch/fetcher.d.ts.map +0 -1
- package/dist/plugins/fetch/fetcher.test.d.ts +0 -2
- package/dist/plugins/fetch/fetcher.test.d.ts.map +0 -1
- package/dist/plugins/fetch/queries/AreaListQuery.d.ts +0 -43
- package/dist/plugins/fetch/queries/AreaListQuery.d.ts.map +0 -1
- package/dist/plugins/fetch/queries/AreaQuery.d.ts +0 -24
- package/dist/plugins/fetch/queries/AreaQuery.d.ts.map +0 -1
- package/dist/plugins/fetch/queries/FragmentQuery.d.ts +0 -31
- package/dist/plugins/fetch/queries/FragmentQuery.d.ts.map +0 -1
- package/dist/plugins/fetch/queries/parts.d.ts +0 -5
- package/dist/plugins/fetch/queries/parts.d.ts.map +0 -1
package/dist/index.es.js
CHANGED
|
@@ -1688,100 +1688,48 @@ const CssOverrideSchema = /* @__PURE__ */ object({
|
|
|
1688
1688
|
const BASE_HEADERS = {
|
|
1689
1689
|
"Content-Type": "application/json"
|
|
1690
1690
|
};
|
|
1691
|
-
const
|
|
1691
|
+
const createRestFetcher = (baseUrl, defaultHeaders = {}) => {
|
|
1692
1692
|
const cache = /* @__PURE__ */ new Map();
|
|
1693
1693
|
const inflightRequests = /* @__PURE__ */ new Map();
|
|
1694
|
-
const
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
return cache.get(cacheKey);
|
|
1694
|
+
const get = (url) => {
|
|
1695
|
+
const fullUrl = `${baseUrl}${url}`;
|
|
1696
|
+
if (cache.has(fullUrl)) {
|
|
1697
|
+
return Promise.resolve(cache.get(fullUrl));
|
|
1699
1698
|
}
|
|
1700
|
-
if (inflightRequests.has(
|
|
1701
|
-
return inflightRequests.get(
|
|
1699
|
+
if (inflightRequests.has(fullUrl)) {
|
|
1700
|
+
return inflightRequests.get(fullUrl);
|
|
1702
1701
|
}
|
|
1703
|
-
const request = fetch(
|
|
1704
|
-
|
|
1705
|
-
method: "POST",
|
|
1706
|
-
body: JSON.stringify({ query: query2, variables }),
|
|
1707
|
-
credentials: "include",
|
|
1702
|
+
const request = fetch(fullUrl, {
|
|
1703
|
+
method: "GET",
|
|
1708
1704
|
headers: {
|
|
1709
1705
|
...BASE_HEADERS,
|
|
1710
|
-
...defaultHeaders
|
|
1711
|
-
...options.headers
|
|
1706
|
+
...defaultHeaders
|
|
1712
1707
|
}
|
|
1713
1708
|
}).then(async (res) => {
|
|
1714
1709
|
if (!res.ok) {
|
|
1715
|
-
|
|
1716
|
-
console.error(`Fetch error: ${res.status}`);
|
|
1717
|
-
return null;
|
|
1718
|
-
}
|
|
1719
|
-
throw new Error(`Fetch error: ${res.status}`);
|
|
1710
|
+
throw new Error(`Fetch error: ${res.status} ${res.statusText}`);
|
|
1720
1711
|
}
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1712
|
+
let data;
|
|
1713
|
+
try {
|
|
1714
|
+
data = await res.json();
|
|
1715
|
+
} catch {
|
|
1716
|
+
return null;
|
|
1724
1717
|
}
|
|
1718
|
+
cache.set(fullUrl, data);
|
|
1725
1719
|
return data;
|
|
1726
1720
|
}).finally(() => {
|
|
1727
|
-
inflightRequests.delete(
|
|
1721
|
+
inflightRequests.delete(fullUrl);
|
|
1728
1722
|
});
|
|
1729
|
-
inflightRequests.set(
|
|
1723
|
+
inflightRequests.set(fullUrl, request);
|
|
1730
1724
|
return request;
|
|
1731
1725
|
};
|
|
1732
|
-
const invalidate = (
|
|
1733
|
-
cache.delete(
|
|
1726
|
+
const invalidate = (url) => {
|
|
1727
|
+
cache.delete(`${baseUrl}${url}`);
|
|
1734
1728
|
};
|
|
1735
|
-
const clearCache = () =>
|
|
1736
|
-
|
|
1737
|
-
};
|
|
1738
|
-
const googleFonts = `googleFonts {
|
|
1739
|
-
id
|
|
1740
|
-
variants
|
|
1741
|
-
subsets
|
|
1742
|
-
family
|
|
1743
|
-
version
|
|
1744
|
-
files {
|
|
1745
|
-
url
|
|
1746
|
-
variant
|
|
1747
|
-
}
|
|
1748
|
-
category
|
|
1749
|
-
}`;
|
|
1750
|
-
const linkedCssChunk = `linkedCssChunk {
|
|
1751
|
-
id
|
|
1752
|
-
content
|
|
1753
|
-
}`;
|
|
1754
|
-
const linkedFragments = `{
|
|
1755
|
-
id
|
|
1756
|
-
document
|
|
1757
|
-
${googleFonts}
|
|
1758
|
-
${linkedCssChunk}
|
|
1759
|
-
}`;
|
|
1760
|
-
const fragment = `
|
|
1761
|
-
{
|
|
1762
|
-
id
|
|
1763
|
-
document
|
|
1764
|
-
linkedFragments ${linkedFragments}
|
|
1765
|
-
${googleFonts}
|
|
1766
|
-
${linkedCssChunk}
|
|
1767
|
-
}
|
|
1768
|
-
`;
|
|
1769
|
-
const getFragmentQuery = (fragmentId, isSelf) => {
|
|
1770
|
-
return {
|
|
1771
|
-
query: isSelf ? `
|
|
1772
|
-
query FragmentDocument($fragmentId: Int!) {
|
|
1773
|
-
fragment(fragmentIds: [$fragmentId]) ${fragment}
|
|
1774
|
-
}
|
|
1775
|
-
` : `
|
|
1776
|
-
query FragmentDocument($fragmentId: Int!) {
|
|
1777
|
-
clientFragment(fragmentId: $fragmentId) ${fragment}
|
|
1778
|
-
}
|
|
1779
|
-
}`,
|
|
1780
|
-
variables: {
|
|
1781
|
-
fragmentId
|
|
1782
|
-
},
|
|
1783
|
-
_type: null
|
|
1729
|
+
const clearCache = () => {
|
|
1730
|
+
cache.clear();
|
|
1784
1731
|
};
|
|
1732
|
+
return { get, invalidate, clearCache };
|
|
1785
1733
|
};
|
|
1786
1734
|
var isObject = (input) => {
|
|
1787
1735
|
return typeof input === "object" && input !== null && !Array.isArray(input);
|
|
@@ -1796,6 +1744,7 @@ var createConstants = (...constants) => {
|
|
|
1796
1744
|
};
|
|
1797
1745
|
var noop = () => void 0;
|
|
1798
1746
|
var isBrowser_default = typeof window !== "undefined";
|
|
1747
|
+
var generateId = () => Math.random().toString(16).slice(2);
|
|
1799
1748
|
var getKey = (v) => isKey(v) ? v.slice(1) : null;
|
|
1800
1749
|
var isKey = (v) => typeof v === "string" && v.startsWith("$");
|
|
1801
1750
|
function hashGenerator(layerKey) {
|
|
@@ -1953,159 +1902,104 @@ const fetchBeacon = (baseUrl) => {
|
|
|
1953
1902
|
sendBeacon
|
|
1954
1903
|
};
|
|
1955
1904
|
};
|
|
1956
|
-
const getAreaListQuery = (areaCodes) => {
|
|
1957
|
-
return {
|
|
1958
|
-
query: `query($areaCodes: [String!]!) {
|
|
1959
|
-
clientAreas(areaCodes: $areaCodes) {
|
|
1960
|
-
areaId
|
|
1961
|
-
campaignId
|
|
1962
|
-
areaProperties
|
|
1963
|
-
projectProperties
|
|
1964
|
-
font {
|
|
1965
|
-
id
|
|
1966
|
-
variants
|
|
1967
|
-
subsets
|
|
1968
|
-
family
|
|
1969
|
-
version
|
|
1970
|
-
files {
|
|
1971
|
-
url
|
|
1972
|
-
variant
|
|
1973
|
-
}
|
|
1974
|
-
category
|
|
1975
|
-
}
|
|
1976
|
-
variant {
|
|
1977
|
-
id
|
|
1978
|
-
fragment {
|
|
1979
|
-
props
|
|
1980
|
-
fragment ${fragment}
|
|
1981
|
-
}
|
|
1982
|
-
}
|
|
1983
|
-
}
|
|
1984
|
-
}`,
|
|
1985
|
-
variables: {
|
|
1986
|
-
areaCodes
|
|
1987
|
-
}
|
|
1988
|
-
};
|
|
1989
|
-
};
|
|
1990
1905
|
const fetchPlugin = (state) => {
|
|
1991
1906
|
var _a, _b, _c, _d;
|
|
1992
|
-
const
|
|
1993
|
-
const
|
|
1994
|
-
const
|
|
1995
|
-
const
|
|
1907
|
+
const url = (_a = state == null ? void 0 : state.env) == null ? void 0 : _a.backendEndpoint;
|
|
1908
|
+
const apiToken = (_b = state == null ? void 0 : state.env) == null ? void 0 : _b.apiToken;
|
|
1909
|
+
const referer = (_c = state == null ? void 0 : state.env) == null ? void 0 : _c.referer;
|
|
1910
|
+
const filterOverrides = (_d = state == null ? void 0 : state.env) == null ? void 0 : _d.filterOverrides;
|
|
1996
1911
|
let headers = {
|
|
1997
|
-
|
|
1912
|
+
"X-Api-Key": apiToken
|
|
1998
1913
|
};
|
|
1999
1914
|
if (referer) {
|
|
2000
1915
|
headers.Referer = referer;
|
|
2001
1916
|
}
|
|
2002
|
-
|
|
1917
|
+
if (filterOverrides == null ? void 0 : filterOverrides.deviceType) {
|
|
1918
|
+
headers["X-Filter-Device-Type"] = filterOverrides.deviceType;
|
|
1919
|
+
}
|
|
1920
|
+
if (filterOverrides == null ? void 0 : filterOverrides.osType) {
|
|
1921
|
+
headers["X-Filter-OS-Type"] = filterOverrides.osType;
|
|
1922
|
+
}
|
|
1923
|
+
if (filterOverrides == null ? void 0 : filterOverrides.page) {
|
|
1924
|
+
headers["X-Filter-Page"] = filterOverrides.page;
|
|
1925
|
+
}
|
|
1926
|
+
if (filterOverrides == null ? void 0 : filterOverrides.ip) {
|
|
1927
|
+
headers["X-Filter-IP"] = filterOverrides.ip;
|
|
1928
|
+
}
|
|
1929
|
+
const restFetcher = createRestFetcher(url, headers);
|
|
2003
1930
|
const beaconFetcher = fetchBeacon();
|
|
2004
|
-
const registerFragmentDocument = (fragmentId,
|
|
2005
|
-
|
|
2006
|
-
const fragmentDocument = fragment2 == null ? void 0 : fragment2.document;
|
|
1931
|
+
const registerFragmentDocument = (fragmentId, fragment) => {
|
|
1932
|
+
const fragmentDocument = fragment == null ? void 0 : fragment.document;
|
|
2007
1933
|
if (!fragmentDocument) {
|
|
2008
1934
|
console.error("Empty document");
|
|
2009
1935
|
return null;
|
|
2010
1936
|
}
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
}
|
|
2018
|
-
if (Array.isArray(fragment2.linkedCssChunk)) {
|
|
2019
|
-
fragment2.linkedCssChunk.forEach(
|
|
2020
|
-
(linkedChunk) => state.$fetch.cacheCssChunks.set(linkedChunk.id, linkedChunk.content)
|
|
2021
|
-
);
|
|
2022
|
-
}
|
|
2023
|
-
if ("$fonts" in state) {
|
|
2024
|
-
(_b2 = fragment2 == null ? void 0 : fragment2.googleFonts) == null ? void 0 : _b2.forEach((_a2 = state.$fonts) == null ? void 0 : _a2.registerFont);
|
|
2025
|
-
}
|
|
2026
|
-
return fragmentDocument;
|
|
2027
|
-
}
|
|
2028
|
-
return null;
|
|
2029
|
-
};
|
|
2030
|
-
const queryFragment = async (fragmentId) => {
|
|
2031
|
-
var _a2;
|
|
2032
|
-
if (!apiToken || !fragmentId) return null;
|
|
2033
|
-
if (state.$fetch.cacheDocuments.has(fragmentId)) {
|
|
2034
|
-
return state.$fetch.cacheDocuments.get(fragmentId);
|
|
2035
|
-
}
|
|
2036
|
-
const fragmentQuery = getFragmentQuery(fragmentId, isSelf);
|
|
2037
|
-
const response = await fetcher.query(
|
|
2038
|
-
fragmentQuery.query,
|
|
2039
|
-
fragmentQuery.variables,
|
|
2040
|
-
{ referrerPolicy: "unsafe-url" }
|
|
2041
|
-
);
|
|
2042
|
-
let fragment2 = null;
|
|
2043
|
-
if (!!(response == null ? void 0 : response.data) && "clientFragment" in response.data) {
|
|
2044
|
-
fragment2 = response.data.clientFragment;
|
|
1937
|
+
state.$fetch.cacheDocuments.set(fragmentId, fragmentDocument);
|
|
1938
|
+
if (fragment.linkedFragments !== void 0) {
|
|
1939
|
+
fragment.linkedFragments.forEach((linked) => {
|
|
1940
|
+
if ((linked == null ? void 0 : linked.id) && (linked == null ? void 0 : linked.document)) {
|
|
1941
|
+
registerFragmentDocument(linked.id, linked);
|
|
1942
|
+
}
|
|
1943
|
+
});
|
|
2045
1944
|
}
|
|
2046
|
-
if (
|
|
2047
|
-
|
|
1945
|
+
if (Array.isArray(fragment.linkedCssChunk)) {
|
|
1946
|
+
fragment.linkedCssChunk.forEach(({ id, content }) => {
|
|
1947
|
+
if (id != null && content != null) {
|
|
1948
|
+
state.$fetch.cacheCssChunks.set(id, content);
|
|
1949
|
+
}
|
|
1950
|
+
});
|
|
2048
1951
|
}
|
|
2049
|
-
return
|
|
2050
|
-
};
|
|
2051
|
-
const queryArea = async (areaCode) => {
|
|
2052
|
-
return queryAreaList([areaCode]).then((res) => res == null ? void 0 : res.at(0));
|
|
1952
|
+
return fragmentDocument;
|
|
2053
1953
|
};
|
|
2054
|
-
const queryAreaList = async (
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
const nonLoadedAreas = areaCodes2.filter(
|
|
1954
|
+
const queryAreaList = async (areaCodes) => {
|
|
1955
|
+
if (!apiToken || !(areaCodes == null ? void 0 : areaCodes.length)) return [];
|
|
1956
|
+
const nonLoadedCodes = areaCodes.filter(
|
|
2058
1957
|
(code) => !state.$fetch.cacheAreaDocuments.has(code)
|
|
2059
1958
|
);
|
|
2060
|
-
if (
|
|
2061
|
-
|
|
1959
|
+
if (nonLoadedCodes.length > 0) {
|
|
1960
|
+
await Promise.all(
|
|
1961
|
+
nonLoadedCodes.map(async (code) => {
|
|
1962
|
+
var _a2, _b2, _c2, _d2;
|
|
1963
|
+
const dto = await restFetcher.get(`/api/area/${code}`);
|
|
1964
|
+
if (!dto) {
|
|
1965
|
+
state.$fetch.cacheAreaDocuments.set(code, null);
|
|
1966
|
+
return;
|
|
1967
|
+
}
|
|
1968
|
+
const fragment = (_a2 = dto.variant) == null ? void 0 : _a2.fragment;
|
|
1969
|
+
if (fragment) {
|
|
1970
|
+
registerFragmentDocument(fragment.id, fragment);
|
|
1971
|
+
}
|
|
1972
|
+
if ("$fonts" in state && dto.font) {
|
|
1973
|
+
(_b2 = state.$fonts) == null ? void 0 : _b2.registerFont(dto.font);
|
|
1974
|
+
}
|
|
1975
|
+
const entity = {
|
|
1976
|
+
fragmentId: fragment == null ? void 0 : fragment.id,
|
|
1977
|
+
props: ((_c2 = dto.variant) == null ? void 0 : _c2.props) ?? {},
|
|
1978
|
+
font: dto.font,
|
|
1979
|
+
areaId: dto.areaId,
|
|
1980
|
+
campaignId: dto.campaignId,
|
|
1981
|
+
variantId: (_d2 = dto.variant) == null ? void 0 : _d2.id
|
|
1982
|
+
};
|
|
1983
|
+
state.$fetch.cacheAreaDocuments.set(code, entity);
|
|
1984
|
+
})
|
|
1985
|
+
);
|
|
2062
1986
|
}
|
|
2063
|
-
|
|
2064
|
-
|
|
2065
|
-
areaQuery.query,
|
|
2066
|
-
areaQuery.variables,
|
|
2067
|
-
{ referrerPolicy: "unsafe-url" }
|
|
1987
|
+
return areaCodes.map(
|
|
1988
|
+
(code) => state.$fetch.cacheAreaDocuments.get(code) ?? null
|
|
2068
1989
|
);
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
var _a3;
|
|
2073
|
-
const areaCode = areaCodes2 == null ? void 0 : areaCodes2.at(index2);
|
|
2074
|
-
const areaFragment = area.variant.fragment.fragment;
|
|
2075
|
-
registerFragmentDocument(areaFragment.id, areaFragment);
|
|
2076
|
-
const resultProps = [
|
|
2077
|
-
...area.projectProperties ?? [],
|
|
2078
|
-
...area.areaProperties ?? []
|
|
2079
|
-
].reduce((acc, prop) => {
|
|
2080
|
-
acc[prop._id] = prop.defaultValue;
|
|
2081
|
-
return acc;
|
|
2082
|
-
}, area.variant.fragment.props);
|
|
2083
|
-
const entity = {
|
|
2084
|
-
areaId: area.areaId,
|
|
2085
|
-
campaignId: area.campaignId,
|
|
2086
|
-
variantId: area.variant.id,
|
|
2087
|
-
fragmentId: area.variant.fragment.fragment.id,
|
|
2088
|
-
font: area.font,
|
|
2089
|
-
props: resultProps
|
|
2090
|
-
};
|
|
2091
|
-
if ("$fonts" in state) {
|
|
2092
|
-
(_a3 = state.$fonts) == null ? void 0 : _a3.registerFont(area.font);
|
|
2093
|
-
}
|
|
2094
|
-
state.$fetch.cacheAreaDocuments.set(areaCode, entity);
|
|
2095
|
-
});
|
|
2096
|
-
return areaCodes2.map((code) => state.$fetch.cacheAreaDocuments.get(code));
|
|
2097
|
-
}
|
|
2098
|
-
return null;
|
|
1990
|
+
};
|
|
1991
|
+
const queryArea = async (areaCode) => {
|
|
1992
|
+
return queryAreaList([areaCode]).then((res) => (res == null ? void 0 : res.at(0)) ?? null);
|
|
2099
1993
|
};
|
|
2100
1994
|
state.$fetch = {
|
|
2101
1995
|
cacheCssChunks: /* @__PURE__ */ new Map(),
|
|
2102
1996
|
cacheDocuments: /* @__PURE__ */ new Map(),
|
|
2103
1997
|
cacheAreaDocuments: /* @__PURE__ */ new Map(),
|
|
2104
|
-
|
|
1998
|
+
registerFragmentDocument,
|
|
2105
1999
|
queryArea,
|
|
2106
2000
|
queryAreaList,
|
|
2107
|
-
query: fetcher.query,
|
|
2108
2001
|
sendBeacon: beaconFetcher.sendBeacon,
|
|
2002
|
+
get: restFetcher.get,
|
|
2109
2003
|
readCssChunk: (id) => state.$fetch.cacheCssChunks.get(id) ?? null,
|
|
2110
2004
|
readFragment: (fragmentId) => state.$fetch.cacheDocuments.get(fragmentId) ?? null,
|
|
2111
2005
|
readArea: (areaCode) => state.$fetch.cacheAreaDocuments.get(areaCode) ?? null
|
|
@@ -2322,22 +2216,12 @@ const fragmentStylesheetPlugin = (globalState) => (state) => {
|
|
|
2322
2216
|
}
|
|
2323
2217
|
return noop;
|
|
2324
2218
|
};
|
|
2325
|
-
const destroyStyles = () => {
|
|
2326
|
-
state.mutate(
|
|
2327
|
-
KEY,
|
|
2328
|
-
{
|
|
2329
|
-
styles: {}
|
|
2330
|
-
},
|
|
2331
|
-
{ replace: true }
|
|
2332
|
-
);
|
|
2333
|
-
fragmentStyleInjector.unmount();
|
|
2334
|
-
};
|
|
2335
2219
|
state.$styleSheet = {
|
|
2336
2220
|
key: KEY,
|
|
2337
2221
|
addStyle,
|
|
2338
2222
|
addCssChunk,
|
|
2339
2223
|
mount: fragmentStyleInjector.mount,
|
|
2340
|
-
unmount:
|
|
2224
|
+
unmount: fragmentStyleInjector.unmount,
|
|
2341
2225
|
extract: (withTag) => {
|
|
2342
2226
|
var _a;
|
|
2343
2227
|
const graph = state.resolve(KEY);
|
|
@@ -2408,6 +2292,84 @@ const scopesPlugin = (state) => {
|
|
|
2408
2292
|
};
|
|
2409
2293
|
return state;
|
|
2410
2294
|
};
|
|
2295
|
+
const PROPERTIES_ROOT_KEY = "PropertiesRoot:root";
|
|
2296
|
+
const propertiesPlugin = (state) => {
|
|
2297
|
+
const hydrate = (properties) => {
|
|
2298
|
+
if (!Array.isArray(properties)) return;
|
|
2299
|
+
const keys = [];
|
|
2300
|
+
for (const prop of properties) {
|
|
2301
|
+
if (!prop || !prop._id) continue;
|
|
2302
|
+
const key = `${index.nodes.Variable}:${prop._id}`;
|
|
2303
|
+
state.mutate(
|
|
2304
|
+
{ ...prop, _type: index.nodes.Variable, _id: String(prop._id) },
|
|
2305
|
+
{ replace: true }
|
|
2306
|
+
);
|
|
2307
|
+
keys.push(key);
|
|
2308
|
+
}
|
|
2309
|
+
state.mutate(
|
|
2310
|
+
PROPERTIES_ROOT_KEY,
|
|
2311
|
+
{ propertyKeys: keys },
|
|
2312
|
+
{ replace: true }
|
|
2313
|
+
);
|
|
2314
|
+
};
|
|
2315
|
+
const addProperty = (type, initialData) => {
|
|
2316
|
+
const id = (initialData == null ? void 0 : initialData._id) || generateId();
|
|
2317
|
+
const key = `${index.nodes.Variable}:${id}`;
|
|
2318
|
+
state.mutate({
|
|
2319
|
+
_type: index.nodes.Variable,
|
|
2320
|
+
_id: String(id),
|
|
2321
|
+
type,
|
|
2322
|
+
name: `${type} property`,
|
|
2323
|
+
...initialData
|
|
2324
|
+
});
|
|
2325
|
+
const root = state.resolve(PROPERTIES_ROOT_KEY);
|
|
2326
|
+
const currentKeys = (root == null ? void 0 : root.propertyKeys) ?? [];
|
|
2327
|
+
state.mutate(
|
|
2328
|
+
PROPERTIES_ROOT_KEY,
|
|
2329
|
+
{ propertyKeys: [...currentKeys, key] },
|
|
2330
|
+
{ replace: true }
|
|
2331
|
+
);
|
|
2332
|
+
return key;
|
|
2333
|
+
};
|
|
2334
|
+
const removeProperty = (key) => {
|
|
2335
|
+
state.invalidate(key);
|
|
2336
|
+
const root = state.resolve(PROPERTIES_ROOT_KEY);
|
|
2337
|
+
const currentKeys = (root == null ? void 0 : root.propertyKeys) ?? [];
|
|
2338
|
+
state.mutate(
|
|
2339
|
+
PROPERTIES_ROOT_KEY,
|
|
2340
|
+
{ propertyKeys: currentKeys.filter((k) => k !== key) },
|
|
2341
|
+
{ replace: true }
|
|
2342
|
+
);
|
|
2343
|
+
};
|
|
2344
|
+
const extractProperties = () => {
|
|
2345
|
+
const root = state.resolve(PROPERTIES_ROOT_KEY);
|
|
2346
|
+
const keys = (root == null ? void 0 : root.propertyKeys) ?? [];
|
|
2347
|
+
return keys.map((key) => state.resolve(key, { deep: true })).filter(Boolean);
|
|
2348
|
+
};
|
|
2349
|
+
const getPropertyKeys = () => {
|
|
2350
|
+
const root = state.resolve(PROPERTIES_ROOT_KEY);
|
|
2351
|
+
return (root == null ? void 0 : root.propertyKeys) ?? [];
|
|
2352
|
+
};
|
|
2353
|
+
state.addSkip((dataField) => {
|
|
2354
|
+
if (typeof dataField === "object" && dataField !== null && !Array.isArray(dataField)) {
|
|
2355
|
+
return dataField._type === index.nodes.Variable && (dataField._id === "replaceBeforeSave" || !dataField._id);
|
|
2356
|
+
}
|
|
2357
|
+
return false;
|
|
2358
|
+
});
|
|
2359
|
+
state.mutate({
|
|
2360
|
+
_type: "PropertiesRoot",
|
|
2361
|
+
_id: "root",
|
|
2362
|
+
propertyKeys: []
|
|
2363
|
+
});
|
|
2364
|
+
state.$properties = {
|
|
2365
|
+
key: PROPERTIES_ROOT_KEY,
|
|
2366
|
+
hydrate,
|
|
2367
|
+
addProperty,
|
|
2368
|
+
removeProperty,
|
|
2369
|
+
extractProperties,
|
|
2370
|
+
getPropertyKeys
|
|
2371
|
+
};
|
|
2372
|
+
};
|
|
2411
2373
|
const fragmentsPlugin = (options) => (state) => {
|
|
2412
2374
|
const plugins = (options == null ? void 0 : options.plugins) ?? [];
|
|
2413
2375
|
const createFragmentManager = (fragmentId, initialDocument = {}) => {
|
|
@@ -2444,6 +2406,7 @@ const fragmentsPlugin = (options) => (state) => {
|
|
|
2444
2406
|
// cssPlugin,
|
|
2445
2407
|
fragmentStylesheetPlugin(state),
|
|
2446
2408
|
scopesPlugin,
|
|
2409
|
+
propertiesPlugin,
|
|
2447
2410
|
...plugins
|
|
2448
2411
|
],
|
|
2449
2412
|
skip: [
|
|
@@ -2454,12 +2417,19 @@ const fragmentsPlugin = (options) => (state) => {
|
|
|
2454
2417
|
...Object.keys(index.nodes),
|
|
2455
2418
|
"Temp",
|
|
2456
2419
|
"Spring",
|
|
2457
|
-
PLUGIN_TYPES.FragmentStylesheet
|
|
2420
|
+
PLUGIN_TYPES.FragmentStylesheet,
|
|
2421
|
+
"PropertiesRoot"
|
|
2458
2422
|
])
|
|
2459
2423
|
]
|
|
2460
2424
|
});
|
|
2461
2425
|
manager.mutate(tempGraph);
|
|
2462
2426
|
manager.mutate(springGraph);
|
|
2427
|
+
const fragmentRoot = manager.resolve(manager.$fragment.root);
|
|
2428
|
+
const propertyLinks = (fragmentRoot == null ? void 0 : fragmentRoot.properties) ?? [];
|
|
2429
|
+
const propertyEntities = propertyLinks.map((link) => manager.resolve(link)).filter(Boolean);
|
|
2430
|
+
if (propertyEntities.length > 0) {
|
|
2431
|
+
manager.$properties.hydrate(propertyEntities);
|
|
2432
|
+
}
|
|
2463
2433
|
state.mutate(state.$fragments.key, {
|
|
2464
2434
|
managers: {
|
|
2465
2435
|
[fragmentId]: manager
|
|
@@ -2488,9 +2458,6 @@ const fragmentsPlugin = (options) => (state) => {
|
|
|
2488
2458
|
});
|
|
2489
2459
|
return state;
|
|
2490
2460
|
};
|
|
2491
|
-
const addClientMetric = `mutation AddClientMetric($type: ClientMetricType!, $value: GoalAchievementPost!) {
|
|
2492
|
-
addClientMetric(metric: {metricType: $type, achievement: $value})
|
|
2493
|
-
}`;
|
|
2494
2461
|
const pendingPixels = /* @__PURE__ */ new Set();
|
|
2495
2462
|
const sendWithImage = (url) => {
|
|
2496
2463
|
try {
|
|
@@ -2564,10 +2531,16 @@ const types = createConstants(
|
|
|
2564
2531
|
"REACH_PROJECT_GOAL"
|
|
2565
2532
|
);
|
|
2566
2533
|
const globalMetricsPlugin = (state) => {
|
|
2567
|
-
const sendMetric =
|
|
2534
|
+
const sendMetric = (type, value) => {
|
|
2568
2535
|
var _a;
|
|
2569
|
-
|
|
2570
|
-
|
|
2536
|
+
if (type !== types.REACH_PROJECT_GOAL || !value) return;
|
|
2537
|
+
const params = new URLSearchParams({
|
|
2538
|
+
goal_id: String(value.goalId),
|
|
2539
|
+
variant_id: String(value.variantId),
|
|
2540
|
+
area_id: String(value.areaId),
|
|
2541
|
+
campaign_id: String(value.campaignId)
|
|
2542
|
+
});
|
|
2543
|
+
(_a = state.$fetch) == null ? void 0 : _a.get(`/api/metric/goal?${params}`).catch(() => void 0);
|
|
2571
2544
|
};
|
|
2572
2545
|
const reachGoal = (goal) => {
|
|
2573
2546
|
sendMetric(types.REACH_PROJECT_GOAL, goal);
|
|
@@ -2591,23 +2564,17 @@ const loadPlugin = (state) => {
|
|
|
2591
2564
|
const readFragment = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.readFragment(fragmentId);
|
|
2592
2565
|
const fragmentManager = (_b = state == null ? void 0 : state.$fragments) == null ? void 0 : _b.getManager(fragmentId);
|
|
2593
2566
|
if (readFragment && !fragmentManager) {
|
|
2594
|
-
|
|
2595
|
-
fragmentId,
|
|
2596
|
-
readFragment
|
|
2597
|
-
);
|
|
2598
|
-
return fragmentManager2;
|
|
2567
|
+
return state.$fragments.createFragmentManager(fragmentId, readFragment);
|
|
2599
2568
|
}
|
|
2600
2569
|
if (readFragment && fragmentManager) return fragmentManager;
|
|
2601
|
-
return
|
|
2602
|
-
(fragmentDocument) => state.$fragments.createFragmentManager(fragmentId, fragmentDocument)
|
|
2603
|
-
);
|
|
2570
|
+
return null;
|
|
2604
2571
|
};
|
|
2605
2572
|
const loadArea = (areaCode) => {
|
|
2606
2573
|
var _a;
|
|
2607
2574
|
const readArea2 = (_a = state == null ? void 0 : state.$fetch) == null ? void 0 : _a.readArea(areaCode);
|
|
2608
2575
|
if (readArea2) return readArea2;
|
|
2609
|
-
return state.$fetch.queryArea(areaCode).then(
|
|
2610
|
-
|
|
2576
|
+
return state.$fetch.queryArea(areaCode).then((areaEntity) => {
|
|
2577
|
+
loadFragment(areaEntity == null ? void 0 : areaEntity.fragmentId);
|
|
2611
2578
|
return areaEntity;
|
|
2612
2579
|
});
|
|
2613
2580
|
};
|
|
@@ -2624,6 +2591,7 @@ const fontsPlugin = (state) => {
|
|
|
2624
2591
|
const fonts = /* @__PURE__ */ new Map();
|
|
2625
2592
|
let defaultFontFamily = null;
|
|
2626
2593
|
const registerFont = (font) => {
|
|
2594
|
+
if (!font) return;
|
|
2627
2595
|
const fontFamily = font.family;
|
|
2628
2596
|
if (!fonts.has(fontFamily)) {
|
|
2629
2597
|
fonts.set(fontFamily, font);
|
|
@@ -2637,7 +2605,8 @@ const fontsPlugin = (state) => {
|
|
|
2637
2605
|
const getStyles = () => {
|
|
2638
2606
|
const styles = [];
|
|
2639
2607
|
for (const [fontFamily, font] of fonts) {
|
|
2640
|
-
const
|
|
2608
|
+
const rawFiles = font.files ?? [];
|
|
2609
|
+
const files = Array.isArray(rawFiles) ? rawFiles : Object.entries(rawFiles).map(([variant, url]) => ({ variant, url }));
|
|
2641
2610
|
for (const file of files) {
|
|
2642
2611
|
const [weightItem] = getFontWeights([file.variant]);
|
|
2643
2612
|
styles.push(`@font-face {
|
|
@@ -2676,27 +2645,28 @@ const PLUGIN_TYPES = createConstants(
|
|
|
2676
2645
|
"FragmentStylesheet"
|
|
2677
2646
|
);
|
|
2678
2647
|
const createFragmentsClient = (options) => {
|
|
2679
|
-
const BACKEND_TARGET = (options == null ? void 0 : options.isSelf) ? "/graphql" : "http://85.192.29.65/graphql";
|
|
2680
2648
|
return kt({
|
|
2681
2649
|
_type: "GlobalManager",
|
|
2682
2650
|
initialState: {},
|
|
2683
2651
|
skip: [
|
|
2684
2652
|
u([
|
|
2685
2653
|
...Object.keys(index.nodes),
|
|
2686
|
-
...Object.keys(PLUGIN_TYPES)
|
|
2654
|
+
...Object.keys(PLUGIN_TYPES),
|
|
2655
|
+
"PropertiesRoot"
|
|
2687
2656
|
])
|
|
2688
2657
|
],
|
|
2689
2658
|
plugins: [
|
|
2690
2659
|
(state) => {
|
|
2691
2660
|
state.env = {
|
|
2692
|
-
|
|
2693
|
-
backendEndpoint: (options == null ? void 0 : options.backendEndpoint) ?? BACKEND_TARGET,
|
|
2661
|
+
backendEndpoint: (options == null ? void 0 : options.backendEndpoint) ?? "https://client-api.fragmentsx.com",
|
|
2694
2662
|
apiToken: options == null ? void 0 : options.apiToken,
|
|
2695
2663
|
referer: options == null ? void 0 : options.referer
|
|
2696
2664
|
};
|
|
2697
2665
|
},
|
|
2666
|
+
...(options == null ? void 0 : options.plugins) ?? [],
|
|
2698
2667
|
fetchPlugin,
|
|
2699
2668
|
fontsPlugin,
|
|
2669
|
+
propertiesPlugin,
|
|
2700
2670
|
fragmentsPlugin({
|
|
2701
2671
|
plugins: options == null ? void 0 : options.fragmentPlugins
|
|
2702
2672
|
}),
|
|
@@ -2707,6 +2677,39 @@ const createFragmentsClient = (options) => {
|
|
|
2707
2677
|
]
|
|
2708
2678
|
});
|
|
2709
2679
|
};
|
|
2680
|
+
const areaMetaPlugin = (options) => (state) => {
|
|
2681
|
+
state.$area = {
|
|
2682
|
+
areaId: options.areaId,
|
|
2683
|
+
campaignId: options.campaignId,
|
|
2684
|
+
variantId: options.variantId
|
|
2685
|
+
};
|
|
2686
|
+
};
|
|
2687
|
+
const createAreaManager = (options) => {
|
|
2688
|
+
var _a;
|
|
2689
|
+
const manager = kt({
|
|
2690
|
+
_type: "AreaManager",
|
|
2691
|
+
_id: String(options.areaId),
|
|
2692
|
+
initialState: {},
|
|
2693
|
+
skip: [
|
|
2694
|
+
u([
|
|
2695
|
+
...Object.keys(index.nodes),
|
|
2696
|
+
"PropertiesRoot"
|
|
2697
|
+
])
|
|
2698
|
+
],
|
|
2699
|
+
plugins: [
|
|
2700
|
+
areaMetaPlugin({
|
|
2701
|
+
areaId: options.areaId,
|
|
2702
|
+
campaignId: options.campaignId,
|
|
2703
|
+
variantId: options.variantId
|
|
2704
|
+
}),
|
|
2705
|
+
propertiesPlugin
|
|
2706
|
+
]
|
|
2707
|
+
});
|
|
2708
|
+
if ((_a = options.areaProperties) == null ? void 0 : _a.length) {
|
|
2709
|
+
manager.$properties.hydrate(options.areaProperties);
|
|
2710
|
+
}
|
|
2711
|
+
return manager;
|
|
2712
|
+
};
|
|
2710
2713
|
const ssrPlugin = (state) => {
|
|
2711
2714
|
var _a, _b, _c;
|
|
2712
2715
|
if (!["$fragments"].every((field) => field in state)) {
|
|
@@ -2751,6 +2754,19 @@ const ssrPlugin = (state) => {
|
|
|
2751
2754
|
};
|
|
2752
2755
|
return state;
|
|
2753
2756
|
};
|
|
2757
|
+
const VALID_DEVICE_TYPES = ["mobile", "tablet", "desktop"];
|
|
2758
|
+
const VALID_OS_TYPES = ["android", "ios", "windows", "macos", "linux"];
|
|
2759
|
+
const filtersPlugin = (overrides) => (state) => {
|
|
2760
|
+
if (overrides.deviceType && !VALID_DEVICE_TYPES.includes(overrides.deviceType)) {
|
|
2761
|
+
console.warn(
|
|
2762
|
+
`[filtersPlugin] Unknown deviceType: "${overrides.deviceType}"`
|
|
2763
|
+
);
|
|
2764
|
+
}
|
|
2765
|
+
if (overrides.osType && !VALID_OS_TYPES.includes(overrides.osType)) {
|
|
2766
|
+
console.warn(`[filtersPlugin] Unknown osType: "${overrides.osType}"`);
|
|
2767
|
+
}
|
|
2768
|
+
state.env.filterOverrides = overrides;
|
|
2769
|
+
};
|
|
2754
2770
|
function createTestFragmentsClient(options) {
|
|
2755
2771
|
const client = createFragmentsClient({
|
|
2756
2772
|
apiToken: (options == null ? void 0 : options.apiToken) ?? "test-token"
|
|
@@ -2768,7 +2784,10 @@ function createTestFragmentsClient(options) {
|
|
|
2768
2784
|
return client;
|
|
2769
2785
|
}
|
|
2770
2786
|
export {
|
|
2787
|
+
createAreaManager,
|
|
2771
2788
|
createFragmentsClient,
|
|
2772
2789
|
createTestFragmentsClient,
|
|
2790
|
+
filtersPlugin,
|
|
2791
|
+
propertiesPlugin,
|
|
2773
2792
|
ssrPlugin
|
|
2774
2793
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"areaQueries.test.d.ts","sourceRoot":"","sources":["../../../src/plugins/fetch/areaQueries.test.ts"],"names":[],"mappings":""}
|