unframer 3.2.1 → 3.2.4
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 +4 -4
- package/dist/cli.d.ts.map +1 -1
- package/dist/cli.js +106 -7
- package/dist/cli.js.map +1 -1
- package/dist/css.d.ts +5 -0
- package/dist/css.d.ts.map +1 -1
- package/dist/css.js +25 -0
- package/dist/css.js.map +1 -1
- package/dist/exporter.js +1 -1
- package/dist/exporter.js.map +1 -1
- package/dist/framer-chunks/chunk-VUHWYTYT.d.ts +15 -0
- package/dist/framer-chunks/chunk-VUHWYTYT.d.ts.map +1 -0
- package/dist/framer-chunks/chunk-VUHWYTYT.js +111 -0
- package/dist/framer-chunks/chunk-VUHWYTYT.js.map +1 -0
- package/dist/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.d.ts +634 -0
- package/dist/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.d.ts.map +1 -0
- package/dist/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js +8 -0
- package/dist/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js.map +1 -0
- package/dist/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.d.ts +115 -0
- package/dist/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.d.ts.map +1 -0
- package/dist/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js +8 -0
- package/dist/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js.map +1 -0
- package/dist/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.d.ts +781 -0
- package/dist/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.d.ts.map +1 -0
- package/dist/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js +8 -0
- package/dist/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js.map +1 -0
- package/dist/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.d.ts +18 -0
- package/dist/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.d.ts.map +1 -0
- package/dist/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js +8 -0
- package/dist/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js.map +1 -0
- package/dist/framer-chunks/google-63PUBKA6-AMAUIPXM.d.ts +1566 -0
- package/dist/framer-chunks/google-63PUBKA6-AMAUIPXM.d.ts.map +1 -0
- package/dist/framer-chunks/google-63PUBKA6-AMAUIPXM.js +8 -0
- package/dist/framer-chunks/google-63PUBKA6-AMAUIPXM.js.map +1 -0
- package/dist/framer-chunks/google-7QNFQWAU-FKX5MRKV.d.ts +3588 -0
- package/dist/framer-chunks/google-7QNFQWAU-FKX5MRKV.d.ts.map +1 -0
- package/dist/framer-chunks/google-7QNFQWAU-FKX5MRKV.js +8 -0
- package/dist/framer-chunks/google-7QNFQWAU-FKX5MRKV.js.map +1 -0
- package/dist/framer-chunks/google-KTMKGB4J-RA7CAZTC.d.ts +10293 -0
- package/dist/framer-chunks/google-KTMKGB4J-RA7CAZTC.d.ts.map +1 -0
- package/dist/framer-chunks/google-KTMKGB4J-RA7CAZTC.js +8 -0
- package/dist/framer-chunks/google-KTMKGB4J-RA7CAZTC.js.map +1 -0
- package/dist/framer.js +1477 -910
- package/dist/generated/api-client.d.ts +1 -1
- package/dist/generated/api-client.d.ts.map +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -1
- package/dist/index.js.map +1 -1
- package/dist/package-manager.d.ts +1 -1
- package/dist/package-manager.d.ts.map +1 -1
- package/dist/package-manager.js.map +1 -1
- package/dist/stackblitz.d.ts +9 -0
- package/dist/stackblitz.d.ts.map +1 -0
- package/dist/stackblitz.js +182 -0
- package/dist/stackblitz.js.map +1 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.js +1 -1
- package/esm/cli.d.ts.map +1 -1
- package/esm/cli.js +108 -9
- package/esm/cli.js.map +1 -1
- package/esm/css.d.ts +5 -0
- package/esm/css.d.ts.map +1 -1
- package/esm/css.js +24 -0
- package/esm/css.js.map +1 -1
- package/esm/exporter.js +1 -1
- package/esm/exporter.js.map +1 -1
- package/esm/framer-chunks/chunk-VUHWYTYT.d.ts +15 -0
- package/esm/framer-chunks/chunk-VUHWYTYT.d.ts.map +1 -0
- package/esm/framer-chunks/chunk-VUHWYTYT.js +96 -0
- package/esm/framer-chunks/chunk-VUHWYTYT.js.map +1 -0
- package/esm/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.d.ts +634 -0
- package/esm/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.d.ts.map +1 -0
- package/esm/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js +5 -0
- package/esm/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js.map +1 -0
- package/esm/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.d.ts +115 -0
- package/esm/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.d.ts.map +1 -0
- package/esm/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js +5 -0
- package/esm/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js.map +1 -0
- package/esm/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.d.ts +781 -0
- package/esm/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.d.ts.map +1 -0
- package/esm/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js +5 -0
- package/esm/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js.map +1 -0
- package/esm/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.d.ts +18 -0
- package/esm/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.d.ts.map +1 -0
- package/esm/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js +5 -0
- package/esm/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js.map +1 -0
- package/esm/framer-chunks/google-63PUBKA6-AMAUIPXM.d.ts +1566 -0
- package/esm/framer-chunks/google-63PUBKA6-AMAUIPXM.d.ts.map +1 -0
- package/esm/framer-chunks/google-63PUBKA6-AMAUIPXM.js +5 -0
- package/esm/framer-chunks/google-63PUBKA6-AMAUIPXM.js.map +1 -0
- package/esm/framer-chunks/google-7QNFQWAU-FKX5MRKV.d.ts +3588 -0
- package/esm/framer-chunks/google-7QNFQWAU-FKX5MRKV.d.ts.map +1 -0
- package/esm/framer-chunks/google-7QNFQWAU-FKX5MRKV.js +5 -0
- package/esm/framer-chunks/google-7QNFQWAU-FKX5MRKV.js.map +1 -0
- package/esm/framer-chunks/google-KTMKGB4J-RA7CAZTC.d.ts +10293 -0
- package/esm/framer-chunks/google-KTMKGB4J-RA7CAZTC.d.ts.map +1 -0
- package/esm/framer-chunks/google-KTMKGB4J-RA7CAZTC.js +5 -0
- package/esm/framer-chunks/google-KTMKGB4J-RA7CAZTC.js.map +1 -0
- package/esm/framer.js +1214 -650
- package/esm/index.d.ts +3 -0
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +4 -0
- package/esm/index.js.map +1 -1
- package/esm/package-manager.d.ts +1 -1
- package/esm/package-manager.d.ts.map +1 -1
- package/esm/package-manager.js.map +1 -1
- package/esm/stackblitz.d.ts +9 -0
- package/esm/stackblitz.d.ts.map +1 -0
- package/esm/stackblitz.js +179 -0
- package/esm/stackblitz.js.map +1 -0
- package/esm/version.d.ts +1 -1
- package/esm/version.js +1 -1
- package/package.json +3 -3
- package/src/cli.ts +122 -11
- package/src/{css.ts → css.tsx} +38 -0
- package/src/exporter.ts +8 -8
- package/src/framer-chunks/chunk-VUHWYTYT.js +105 -0
- package/src/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js +7 -0
- package/src/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js +7 -0
- package/src/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js +7 -0
- package/src/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js +7 -0
- package/src/framer-chunks/google-63PUBKA6-AMAUIPXM.js +7 -0
- package/src/framer-chunks/google-7QNFQWAU-FKX5MRKV.js +7 -0
- package/src/framer-chunks/google-KTMKGB4J-RA7CAZTC.js +7 -0
- package/src/framer.js +1207 -634
- package/src/index.ts +6 -0
- package/src/package-manager.ts +2 -4
- package/src/stackblitz.ts +193 -0
- package/src/styles/framer.css +24 -0
- package/src/version.ts +1 -1
package/esm/index.d.ts
CHANGED
|
@@ -2,4 +2,7 @@ export * from './framer.js';
|
|
|
2
2
|
import { AdaptedLink as Link, ResolveLinksAdapted as ResolveLinks } from './react.js';
|
|
3
3
|
export { FramerStyles, type UnframerBreakpoint, WithFramerBreakpoints, ContextProviders, AdaptedLink, UnframerProvider, } from './react.js';
|
|
4
4
|
export { Link, ResolveLinks };
|
|
5
|
+
import { withCSS as withCSSOriginal } from './framer.js';
|
|
6
|
+
import { withCSS } from './css.js';
|
|
7
|
+
export { withCSSOriginal, withCSS };
|
|
5
8
|
//# sourceMappingURL=index.d.ts.map
|
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;AAC3B,OAAO,EACH,WAAW,IAAI,IAAI,EACnB,mBAAmB,IAAI,YAAY,EACtC,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,YAAY,EACZ,KAAK,kBAAkB,EACvB,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,GAEnB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,OAAO,EACH,WAAW,IAAI,IAAI,EACnB,mBAAmB,IAAI,YAAY,EACtC,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,YAAY,EACZ,KAAK,kBAAkB,EACvB,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,GAEnB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA;AAG7B,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,CAAA"}
|
package/esm/index.js
CHANGED
|
@@ -4,4 +4,8 @@ export { FramerStyles, WithFramerBreakpoints, ContextProviders, AdaptedLink, Unf
|
|
|
4
4
|
// withCSS,
|
|
5
5
|
} from './react.js';
|
|
6
6
|
export { Link, ResolveLinks };
|
|
7
|
+
// Override withCSS with our custom implementation that restores style tags
|
|
8
|
+
import { withCSS as withCSSOriginal } from './framer.js';
|
|
9
|
+
import { withCSS } from './css.js';
|
|
10
|
+
export { withCSSOriginal, withCSS };
|
|
7
11
|
//# sourceMappingURL=index.js.map
|
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;AAC3B,OAAO,EACH,WAAW,IAAI,IAAI,EACnB,mBAAmB,IAAI,YAAY,GACtC,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,YAAY,EAEZ,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB;AAChB,WAAW;EACd,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,OAAO,EACH,WAAW,IAAI,IAAI,EACnB,mBAAmB,IAAI,YAAY,GACtC,MAAM,YAAY,CAAA;AACnB,OAAO,EACH,YAAY,EAEZ,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB;AAChB,WAAW;EACd,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA;AAE7B,2EAA2E;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,aAAa,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,CAAA"}
|
package/esm/package-manager.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare function getPackageManager(targetDir
|
|
1
|
+
export declare function getPackageManager(targetDir?: string): Promise<"" | "npm" | "yarn" | "pnpm" | "bun" | "deno">;
|
|
2
2
|
export declare function installPackagesBatch({ packageNames, cwd, isDev, }: {
|
|
3
3
|
packageNames: string[];
|
|
4
4
|
cwd: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"package-manager.d.ts","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"AAMA,wBAAsB,iBAAiB,CAAC,SAAS,EAAE,MAAM,0DA+
|
|
1
|
+
{"version":3,"file":"package-manager.d.ts","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"AAMA,wBAAsB,iBAAiB,CAAC,SAAS,CAAC,EAAE,MAAM,0DA+BzD;AAED,wBAAsB,oBAAoB,CAAC,EACvC,YAAY,EACZ,GAAG,EACH,KAAa,GAChB,EAAE;IACC,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAkHhD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"package-manager.js","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAA;AAChC,OAAO,EAAU,OAAO,EAAE,MAAM,YAAY,CAAA;AAE5C,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;AAEjC,MAAM,CAAC,KAAK,UAAU,iBAAiB,CAAC,
|
|
1
|
+
{"version":3,"file":"package-manager.js","sourceRoot":"","sources":["../src/package-manager.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare function generateStackblitzFiles({ projectId, appComponentCode, title, }: {
|
|
2
|
+
projectId: any;
|
|
3
|
+
appComponentCode?: string | undefined;
|
|
4
|
+
title?: string | undefined;
|
|
5
|
+
}): {
|
|
6
|
+
relativePath: string;
|
|
7
|
+
contents: string;
|
|
8
|
+
}[];
|
|
9
|
+
//# sourceMappingURL=stackblitz.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stackblitz.d.ts","sourceRoot":"","sources":["../src/stackblitz.ts"],"names":[],"mappings":"AAEA,wBAAgB,uBAAuB,CAAC,EACpC,SAAS,EACT,gBAAqB,EACrB,KAAU,GACb;;;;CAAA,GAAG;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,EAAE,CA0L/C"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import { dedent } from './utils';
|
|
2
|
+
export function generateStackblitzFiles({ projectId, appComponentCode = '', title = '', }) {
|
|
3
|
+
const packageJson = {
|
|
4
|
+
name: 'unframer-vite-react-typescript-starter',
|
|
5
|
+
private: true,
|
|
6
|
+
version: '0.0.0',
|
|
7
|
+
type: 'module',
|
|
8
|
+
stackblitz: {
|
|
9
|
+
startCommand: `STACKBLITZ_DEMO_EXAMPLE=src/App.tsx npm run framer && npm run dev`,
|
|
10
|
+
},
|
|
11
|
+
scripts: {
|
|
12
|
+
dev: 'vite',
|
|
13
|
+
build: 'vite build',
|
|
14
|
+
framer: `unframer ${projectId} --outDir src/framer`,
|
|
15
|
+
},
|
|
16
|
+
dependencies: {
|
|
17
|
+
react: 'latest',
|
|
18
|
+
unframer: 'latest',
|
|
19
|
+
'react-dom': 'latest',
|
|
20
|
+
},
|
|
21
|
+
devDependencies: {
|
|
22
|
+
'@types/react': 'latest',
|
|
23
|
+
'@types/react-dom': 'latest',
|
|
24
|
+
'@vitejs/plugin-react': 'latest',
|
|
25
|
+
tailwindcss: '^3.4.0',
|
|
26
|
+
postcss: '^8.4.0',
|
|
27
|
+
autoprefixer: '^10.4.0',
|
|
28
|
+
typescript: 'latest',
|
|
29
|
+
vite: 'latest',
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
const tsconfig = {
|
|
33
|
+
compilerOptions: {
|
|
34
|
+
target: 'ES2020',
|
|
35
|
+
useDefineForClassFields: true,
|
|
36
|
+
lib: ['ES2020', 'DOM', 'DOM.Iterable'],
|
|
37
|
+
module: 'ESNext',
|
|
38
|
+
skipLibCheck: true,
|
|
39
|
+
moduleResolution: 'bundler',
|
|
40
|
+
allowImportingTsExtensions: true,
|
|
41
|
+
resolveJsonModule: true,
|
|
42
|
+
isolatedModules: true,
|
|
43
|
+
noEmit: true,
|
|
44
|
+
jsx: 'react-jsx',
|
|
45
|
+
noUnusedLocals: true,
|
|
46
|
+
noUnusedParameters: true,
|
|
47
|
+
noFallthroughCasesInSwitch: true,
|
|
48
|
+
},
|
|
49
|
+
include: ['src'],
|
|
50
|
+
};
|
|
51
|
+
const viteConfig = dedent `
|
|
52
|
+
|
|
53
|
+
import { defineConfig } from 'vite'
|
|
54
|
+
import react from '@vitejs/plugin-react'
|
|
55
|
+
|
|
56
|
+
// https://vitejs.dev/config/
|
|
57
|
+
export default defineConfig({
|
|
58
|
+
plugins: [react()],
|
|
59
|
+
})
|
|
60
|
+
|
|
61
|
+
`;
|
|
62
|
+
const postcssConfig = dedent `
|
|
63
|
+
|
|
64
|
+
export default {
|
|
65
|
+
plugins: {
|
|
66
|
+
tailwindcss: {},
|
|
67
|
+
autoprefixer: {},
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
`;
|
|
72
|
+
const tailwindConfig = dedent `
|
|
73
|
+
|
|
74
|
+
/** @type {import('tailwindcss').Config} */
|
|
75
|
+
export default {
|
|
76
|
+
content: [
|
|
77
|
+
"./index.html",
|
|
78
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
79
|
+
],
|
|
80
|
+
theme: {
|
|
81
|
+
extend: {},
|
|
82
|
+
},
|
|
83
|
+
plugins: [],
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
`;
|
|
87
|
+
const indexHtml = dedent `
|
|
88
|
+
|
|
89
|
+
<!doctype html>
|
|
90
|
+
<html lang="en">
|
|
91
|
+
<head>
|
|
92
|
+
<meta charset="UTF-8" />
|
|
93
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
94
|
+
<title>Unframer + Vite + React + TS</title>
|
|
95
|
+
</head>
|
|
96
|
+
<body>
|
|
97
|
+
<div id="root"></div>
|
|
98
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
99
|
+
</body>
|
|
100
|
+
</html>
|
|
101
|
+
|
|
102
|
+
`;
|
|
103
|
+
const app = appComponentCode ||
|
|
104
|
+
dedent `
|
|
105
|
+
const docs = \`
|
|
106
|
+
# Unframer Demo Project
|
|
107
|
+
|
|
108
|
+
This is a demo project showing how to use Unframer to export Framer components to React.
|
|
109
|
+
|
|
110
|
+
## What's happening now:
|
|
111
|
+
If you're seeing this file, the unframer CLI is currently running in the terminal below.
|
|
112
|
+
Just wait until it finishes downloading and bundling your Framer components.
|
|
113
|
+
Once complete, you'll see your components rendered in the browser preview on the right and this file will be replaced with an example.
|
|
114
|
+
|
|
115
|
+
Try making changes to your components in Framer, then run the \`npm run framer\` command again
|
|
116
|
+
to see the updates reflected here.
|
|
117
|
+
|
|
118
|
+
## How it works:
|
|
119
|
+
1. The Framer React Export plugin saves your components to the Unframer database
|
|
120
|
+
2. The unframer CLI downloads and bundles those components into regular React components inside the \`src/framer\` folder
|
|
121
|
+
3. You can then import and use them in your React app just like any other component
|
|
122
|
+
|
|
123
|
+
\`
|
|
124
|
+
|
|
125
|
+
`;
|
|
126
|
+
const main = dedent `
|
|
127
|
+
|
|
128
|
+
import './index.css'
|
|
129
|
+
import React from 'react'
|
|
130
|
+
import ReactDOM from 'react-dom/client'
|
|
131
|
+
import App from './App'
|
|
132
|
+
|
|
133
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
134
|
+
<App />
|
|
135
|
+
)
|
|
136
|
+
|
|
137
|
+
`;
|
|
138
|
+
const css = dedent `
|
|
139
|
+
@tailwind base;
|
|
140
|
+
@tailwind components;
|
|
141
|
+
@tailwind utilities;
|
|
142
|
+
`;
|
|
143
|
+
return [
|
|
144
|
+
{
|
|
145
|
+
relativePath: 'tsconfig.json',
|
|
146
|
+
contents: JSON.stringify(tsconfig, null, 2),
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
relativePath: 'package.json',
|
|
150
|
+
contents: JSON.stringify(packageJson, null, 2),
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
relativePath: '.gitignore',
|
|
154
|
+
contents: dedent `
|
|
155
|
+
|
|
156
|
+
node_modules
|
|
157
|
+
dist
|
|
158
|
+
.DS_Store
|
|
159
|
+
.env
|
|
160
|
+
.env.*
|
|
161
|
+
.stackblitzrc
|
|
162
|
+
npm-debug.log*
|
|
163
|
+
yarn-debug.log*
|
|
164
|
+
yarn-error.log*
|
|
165
|
+
*.log
|
|
166
|
+
|
|
167
|
+
`,
|
|
168
|
+
},
|
|
169
|
+
{ relativePath: 'vite.config.ts', contents: viteConfig },
|
|
170
|
+
{ relativePath: 'postcss.config.js', contents: postcssConfig },
|
|
171
|
+
{ relativePath: 'tailwind.config.js', contents: tailwindConfig },
|
|
172
|
+
{ relativePath: 'index.html', contents: indexHtml },
|
|
173
|
+
{ relativePath: 'src/App.tsx', contents: app },
|
|
174
|
+
{ relativePath: 'src/index.css', contents: css },
|
|
175
|
+
// { relativePath: 'pnpm-lock.yaml', contents: '\n' },
|
|
176
|
+
{ relativePath: 'src/main.tsx', contents: main },
|
|
177
|
+
];
|
|
178
|
+
}
|
|
179
|
+
//# sourceMappingURL=stackblitz.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stackblitz.js","sourceRoot":"","sources":["../src/stackblitz.ts"],"names":[],"mappings":"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"}
|
package/esm/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const version = "3.2.
|
|
1
|
+
export declare const version = "3.2.4";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
package/esm/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const version = '3.2.
|
|
1
|
+
export const version = '3.2.4';
|
|
2
2
|
//# sourceMappingURL=version.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unframer",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.4",
|
|
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",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"nanospinner": "^1.2.2",
|
|
60
60
|
"picocolors": "^1.1.1",
|
|
61
61
|
"real-framer-motion": "npm:framer-motion@^12.23.12",
|
|
62
|
-
"spiceflow": "^1.
|
|
62
|
+
"spiceflow": "^1.17.10",
|
|
63
63
|
"string-dedent": "^3.0.1",
|
|
64
64
|
"undici": "^7.10.0"
|
|
65
65
|
},
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
"@types/node": "^22.15.21",
|
|
77
77
|
"@types/react": "^19.1.8",
|
|
78
78
|
"@types/react-dom": "^19.1.5",
|
|
79
|
-
"@xmorse/deployment-utils": "^0.
|
|
79
|
+
"@xmorse/deployment-utils": "^0.7.0",
|
|
80
80
|
"concurrently": "^9.1.2",
|
|
81
81
|
"dprint-node": "^1.0.8",
|
|
82
82
|
"openai": "^4.80.1",
|
package/src/cli.ts
CHANGED
|
@@ -2,21 +2,26 @@ import { setMaxListeners } from 'events'
|
|
|
2
2
|
import { fetch } from 'undici'
|
|
3
3
|
import './sentry.js'
|
|
4
4
|
|
|
5
|
-
import { bundle, StyleToken } from './exporter.js'
|
|
5
|
+
import { bundle, StyleToken, createExampleComponentCode } from './exporter.js'
|
|
6
6
|
import { createClient } from './generated/api-client.js'
|
|
7
|
+
import { generateStackblitzFiles } from './stackblitz.js'
|
|
7
8
|
|
|
8
9
|
import { cac } from 'cac'
|
|
10
|
+
import { exec } from 'child_process'
|
|
11
|
+
import { promisify } from 'util'
|
|
9
12
|
|
|
10
13
|
import fs from 'fs'
|
|
11
14
|
import path, { basename } from 'path'
|
|
12
15
|
import { BreakpointSizes, defaultBreakpointSizes } from './css.js'
|
|
13
16
|
import {
|
|
14
17
|
componentNameToPath,
|
|
18
|
+
dedent,
|
|
15
19
|
isTruthy,
|
|
16
20
|
logger,
|
|
17
21
|
sleep,
|
|
18
22
|
spinner,
|
|
19
23
|
} from './utils.js'
|
|
24
|
+
import { getPackageManager } from './package-manager.js'
|
|
20
25
|
import { notifyError } from './sentry.js'
|
|
21
26
|
import { dispatcher } from './undici-dispatcher.js'
|
|
22
27
|
const configNames = ['unframer.config.json', 'unframer.json']
|
|
@@ -180,17 +185,123 @@ const version = pkg.version
|
|
|
180
185
|
|
|
181
186
|
cli.version(version).help()
|
|
182
187
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
cli.command('example-app <projectId>', 'Create an example app with Framer components')
|
|
191
|
+
.option('--outDir <dir>', 'Output directory', { default: 'example-unframer-app' })
|
|
192
|
+
.action(async (projectId, options) => {
|
|
193
|
+
try {
|
|
194
|
+
const outDir = options.outDir
|
|
195
|
+
console.log(`Creating example app in ${outDir}`)
|
|
196
|
+
|
|
197
|
+
// Create the output directory
|
|
198
|
+
const absoluteOutDir = path.resolve(process.cwd(), outDir)
|
|
199
|
+
if (!fs.existsSync(absoluteOutDir)) {
|
|
200
|
+
fs.mkdirSync(absoluteOutDir, { recursive: true })
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
// Fetch the project configuration
|
|
204
|
+
spinner.start('Fetching project configuration...')
|
|
205
|
+
const { config, websiteUrl } = await configFromFetch({
|
|
206
|
+
projectId,
|
|
207
|
+
allExternal: true,
|
|
208
|
+
externalPackages: [],
|
|
209
|
+
outDir: 'src/framer',
|
|
210
|
+
})
|
|
211
|
+
spinner.stop('Project configuration fetched')
|
|
212
|
+
|
|
213
|
+
// Generate example component code
|
|
214
|
+
spinner.start('Generating example component code...')
|
|
215
|
+
const { exampleCode } = await createExampleComponentCode({
|
|
216
|
+
outDir: './framer',
|
|
217
|
+
config,
|
|
218
|
+
})
|
|
219
|
+
|
|
220
|
+
// Generate all the files needed for the example app
|
|
221
|
+
const files = generateStackblitzFiles({
|
|
222
|
+
projectId,
|
|
223
|
+
appComponentCode: exampleCode,
|
|
224
|
+
title: config.projectName || 'Unframer Example App',
|
|
225
|
+
})
|
|
226
|
+
|
|
227
|
+
// Write all files to the output directory
|
|
228
|
+
for (const file of files) {
|
|
229
|
+
const filePath = path.join(absoluteOutDir, file.relativePath)
|
|
230
|
+
const fileDir = path.dirname(filePath)
|
|
231
|
+
|
|
232
|
+
// Ensure directory exists
|
|
233
|
+
if (!fs.existsSync(fileDir)) {
|
|
234
|
+
fs.mkdirSync(fileDir, { recursive: true })
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
fs.writeFileSync(filePath, file.contents)
|
|
238
|
+
console.log(`Created ${file.relativePath}`)
|
|
239
|
+
}
|
|
240
|
+
spinner.stop('Example files created')
|
|
241
|
+
|
|
242
|
+
// Bundle the Framer components
|
|
243
|
+
spinner.start('Downloading Framer components...')
|
|
244
|
+
const componentsOutDir = path.join(absoluteOutDir, 'src/framer')
|
|
245
|
+
const { buildContext } = await bundle({
|
|
246
|
+
config: {
|
|
247
|
+
...config,
|
|
248
|
+
jsx: true,
|
|
249
|
+
outDir: componentsOutDir,
|
|
250
|
+
allExternal: true,
|
|
251
|
+
externalPackages: [],
|
|
252
|
+
},
|
|
253
|
+
watch: false,
|
|
254
|
+
cwd: componentsOutDir,
|
|
255
|
+
signal: new AbortController().signal,
|
|
256
|
+
metafile: false,
|
|
257
|
+
})
|
|
258
|
+
await buildContext?.dispose?.()
|
|
259
|
+
spinner.stop('Framer components downloaded')
|
|
260
|
+
|
|
261
|
+
// Install dependencies using detected package manager
|
|
262
|
+
spinner.stop('Framer components downloaded')
|
|
263
|
+
|
|
264
|
+
const packageManager = await getPackageManager()
|
|
265
|
+
const installCommand = packageManager === 'yarn' ? 'yarn' : `${packageManager} install`
|
|
266
|
+
|
|
267
|
+
console.log(`Installing dependencies with ${packageManager}...`)
|
|
268
|
+
spinner.start(`Running ${installCommand}...`)
|
|
269
|
+
|
|
270
|
+
const execAsync = promisify(exec)
|
|
271
|
+
try {
|
|
272
|
+
await execAsync(installCommand, {
|
|
273
|
+
cwd: absoluteOutDir,
|
|
274
|
+
// Can't use 'inherit' with async exec, so we'll capture output
|
|
275
|
+
encoding: 'utf8',
|
|
276
|
+
})
|
|
277
|
+
spinner.stop('Dependencies installed successfully')
|
|
278
|
+
} catch (error) {
|
|
279
|
+
spinner.stop('Failed to install dependencies')
|
|
280
|
+
console.error(`${packageManager} install failed:`, error?.message || error)
|
|
281
|
+
console.log(`You can manually run "${installCommand}" in the created directory`)
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
logger.green(dedent`
|
|
285
|
+
|
|
286
|
+
Example app created successfully in ${outDir}!
|
|
287
|
+
|
|
288
|
+
Next steps:
|
|
289
|
+
cd ${outDir}
|
|
290
|
+
${packageManager} run dev
|
|
291
|
+
|
|
292
|
+
Quick guide:
|
|
293
|
+
▪︎ Edit src/App.tsx to add or customize your Framer components
|
|
294
|
+
▪︎ Your components are in src/framer/ directory
|
|
295
|
+
▪︎ The app uses Vite + React + TypeScript + Tailwind CSS
|
|
296
|
+
▪︎ Your app will be running at http://localhost:5173
|
|
297
|
+
|
|
298
|
+
`)
|
|
299
|
+
} catch (error) {
|
|
300
|
+
notifyError(error)
|
|
301
|
+
spinner.error('Failed to create example app')
|
|
302
|
+
throw error
|
|
188
303
|
}
|
|
189
|
-
|
|
190
|
-
const p = path.resolve(process.cwd(), 'unframer.config.json')
|
|
191
|
-
console.log(`${p} file created`)
|
|
192
|
-
},
|
|
193
|
-
)
|
|
304
|
+
})
|
|
194
305
|
|
|
195
306
|
export type Config = {
|
|
196
307
|
jsx?: boolean
|
package/src/{css.ts → css.tsx}
RENAMED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import dedent from 'string-dedent'
|
|
2
|
+
import React from 'react'
|
|
2
3
|
import { ComponentFont } from './framer.js'
|
|
3
4
|
|
|
4
5
|
function deduplicateByKey<T>(arr: T[], key: (k: T) => string): T[] {
|
|
@@ -248,3 +249,40 @@ export function groupBy<T>(arr: T[], key: (x: T) => string) {
|
|
|
248
249
|
function sortByKey<T>(arr: T[], key: (x: T) => string) {
|
|
249
250
|
return arr.slice().sort((a, b) => key(a).localeCompare(key(b)))
|
|
250
251
|
}
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* Custom withCSS function that restores the previous behavior
|
|
255
|
+
* of rendering inline style tags instead of using cssCollector
|
|
256
|
+
*/
|
|
257
|
+
export function withCSS(Component: any, escapedCSS: any, componentSerializationId?: string) {
|
|
258
|
+
const framerCSSMarker = 'data-framer-css-ssr'
|
|
259
|
+
|
|
260
|
+
return (props: any) => {
|
|
261
|
+
// Check if we're in SSR mode
|
|
262
|
+
const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined'
|
|
263
|
+
|
|
264
|
+
if (!isBrowser) {
|
|
265
|
+
// Server-side: render style tags like the old behavior
|
|
266
|
+
const id = componentSerializationId
|
|
267
|
+
const cssContent = typeof escapedCSS === 'function'
|
|
268
|
+
? escapedCSS('EXPORT')
|
|
269
|
+
: Array.isArray(escapedCSS)
|
|
270
|
+
? escapedCSS.join('\n')
|
|
271
|
+
: escapedCSS
|
|
272
|
+
|
|
273
|
+
return (
|
|
274
|
+
<>
|
|
275
|
+
<style
|
|
276
|
+
{...{[framerCSSMarker]: true}}
|
|
277
|
+
data-framer-component={id}
|
|
278
|
+
dangerouslySetInnerHTML={{__html: cssContent}}
|
|
279
|
+
/>
|
|
280
|
+
<Component {...props} />
|
|
281
|
+
</>
|
|
282
|
+
)
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
// Client-side: just render the component
|
|
286
|
+
return <Component {...props} />
|
|
287
|
+
}
|
|
288
|
+
}
|
package/src/exporter.ts
CHANGED
|
@@ -1202,7 +1202,7 @@ export async function extractPropControlsUnsafe(
|
|
|
1202
1202
|
UNFRAMER_MAP_PACKAGES,
|
|
1203
1203
|
),
|
|
1204
1204
|
},
|
|
1205
|
-
},
|
|
1205
|
+
} as any,
|
|
1206
1206
|
(err, stdout, stderr) => {
|
|
1207
1207
|
clearTimeout(timer)
|
|
1208
1208
|
if (err) {
|
|
@@ -1211,7 +1211,7 @@ export async function extractPropControlsUnsafe(
|
|
|
1211
1211
|
return rej(err)
|
|
1212
1212
|
}
|
|
1213
1213
|
|
|
1214
|
-
res(stdout)
|
|
1214
|
+
res(stdout.toString())
|
|
1215
1215
|
},
|
|
1216
1216
|
)
|
|
1217
1217
|
|
|
@@ -1434,29 +1434,29 @@ export async function createExampleComponentCode({
|
|
|
1434
1434
|
// Order first by nodeDepth (lower is better)
|
|
1435
1435
|
return a.nodeDepth - b.nodeDepth || a.pageOrdering - b.pageOrdering
|
|
1436
1436
|
})
|
|
1437
|
-
|
|
1437
|
+
|
|
1438
1438
|
// If no instances, use components directly
|
|
1439
1439
|
if (!instances?.length) {
|
|
1440
1440
|
const componentNames = Object.keys(config.components || {})
|
|
1441
1441
|
if (!componentNames.length) {
|
|
1442
1442
|
return { outDirForExample, exampleCode: '' }
|
|
1443
1443
|
}
|
|
1444
|
-
|
|
1444
|
+
|
|
1445
1445
|
// Generate simple example with all available components
|
|
1446
1446
|
const imports = componentNames.map((name) => {
|
|
1447
1447
|
return `import ${componentCamelCase(name)} from './${outDirForExample}/${name}'`
|
|
1448
1448
|
})
|
|
1449
|
-
|
|
1449
|
+
|
|
1450
1450
|
const jsx = componentNames.map((name) => {
|
|
1451
1451
|
return `<${componentCamelCase(name)}.Responsive />`
|
|
1452
1452
|
})
|
|
1453
|
-
|
|
1453
|
+
|
|
1454
1454
|
let containerClasses = ''
|
|
1455
1455
|
if (config.pageBackgroundColor) {
|
|
1456
1456
|
let bg = config.pageBackgroundColor?.replace(/ /g, '_')
|
|
1457
1457
|
containerClasses += `bg-[${bg}]`
|
|
1458
1458
|
}
|
|
1459
|
-
|
|
1459
|
+
|
|
1460
1460
|
const exampleCode = dedent`
|
|
1461
1461
|
import './${outDirForExample}/styles.css'
|
|
1462
1462
|
|
|
@@ -1470,7 +1470,7 @@ export async function createExampleComponentCode({
|
|
|
1470
1470
|
);
|
|
1471
1471
|
};
|
|
1472
1472
|
`
|
|
1473
|
-
|
|
1473
|
+
|
|
1474
1474
|
return {
|
|
1475
1475
|
outDirForExample,
|
|
1476
1476
|
exampleCode,
|