@remotion/studio-server 4.0.527 → 4.0.529
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/codemods/apply-codemod-to-file.d.ts +2 -1
- package/dist/codemods/apply-codemod-to-file.js +141 -8
- package/dist/codemods/effect-param-expression.d.ts +1 -1
- package/dist/codemods/effect-param-expression.js +3 -2
- package/dist/codemods/update-effect-props/update-effect-props.d.ts +6 -33
- package/dist/codemods/update-effect-props/update-effect-props.js +16 -6
- package/dist/codemods/update-keyframes/update-keyframes.d.ts +24 -65
- package/dist/codemods/update-keyframes/update-keyframes.js +23 -5
- package/dist/codemods/update-sequence-props/update-sequence-props.d.ts +2 -17
- package/dist/codemods/update-sequence-props/update-sequence-props.js +15 -8
- package/dist/helpers/open-file-for-writing-without-symlinks.d.ts +6 -1
- package/dist/helpers/open-file-for-writing-without-symlinks.js +9 -6
- package/dist/index.d.ts +0 -22
- package/dist/index.js +0 -7
- package/dist/preview-server/api-routes.js +4 -0
- package/dist/preview-server/hot-middleware/index.js +13 -46
- package/dist/preview-server/routes/add-effect.js +16 -8
- package/dist/preview-server/routes/apply-codemod.d.ts +0 -19
- package/dist/preview-server/routes/apply-codemod.js +22 -25
- package/dist/preview-server/routes/apply-visual-control-change.js +12 -65
- package/dist/preview-server/routes/can-update-sequence-props.d.ts +0 -10
- package/dist/preview-server/routes/can-update-sequence-props.js +52 -511
- package/dist/preview-server/routes/delete-effect.js +14 -13
- package/dist/preview-server/routes/delete-jsx-nodes.js +15 -4
- package/dist/preview-server/routes/download-remote-asset.d.ts +5 -0
- package/dist/preview-server/routes/download-remote-asset.js +25 -20
- package/dist/preview-server/routes/duplicate-effect.js +11 -4
- package/dist/preview-server/routes/duplicate-jsx-node.js +14 -4
- package/dist/preview-server/routes/insert-element.js +399 -280
- package/dist/preview-server/routes/install-dependency.js +14 -4
- package/dist/preview-server/routes/prepare-element-install.js +3 -0
- package/dist/preview-server/routes/reorder-effect.js +11 -5
- package/dist/preview-server/routes/reorder-sequence.js +9 -5
- package/dist/preview-server/routes/replace-video-source.d.ts +3 -0
- package/dist/preview-server/routes/replace-video-source.js +81 -0
- package/dist/preview-server/routes/save-sequence-props.js +5 -26
- package/dist/preview-server/routes/split-jsx-sequence.js +13 -5
- package/dist/preview-server/routes/split-video-from-audio.js +8 -4
- package/dist/preview-server/routes/subscribe-to-sequence-props.js +6 -10
- package/dist/preview-server/routes/update-config.js +38 -2
- package/dist/preview-server/routes/update-default-props.js +11 -8
- package/dist/preview-server/routes/wrap-jsx-node.d.ts +3 -0
- package/dist/preview-server/routes/wrap-jsx-node.js +97 -0
- package/dist/preview-server/studio-protocol/handle-discovery.js +1 -1
- package/dist/preview-server/studio-protocol/handle-element-library.js +3 -3
- package/dist/preview-server/undo-stack.d.ts +2 -1
- package/dist/preview-server/undo-stack.js +19 -0
- package/dist/routes.js +2 -0
- package/package.json +8 -8
|
@@ -33,68 +33,20 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
exports.computeSequencePropsStatusFromFilenameByLocation = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.
|
|
36
|
+
exports.computeSequencePropsStatusFromFilenameByLocation = exports.computeSequencePropsStatus = exports.computeSequencePropsStatusFromContent = exports.resolveSequencePropsNodePathsFromFilename = exports.lineColumnsToNodePaths = exports.lineColumnToNodePath = exports.findNodePathForJsxElement = exports.getStaticJsxTextContent = exports.hasJsxChildrenAttribute = exports.getStaticJsxChildrenAttribute = exports.findJsxElementNodeAtNodePath = exports.findJsxElementAtNodePath = exports.findJsxElementPathAtNodePath = exports.getNodePathForRecastPath = exports.getComputedStatus = exports.extractStaticValue = exports.isStaticValue = void 0;
|
|
37
37
|
const node_fs_1 = require("node:fs");
|
|
38
|
+
const codemods_1 = require("@remotion/codemods");
|
|
38
39
|
const renderer_1 = require("@remotion/renderer");
|
|
39
40
|
const studio_shared_1 = require("@remotion/studio-shared");
|
|
40
41
|
const recast = __importStar(require("recast"));
|
|
41
42
|
const no_react_1 = require("remotion/no-react");
|
|
42
|
-
const parse_ast_1 = require("../../codemods/parse-ast");
|
|
43
|
-
const css_shorthand_properties_1 = require("../../helpers/css-shorthand-properties");
|
|
44
43
|
const get_ast_node_path_1 = require("../../helpers/get-ast-node-path");
|
|
45
44
|
const import_agnostic_node_path_1 = require("../../helpers/import-agnostic-node-path");
|
|
46
|
-
const parse_border_radius_shorthand_1 = require("../../helpers/parse-border-radius-shorthand");
|
|
47
45
|
const parse_keyframe_easing_expression_1 = require("../../helpers/parse-keyframe-easing-expression");
|
|
48
46
|
const resolve_file_inside_project_1 = require("../../helpers/resolve-file-inside-project");
|
|
49
47
|
const video_config_numeric_expression_1 = require("../../helpers/video-config-numeric-expression");
|
|
50
|
-
const video_config_values_1 = require("../../helpers/video-config-values");
|
|
51
48
|
const jsx_component_identity_1 = require("../jsx-component-identity");
|
|
52
49
|
const jsx_element_not_found_at_location_error_1 = require("../jsx-element-not-found-at-location-error");
|
|
53
|
-
const can_update_effect_props_1 = require("./can-update-effect-props");
|
|
54
|
-
// A file write synchronously notifies every sequence subscription. Status
|
|
55
|
-
// computation is read-only, so all subscribers can share one parsed snapshot
|
|
56
|
-
// until the notification burst has finished.
|
|
57
|
-
let cachedSequencePropsStatusAst = null;
|
|
58
|
-
// A subsequent save can consume the last read-only snapshot if the file has
|
|
59
|
-
// not changed. The save mutates the AST, so it must only be reused once.
|
|
60
|
-
let reusableSequencePropsStatusAst = null;
|
|
61
|
-
const getCachedSequencePropsStatusAst = (fileContents) => {
|
|
62
|
-
if ((cachedSequencePropsStatusAst === null || cachedSequencePropsStatusAst === void 0 ? void 0 : cachedSequencePropsStatusAst.fileContents) !== fileContents) {
|
|
63
|
-
const snapshot = {
|
|
64
|
-
fileContents,
|
|
65
|
-
ast: (0, parse_ast_1.parseAst)(fileContents),
|
|
66
|
-
videoConfigIdentifierValues: new Map(),
|
|
67
|
-
};
|
|
68
|
-
cachedSequencePropsStatusAst = snapshot;
|
|
69
|
-
reusableSequencePropsStatusAst = snapshot;
|
|
70
|
-
queueMicrotask(() => {
|
|
71
|
-
if (cachedSequencePropsStatusAst === snapshot) {
|
|
72
|
-
cachedSequencePropsStatusAst = null;
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
return cachedSequencePropsStatusAst;
|
|
77
|
-
};
|
|
78
|
-
const takeCachedSequencePropsStatusAst = (fileContents) => {
|
|
79
|
-
if ((reusableSequencePropsStatusAst === null || reusableSequencePropsStatusAst === void 0 ? void 0 : reusableSequencePropsStatusAst.fileContents) !== fileContents) {
|
|
80
|
-
return null;
|
|
81
|
-
}
|
|
82
|
-
const { ast } = reusableSequencePropsStatusAst;
|
|
83
|
-
reusableSequencePropsStatusAst = null;
|
|
84
|
-
if ((cachedSequencePropsStatusAst === null || cachedSequencePropsStatusAst === void 0 ? void 0 : cachedSequencePropsStatusAst.ast) === ast) {
|
|
85
|
-
cachedSequencePropsStatusAst = null;
|
|
86
|
-
}
|
|
87
|
-
return ast;
|
|
88
|
-
};
|
|
89
|
-
exports.takeCachedSequencePropsStatusAst = takeCachedSequencePropsStatusAst;
|
|
90
|
-
const staticStatus = (codeValue, numericExpression) => ({
|
|
91
|
-
status: 'static',
|
|
92
|
-
keyframeDisplayOffsetAdjustment: null,
|
|
93
|
-
codeValue,
|
|
94
|
-
...(numericExpression === null || numericExpression.type === 'literal'
|
|
95
|
-
? {}
|
|
96
|
-
: { numericExpression }),
|
|
97
|
-
});
|
|
98
50
|
const computedStatus = () => ({
|
|
99
51
|
status: 'computed',
|
|
100
52
|
});
|
|
@@ -362,7 +314,9 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
|
|
|
362
314
|
return null;
|
|
363
315
|
}
|
|
364
316
|
const extrapolateType = getExtrapolateType(value);
|
|
365
|
-
if (!extrapolateType
|
|
317
|
+
if (!extrapolateType ||
|
|
318
|
+
(interpolationFunction === 'interpolatePaths' &&
|
|
319
|
+
extrapolateType === 'identity')) {
|
|
366
320
|
return null;
|
|
367
321
|
}
|
|
368
322
|
clamping =
|
|
@@ -382,7 +336,7 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
|
|
|
382
336
|
continue;
|
|
383
337
|
}
|
|
384
338
|
if (key === 'output') {
|
|
385
|
-
if (interpolationFunction
|
|
339
|
+
if (interpolationFunction !== 'interpolate') {
|
|
386
340
|
return null;
|
|
387
341
|
}
|
|
388
342
|
const parsedOutput = getInterpolateOutputOption(value);
|
|
@@ -393,7 +347,7 @@ const getInterpolationMetadata = (interpolationFunction, callExpression, keyfram
|
|
|
393
347
|
continue;
|
|
394
348
|
}
|
|
395
349
|
if (key === 'outputType') {
|
|
396
|
-
if (interpolationFunction
|
|
350
|
+
if (interpolationFunction !== 'interpolate' ||
|
|
397
351
|
getInterpolateOutputType(value) === null) {
|
|
398
352
|
return null;
|
|
399
353
|
}
|
|
@@ -435,11 +389,16 @@ const getInterpolationKeyframes = (node, ast, videoConfigValues) => {
|
|
|
435
389
|
return undefined;
|
|
436
390
|
}
|
|
437
391
|
const callExpression = node;
|
|
438
|
-
if (callExpression.callee.type !== 'Identifier'
|
|
439
|
-
|
|
392
|
+
if (callExpression.callee.type !== 'Identifier') {
|
|
393
|
+
return undefined;
|
|
394
|
+
}
|
|
395
|
+
const interpolationFunction = codemods_1.CodemodsInternals.getKeyframeInterpolationFunctionForCallee({
|
|
396
|
+
ast,
|
|
397
|
+
callee: callExpression.callee,
|
|
398
|
+
});
|
|
399
|
+
if (interpolationFunction === null) {
|
|
440
400
|
return undefined;
|
|
441
401
|
}
|
|
442
|
-
const interpolationFunction = callExpression.callee.name;
|
|
443
402
|
const frameArg = callExpression.arguments[0];
|
|
444
403
|
const inputArg = callExpression.arguments[1];
|
|
445
404
|
const outputArg = callExpression.arguments[2];
|
|
@@ -626,28 +585,6 @@ const getFrameDisplayOffsetAdjustmentBetweenPaths = ({ startPath, endPath, video
|
|
|
626
585
|
}
|
|
627
586
|
return current ? { adjustment, hasEnclosingElement } : null;
|
|
628
587
|
};
|
|
629
|
-
const getDefaultFrameDisplayOffsetAdjustment = ({ jsxPath, videoConfigValues, }) => {
|
|
630
|
-
var _a;
|
|
631
|
-
let functionPath = jsxPath.parentPath;
|
|
632
|
-
while (functionPath) {
|
|
633
|
-
const node = functionPath.value;
|
|
634
|
-
if (node.type === 'FunctionDeclaration' ||
|
|
635
|
-
node.type === 'FunctionExpression' ||
|
|
636
|
-
node.type === 'ArrowFunctionExpression') {
|
|
637
|
-
break;
|
|
638
|
-
}
|
|
639
|
-
functionPath = functionPath.parentPath;
|
|
640
|
-
}
|
|
641
|
-
if (!functionPath) {
|
|
642
|
-
return null;
|
|
643
|
-
}
|
|
644
|
-
const result = getFrameDisplayOffsetAdjustmentBetweenPaths({
|
|
645
|
-
startPath: jsxPath,
|
|
646
|
-
endPath: functionPath,
|
|
647
|
-
videoConfigValues,
|
|
648
|
-
});
|
|
649
|
-
return (_a = result === null || result === void 0 ? void 0 : result.adjustment) !== null && _a !== void 0 ? _a : null;
|
|
650
|
-
};
|
|
651
588
|
const resolveCurrentFrameExpression = ({ node, ast, seenDeclarations, }) => {
|
|
652
589
|
var _a;
|
|
653
590
|
if (node.type === 'TSAsExpression') {
|
|
@@ -794,58 +731,6 @@ const getComputedStatus = (node, ast, videoConfigValues) => {
|
|
|
794
731
|
};
|
|
795
732
|
};
|
|
796
733
|
exports.getComputedStatus = getComputedStatus;
|
|
797
|
-
const getPropsStatus = (jsxElement, ast, videoConfigValues, assetKeys) => {
|
|
798
|
-
const props = {};
|
|
799
|
-
for (const attr of jsxElement.attributes) {
|
|
800
|
-
if (attr.type === 'JSXSpreadAttribute') {
|
|
801
|
-
// The spread may override every prop written before it
|
|
802
|
-
for (const key of Object.keys(props)) {
|
|
803
|
-
props[key] = computedStatus();
|
|
804
|
-
}
|
|
805
|
-
continue;
|
|
806
|
-
}
|
|
807
|
-
if (attr.name.type === 'JSXNamespacedName') {
|
|
808
|
-
continue;
|
|
809
|
-
}
|
|
810
|
-
const { name } = attr.name;
|
|
811
|
-
if (typeof name !== 'string') {
|
|
812
|
-
continue;
|
|
813
|
-
}
|
|
814
|
-
const { value } = attr;
|
|
815
|
-
if (!value) {
|
|
816
|
-
props[name] = staticStatus(true, null);
|
|
817
|
-
continue;
|
|
818
|
-
}
|
|
819
|
-
if (value.type === 'StringLiteral') {
|
|
820
|
-
props[name] = staticStatus(value.value, null);
|
|
821
|
-
continue;
|
|
822
|
-
}
|
|
823
|
-
if (value.type === 'JSXExpressionContainer') {
|
|
824
|
-
const { expression } = value;
|
|
825
|
-
const staticValueOptions = {
|
|
826
|
-
allowSpecialValues: assetKeys.includes(name),
|
|
827
|
-
};
|
|
828
|
-
if (expression.type === 'JSXEmptyExpression') {
|
|
829
|
-
props[name] = computedStatus();
|
|
830
|
-
continue;
|
|
831
|
-
}
|
|
832
|
-
if (!(0, exports.isStaticValue)(expression, staticValueOptions)) {
|
|
833
|
-
const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
|
|
834
|
-
node: expression,
|
|
835
|
-
videoConfigValues,
|
|
836
|
-
});
|
|
837
|
-
props[name] = numericExpression
|
|
838
|
-
? staticStatus(numericExpression.value, numericExpression)
|
|
839
|
-
: (0, exports.getComputedStatus)(expression, ast, videoConfigValues);
|
|
840
|
-
continue;
|
|
841
|
-
}
|
|
842
|
-
props[name] = staticStatus((0, exports.extractStaticValue)(expression, staticValueOptions), null);
|
|
843
|
-
continue;
|
|
844
|
-
}
|
|
845
|
-
props[name] = computedStatus();
|
|
846
|
-
}
|
|
847
|
-
return props;
|
|
848
|
-
};
|
|
849
734
|
const getNodePathForRecastPath = (
|
|
850
735
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
851
736
|
recastPath, ast) => {
|
|
@@ -1049,392 +934,46 @@ const resolveSequencePropsNodePathsFromFilename = ({ fileName, targets, remotion
|
|
|
1049
934
|
action: 'read',
|
|
1050
935
|
});
|
|
1051
936
|
const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
|
|
1052
|
-
const
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
exports.resolveSequencePropsNodePathsFromFilename = resolveSequencePropsNodePathsFromFilename;
|
|
1056
|
-
const PIXEL_VALUE_REGEX = /^-?\d+(\.\d+)?px$/;
|
|
1057
|
-
const isSupportedTranslateValue = (value) => {
|
|
1058
|
-
const parts = value.split(/\s+/);
|
|
1059
|
-
if (parts.length >= 1 && parts.length <= 3) {
|
|
1060
|
-
return parts.every((part) => PIXEL_VALUE_REGEX.test(part));
|
|
1061
|
-
}
|
|
1062
|
-
return false;
|
|
1063
|
-
};
|
|
1064
|
-
const validateStyleValue = (childKey, value) => {
|
|
1065
|
-
if (childKey === 'translate' && typeof value === 'string') {
|
|
1066
|
-
return isSupportedTranslateValue(value);
|
|
1067
|
-
}
|
|
1068
|
-
return true;
|
|
1069
|
-
};
|
|
1070
|
-
const getObjectPropertyName = (property) => {
|
|
1071
|
-
if (property.key.type === 'Identifier') {
|
|
1072
|
-
return property.key.name;
|
|
1073
|
-
}
|
|
1074
|
-
if (property.key.type === 'StringLiteral') {
|
|
1075
|
-
return property.key.value;
|
|
1076
|
-
}
|
|
1077
|
-
return null;
|
|
1078
|
-
};
|
|
1079
|
-
const BORDER_RADIUS_SHORTHAND = 'borderRadius';
|
|
1080
|
-
const BORDER_RADIUS_LONGHANDS = [
|
|
1081
|
-
'borderTopLeftRadius',
|
|
1082
|
-
'borderTopRightRadius',
|
|
1083
|
-
'borderBottomRightRadius',
|
|
1084
|
-
'borderBottomLeftRadius',
|
|
1085
|
-
];
|
|
1086
|
-
const BORDER_RADIUS_PROPERTIES = new Set([
|
|
1087
|
-
BORDER_RADIUS_SHORTHAND,
|
|
1088
|
-
...BORDER_RADIUS_LONGHANDS,
|
|
1089
|
-
]);
|
|
1090
|
-
const hasMixedBorderRadiusRepresentation = (jsxElement) => {
|
|
1091
|
-
var _a;
|
|
1092
|
-
const style = jsxElement.attributes.find((attribute) => attribute.type === 'JSXAttribute' &&
|
|
1093
|
-
attribute.name.type !== 'JSXNamespacedName' &&
|
|
1094
|
-
attribute.name.name === 'style');
|
|
1095
|
-
if (!style ||
|
|
1096
|
-
style.type !== 'JSXAttribute' ||
|
|
1097
|
-
((_a = style.value) === null || _a === void 0 ? void 0 : _a.type) !== 'JSXExpressionContainer' ||
|
|
1098
|
-
style.value.expression.type !== 'ObjectExpression') {
|
|
1099
|
-
return false;
|
|
1100
|
-
}
|
|
1101
|
-
let hasShorthand = false;
|
|
1102
|
-
let hasLonghand = false;
|
|
1103
|
-
for (const property of style.value.expression.properties) {
|
|
1104
|
-
if (property.type !== 'ObjectProperty') {
|
|
1105
|
-
continue;
|
|
1106
|
-
}
|
|
1107
|
-
const name = getObjectPropertyName(property);
|
|
1108
|
-
hasShorthand || (hasShorthand = name === BORDER_RADIUS_SHORTHAND);
|
|
1109
|
-
hasLonghand || (hasLonghand = BORDER_RADIUS_LONGHANDS.some((longhand) => longhand === name));
|
|
1110
|
-
}
|
|
1111
|
-
return hasShorthand && hasLonghand;
|
|
1112
|
-
};
|
|
1113
|
-
const getUniformBorderRadius = (value) => {
|
|
1114
|
-
const parsed = (0, parse_border_radius_shorthand_1.parseBorderRadiusShorthand)(value);
|
|
1115
|
-
if (!parsed) {
|
|
1116
|
-
return null;
|
|
1117
|
-
}
|
|
1118
|
-
const values = Object.values(parsed);
|
|
1119
|
-
return values.every((radius) => radius === values[0]) ? values[0] : null;
|
|
1120
|
-
};
|
|
1121
|
-
const getBorderRadiusShorthandStatus = ({ propValue, ast, videoConfigValues, }) => {
|
|
1122
|
-
if ((0, exports.isStaticValue)(propValue)) {
|
|
1123
|
-
const uniform = getUniformBorderRadius((0, exports.extractStaticValue)(propValue));
|
|
1124
|
-
return uniform === null ? computedStatus() : staticStatus(uniform, null);
|
|
1125
|
-
}
|
|
1126
|
-
const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
|
|
1127
|
-
node: propValue,
|
|
1128
|
-
videoConfigValues,
|
|
1129
|
-
});
|
|
1130
|
-
if (numericExpression !== null && numericExpression.value >= 0) {
|
|
1131
|
-
return staticStatus(numericExpression.value, numericExpression);
|
|
1132
|
-
}
|
|
1133
|
-
const computed = (0, exports.getComputedStatus)(propValue, ast, videoConfigValues);
|
|
1134
|
-
if (computed.status === 'keyframed' &&
|
|
1135
|
-
computed.interpolationFunction === 'interpolate' &&
|
|
1136
|
-
computed.keyframes.every((keyframe) => typeof keyframe.value === 'number' &&
|
|
1137
|
-
Number.isFinite(keyframe.value) &&
|
|
1138
|
-
keyframe.value >= 0)) {
|
|
1139
|
-
return computed;
|
|
1140
|
-
}
|
|
1141
|
-
return computedStatus();
|
|
1142
|
-
};
|
|
1143
|
-
const getNestedPropStatus = ({ jsxElement, ast, parentKey, childKey, videoConfigValues, allowSpecialValues, lastSpreadIndex, }) => {
|
|
1144
|
-
const attrIndex = jsxElement.attributes.findIndex((a) => a.type !== 'JSXSpreadAttribute' &&
|
|
1145
|
-
a.name.type !== 'JSXNamespacedName' &&
|
|
1146
|
-
a.name.name === parentKey);
|
|
1147
|
-
const attr = attrIndex === -1
|
|
1148
|
-
? undefined
|
|
1149
|
-
: jsxElement.attributes[attrIndex];
|
|
1150
|
-
if (attrIndex !== -1 && attrIndex < lastSpreadIndex) {
|
|
1151
|
-
// A later spread may replace the whole parent object
|
|
1152
|
-
return computedStatus();
|
|
1153
|
-
}
|
|
1154
|
-
if (!attr) {
|
|
1155
|
-
if (lastSpreadIndex !== -1) {
|
|
1156
|
-
// The spread may provide the parent object
|
|
1157
|
-
return computedStatus();
|
|
1158
|
-
}
|
|
1159
|
-
// Parent attribute doesn't exist, nested prop can be added
|
|
1160
|
-
return staticStatus(undefined, null);
|
|
1161
|
-
}
|
|
1162
|
-
if (!attr.value) {
|
|
1163
|
-
return staticStatus(undefined, null);
|
|
1164
|
-
}
|
|
1165
|
-
if (attr.value.type !== 'JSXExpressionContainer') {
|
|
1166
|
-
return computedStatus();
|
|
1167
|
-
}
|
|
1168
|
-
const { expression } = attr.value;
|
|
1169
|
-
if (expression.type === 'JSXEmptyExpression' ||
|
|
1170
|
-
expression.type !== 'ObjectExpression') {
|
|
1171
|
-
// Parent is not an object literal (e.g. style={myStyles})
|
|
1172
|
-
return computedStatus();
|
|
1173
|
-
}
|
|
1174
|
-
const objExpr = expression;
|
|
1175
|
-
const cssShorthand = (0, css_shorthand_properties_1.getCssShorthandForLonghand)({
|
|
1176
|
-
parentKey,
|
|
1177
|
-
longhand: childKey,
|
|
937
|
+
const nodes = (0, codemods_1.getJsxNodes)({
|
|
938
|
+
project: { rootDir: remotionRoot, files: { [absolutePath]: fileContents } },
|
|
939
|
+
filePath: absolutePath,
|
|
1178
940
|
});
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
return (propertyName !== null &&
|
|
1186
|
-
cssShorthand.isUnsupportedProperty(propertyName));
|
|
1187
|
-
})) {
|
|
1188
|
-
return computedStatus();
|
|
1189
|
-
}
|
|
1190
|
-
let prop;
|
|
1191
|
-
for (let index = objExpr.properties.length - 1; index >= 0; index--) {
|
|
1192
|
-
const candidate = objExpr.properties[index];
|
|
1193
|
-
if (candidate.type === 'SpreadElement') {
|
|
1194
|
-
return computedStatus();
|
|
1195
|
-
}
|
|
1196
|
-
if (candidate.type === 'ObjectProperty' &&
|
|
1197
|
-
(getObjectPropertyName(candidate) === childKey ||
|
|
1198
|
-
getObjectPropertyName(candidate) === (cssShorthand === null || cssShorthand === void 0 ? void 0 : cssShorthand.shorthand))) {
|
|
1199
|
-
prop = candidate;
|
|
1200
|
-
break;
|
|
1201
|
-
}
|
|
1202
|
-
}
|
|
1203
|
-
if (prop &&
|
|
1204
|
-
cssShorthand &&
|
|
1205
|
-
getObjectPropertyName(prop) === cssShorthand.shorthand) {
|
|
1206
|
-
const shorthandValue = prop.value;
|
|
1207
|
-
if (!(0, exports.isStaticValue)(shorthandValue, { allowSpecialValues: false })) {
|
|
1208
|
-
return computedStatus();
|
|
1209
|
-
}
|
|
1210
|
-
const staticShorthandValue = (0, exports.extractStaticValue)(shorthandValue, {
|
|
1211
|
-
allowSpecialValues: false,
|
|
1212
|
-
});
|
|
1213
|
-
const parsed = cssShorthand.parse(staticShorthandValue);
|
|
1214
|
-
return parsed ? staticStatus(parsed[childKey], null) : computedStatus();
|
|
1215
|
-
}
|
|
1216
|
-
if (!prop) {
|
|
1217
|
-
// Property not set in the object, can be added
|
|
1218
|
-
return staticStatus(undefined, null);
|
|
1219
|
-
}
|
|
1220
|
-
const propValue = prop.value;
|
|
1221
|
-
if (parentKey === 'style' && childKey === BORDER_RADIUS_SHORTHAND) {
|
|
1222
|
-
return getBorderRadiusShorthandStatus({
|
|
1223
|
-
propValue,
|
|
1224
|
-
ast,
|
|
1225
|
-
videoConfigValues,
|
|
941
|
+
return targets.map(({ line, column }) => {
|
|
942
|
+
var _a;
|
|
943
|
+
var _b;
|
|
944
|
+
const lineMatches = nodes.filter((node) => {
|
|
945
|
+
var _a;
|
|
946
|
+
return ((_a = node.location) === null || _a === void 0 ? void 0 : _a.line) === line;
|
|
1226
947
|
});
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
|
|
1231
|
-
node: propValue,
|
|
1232
|
-
videoConfigValues,
|
|
948
|
+
const exactMatches = lineMatches.filter((node) => {
|
|
949
|
+
var _a;
|
|
950
|
+
return ((_a = node.location) === null || _a === void 0 ? void 0 : _a.column) === column;
|
|
1233
951
|
});
|
|
1234
|
-
return
|
|
1235
|
-
? staticStatus(numericExpression.value, numericExpression)
|
|
1236
|
-
: (0, exports.getComputedStatus)(propValue, ast, videoConfigValues);
|
|
1237
|
-
}
|
|
1238
|
-
const propStatus = (0, exports.extractStaticValue)(propValue, staticValueOptions);
|
|
1239
|
-
if (!validateStyleValue(childKey, propStatus)) {
|
|
1240
|
-
return computedStatus();
|
|
1241
|
-
}
|
|
1242
|
-
return staticStatus(propStatus, null);
|
|
1243
|
-
};
|
|
1244
|
-
const computeEffectsForJsx = ({ ast, jsxElement, effects, videoConfigValues, }) => {
|
|
1245
|
-
return effects.map((effect, effectIndex) => (0, can_update_effect_props_1.computeEffectPropStatus)({
|
|
1246
|
-
ast,
|
|
1247
|
-
jsx: jsxElement,
|
|
1248
|
-
effectIndex,
|
|
1249
|
-
keys: effect,
|
|
1250
|
-
videoConfigValues,
|
|
1251
|
-
}));
|
|
1252
|
-
};
|
|
1253
|
-
const computeSequenceOnlyPropsRecord = ({ jsxElement, jsxElementNode, ast, keys, assetKeys, videoConfigValues, }) => {
|
|
1254
|
-
// A JSX spread attribute ({...props}) is invisible to the parser and may
|
|
1255
|
-
// set or override every prop that is not explicitly written after it.
|
|
1256
|
-
// Affected props are treated as computed so the runtime values pass
|
|
1257
|
-
// through untouched and Visual Mode does not offer to edit them.
|
|
1258
|
-
// Attributes written after the last spread win at runtime and can be
|
|
1259
|
-
// parsed as usual.
|
|
1260
|
-
const lastSpreadIndex = jsxElement.attributes.reduce((highest, attr, index) => attr.type === 'JSXSpreadAttribute' ? index : highest, -1);
|
|
1261
|
-
const allProps = getPropsStatus(jsxElement, ast, videoConfigValues, assetKeys);
|
|
1262
|
-
const filteredProps = {};
|
|
1263
|
-
const mixedBorderRadius = hasMixedBorderRadiusRepresentation(jsxElement);
|
|
1264
|
-
for (const key of keys) {
|
|
1265
|
-
if (mixedBorderRadius &&
|
|
1266
|
-
key.startsWith('style.') &&
|
|
1267
|
-
BORDER_RADIUS_PROPERTIES.has(key.slice('style.'.length))) {
|
|
1268
|
-
filteredProps[key] = computedStatus();
|
|
1269
|
-
continue;
|
|
1270
|
-
}
|
|
1271
|
-
if (key === 'children') {
|
|
1272
|
-
const childrenAttrIndex = jsxElement.attributes.findIndex((attr) => attr.type === 'JSXAttribute' &&
|
|
1273
|
-
attr.name.type === 'JSXIdentifier' &&
|
|
1274
|
-
attr.name.name === 'children');
|
|
1275
|
-
if (childrenAttrIndex !== -1 && childrenAttrIndex < lastSpreadIndex) {
|
|
1276
|
-
// A later spread may override the children attribute
|
|
1277
|
-
filteredProps[key] = computedStatus();
|
|
1278
|
-
continue;
|
|
1279
|
-
}
|
|
1280
|
-
const staticChildrenAttribute = (0, exports.getStaticJsxChildrenAttribute)(jsxElement);
|
|
1281
|
-
if (staticChildrenAttribute) {
|
|
1282
|
-
filteredProps[key] = staticStatus(staticChildrenAttribute.value, null);
|
|
1283
|
-
continue;
|
|
1284
|
-
}
|
|
1285
|
-
if ((0, exports.hasJsxChildrenAttribute)(jsxElement)) {
|
|
1286
|
-
filteredProps[key] = computedStatus();
|
|
1287
|
-
continue;
|
|
1288
|
-
}
|
|
1289
|
-
// JSX element children are compiled after any spread and win over
|
|
1290
|
-
// it. Only if the element body is empty may the spread provide the
|
|
1291
|
-
// children.
|
|
1292
|
-
const hasMeaningfulJsxChildren = jsxElementNode.children.some((candidate) => !(candidate.type === 'JSXText' && candidate.value.trim() === ''));
|
|
1293
|
-
if (!hasMeaningfulJsxChildren && lastSpreadIndex !== -1) {
|
|
1294
|
-
filteredProps[key] = computedStatus();
|
|
1295
|
-
continue;
|
|
1296
|
-
}
|
|
1297
|
-
const staticTextContent = (0, exports.getStaticJsxTextContent)(jsxElementNode);
|
|
1298
|
-
filteredProps[key] = staticTextContent
|
|
1299
|
-
? staticStatus(staticTextContent.value, null)
|
|
1300
|
-
: computedStatus();
|
|
1301
|
-
continue;
|
|
1302
|
-
}
|
|
1303
|
-
const dotIndex = key.indexOf('.');
|
|
1304
|
-
if (dotIndex !== -1) {
|
|
1305
|
-
const status = getNestedPropStatus({
|
|
1306
|
-
jsxElement,
|
|
1307
|
-
ast,
|
|
1308
|
-
parentKey: key.slice(0, dotIndex),
|
|
1309
|
-
childKey: key.slice(dotIndex + 1),
|
|
1310
|
-
videoConfigValues,
|
|
1311
|
-
allowSpecialValues: assetKeys.includes(key),
|
|
1312
|
-
lastSpreadIndex,
|
|
1313
|
-
});
|
|
1314
|
-
filteredProps[key] =
|
|
1315
|
-
key === 'style.translate' &&
|
|
1316
|
-
((status.status === 'static' &&
|
|
1317
|
-
typeof status.codeValue === 'string' &&
|
|
1318
|
-
status.codeValue.includes('%')) ||
|
|
1319
|
-
(status.status === 'keyframed' &&
|
|
1320
|
-
status.keyframes.some((keyframe) => typeof keyframe.value === 'string' &&
|
|
1321
|
-
keyframe.value.includes('%'))))
|
|
1322
|
-
? computedStatus()
|
|
1323
|
-
: status;
|
|
1324
|
-
}
|
|
1325
|
-
else if (key in allProps) {
|
|
1326
|
-
filteredProps[key] = allProps[key];
|
|
1327
|
-
}
|
|
1328
|
-
else if (lastSpreadIndex !== -1) {
|
|
1329
|
-
// The spread may provide this prop
|
|
1330
|
-
filteredProps[key] = computedStatus();
|
|
1331
|
-
}
|
|
1332
|
-
else {
|
|
1333
|
-
filteredProps[key] = staticStatus(undefined, null);
|
|
1334
|
-
}
|
|
1335
|
-
}
|
|
1336
|
-
return filteredProps;
|
|
1337
|
-
};
|
|
1338
|
-
const computeSequencePropsStatusFromAstAndIdentifiers = ({ ast, nodePath, componentIdentity, keys, assetKeys, effects, videoConfigIdentifierValues, }) => {
|
|
1339
|
-
var _a;
|
|
1340
|
-
const jsxPath = (0, exports.findJsxElementPathAtNodePath)(ast, nodePath);
|
|
1341
|
-
const jsxElementNode = jsxPath ? getJsxElementNodeFromJsxPath(jsxPath) : null;
|
|
1342
|
-
const jsxElement = (_a = jsxElementNode === null || jsxElementNode === void 0 ? void 0 : jsxElementNode.openingElement) !== null && _a !== void 0 ? _a : null;
|
|
1343
|
-
if (!jsxPath || !jsxElement || !jsxElementNode) {
|
|
1344
|
-
throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
|
|
1345
|
-
}
|
|
1346
|
-
if (!(0, jsx_component_identity_1.jsxComponentIdentitiesMatch)({
|
|
1347
|
-
expected: componentIdentity,
|
|
1348
|
-
actual: (0, jsx_component_identity_1.getJsxComponentIdentity)({ ast, jsxElement }),
|
|
1349
|
-
})) {
|
|
1350
|
-
throw new jsx_component_identity_1.JsxElementIdentityMismatchError();
|
|
1351
|
-
}
|
|
1352
|
-
const filteredProps = computeSequenceOnlyPropsRecord({
|
|
1353
|
-
jsxElement,
|
|
1354
|
-
jsxElementNode,
|
|
1355
|
-
ast,
|
|
1356
|
-
keys,
|
|
1357
|
-
assetKeys,
|
|
1358
|
-
videoConfigValues: videoConfigIdentifierValues,
|
|
1359
|
-
});
|
|
1360
|
-
const effectsStatuses = computeEffectsForJsx({
|
|
1361
|
-
ast,
|
|
1362
|
-
jsxElement,
|
|
1363
|
-
effects,
|
|
1364
|
-
videoConfigValues: videoConfigIdentifierValues,
|
|
1365
|
-
});
|
|
1366
|
-
const defaultKeyframeDisplayOffsetAdjustment = getDefaultFrameDisplayOffsetAdjustment({
|
|
1367
|
-
jsxPath,
|
|
1368
|
-
videoConfigValues: videoConfigIdentifierValues,
|
|
1369
|
-
});
|
|
1370
|
-
const addDefaultKeyframeDisplayOffsetAdjustment = (status) => {
|
|
1371
|
-
if (status.status !== 'static') {
|
|
1372
|
-
return status;
|
|
1373
|
-
}
|
|
1374
|
-
if (defaultKeyframeDisplayOffsetAdjustment === null) {
|
|
1375
|
-
return computedStatus();
|
|
1376
|
-
}
|
|
1377
|
-
if (defaultKeyframeDisplayOffsetAdjustment === 0) {
|
|
1378
|
-
return status;
|
|
1379
|
-
}
|
|
1380
|
-
return {
|
|
1381
|
-
...status,
|
|
1382
|
-
keyframeDisplayOffsetAdjustment: defaultKeyframeDisplayOffsetAdjustment,
|
|
1383
|
-
};
|
|
1384
|
-
};
|
|
1385
|
-
return {
|
|
1386
|
-
canUpdate: true,
|
|
1387
|
-
props: Object.fromEntries(Object.entries(filteredProps).map(([key, status]) => [
|
|
1388
|
-
key,
|
|
1389
|
-
addDefaultKeyframeDisplayOffsetAdjustment(status),
|
|
1390
|
-
])),
|
|
1391
|
-
effects: effectsStatuses.map((effectStatus) => effectStatus.canUpdate
|
|
1392
|
-
? {
|
|
1393
|
-
...effectStatus,
|
|
1394
|
-
props: Object.fromEntries(Object.entries(effectStatus.props).map(([key, status]) => [
|
|
1395
|
-
key,
|
|
1396
|
-
addDefaultKeyframeDisplayOffsetAdjustment(status),
|
|
1397
|
-
])),
|
|
1398
|
-
}
|
|
1399
|
-
: effectStatus),
|
|
1400
|
-
};
|
|
1401
|
-
};
|
|
1402
|
-
const computeSequencePropsStatusFromAst = ({ ast, nodePath, componentIdentity, keys, assetKeys = [], effects, videoConfigValues, }) => {
|
|
1403
|
-
return computeSequencePropsStatusFromAstAndIdentifiers({
|
|
1404
|
-
ast,
|
|
1405
|
-
nodePath,
|
|
1406
|
-
componentIdentity,
|
|
1407
|
-
keys,
|
|
1408
|
-
assetKeys,
|
|
1409
|
-
effects,
|
|
1410
|
-
videoConfigIdentifierValues: (0, video_config_values_1.getVideoConfigIdentifierValues)({
|
|
1411
|
-
ast,
|
|
1412
|
-
videoConfigValues,
|
|
1413
|
-
}),
|
|
952
|
+
return ((_b = (_a = (exactMatches.length === 1 ? exactMatches[0] : lineMatches.at(-1))) === null || _a === void 0 ? void 0 : _a.nodePath) !== null && _b !== void 0 ? _b : null);
|
|
1414
953
|
});
|
|
1415
954
|
};
|
|
1416
|
-
exports.
|
|
955
|
+
exports.resolveSequencePropsNodePathsFromFilename = resolveSequencePropsNodePathsFromFilename;
|
|
1417
956
|
const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, assetKeys = [], effects, videoConfigValues, }) => {
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
957
|
+
try {
|
|
958
|
+
return (0, codemods_1.getJsxNodeProps)({
|
|
959
|
+
project: { rootDir: '/', files: { 'source.tsx': fileContents } },
|
|
960
|
+
node: { filePath: 'source.tsx', nodePath },
|
|
961
|
+
componentIdentity,
|
|
962
|
+
keys,
|
|
963
|
+
assetKeys,
|
|
964
|
+
effectKeys: effects,
|
|
965
|
+
videoConfig: videoConfigValues !== null && videoConfigValues !== void 0 ? videoConfigValues : undefined,
|
|
1426
966
|
});
|
|
1427
|
-
cachedAst.videoConfigIdentifierValues.set(videoConfigCacheKey, videoConfigIdentifierValues);
|
|
1428
967
|
}
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
}
|
|
968
|
+
catch (error) {
|
|
969
|
+
if (error instanceof codemods_1.CodemodsInternals.JsxElementIdentityMismatchError) {
|
|
970
|
+
throw new jsx_component_identity_1.JsxElementIdentityMismatchError();
|
|
971
|
+
}
|
|
972
|
+
if (error instanceof codemods_1.CodemodsInternals.JsxElementNotFoundAtLocationError) {
|
|
973
|
+
throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
|
|
974
|
+
}
|
|
975
|
+
throw error;
|
|
976
|
+
}
|
|
1438
977
|
};
|
|
1439
978
|
exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
|
|
1440
979
|
const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, assetKeys = [], effects, remotionRoot, videoConfigValues, }) => {
|
|
@@ -1462,9 +1001,11 @@ const computeSequencePropsStatusFromFilenameByLocation = ({ fileName, line, colu
|
|
|
1462
1001
|
fileName,
|
|
1463
1002
|
action: 'read',
|
|
1464
1003
|
});
|
|
1465
|
-
const
|
|
1466
|
-
|
|
1467
|
-
|
|
1004
|
+
const [resolvedNodePath] = (0, exports.resolveSequencePropsNodePathsFromFilename)({
|
|
1005
|
+
fileName,
|
|
1006
|
+
targets: [{ line, column }],
|
|
1007
|
+
remotionRoot,
|
|
1008
|
+
});
|
|
1468
1009
|
if (!resolvedNodePath) {
|
|
1469
1010
|
return {
|
|
1470
1011
|
status: {
|