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.
Files changed (131) hide show
  1. package/README.md +4 -4
  2. package/dist/cli.d.ts.map +1 -1
  3. package/dist/cli.js +106 -7
  4. package/dist/cli.js.map +1 -1
  5. package/dist/css.d.ts +5 -0
  6. package/dist/css.d.ts.map +1 -1
  7. package/dist/css.js +25 -0
  8. package/dist/css.js.map +1 -1
  9. package/dist/exporter.js +1 -1
  10. package/dist/exporter.js.map +1 -1
  11. package/dist/framer-chunks/chunk-VUHWYTYT.d.ts +15 -0
  12. package/dist/framer-chunks/chunk-VUHWYTYT.d.ts.map +1 -0
  13. package/dist/framer-chunks/chunk-VUHWYTYT.js +111 -0
  14. package/dist/framer-chunks/chunk-VUHWYTYT.js.map +1 -0
  15. package/dist/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.d.ts +634 -0
  16. package/dist/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.d.ts.map +1 -0
  17. package/dist/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js +8 -0
  18. package/dist/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js.map +1 -0
  19. package/dist/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.d.ts +115 -0
  20. package/dist/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.d.ts.map +1 -0
  21. package/dist/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js +8 -0
  22. package/dist/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js.map +1 -0
  23. package/dist/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.d.ts +781 -0
  24. package/dist/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.d.ts.map +1 -0
  25. package/dist/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js +8 -0
  26. package/dist/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js.map +1 -0
  27. package/dist/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.d.ts +18 -0
  28. package/dist/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.d.ts.map +1 -0
  29. package/dist/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js +8 -0
  30. package/dist/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js.map +1 -0
  31. package/dist/framer-chunks/google-63PUBKA6-AMAUIPXM.d.ts +1566 -0
  32. package/dist/framer-chunks/google-63PUBKA6-AMAUIPXM.d.ts.map +1 -0
  33. package/dist/framer-chunks/google-63PUBKA6-AMAUIPXM.js +8 -0
  34. package/dist/framer-chunks/google-63PUBKA6-AMAUIPXM.js.map +1 -0
  35. package/dist/framer-chunks/google-7QNFQWAU-FKX5MRKV.d.ts +3588 -0
  36. package/dist/framer-chunks/google-7QNFQWAU-FKX5MRKV.d.ts.map +1 -0
  37. package/dist/framer-chunks/google-7QNFQWAU-FKX5MRKV.js +8 -0
  38. package/dist/framer-chunks/google-7QNFQWAU-FKX5MRKV.js.map +1 -0
  39. package/dist/framer-chunks/google-KTMKGB4J-RA7CAZTC.d.ts +10293 -0
  40. package/dist/framer-chunks/google-KTMKGB4J-RA7CAZTC.d.ts.map +1 -0
  41. package/dist/framer-chunks/google-KTMKGB4J-RA7CAZTC.js +8 -0
  42. package/dist/framer-chunks/google-KTMKGB4J-RA7CAZTC.js.map +1 -0
  43. package/dist/framer.js +1477 -910
  44. package/dist/generated/api-client.d.ts +1 -1
  45. package/dist/generated/api-client.d.ts.map +1 -1
  46. package/dist/index.d.ts +3 -0
  47. package/dist/index.d.ts.map +1 -1
  48. package/dist/index.js +6 -1
  49. package/dist/index.js.map +1 -1
  50. package/dist/package-manager.d.ts +1 -1
  51. package/dist/package-manager.d.ts.map +1 -1
  52. package/dist/package-manager.js.map +1 -1
  53. package/dist/stackblitz.d.ts +9 -0
  54. package/dist/stackblitz.d.ts.map +1 -0
  55. package/dist/stackblitz.js +182 -0
  56. package/dist/stackblitz.js.map +1 -0
  57. package/dist/version.d.ts +1 -1
  58. package/dist/version.js +1 -1
  59. package/esm/cli.d.ts.map +1 -1
  60. package/esm/cli.js +108 -9
  61. package/esm/cli.js.map +1 -1
  62. package/esm/css.d.ts +5 -0
  63. package/esm/css.d.ts.map +1 -1
  64. package/esm/css.js +24 -0
  65. package/esm/css.js.map +1 -1
  66. package/esm/exporter.js +1 -1
  67. package/esm/exporter.js.map +1 -1
  68. package/esm/framer-chunks/chunk-VUHWYTYT.d.ts +15 -0
  69. package/esm/framer-chunks/chunk-VUHWYTYT.d.ts.map +1 -0
  70. package/esm/framer-chunks/chunk-VUHWYTYT.js +96 -0
  71. package/esm/framer-chunks/chunk-VUHWYTYT.js.map +1 -0
  72. package/esm/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.d.ts +634 -0
  73. package/esm/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.d.ts.map +1 -0
  74. package/esm/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js +5 -0
  75. package/esm/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js.map +1 -0
  76. package/esm/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.d.ts +115 -0
  77. package/esm/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.d.ts.map +1 -0
  78. package/esm/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js +5 -0
  79. package/esm/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js.map +1 -0
  80. package/esm/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.d.ts +781 -0
  81. package/esm/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.d.ts.map +1 -0
  82. package/esm/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js +5 -0
  83. package/esm/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js.map +1 -0
  84. package/esm/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.d.ts +18 -0
  85. package/esm/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.d.ts.map +1 -0
  86. package/esm/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js +5 -0
  87. package/esm/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js.map +1 -0
  88. package/esm/framer-chunks/google-63PUBKA6-AMAUIPXM.d.ts +1566 -0
  89. package/esm/framer-chunks/google-63PUBKA6-AMAUIPXM.d.ts.map +1 -0
  90. package/esm/framer-chunks/google-63PUBKA6-AMAUIPXM.js +5 -0
  91. package/esm/framer-chunks/google-63PUBKA6-AMAUIPXM.js.map +1 -0
  92. package/esm/framer-chunks/google-7QNFQWAU-FKX5MRKV.d.ts +3588 -0
  93. package/esm/framer-chunks/google-7QNFQWAU-FKX5MRKV.d.ts.map +1 -0
  94. package/esm/framer-chunks/google-7QNFQWAU-FKX5MRKV.js +5 -0
  95. package/esm/framer-chunks/google-7QNFQWAU-FKX5MRKV.js.map +1 -0
  96. package/esm/framer-chunks/google-KTMKGB4J-RA7CAZTC.d.ts +10293 -0
  97. package/esm/framer-chunks/google-KTMKGB4J-RA7CAZTC.d.ts.map +1 -0
  98. package/esm/framer-chunks/google-KTMKGB4J-RA7CAZTC.js +5 -0
  99. package/esm/framer-chunks/google-KTMKGB4J-RA7CAZTC.js.map +1 -0
  100. package/esm/framer.js +1214 -650
  101. package/esm/index.d.ts +3 -0
  102. package/esm/index.d.ts.map +1 -1
  103. package/esm/index.js +4 -0
  104. package/esm/index.js.map +1 -1
  105. package/esm/package-manager.d.ts +1 -1
  106. package/esm/package-manager.d.ts.map +1 -1
  107. package/esm/package-manager.js.map +1 -1
  108. package/esm/stackblitz.d.ts +9 -0
  109. package/esm/stackblitz.d.ts.map +1 -0
  110. package/esm/stackblitz.js +179 -0
  111. package/esm/stackblitz.js.map +1 -0
  112. package/esm/version.d.ts +1 -1
  113. package/esm/version.js +1 -1
  114. package/package.json +3 -3
  115. package/src/cli.ts +122 -11
  116. package/src/{css.ts → css.tsx} +38 -0
  117. package/src/exporter.ts +8 -8
  118. package/src/framer-chunks/chunk-VUHWYTYT.js +105 -0
  119. package/src/framer-chunks/fontshare-SWUWNY3H-GSSY33IO.js +7 -0
  120. package/src/framer-chunks/fontshare-V2SGEFJT-AVIABYEX.js +7 -0
  121. package/src/framer-chunks/fontshare-YCG7BCG4-T3OENDSJ.js +7 -0
  122. package/src/framer-chunks/framer-font-T5XNAHJ3-SBU5UWOY.js +7 -0
  123. package/src/framer-chunks/google-63PUBKA6-AMAUIPXM.js +7 -0
  124. package/src/framer-chunks/google-7QNFQWAU-FKX5MRKV.js +7 -0
  125. package/src/framer-chunks/google-KTMKGB4J-RA7CAZTC.js +7 -0
  126. package/src/framer.js +1207 -634
  127. package/src/index.ts +6 -0
  128. package/src/package-manager.ts +2 -4
  129. package/src/stackblitz.ts +193 -0
  130. package/src/styles/framer.css +24 -0
  131. package/src/version.ts +1 -1
