unframer 2.6.6 → 2.7.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/README.md +9 -46
- package/dist/cli.d.ts.map +1 -1
- package/dist/cli.js +49 -44
- package/dist/cli.js.map +1 -1
- package/dist/css.js +1 -1
- package/dist/css.js.map +1 -1
- package/dist/exporter.d.ts +16 -4
- package/dist/exporter.d.ts.map +1 -1
- package/dist/exporter.js +144 -47
- package/dist/exporter.js.map +1 -1
- package/dist/framer.d.ts.map +1 -1
- package/dist/framer.js +55 -19
- package/dist/framer.js.map +1 -1
- package/dist/utils.d.ts +1 -0
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +7 -0
- package/dist/utils.js.map +1 -1
- package/esm/cli.d.ts.map +1 -1
- package/esm/cli.js +49 -44
- package/esm/cli.js.map +1 -1
- package/esm/css.js +1 -1
- package/esm/css.js.map +1 -1
- package/esm/exporter.d.ts +16 -4
- package/esm/exporter.d.ts.map +1 -1
- package/esm/exporter.js +143 -48
- package/esm/exporter.js.map +1 -1
- package/esm/framer.d.ts.map +1 -1
- package/esm/framer.js +55 -19
- package/esm/framer.js.map +1 -1
- package/esm/utils.d.ts +1 -0
- package/esm/utils.d.ts.map +1 -1
- package/esm/utils.js +6 -0
- package/esm/utils.js.map +1 -1
- package/package.json +7 -5
- package/src/cli.tsx +63 -57
- package/src/css.ts +1 -1
- package/src/exporter.ts +179 -55
- package/src/framer.js +72 -19
- package/src/utils.ts +9 -0
package/README.md
CHANGED
|
@@ -20,31 +20,11 @@ Download framer components as simple files
|
|
|
20
20
|
npm install unframer
|
|
21
21
|
```
|
|
22
22
|
|
|
23
|
-
1.
|
|
23
|
+
1. Install the `React Export` Framer plugin, open it and select which components you want to export.
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
npm install framer-motion@npm:unframer
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
1. Create an `unframer.config.json` file like the following (the key will be used for the component folder inside `outDir`)
|
|
30
|
-
|
|
31
|
-
```json
|
|
32
|
-
{
|
|
33
|
-
"$schema": "https://unframer-schema.vercel.app/schema.json",
|
|
34
|
-
"outDir": "./framer",
|
|
35
|
-
"components": {
|
|
36
|
-
"logos": "https://framer.com/m/Logo-Ticker-1CEq.js@YtVlixDzOkypVBs3Dpav",
|
|
37
|
-
"menus": "https://framer.com/m/Mega-Menu-2wT3.js@W0zNsrcZ2WAwVuzt0BCl"
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
```
|
|
25
|
+
1. Run the command `npx unframer {projectId} --outDir ./src/framer` to download the components and their types in the `outDir` directory, the command will be shown in the Framer plugin too. Run this command each time you update your Framer project and want to update the components.
|
|
41
26
|
|
|
42
|
-
1.
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
1. Run the command `npx unframer` to download the components and their types in the `outDir` directory
|
|
47
|
-
1. Import the component inside your `jsx` files, for example
|
|
27
|
+
1. Import the component inside your `jsx` files together with the `styles.css` file, for example
|
|
48
28
|
|
|
49
29
|
```tsx
|
|
50
30
|
import './framer/styles.css' // load base Framer styles
|
|
@@ -133,19 +113,6 @@ export default function App() {
|
|
|
133
113
|
}
|
|
134
114
|
```
|
|
135
115
|
|
|
136
|
-
## Custom breakpoints for responsive variants
|
|
137
|
-
|
|
138
|
-
You can change the breakpoints by passing an object in your `unframer.config.json` config
|
|
139
|
-
|
|
140
|
-
```json
|
|
141
|
-
{
|
|
142
|
-
"$schema": "https://unframer-schema.vercel.app/schema.json",
|
|
143
|
-
"outDir": "./src/framer",
|
|
144
|
-
"breakpoints": { "sm": 300, "md": 760 },
|
|
145
|
-
"components": {}
|
|
146
|
-
}
|
|
147
|
-
```
|
|
148
|
-
|
|
149
116
|
## Supported component props
|
|
150
117
|
|
|
151
118
|
`unframer` will add TypeScript definitions for your Framer components props and variables, some example variables you can use are:
|
|
@@ -161,20 +128,16 @@ You can change the breakpoints by passing an object in your `unframer.config.jso
|
|
|
161
128
|
|
|
162
129
|
## Known limitations:
|
|
163
130
|
|
|
164
|
-
-
|
|
165
|
-
|
|
166
|
-
```css
|
|
167
|
-
:root {
|
|
168
|
-
--token-64603892-5c8b-477a-82d6-e795e75dd5dc: #0b5c96;
|
|
169
|
-
}
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
- Links to Framer pages won't work, this is because links to Framer pages are encoded with opaque ids. Instead you should
|
|
131
|
+
- Links to Framer internal pages won't work for now, this is because links to Framer pages are encoded with opaque ids. Instead you should
|
|
173
132
|
|
|
174
133
|
1. use link variables
|
|
175
134
|
1. absolute links (starting with https://, not links to other Framer pages).
|
|
176
135
|
|
|
177
|
-
- Internationalization is not supported
|
|
136
|
+
- Internationalization is not supported now
|
|
137
|
+
|
|
138
|
+
- You may face React warnings like:
|
|
139
|
+
- `Accessing element.ref was removed in React 19.` This warning appears because Framer still uses the old `element.ref` API which was removed in React 19. This warning is harmless and will be fixed when Framer updates their codebase to use the new React 19 APIs.
|
|
140
|
+
- `A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.` This warning sometimes appears when using SWV icons, it should be harmless, it only happens in development mode.
|
|
178
141
|
|
|
179
142
|
## Future Compatibility
|
|
180
143
|
|
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":"AAYA,eAAO,MAAM,GAAG,mBAAkB,CAAA"}
|
package/dist/cli.js
CHANGED
|
@@ -36,74 +36,78 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
36
36
|
};
|
|
37
37
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
38
38
|
exports.cli = void 0;
|
|
39
|
-
const exporter_js_1 = require("./exporter.js");
|
|
40
|
-
const json5_1 = __importDefault(require("json5"));
|
|
41
39
|
const events_1 = require("events");
|
|
42
|
-
const
|
|
43
|
-
const
|
|
40
|
+
const json5_1 = __importDefault(require("json5"));
|
|
41
|
+
const exporter_js_1 = require("./exporter.js");
|
|
42
|
+
const cac_1 = require("cac");
|
|
44
43
|
const find_up_1 = __importDefault(require("find-up"));
|
|
44
|
+
const fs_extra_1 = __importDefault(require("fs-extra"));
|
|
45
45
|
const path_1 = __importStar(require("path"));
|
|
46
|
-
const configNames = ['unframer.config.json', 'unframer.json'];
|
|
47
|
-
const cac_1 = require("cac");
|
|
48
46
|
const utils_js_1 = require("./utils.js");
|
|
47
|
+
const configNames = ['unframer.config.json', 'unframer.json'];
|
|
49
48
|
exports.cli = (0, cac_1.cac)('unframer');
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
let defaultOutDir = 'framer';
|
|
50
|
+
function nameToFolder(name) {
|
|
51
|
+
return name
|
|
52
|
+
.replace(/[^a-zA-Z0-9]/g, '-') // Replace non-alphanumeric with dash
|
|
53
|
+
.replace(/-+/g, '-') // Replace multiple dashes with single dash
|
|
54
|
+
.replace(/^-|-$/g, '') // Remove leading/trailing dashes
|
|
55
|
+
.toLowerCase();
|
|
56
|
+
}
|
|
57
|
+
exports.cli.command('[projectId]', 'Run unframer with optional project ID')
|
|
58
|
+
.option('--outDir <dir>', 'Output directory', { default: defaultOutDir })
|
|
59
|
+
.action(function main(projectId, options) {
|
|
53
60
|
return __awaiter(this, void 0, void 0, function* () {
|
|
61
|
+
const outDir = options.outDir;
|
|
62
|
+
if (projectId) {
|
|
63
|
+
utils_js_1.logger.log(`Fetching config for project ${projectId}`);
|
|
64
|
+
const response = yield fetch(new URL(`/api/plugins/reactExportPlugin/project/${projectId}`, process.env.UNFRAMER_SERVER_URL || 'https://unframer.co').toString());
|
|
65
|
+
if (!response.ok) {
|
|
66
|
+
console.error(`Failed to fetch Framer config`);
|
|
67
|
+
utils_js_1.logger.error('Response: ' + (yield response.text()));
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
const data = yield response.json();
|
|
71
|
+
return processConfig({
|
|
72
|
+
config: {
|
|
73
|
+
outDir,
|
|
74
|
+
components: Object.fromEntries(data.components.map((c) => [
|
|
75
|
+
nameToFolder(c.name),
|
|
76
|
+
c.url,
|
|
77
|
+
])),
|
|
78
|
+
tokens: data.colorStyles,
|
|
79
|
+
},
|
|
80
|
+
watch: false,
|
|
81
|
+
configBasename: 'remote config',
|
|
82
|
+
signal: new AbortController().signal,
|
|
83
|
+
});
|
|
84
|
+
}
|
|
54
85
|
fixOldUnframerPath();
|
|
55
86
|
const cwd = process.cwd();
|
|
56
|
-
const watch = process.argv.includes('--watch');
|
|
57
87
|
utils_js_1.logger.log(`Looking for ${configNames.join(', ')} in ${cwd}`);
|
|
58
88
|
const configPath = yield (0, find_up_1.default)(configNames, { cwd });
|
|
59
89
|
if (!configPath) {
|
|
60
90
|
utils_js_1.logger.log(`No ${configNames.join(', ')} found`);
|
|
61
91
|
return;
|
|
62
92
|
}
|
|
63
|
-
|
|
93
|
+
const configBasename = (0, path_1.basename)(configPath);
|
|
64
94
|
const configContent = fs_extra_1.default.readFileSync(configPath, 'utf8');
|
|
65
95
|
if (!configContent) {
|
|
66
96
|
utils_js_1.logger.log(`No ${configBasename} contents found`);
|
|
67
97
|
return;
|
|
68
98
|
}
|
|
69
|
-
|
|
99
|
+
const config = json5_1.default.parse(configContent);
|
|
100
|
+
if (outDir !== defaultOutDir) {
|
|
101
|
+
config.outDir = outDir;
|
|
102
|
+
}
|
|
70
103
|
let controller = new AbortController();
|
|
71
104
|
(0, events_1.setMaxListeners)(0, controller.signal);
|
|
72
105
|
processConfig({
|
|
73
106
|
config,
|
|
74
|
-
watch,
|
|
107
|
+
watch: false,
|
|
75
108
|
signal: controller.signal,
|
|
76
109
|
configBasename,
|
|
77
110
|
});
|
|
78
|
-
if (!watch) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
const watcher = chokidar_1.default.watch(configPath, {
|
|
82
|
-
persistent: true,
|
|
83
|
-
});
|
|
84
|
-
watcher.on('change', (path) => __awaiter(this, void 0, void 0, function* () {
|
|
85
|
-
utils_js_1.logger.log(`${configBasename} changed`);
|
|
86
|
-
console.log();
|
|
87
|
-
controller.abort();
|
|
88
|
-
controller = new AbortController();
|
|
89
|
-
(0, events_1.setMaxListeners)(0, controller.signal);
|
|
90
|
-
const newConfig = safeJsonParse(fs_extra_1.default.readFileSync(configPath, 'utf8'));
|
|
91
|
-
if (!newConfig) {
|
|
92
|
-
utils_js_1.logger.log(`Invalid ${configBasename} file`);
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
const newNames = getNewNames(config, newConfig);
|
|
96
|
-
if (newNames.length) {
|
|
97
|
-
utils_js_1.logger.log(`New components found: ${newNames.join(', ')}`);
|
|
98
|
-
yield processConfig({
|
|
99
|
-
config: Object.assign(Object.assign({}, newConfig), { components: pluck(newConfig.components, newNames) }),
|
|
100
|
-
watch,
|
|
101
|
-
configBasename,
|
|
102
|
-
// signal: controller.signal,
|
|
103
|
-
});
|
|
104
|
-
}
|
|
105
|
-
config = newConfig;
|
|
106
|
-
}));
|
|
107
111
|
});
|
|
108
112
|
});
|
|
109
113
|
const defaultConfig = `{
|
|
@@ -125,6 +129,8 @@ function fixOldUnframerPath() {
|
|
|
125
129
|
}
|
|
126
130
|
return false;
|
|
127
131
|
}
|
|
132
|
+
const version = require('../package.json').version;
|
|
133
|
+
exports.cli.version(version).help();
|
|
128
134
|
exports.cli.command('init', 'Init the unframer.config.json config').action((options) => __awaiter(void 0, void 0, void 0, function* () {
|
|
129
135
|
let fixed = fixOldUnframerPath();
|
|
130
136
|
if (fixed) {
|
|
@@ -134,8 +140,6 @@ exports.cli.command('init', 'Init the unframer.config.json config').action((opti
|
|
|
134
140
|
const p = path_1.default.resolve(process.cwd(), 'unframer.config.json');
|
|
135
141
|
console.log(`${p} file created`);
|
|
136
142
|
}));
|
|
137
|
-
const version = require('../package.json').version;
|
|
138
|
-
exports.cli.version(version).help();
|
|
139
143
|
function safeJsonParse(json) {
|
|
140
144
|
try {
|
|
141
145
|
return json5_1.default.parse(json);
|
|
@@ -176,6 +180,7 @@ function processConfig(_a) {
|
|
|
176
180
|
breakpoints,
|
|
177
181
|
cwd: installDir,
|
|
178
182
|
watch,
|
|
183
|
+
tokens: config.tokens,
|
|
179
184
|
signal,
|
|
180
185
|
});
|
|
181
186
|
}
|
package/dist/cli.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA
|
|
1
|
+
{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"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"}
|
package/dist/css.js
CHANGED
package/dist/css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"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"}
|
package/dist/exporter.d.ts
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import { PropertyControls } from './framer';
|
|
2
2
|
import { ComponentFontBundle } from './css.js';
|
|
3
|
-
export
|
|
3
|
+
export type StyleToken = {
|
|
4
|
+
id: string;
|
|
5
|
+
name?: string;
|
|
6
|
+
lightColor: string;
|
|
7
|
+
darkColor: string;
|
|
8
|
+
};
|
|
9
|
+
export declare function bundle({ cwd: out, watch, components, tokens, breakpoints, signal, }: {
|
|
4
10
|
cwd?: string | undefined;
|
|
5
11
|
watch?: boolean | undefined;
|
|
6
12
|
components?: Record<string, string> | undefined;
|
|
13
|
+
tokens?: StyleToken[] | undefined;
|
|
7
14
|
breakpoints?: {
|
|
8
15
|
readonly base: 0;
|
|
9
16
|
readonly sm: 320;
|
|
@@ -21,7 +28,12 @@ export declare function bundle({ cwd: out, watch, components, breakpoints, signa
|
|
|
21
28
|
componentName: string;
|
|
22
29
|
propertyControls: PropertyControls<any, any> | undefined;
|
|
23
30
|
}[];
|
|
24
|
-
}>;
|
|
31
|
+
} | undefined>;
|
|
32
|
+
export declare function getDarkModeSelector(opts: {
|
|
33
|
+
darkModeType?: 'class' | 'media';
|
|
34
|
+
content: string;
|
|
35
|
+
}): string;
|
|
36
|
+
export declare function getStyleTokensCss(tokens: StyleToken[], darkModeType?: 'class' | 'media'): string;
|
|
25
37
|
export declare function findRelativeLinks(text: string): number[];
|
|
26
38
|
export declare function extractPropControlsSafe(text: any, name: any): Promise<PropertyControls<any, any> | undefined>;
|
|
27
39
|
export declare function extractPropControlsUnsafe(filename: any, name: any): Promise<{
|
|
@@ -30,12 +42,12 @@ export declare function extractPropControlsUnsafe(filename: any, name: any): Pro
|
|
|
30
42
|
}>;
|
|
31
43
|
export declare function propControlsToType(controls: PropertyControls, fileName: any): string;
|
|
32
44
|
export declare function parsePropertyControls(code: string): string | null;
|
|
33
|
-
type
|
|
45
|
+
type ExtractedTokenInfo = {
|
|
34
46
|
tokenName: string;
|
|
35
47
|
metadata?: Record<string, any>;
|
|
36
48
|
defaultValue: string;
|
|
37
49
|
};
|
|
38
|
-
export declare function extractTokenInfo(code: string):
|
|
50
|
+
export declare function extractTokenInfo(code: string): ExtractedTokenInfo[];
|
|
39
51
|
export declare function componentCamelCase(str: string): string;
|
|
40
52
|
export {};
|
|
41
53
|
//# sourceMappingURL=exporter.d.ts.map
|
package/dist/exporter.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"exporter.d.ts","sourceRoot":"","sources":["../src/exporter.ts"],"names":[],"mappings":"AASA,OAAO,EAIH,gBAAgB,EAEnB,MAAM,UAAU,CAAA;AAKjB,OAAO,EAEH,mBAAmB,EAKtB,MAAM,UAAU,CAAA;AAiBjB,wBAAsB,MAAM,CAAC,EACzB,GAAG,EAAE,GAAQ,EACb,KAAa,EACb,UAAyC,EACzC,WAAmC,EACnC,MAA6C,GAChD
|
|
1
|
+
{"version":3,"file":"exporter.d.ts","sourceRoot":"","sources":["../src/exporter.ts"],"names":[],"mappings":"AASA,OAAO,EAIH,gBAAgB,EAEnB,MAAM,UAAU,CAAA;AAKjB,OAAO,EAEH,mBAAmB,EAKtB,MAAM,UAAU,CAAA;AAiBjB,MAAM,MAAM,UAAU,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAsB,MAAM,CAAC,EACzB,GAAG,EAAE,GAAQ,EACb,KAAa,EACb,UAAyC,EACzC,MAA2B,EAC3B,WAAmC,EACnC,MAA6C,GAChD;;;;;;;;;;;;;;CAAA;;;;;;;;eAkWA;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE;IACtC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,OAAO,EAAE,MAAM,CAAA;CAClB,UAaA;AAED,wBAAgB,iBAAiB,CAC7B,MAAM,EAAE,UAAU,EAAE,EACpB,YAAY,GAAE,OAAO,GAAG,OAAiB,UA6B5C;AAMD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,YAY7C;AAED,wBAAsB,uBAAuB,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,mDAmCvD;AAmGD,wBAAsB,yBAAyB,CAC3C,QAAQ,KAAA,EACR,IAAI,KAAA,GACL,OAAO,CAAC;IACP,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAA;CAChC,CAAC,CA2BD;AAWD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,KAAA,UA6FtE;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,iBAqCjD;AAED,KAAK,kBAAkB,GAAG;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAE9B,YAAY,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,EAAE,CA2DnE;AASD,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,MAAM,UAU7C"}
|
package/dist/exporter.js
CHANGED
|
@@ -13,6 +13,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
13
13
|
};
|
|
14
14
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
15
|
exports.bundle = bundle;
|
|
16
|
+
exports.getDarkModeSelector = getDarkModeSelector;
|
|
17
|
+
exports.getStyleTokensCss = getStyleTokensCss;
|
|
16
18
|
exports.findRelativeLinks = findRelativeLinks;
|
|
17
19
|
exports.extractPropControlsSafe = extractPropControlsSafe;
|
|
18
20
|
exports.extractPropControlsUnsafe = extractPropControlsUnsafe;
|
|
@@ -42,7 +44,7 @@ function validateUrl(url) {
|
|
|
42
44
|
}
|
|
43
45
|
}
|
|
44
46
|
function bundle(_a) {
|
|
45
|
-
return __awaiter(this, arguments, void 0, function* ({ cwd: out = '', watch = false, components = {}, breakpoints = {}, signal = undefined, }) {
|
|
47
|
+
return __awaiter(this, arguments, void 0, function* ({ cwd: out = '', watch = false, components = {}, tokens = [], breakpoints = {}, signal = undefined, }) {
|
|
46
48
|
out || (out = path_1.default.resolve(process.cwd(), 'example'));
|
|
47
49
|
out = path_1.default.resolve(out);
|
|
48
50
|
try {
|
|
@@ -125,6 +127,7 @@ function bundle(_a) {
|
|
|
125
127
|
.catch(() => null);
|
|
126
128
|
let codeNew = `// @ts-nocheck\n` +
|
|
127
129
|
`/* eslint-disable */\n` +
|
|
130
|
+
'/* This file was generated by Unframer, do not edit manually */\n' +
|
|
128
131
|
dprint_node_1.default.format(resultPathAbs, file.text, {
|
|
129
132
|
lineWidth: 140,
|
|
130
133
|
quoteStyle: 'alwaysSingle',
|
|
@@ -148,7 +151,10 @@ function bundle(_a) {
|
|
|
148
151
|
const sema = new async_sema_1.Sema(10);
|
|
149
152
|
const packageJson = path_1.default.resolve(out, 'package.json');
|
|
150
153
|
fs_1.default.writeFileSync(packageJson, JSON.stringify({ type: 'module' }), 'utf-8');
|
|
151
|
-
|
|
154
|
+
if (!(result === null || result === void 0 ? void 0 : result.outputFiles)) {
|
|
155
|
+
throw new Error('Failed to generate result');
|
|
156
|
+
}
|
|
157
|
+
const propControlsData = yield Promise.all(result === null || result === void 0 ? void 0 : result.outputFiles.map((file) => __awaiter(this, void 0, void 0, function* () {
|
|
152
158
|
try {
|
|
153
159
|
yield sema.acquire();
|
|
154
160
|
const name = path_1.default.basename(file.path).replace(/\.js$/, '');
|
|
@@ -177,7 +183,10 @@ function bundle(_a) {
|
|
|
177
183
|
sema.release();
|
|
178
184
|
}
|
|
179
185
|
}))).finally(() => fs_1.default.rmSync(packageJson));
|
|
180
|
-
const cssString = '/* This
|
|
186
|
+
const cssString = '/* This file was generated by Unframer, do not edit manually */\n' +
|
|
187
|
+
'/* This css file has all the necessary styles to run all your components */\n' +
|
|
188
|
+
'\n' +
|
|
189
|
+
getStyleTokensCss(tokens) +
|
|
181
190
|
(0, css_js_1.breakpointsStyles)(breakpoints) +
|
|
182
191
|
'\n\n' +
|
|
183
192
|
framer_1.combinedCSSRules
|
|
@@ -209,10 +218,12 @@ function bundle(_a) {
|
|
|
209
218
|
if (watch) {
|
|
210
219
|
utils_js_1.logger.log('waiting for components or config changes');
|
|
211
220
|
}
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
221
|
+
if (!(tokens === null || tokens === void 0 ? void 0 : tokens.length)) {
|
|
222
|
+
const tokensCss = "/* This css file contains your color variables, sometimes these get desynced when updated in Framer so it's good that you copy and paste this snippet into your app css */\n" +
|
|
223
|
+
'/* Bug: https://www.framer.community/c/bugs/color-style-unlinks-when-copying-component-between-projects-resulting-in-potential-value-discrepancy */\n' +
|
|
224
|
+
getTokensCss({ out, result });
|
|
225
|
+
fs_1.default.writeFileSync(path_1.default.resolve(out, 'tokens.css'), tokensCss, 'utf-8');
|
|
226
|
+
}
|
|
216
227
|
const res = {
|
|
217
228
|
components: Object.entries(components).map(([name, v]) => {
|
|
218
229
|
const propControls = propControlsData.find((x) => (x === null || x === void 0 ? void 0 : x.name) === name);
|
|
@@ -231,50 +242,135 @@ function bundle(_a) {
|
|
|
231
242
|
if (!watch) {
|
|
232
243
|
const result = yield rebuild();
|
|
233
244
|
yield buildContext.dispose();
|
|
245
|
+
console.log((0, utils_js_1.terminalMarkdown)((0, dedent_1.default) `
|
|
246
|
+
# How to use the Framer components
|
|
247
|
+
|
|
248
|
+
The components are exported to the \`framer\` directory (or the directory you specified in the config).
|
|
249
|
+
Each component has a \`.Responsive\` variant that allows you to specify different variants for different breakpoints.
|
|
250
|
+
The breakpoints are:
|
|
251
|
+
- base: 0-319px
|
|
252
|
+
- sm: 320-767px
|
|
253
|
+
- md: 768-959px
|
|
254
|
+
- lg: 960-1199px
|
|
255
|
+
- xl: 1200-1535px
|
|
256
|
+
- 2xl: 1536px+
|
|
257
|
+
|
|
258
|
+
You can import the components like this:
|
|
259
|
+
|
|
260
|
+
\`\`\`tsx
|
|
261
|
+
import './framer/styles.css'
|
|
262
|
+
import Logos from './framer/logos'
|
|
263
|
+
|
|
264
|
+
export default function App() {
|
|
265
|
+
return (
|
|
266
|
+
<div>
|
|
267
|
+
<Logos.Responsive
|
|
268
|
+
variants={{
|
|
269
|
+
lg: 'Desktop',
|
|
270
|
+
md: 'Tablet',
|
|
271
|
+
base: 'Mobile',
|
|
272
|
+
}}
|
|
273
|
+
/>
|
|
274
|
+
</div>
|
|
275
|
+
);
|
|
276
|
+
};
|
|
277
|
+
\`\`\`
|
|
278
|
+
|
|
279
|
+
It's very important to import the \`styles.css\` file to include the necessary styles for the components.
|
|
280
|
+
|
|
281
|
+
You can also use the components without the responsive wrapper:
|
|
282
|
+
|
|
283
|
+
\`\`\`tsx
|
|
284
|
+
import './framer/styles.css'
|
|
285
|
+
import Logos from './framer/logos'
|
|
286
|
+
|
|
287
|
+
export default function App() {
|
|
288
|
+
return (
|
|
289
|
+
<div>
|
|
290
|
+
<Logos variant="Desktop" />
|
|
291
|
+
</div>
|
|
292
|
+
);
|
|
293
|
+
};
|
|
294
|
+
\`\`\`
|
|
295
|
+
`));
|
|
234
296
|
return result;
|
|
235
297
|
}
|
|
236
|
-
// when user press ctrl+c dispose
|
|
237
|
-
process.on('SIGINT', () =>
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
})
|
|
241
|
-
process.on('SIGABRT', () =>
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
})
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
})
|
|
249
|
-
const res =
|
|
250
|
-
/**
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
const getResolvedUrls = () =>
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}
|
|
275
|
-
|
|
298
|
+
// // when user press ctrl+c dispose
|
|
299
|
+
// process.on('SIGINT', async () => {
|
|
300
|
+
// await buildContext.cancel()
|
|
301
|
+
// buildContext.dispose()
|
|
302
|
+
// })
|
|
303
|
+
// process.on('SIGABRT', async () => {
|
|
304
|
+
// await buildContext.cancel()
|
|
305
|
+
// buildContext.dispose()
|
|
306
|
+
// })
|
|
307
|
+
// signal?.addEventListener('abort', async () => {
|
|
308
|
+
// await buildContext.cancel()
|
|
309
|
+
// buildContext.dispose()
|
|
310
|
+
// })
|
|
311
|
+
// const res = await rebuild()
|
|
312
|
+
// /**
|
|
313
|
+
// * Get resolved URLs for all components and also wait for 1 second if it took less time than that
|
|
314
|
+
// */
|
|
315
|
+
// const getResolvedUrls = () =>
|
|
316
|
+
// Promise.all([
|
|
317
|
+
// ...Object.values(components).map((u) => {
|
|
318
|
+
// const url = new URL(u)
|
|
319
|
+
// url.searchParams.set('ts', Date.now().toString())
|
|
320
|
+
// return resolveRedirect({ url: url.toString(), signal })
|
|
321
|
+
// }),
|
|
322
|
+
// new Promise((res) => setTimeout(res, 5000)),
|
|
323
|
+
// ])
|
|
324
|
+
// let prevUrls = await getResolvedUrls()
|
|
325
|
+
// while (!signal?.aborted) {
|
|
326
|
+
// const urls = await getResolvedUrls()
|
|
327
|
+
// const changed = urls
|
|
328
|
+
// .map((x, i) => (x !== prevUrls[i] ? i : null))
|
|
329
|
+
// .filter(Boolean)
|
|
330
|
+
// if (!changed?.length) {
|
|
331
|
+
// continue
|
|
332
|
+
// }
|
|
333
|
+
// const changedNames = Object.keys(components).filter((_, i) =>
|
|
334
|
+
// changed.includes(i),
|
|
335
|
+
// )
|
|
336
|
+
// logger.log(`found new component URLs for ${changedNames.join(', ')}`)
|
|
337
|
+
// prevUrls = urls
|
|
338
|
+
// await rebuild()
|
|
339
|
+
// }
|
|
340
|
+
// return res
|
|
276
341
|
});
|
|
277
342
|
}
|
|
343
|
+
function getDarkModeSelector(opts) {
|
|
344
|
+
const { darkModeType = 'class', content } = opts;
|
|
345
|
+
if (darkModeType === 'media') {
|
|
346
|
+
return ('@media (prefers-color-scheme: dark) {\n' +
|
|
347
|
+
' :root {\n' +
|
|
348
|
+
content +
|
|
349
|
+
'\n' +
|
|
350
|
+
' }\n' +
|
|
351
|
+
'}');
|
|
352
|
+
}
|
|
353
|
+
return '.dark:root {\n' + content + '\n' + '}';
|
|
354
|
+
}
|
|
355
|
+
function getStyleTokensCss(tokens, darkModeType = 'class') {
|
|
356
|
+
if (!(tokens === null || tokens === void 0 ? void 0 : tokens.length)) {
|
|
357
|
+
return '';
|
|
358
|
+
}
|
|
359
|
+
const lightTokens = tokens
|
|
360
|
+
.map((token) => ' --token-' + token.id + ': ' + token.lightColor + ';')
|
|
361
|
+
.join('\n');
|
|
362
|
+
const darkTokens = tokens
|
|
363
|
+
.map((token) => ' --token-' + token.id + ': ' + token.darkColor + ';')
|
|
364
|
+
.join('\n');
|
|
365
|
+
return (':root {\n' +
|
|
366
|
+
lightTokens +
|
|
367
|
+
'\n' +
|
|
368
|
+
'}\n\n' +
|
|
369
|
+
getDarkModeSelector({
|
|
370
|
+
darkModeType,
|
|
371
|
+
content: darkTokens,
|
|
372
|
+
}));
|
|
373
|
+
}
|
|
278
374
|
function decapitalize(str) {
|
|
279
375
|
return str.charAt(0).toLowerCase() + str.slice(1);
|
|
280
376
|
}
|
|
@@ -498,6 +594,7 @@ function propControlsToType(controls, fileName) {
|
|
|
498
594
|
.map((line) => ` ${line}`)
|
|
499
595
|
.join('\n') + '\n';
|
|
500
596
|
let t = '';
|
|
597
|
+
t += '/* This file was generated by Unframer, do not edit manually */\n';
|
|
501
598
|
t += 'import * as React from "react"\n\n';
|
|
502
599
|
t += 'import { UnframerBreakpoint } from "unframer"\n\n';
|
|
503
600
|
t += `export interface Props {\n${defaultPropsTypes}${types}\n}\n\n`;
|