unframer 0.6.0 → 0.6.2
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/react.d.ts +3 -3
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +34 -20
- package/dist/react.js.map +1 -1
- package/package.json +3 -1
- package/src/react.tsx +69 -36
package/dist/react.d.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ComponentType
|
|
1
|
+
import { ComponentPropsWithoutRef, ComponentType } from 'react';
|
|
2
2
|
declare const defaultBreakpoints: readonly ["Desktop", "Tablet", "Mobile"];
|
|
3
3
|
type Breakpoint = (typeof defaultBreakpoints)[number];
|
|
4
4
|
export declare function getFontsStyles(Components: any): string;
|
|
5
5
|
export declare function FramerStyles({ Components }: {
|
|
6
6
|
Components?: any[] | undefined;
|
|
7
|
-
}):
|
|
7
|
+
}): any;
|
|
8
8
|
export declare function WithFramerBreakpoints<T extends ComponentType<{
|
|
9
9
|
variant?: any;
|
|
10
10
|
className?: string;
|
|
11
11
|
}>>({ Component, variants: breakpointsMap, ...rest }: {
|
|
12
12
|
Component: T;
|
|
13
13
|
variants?: Record<Breakpoint, ComponentPropsWithoutRef<T>['variant']>;
|
|
14
|
-
} & Omit<ComponentPropsWithoutRef<T>, 'variant'>):
|
|
14
|
+
} & Omit<ComponentPropsWithoutRef<T>, 'variant'>): any;
|
|
15
15
|
export {};
|
|
16
16
|
//# sourceMappingURL=react.d.ts.map
|
package/dist/react.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,wBAAwB,EACxB,aAAa,
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAGA,OAAO,EACH,wBAAwB,EACxB,aAAa,EAMhB,MAAM,OAAO,CAAA;AAYd,QAAA,MAAM,kBAAkB,0CAA2C,CAAA;AAEnE,KAAK,UAAU,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AAkDrD,wBAAgB,cAAc,CAAC,UAAU,KAAA,UAsBxC;AA+CD,wBAAgB,YAAY,CAAC,EAAE,UAAwB,EAAE;;CAAA,GAAG,GAAG,CA6C9D;AAED,wBAAgB,qBAAqB,CACjC,CAAC,SAAS,aAAa,CAAC;IAAE,OAAO,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,EAChE,EACE,SAAS,EACT,QAAQ,EAAE,cAA2B,EACrC,GAAG,IAAI,EACV,EAAE;IACC,SAAS,EAAE,CAAC,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE,wBAAwB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;CACxE,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,GAAG,GAAG,CAwDrD"}
|
package/dist/react.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { combinedCSSRules } from '../framer-fixed/dist/framer.js';
|
|
4
|
-
import { useSyncExternalStore, } from 'react';
|
|
4
|
+
import { useMemo, useSyncExternalStore, } from 'react';
|
|
5
5
|
function getFonts(component) {
|
|
6
6
|
const fonts = component.fonts;
|
|
7
7
|
return fonts || [];
|
|
@@ -112,16 +112,28 @@ const breakpointsStyles = `
|
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
`;
|
|
115
|
+
const nothing = () => { };
|
|
115
116
|
export function FramerStyles({ Components = [] }) {
|
|
116
|
-
|
|
117
|
+
const isClient = useSyncExternalStore(nothing, () => true, () => false);
|
|
118
|
+
const breakpoints = (_jsx("style", { dangerouslySetInnerHTML: { __html: breakpointsStyles }, suppressHydrationWarning: true, hidden: true }, 'breakpointsStyles'));
|
|
119
|
+
const fonts = (_jsx("style", { dangerouslySetInnerHTML: { __html: getFontsStyles(Components) }, suppressHydrationWarning: true, hidden: true }, 'fonts'));
|
|
120
|
+
// if (isClient) {
|
|
121
|
+
// // on client framer injects the styles by itself
|
|
122
|
+
// return (
|
|
123
|
+
// <>
|
|
124
|
+
// {breakpoints}
|
|
125
|
+
// {fonts}
|
|
126
|
+
// </>
|
|
127
|
+
// )
|
|
128
|
+
// }
|
|
129
|
+
return (_jsxs(_Fragment, { children: [breakpoints, fonts, _jsx("style", { dangerouslySetInnerHTML: {
|
|
117
130
|
__html: combinedCSSRules.join('\n'),
|
|
118
|
-
}, suppressHydrationWarning: true, hidden: true }
|
|
131
|
+
}, suppressHydrationWarning: true, hidden: true }, 'combinedCSSRules')] }));
|
|
119
132
|
}
|
|
120
133
|
export function WithFramerBreakpoints({ Component, variants: breakpointsMap = defaultMap, ...rest }) {
|
|
121
134
|
const controls = Component['propertyControls'];
|
|
122
135
|
const variantControls = controls?.['variant'];
|
|
123
136
|
if (!variantControls) {
|
|
124
|
-
// @ts-expect-error
|
|
125
137
|
return _jsx(Component, { variant: undefined, ...rest });
|
|
126
138
|
}
|
|
127
139
|
const options = variantControls?.optionTitles;
|
|
@@ -130,24 +142,26 @@ export function WithFramerBreakpoints({ Component, variants: breakpointsMap = de
|
|
|
130
142
|
const breakpoint = getBreakpointNameFromWindowWidth(window.innerWidth);
|
|
131
143
|
return breakpoint;
|
|
132
144
|
}, () => {
|
|
133
|
-
// on server
|
|
145
|
+
// on server and during hydration
|
|
134
146
|
return '';
|
|
135
147
|
});
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
148
|
+
const parts = useMemo(() => {
|
|
149
|
+
return defaultBreakpoints.map((breakpointName) => {
|
|
150
|
+
if (currentBreakpoint && currentBreakpoint !== breakpointName) {
|
|
151
|
+
// TODO if i remove some elements the component motion.div will move out on first render, probably because they take another element as anchor, which means it thinks that before it was a different variant, so it animates
|
|
152
|
+
// return null
|
|
153
|
+
}
|
|
154
|
+
let realVariant = breakpointsMap[breakpointName];
|
|
155
|
+
if (!realVariant) {
|
|
156
|
+
// console.error(breakpointName, 'not found in', breakpointsMap)
|
|
157
|
+
return null;
|
|
158
|
+
}
|
|
159
|
+
let mapped = defaultBreakpoints.filter((x) => breakpointsMap[x]);
|
|
160
|
+
let map = getClassMap(mapped)[breakpointName];
|
|
161
|
+
let className = classNames('', map);
|
|
162
|
+
return (_jsx("div", { className: className, children: _jsx(Component, { ...rest, variant: realVariant }, breakpointName) }, breakpointName));
|
|
163
|
+
});
|
|
164
|
+
}, [currentBreakpoint]);
|
|
151
165
|
return parts;
|
|
152
166
|
}
|
|
153
167
|
const onResize = (callback) => {
|
package/dist/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAEjE,OAAO,EAKH,oBAAoB,GACvB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AAEjE,OAAO,EAKH,OAAO,EAEP,oBAAoB,GACvB,MAAM,OAAO,CAAA;AAGd,SAAS,QAAQ,CAAC,SAAS;IACvB,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK,CAAA;IAC7B,OAAO,KAAK,IAAI,EAAE,CAAA;AACtB,CAAC;AAED,SAAS,UAAU,CAAC,GAAG,IAAI;IACvB,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACzC,CAAC;AAED,MAAM,kBAAkB,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAU,CAAA;AAInE,IAAI,UAAU,GAA+B,MAAM,CAAC,WAAW,CAC3D,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CACjC,CAAA;AAER,SAAS,WAAW,CAAC,WAAyB;IAC1C,MAAM,QAAQ,GAA+B;QACzC,OAAO,EAAE,EAAE;QACX,MAAM,EAAE,EAAE;QACV,MAAM,EAAE,EAAE;KACb,CAAA;IAED,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3B,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,GAAG,yCAAyC,CAAA;IACxE,CAAC;SAAM,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClC,IAAI,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;YAClC,QAAQ,CAAC,OAAO,GAAG,SAAS,CAAA;YAC5B,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,SAAS,CAAE,CAAC;gBAC/C,2BAA2B,CAAA;QACnC,CAAC;aAAM,IAAI,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACxC,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAA;YAC1B,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAE,CAAC;gBAC9C,4BAA4B,CAAA;QACpC,CAAC;aAAM,CAAC;YACJ,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAA;YAC1B,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAE,CAAC;gBAC9C,4BAA4B,CAAA;QACpC,CAAC;IACL,CAAC;SAAM,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAClC,QAAQ,CAAC,OAAO,GAAG,eAAe,CAAA;QAClC,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAA;QAChC,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAA;IACpC,CAAC;IAED,OAAO,QAAQ,CAAA;AACnB,CAAC;AAED,SAAS,gBAAgB,CAAI,GAAQ,EAAE,GAAqB;IACxD,IAAI,GAAG,GAAG,IAAI,GAAG,EAAE,CAAA;IACnB,KAAK,IAAI,IAAI,IAAI,GAAG,EAAE,CAAC;QACnB,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;QAC3B,IAAI,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACjB,SAAQ;QACZ,CAAC;QACD,GAAG,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,CAAA;IACxB,CAAC;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAA;AACnC,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,UAAU;IACrC,MAAM,QAAQ,GAAG,gBAAgB,CAC7B,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAC/B,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CACf,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IAEtB,8CAA8C;IAC9C,IAAI,GAAG,GAAG,QAAQ;SACb,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACP,IAAI,GAAG,GAAG,8BAA8B,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,GAAG,IAAI,CAAA;QACxE,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC;YACV,GAAG,IAAI,gBAAgB,CAAC,CAAC,KAAK,GAAG,CAAA;QACrC,CAAC;QACD,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;YACX,GAAG,IAAI,iBAAiB,CAAC,CAAC,MAAM,GAAG,CAAA;QACvC,CAAC;QACD,GAAG,IAAI,IAAI,CAAA;QACX,OAAO,GAAG,CAAA;IACd,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,CAAA;IAEf,OAAO,GAAG,CAAA;AACd,CAAC;AAED,MAAM,eAAe,GAAwD;IACzE,OAAO,EAAE,IAAI;IACb,MAAM,EAAE,GAAG;IACX,MAAM,EAAE,CAAC;CACZ,CAAA;AAED,SAAS,gCAAgC,CAAC,WAAmB;IACzD,OAAO,kBAAkB,CAAC,IAAI,CAC1B,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,IAAI,eAAe,CAAC,IAAI,CAAC,CACjD,CAAA;AACL,CAAC;AAED,MAAM,iBAAiB,GAAG;;;;;;;;qBAQL,eAAe,CAAC,OAAO;;;;;;qBAMvB,eAAe,CAAC,MAAM,uBAAuB,eAAe,CAAC,OAAO;;;;;;qBAMpE,eAAe,CAAC,MAAM;;;;;;;;;;CAU1C,CAAA;AAED,MAAM,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;AACxB,MAAM,UAAU,YAAY,CAAC,EAAE,UAAU,GAAG,EAAW,EAAE;IACrD,MAAM,QAAQ,GAAG,oBAAoB,CACjC,OAAO,EACP,GAAG,EAAE,CAAC,IAAI,EACV,GAAG,EAAE,CAAC,KAAK,CACd,CAAA;IACD,MAAM,WAAW,GAAG,CAChB,gBACI,uBAAuB,EAAE,EAAE,MAAM,EAAE,iBAAiB,EAAE,EAEtD,wBAAwB,QACxB,MAAM,UAFF,mBAAmB,CAGzB,CACL,CAAA;IACD,MAAM,KAAK,GAAG,CACV,gBACI,uBAAuB,EAAE,EAAE,MAAM,EAAE,cAAc,CAAC,UAAU,CAAC,EAAE,EAC/D,wBAAwB,QAExB,MAAM,UADF,OAAO,CAEb,CACL,CAAA;IACD,kBAAkB;IAClB,uDAAuD;IACvD,eAAe;IACf,aAAa;IACb,4BAA4B;IAC5B,sBAAsB;IACtB,cAAc;IACd,QAAQ;IACR,IAAI;IACJ,OAAO,CACH,8BACK,WAAW,EACX,KAAK,EACN,gBACI,uBAAuB,EAAE;oBACrB,MAAM,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;iBACtC,EAED,wBAAwB,QACxB,MAAM,UAFF,kBAAkB,CAGxB,IACH,CACN,CAAA;AACL,CAAC;AAED,MAAM,UAAU,qBAAqB,CAEnC,EACE,SAAS,EACT,QAAQ,EAAE,cAAc,GAAG,UAAU,EACrC,GAAG,IAAI,EAIqC;IAC5C,MAAM,QAAQ,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAA;IAE9C,MAAM,eAAe,GAAG,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAA;IAC7C,IAAI,CAAC,eAAe,EAAE,CAAC;QACnB,OAAO,KAAC,SAAS,IAAC,OAAO,EAAE,SAAS,KAAM,IAAI,GAAI,CAAA;IACtD,CAAC;IAED,MAAM,OAAO,GAAG,eAAe,EAAE,YAAY,CAAA;IAE7C,MAAM,iBAAiB,GAAG,oBAAoB,CAC1C,QAAQ,EACR,GAAG,EAAE;QACD,sDAAsD;QACtD,MAAM,UAAU,GAAG,gCAAgC,CAC/C,MAAM,CAAC,UAAU,CACpB,CAAA;QACD,OAAO,UAAU,CAAA;IACrB,CAAC,EACD,GAAG,EAAE;QACD,iCAAiC;QAEjC,OAAO,EAAE,CAAA;IACb,CAAC,CACJ,CAAA;IAED,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACvB,OAAO,kBAAkB,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,EAAE;YAC7C,IAAI,iBAAiB,IAAI,iBAAiB,KAAK,cAAc,EAAE,CAAC;gBAC5D,4NAA4N;gBAC5N,cAAc;YAClB,CAAC;YACD,IAAI,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;YAChD,IAAI,CAAC,WAAW,EAAE,CAAC;gBACf,gEAAgE;gBAChE,OAAO,IAAI,CAAA;YACf,CAAC;YACD,IAAI,MAAM,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;YAEhE,IAAI,GAAG,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC,CAAA;YAC7C,IAAI,SAAS,GAAG,UAAU,CAAC,EAAE,EAAE,GAAG,CAAC,CAAA;YAEnC,OAAO,CACH,cAA0B,SAAS,EAAE,SAAS,YAC1C,KAAC,SAAS,OAGF,IAAI,EACR,OAAO,EAAE,WAAW,IAHf,cAAc,CAIrB,IANI,cAAc,CAOlB,CACT,CAAA;QACL,CAAC,CAAC,CAAA;IACN,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAEvB,OAAO,KAAK,CAAA;AAChB,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,QAAQ,EAAE,EAAE;IAC1B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC3C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAA;AAC/D,CAAC,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unframer",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/remorses/unframer",
|
|
@@ -53,6 +53,8 @@
|
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@types/fs-extra": "^11.0.1",
|
|
55
55
|
"@types/node": "^20.5.7",
|
|
56
|
+
"node-fetch-cache": "^4.1.0",
|
|
57
|
+
"posthtml": "^0.16.6",
|
|
56
58
|
"react": "^18.2.0",
|
|
57
59
|
"react-dom": "^18.2.0"
|
|
58
60
|
},
|
package/src/react.tsx
CHANGED
|
@@ -6,8 +6,11 @@ import {
|
|
|
6
6
|
ComponentType,
|
|
7
7
|
ReactNode,
|
|
8
8
|
useEffect,
|
|
9
|
+
useMemo,
|
|
10
|
+
useState,
|
|
9
11
|
useSyncExternalStore,
|
|
10
12
|
} from 'react'
|
|
13
|
+
import { useInstantLayoutTransition } from 'framer-motion'
|
|
11
14
|
|
|
12
15
|
function getFonts(component) {
|
|
13
16
|
const fonts = component.fonts
|
|
@@ -138,23 +141,47 @@ const breakpointsStyles = `
|
|
|
138
141
|
|
|
139
142
|
`
|
|
140
143
|
|
|
141
|
-
|
|
144
|
+
const nothing = () => {}
|
|
145
|
+
export function FramerStyles({ Components = [] as any[] }): any {
|
|
146
|
+
const isClient = useSyncExternalStore(
|
|
147
|
+
nothing,
|
|
148
|
+
() => true,
|
|
149
|
+
() => false,
|
|
150
|
+
)
|
|
151
|
+
const breakpoints = (
|
|
152
|
+
<style
|
|
153
|
+
dangerouslySetInnerHTML={{ __html: breakpointsStyles }}
|
|
154
|
+
key='breakpointsStyles'
|
|
155
|
+
suppressHydrationWarning
|
|
156
|
+
hidden
|
|
157
|
+
/>
|
|
158
|
+
)
|
|
159
|
+
const fonts = (
|
|
160
|
+
<style
|
|
161
|
+
dangerouslySetInnerHTML={{ __html: getFontsStyles(Components) }}
|
|
162
|
+
suppressHydrationWarning
|
|
163
|
+
key='fonts'
|
|
164
|
+
hidden
|
|
165
|
+
/>
|
|
166
|
+
)
|
|
167
|
+
// if (isClient) {
|
|
168
|
+
// // on client framer injects the styles by itself
|
|
169
|
+
// return (
|
|
170
|
+
// <>
|
|
171
|
+
// {breakpoints}
|
|
172
|
+
// {fonts}
|
|
173
|
+
// </>
|
|
174
|
+
// )
|
|
175
|
+
// }
|
|
142
176
|
return (
|
|
143
177
|
<>
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
suppressHydrationWarning
|
|
147
|
-
hidden
|
|
148
|
-
/>
|
|
178
|
+
{breakpoints}
|
|
179
|
+
{fonts}
|
|
149
180
|
<style
|
|
150
181
|
dangerouslySetInnerHTML={{
|
|
151
182
|
__html: combinedCSSRules.join('\n'),
|
|
152
183
|
}}
|
|
153
|
-
|
|
154
|
-
hidden
|
|
155
|
-
/>
|
|
156
|
-
<style
|
|
157
|
-
dangerouslySetInnerHTML={{ __html: breakpointsStyles }}
|
|
184
|
+
key='combinedCSSRules'
|
|
158
185
|
suppressHydrationWarning
|
|
159
186
|
hidden
|
|
160
187
|
/>
|
|
@@ -171,12 +198,11 @@ export function WithFramerBreakpoints<
|
|
|
171
198
|
}: {
|
|
172
199
|
Component: T
|
|
173
200
|
variants?: Record<Breakpoint, ComponentPropsWithoutRef<T>['variant']>
|
|
174
|
-
} & Omit<ComponentPropsWithoutRef<T>, 'variant'>) {
|
|
201
|
+
} & Omit<ComponentPropsWithoutRef<T>, 'variant'>): any {
|
|
175
202
|
const controls = Component['propertyControls']
|
|
176
203
|
|
|
177
204
|
const variantControls = controls?.['variant']
|
|
178
205
|
if (!variantControls) {
|
|
179
|
-
// @ts-expect-error
|
|
180
206
|
return <Component variant={undefined} {...rest} />
|
|
181
207
|
}
|
|
182
208
|
|
|
@@ -192,33 +218,40 @@ export function WithFramerBreakpoints<
|
|
|
192
218
|
return breakpoint
|
|
193
219
|
},
|
|
194
220
|
() => {
|
|
195
|
-
// on server
|
|
221
|
+
// on server and during hydration
|
|
222
|
+
|
|
196
223
|
return ''
|
|
197
224
|
},
|
|
198
225
|
)
|
|
199
|
-
// console.log('currentBreakpoint', currentBreakpoint)
|
|
200
226
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
<
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
227
|
+
const parts = useMemo(() => {
|
|
228
|
+
return defaultBreakpoints.map((breakpointName) => {
|
|
229
|
+
if (currentBreakpoint && currentBreakpoint !== breakpointName) {
|
|
230
|
+
// TODO if i remove some elements the component motion.div will move out on first render, probably because they take another element as anchor, which means it thinks that before it was a different variant, so it animates
|
|
231
|
+
// return null
|
|
232
|
+
}
|
|
233
|
+
let realVariant = breakpointsMap[breakpointName]
|
|
234
|
+
if (!realVariant) {
|
|
235
|
+
// console.error(breakpointName, 'not found in', breakpointsMap)
|
|
236
|
+
return null
|
|
237
|
+
}
|
|
238
|
+
let mapped = defaultBreakpoints.filter((x) => breakpointsMap[x])
|
|
239
|
+
|
|
240
|
+
let map = getClassMap(mapped)[breakpointName]
|
|
241
|
+
let className = classNames('', map)
|
|
242
|
+
|
|
243
|
+
return (
|
|
244
|
+
<div key={breakpointName} className={className}>
|
|
245
|
+
<Component
|
|
246
|
+
key={breakpointName}
|
|
247
|
+
// layoutId={breakpointName}
|
|
248
|
+
{...rest}
|
|
249
|
+
variant={realVariant}
|
|
250
|
+
/>
|
|
251
|
+
</div>
|
|
252
|
+
)
|
|
253
|
+
})
|
|
254
|
+
}, [currentBreakpoint])
|
|
222
255
|
|
|
223
256
|
return parts
|
|
224
257
|
}
|