package/src/index.ts CHANGED
@@ -14,3 +14,9 @@ export {
14
14
  } from './react.js'
15
15
 
16
16
  export { Link, ResolveLinks }
17
+
18
+ // Override withCSS with our custom implementation that restores style tags
19
+ import { withCSS as withCSSOriginal } from './framer.js'
20
+ import { withCSS } from './css.js'
21
+
22
+ export { withCSSOriginal, withCSS }
package/src/package-manager.ts CHANGED
@@ -4,7 +4,7 @@ import { logger, spinner } from './utils.js'
4
4
 
5
5
  const execAsync = promisify(exec)
6
6
 
7
- export async function getPackageManager(targetDir: string) {
7
+ export async function getPackageManager(targetDir?: string) {
8
8
  const { detect } = await import('@antfu/ni')
9
9
  const packageManager = await detect({ programmatic: true, cwd: targetDir })
10
10
 
@@ -139,9 +139,7 @@ export async function installPackagesBatch({
139
139
 
140
140
  child.on('close', (code) => {
141
141
  if (code === 0) {
142
- spinner.info(
143
- `Successfully installed packages`,
144
- )
142
+ spinner.info(`Successfully installed packages`)
145
143
  resolve({ success: true })
146
144
  } else {
147
145
  const errorMessage = `Installation failed with exit code ${code}`
package/src/stackblitz.ts ADDED
@@ -0,0 +1,193 @@
1
+ import { dedent } from './utils'
2
+
3
+ export function generateStackblitzFiles({
4
+ projectId,
5
+ appComponentCode = '',
6
+ title = '',
7
+ }): { relativePath: string; contents: string }[] {
8
+ const packageJson = {
9
+ name: 'unframer-vite-react-typescript-starter',
10
+ private: true,
11
+ version: '0.0.0',
12
+ type: 'module',
13
+ stackblitz: {
14
+ startCommand: `STACKBLITZ_DEMO_EXAMPLE=src/App.tsx npm run framer && npm run dev`,
15
+ },
16
+ scripts: {
17
+ dev: 'vite',
18
+ build: 'vite build',
19
+ framer: `unframer ${projectId} --outDir src/framer`,
20
+ },
21
+ dependencies: {
22
+ react: 'latest',
23
+ unframer: 'latest',
24
+ 'react-dom': 'latest',
25
+ },
26
+ devDependencies: {
27
+ '@types/react': 'latest',
28
+ '@types/react-dom': 'latest',
29
+ '@vitejs/plugin-react': 'latest',
30
+ tailwindcss: '^3.4.0',
31
+ postcss: '^8.4.0',
32
+ autoprefixer: '^10.4.0',
33
+ typescript: 'latest',
34
+ vite: 'latest',
35
+ },
36
+ }
37
+
38
+ const tsconfig = {
39
+ compilerOptions: {
40
+ target: 'ES2020',
41
+ useDefineForClassFields: true,
42
+ lib: ['ES2020', 'DOM', 'DOM.Iterable'],
43
+ module: 'ESNext',
44
+ skipLibCheck: true,
45
+ moduleResolution: 'bundler',
46
+ allowImportingTsExtensions: true,
47
+ resolveJsonModule: true,
48
+ isolatedModules: true,
49
+ noEmit: true,
50
+ jsx: 'react-jsx',
51
+ noUnusedLocals: true,
52
+ noUnusedParameters: true,
53
+ noFallthroughCasesInSwitch: true,
54
+ },
55
+ include: ['src'],
56
+ }
57
+
58
+ const viteConfig = dedent`
59
+
60
+ import { defineConfig } from 'vite'
61
+ import react from '@vitejs/plugin-react'
62
+
63
+ // https://vitejs.dev/config/
64
+ export default defineConfig({
65
+ plugins: [react()],
66
+ })
67
+
68
+ `
69
+
70
+ const postcssConfig = dedent`
71
+
72
+ export default {
73
+ plugins: {
74
+ tailwindcss: {},
75
+ autoprefixer: {},
76
+ }
77
+ }
78
+
79
+ `
80
+
81
+ const tailwindConfig = dedent`
82
+
83
+ /** @type {import('tailwindcss').Config} */
84
+ export default {
85
+ content: [
86
+ "./index.html",
87
+ "./src/**/*.{js,ts,jsx,tsx}",
88
+ ],
89
+ theme: {
90
+ extend: {},
91
+ },
92
+ plugins: [],
93
+ }
94
+
95
+ `
96
+
97
+ const indexHtml = dedent`
98
+
99
+ <!doctype html>
100
+ <html lang="en">
101
+ <head>
102
+ <meta charset="UTF-8" />
103
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
104
+ <title>Unframer + Vite + React + TS</title>
105
+ </head>
106
+ <body>
107
+ <div id="root"></div>
108
+ <script type="module" src="/src/main.tsx"></script>
109
+ </body>
110
+ </html>
111
+
112
+ `
113
+
114
+ const app =
115
+ appComponentCode ||
116
+ dedent`
117
+ const docs = \`
118
+ # Unframer Demo Project
119
+
120
+ This is a demo project showing how to use Unframer to export Framer components to React.
121
+
122
+ ## What's happening now:
123
+ If you're seeing this file, the unframer CLI is currently running in the terminal below.
124
+ Just wait until it finishes downloading and bundling your Framer components.
125
+ Once complete, you'll see your components rendered in the browser preview on the right and this file will be replaced with an example.
126
+
127
+ Try making changes to your components in Framer, then run the \`npm run framer\` command again
128
+ to see the updates reflected here.
129
+
130
+ ## How it works:
131
+ 1. The Framer React Export plugin saves your components to the Unframer database
132
+ 2. The unframer CLI downloads and bundles those components into regular React components inside the \`src/framer\` folder
133
+ 3. You can then import and use them in your React app just like any other component
134
+
135
+ \`
136
+
137
+ `
138
+
139
+ const main = dedent`
140
+
141
+ import './index.css'
142
+ import React from 'react'
143
+ import ReactDOM from 'react-dom/client'
144
+ import App from './App'
145
+
146
+ ReactDOM.createRoot(document.getElementById('root')!).render(
147
+ <App />
148
+ )
149
+
150
+ `
151
+
152
+ const css = dedent`
153
+ @tailwind base;
154
+ @tailwind components;
155
+ @tailwind utilities;
156
+ `
157
+
158
+ return [
159
+ {
160
+ relativePath: 'tsconfig.json',
161
+ contents: JSON.stringify(tsconfig, null, 2),
162
+ },
163
+ {
164
+ relativePath: 'package.json',
165
+ contents: JSON.stringify(packageJson, null, 2),
166
+ },
167
+ {
168
+ relativePath: '.gitignore',
169
+ contents: dedent`
170
+
171
+ node_modules
172
+ dist
173
+ .DS_Store
174
+ .env
175
+ .env.*
176
+ .stackblitzrc
177
+ npm-debug.log*
178
+ yarn-debug.log*
179
+ yarn-error.log*
180
+ *.log
181
+
182
+ `,
183
+ },
184
+ { relativePath: 'vite.config.ts', contents: viteConfig },
185
+ { relativePath: 'postcss.config.js', contents: postcssConfig },
186
+ { relativePath: 'tailwind.config.js', contents: tailwindConfig },
187
+ { relativePath: 'index.html', contents: indexHtml },
188
+ { relativePath: 'src/App.tsx', contents: app },
189
+ { relativePath: 'src/index.css', contents: css },
190
+ // { relativePath: 'pnpm-lock.yaml', contents: '\n' },
191
+ { relativePath: 'src/main.tsx', contents: main },
192
+ ]
193
+ }
package/src/styles/framer.css CHANGED
@@ -140,6 +140,15 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
140
140
  --text-underline-offset: var(--framer-link-current-text-decoration-offset, var(--framer-link-text-decoration-offset, var(--framer-text-decoration-offset)));
141
141
  }
142
142
 
143
+ [data-framer-component-type="RichTextContainer"] {
144
+ display: flex;
145
+ flex-direction: column;
146
+ justify-content: flex-start;
147
+ outline: none;
148
+ flex-shrink: 0;
149
+ }
150
+
151
+
143
152
  p.framer-text,
144
153
  div.framer-text,
145
154
  figure.framer-text,
@@ -992,4 +1001,19 @@ NavigationContainer
992
1001
  [data-hide-scrollbars="true"] { scrollbar-width: none; }
993
1002
  @supports (not (overflow: clip)) {
994
1003
  :root { --overflow-clip-fallback: hidden; }
1004
+ }
1005
+ .framer-lightbox-container { opacity: 1 !important; pointer-events: auto !important; }
1006
+ @supports (background: -webkit-named-image(i)) and (not (contain-intrinsic-size: inherit)) {
1007
+ /* Render block-like elements inline when text is truncated, otherwise default to user agent (revert) */
1008
+ div.framer-text, p.framer-text, h1.framer-text, h2.framer-text, h3.framer-text, h4.framer-text, h5.framer-text, h6.framer-text, ol.framer-text, ul.framer-text, li.framer-text, blockquote.framer-text, .framer-text.framer-image { display: var(--text-truncation-display-inline-for-safari-16, revert) }
1009
+
1010
+ /* Add a line break after each block-like element that we render inline, to resemble the block-like behavior */
1011
+ div.framer-text::after, p.framer-text::after, h1.framer-text::after, h2.framer-text::after, h3.framer-text::after, h4.framer-text::after, h5.framer-text::after, h6.framer-text::after, ol.framer-text::after, ul.framer-text::after, li.framer-text::after, blockquote.framer-text::after, .framer-text.framer-image::after { content: var(--text-truncation-line-break-for-safari-16); white-space: pre; }
1012
+
1013
+ /* Don't render modules (e.g. videos, code-blocks), or tables when text is truncated, because often these can't be truncated and their children might be block elements */
1014
+ .framer-text.framer-text-module,
1015
+ .framer-text.framer-table-wrapper { display: var(--text-truncation-display-none-for-safari-16, revert) }
1016
+
1017
+ /* Render text-fill elements inline when text is truncated, otherwise default to their default value (e.g. inline-block) */
1018
+ p.framer-text[data-text-fill] { display: var(--text-truncation-display-inline-for-safari-16, inline-block) }
995
1019
  }
package/src/version.ts CHANGED
@@ -1 +1 @@
1
- export const version = '3.2.1'
1
+ export const version = '3.2.4'