unframer 1.1.2 → 1.2.0
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/bin.mjs +1 -1
- package/dist/cli.d.ts +1 -1
- package/dist/cli.d.ts.map +1 -1
- package/dist/cli.js +14 -2
- package/dist/cli.js.map +1 -1
- package/framer-fixed/dist/framer.js +182 -100
- package/package.json +3 -2
- package/src/cli.tsx +74 -49
package/bin.mjs
CHANGED
package/dist/cli.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare
|
|
1
|
+
export declare const cli: import("cac").CAC;
|
|
2
2
|
//# sourceMappingURL=cli.d.ts.map
|
package/dist/cli.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,GAAG,mBAAQ,CAAA"}
|
package/dist/cli.js
CHANGED
|
@@ -5,8 +5,13 @@ import fs from 'fs-extra';
|
|
|
5
5
|
import { findUp } from 'find-up';
|
|
6
6
|
import path from 'path';
|
|
7
7
|
const configName = 'unframer.json';
|
|
8
|
+
import { cac } from 'cac';
|
|
9
|
+
export const cli = cac();
|
|
8
10
|
const __dirname = path.dirname(new URL(import.meta.url).pathname);
|
|
9
|
-
|
|
11
|
+
cli.command('', 'Run unframer')
|
|
12
|
+
.option('--watch', 'Watch for Framer and unframer.json changes')
|
|
13
|
+
.action(async function main(options) {
|
|
14
|
+
console.log({ options });
|
|
10
15
|
const cwd = process.cwd();
|
|
11
16
|
const watch = process.argv.includes('--watch');
|
|
12
17
|
logger.log(`Looking for ${configName} in ${cwd}`);
|
|
@@ -55,7 +60,14 @@ export async function cli() {
|
|
|
55
60
|
}
|
|
56
61
|
config = newConfig;
|
|
57
62
|
});
|
|
58
|
-
}
|
|
63
|
+
});
|
|
64
|
+
cli.command('init', 'Init the unframer.json config').action(async (options) => {
|
|
65
|
+
fs.writeFileSync(`unframer.json`, JSON.stringify({
|
|
66
|
+
components: { hero: 'https://framer.com/m/Header-WtSW.js' },
|
|
67
|
+
outDir: 'framer',
|
|
68
|
+
}, null, 2));
|
|
69
|
+
});
|
|
70
|
+
cli.help();
|
|
59
71
|
function safeJsonParse(json) {
|
|
60
72
|
try {
|
|
61
73
|
return JSON.parse(json);
|
package/dist/cli.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAe,EAAgB,eAAe,EAAE,MAAM,QAAQ,CAAA;AAE9D,OAAO,QAAQ,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAE,MAAM,UAAU,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,MAAM,UAAU,GAAG,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAe,EAAgB,eAAe,EAAE,MAAM,QAAQ,CAAA;AAE9D,OAAO,QAAQ,MAAM,UAAU,CAAA;AAC/B,OAAO,EAAE,MAAM,UAAU,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,MAAM,UAAU,GAAG,eAAe,CAAA;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,EAAE,CAAA;AAExB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAA;AAEjE,GAAG,CAAC,OAAO,CAAC,EAAE,EAAE,cAAc,CAAC;KAC1B,MAAM,CAAC,SAAS,EAAE,4CAA4C,CAAC;KAC/D,MAAM,CAAC,KAAK,UAAU,IAAI,CAAC,OAAO;IAC/B,OAAO,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,CAAA;IACxB,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,CAAA;IACzB,MAAM,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC9C,MAAM,CAAC,GAAG,CAAC,eAAe,UAAU,OAAO,GAAG,EAAE,CAAC,CAAA;IACjD,MAAM,UAAU,GAAG,MAAM,MAAM,CAAC,CAAC,UAAU,CAAC,EAAE,EAAE,GAAG,EAAE,CAAC,CAAA;IACtD,IAAI,CAAC,UAAU,EAAE,CAAC;QACd,MAAM,CAAC,GAAG,CAAC,MAAM,UAAU,QAAQ,CAAC,CAAA;QACpC,OAAM;IACV,CAAC;IACD,MAAM,aAAa,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAA;IACzD,IAAI,CAAC,aAAa,EAAE,CAAC;QACjB,MAAM,CAAC,GAAG,CAAC,MAAM,UAAU,iBAAiB,CAAC,CAAA;QAC7C,OAAM;IACV,CAAC;IACD,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAA;IAEtC,IAAI,UAAU,GAAG,IAAI,eAAe,EAAE,CAAA;IACtC,eAAe,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;IACrC,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAA;IAC3D,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,OAAM;IACV,CAAC;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAW,EAAE;QACxC,UAAU,EAAE,IAAI;KACnB,CAAC,CAAA;IAEF,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAChC,MAAM,CAAC,GAAG,CAAC,GAAG,UAAU,UAAU,CAAC,CAAA;QACnC,OAAO,CAAC,GAAG,EAAE,CAAA;QACb,UAAU,CAAC,KAAK,EAAE,CAAA;QAElB,UAAU,GAAG,IAAI,eAAe,EAAE,CAAA;QAClC,eAAe,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAA;QAErC,MAAM,SAAS,GAAG,aAAa,CAC3B,EAAE,CAAC,YAAY,CAAC,UAAW,EAAE,MAAM,CAAC,CACvC,CAAA;QACD,IAAI,CAAC,SAAS,EAAE,CAAC;YACb,MAAM,CAAC,GAAG,CAAC,WAAW,UAAU,OAAO,CAAC,CAAA;YACxC,OAAM;QACV,CAAC;QACD,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;QAC/C,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;YAClB,MAAM,CAAC,GAAG,CAAC,yBAAyB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;YAC1D,MAAM,aAAa,CAAC;gBAChB,MAAM,EAAE;oBACJ,GAAG,SAAS;oBACZ,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,EAAE,QAAQ,CAAC;iBACpD;gBACD,KAAK;gBACL,6BAA6B;aAChC,CAAC,CAAA;QACN,CAAC;QACD,MAAM,GAAG,SAAS,CAAA;IACtB,CAAC,CAAC,CAAA;AACN,CAAC,CAAC,CAAA;AAEN,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,+BAA+B,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE;IAC1E,EAAE,CAAC,aAAa,CACZ,eAAe,EACf,IAAI,CAAC,SAAS,CACV;QACI,UAAU,EAAE,EAAE,IAAI,EAAE,qCAAqC,EAAE;QAC3D,MAAM,EAAE,QAAQ;KACnB,EACD,IAAI,EACJ,CAAC,CACJ,CACJ,CAAA;AACL,CAAC,CAAC,CAAA;AAEF,GAAG,CAAC,IAAI,EAAE,CAAA;AAEV,SAAS,aAAa,CAAC,IAAY;IAC/B,IAAI,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAC3B,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACT,OAAO,IAAI,CAAA;IACf,CAAC;AACL,CAAC;AAED,SAAS,KAAK,CAAuB,CAAI,EAAE,KAAU;IACjD,OAAO,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAC1D,CAAC;AAED,SAAS,WAAW,CAAC,SAAiB,EAAE,SAAiB;IACrD,+EAA+E;IAC/E,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAA;IACjD,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAA;IACjD,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE;QACpC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YACzB,OAAO,IAAI,CAAA;QACf,CAAC;QACD,IAAI,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1D,OAAO,IAAI,CAAA;QACf,CAAC;QACD,OAAO,KAAK,CAAA;IAChB,CAAC,CAAC,CAAA;IACF,OAAO,QAAQ,CAAA;AACnB,CAAC;AAQD,KAAK,UAAU,aAAa,CAAC,EACzB,MAAM,EACN,KAAK,EACL,MAAM,GAKT;IACG,IAAI,CAAC;QACD,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,MAAM,IAAI,EAAE,CAAA;QAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,MAAM,IAAI,QAAQ,CAAC,CAAA;QAClE,IAAI,CAAC,UAAU,EAAE,CAAC;YACd,MAAM,CAAC,GAAG,CAAC,0BAA0B,UAAU,EAAE,CAAC,CAAA;YAClD,OAAM;QACV,CAAC;QAED,MAAM,MAAM,CAAC;YACT,UAAU;YACV,GAAG,EAAE,UAAU;YACf,KAAK;YACL,MAAM;SACT,CAAC,CAAA;IACN,CAAC;IAAC,OAAO,CAAM,EAAE,CAAC;QACd,IAAI,MAAM,EAAE,CAAC;YACT,MAAM,CAAC,GAAG,CAAC,yBAAyB,EAAE,CAAC,CAAC,OAAO,CAAC,CAAA;YAChD,OAAM;QACV,CAAC;QACD,MAAM,CAAC,CAAA;IACX,CAAC;AACL,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
|
-
// https:https://app.framerstatic.com/chunk-
|
|
2
|
+
// https:https://app.framerstatic.com/chunk-73TYJ7YB.js
|
|
3
3
|
import { createContext, } from 'react';
|
|
4
4
|
import { createContext as createContext2, } from 'react';
|
|
5
5
|
import { createContext as createContext3, } from 'react';
|
|
@@ -23,37 +23,37 @@ import { useCallback as useCallback2, useState, } from 'react';
|
|
|
23
23
|
import { useRef as useRef3, } from 'react';
|
|
24
24
|
import { useEffect as useEffect4, } from 'react';
|
|
25
25
|
import * as React4 from 'react';
|
|
26
|
-
import { Children, cloneElement as cloneElement2, isValidElement, useContext as
|
|
26
|
+
import { Children, cloneElement as cloneElement2, isValidElement, useContext as useContext8, useRef as useRef5, } from 'react';
|
|
27
27
|
import * as React3 from 'react';
|
|
28
28
|
import { useId as useId3, useMemo as useMemo5, } from 'react';
|
|
29
29
|
import * as React2 from 'react';
|
|
30
|
-
import { useId as useId2, useInsertionEffect as useInsertionEffect2, useRef as useRef4, } from 'react';
|
|
30
|
+
import { useContext as useContext7, useId as useId2, useInsertionEffect as useInsertionEffect2, useRef as useRef4, } from 'react';
|
|
31
31
|
import * as React5 from 'react';
|
|
32
|
-
import { useContext as
|
|
32
|
+
import { useContext as useContext9, useMemo as useMemo6, } from 'react';
|
|
33
33
|
import * as React6 from 'react';
|
|
34
34
|
import { useEffect as useEffect6, useRef as useRef6, useState as useState2, } from 'react';
|
|
35
35
|
import { createContext as createContext7, } from 'react';
|
|
36
36
|
import * as React7 from 'react';
|
|
37
|
-
import { useContext as
|
|
38
|
-
import { useContext as
|
|
37
|
+
import { useContext as useContext10, useMemo as useMemo7, useRef as useRef7, } from 'react';
|
|
38
|
+
import { useContext as useContext11, useEffect as useEffect7, useState as useState3, } from 'react';
|
|
39
39
|
import * as React8 from 'react';
|
|
40
40
|
import { forwardRef as forwardRef2, useEffect as useEffect8, useRef as useRef8, } from 'react';
|
|
41
41
|
import { createContext as createContext8, } from 'react';
|
|
42
42
|
import * as React9 from 'react';
|
|
43
|
-
import { forwardRef as forwardRef3, useContext as
|
|
44
|
-
import { useContext as
|
|
43
|
+
import { forwardRef as forwardRef3, useContext as useContext12, } from 'react';
|
|
44
|
+
import { useContext as useContext13, useInsertionEffect as useInsertionEffect3, useRef as useRef9, } from 'react';
|
|
45
45
|
import { useInsertionEffect as useInsertionEffect4, } from 'react';
|
|
46
46
|
import { useEffect as useEffect9, } from 'react';
|
|
47
|
-
import { useContext as
|
|
47
|
+
import { useContext as useContext14, useEffect as useEffect10, useRef as useRef10, } from 'react';
|
|
48
48
|
import { useState as useState4, } from 'react';
|
|
49
|
-
import { useContext as
|
|
49
|
+
import { useContext as useContext15, } from 'react';
|
|
50
50
|
import { useCallback as useCallback3, useRef as useRef11, useState as useState5, } from 'react';
|
|
51
51
|
import { useEffect as useEffect11, useState as useState6, } from 'react';
|
|
52
52
|
import { useEffect as useEffect12, } from 'react';
|
|
53
53
|
import { useEffect as useEffect13, useRef as useRef12, } from 'react';
|
|
54
54
|
import * as React10 from 'react';
|
|
55
55
|
import { useEffect as useEffect14, useState as useState7, } from 'react';
|
|
56
|
-
import { useContext as
|
|
56
|
+
import { useContext as useContext16, } from 'react';
|
|
57
57
|
import * as React11 from 'react';
|
|
58
58
|
var __create = Object.create;
|
|
59
59
|
var __defProp = Object.defineProperty;
|
|
@@ -154,7 +154,7 @@ var MotionContext = createContext2({},);
|
|
|
154
154
|
var PresenceContext = createContext3(null,);
|
|
155
155
|
var isBrowser = typeof document !== 'undefined';
|
|
156
156
|
var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
|
|
157
|
-
var camelToDash = (str,) => str.replace(/([a-z])([A-Z])/
|
|
157
|
+
var camelToDash = (str,) => str.replace(/([a-z])([A-Z])/gu, '$1-$2',).toLowerCase();
|
|
158
158
|
var optimizedAppearDataId = 'framerAppearId';
|
|
159
159
|
var optimizedAppearDataAttribute = 'data-' + camelToDash(optimizedAppearDataId,);
|
|
160
160
|
var MotionGlobalConfig = {
|
|
@@ -577,9 +577,10 @@ var clamp = (min, max, v,) => {
|
|
|
577
577
|
return v;
|
|
578
578
|
};
|
|
579
579
|
var sanitize = (v,) => Math.round(v * 1e5,) / 1e5;
|
|
580
|
-
var floatRegex =
|
|
581
|
-
var colorRegex = /(
|
|
582
|
-
var singleColorRegex =
|
|
580
|
+
var floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
|
|
581
|
+
var colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
|
|
582
|
+
var singleColorRegex =
|
|
583
|
+
/^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
|
|
583
584
|
function isString(v,) {
|
|
584
585
|
return typeof v === 'string';
|
|
585
586
|
}
|
|
@@ -1002,10 +1003,9 @@ var VAR_TOKEN = 'var';
|
|
|
1002
1003
|
var VAR_FUNCTION_TOKEN = 'var(';
|
|
1003
1004
|
var SPLIT_TOKEN = '${}';
|
|
1004
1005
|
var complexRegex =
|
|
1005
|
-
/
|
|
1006
|
+
/var\s*\(\s*--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)|#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\)|-?(?:\d+(?:\.\d+)?|\.\d+)/giu;
|
|
1006
1007
|
function analyseComplexValue(value,) {
|
|
1007
1008
|
const originalValue = value.toString();
|
|
1008
|
-
const matchedValues = originalValue.match(complexRegex,) || [];
|
|
1009
1009
|
const values = [];
|
|
1010
1010
|
const indexes = {
|
|
1011
1011
|
color: [],
|
|
@@ -1013,8 +1013,8 @@ function analyseComplexValue(value,) {
|
|
|
1013
1013
|
var: [],
|
|
1014
1014
|
};
|
|
1015
1015
|
const types2 = [];
|
|
1016
|
-
|
|
1017
|
-
|
|
1016
|
+
let i = 0;
|
|
1017
|
+
const tokenised = originalValue.replace(complexRegex, (parsedValue,) => {
|
|
1018
1018
|
if (color.test(parsedValue,)) {
|
|
1019
1019
|
indexes.color.push(i,);
|
|
1020
1020
|
types2.push(COLOR_TOKEN,);
|
|
@@ -1028,8 +1028,9 @@ function analyseComplexValue(value,) {
|
|
|
1028
1028
|
types2.push(NUMBER_TOKEN,);
|
|
1029
1029
|
values.push(parseFloat(parsedValue,),);
|
|
1030
1030
|
}
|
|
1031
|
-
|
|
1032
|
-
|
|
1031
|
+
++i;
|
|
1032
|
+
return SPLIT_TOKEN;
|
|
1033
|
+
},);
|
|
1033
1034
|
const split = tokenised.split(SPLIT_TOKEN,);
|
|
1034
1035
|
return { values, split, indexes, types: types2, };
|
|
1035
1036
|
}
|
|
@@ -1151,7 +1152,7 @@ var isCSSVariableToken = (value,) => {
|
|
|
1151
1152
|
}
|
|
1152
1153
|
return singleCssVariableRegex.test(value.split('/*',)[0].trim(),);
|
|
1153
1154
|
};
|
|
1154
|
-
var singleCssVariableRegex = /var\
|
|
1155
|
+
var singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
|
|
1155
1156
|
function mixImmediate(a, b,) {
|
|
1156
1157
|
return (p,) => p > 0 ? b : a;
|
|
1157
1158
|
}
|
|
@@ -1936,7 +1937,7 @@ var MotionValue = class {
|
|
|
1936
1937
|
* @internal
|
|
1937
1938
|
*/
|
|
1938
1939
|
constructor(init, options = {},) {
|
|
1939
|
-
this.version = '11.0.
|
|
1940
|
+
this.version = '11.0.11-sync.2';
|
|
1940
1941
|
this.canTrackVelocity = false;
|
|
1941
1942
|
this.events = {};
|
|
1942
1943
|
this.updateAndNotify = (v, render = true,) => {
|
|
@@ -2190,8 +2191,8 @@ var MotionValue = class {
|
|
|
2190
2191
|
function motionValue(init, options,) {
|
|
2191
2192
|
return new MotionValue(init, options,);
|
|
2192
2193
|
}
|
|
2193
|
-
var isNumericalString = (v,) =>
|
|
2194
|
-
var isZeroValueString = (v,) => /^0[^.\s]
|
|
2194
|
+
var isNumericalString = (v,) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v,);
|
|
2195
|
+
var isZeroValueString = (v,) => /^0[^.\s]+$/u.test(v,);
|
|
2195
2196
|
var maxDefaults = /* @__PURE__ */ new Set(['brightness', 'contrast', 'saturate', 'opacity',],);
|
|
2196
2197
|
function applyDefaultFilter(v,) {
|
|
2197
2198
|
const [name, value,] = v.slice(0, -1,).split('(',);
|
|
@@ -2209,7 +2210,7 @@ function applyDefaultFilter(v,) {
|
|
|
2209
2210
|
}
|
|
2210
2211
|
return name + '(' + defaultValue + unit + ')';
|
|
2211
2212
|
}
|
|
2212
|
-
var functionRegex =
|
|
2213
|
+
var functionRegex = /\b([a-z-]*)\(.*?\)/gu;
|
|
2213
2214
|
var filter = {
|
|
2214
2215
|
...complex,
|
|
2215
2216
|
getAnimatableNone: (v,) => {
|
|
@@ -3053,6 +3054,10 @@ function createAnimationState(visualElement,) {
|
|
|
3053
3054
|
removedKeys.delete(key7,);
|
|
3054
3055
|
}
|
|
3055
3056
|
typeState.needsAnimating[key7] = true;
|
|
3057
|
+
const motionValue2 = visualElement.getValue(key7,);
|
|
3058
|
+
if (motionValue2) {
|
|
3059
|
+
motionValue2.liveStyle = false;
|
|
3060
|
+
}
|
|
3056
3061
|
};
|
|
3057
3062
|
for (const key7 in allKeys) {
|
|
3058
3063
|
const next = resolvedValues[key7];
|
|
@@ -3100,6 +3105,10 @@ function createAnimationState(visualElement,) {
|
|
|
3100
3105
|
if (fallbackTarget !== void 0) {
|
|
3101
3106
|
fallbackAnimation[key7] = fallbackTarget;
|
|
3102
3107
|
}
|
|
3108
|
+
const motionValue2 = visualElement.getValue(key7,);
|
|
3109
|
+
if (motionValue2) {
|
|
3110
|
+
motionValue2.liveStyle = true;
|
|
3111
|
+
}
|
|
3103
3112
|
},);
|
|
3104
3113
|
animations2.push({ animation: fallbackAnimation, },);
|
|
3105
3114
|
}
|
|
@@ -3377,8 +3386,8 @@ function updateMotionValuesFromProps(element, next, prev,) {
|
|
|
3377
3386
|
}
|
|
3378
3387
|
if (false) {
|
|
3379
3388
|
warnOnce(
|
|
3380
|
-
nextValue.version === '11.0.
|
|
3381
|
-
`Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.
|
|
3389
|
+
nextValue.version === '11.0.11-sync.2',
|
|
3390
|
+
`Attempting to mix Framer Motion versions ${nextValue.version} with 11.0.11-sync.2 may not work as expected.`,
|
|
3382
3391
|
);
|
|
3383
3392
|
}
|
|
3384
3393
|
} else if (isMotionValue(prevValue,)) {
|
|
@@ -3389,7 +3398,11 @@ function updateMotionValuesFromProps(element, next, prev,) {
|
|
|
3389
3398
|
} else if (prevValue !== nextValue) {
|
|
3390
3399
|
if (element.hasValue(key7,)) {
|
|
3391
3400
|
const existingValue = element.getValue(key7,);
|
|
3392
|
-
|
|
3401
|
+
if (existingValue.liveStyle === true) {
|
|
3402
|
+
existingValue.jump(nextValue,);
|
|
3403
|
+
} else if (!existingValue.hasAnimated) {
|
|
3404
|
+
existingValue.set(nextValue,);
|
|
3405
|
+
}
|
|
3393
3406
|
} else {
|
|
3394
3407
|
const latestValue = element.getStaticValue(key7,);
|
|
3395
3408
|
element.addValue(key7, motionValue(latestValue !== void 0 ? latestValue : nextValue, { owner: element, },),);
|
|
@@ -3454,7 +3467,7 @@ var VisualElement = class {
|
|
|
3454
3467
|
this.variantChildren = /* @__PURE__ */ new Set();
|
|
3455
3468
|
}
|
|
3456
3469
|
this.manuallyAnimateOnMount = Boolean(parent && parent.current,);
|
|
3457
|
-
const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {},);
|
|
3470
|
+
const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}, this,);
|
|
3458
3471
|
for (const key7 in initialMotionValues) {
|
|
3459
3472
|
const value = initialMotionValues[key7];
|
|
3460
3473
|
if (latestValues[key7] !== void 0 && isMotionValue(value,)) {
|
|
@@ -3472,7 +3485,7 @@ var VisualElement = class {
|
|
|
3472
3485
|
* This isn't an abstract method as it needs calling in the constructor, but it is
|
|
3473
3486
|
* intended to be one.
|
|
3474
3487
|
*/
|
|
3475
|
-
scrapeMotionValuesFromProps(_props, _prevProps,) {
|
|
3488
|
+
scrapeMotionValuesFromProps(_props, _prevProps, _visualElement,) {
|
|
3476
3489
|
return {};
|
|
3477
3490
|
}
|
|
3478
3491
|
mount(instance,) {
|
|
@@ -3647,7 +3660,7 @@ var VisualElement = class {
|
|
|
3647
3660
|
}
|
|
3648
3661
|
this.prevMotionValues = updateMotionValuesFromProps(
|
|
3649
3662
|
this,
|
|
3650
|
-
this.scrapeMotionValuesFromProps(props, this.prevProps,),
|
|
3663
|
+
this.scrapeMotionValuesFromProps(props, this.prevProps, this,),
|
|
3651
3664
|
this.prevMotionValues,
|
|
3652
3665
|
);
|
|
3653
3666
|
if (this.handleChildMotionValue) {
|
|
@@ -3866,7 +3879,7 @@ function isSVGComponent(Component23,) {
|
|
|
3866
3879
|
lowercaseSVGElements.indexOf(Component23,) > -1 || /**
|
|
3867
3880
|
* If it contains a capital letter, it's an SVG component
|
|
3868
3881
|
*/
|
|
3869
|
-
/[A-Z]
|
|
3882
|
+
/[A-Z]/u.test(Component23,)
|
|
3870
3883
|
) {
|
|
3871
3884
|
return true;
|
|
3872
3885
|
}
|
|
@@ -4108,18 +4121,24 @@ function renderSVG(element, renderState, _styleProp, projection,) {
|
|
|
4108
4121
|
element.setAttribute(!camelCaseAttributes.has(key7,) ? camelToDash(key7,) : key7, renderState.attrs[key7],);
|
|
4109
4122
|
}
|
|
4110
4123
|
}
|
|
4111
|
-
function scrapeMotionValuesFromProps(props, prevProps,) {
|
|
4124
|
+
function scrapeMotionValuesFromProps(props, prevProps, visualElement,) {
|
|
4125
|
+
var _a;
|
|
4112
4126
|
const { style, } = props;
|
|
4113
4127
|
const newValues = {};
|
|
4114
4128
|
for (const key7 in style) {
|
|
4115
|
-
if (
|
|
4129
|
+
if (
|
|
4130
|
+
isMotionValue(style[key7],) || prevProps.style && isMotionValue(prevProps.style[key7],) || isForcedMotionValue(key7, props,) ||
|
|
4131
|
+
((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key7,)) === null || _a === void 0
|
|
4132
|
+
? void 0
|
|
4133
|
+
: _a.liveStyle) !== void 0
|
|
4134
|
+
) {
|
|
4116
4135
|
newValues[key7] = style[key7];
|
|
4117
4136
|
}
|
|
4118
4137
|
}
|
|
4119
4138
|
return newValues;
|
|
4120
4139
|
}
|
|
4121
|
-
function scrapeMotionValuesFromProps2(props, prevProps,) {
|
|
4122
|
-
const newValues = scrapeMotionValuesFromProps(props, prevProps,);
|
|
4140
|
+
function scrapeMotionValuesFromProps2(props, prevProps, visualElement,) {
|
|
4141
|
+
const newValues = scrapeMotionValuesFromProps(props, prevProps, visualElement,);
|
|
4123
4142
|
for (const key7 in props) {
|
|
4124
4143
|
if (isMotionValue(props[key7],) || isMotionValue(prevProps[key7],)) {
|
|
4125
4144
|
const targetKey = transformPropOrder.indexOf(key7,) !== -1 ? 'attr' + key7.charAt(0,).toUpperCase() + key7.substring(1,) : key7;
|
|
@@ -4704,7 +4723,8 @@ function hasScale({ scale: scale2, scaleX, scaleY, },) {
|
|
|
4704
4723
|
return !isIdentityScale(scale2,) || !isIdentityScale(scaleX,) || !isIdentityScale(scaleY,);
|
|
4705
4724
|
}
|
|
4706
4725
|
function hasTransform(values,) {
|
|
4707
|
-
return hasScale(values,) || has2DTranslate(values,) || values.z || values.rotate || values.rotateX || values.rotateY
|
|
4726
|
+
return hasScale(values,) || has2DTranslate(values,) || values.z || values.rotate || values.rotateX || values.rotateY || values.skewX ||
|
|
4727
|
+
values.skewY;
|
|
4708
4728
|
}
|
|
4709
4729
|
function has2DTranslate(values,) {
|
|
4710
4730
|
return is2DTranslate(values.x,) || is2DTranslate(values.y,);
|
|
@@ -5620,14 +5640,15 @@ function buildProjectionTransform(delta, treeScale, latestTransform,) {
|
|
|
5620
5640
|
let transform2 = '';
|
|
5621
5641
|
const xTranslate = delta.x.translate / treeScale.x;
|
|
5622
5642
|
const yTranslate = delta.y.translate / treeScale.y;
|
|
5623
|
-
|
|
5624
|
-
|
|
5643
|
+
const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;
|
|
5644
|
+
if (xTranslate || yTranslate || zTranslate) {
|
|
5645
|
+
transform2 = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
|
|
5625
5646
|
}
|
|
5626
5647
|
if (treeScale.x !== 1 || treeScale.y !== 1) {
|
|
5627
5648
|
transform2 += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `;
|
|
5628
5649
|
}
|
|
5629
5650
|
if (latestTransform) {
|
|
5630
|
-
const { rotate, rotateX, rotateY, } = latestTransform;
|
|
5651
|
+
const { rotate, rotateX, rotateY, skewX, skewY, } = latestTransform;
|
|
5631
5652
|
if (rotate) {
|
|
5632
5653
|
transform2 += `rotate(${rotate}deg) `;
|
|
5633
5654
|
}
|
|
@@ -5637,6 +5658,12 @@ function buildProjectionTransform(delta, treeScale, latestTransform,) {
|
|
|
5637
5658
|
if (rotateY) {
|
|
5638
5659
|
transform2 += `rotateY(${rotateY}deg) `;
|
|
5639
5660
|
}
|
|
5661
|
+
if (skewX) {
|
|
5662
|
+
transform2 += `skewX(${skewX}deg) `;
|
|
5663
|
+
}
|
|
5664
|
+
if (skewY) {
|
|
5665
|
+
transform2 += `skewY(${skewY}deg) `;
|
|
5666
|
+
}
|
|
5640
5667
|
}
|
|
5641
5668
|
const elementScaleX = delta.x.scale * treeScale.x;
|
|
5642
5669
|
const elementScaleY = delta.y.scale * treeScale.y;
|
|
@@ -5660,6 +5687,13 @@ function animateSingleValue(value, keyframes2, options,) {
|
|
|
5660
5687
|
}
|
|
5661
5688
|
var transformAxes = ['', 'X', 'Y', 'Z',];
|
|
5662
5689
|
var hiddenVisibility = { visibility: 'hidden', };
|
|
5690
|
+
function resetDistortingTransform(key7, visualElement, values,) {
|
|
5691
|
+
const { latestValues, } = visualElement;
|
|
5692
|
+
if (latestValues[key7]) {
|
|
5693
|
+
values[key7] = latestValues[key7];
|
|
5694
|
+
visualElement.setStaticValue(key7, 0,);
|
|
5695
|
+
}
|
|
5696
|
+
}
|
|
5663
5697
|
var animationTarget = 1e3;
|
|
5664
5698
|
var id2 = 0;
|
|
5665
5699
|
var projectionFrameData = {
|
|
@@ -5888,6 +5922,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
5888
5922
|
this.nodes.forEach(clearIsLayoutDirty,);
|
|
5889
5923
|
}
|
|
5890
5924
|
this.isUpdating = false;
|
|
5925
|
+
if (window.HandoffCancelAllAnimations) {
|
|
5926
|
+
window.HandoffCancelAllAnimations();
|
|
5927
|
+
}
|
|
5891
5928
|
this.nodes.forEach(resetTransformStyle,);
|
|
5892
5929
|
this.nodes.forEach(updateLayout,);
|
|
5893
5930
|
this.nodes.forEach(notifyLayoutUpdate,);
|
|
@@ -6439,19 +6476,22 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
|
|
|
6439
6476
|
}
|
|
6440
6477
|
let hasRotate = false;
|
|
6441
6478
|
const { latestValues, } = visualElement;
|
|
6442
|
-
if (
|
|
6479
|
+
if (
|
|
6480
|
+
latestValues.z || latestValues.rotate || latestValues.rotateX || latestValues.rotateY || latestValues.rotateZ ||
|
|
6481
|
+
latestValues.skewX || latestValues.skewY
|
|
6482
|
+
) {
|
|
6443
6483
|
hasRotate = true;
|
|
6444
6484
|
}
|
|
6445
6485
|
if (!hasRotate) {
|
|
6446
6486
|
return;
|
|
6447
6487
|
}
|
|
6448
6488
|
const resetValues = {};
|
|
6489
|
+
if (latestValues.z) {
|
|
6490
|
+
resetDistortingTransform('z', visualElement, resetValues,);
|
|
6491
|
+
}
|
|
6449
6492
|
for (let i = 0; i < transformAxes.length; i++) {
|
|
6450
|
-
|
|
6451
|
-
|
|
6452
|
-
resetValues[key7] = latestValues[key7];
|
|
6453
|
-
visualElement.setStaticValue(key7, 0,);
|
|
6454
|
-
}
|
|
6493
|
+
resetDistortingTransform(`rotate${transformAxes[i]}`, visualElement, resetValues,);
|
|
6494
|
+
resetDistortingTransform(`skew${transformAxes[i]}`, visualElement, resetValues,);
|
|
6455
6495
|
}
|
|
6456
6496
|
visualElement.render();
|
|
6457
6497
|
for (const key7 in resetValues) {
|
|
@@ -6749,14 +6789,17 @@ var drag = {
|
|
|
6749
6789
|
MeasureLayout,
|
|
6750
6790
|
},
|
|
6751
6791
|
};
|
|
6752
|
-
var splitCSSVariableRegex =
|
|
6792
|
+
var splitCSSVariableRegex = (
|
|
6793
|
+
// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
|
|
6794
|
+
/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u
|
|
6795
|
+
);
|
|
6753
6796
|
function parseCSSVariable(current,) {
|
|
6754
6797
|
const match = splitCSSVariableRegex.exec(current,);
|
|
6755
6798
|
if (!match) {
|
|
6756
6799
|
return [,];
|
|
6757
6800
|
}
|
|
6758
|
-
const [,
|
|
6759
|
-
return [
|
|
6801
|
+
const [, token1, token2, fallback,] = match;
|
|
6802
|
+
return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback,];
|
|
6760
6803
|
}
|
|
6761
6804
|
var maxDepth = 4;
|
|
6762
6805
|
function getVariableValue(current, element, depth = 1,) {
|
|
@@ -6772,11 +6815,8 @@ function getVariableValue(current, element, depth = 1,) {
|
|
|
6772
6815
|
if (resolved) {
|
|
6773
6816
|
const trimmed = resolved.trim();
|
|
6774
6817
|
return isNumericalString(trimmed,) ? parseFloat(trimmed,) : trimmed;
|
|
6775
|
-
} else if (isCSSVariableToken(fallback,)) {
|
|
6776
|
-
return getVariableValue(fallback, element, depth + 1,);
|
|
6777
|
-
} else {
|
|
6778
|
-
return fallback;
|
|
6779
6818
|
}
|
|
6819
|
+
return isCSSVariableToken(fallback,) ? getVariableValue(fallback, element, depth + 1,) : fallback;
|
|
6780
6820
|
}
|
|
6781
6821
|
function resolveCSSVariables(visualElement, { ...target }, transitionEnd,) {
|
|
6782
6822
|
const element = visualElement.current;
|
|
@@ -6837,11 +6877,11 @@ var getTranslateFromMatrix = (pos2, pos3,) => (_bbox, { transform: transform2, }
|
|
|
6837
6877
|
if (transform2 === 'none' || !transform2) {
|
|
6838
6878
|
return 0;
|
|
6839
6879
|
}
|
|
6840
|
-
const matrix3d = transform2.match(/^matrix3d\((.+)\)
|
|
6880
|
+
const matrix3d = transform2.match(/^matrix3d\((.+)\)$/u,);
|
|
6841
6881
|
if (matrix3d) {
|
|
6842
6882
|
return getPosFromMatrix(matrix3d[1], pos3,);
|
|
6843
6883
|
} else {
|
|
6844
|
-
const matrix = transform2.match(/^matrix\((.+)\)
|
|
6884
|
+
const matrix = transform2.match(/^matrix\((.+)\)$/u,);
|
|
6845
6885
|
if (matrix) {
|
|
6846
6886
|
return getPosFromMatrix(matrix[1], pos2,);
|
|
6847
6887
|
} else {
|
|
@@ -7047,8 +7087,8 @@ var HTMLVisualElement = class extends DOMVisualElement {
|
|
|
7047
7087
|
build(renderState, latestValues, options, props,) {
|
|
7048
7088
|
buildHTMLStyles(renderState, latestValues, options, props.transformTemplate,);
|
|
7049
7089
|
}
|
|
7050
|
-
scrapeMotionValuesFromProps(props, prevProps,) {
|
|
7051
|
-
return scrapeMotionValuesFromProps(props, prevProps,);
|
|
7090
|
+
scrapeMotionValuesFromProps(props, prevProps, visualElement,) {
|
|
7091
|
+
return scrapeMotionValuesFromProps(props, prevProps, visualElement,);
|
|
7052
7092
|
}
|
|
7053
7093
|
handleChildMotionValue() {
|
|
7054
7094
|
if (this.childSubscription) {
|
|
@@ -7089,7 +7129,7 @@ var SVGVisualElement = class extends DOMVisualElement {
|
|
|
7089
7129
|
return createBox();
|
|
7090
7130
|
}
|
|
7091
7131
|
scrapeMotionValuesFromProps(props, prevProps,) {
|
|
7092
|
-
return scrapeMotionValuesFromProps2(props, prevProps,);
|
|
7132
|
+
return scrapeMotionValuesFromProps2(props, prevProps, this,);
|
|
7093
7133
|
}
|
|
7094
7134
|
build(renderState, latestValues, options, props,) {
|
|
7095
7135
|
buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate,);
|
|
@@ -7178,6 +7218,7 @@ function PopChild({ children, isPresent: isPresent2, },) {
|
|
|
7178
7218
|
top: 0,
|
|
7179
7219
|
left: 0,
|
|
7180
7220
|
},);
|
|
7221
|
+
const { nonce, } = useContext7(MotionConfigContext,);
|
|
7181
7222
|
useInsertionEffect2(() => {
|
|
7182
7223
|
const { width, height, top, left, } = size2.current;
|
|
7183
7224
|
if (isPresent2 || !ref.current || !width || !height) {
|
|
@@ -7185,6 +7226,9 @@ function PopChild({ children, isPresent: isPresent2, },) {
|
|
|
7185
7226
|
}
|
|
7186
7227
|
ref.current.dataset.motionPopId = id4;
|
|
7187
7228
|
const style = document.createElement('style',);
|
|
7229
|
+
if (nonce) {
|
|
7230
|
+
style.nonce = nonce;
|
|
7231
|
+
}
|
|
7188
7232
|
document.head.appendChild(style,);
|
|
7189
7233
|
if (style.sheet) {
|
|
7190
7234
|
style.sheet.insertRule(`
|
|
@@ -7271,7 +7315,7 @@ var AnimatePresence = (
|
|
|
7271
7315
|
{ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = 'sync', },
|
|
7272
7316
|
) => {
|
|
7273
7317
|
invariant(!exitBeforeEnter, 'Replace exitBeforeEnter with mode=\'wait\'',);
|
|
7274
|
-
const forceRender =
|
|
7318
|
+
const forceRender = useContext8(LayoutGroupContext,).forceRender || useForceUpdate()[0];
|
|
7275
7319
|
const isMounted = useIsMounted();
|
|
7276
7320
|
const filteredChildren = onlyElements(children,);
|
|
7277
7321
|
let childrenToRender = filteredChildren;
|
|
@@ -7379,7 +7423,7 @@ var AnimatePresence = (
|
|
|
7379
7423
|
};
|
|
7380
7424
|
function MotionConfig({ children, isValidProp, ...config },) {
|
|
7381
7425
|
isValidProp && loadExternalIsValidProp(isValidProp,);
|
|
7382
|
-
config = { ...
|
|
7426
|
+
config = { ...useContext9(MotionConfigContext,), ...config, };
|
|
7383
7427
|
config.isStatic = useConstant(() => config.isStatic);
|
|
7384
7428
|
const context = useMemo6(() => config, [JSON.stringify(config.transition,), config.transformPagePoint, config.reducedMotion,],);
|
|
7385
7429
|
return React5.createElement(MotionConfigContext.Provider, { value: context, }, children,);
|
|
@@ -7432,8 +7476,8 @@ function nodeGroup() {
|
|
|
7432
7476
|
var shouldInheritGroup = (inherit,) => inherit === true;
|
|
7433
7477
|
var shouldInheritId = (inherit,) => shouldInheritGroup(inherit === true,) || inherit === 'id';
|
|
7434
7478
|
var LayoutGroup = ({ children, id: id4, inherit = true, },) => {
|
|
7435
|
-
const layoutGroupContext =
|
|
7436
|
-
const deprecatedLayoutGroupContext =
|
|
7479
|
+
const layoutGroupContext = useContext10(LayoutGroupContext,);
|
|
7480
|
+
const deprecatedLayoutGroupContext = useContext10(DeprecatedLayoutGroupContext,);
|
|
7437
7481
|
const [forceRender, key7,] = useForceUpdate();
|
|
7438
7482
|
const context = useRef7(null,);
|
|
7439
7483
|
const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
|
|
@@ -7451,7 +7495,7 @@ var LayoutGroup = ({ children, id: id4, inherit = true, },) => {
|
|
|
7451
7495
|
};
|
|
7452
7496
|
function useMotionValue(initial,) {
|
|
7453
7497
|
const value = useConstant(() => motionValue(initial,));
|
|
7454
|
-
const { isStatic, } =
|
|
7498
|
+
const { isStatic, } = useContext11(MotionConfigContext,);
|
|
7455
7499
|
if (isStatic) {
|
|
7456
7500
|
const [, setLatest,] = useState3(initial,);
|
|
7457
7501
|
useEffect7(() => value.on('change', setLatest,), [],);
|
|
@@ -7586,7 +7630,7 @@ function useDefaultMotionValue(value, defaultValue = 0,) {
|
|
|
7586
7630
|
}
|
|
7587
7631
|
function ReorderItem({ children, style = {}, value, as = 'li', onDrag, layout: layout2 = true, ...props }, externalRef,) {
|
|
7588
7632
|
const Component23 = useConstant(() => motion(as,));
|
|
7589
|
-
const context =
|
|
7633
|
+
const context = useContext12(ReorderContext,);
|
|
7590
7634
|
const point2 = {
|
|
7591
7635
|
x: useDefaultMotionValue(style.x,),
|
|
7592
7636
|
y: useDefaultMotionValue(style.y,),
|
|
@@ -7641,7 +7685,7 @@ function useMotionTemplate(fragments, ...values) {
|
|
|
7641
7685
|
return useCombineMotionValues(values.filter(isMotionValue,), buildValue,);
|
|
7642
7686
|
}
|
|
7643
7687
|
function useSpring(source, config = {},) {
|
|
7644
|
-
const { isStatic, } =
|
|
7688
|
+
const { isStatic, } = useContext13(MotionConfigContext,);
|
|
7645
7689
|
const activeSpringAnimation = useRef9(null,);
|
|
7646
7690
|
const value = useMotionValue(isMotionValue(source,) ? source.get() : source,);
|
|
7647
7691
|
const stopAnimation2 = () => {
|
|
@@ -7955,7 +7999,7 @@ function getTargetSize(target,) {
|
|
|
7955
7999
|
return 'getBBox' in target && target.tagName !== 'svg' ? target.getBBox() : { width: target.clientWidth, height: target.clientHeight, };
|
|
7956
8000
|
}
|
|
7957
8001
|
function resolveOffsets(container, info, options,) {
|
|
7958
|
-
|
|
8002
|
+
const { offset: offsetDefinition = ScrollOffset.All, } = options;
|
|
7959
8003
|
const { target = container, axis = 'y', } = options;
|
|
7960
8004
|
const lengthLabel = axis === 'y' ? 'height' : 'width';
|
|
7961
8005
|
const inset2 = target !== container ? calcInset(target, container,) : point;
|
|
@@ -8125,7 +8169,7 @@ function useViewportScroll() {
|
|
|
8125
8169
|
}
|
|
8126
8170
|
function useAnimationFrame(callback,) {
|
|
8127
8171
|
const initialTimestamp = useRef10(0,);
|
|
8128
|
-
const { isStatic, } =
|
|
8172
|
+
const { isStatic, } = useContext14(MotionConfigContext,);
|
|
8129
8173
|
useEffect10(() => {
|
|
8130
8174
|
if (isStatic) {
|
|
8131
8175
|
return;
|
|
@@ -8192,7 +8236,7 @@ function useReducedMotion() {
|
|
|
8192
8236
|
}
|
|
8193
8237
|
function useReducedMotionConfig() {
|
|
8194
8238
|
const reducedMotionPreference = useReducedMotion();
|
|
8195
|
-
const { reducedMotion, } =
|
|
8239
|
+
const { reducedMotion, } = useContext15(MotionConfigContext,);
|
|
8196
8240
|
if (reducedMotion === 'never') {
|
|
8197
8241
|
return false;
|
|
8198
8242
|
} else if (reducedMotion === 'always') {
|
|
@@ -8865,6 +8909,15 @@ function startOptimizedAppearAnimation(element, name, keyframes2, options, onRea
|
|
|
8865
8909
|
animation: readyAnimation,
|
|
8866
8910
|
startTime: null,
|
|
8867
8911
|
},);
|
|
8912
|
+
if (!window.HandoffCancelAllAnimations) {
|
|
8913
|
+
window.HandoffCancelAllAnimations = () => {
|
|
8914
|
+
appearAnimationStore.forEach(({ animation, },) => {
|
|
8915
|
+
animation.cancel();
|
|
8916
|
+
},);
|
|
8917
|
+
appearAnimationStore.clear();
|
|
8918
|
+
window.HandoffCancelAllAnimations = void 0;
|
|
8919
|
+
};
|
|
8920
|
+
}
|
|
8868
8921
|
}
|
|
8869
8922
|
const startAnimation2 = () => {
|
|
8870
8923
|
readyAnimation.cancel();
|
|
@@ -8952,7 +9005,7 @@ var hasWarned = false;
|
|
|
8952
9005
|
function useInvertedScale(scale2,) {
|
|
8953
9006
|
let parentScaleX = useMotionValue(1,);
|
|
8954
9007
|
let parentScaleY = useMotionValue(1,);
|
|
8955
|
-
const { visualElement, } =
|
|
9008
|
+
const { visualElement, } = useContext16(MotionContext,);
|
|
8956
9009
|
invariant(
|
|
8957
9010
|
!!(scale2 || visualElement),
|
|
8958
9011
|
'If no scale values are provided, useInvertedScale must be used within a child of another motion component.',
|
|
@@ -9023,7 +9076,7 @@ var cancelSync = stepsOrder.reduce((acc, key7,) => {
|
|
|
9023
9076
|
return acc;
|
|
9024
9077
|
}, {},);
|
|
9025
9078
|
|
|
9026
|
-
// https:https://app.framerstatic.com/framer.
|
|
9079
|
+
// https:https://app.framerstatic.com/framer.Q2DHSUSM.js
|
|
9027
9080
|
import { Component as Component2, } from 'react';
|
|
9028
9081
|
import React12 from 'react';
|
|
9029
9082
|
import { jsx as _jsx5, } from 'react/jsx-runtime';
|
|
@@ -9044,7 +9097,7 @@ import React72 from 'react';
|
|
|
9044
9097
|
import React82 from 'react';
|
|
9045
9098
|
import { useCallback as useCallback32, useEffect as useEffect22, useRef as useRef22, } from 'react';
|
|
9046
9099
|
import { jsx as _jsx6, } from 'react/jsx-runtime';
|
|
9047
|
-
import React102, { useContext as
|
|
9100
|
+
import React102, { useContext as useContext17, } from 'react';
|
|
9048
9101
|
import React122 from 'react';
|
|
9049
9102
|
import React112 from 'react';
|
|
9050
9103
|
import React13 from 'react';
|
|
@@ -9149,12 +9202,12 @@ import React53 from 'react';
|
|
|
9149
9202
|
import React47 from 'react';
|
|
9150
9203
|
import React48, { useCallback as useCallback8, useEffect as useEffect102, useRef as useRef112, } from 'react';
|
|
9151
9204
|
import React49 from 'react';
|
|
9152
|
-
import { useLayoutEffect as useLayoutEffect22, } from 'react';
|
|
9205
|
+
import { useLayoutEffect as useLayoutEffect22, useRef as useRef122, } from 'react';
|
|
9153
9206
|
import React51 from 'react';
|
|
9154
9207
|
import React50 from 'react';
|
|
9155
9208
|
import React522 from 'react';
|
|
9156
9209
|
import { jsx as jsx33, } from 'react/jsx-runtime';
|
|
9157
|
-
import { createContext as createContext42, useContext as useContext122, useRef as
|
|
9210
|
+
import { createContext as createContext42, useContext as useContext122, useRef as useRef132, } from 'react';
|
|
9158
9211
|
import { jsx as jsx34, } from 'react/jsx-runtime';
|
|
9159
9212
|
import React55 from 'react';
|
|
9160
9213
|
import * as React54 from 'react';
|
|
@@ -9188,7 +9241,7 @@ import {
|
|
|
9188
9241
|
useCallback as useCallback9,
|
|
9189
9242
|
useContext as useContext142,
|
|
9190
9243
|
useEffect as useEffect112,
|
|
9191
|
-
useRef as
|
|
9244
|
+
useRef as useRef14,
|
|
9192
9245
|
} from 'react';
|
|
9193
9246
|
import { useMemo as useMemo52, } from 'react';
|
|
9194
9247
|
import React70, { createRef, } from 'react';
|
|
@@ -9197,12 +9250,12 @@ import React722 from 'react';
|
|
|
9197
9250
|
import React73 from 'react';
|
|
9198
9251
|
import React74 from 'react';
|
|
9199
9252
|
import React75 from 'react';
|
|
9200
|
-
import { useRef as
|
|
9253
|
+
import { useRef as useRef15, } from 'react';
|
|
9201
9254
|
import React76 from 'react';
|
|
9202
9255
|
import { jsx as jsx45, } from 'react/jsx-runtime';
|
|
9203
9256
|
import React77 from 'react';
|
|
9204
9257
|
import { jsx as jsx46, } from 'react/jsx-runtime';
|
|
9205
|
-
import React78, { useRef as
|
|
9258
|
+
import React78, { useRef as useRef16, } from 'react';
|
|
9206
9259
|
import { jsx as jsx47, } from 'react/jsx-runtime';
|
|
9207
9260
|
import React84, { Component as Component14, } from 'react';
|
|
9208
9261
|
import React79 from 'react';
|
|
@@ -9211,7 +9264,7 @@ import React81 from 'react';
|
|
|
9211
9264
|
import React80 from 'react';
|
|
9212
9265
|
import { jsx as jsx49, } from 'react/jsx-runtime';
|
|
9213
9266
|
import { Fragment as Fragment10, jsx as jsx50, jsxs as jsxs16, } from 'react/jsx-runtime';
|
|
9214
|
-
import React83, { useEffect as useEffect122, useRef as
|
|
9267
|
+
import React83, { useEffect as useEffect122, useRef as useRef17, } from 'react';
|
|
9215
9268
|
import React822 from 'react';
|
|
9216
9269
|
import { Fragment as Fragment11, jsx as jsx51, jsxs as jsxs17, } from 'react/jsx-runtime';
|
|
9217
9270
|
import { Component as Component12, } from 'react';
|
|
@@ -9231,10 +9284,10 @@ import {
|
|
|
9231
9284
|
isValidElement as isValidElement32,
|
|
9232
9285
|
useContext as useContext162,
|
|
9233
9286
|
useInsertionEffect as useInsertionEffect42,
|
|
9234
|
-
useRef as
|
|
9287
|
+
useRef as useRef19,
|
|
9235
9288
|
} from 'react';
|
|
9236
9289
|
import * as React86 from 'react';
|
|
9237
|
-
import { useRef as
|
|
9290
|
+
import { useRef as useRef18, } from 'react';
|
|
9238
9291
|
import { jsx as jsx59, } from 'react/jsx-runtime';
|
|
9239
9292
|
import { jsx as jsx60, } from 'react/jsx-runtime';
|
|
9240
9293
|
import { useEffect as useEffect142, useState as useState22, } from 'react';
|
|
@@ -11755,7 +11808,7 @@ var CurrentRouteContext = React102.createContext(void 0,);
|
|
|
11755
11808
|
function useCurrentRoute() {
|
|
11756
11809
|
var _a;
|
|
11757
11810
|
const router = useRouter();
|
|
11758
|
-
const override =
|
|
11811
|
+
const override = useContext17(CurrentRouteContext,);
|
|
11759
11812
|
const id3 = override !== null && override !== void 0 ? override : router.currentRouteId;
|
|
11760
11813
|
if (!id3) {
|
|
11761
11814
|
return void 0;
|
|
@@ -27465,6 +27518,9 @@ var defaultFXValues = {
|
|
|
27465
27518
|
/** @deprecated */
|
|
27466
27519
|
transformPerspective: 0,
|
|
27467
27520
|
};
|
|
27521
|
+
function isFXValuesKey(key7,) {
|
|
27522
|
+
return key7 in defaultFXValues;
|
|
27523
|
+
}
|
|
27468
27524
|
function useFXValues(values, enabled,) {
|
|
27469
27525
|
const effect = useConstant2(() => ({ values: makeFXValues(enabled ? values : void 0,), }));
|
|
27470
27526
|
React47.useEffect(() => {
|
|
@@ -27670,6 +27726,16 @@ var presenceOptionsKeys = /* @__PURE__ */ new Set([
|
|
|
27670
27726
|
'presenceAnimate',
|
|
27671
27727
|
'presenceExit',
|
|
27672
27728
|
],);
|
|
27729
|
+
function getVisualElementBase(visualElement, style,) {
|
|
27730
|
+
const ctx = visualElement.getVariantContext();
|
|
27731
|
+
const base = { ...style, };
|
|
27732
|
+
if (Array.isArray(ctx == null ? void 0 : ctx.animate,)) {
|
|
27733
|
+
for (const variant of ctx.animate) {
|
|
27734
|
+
Object.assign(base, visualElement.getVariant(variant,),);
|
|
27735
|
+
}
|
|
27736
|
+
}
|
|
27737
|
+
return base;
|
|
27738
|
+
}
|
|
27673
27739
|
function usePresenceAnimation(
|
|
27674
27740
|
{
|
|
27675
27741
|
initial: motionInitial,
|
|
@@ -27681,22 +27747,22 @@ function usePresenceAnimation(
|
|
|
27681
27747
|
},
|
|
27682
27748
|
ref,
|
|
27683
27749
|
enabled,
|
|
27750
|
+
style,
|
|
27684
27751
|
appearId,
|
|
27685
27752
|
) {
|
|
27686
27753
|
const initial = presenceInitial ?? motionInitial;
|
|
27687
27754
|
const animateConfig = presenceAnimate ?? motionAnimate;
|
|
27688
27755
|
const exit = presenceExit ?? motionExit;
|
|
27756
|
+
const hasMounted = useRef122(false,);
|
|
27689
27757
|
const effect = useConstant2(() => {
|
|
27690
27758
|
var _a;
|
|
27691
|
-
|
|
27759
|
+
const base = initial ?? style;
|
|
27760
|
+
if (!isObject2(base,)) {
|
|
27692
27761
|
return { values: makeFXValues(), };
|
|
27693
27762
|
}
|
|
27694
27763
|
const defaults = {};
|
|
27695
|
-
for (const key7 in
|
|
27696
|
-
|
|
27697
|
-
if (isMotionValue(value,)) {
|
|
27698
|
-
value = value.get();
|
|
27699
|
-
}
|
|
27764
|
+
for (const key7 in base) {
|
|
27765
|
+
const value = isObject2(base,) ? (_a = asRecord(base,)) == null ? void 0 : _a[key7] : void 0;
|
|
27700
27766
|
if (!isNumber2(value,)) {
|
|
27701
27767
|
continue;
|
|
27702
27768
|
}
|
|
@@ -27707,6 +27773,7 @@ function usePresenceAnimation(
|
|
|
27707
27773
|
const [isPresent2, safeToRemove,] = usePresence();
|
|
27708
27774
|
const shouldReduceMotion = useReducedMotionConfig();
|
|
27709
27775
|
useLayoutEffect22(() => {
|
|
27776
|
+
hasMounted.current = true;
|
|
27710
27777
|
if (!enabled) {
|
|
27711
27778
|
safeToRemove == null ? void 0 : safeToRemove();
|
|
27712
27779
|
return;
|
|
@@ -27723,6 +27790,23 @@ function usePresenceAnimation(
|
|
|
27723
27790
|
}
|
|
27724
27791
|
}
|
|
27725
27792
|
}, [isPresent2,],);
|
|
27793
|
+
useLayoutEffect22(() => {
|
|
27794
|
+
if (!hasMounted.current) {
|
|
27795
|
+
return;
|
|
27796
|
+
}
|
|
27797
|
+
const visualElement = visualElementStore.get(ref.current,);
|
|
27798
|
+
if (!visualElement) {
|
|
27799
|
+
return;
|
|
27800
|
+
}
|
|
27801
|
+
const base = isObject2(animateConfig,) ? animateConfig : getVisualElementBase(visualElement, style,);
|
|
27802
|
+
for (const key7 in effect.values) {
|
|
27803
|
+
if (!isFXValuesKey(key7,)) {
|
|
27804
|
+
continue;
|
|
27805
|
+
}
|
|
27806
|
+
const value = base == null ? void 0 : base[key7];
|
|
27807
|
+
visualElement.setBaseTarget(key7, isNumber2(value,) ? value : defaultFXValues[key7],);
|
|
27808
|
+
}
|
|
27809
|
+
}, [JSON.stringify(animateConfig,),],);
|
|
27726
27810
|
return effect;
|
|
27727
27811
|
}
|
|
27728
27812
|
function calcOffsetTop(element, container,) {
|
|
@@ -28236,9 +28320,6 @@ function addMotionValueStyle(style, values,) {
|
|
|
28236
28320
|
function isVariantOrVariantList(value,) {
|
|
28237
28321
|
return isString22(value,) || Array.isArray(value,);
|
|
28238
28322
|
}
|
|
28239
|
-
function isFXValuesKey(key7,) {
|
|
28240
|
-
return key7 in defaultFXValues;
|
|
28241
|
-
}
|
|
28242
28323
|
var withFX = (Component15,) =>
|
|
28243
28324
|
React53.forwardRef((props, forwardedRef,) => {
|
|
28244
28325
|
if (props.__withFX) {
|
|
@@ -28269,6 +28350,7 @@ var withFX = (Component15,) =>
|
|
|
28269
28350
|
presence,
|
|
28270
28351
|
ref,
|
|
28271
28352
|
inSmartComponent,
|
|
28353
|
+
props.style,
|
|
28272
28354
|
props[optimizedAppearDataAttribute],
|
|
28273
28355
|
);
|
|
28274
28356
|
const { values: parallaxValues, style: parallaxStyle, } = useParallax(parallax, ref,);
|
|
@@ -28369,7 +28451,7 @@ var withParallaxTransform = withFX;
|
|
|
28369
28451
|
var withStyleAppearEffect = withFX;
|
|
28370
28452
|
var Context = /* @__PURE__ */ createContext42({},);
|
|
28371
28453
|
function ComponentPresetsProvider({ presets, children, },) {
|
|
28372
|
-
const lastPresets =
|
|
28454
|
+
const lastPresets = useRef132(presets,);
|
|
28373
28455
|
if (!isEqual(presets, lastPresets.current, false,)) {
|
|
28374
28456
|
lastPresets.current = presets;
|
|
28375
28457
|
}
|
|
@@ -32399,8 +32481,8 @@ function activeMediaQueryFromWindow(mediaQueries,) {
|
|
|
32399
32481
|
}
|
|
32400
32482
|
function useHydratedBreakpointVariants(initial, mediaQueries, hydratedWithInitial = true,) {
|
|
32401
32483
|
const isInitialNavigation = useContext142(IsInitialNavigationContext,);
|
|
32402
|
-
const baseVariant =
|
|
32403
|
-
const basePropsVariant =
|
|
32484
|
+
const baseVariant = useRef14(isBrowser2() ? activeMediaQueryFromWindow(mediaQueries,) ?? initial : initial,);
|
|
32485
|
+
const basePropsVariant = useRef14(hydratedWithInitial && isInitialNavigation ? initial : baseVariant.current,);
|
|
32404
32486
|
const forceUpdate = useForceUpdate3();
|
|
32405
32487
|
const instantTransition = useInstantTransition();
|
|
32406
32488
|
const setActiveVariantInstant = useCallback9(
|
|
@@ -33167,7 +33249,7 @@ function useQueryData(query,) {
|
|
|
33167
33249
|
if (isDatabaseCollectionModule(query.from.data,)) {
|
|
33168
33250
|
return useQueryDataWithQueryEngine(query,);
|
|
33169
33251
|
}
|
|
33170
|
-
const queryRef =
|
|
33252
|
+
const queryRef = useRef15();
|
|
33171
33253
|
if (queryRef.current && isEqual(queryRef.current, query,)) {
|
|
33172
33254
|
query = queryRef.current;
|
|
33173
33255
|
} else {
|
|
@@ -33750,7 +33832,7 @@ var withVariantAppearEffect = (Component15,) =>
|
|
|
33750
33832
|
var withVariantFX = (Component15,) =>
|
|
33751
33833
|
React78.forwardRef(
|
|
33752
33834
|
({ initial, animate: animate3, exit, ...props }, forwardedRef,) => {
|
|
33753
|
-
const ref =
|
|
33835
|
+
const ref = useRef16();
|
|
33754
33836
|
const effect = usePresenceAnimation(
|
|
33755
33837
|
{
|
|
33756
33838
|
initial,
|
|
@@ -36157,7 +36239,7 @@ function TextStyleSheet() {
|
|
|
36157
36239
|
var Text = /* @__PURE__ */ React83.forwardRef(function Text2(props, forwardedRef,) {
|
|
36158
36240
|
const parentSize = useParentSize();
|
|
36159
36241
|
const layoutId = useLayoutId2(props,);
|
|
36160
|
-
const fallbackLayoutRef =
|
|
36242
|
+
const fallbackLayoutRef = useRef17(null,);
|
|
36161
36243
|
const layoutRef = forwardedRef ?? fallbackLayoutRef;
|
|
36162
36244
|
const { navigate, getRoute, } = useRouter();
|
|
36163
36245
|
const currentRoute = useCurrentRoute();
|
|
@@ -36167,7 +36249,7 @@ var Text = /* @__PURE__ */ React83.forwardRef(function Text2(props, forwardedRef
|
|
|
36167
36249
|
const fontLoadStatus = useFontLoadStatus(props.fonts,);
|
|
36168
36250
|
useMeasureLayout(props, layoutRef,);
|
|
36169
36251
|
const { fonts, __fromCanvasComponent, } = props;
|
|
36170
|
-
const prevFontsRef =
|
|
36252
|
+
const prevFontsRef = useRef17([],);
|
|
36171
36253
|
const fontsDidChange = !isShallowEqualArray(prevFontsRef.current ?? [], fonts ?? [],);
|
|
36172
36254
|
prevFontsRef.current = fonts;
|
|
36173
36255
|
useEffect122(() => {
|
|
@@ -37619,7 +37701,7 @@ var DeprecatedRichText = /* @__PURE__ */ React86.forwardRef(
|
|
|
37619
37701
|
} = props;
|
|
37620
37702
|
const parentSize = useParentSize();
|
|
37621
37703
|
const layoutId = useLayoutId2(props,);
|
|
37622
|
-
const fallbackLayoutRef =
|
|
37704
|
+
const fallbackLayoutRef = useRef18(null,);
|
|
37623
37705
|
const layoutRef = forwardedRef ?? fallbackLayoutRef;
|
|
37624
37706
|
const { navigate, getRoute, } = useRouter();
|
|
37625
37707
|
const currentRoute = useCurrentRoute();
|
|
@@ -37760,7 +37842,7 @@ function convertVerticalAlignment2(verticalAlignment,) {
|
|
|
37760
37842
|
}
|
|
37761
37843
|
}
|
|
37762
37844
|
function useLoadFonts(fonts, fromCanvasComponent, containerRef,) {
|
|
37763
|
-
const prevFontsRef =
|
|
37845
|
+
const prevFontsRef = useRef18([],);
|
|
37764
37846
|
if (!isShallowEqualArray(prevFontsRef.current, fonts,)) {
|
|
37765
37847
|
prevFontsRef.current = fonts;
|
|
37766
37848
|
fontStore.loadFonts(fonts,).then(({ newlyLoadedFontCount, },) => {
|
|
@@ -37836,7 +37918,7 @@ var RichTextContainer = /* @__PURE__ */ forwardRef52(
|
|
|
37836
37918
|
const isOnCanvas = useIsOnFramerCanvas();
|
|
37837
37919
|
const inCodeComponent = useContext162(ComponentContainerContext,);
|
|
37838
37920
|
const layoutId = useLayoutId2(props,);
|
|
37839
|
-
const fallbackRef =
|
|
37921
|
+
const fallbackRef = useRef19(null,);
|
|
37840
37922
|
const containerRef = ref ?? fallbackRef;
|
|
37841
37923
|
useMeasureLayout(props, containerRef,);
|
|
37842
37924
|
useLoadFonts(fonts, __fromCanvasComponent, containerRef,);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unframer",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/remorses/unframer",
|
|
@@ -32,11 +32,12 @@
|
|
|
32
32
|
"author": "Tommaso De Rossi, morse <beats.by.morse@gmail.com>",
|
|
33
33
|
"license": "",
|
|
34
34
|
"peerDependencies": {
|
|
35
|
-
"react": "*",
|
|
36
35
|
"@types/react": "*",
|
|
36
|
+
"react": "*",
|
|
37
37
|
"react-dom": "*"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
+
"cac": "^6.7.14",
|
|
40
41
|
"chokidar": "^3.5.3",
|
|
41
42
|
"dedent": "^1.5.1",
|
|
42
43
|
"dprint-node": "^1.0.8",
|
package/src/cli.tsx
CHANGED
|
@@ -7,64 +7,89 @@ import { findUp } from 'find-up'
|
|
|
7
7
|
import tmp from 'tmp'
|
|
8
8
|
import path from 'path'
|
|
9
9
|
const configName = 'unframer.json'
|
|
10
|
+
import { cac } from 'cac'
|
|
11
|
+
|
|
12
|
+
export const cli = cac()
|
|
10
13
|
|
|
11
14
|
const __dirname = path.dirname(new URL(import.meta.url).pathname)
|
|
12
15
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
logger.log(`
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
cli.command('', 'Run unframer')
|
|
17
|
+
.option('--watch', 'Watch for Framer and unframer.json changes')
|
|
18
|
+
.action(async function main(options) {
|
|
19
|
+
console.log({ options })
|
|
20
|
+
const cwd = process.cwd()
|
|
21
|
+
const watch = process.argv.includes('--watch')
|
|
22
|
+
logger.log(`Looking for ${configName} in ${cwd}`)
|
|
23
|
+
const configPath = await findUp([configName], { cwd })
|
|
24
|
+
if (!configPath) {
|
|
25
|
+
logger.log(`No ${configName} found`)
|
|
26
|
+
return
|
|
27
|
+
}
|
|
28
|
+
const configContent = fs.readFileSync(configPath, 'utf8')
|
|
29
|
+
if (!configContent) {
|
|
30
|
+
logger.log(`No ${configName} contents found`)
|
|
31
|
+
return
|
|
32
|
+
}
|
|
33
|
+
let config = JSON.parse(configContent)
|
|
28
34
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
+
let controller = new AbortController()
|
|
36
|
+
setMaxListeners(0, controller.signal)
|
|
37
|
+
processConfig({ config, watch, signal: controller.signal })
|
|
38
|
+
if (!watch) {
|
|
39
|
+
return
|
|
40
|
+
}
|
|
35
41
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
42
|
+
const watcher = chokidar.watch(configPath!, {
|
|
43
|
+
persistent: true,
|
|
44
|
+
})
|
|
39
45
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
46
|
+
watcher.on('change', async (path) => {
|
|
47
|
+
logger.log(`${configName} changed`)
|
|
48
|
+
console.log()
|
|
49
|
+
controller.abort()
|
|
44
50
|
|
|
45
|
-
|
|
46
|
-
|
|
51
|
+
controller = new AbortController()
|
|
52
|
+
setMaxListeners(0, controller.signal)
|
|
47
53
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
54
|
+
const newConfig = safeJsonParse(
|
|
55
|
+
fs.readFileSync(configPath!, 'utf8'),
|
|
56
|
+
)
|
|
57
|
+
if (!newConfig) {
|
|
58
|
+
logger.log(`Invalid ${configName} file`)
|
|
59
|
+
return
|
|
60
|
+
}
|
|
61
|
+
const newNames = getNewNames(config, newConfig)
|
|
62
|
+
if (newNames.length) {
|
|
63
|
+
logger.log(`New components found: ${newNames.join(', ')}`)
|
|
64
|
+
await processConfig({
|
|
65
|
+
config: {
|
|
66
|
+
...newConfig,
|
|
67
|
+
components: pluck(newConfig.components, newNames),
|
|
68
|
+
},
|
|
69
|
+
watch,
|
|
70
|
+
// signal: controller.signal,
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
config = newConfig
|
|
74
|
+
})
|
|
66
75
|
})
|
|
67
|
-
|
|
76
|
+
|
|
77
|
+
cli.command('init', 'Init the unframer.json config').action(async (options) => {
|
|
78
|
+
fs.writeFileSync(
|
|
79
|
+
`unframer.json`,
|
|
80
|
+
JSON.stringify(
|
|
81
|
+
{
|
|
82
|
+
components: { hero: 'https://framer.com/m/Header-WtSW.js' },
|
|
83
|
+
outDir: 'framer',
|
|
84
|
+
},
|
|
85
|
+
null,
|
|
86
|
+
2,
|
|
87
|
+
),
|
|
88
|
+
)
|
|
89
|
+
})
|
|
90
|
+
|
|
91
|
+
cli.help()
|
|
92
|
+
|
|
68
93
|
function safeJsonParse(json: string) {
|
|
69
94
|
try {
|
|
70
95
|
return JSON.parse(json)
|