unframer 2.7.11 → 2.9.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/dist/cli.d.ts +10 -0
- package/dist/cli.d.ts.map +1 -1
- package/dist/cli.js +10 -4
- package/dist/cli.js.map +1 -1
- package/dist/cli.test.js +8 -0
- package/dist/cli.test.js.map +1 -1
- package/dist/exporter.d.ts +5 -1
- package/dist/exporter.d.ts.map +1 -1
- package/dist/exporter.js +75 -14
- package/dist/exporter.js.map +1 -1
- package/dist/framer.d.ts.map +1 -1
- package/dist/framer.js +116 -92
- package/dist/framer.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/react.d.ts +10 -0
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +7 -0
- package/dist/react.js.map +1 -1
- package/dist/utils.d.ts +1 -0
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +9 -0
- package/dist/utils.js.map +1 -1
- package/esm/cli.d.ts +10 -0
- package/esm/cli.d.ts.map +1 -1
- package/esm/cli.js +11 -5
- package/esm/cli.js.map +1 -1
- package/esm/cli.test.js +9 -1
- package/esm/cli.test.js.map +1 -1
- package/esm/exporter.d.ts +5 -1
- package/esm/exporter.d.ts.map +1 -1
- package/esm/exporter.js +75 -14
- package/esm/exporter.js.map +1 -1
- package/esm/framer.d.ts.map +1 -1
- package/esm/framer.js +113 -92
- package/esm/framer.js.map +1 -1
- package/esm/index.d.ts +1 -1
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +1 -1
- package/esm/index.js.map +1 -1
- package/esm/react.d.ts +10 -0
- package/esm/react.d.ts.map +1 -1
- package/esm/react.js +14 -0
- package/esm/react.js.map +1 -1
- package/esm/utils.d.ts +1 -0
- package/esm/utils.d.ts.map +1 -1
- package/esm/utils.js +8 -0
- package/esm/utils.js.map +1 -1
- package/package.json +7 -4
- package/src/cli.test.ts +20 -3
- package/src/cli.tsx +25 -5
- package/src/exporter.ts +94 -18
- package/src/framer.js +122 -93
- package/src/index.ts +1 -1
- package/src/react.tsx +46 -1
- package/src/utils.ts +9 -0
package/esm/index.d.ts
CHANGED
package/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAE3B,OAAO,EACH,YAAY,EACZ,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,GACnB,MAAM,YAAY,CAAA"}
|
package/esm/index.js
CHANGED
package/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAE3B,OAAO,EACH,YAAY,EAEZ,qBAAqB,EACrB,gBAAgB,GACnB,MAAM,YAAY,CAAA"}
|
package/esm/react.d.ts
CHANGED
|
@@ -17,4 +17,14 @@ export declare const WithFramerBreakpoints: import("react").ForwardRefExoticComp
|
|
|
17
17
|
variant?: any;
|
|
18
18
|
className?: string;
|
|
19
19
|
}, "variant"> & import("react").RefAttributes<unknown>>;
|
|
20
|
+
export declare function ContextProviders({ locale, children, framerSiteId, routes, routeId, pathVariables, collectionUtils, locales, }: {
|
|
21
|
+
locale: any;
|
|
22
|
+
children: any;
|
|
23
|
+
framerSiteId: any;
|
|
24
|
+
routes: any;
|
|
25
|
+
routeId: any;
|
|
26
|
+
pathVariables: any;
|
|
27
|
+
collectionUtils: any;
|
|
28
|
+
locales: any;
|
|
29
|
+
}): import("react/jsx-runtime.js").JSX.Element;
|
|
20
30
|
//# sourceMappingURL=react.d.ts.map
|
package/esm/react.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,aAAa,EAKhB,MAAM,OAAO,CAAA;AACd,OAAO,EAEH,sBAAsB,EAEzB,MAAM,UAAU,CAAA;AAWjB,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,sBAAsB,CAAA;AA8BpE;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,UAAwB,EAAE;;CAAA,GAAG,GAAG,CAmD9D;AAED,eAAO,MAAM,qBAAqB;;kBACM,GAAG;oBAAc,MAAM;;;;cAAvB,GAAG;gBAAc,MAAM;uDA2E7D,CAAA"}
|
|
1
|
+
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,aAAa,EAKhB,MAAM,OAAO,CAAA;AACd,OAAO,EAEH,sBAAsB,EAEzB,MAAM,UAAU,CAAA;AAWjB,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,sBAAsB,CAAA;AA8BpE;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,UAAwB,EAAE;;CAAA,GAAG,GAAG,CAmD9D;AAED,eAAO,MAAM,qBAAqB;;kBACM,GAAG;oBAAc,MAAM;;;;cAAvB,GAAG;gBAAc,MAAM;uDA2E7D,CAAA;AAkBF,wBAAgB,gBAAgB,CAAC,EAC7B,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,OAAO,EACP,aAAa,EACb,eAAe,EACf,OAAO,GACV;;;;;;;;;CAAA,8CAuBA"}
|
package/esm/react.js
CHANGED
|
@@ -100,4 +100,18 @@ const onResize = (callback) => {
|
|
|
100
100
|
window.addEventListener('resize', callback);
|
|
101
101
|
return () => window.removeEventListener('resize', callback);
|
|
102
102
|
};
|
|
103
|
+
import {
|
|
104
|
+
// @ts-ignore
|
|
105
|
+
CustomCursorHost,
|
|
106
|
+
// @ts-ignore
|
|
107
|
+
FetchClientProvider,
|
|
108
|
+
// @ts-ignore
|
|
109
|
+
FormContext,
|
|
110
|
+
// @ts-ignore
|
|
111
|
+
Router, } from './framer.js';
|
|
112
|
+
export function ContextProviders({ locale, children, framerSiteId, routes, routeId, pathVariables, collectionUtils, locales, }) {
|
|
113
|
+
var _a;
|
|
114
|
+
const localeId = (_a = locales === null || locales === void 0 ? void 0 : locales.find((l) => l.slug === locale || l.code === locale || l.id === locale)) === null || _a === void 0 ? void 0 : _a.id;
|
|
115
|
+
return (_jsx(FetchClientProvider, { children: _jsx(CustomCursorHost, { children: _jsx(FormContext.Provider, { value: framerSiteId, children: _jsx(Router, { initialRoute: routeId, initialPathVariables: pathVariables, initialLocaleId: localeId, enableImproveInpDuringHydration: true, routes: routes, collectionUtils: collectionUtils, locales: locales, children: children }) }) }) }));
|
|
116
|
+
}
|
|
103
117
|
//# sourceMappingURL=react.js.map
|
package/esm/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,
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}
|
package/esm/utils.d.ts
CHANGED
package/esm/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,OAAO,EAAqD,GAAG,CAAA;AAI5E,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,4BAEhD;AAKD,eAAO,MAAM,MAAM;;;;CAalB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,UAM/C"}
|
package/esm/utils.js
CHANGED
|
@@ -2,6 +2,7 @@ import pico from 'picocolors';
|
|
|
2
2
|
import { marked } from 'marked';
|
|
3
3
|
import { markedTerminal } from 'marked-terminal';
|
|
4
4
|
import { createSpinner } from 'nanospinner';
|
|
5
|
+
import kebabCase from 'just-kebab-case';
|
|
5
6
|
export const spinner = createSpinner('Downloading Framer Components');
|
|
6
7
|
marked.use(markedTerminal());
|
|
7
8
|
export function terminalMarkdown(markdown) {
|
|
@@ -23,4 +24,11 @@ export const logger = {
|
|
|
23
24
|
console.error([prefix, ...args].map((x) => pico.red(x)).join(' '));
|
|
24
25
|
},
|
|
25
26
|
};
|
|
27
|
+
export function componentNameToPath(name) {
|
|
28
|
+
return name
|
|
29
|
+
.split('/')
|
|
30
|
+
.filter(Boolean)
|
|
31
|
+
.map((part) => kebabCase(part))
|
|
32
|
+
.join('/');
|
|
33
|
+
}
|
|
26
34
|
//# sourceMappingURL=utils.js.map
|
package/esm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,YAAY,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,YAAY,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC3C,OAAO,SAAS,MAAM,iBAAiB,CAAA;AAEvC,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,+BAA+B,CAAQ,CAAA;AAE5E,MAAM,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC,CAAA;AAE5B,MAAM,UAAU,gBAAgB,CAAC,QAAgB;IAC7C,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAA;AAC3B,CAAC;AAED,MAAM,mBAAmB,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAA;AAExD,MAAM,MAAM,GAAG,YAAY,CAAA;AAC3B,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,GAAG,CAAC,GAAG,IAAI;QACP,IAAI,CAAC,mBAAmB,EAAE,CAAC;YACvB,OAAM;QACV,CAAC;QACD,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAA;IAChC,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;IACD,KAAK,CAAC,GAAG,IAAI;QACT,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IACtE,CAAC;CACJ,CAAA;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAY;IAC5C,OAAO,IAAI;SACN,KAAK,CAAC,GAAG,CAAC;SACV,MAAM,CAAC,OAAO,CAAC;SACf,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;SAC9B,IAAI,CAAC,GAAG,CAAC,CAAA;AAClB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unframer",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.9.0",
|
|
4
4
|
"description": "Import Framer components directly in your React app, type safe and customizable",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"repository": "https://github.com/remorses/unframer",
|
|
@@ -38,6 +38,9 @@
|
|
|
38
38
|
"react": "*",
|
|
39
39
|
"react-dom": "*"
|
|
40
40
|
},
|
|
41
|
+
"engines": {
|
|
42
|
+
"node": ">=20.0.0"
|
|
43
|
+
},
|
|
41
44
|
"dependencies": {
|
|
42
45
|
"async-sema": "^3.1.1",
|
|
43
46
|
"cac": "^6.7.14",
|
|
@@ -69,7 +72,7 @@
|
|
|
69
72
|
"@types/babel__traverse": "^7.20.6",
|
|
70
73
|
"@types/bun": "^1.1.6",
|
|
71
74
|
"@types/fs-extra": "^11.0.4",
|
|
72
|
-
"@types/node": "^22.
|
|
75
|
+
"@types/node": "^22.10.2",
|
|
73
76
|
"@types/react": "^18.3.12",
|
|
74
77
|
"@xmorse/deployment-utils": "^0.2.19",
|
|
75
78
|
"concurrently": "^8.2.2",
|
|
@@ -81,9 +84,9 @@
|
|
|
81
84
|
"typescript": "^5.6.2"
|
|
82
85
|
},
|
|
83
86
|
"scripts": {
|
|
84
|
-
"build": "rm -rf dist && concurrently 'pnpm tsc -m esnext --outDir esm' 'pnpm tsc' && echo copying && cp ../README.md ./README.md && cp ./src/framer.d.ts ./dist/framer.d.ts && cp ./src/framer.d.ts ./esm/framer.d.ts",
|
|
87
|
+
"build": "rm -rf dist && pnpm concurrently 'pnpm tsc -m esnext --outDir esm' 'pnpm tsc' && echo copying && cp ../README.md ./README.md && cp ./src/framer.d.ts ./dist/framer.d.ts && cp ./src/framer.d.ts ./esm/framer.d.ts",
|
|
85
88
|
"test": "vitest",
|
|
86
89
|
"download-framer": "tsx scripts/download.ts",
|
|
87
|
-
"watch": "rm -rf dist esm && concurrently 'pnpm tsc -w' 'pnpm tsc -m esnext -w --outDir esm'"
|
|
90
|
+
"watch": "rm -rf dist esm && pnpm concurrently 'pnpm tsc -w' 'pnpm tsc -m esnext -w --outDir esm'"
|
|
88
91
|
}
|
|
89
92
|
}
|
package/src/cli.test.ts
CHANGED
|
@@ -1,10 +1,24 @@
|
|
|
1
1
|
import { expect, test } from 'vitest'
|
|
2
2
|
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
componentCamelCase,
|
|
4
|
+
extractTokenInfo,
|
|
5
|
+
findRelativeLinks,
|
|
6
6
|
} from './exporter.js'
|
|
7
7
|
|
|
8
|
+
import { componentNameToPath } from './utils.js'
|
|
9
|
+
|
|
10
|
+
test('componentNameToPath', () => {
|
|
11
|
+
expect(componentNameToPath('LogoTicker')).toMatchInlineSnapshot(
|
|
12
|
+
`"logo-ticker"`,
|
|
13
|
+
)
|
|
14
|
+
expect(componentNameToPath('NavBar')).toMatchInlineSnapshot(`"nav-bar"`)
|
|
15
|
+
expect(componentNameToPath('components/HeroSection')).toMatchInlineSnapshot(
|
|
16
|
+
`"components/hero-section"`,
|
|
17
|
+
)
|
|
18
|
+
expect(componentNameToPath('shared/nav/framerNav')).toMatchInlineSnapshot(
|
|
19
|
+
`"shared/nav/framer-nav"`,
|
|
20
|
+
)
|
|
21
|
+
})
|
|
8
22
|
test('componentCamelCase', () => {
|
|
9
23
|
expect(componentCamelCase('logo-ticker')).toMatchInlineSnapshot(
|
|
10
24
|
`"LogoTickerFramerComponent"`,
|
|
@@ -21,6 +35,9 @@ test('componentCamelCase', () => {
|
|
|
21
35
|
expect(componentCamelCase('framer_nav')).toMatchInlineSnapshot(
|
|
22
36
|
`"FramerNavFramerComponent"`,
|
|
23
37
|
)
|
|
38
|
+
expect(componentCamelCase('shared/nav/framer-nav')).toMatchInlineSnapshot(
|
|
39
|
+
`"FramerNavFramerComponent"`,
|
|
40
|
+
)
|
|
24
41
|
})
|
|
25
42
|
test('findRelativeLinks', () => {
|
|
26
43
|
expect(
|
package/src/cli.tsx
CHANGED
|
@@ -7,7 +7,7 @@ import findUp from 'find-up'
|
|
|
7
7
|
import fs from 'fs-extra'
|
|
8
8
|
import path, { basename } from 'path'
|
|
9
9
|
import { BreakpointSizes } from './css.js'
|
|
10
|
-
import { logger, spinner } from './utils.js'
|
|
10
|
+
import { componentNameToPath, logger, spinner } from './utils.js'
|
|
11
11
|
const configNames = ['unframer.config.json', 'unframer.json']
|
|
12
12
|
import kebabCase from 'just-kebab-case'
|
|
13
13
|
|
|
@@ -34,7 +34,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
|
|
|
34
34
|
}
|
|
35
35
|
const data = await response.json()
|
|
36
36
|
logger.log('unframer data', data)
|
|
37
|
-
const projectName = data?.project?.projectName ||''
|
|
37
|
+
const projectName = data?.project?.projectName || ''
|
|
38
38
|
if (projectName) {
|
|
39
39
|
spinner.info(`Using project: ${projectName}`)
|
|
40
40
|
}
|
|
@@ -42,8 +42,15 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
|
|
|
42
42
|
return await bundle({
|
|
43
43
|
config: {
|
|
44
44
|
outDir,
|
|
45
|
+
projectId: data?.project?.id,
|
|
46
|
+
projectName,
|
|
47
|
+
fullFramerProjectId: data?.project?.fullFramerProjectId,
|
|
48
|
+
locales: data?.locales,
|
|
45
49
|
components: Object.fromEntries(
|
|
46
|
-
data.components.map((c) => [
|
|
50
|
+
data.components.map((c) => [
|
|
51
|
+
componentNameToPath(c.name),
|
|
52
|
+
c.url,
|
|
53
|
+
]),
|
|
47
54
|
),
|
|
48
55
|
tokens: data.colorStyles,
|
|
49
56
|
framerWebPages: data.framerWebPages || [],
|
|
@@ -80,7 +87,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
|
|
|
80
87
|
config,
|
|
81
88
|
watch: false,
|
|
82
89
|
signal: controller.signal,
|
|
83
|
-
cwd: path.resolve(process.cwd(), outDir || 'framer'),
|
|
90
|
+
cwd: path.resolve(process.cwd(), config.outDir || 'framer'),
|
|
84
91
|
})
|
|
85
92
|
})
|
|
86
93
|
|
|
@@ -155,7 +162,20 @@ export type Config = {
|
|
|
155
162
|
components: {
|
|
156
163
|
[name: string]: string
|
|
157
164
|
}
|
|
158
|
-
|
|
165
|
+
projectId?: string
|
|
166
|
+
fullFramerProjectId?: string
|
|
167
|
+
projectName?: string
|
|
168
|
+
framerWebPages?: {
|
|
169
|
+
webPageId: string
|
|
170
|
+
components?: string[]
|
|
171
|
+
path: string
|
|
172
|
+
}[]
|
|
173
|
+
locales?: {
|
|
174
|
+
code: string
|
|
175
|
+
id: string
|
|
176
|
+
name: string
|
|
177
|
+
slug: string
|
|
178
|
+
}[]
|
|
159
179
|
breakpoints?: BreakpointSizes
|
|
160
180
|
tokens?: StyleToken[]
|
|
161
181
|
outDir?: string
|
package/src/exporter.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { BuildResult, context } from 'esbuild'
|
|
2
|
+
|
|
2
3
|
import {
|
|
3
4
|
babelPluginDeduplicateImports,
|
|
4
5
|
babelPluginJsxTransform,
|
|
@@ -123,16 +124,60 @@ export async function bundle({
|
|
|
123
124
|
const url = components[name]
|
|
124
125
|
|
|
125
126
|
return {
|
|
126
|
-
contents: /** js
|
|
127
|
+
contents: /** js **/ `
|
|
128
|
+
'use client'
|
|
129
|
+
import { Fragment } from 'react'
|
|
130
|
+
import { ContextProviders } from 'unframer'
|
|
127
131
|
import Component from '${await resolveRedirect({
|
|
128
132
|
url,
|
|
129
133
|
signal,
|
|
130
134
|
})}'
|
|
131
135
|
import { WithFramerBreakpoints } from 'unframer'
|
|
132
|
-
|
|
133
|
-
|
|
136
|
+
|
|
137
|
+
function WithRoot({ children, locale }) {
|
|
138
|
+
return (
|
|
139
|
+
<ContextProviders
|
|
140
|
+
routeId="x"
|
|
141
|
+
routes={{
|
|
142
|
+
x: {
|
|
143
|
+
elements: {},
|
|
144
|
+
page: children,
|
|
145
|
+
path: '/',
|
|
146
|
+
},
|
|
147
|
+
}}
|
|
148
|
+
framerSiteId={${JSON.stringify(
|
|
149
|
+
config.fullFramerProjectId,
|
|
150
|
+
)}}
|
|
151
|
+
locale={locale}
|
|
152
|
+
locales={locales}
|
|
153
|
+
children={children}
|
|
154
|
+
/>
|
|
155
|
+
)
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
const locales = ${
|
|
159
|
+
JSON.stringify(config.locales) || '[]'
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
Component.Responsive = ({ locale, ...props }) => {
|
|
163
|
+
return (
|
|
164
|
+
<WithRoot locale={locale}>
|
|
165
|
+
<WithFramerBreakpoints
|
|
166
|
+
Component={Component}
|
|
167
|
+
{...props}
|
|
168
|
+
/>
|
|
169
|
+
</WithRoot>
|
|
170
|
+
)
|
|
134
171
|
}
|
|
135
|
-
|
|
172
|
+
|
|
173
|
+
export default function ComponentWithRoot({ locale, ...rest }) {
|
|
174
|
+
return (
|
|
175
|
+
<WithRoot locale={locale}>
|
|
176
|
+
<Component {...rest} />
|
|
177
|
+
</WithRoot>
|
|
178
|
+
)
|
|
179
|
+
}
|
|
180
|
+
Object.assign(ComponentWithRoot, Component)
|
|
136
181
|
`,
|
|
137
182
|
loader: 'jsx',
|
|
138
183
|
}
|
|
@@ -147,9 +192,11 @@ export async function bundle({
|
|
|
147
192
|
outdir: out,
|
|
148
193
|
// outfile: path.resolve(cwd, sourcefile),
|
|
149
194
|
})
|
|
150
|
-
|
|
195
|
+
const doNotEditComment = `/* This file was generated by Unframer for Framer project ${
|
|
196
|
+
config.projectId || ''
|
|
197
|
+
} "${config.projectName}", do not edit manually */\n`
|
|
151
198
|
async function rebuild() {
|
|
152
|
-
const prevFiles =
|
|
199
|
+
const prevFiles = recursiveReaddir(out)
|
|
153
200
|
const result = await buildContext.rebuild()
|
|
154
201
|
|
|
155
202
|
for (let file of result.outputFiles!) {
|
|
@@ -176,7 +223,7 @@ export async function bundle({
|
|
|
176
223
|
let codeNew =
|
|
177
224
|
`// @ts-nocheck\n` +
|
|
178
225
|
`/* eslint-disable */\n` +
|
|
179
|
-
|
|
226
|
+
doNotEditComment +
|
|
180
227
|
dprint.format('file.jsx', inputCode, {
|
|
181
228
|
lineWidth: 140,
|
|
182
229
|
quoteStyle: 'alwaysSingle',
|
|
@@ -203,6 +250,7 @@ export async function bundle({
|
|
|
203
250
|
continue
|
|
204
251
|
}
|
|
205
252
|
logger.log(`writing`, path.relative(out, file.path))
|
|
253
|
+
fs.mkdirSync(path.dirname(resultPathAbs), { recursive: true })
|
|
206
254
|
fs.writeFileSync(resultPathAbs, codeNew, 'utf-8')
|
|
207
255
|
}
|
|
208
256
|
spinner.stop()
|
|
@@ -225,7 +273,9 @@ export async function bundle({
|
|
|
225
273
|
result?.outputFiles.map(async (file) => {
|
|
226
274
|
try {
|
|
227
275
|
await sema.acquire()
|
|
228
|
-
const name = path
|
|
276
|
+
const name = path
|
|
277
|
+
.relative(out, file.path)
|
|
278
|
+
.replace(/\.js$/, '')
|
|
229
279
|
const resultPathAbs = path.resolve(out, file.path)
|
|
230
280
|
if (!components[name]) {
|
|
231
281
|
return
|
|
@@ -244,10 +294,14 @@ export async function bundle({
|
|
|
244
294
|
fileName: path.basename(file.path),
|
|
245
295
|
})),
|
|
246
296
|
)
|
|
247
|
-
const types = propControlsToType(
|
|
297
|
+
const types = propControlsToType({
|
|
298
|
+
controls: propertyControls!,
|
|
299
|
+
fileName: name,
|
|
300
|
+
config,
|
|
301
|
+
})
|
|
248
302
|
// name = 'framer-' + name
|
|
249
303
|
// logger.log('name', name)
|
|
250
|
-
|
|
304
|
+
fs.mkdirSync(out, { recursive: true })
|
|
251
305
|
fs.writeFileSync(path.resolve(out, `${name}.d.ts`), types)
|
|
252
306
|
return {
|
|
253
307
|
propertyControls,
|
|
@@ -263,7 +317,7 @@ export async function bundle({
|
|
|
263
317
|
spinner.stop()
|
|
264
318
|
|
|
265
319
|
const cssString =
|
|
266
|
-
|
|
320
|
+
doNotEditComment +
|
|
267
321
|
'/* This css file has all the necessary styles to run all your components */\n' +
|
|
268
322
|
'\n' +
|
|
269
323
|
resetCssStyles +
|
|
@@ -522,7 +576,7 @@ export function getDarkModeSelector(opts: {
|
|
|
522
576
|
'}'
|
|
523
577
|
)
|
|
524
578
|
}
|
|
525
|
-
return '.dark
|
|
579
|
+
return '.dark {\n' + content + '\n' + '}'
|
|
526
580
|
}
|
|
527
581
|
|
|
528
582
|
export function getStyleTokensCss(
|
|
@@ -790,7 +844,15 @@ function safeJsonParse(text) {
|
|
|
790
844
|
}
|
|
791
845
|
}
|
|
792
846
|
|
|
793
|
-
export function propControlsToType(
|
|
847
|
+
export function propControlsToType({
|
|
848
|
+
config,
|
|
849
|
+
fileName,
|
|
850
|
+
controls,
|
|
851
|
+
}: {
|
|
852
|
+
controls: PropertyControls
|
|
853
|
+
fileName
|
|
854
|
+
config
|
|
855
|
+
}) {
|
|
794
856
|
try {
|
|
795
857
|
const types = Object.entries(controls || ({} as PropertyControls))
|
|
796
858
|
.map(([key, value]) => {
|
|
@@ -859,6 +921,7 @@ export function propControlsToType(controls: PropertyControls, fileName) {
|
|
|
859
921
|
const defaultPropsTypes =
|
|
860
922
|
[
|
|
861
923
|
'children?: React.ReactNode',
|
|
924
|
+
'locale?: Locale',
|
|
862
925
|
'style?: React.CSSProperties',
|
|
863
926
|
'className?: string',
|
|
864
927
|
'id?: string',
|
|
@@ -870,8 +933,14 @@ export function propControlsToType(controls: PropertyControls, fileName) {
|
|
|
870
933
|
.join('\n') + '\n'
|
|
871
934
|
let t = ''
|
|
872
935
|
t += '/* This file was generated by Unframer, do not edit manually */\n'
|
|
936
|
+
|
|
873
937
|
t += 'import * as React from "react"\n\n'
|
|
874
938
|
t += 'import { UnframerBreakpoint } from "unframer"\n\n'
|
|
939
|
+
t += `type Locale = ${
|
|
940
|
+
config.locales?.length
|
|
941
|
+
? config.locales.map((l) => `'${l.code}'`).join(' | ')
|
|
942
|
+
: 'string'
|
|
943
|
+
}\n`
|
|
875
944
|
t += `export interface Props {\n${defaultPropsTypes}${types}\n}\n\n`
|
|
876
945
|
t += `const ${componentName} = (props: Props) => any\n\n`
|
|
877
946
|
t += `type VariantsMap = Partial<Record<UnframerBreakpoint, Props['variant']>> & { base: Props['variant'] }\n\n`
|
|
@@ -1004,6 +1073,8 @@ export function componentCamelCase(str: string) {
|
|
|
1004
1073
|
if (!str) {
|
|
1005
1074
|
return 'FramerComponent'
|
|
1006
1075
|
}
|
|
1076
|
+
// Take last part after slashes
|
|
1077
|
+
str = str.split('/').filter(Boolean).pop() || ''
|
|
1007
1078
|
str = str.replace(/-([\w])/g, (g) => g[1].toUpperCase())
|
|
1008
1079
|
str = str.replace(/_([a-z])/g, (g) => g[1].toUpperCase())
|
|
1009
1080
|
str = str[0].toUpperCase() + str.slice(1)
|
|
@@ -1068,9 +1139,7 @@ export function propCamelCase(str: string) {
|
|
|
1068
1139
|
return str
|
|
1069
1140
|
}
|
|
1070
1141
|
|
|
1071
|
-
|
|
1072
1142
|
const resetCssStyles = `
|
|
1073
|
-
|
|
1074
1143
|
:root {
|
|
1075
1144
|
-webkit-font-smoothing: antialiased;
|
|
1076
1145
|
-moz-osx-font-smoothing: grayscale;
|
|
@@ -1082,7 +1151,14 @@ const resetCssStyles = `
|
|
|
1082
1151
|
h1, h2, h3, h4, h5, h6, p, figure {
|
|
1083
1152
|
margin: 0;
|
|
1084
1153
|
}
|
|
1085
|
-
/ * body, input, textarea, select, button { font-size: 12px; font-family: sans-serif; } */
|
|
1086
|
-
|
|
1087
1154
|
|
|
1088
|
-
`
|
|
1155
|
+
`
|
|
1156
|
+
|
|
1157
|
+
function recursiveReaddir(dir: string) {
|
|
1158
|
+
const dirents = fs.readdirSync(dir, { withFileTypes: true })
|
|
1159
|
+
const files = dirents.map((dirent) => {
|
|
1160
|
+
const res = path.resolve(dir, dirent.name)
|
|
1161
|
+
return dirent.isDirectory() ? recursiveReaddir(res) : res
|
|
1162
|
+
})
|
|
1163
|
+
return files.flat()
|
|
1164
|
+
}
|