unframer 2.25.2 → 2.25.4

package/esm/generated/api-client.js

@@ -23,5 +23,4 @@ export async function createClient({ url }) {
     return client;
 }
 // export const websiteApiClient = createClient({ url: process.env.PUBLIC_URL! })
-//# sourceMappingURL=api-client.js.map
 //# sourceMappingURL=api-client.js.map

package/esm/generated/api-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"api-client.js","sourceRoot":"","sources":["../../src/generated/api-client.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,EAAE,GAAG,EAAE;IACtC,MAAM,EAAE,qBAAqB,EAAE,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;QACtC,oCAAoC;QACpC,kDAAkD;QAClD,qBAAqB;QACrB,4CAA4C;QAC5C,QAAQ;QACR,iBAAiB;QACjB,KAAK;QACL,+BAA+B;QAC/B,0BAA0B;QAC1B,iDAAiD;QACjD,QAAQ;QACR,sBAAsB;QACtB,KAAK;QACL,OAAO;YACH,OAAO;YACP,yFAAyF;aACxF,CAAC;QACN,CAAC;KACJ,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAClB,CAAC;AACD,iFAAiF;AACjF,sCAAsC"}
+{"version":3,"file":"api-client.js","sourceRoot":"","sources":["../../src/generated/api-client.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,EAAE,GAAG,EAAE;IACtC,MAAM,EAAE,qBAAqB,EAAE,GAAG,MAAM,MAAM,CAAC,kBAAkB,CAAC,CAAA;IAClE,MAAM,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;QACtC,oCAAoC;QACpC,kDAAkD;QAClD,qBAAqB;QACrB,4CAA4C;QAC5C,QAAQ;QACR,iBAAiB;QACjB,KAAK;QACL,+BAA+B;QAC/B,0BAA0B;QAC1B,iDAAiD;QACjD,QAAQ;QACR,sBAAsB;QACtB,KAAK;QACL,OAAO;YACH,OAAO;YACH,yFAAyF;aAC5F,CAAA;QACL,CAAC;KACJ,CAAC,CAAA;IACF,OAAO,MAAM,CAAA;AACjB,CAAC;AACD,iFAAiF"}

package/esm/generated/api-client.test.d.ts

@@ -1,2 +1 @@
-export {};
 //# sourceMappingURL=api-client.test.d.ts.map

package/esm/generated/api-client.test.js

@@ -1,70 +1,2 @@
-import { test, expect } from 'vitest';
-import { createClient } from './client';
-import { env, supabaseRef } from './env';
-import { createSupabaseAdmin, createSupabaseAnon } from './supabase.server';
-import { db } from 'db/kysely';
-test('hono client', async () => {
-    const admin = createSupabaseAdmin();
-    const email = 'test@example.com';
-    const password = 'xxpasswordxx99776';
-    const { error: signupError } = await admin.auth.admin.createUser({
-        email,
-        password,
-        email_confirm: true,
-    });
-    // expect(signupError).toBe(null)
-    const supabase = createSupabaseAnon();
-    const { data, error } = await supabase.auth.signInWithPassword({
-        email,
-        password,
-    });
-    expect(error).toBe(null);
-    const session = data.session;
-    const client = createClient({
-        url: `http://localhost:${env.PORT}`,
-        session,
-        supabaseRef,
-    });
-    const res = await client.api.v1.health.$get({});
-    expect(res.status).toBe(200);
-    const json = await res.json();
-    expect(json).toMatchInlineSnapshot(`
-      {
-        "ok": true,
-      }
-    `);
-});
-test('get conversations with my account', async () => {
-    const admin = createSupabaseAdmin();
-    const email = 'beats.by.morse@gmail.com';
-    const password = env.CRISP_WEBHOOKS_SECRET;
-    const user = await db
-        .selectFrom('auth.users')
-        .selectAll()
-        .where('email', '=', email)
-        .executeTakeFirst();
-    // uncomment this to set the password the first time
-    // const { error: signupError } = await admin.auth.admin.updateUserById(
-    //     user!.id,
-    //     { password },
-    // )
-    // expect(signupError).toBe(null)
-    const supabase = createSupabaseAnon();
-    const { data, error } = await supabase.auth.signInWithPassword({
-        email,
-        password,
-    });
-    expect(error).toBe(null);
-    const session = data.session;
-    const client = createClient({
-        url: `http://localhost:${env.PORT}`,
-        session,
-        supabaseRef,
-    });
-    const res = await client.api.v1.conversations.$get({});
-    expect(res.status).toBe(200);
-    const json = await res.json();
-    expect(json.conversations.length).toBeGreaterThan(0);
-    console.log(json.conversations);
-});
+"use strict";
 //# sourceMappingURL=api-client.test.js.map

package/esm/generated/api-client.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"api-client.test.js","sourceRoot":"","sources":["../../src/generated/api-client.test.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"api-client.test.js","sourceRoot":"","sources":["../../src/generated/api-client.test.js"],"names":[],"mappings":""}

package/esm/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "2.25.2";
+export declare const version = "2.25.4";
 //# sourceMappingURL=version.d.ts.map

package/esm/version.js

@@ -1,2 +1,2 @@
-export const version = '2.25.2';
+export const version = '2.25.4';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unframer",
-  "version": "2.25.2",
+  "version": "2.25.4",
   "description": "Import Framer components directly in your React app, type safe and customizable",
   "sideEffects": false,
   "repository": "https://github.com/remorses/unframer",
@@ -45,10 +45,10 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@sentry/node": "^9.13.0",
+    "@sentry/node": "^9.22.0",
     "async-sema": "^3.1.1",
     "cac": "^6.7.14",
-    "esbuild": "^0.25.3",
+    "esbuild": "^0.25.4",
     "esbuild-plugins-node-modules-polyfill": "^1.6.8",
     "find-up": "^7.0.0",
     "json5": "^2.2.3",
@@ -72,7 +72,7 @@
     "@types/babel__core": "^7.20.5",
     "@types/babel__traverse": "^7.20.6",
     "@types/bun": "^1.1.6",
-    "@types/node": "^22.13.4",
+    "@types/node": "^22.15.21",
     "@types/react": "^19.1.3",
     "@xmorse/deployment-utils": "^0.2.19",
     "concurrently": "^9.1.2",

package/src/{cli.tsx → cli.ts}

@@ -9,7 +9,7 @@ import { cac } from 'cac'
 
 import fs from 'fs'
 import path, { basename } from 'path'
-import { BreakpointSizes } from './css.js'
+import { BreakpointSizes, defaultBreakpointSizes } from './css.js'
 import {
     componentNameToPath,
     dispatcher,
@@ -53,72 +53,15 @@ cli.command('[projectId]', 'Run unframer with optional project ID')
             const signal = controller.signal
             const watch = options.watch
             if (projectId) {
-                logger.log(`Fetching config for project ${projectId}`)
-
-                const client = await createClient({
-                    url:
-                        process.env.UNFRAMER_SERVER_URL ||
-                        'https://unframer.co',
-                    
+                const { config, cwd, websiteUrl } = await configFromFetch({
+                    allExternal,
+                    externalPackages,
+                    outDir,
+                    projectId,
                 })
-
-                spinner.start(`Fetching config for project ${projectId}`)
-                const { data, error } =
-                    await client.api.plugins.reactExportPlugin
-                        .project({ projectId })
-                        .get()
-                if (error) {
-                    spinner.error('Error fetching project data:')
-                    console.error(error)
-                    throw error
-                }
-                spinner.info(`Got Framer project data`)
-                const websiteUrl = data?.project?.websiteUrl
-
-                const projectName = data?.project?.projectName || ''
-                if (projectName) {
-                    spinner.info(`Using project: ${projectName}`)
-                }
-                let cwd = path.resolve(process.cwd(), outDir || 'framer')
-                logger.log('bundling', cwd)
                 const { rebuild, buildContext } = await bundle({
-                    config: {
-                        outDir,
-                        externalPackages,
-                        allExternal,
-                        projectId: data?.project?.projectId,
-                        projectName,
-                        fullFramerProjectId:
-                            data?.project?.fullFramerProjectId!,
-                        locales: data?.locales,
-                        components: Object.fromEntries(
-                            data.components.map((c) => [
-                                componentNameToPath(c.name),
-                                c.url,
-                            ]),
-                        ),
-                        componentBreakpoints:
-                            data.breakpoints
-                                ?.map((b) => {
-                                    const c = data.components.find(
-                                        (c) => c.id === b.componentId,
-                                    )
-                                    if (!c) {
-                                        return
-                                    }
-                                    return {
-                                        ...b,
-                                        componentName: componentNameToPath(
-                                            c.name,
-                                        ),
-                                    }
-                                })
-                                .filter(isTruthy) || [],
-                        tokens: data.colorStyles,
-                        framerWebPages: data.framerWebPages || [],
-                    },
+                    config,
                     watch,
-
                     cwd,
                     signal,
                 })
@@ -264,4 +207,111 @@ export type Config = {
     breakpoints?: BreakpointSizes
     tokens?: StyleToken[]
     outDir?: string
+    componentInstancesInIndexPage: ComponentInstanceInPage[]
+    pageBackgroundColor?: string
+    // [key: string]: any
+}
+
+type ComponentInstanceInPage = {
+    pageOrdering: number
+    componentId: string
+    componentPathSlug: string
+    controls: Record<string, any>
+    nodeDepth: number
+    // pagePath: string
+    webPageId: string
+}
+
+export async function configFromFetch({
+    projectId,
+    externalPackages = [] as string[],
+    allExternal = false,
+    outDir = undefined as undefined | string,
+}) {
+    logger.log(`Fetching config for project ${projectId}`)
+
+    const url = process.env.UNFRAMER_SERVER_URL
+    if (url) {
+        console.log(`using server url ${url}`)
+    }
+    const client = await createClient({
+        url: url || 'https://unframer.co',
+    })
+
+    spinner.start(`Fetching config for project ${projectId}`)
+    const { data, error } = await client.api.plugins.reactExportPlugin
+        .project({ projectId })
+        .get()
+    if (error) {
+        spinner.error('Error fetching project data:')
+        console.error(error)
+        throw error
+    }
+    spinner.info(`Got Framer project data`)
+    const websiteUrl = data?.project?.websiteUrl
+
+    const projectName = data?.project?.projectName || ''
+    if (projectName) {
+        spinner.info(`Using project: ${projectName}`)
+    }
+    let cwd = path.resolve(process.cwd(), outDir || 'framer')
+
+    const indexPage = data?.framerWebPages?.find((x) => x.path === '/')
+    const componentInstancesInIndexPage =
+        data.componentInstances
+            ?.filter((x) => x.webPageId === indexPage?.webPageId)
+            .map((x) => {
+                const component = data.components.find((c) => {
+                    return x.componentId === c.id
+                })
+                if (!component) {
+                    console.error(
+                        new Error(
+                            `cannot find component for instance ${x.componentId}`,
+                        ),
+                    )
+                }
+                const componentPathSlug = componentNameToPath(
+                    component?.name || '',
+                )
+                const res: ComponentInstanceInPage = { ...x, componentPathSlug }
+                return res
+            })
+            .sort((a, b) => {
+                return a.pageOrdering - b.pageOrdering
+            }) || []
+    const config: Config = {
+        ...data,
+        breakpoints: defaultBreakpointSizes,
+        outDir,
+        externalPackages,
+        allExternal,
+        projectId: data?.project?.projectId,
+        projectName,
+        fullFramerProjectId: data?.project?.fullFramerProjectId!,
+        locales: data?.locales,
+
+        components: Object.fromEntries(
+            data.components.map((c) => [componentNameToPath(c.name), c.url]),
+        ),
+        componentBreakpoints:
+            data.breakpoints
+                ?.map((b) => {
+                    const c = data.components.find(
+                        (c) => c.id === b.componentId,
+                    )
+                    if (!c) {
+                        return
+                    }
+                    return {
+                        ...b,
+                        componentName: componentNameToPath(c.name),
+                    }
+                })
+                .filter(isTruthy) || [],
+        tokens: data.colorStyles,
+        componentInstancesInIndexPage,
+        framerWebPages: data.framerWebPages || [],
+    }
+    return { websiteUrl, cwd, config }
 }

package/src/example-code.test.ts

@@ -0,0 +1,72 @@
+import { expect, describe, test } from 'vitest'
+import { createExampleComponentCode } from './exporter.js'
+import { componentNameToPath } from './utils.js'
+import { Config, configFromFetch } from './cli.js'
+
+describe('createExampleComponentCode', () => {
+    test('should create example component code', async () => {
+        const projectId = 'cf755ed7d59e0319'
+
+        const { config } = await configFromFetch({ projectId })
+        const { exampleCode } = await createExampleComponentCode({
+            config,
+            outDir: 'src',
+        })
+        expect(exampleCode).toMatchInlineSnapshot(`
+          "import './src/styles.css'
+
+          import NavigationFramerComponent from './src/navigation'
+          import HeroFramerComponent from './src/hero'
+          import PricingBannerFramerComponent from './src/pricing-banner'
+          import FooterFramerComponent from './src/footer'
+          import FeatureListFramerComponent from './src/feature-list'
+          import ServiceSliderFramerComponent from './src/service-slider'
+          import SectionTitleFramerComponent from './src/section-title'
+          import ButtonFramerComponent from './src/button'
+          import BrandLogoFramerComponent from './src/brand-logo'
+          import TestmonialItemFramerComponent from './src/testmonial-item'
+          import ArticlesCardFramerComponent from './src/articles-card'
+
+          export default function App() {
+              return (
+                  <div className='flex flex-col'>
+                      <NavigationFramerComponent.Responsive
+                          ctaVariant={"ia7uVki50"}
+                      />
+                      <HeroFramerComponent.Responsive/>
+                      <PricingBannerFramerComponent.Responsive/>
+                      <FooterFramerComponent.Responsive
+                          year={"2024"}
+                      />
+                      <FeatureListFramerComponent.Responsive/>
+                      <ServiceSliderFramerComponent.Responsive/>
+                      <SectionTitleFramerComponent.Responsive
+                          text={"We are pioneers in harnessing the power of Blockchain and Web3 technologies to drive innovation, security, and decentralization."}
+                          title={"Smart Automation"}
+                          tagline={"Systems and Building Web3"}
+                          iconVisible={true}
+                          textVisible={true}
+                      />
+                      <ButtonFramerComponent.Responsive
+                          link={"/news"}
+                          buttonTitle={"Read all blog"}
+                          iconVisibility={true}
+                      />
+                      <BrandLogoFramerComponent.Responsive/>
+                      <TestmonialItemFramerComponent.Responsive
+                          name1={"Wade Warren"}
+                          paragraph={"Security is non-negotiable in the decentralized world, and we take this aspect very seriously. Our solutions are built with a robust emphasis on security, utilizing advanced cryptographic"}
+                          designation={"Flutter Developer"}
+                      />
+                      <ArticlesCardFramerComponent.Responsive
+                          date={"Mar 06, 2024 "}
+                          link={"/news/:slug"}
+                          title={"Discoveries from Our Thinkers"}
+                          excerpt={"Experience seamless integration with decentralized applications (DApps)."}
+                      />
+                  </div>
+              );
+          };"
+        `)
+    })
+}, 1000 * 10)

package/src/exporter.ts

@@ -480,14 +480,14 @@ export async function bundle({
                 'utf-8',
             )
         }
-        const res = {
+        const res: BundleResult = {
             components: Object.entries(components).map(([name, v]) => {
                 const propControls = propControlsData.find(
                     (x) => x?.name === name,
                 )
 
                 return {
-                    path: name,
+                    componentPathSlug: name,
                     url: v,
                     name,
                     componentName: componentCamelCase(name),
@@ -523,83 +523,14 @@ export async function bundle({
     const result = await rebuild()
     console.log()
     console.log()
-
-    let exampleComponent = result?.components?.sort((a, b) => {
-        const aVariants = getVariantsFromPropControls(a.propertyControls)
-        const bVariants = getVariantsFromPropControls(b.propertyControls)
-        const aHasBreakpoints = (aVariants?.breakpoints?.length || 0) >= 2
-        const bHasBreakpoints = (bVariants?.breakpoints?.length || 0) >= 2
-
-        // Sort components with breakpoints first
-        if (aHasBreakpoints && !bHasBreakpoints) return -1
-        if (!aHasBreakpoints && bHasBreakpoints) return 1
-
-        // Within each group, prefer components with example properties
-        const aProp = findExampleProperty(a.propertyControls)
-        const bProp = findExampleProperty(b.propertyControls)
-        return (bProp ? 1 : 0) - (aProp ? 1 : 0)
-    })?.[0]
-    if (!exampleComponent) {
-        logger.log(
-            `No example component found with breakpoints, using random example`,
-        )
-        // Create an example component if none found with breakpoints
-        exampleComponent = {
-            path: 'hero',
-            componentName: 'HeroFramerComponent',
-            propertyControls: {
-                variant: {
-                    type: ControlType.Enum,
-                    options: ['Desktop', 'Tablet', 'Mobile'],
-                    optionTitles: ['Desktop', 'Tablet', 'Mobile'],
-                },
-            } as any,
-            name: 'Hero',
-            url: '',
-        }
-        if (!exampleComponent) {
-            return { rebuild, buildContext }
-        }
-    }
-
-    const outDirForExample = path.posix
-        .relative(process.cwd(), out)
-        .replace(/^src\//, '') // remove src so file works inside src
-    logger.log(
-        'exampleComponent?.propertyControls',
-        exampleComponent?.propertyControls,
-    )
-    const prop = findExampleProperty(exampleComponent?.propertyControls)
-    const propStr = prop ? ` ${prop}='example'` : ''
-    const responsiveComponent = dedent`
-    {/* use .Responsive for components with breakpoints */}
-    <${exampleComponent?.componentName}.Responsive${propStr} />
-    `
-    const nonResponsiveComponent = dedent`
-    <${exampleComponent?.componentName}
-        ${prop}='example'
-        style={{ width: '100%' }}
-    />
-    `
-    const exampleCode = dedent`
-    import './${outDirForExample}/styles.css'
-    // this file imported below is generated when you run \`npm run framer\`
-    import ${exampleComponent?.componentName} from './${outDirForExample}/${
-        exampleComponent?.path
-    }'
-
-    export default function App() {
-        return (
-            <div className='flex flex-col'>
-                ${responsiveComponent
-                    .split('\n')
-                    .map((line, i) => (!i ? line : '            ' + line))
-                    .join('\n')}
-            </div>
-        );
-    };
-    `
-
+    const outDirForExample =
+        path.posix.relative(process.cwd(), out).replace(/^src\//, '') ||
+        'framer' // remove src so file works inside src
+    const { exampleCode } = await createExampleComponentCode({
+        outDir: out,
+        // buildResult: result,
+        config,
+    })
     if (stackblitzDemoExample) {
         logger.log(`Inside Stackblitz demo, writing App.tsx`)
         await fs.promises.mkdir(path.dirname(stackblitzDemoExample), {
@@ -1283,7 +1214,6 @@ function findExampleProperty(propertyControls?: PropertyControls) {
     return propCamelCaseJustLikeFramer(stringProp[1]?.title || '')
 }
 
-
 // these styles are global styles injected by Framer in the generated websites, without them things like icons can look weird
 const resetCssStyles = `
 
@@ -1301,7 +1231,11 @@ const resetCssStyles = `
     margin: 0;
 }
 
-.unframer body, .unframer input, .unframer textarea, .unframer select, .unframer button {
+.unframer {
+    line-height: normal;
+}
+
+.unframer, .unframer input, .unframer textarea, .unframer select, .unframer button {
     font-size: 12px;
     font-family: sans-serif;
 }
@@ -1317,3 +1251,87 @@ async function recursiveReaddir(dir: string): Promise<string[]> {
     )
     return files.flat()
 }
+
+function indentWithTabs(str: string, tabs: string) {
+    return str
+        .split('\n')
+        .map((line, i) => (!i ? line : tabs + line))
+        .join('\n')
+}
+
+export async function createExampleComponentCode({
+    outDir,
+    config,
+}: {
+    outDir: string
+    config: Config
+}) {
+    const outDirForExample = path.posix
+        .relative(process.cwd(), outDir)
+        .replace(/^src\//, '') // remove src so file works inside src
+    const instances = config?.componentInstancesInIndexPage.sort((a, b) => {
+        // Order first by nodeDepth (lower is better)
+        return a.nodeDepth - b.nodeDepth || a.pageOrdering - b.pageOrdering
+    })
+
+    const imports = instances.map((exampleComponent) => {
+        return `import ${componentCamelCase(exampleComponent?.componentPathSlug)} from './${outDirForExample}/${
+            exampleComponent?.componentPathSlug
+        }'`
+    })
+
+    const jsx = instances.map((exampleComponent) => {
+        let propStr = ''
+        for (let [key, value] of Object.entries(
+            exampleComponent.controls || {},
+        )) {
+            if (key === 'variant') {
+                continue
+            }
+            if (typeof value === 'object') {
+                continue
+            }
+            // TODO get property controls to render enums much better? maybe do this in plugin instead
+            propStr += '\n'
+            propStr += `    ${key}={${JSON.stringify(value)}}`
+        }
+        if (propStr) propStr += '\n'
+        const responsiveComponent = dedent`
+        <${componentCamelCase(exampleComponent?.componentPathSlug)}.Responsive${propStr}/>
+        `
+        return responsiveComponent
+    })
+
+    let containerClasses = ''
+    if (config.pageBackgroundColor) {
+        let bg = config.pageBackgroundColor?.replace(' ', '_')
+        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 {
+        exampleCode,
+    }
+}
+
+type BundleResult = {
+    components: Array<{
+        componentPathSlug: string
+        name: string
+        url: string
+        componentName: string
+        propertyControls?: PropertyControls
+    }>
+}