@remotion/studio-server 4.0.527 → 4.0.528
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/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 +39 -505
- 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
|
});
|
|
@@ -626,28 +578,6 @@ const getFrameDisplayOffsetAdjustmentBetweenPaths = ({ startPath, endPath, video
|
|
|
626
578
|
}
|
|
627
579
|
return current ? { adjustment, hasEnclosingElement } : null;
|
|
628
580
|
};
|
|
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
581
|
const resolveCurrentFrameExpression = ({ node, ast, seenDeclarations, }) => {
|
|
652
582
|
var _a;
|
|
653
583
|
if (node.type === 'TSAsExpression') {
|
|
@@ -794,58 +724,6 @@ const getComputedStatus = (node, ast, videoConfigValues) => {
|
|
|
794
724
|
};
|
|
795
725
|
};
|
|
796
726
|
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
727
|
const getNodePathForRecastPath = (
|
|
850
728
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
851
729
|
recastPath, ast) => {
|
|
@@ -1049,392 +927,46 @@ const resolveSequencePropsNodePathsFromFilename = ({ fileName, targets, remotion
|
|
|
1049
927
|
action: 'read',
|
|
1050
928
|
});
|
|
1051
929
|
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,
|
|
930
|
+
const nodes = (0, codemods_1.getJsxNodes)({
|
|
931
|
+
project: { rootDir: remotionRoot, files: { [absolutePath]: fileContents } },
|
|
932
|
+
filePath: absolutePath,
|
|
1129
933
|
});
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
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,
|
|
1178
|
-
});
|
|
1179
|
-
if (cssShorthand &&
|
|
1180
|
-
objExpr.properties.some((property) => {
|
|
1181
|
-
if (property.type !== 'ObjectProperty') {
|
|
1182
|
-
return false;
|
|
1183
|
-
}
|
|
1184
|
-
const propertyName = getObjectPropertyName(property);
|
|
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,
|
|
934
|
+
return targets.map(({ line, column }) => {
|
|
935
|
+
var _a;
|
|
936
|
+
var _b;
|
|
937
|
+
const lineMatches = nodes.filter((node) => {
|
|
938
|
+
var _a;
|
|
939
|
+
return ((_a = node.location) === null || _a === void 0 ? void 0 : _a.line) === line;
|
|
1226
940
|
});
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
const numericExpression = (0, video_config_numeric_expression_1.parseVideoConfigNumericExpression)({
|
|
1231
|
-
node: propValue,
|
|
1232
|
-
videoConfigValues,
|
|
941
|
+
const exactMatches = lineMatches.filter((node) => {
|
|
942
|
+
var _a;
|
|
943
|
+
return ((_a = node.location) === null || _a === void 0 ? void 0 : _a.column) === column;
|
|
1233
944
|
});
|
|
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,
|
|
945
|
+
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);
|
|
1359
946
|
});
|
|
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
947
|
};
|
|
1402
|
-
|
|
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
|
-
}),
|
|
1414
|
-
});
|
|
1415
|
-
};
|
|
1416
|
-
exports.computeSequencePropsStatusFromAst = computeSequencePropsStatusFromAst;
|
|
948
|
+
exports.resolveSequencePropsNodePathsFromFilename = resolveSequencePropsNodePathsFromFilename;
|
|
1417
949
|
const computeSequencePropsStatusFromContent = ({ fileContents, nodePath, componentIdentity, keys, assetKeys = [], effects, videoConfigValues, }) => {
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
950
|
+
try {
|
|
951
|
+
return (0, codemods_1.getJsxNodeProps)({
|
|
952
|
+
project: { rootDir: '/', files: { 'source.tsx': fileContents } },
|
|
953
|
+
node: { filePath: 'source.tsx', nodePath },
|
|
954
|
+
componentIdentity,
|
|
955
|
+
keys,
|
|
956
|
+
assetKeys,
|
|
957
|
+
effectKeys: effects,
|
|
958
|
+
videoConfig: videoConfigValues !== null && videoConfigValues !== void 0 ? videoConfigValues : undefined,
|
|
1426
959
|
});
|
|
1427
|
-
cachedAst.videoConfigIdentifierValues.set(videoConfigCacheKey, videoConfigIdentifierValues);
|
|
1428
960
|
}
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
}
|
|
961
|
+
catch (error) {
|
|
962
|
+
if (error instanceof codemods_1.CodemodsInternals.JsxElementIdentityMismatchError) {
|
|
963
|
+
throw new jsx_component_identity_1.JsxElementIdentityMismatchError();
|
|
964
|
+
}
|
|
965
|
+
if (error instanceof codemods_1.CodemodsInternals.JsxElementNotFoundAtLocationError) {
|
|
966
|
+
throw new jsx_element_not_found_at_location_error_1.JsxElementNotFoundAtLocationError();
|
|
967
|
+
}
|
|
968
|
+
throw error;
|
|
969
|
+
}
|
|
1438
970
|
};
|
|
1439
971
|
exports.computeSequencePropsStatusFromContent = computeSequencePropsStatusFromContent;
|
|
1440
972
|
const computeSequencePropsStatus = ({ fileName, nodePath, componentIdentity, keys, assetKeys = [], effects, remotionRoot, videoConfigValues, }) => {
|
|
@@ -1462,9 +994,11 @@ const computeSequencePropsStatusFromFilenameByLocation = ({ fileName, line, colu
|
|
|
1462
994
|
fileName,
|
|
1463
995
|
action: 'read',
|
|
1464
996
|
});
|
|
1465
|
-
const
|
|
1466
|
-
|
|
1467
|
-
|
|
997
|
+
const [resolvedNodePath] = (0, exports.resolveSequencePropsNodePathsFromFilename)({
|
|
998
|
+
fileName,
|
|
999
|
+
targets: [{ line, column }],
|
|
1000
|
+
remotionRoot,
|
|
1001
|
+
});
|
|
1468
1002
|
if (!resolvedNodePath) {
|
|
1469
1003
|
return {
|
|
1470
1004
|
status: {
|
|
@@ -11,7 +11,6 @@ const undo_stack_1 = require("../undo-stack");
|
|
|
11
11
|
const formatting_1 = require("./log-updates/formatting");
|
|
12
12
|
const log_update_1 = require("./log-updates/log-update");
|
|
13
13
|
const source_file_write_queue_1 = require("./source-file-write-queue");
|
|
14
|
-
const { deleteEffects } = codemods_1.CodemodsInternals;
|
|
15
14
|
const getDeletedEffectDescription = (effectLabels) => {
|
|
16
15
|
if (effectLabels.length === 1) {
|
|
17
16
|
return effectLabels[0];
|
|
@@ -33,25 +32,27 @@ const deleteEffectHandler = ({ input: effects, remotionRoot, logLevel }) => {
|
|
|
33
32
|
itemsByFileName.set(item.fileName, fileItems);
|
|
34
33
|
}
|
|
35
34
|
const updates = await Promise.all([...itemsByFileName.entries()].map(async ([fileName, fileItems]) => {
|
|
35
|
+
var _a;
|
|
36
|
+
var _b;
|
|
36
37
|
const { absolutePath, fileRelativeToRoot } = (0, resolve_file_inside_project_1.resolveFileInsideProject)({
|
|
37
38
|
remotionRoot,
|
|
38
39
|
fileName,
|
|
39
40
|
action: 'modify',
|
|
40
41
|
});
|
|
41
42
|
const fileContents = (0, node_fs_1.readFileSync)(absolutePath, 'utf-8');
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
:
|
|
51
|
-
|
|
52
|
-
sequenceNodePath: item.sequenceNodePath.nodePath,
|
|
53
|
-
}),
|
|
43
|
+
const result = await (0, codemods_1.deleteEffects)({
|
|
44
|
+
project: {
|
|
45
|
+
files: { [absolutePath]: fileContents },
|
|
46
|
+
rootDir: remotionRoot,
|
|
47
|
+
},
|
|
48
|
+
effects: fileItems.map((item) => ({
|
|
49
|
+
filePath: absolutePath,
|
|
50
|
+
nodePath: item.sequenceNodePath.nodePath,
|
|
51
|
+
effectIndex: item.type === 'all-effects' ? null : item.effectIndex,
|
|
52
|
+
})),
|
|
54
53
|
});
|
|
54
|
+
const output = (_b = (_a = result.changes[0]) === null || _a === void 0 ? void 0 : _a.nextContents) !== null && _b !== void 0 ? _b : fileContents;
|
|
55
|
+
const { formatted, effectLabels, logLines } = result.editDetails[0];
|
|
55
56
|
return {
|
|
56
57
|
absolutePath,
|
|
57
58
|
fileRelativeToRoot,
|