unframer 3.1.0 → 3.2.1

package/src/cli.ts

@@ -39,6 +39,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
         default: true,
     })
     .option('--debug', 'Enable debug logging', { default: false })
+    .option('--metafile', 'Generate meta.json file with build metadata', { default: false })
     .action(async function main(projectId, options) {
         const external_ = options.external
         const allExternal = external_ === true
@@ -71,6 +72,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                     watch,
                     cwd,
                     signal,
+                    metafile: options.metafile,
                 })
                 // console.log('buildContext', buildContext)
                 if (!websiteUrl || !options.watch) {
@@ -140,6 +142,7 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
                 watch,
                 signal: controller.signal,
                 cwd: path.resolve(process.cwd(), config.outDir || 'framer'),
+                metafile: options.metafile,
             })
             await buildContext.dispose?.()
         } catch (error) {

package/src/exporter.ts

@@ -54,6 +54,7 @@ import {
     stackblitzDemoExample,
     terminalMarkdown,
 } from './utils.js'
+import pico from 'picocolors'
 import { installPackagesBatch } from './package-manager.js'
 import { version as currentUnframerVersion } from './version.js'
 
@@ -89,11 +90,13 @@ export async function bundle({
     cwd: out = '',
     watch = false,
     signal = undefined as AbortSignal | undefined,
+    metafile = false,
 }: {
     config: Config
     cwd: string
     watch?: boolean
     signal?: AbortSignal
+    metafile?: boolean
 }) {
     const { components, breakpoints, tokens, framerWebPages } = config
     out ||= path.resolve(process.cwd(), 'example')
@@ -557,7 +560,7 @@ export async function bundle({
             })
             .filter(Boolean)
             .concat([
-                path.resolve(out, 'meta.json'),
+                ...(metafile ? [path.resolve(out, 'meta.json')] : []),
                 path.resolve(out, 'tokens.css'),
                 path.resolve(out, '.cursorignore'),
                 path.resolve(out, 'styles.css'),
@@ -577,11 +580,13 @@ export async function bundle({
             }
         }
 
-        await fs.promises.writeFile(
-            path.resolve(out, 'meta.json'),
-            JSON.stringify(buildResult.metafile, null, 2),
-            'utf-8',
-        )
+        if (metafile) {
+            await fs.promises.writeFile(
+                path.resolve(out, 'meta.json'),
+                JSON.stringify(buildResult.metafile, null, 2),
+                'utf-8',
+            )
+        }
 
         if (signal?.aborted) {
             throw new Error('aborted')
@@ -809,37 +814,59 @@ export async function bundle({
         })
         await fs.promises.writeFile(stackblitzDemoExample, exampleCode)
     }
-    // Build the output message
-
-    let outputMessage = dedent`
-    # How to use the Framer components
+    // Build the colorful output message
+    console.log()
+    console.log(pico.cyan(pico.bold('How to use the Framer components')))
+    console.log()
 
-    Your components are exported to \`${outDirForExample}\` folder.
+    console.log(
+        pico.green('✓') +
+            ' Your components are exported to ' +
+            pico.yellow(outDirForExample) +
+            ' folder',
+    )
+    console.log()
 
-    Each component has a \`.Responsive\` variant that allows you to specify different variants for different breakpoints.
-    `
+    console.log(
+        pico.dim('Each component has a ') +
+            pico.cyan('.Responsive') +
+            pico.dim(' variant that allows you to'),
+    )
+    console.log(
+        pico.dim('specify different variants for different breakpoints.'),
+    )
 
     if (exampleCode) {
-        outputMessage += dedent`
-
-        You can use the components like this (try copy pasting the code below into your React app):
-
-        \`\`\`jsx
-        ${exampleCode}
-        \`\`\`
-        `
+        console.log()
+        console.log(pico.magenta('You can use the components like this:'))
+        console.log(
+            pico.dim('(try copy pasting the code below into your React app)'),
+        )
+        console.log()
+        console.log(exampleCode)
     }
 
-    outputMessage += dedent`
-
-    Remember to import the \`styles.css\` file to include the necessary styles for the components.
-
-    To style components you can pass a \`style\` or \`className\` prop (but remember to use !important to increase the specificity).
-
-    Read more on GitHub: https://github.com/remorses/unframer
-    `
-
-    console.log(terminalMarkdown(outputMessage))
+    console.log()
+    console.log(
+        pico.yellow('⚠') +
+            '  Remember to import the ' +
+            pico.cyan('styles.css') +
+            ' file to include',
+    )
+    console.log('   the necessary styles for the components.')
+    console.log()
+    console.log(
+        pico.dim('To style components you can pass a ') +
+            pico.cyan('style') +
+            pico.dim(' or ') +
+            pico.cyan('className') +
+            pico.dim(' prop'),
+    )
+    console.log()
+    console.log(
+        pico.dim('Read more on GitHub: ') +
+            pico.underline(pico.blue('https://github.com/remorses/unframer')),
+    )
     console.log()
     return { result, rebuild, buildContext }
 }
@@ -1407,7 +1434,48 @@ export async function createExampleComponentCode({
         // Order first by nodeDepth (lower is better)
         return a.nodeDepth - b.nodeDepth || a.pageOrdering - b.pageOrdering
     })
-    if (!instances?.length) return { outDirForExample, exampleCode: '' }
+    
+    // If no instances, use components directly
+    if (!instances?.length) {
+        const componentNames = Object.keys(config.components || {})
+        if (!componentNames.length) {
+            return { outDirForExample, exampleCode: '' }
+        }
+        
+        // Generate simple example with all available components
+        const imports = componentNames.map((name) => {
+            return `import ${componentCamelCase(name)} from './${outDirForExample}/${name}'`
+        })
+        
+        const jsx = componentNames.map((name) => {
+            return `<${componentCamelCase(name)}.Responsive />`
+        })
+        
+        let containerClasses = ''
+        if (config.pageBackgroundColor) {
+            let bg = config.pageBackgroundColor?.replace(/ /g, '_')
+            containerClasses += `bg-[${bg}]`
+        }
+        
+        const exampleCode = dedent`
+          import './${outDirForExample}/styles.css'
+
+          ${indentWithTabs(imports?.join('\n'), '')}
+
+          export default function App() {
+            return (
+              <div className='flex flex-col items-center gap-3 ${containerClasses}'>
+                ${indentWithTabs(jsx?.join('\n'), '          ')}
+              </div>
+            );
+          };
+          `
+        
+        return {
+            outDirForExample,
+            exampleCode,
+        }
+    }
 
     const imports = instances?.map((exampleComponent) => {
         return `import ${componentCamelCase(exampleComponent?.componentPathSlug)} from './${outDirForExample}/${
@@ -1438,7 +1506,7 @@ export async function createExampleComponentCode({
 
     let containerClasses = ''
     if (config.pageBackgroundColor) {
-        let bg = config.pageBackgroundColor?.replace(' ', '_')
+        let bg = config.pageBackgroundColor?.replace(/ /g, '_')
         containerClasses += `bg-[${bg}]`
     }
 

package/src/framer-chunks/fontshare-2X4LZ75B-D2V5BX73.js

@@ -0,0 +1,7 @@
+import "./chunk-A2PMVMFI.js";
+
+// /:https://app.framerstatic.com/fontshare-2X4LZ75B.mjs
+var fontshare_default = { "FS;Red Hat Display": [{ tag: "wght", minValue: 300, maxValue: 900, defaultValue: 400, name: "Weight" }], "FS;Lora": [{ tag: "wght", minValue: 400, maxValue: 700, defaultValue: 400, name: "Weight" }], "FS;Plus Jakarta Sans": [{ tag: "wght", minValue: 200, maxValue: 800, defaultValue: 400, name: "Weight" }], "FS;Kalam": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Work Sans": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 400, name: "Weight" }], "FS;Styro": [{ tag: "wght", minValue: 200, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Clash Display": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Cabinet Grotesk": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Excon": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Panchang": [{ tag: "wght", minValue: 200, maxValue: 800, defaultValue: 800, name: "Weight" }], "FS;Sentient": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Boska": [{ tag: "wght", minValue: 200, maxValue: 900, defaultValue: 200, name: "Weight" }], "FS;Switzer": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 400, name: "Weight" }], "FS;Clash Grotesk": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Bespoke Serif": [{ tag: "wght", minValue: 300, maxValue: 800, defaultValue: 300, name: "Weight" }], "FS;Khand": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Teko": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Montserrat": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;Karma": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Erode": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Syne": [{ tag: "wght", minValue: 400, maxValue: 800, defaultValue: 400, name: "Weight" }], "FS;Bespoke Sans": [{ tag: "wght", minValue: 300, maxValue: 800, defaultValue: 800, name: "Weight" }], "FS;Nunito": [{ tag: "wght", minValue: 200, maxValue: 1e3, defaultValue: 700, name: "Weight" }], "FS;Stick No Bills": [{ tag: "wght", minValue: 200, maxValue: 800, defaultValue: 200, name: "Weight" }], "FS;Oswald": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 400, name: "Weight" }], "FS;Bespoke Stencil": [{ tag: "wght", minValue: 300, maxValue: 800, defaultValue: 800, name: "Weight" }], "FS;Literata": [{ tag: "wght", minValue: 200, maxValue: 900, defaultValue: 900, name: "Weight" }, { tag: "opsz", minValue: 7, maxValue: 72, defaultValue: 7, name: "Optical Size" }], "FS;Bevellier": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;Dancing Script": [{ tag: "wght", minValue: 400, maxValue: 700, defaultValue: 400, name: "Weight" }], "FS;Supreme": [{ tag: "wght", minValue: 100, maxValue: 800, defaultValue: 800, name: "Weight" }], "FS;Satoshi": [{ tag: "wght", minValue: 300, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Space Grotesk": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Synonym": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;JetBrains Mono": [{ tag: "wght", minValue: 100, maxValue: 800, defaultValue: 400, name: "Weight" }], "FS;Hoover": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Azeret Mono": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;Britney": [{ tag: "wght", minValue: 300, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Melodrama": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Asap": [{ tag: "wght", minValue: 400, maxValue: 700, defaultValue: 400, name: "Weight" }], "FS;Sora": [{ tag: "wght", minValue: 100, maxValue: 800, defaultValue: 400, name: "Weight" }], "FS;Halant": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Tillana": [{ tag: "wght", minValue: 400, maxValue: 800, defaultValue: 400, name: "Weight" }], "FS;Spline Sans": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 400, name: "Weight" }], "FS;Sharpie": [{ tag: "wght", minValue: 300, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Quicksand": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Karla": [{ tag: "wght", minValue: 200, maxValue: 800, defaultValue: 400, name: "Weight" }], "FS;Bespoke Slab": [{ tag: "wght", minValue: 300, maxValue: 800, defaultValue: 800, name: "Weight" }], "FS;Technor": [{ tag: "wght", minValue: 200, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Rowan": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Bonny": [{ tag: "wght", minValue: 100, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Nippo": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Paquito": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Chillax": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Chubbo": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 400, name: "Weight" }], "FS;Telma": [{ tag: "wght", minValue: 300, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Roundo": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 200, name: "Weight" }], "FS;Public Sans": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;Familjen Grotesk": [{ tag: "wght", minValue: 400, maxValue: 700, defaultValue: 400, name: "Weight" }], "FS;Rajdhani": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Be Vietnam Pro": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;Zodiak": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;General Sans": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Pilcrow Rounded": [{ tag: "wght", minValue: 400, maxValue: 900, defaultValue: 400, name: "Weight" }], "FS;Trench Slab": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Manrope": [{ tag: "wght", minValue: 200, maxValue: 800, defaultValue: 200, name: "Weight" }], "FS;Hind": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Tabular": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Pramukh Rounded": [{ tag: "wght", minValue: 200, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Ranade": [{ tag: "wght", minValue: 100, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Outfit": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;New Title": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 200, name: "Weight" }], "FS;Fira Sans": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 400, name: "Weight" }], "FS;Urbanist": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;Quilon": [{ tag: "wght", minValue: 400, maxValue: 700, defaultValue: 400, name: "Weight" }], "FS;Poppins": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;Gambetta": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Recia": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Merriweather Sans": [{ tag: "wght", minValue: 300, maxValue: 800, defaultValue: 300, name: "Weight" }], "FS;Pally": [{ tag: "wght", minValue: 400, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Alpino": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Archivo": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 600, name: "Weight" }], "FS;Author": [{ tag: "wght", minValue: 200, maxValue: 700, defaultValue: 700, name: "Weight" }], "FS;Amulya": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }], "FS;Expose": [{ tag: "wght", minValue: 400, maxValue: 900, defaultValue: 400, name: "Weight" }], "FS;Epilogue": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 400, name: "Weight" }], "FS;Crimson Pro": [{ tag: "wght", minValue: 200, maxValue: 900, defaultValue: 400, name: "Weight" }], "FS;Neco": [{ tag: "wght", minValue: 400, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Raleway": [{ tag: "wght", minValue: 100, maxValue: 900, defaultValue: 100, name: "Weight" }], "FS;Plein": [{ tag: "wght", minValue: 300, maxValue: 900, defaultValue: 900, name: "Weight" }], "FS;Laila": [{ tag: "wght", minValue: 300, maxValue: 700, defaultValue: 300, name: "Weight" }] };
+export {
+  fontshare_default as default
+};

package/src/framer-chunks/fontshare-EOIRPPWV-VDFFNW4K.js

@@ -0,0 +1,7 @@
+import "./chunk-A2PMVMFI.js";
+
+// /:https://app.framerstatic.com/fontshare-EOIRPPWV.mjs
+var fontshare_default = { "FS;Red Hat Display": true, "FS;Lora": true, "FS;Aktura": true, "FS;Plus Jakarta Sans": true, "FS;Kalam": true, "FS;Gambarino": true, "FS;Work Sans": true, "FS;Styro": true, "FS;Kihim": true, "FS;Clash Display": true, "FS;Cabinet Grotesk": true, "FS;Stardom": true, "FS;Excon": true, "FS;Panchang": true, "FS;Sentient": true, "FS;Boska": true, "FS;Switzer": true, "FS;Clash Grotesk": true, "FS;Bespoke Serif": true, "FS;Khand": true, "FS;Teko": true, "FS;Montserrat": true, "FS;Karma": true, "FS;Erode": true, "FS;Syne": true, "FS;Zina": true, "FS;Bespoke Sans": true, "FS;Nunito": true, "FS;Stick No Bills": true, "FS;Oswald": true, "FS;Rosaline": true, "FS;Bespoke Stencil": true, "FS;Literata": true, "FS;Anton": true, "FS;Bevellier": true, "FS;Dancing Script": true, "FS;Supreme": true, "FS;Satoshi": true, "FS;Space Grotesk": true, "FS;Synonym": true, "FS;JetBrains Mono": true, "FS;Tanker": true, "FS;Hoover": true, "FS;Azeret Mono": true, "FS;Britney": true, "FS;Melodrama": true, "FS;Array": true, "FS;Asap": true, "FS;Sora": true, "FS;Comico": true, "FS;Halant": true, "FS;Ballet": true, "FS;Tillana": true, "FS;Spline Sans": true, "FS;Segment": true, "FS;Kola": true, "FS;Sharpie": true, "FS;Quicksand": true, "FS;Karla": true, "FS;RX100": true, "FS;Kohinoor Zerone": true, "FS;Bespoke Slab": true, "FS;Technor": true, "FS;Rowan": true, "FS;Bonny": true, "FS;Pencerio": true, "FS;Nippo": true, "FS;Paquito": true, "FS;Chillax": true, "FS;Chubbo": true, "FS;Telma": true, "FS;Roundo": true, "FS;Public Sans": true, "FS;Familjen Grotesk": true, "FS;Rajdhani": true, "FS;Be Vietnam Pro": true, "FS;Zodiak": true, "FS;General Sans": true, "FS;Pilcrow Rounded": true, "FS;Trench Slab": true, "FS;Boxing": true, "FS;Manrope": true, "FS;Hind": true, "FS;Tabular": true, "FS;Pramukh Rounded": true, "FS;Ranade": true, "FS;Outfit": true, "FS;New Title": true, "FS;Fira Sans": true, "FS;Urbanist": true, "FS;Quilon": true, "FS;Poppins": true, "FS;Gambetta": true, "FS;Recia": true, "FS;Merriweather Sans": true, "FS;Rozha One": true, "FS;Pally": true, "FS;Bebas Neue": true, "FS;Alpino": true, "FS;Lobster": true, "FS;Archivo": true, "FS;Author": true, "FS;Amulya": true, "FS;Expose": true, "FS;Epilogue": true, "FS;Crimson Pro": true, "FS;Neco": true, "FS;Striper": true, "FS;Raleway": true, "FS;Plein": true, "FS;Laila": true };
+export {
+  fontshare_default as default
+};