unframer 0.6.0 → 0.6.1
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 +37 -20
- package/dist/react.js.map +1 -1
- package/package.json +3 -1
- package/src/react.tsx +70 -37
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,8 @@
|
|
|
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
|
+
import { useInstantLayoutTransition } from 'framer-motion';
|
|
5
6
|
function getFonts(component) {
|
|
6
7
|
const fonts = component.fonts;
|
|
7
8
|
return fonts || [];
|
|
@@ -112,42 +113,58 @@ const breakpointsStyles = `
|
|
|
112
113
|
}
|
|
113
114
|
|
|
114
115
|
`;
|
|
116
|
+
const nothing = () => { };
|
|
115
117
|
export function FramerStyles({ Components = [] }) {
|
|
116
|
-
|
|
118
|
+
const isClient = useSyncExternalStore(nothing, () => true, () => false);
|
|
119
|
+
const breakpoints = (_jsx("style", { dangerouslySetInnerHTML: { __html: breakpointsStyles }, suppressHydrationWarning: true, hidden: true }, 'breakpointsStyles'));
|
|
120
|
+
const fonts = (_jsx("style", { dangerouslySetInnerHTML: { __html: getFontsStyles(Components) }, suppressHydrationWarning: true, hidden: true }, 'fonts'));
|
|
121
|
+
// if (isClient) {
|
|
122
|
+
// // on client framer injects the styles by itself
|
|
123
|
+
// return (
|
|
124
|
+
// <>
|
|
125
|
+
// {breakpoints}
|
|
126
|
+
// {fonts}
|
|
127
|
+
// </>
|
|
128
|
+
// )
|
|
129
|
+
// }
|
|
130
|
+
return (_jsxs(_Fragment, { children: [breakpoints, fonts, _jsx("style", { dangerouslySetInnerHTML: {
|
|
117
131
|
__html: combinedCSSRules.join('\n'),
|
|
118
|
-
}, suppressHydrationWarning: true, hidden: true }
|
|
132
|
+
}, suppressHydrationWarning: true, hidden: true }, 'combinedCSSRules')] }));
|
|
119
133
|
}
|
|
120
134
|
export function WithFramerBreakpoints({ Component, variants: breakpointsMap = defaultMap, ...rest }) {
|
|
121
135
|
const controls = Component['propertyControls'];
|
|
122
136
|
const variantControls = controls?.['variant'];
|
|
123
137
|
if (!variantControls) {
|
|
124
|
-
// @ts-expect-error
|
|
125
138
|
return _jsx(Component, { variant: undefined, ...rest });
|
|
126
139
|
}
|
|
127
140
|
const options = variantControls?.optionTitles;
|
|
141
|
+
// 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
|
|
142
|
+
const start = useInstantLayoutTransition();
|
|
128
143
|
const currentBreakpoint = useSyncExternalStore(onResize, () => {
|
|
129
144
|
// console.log('window.innerWidth', window.innerWidth)
|
|
130
145
|
const breakpoint = getBreakpointNameFromWindowWidth(window.innerWidth);
|
|
131
146
|
return breakpoint;
|
|
132
147
|
}, () => {
|
|
133
|
-
// on server
|
|
148
|
+
// on server and during hydration
|
|
149
|
+
start();
|
|
134
150
|
return '';
|
|
135
151
|
});
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
152
|
+
const parts = useMemo(() => {
|
|
153
|
+
return defaultBreakpoints.map((breakpointName) => {
|
|
154
|
+
if (currentBreakpoint && currentBreakpoint !== breakpointName) {
|
|
155
|
+
return null;
|
|
156
|
+
}
|
|
157
|
+
let realVariant = breakpointsMap[breakpointName];
|
|
158
|
+
if (!realVariant) {
|
|
159
|
+
// console.error(breakpointName, 'not found in', breakpointsMap)
|
|
160
|
+
return null;
|
|
161
|
+
}
|
|
162
|
+
let mapped = defaultBreakpoints.filter((x) => breakpointsMap[x]);
|
|
163
|
+
let map = getClassMap(mapped)[breakpointName];
|
|
164
|
+
let className = classNames('', map);
|
|
165
|
+
return (_jsx("div", { className: className, children: _jsx(Component, { ...rest, variant: realVariant }, breakpointName) }, breakpointName));
|
|
166
|
+
});
|
|
167
|
+
}, [currentBreakpoint]);
|
|
151
168
|
return parts;
|
|
152
169
|
}
|
|
153
170
|
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":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unframer",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
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,17 +198,17 @@ 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
|
|
|
183
209
|
const options = variantControls?.optionTitles
|
|
184
|
-
|
|
210
|
+
// 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
|
|
211
|
+
const start = useInstantLayoutTransition()
|
|
185
212
|
const currentBreakpoint = useSyncExternalStore(
|
|
186
213
|
onResize,
|
|
187
214
|
() => {
|
|
@@ -192,33 +219,39 @@ export function WithFramerBreakpoints<
|
|
|
192
219
|
return breakpoint
|
|
193
220
|
},
|
|
194
221
|
() => {
|
|
195
|
-
// on server
|
|
222
|
+
// on server and during hydration
|
|
223
|
+
start()
|
|
196
224
|
return ''
|
|
197
225
|
},
|
|
198
226
|
)
|
|
199
|
-
// console.log('currentBreakpoint', currentBreakpoint)
|
|
200
227
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
{
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
228
|
+
const parts = useMemo(() => {
|
|
229
|
+
return defaultBreakpoints.map((breakpointName) => {
|
|
230
|
+
if (currentBreakpoint && currentBreakpoint !== breakpointName) {
|
|
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
|
}
|