@hyperframes/parsers 0.8.193 → 0.8.195
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/gsapParser.js +11 -11
- package/dist/gsapParserAcorn.js +28 -11
- package/dist/gsapParserExports.js +28 -11
- package/dist/gsapWriterAcorn.js +11 -11
- package/dist/index.js +28 -11
- package/dist/referenceResolver.d.ts +3 -0
- package/dist/referenceResolver.js +13 -2
- package/package.json +2 -2
package/dist/gsapParser.js
CHANGED
|
@@ -196,6 +196,16 @@ function mergePercentageKeyframes(keyframes) {
|
|
|
196
196
|
}
|
|
197
197
|
return [...byPercentage.values()].sort((a, b) => a.percentage - b.percentage);
|
|
198
198
|
}
|
|
199
|
+
function distributeArrayKeyframes(channels) {
|
|
200
|
+
return mergePercentageKeyframes(
|
|
201
|
+
[...channels].flatMap(
|
|
202
|
+
([key, values]) => values.map((value, index) => ({
|
|
203
|
+
percentage: values.length > 1 ? Math.round(index / (values.length - 1) * 100) : 0,
|
|
204
|
+
properties: { [key]: value }
|
|
205
|
+
}))
|
|
206
|
+
)
|
|
207
|
+
);
|
|
208
|
+
}
|
|
199
209
|
function serializeGsapAnimations(animations, timelineVar = "tl", options) {
|
|
200
210
|
const sorted = [...animations].sort((a, b) => {
|
|
201
211
|
const aNum = a.resolvedStart ?? (typeof a.position === "number" ? a.position : Number.MAX_SAFE_INTEGER);
|
|
@@ -1122,19 +1132,9 @@ function parseSimpleArrayKeyframes(node, scope) {
|
|
|
1122
1132
|
easeEach = tryResolveStringProp(prop.value, scope) ?? easeEach;
|
|
1123
1133
|
}
|
|
1124
1134
|
}
|
|
1125
|
-
const maxLen = Math.max(...[...arrayProps.values()].map((a) => a.length), 0);
|
|
1126
|
-
const keyframes = [];
|
|
1127
|
-
for (let i = 0; i < maxLen; i++) {
|
|
1128
|
-
const percentage = maxLen > 1 ? Math.round(i / (maxLen - 1) * 100) : 0;
|
|
1129
|
-
const properties = {};
|
|
1130
|
-
for (const [key, values] of arrayProps) {
|
|
1131
|
-
if (i < values.length) properties[key] = values[i];
|
|
1132
|
-
}
|
|
1133
|
-
keyframes.push({ percentage, properties });
|
|
1134
|
-
}
|
|
1135
1135
|
return {
|
|
1136
1136
|
format: "simple-array",
|
|
1137
|
-
keyframes,
|
|
1137
|
+
keyframes: distributeArrayKeyframes(arrayProps),
|
|
1138
1138
|
...ease ? { ease } : {},
|
|
1139
1139
|
...easeEach ? { easeEach } : {}
|
|
1140
1140
|
};
|
package/dist/gsapParserAcorn.js
CHANGED
|
@@ -52,6 +52,33 @@ function editabilityForProvenance(provenance) {
|
|
|
52
52
|
if (provenance.kind === "runtime-dynamic") return "source";
|
|
53
53
|
return "unroll";
|
|
54
54
|
}
|
|
55
|
+
function mergePercentageKeyframes(keyframes) {
|
|
56
|
+
const byPercentage = /* @__PURE__ */ new Map();
|
|
57
|
+
for (const keyframe of keyframes) {
|
|
58
|
+
const existing = byPercentage.get(keyframe.percentage);
|
|
59
|
+
if (!existing) {
|
|
60
|
+
byPercentage.set(keyframe.percentage, {
|
|
61
|
+
...keyframe,
|
|
62
|
+
properties: { ...keyframe.properties }
|
|
63
|
+
});
|
|
64
|
+
continue;
|
|
65
|
+
}
|
|
66
|
+
existing.properties = { ...existing.properties, ...keyframe.properties };
|
|
67
|
+
if (keyframe.ease !== void 0) existing.ease = keyframe.ease;
|
|
68
|
+
if (keyframe.auto !== void 0) existing.auto = keyframe.auto;
|
|
69
|
+
}
|
|
70
|
+
return [...byPercentage.values()].sort((a, b) => a.percentage - b.percentage);
|
|
71
|
+
}
|
|
72
|
+
function distributeArrayKeyframes(channels) {
|
|
73
|
+
return mergePercentageKeyframes(
|
|
74
|
+
[...channels].flatMap(
|
|
75
|
+
([key, values]) => values.map((value, index) => ({
|
|
76
|
+
percentage: values.length > 1 ? Math.round(index / (values.length - 1) * 100) : 0,
|
|
77
|
+
properties: { [key]: value }
|
|
78
|
+
}))
|
|
79
|
+
)
|
|
80
|
+
);
|
|
81
|
+
}
|
|
55
82
|
function buildArcPath(coords, curviness, autoRotate, isCubic) {
|
|
56
83
|
const first = coords[0];
|
|
57
84
|
if (coords.length < 2 || !first) return void 0;
|
|
@@ -1357,19 +1384,9 @@ function parseSimpleArrayKeyframes(node, scope) {
|
|
|
1357
1384
|
easeEach = tryResolveStringProp(prop.value, scope) ?? easeEach;
|
|
1358
1385
|
}
|
|
1359
1386
|
}
|
|
1360
|
-
const maxLen = Math.max(...[...arrayProps.values()].map((a) => a.length), 0);
|
|
1361
|
-
const keyframes = [];
|
|
1362
|
-
for (let i = 0; i < maxLen; i++) {
|
|
1363
|
-
const percentage = maxLen > 1 ? Math.round(i / (maxLen - 1) * 100) : 0;
|
|
1364
|
-
const properties = {};
|
|
1365
|
-
for (const [key, values] of arrayProps) {
|
|
1366
|
-
if (i < values.length) properties[key] = values[i];
|
|
1367
|
-
}
|
|
1368
|
-
keyframes.push({ percentage, properties });
|
|
1369
|
-
}
|
|
1370
1387
|
return {
|
|
1371
1388
|
format: "simple-array",
|
|
1372
|
-
keyframes,
|
|
1389
|
+
keyframes: distributeArrayKeyframes(arrayProps),
|
|
1373
1390
|
...ease ? { ease } : {},
|
|
1374
1391
|
...easeEach ? { easeEach } : {}
|
|
1375
1392
|
};
|
|
@@ -125,6 +125,33 @@ function editabilityForProvenance(provenance) {
|
|
|
125
125
|
if (provenance.kind === "runtime-dynamic") return "source";
|
|
126
126
|
return "unroll";
|
|
127
127
|
}
|
|
128
|
+
function mergePercentageKeyframes(keyframes) {
|
|
129
|
+
const byPercentage = /* @__PURE__ */ new Map();
|
|
130
|
+
for (const keyframe of keyframes) {
|
|
131
|
+
const existing = byPercentage.get(keyframe.percentage);
|
|
132
|
+
if (!existing) {
|
|
133
|
+
byPercentage.set(keyframe.percentage, {
|
|
134
|
+
...keyframe,
|
|
135
|
+
properties: { ...keyframe.properties }
|
|
136
|
+
});
|
|
137
|
+
continue;
|
|
138
|
+
}
|
|
139
|
+
existing.properties = { ...existing.properties, ...keyframe.properties };
|
|
140
|
+
if (keyframe.ease !== void 0) existing.ease = keyframe.ease;
|
|
141
|
+
if (keyframe.auto !== void 0) existing.auto = keyframe.auto;
|
|
142
|
+
}
|
|
143
|
+
return [...byPercentage.values()].sort((a, b) => a.percentage - b.percentage);
|
|
144
|
+
}
|
|
145
|
+
function distributeArrayKeyframes(channels) {
|
|
146
|
+
return mergePercentageKeyframes(
|
|
147
|
+
[...channels].flatMap(
|
|
148
|
+
([key, values]) => values.map((value, index) => ({
|
|
149
|
+
percentage: values.length > 1 ? Math.round(index / (values.length - 1) * 100) : 0,
|
|
150
|
+
properties: { [key]: value }
|
|
151
|
+
}))
|
|
152
|
+
)
|
|
153
|
+
);
|
|
154
|
+
}
|
|
128
155
|
function buildArcPath(coords, curviness, autoRotate, isCubic) {
|
|
129
156
|
const first = coords[0];
|
|
130
157
|
if (coords.length < 2 || !first) return void 0;
|
|
@@ -1648,19 +1675,9 @@ function parseSimpleArrayKeyframes(node, scope) {
|
|
|
1648
1675
|
easeEach = tryResolveStringProp(prop.value, scope) ?? easeEach;
|
|
1649
1676
|
}
|
|
1650
1677
|
}
|
|
1651
|
-
const maxLen = Math.max(...[...arrayProps.values()].map((a) => a.length), 0);
|
|
1652
|
-
const keyframes = [];
|
|
1653
|
-
for (let i = 0; i < maxLen; i++) {
|
|
1654
|
-
const percentage = maxLen > 1 ? Math.round(i / (maxLen - 1) * 100) : 0;
|
|
1655
|
-
const properties = {};
|
|
1656
|
-
for (const [key, values] of arrayProps) {
|
|
1657
|
-
if (i < values.length) properties[key] = values[i];
|
|
1658
|
-
}
|
|
1659
|
-
keyframes.push({ percentage, properties });
|
|
1660
|
-
}
|
|
1661
1678
|
return {
|
|
1662
1679
|
format: "simple-array",
|
|
1663
|
-
keyframes,
|
|
1680
|
+
keyframes: distributeArrayKeyframes(arrayProps),
|
|
1664
1681
|
...ease ? { ease } : {},
|
|
1665
1682
|
...easeEach ? { easeEach } : {}
|
|
1666
1683
|
};
|
package/dist/gsapWriterAcorn.js
CHANGED
|
@@ -118,6 +118,16 @@ function mergePercentageKeyframes(keyframes) {
|
|
|
118
118
|
}
|
|
119
119
|
return [...byPercentage.values()].sort((a, b) => a.percentage - b.percentage);
|
|
120
120
|
}
|
|
121
|
+
function distributeArrayKeyframes(channels) {
|
|
122
|
+
return mergePercentageKeyframes(
|
|
123
|
+
[...channels].flatMap(
|
|
124
|
+
([key, values]) => values.map((value, index) => ({
|
|
125
|
+
percentage: values.length > 1 ? Math.round(index / (values.length - 1) * 100) : 0,
|
|
126
|
+
properties: { [key]: value }
|
|
127
|
+
}))
|
|
128
|
+
)
|
|
129
|
+
);
|
|
130
|
+
}
|
|
121
131
|
function buildArcPath(coords, curviness, autoRotate, isCubic) {
|
|
122
132
|
const first = coords[0];
|
|
123
133
|
if (coords.length < 2 || !first) return void 0;
|
|
@@ -988,19 +998,9 @@ function parseSimpleArrayKeyframes(node, scope) {
|
|
|
988
998
|
easeEach = tryResolveStringProp(prop.value, scope) ?? easeEach;
|
|
989
999
|
}
|
|
990
1000
|
}
|
|
991
|
-
const maxLen = Math.max(...[...arrayProps.values()].map((a) => a.length), 0);
|
|
992
|
-
const keyframes = [];
|
|
993
|
-
for (let i = 0; i < maxLen; i++) {
|
|
994
|
-
const percentage = maxLen > 1 ? Math.round(i / (maxLen - 1) * 100) : 0;
|
|
995
|
-
const properties = {};
|
|
996
|
-
for (const [key, values] of arrayProps) {
|
|
997
|
-
if (i < values.length) properties[key] = values[i];
|
|
998
|
-
}
|
|
999
|
-
keyframes.push({ percentage, properties });
|
|
1000
|
-
}
|
|
1001
1001
|
return {
|
|
1002
1002
|
format: "simple-array",
|
|
1003
|
-
keyframes,
|
|
1003
|
+
keyframes: distributeArrayKeyframes(arrayProps),
|
|
1004
1004
|
...ease ? { ease } : {},
|
|
1005
1005
|
...easeEach ? { easeEach } : {}
|
|
1006
1006
|
};
|
package/dist/index.js
CHANGED
|
@@ -229,6 +229,33 @@ function editabilityForProvenance(provenance) {
|
|
|
229
229
|
if (provenance.kind === "runtime-dynamic") return "source";
|
|
230
230
|
return "unroll";
|
|
231
231
|
}
|
|
232
|
+
function mergePercentageKeyframes(keyframes) {
|
|
233
|
+
const byPercentage = /* @__PURE__ */ new Map();
|
|
234
|
+
for (const keyframe of keyframes) {
|
|
235
|
+
const existing = byPercentage.get(keyframe.percentage);
|
|
236
|
+
if (!existing) {
|
|
237
|
+
byPercentage.set(keyframe.percentage, {
|
|
238
|
+
...keyframe,
|
|
239
|
+
properties: { ...keyframe.properties }
|
|
240
|
+
});
|
|
241
|
+
continue;
|
|
242
|
+
}
|
|
243
|
+
existing.properties = { ...existing.properties, ...keyframe.properties };
|
|
244
|
+
if (keyframe.ease !== void 0) existing.ease = keyframe.ease;
|
|
245
|
+
if (keyframe.auto !== void 0) existing.auto = keyframe.auto;
|
|
246
|
+
}
|
|
247
|
+
return [...byPercentage.values()].sort((a, b) => a.percentage - b.percentage);
|
|
248
|
+
}
|
|
249
|
+
function distributeArrayKeyframes(channels) {
|
|
250
|
+
return mergePercentageKeyframes(
|
|
251
|
+
[...channels].flatMap(
|
|
252
|
+
([key, values]) => values.map((value, index) => ({
|
|
253
|
+
percentage: values.length > 1 ? Math.round(index / (values.length - 1) * 100) : 0,
|
|
254
|
+
properties: { [key]: value }
|
|
255
|
+
}))
|
|
256
|
+
)
|
|
257
|
+
);
|
|
258
|
+
}
|
|
232
259
|
function buildArcPath(coords, curviness, autoRotate, isCubic) {
|
|
233
260
|
const first = coords[0];
|
|
234
261
|
if (coords.length < 2 || !first) return void 0;
|
|
@@ -1756,19 +1783,9 @@ function parseSimpleArrayKeyframes(node, scope) {
|
|
|
1756
1783
|
easeEach = tryResolveStringProp(prop.value, scope) ?? easeEach;
|
|
1757
1784
|
}
|
|
1758
1785
|
}
|
|
1759
|
-
const maxLen = Math.max(...[...arrayProps.values()].map((a) => a.length), 0);
|
|
1760
|
-
const keyframes = [];
|
|
1761
|
-
for (let i = 0; i < maxLen; i++) {
|
|
1762
|
-
const percentage = maxLen > 1 ? Math.round(i / (maxLen - 1) * 100) : 0;
|
|
1763
|
-
const properties = {};
|
|
1764
|
-
for (const [key, values] of arrayProps) {
|
|
1765
|
-
if (i < values.length) properties[key] = values[i];
|
|
1766
|
-
}
|
|
1767
|
-
keyframes.push({ percentage, properties });
|
|
1768
|
-
}
|
|
1769
1786
|
return {
|
|
1770
1787
|
format: "simple-array",
|
|
1771
|
-
keyframes,
|
|
1788
|
+
keyframes: distributeArrayKeyframes(arrayProps),
|
|
1772
1789
|
...ease ? { ease } : {},
|
|
1773
1790
|
...easeEach ? { easeEach } : {}
|
|
1774
1791
|
};
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
/** Minimal structural DOM shape the reference resolver needs. */
|
|
2
2
|
interface RefResolverEl {
|
|
3
3
|
getAttribute(name: string): string | null;
|
|
4
|
+
readonly parentElement?: RefResolverEl | null;
|
|
5
|
+
closest?(selector: string): RefResolverEl | null;
|
|
6
|
+
querySelectorAll?(selector: string): Iterable<RefResolverEl>;
|
|
4
7
|
}
|
|
5
8
|
interface RefResolverDoc {
|
|
6
9
|
getElementById(id: string): RefResolverEl | null;
|
|
@@ -75,7 +75,18 @@ function parseStartExpression(raw) {
|
|
|
75
75
|
}
|
|
76
76
|
|
|
77
77
|
// src/referenceResolver.ts
|
|
78
|
-
function
|
|
78
|
+
function compositionScopeOf(el) {
|
|
79
|
+
return (el.getAttribute("data-composition-id") !== null ? el.parentElement : el)?.closest?.(
|
|
80
|
+
"[data-composition-id]"
|
|
81
|
+
) ?? null;
|
|
82
|
+
}
|
|
83
|
+
function findReferenceTargetEl(doc, refId, from) {
|
|
84
|
+
const scope = compositionScopeOf(from);
|
|
85
|
+
if (scope) {
|
|
86
|
+
for (const candidate of scope.querySelectorAll?.(`[id="${refId}"]`) ?? []) {
|
|
87
|
+
if (compositionScopeOf(candidate) === scope) return candidate;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
79
90
|
return doc.getElementById(refId) ?? doc.querySelector(`[data-composition-id="${refId}"]`);
|
|
80
91
|
}
|
|
81
92
|
function resolveReferencedStart(doc, el, startCache, visiting) {
|
|
@@ -94,7 +105,7 @@ function resolveReferencedStart(doc, el, startCache, visiting) {
|
|
|
94
105
|
startCache.set(el, value);
|
|
95
106
|
return value;
|
|
96
107
|
}
|
|
97
|
-
const target = findReferenceTargetEl(doc, expression.refId);
|
|
108
|
+
const target = findReferenceTargetEl(doc, expression.refId, el);
|
|
98
109
|
if (!target) {
|
|
99
110
|
startCache.set(el, 0);
|
|
100
111
|
return 0;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hyperframes/parsers",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.195",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/heygen-com/hyperframes",
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
"tsx": "^4.21.0",
|
|
136
136
|
"typescript": "^5.0.0",
|
|
137
137
|
"vitest": "^4.1.11",
|
|
138
|
-
"@hyperframes/core": "0.8.
|
|
138
|
+
"@hyperframes/core": "0.8.195"
|
|
139
139
|
},
|
|
140
140
|
"scripts": {
|
|
141
141
|
"build": "tsup",
|