unframer 2.6.6 → 2.7.1

package/src/exporter.ts

@@ -27,7 +27,7 @@ import {
     logFontsUsage,
 } from './css.js'
 import dedent from 'dedent'
-import { logger } from './utils.js'
+import { logger, spinner, terminalMarkdown } from './utils.js'
 import {
     esbuildPluginBundleDependencies,
     resolveRedirect,
@@ -42,10 +42,18 @@ function validateUrl(url: string) {
     }
 }
 
+export type StyleToken = {
+    id: string
+    name?: string
+    lightColor: string
+    darkColor: string
+}
+
 export async function bundle({
     cwd: out = '',
     watch = false,
     components = {} as Record<string, string>,
+    tokens = [] as StyleToken[],
     breakpoints = {} as BreakpointSizes,
     signal = undefined as AbortSignal | undefined,
 }) {
@@ -55,6 +63,7 @@ export async function bundle({
         fs.mkdirSync(out, { recursive: true })
     } catch (e) {}
 
+    spinner.start()
     const buildContext = await context({
         // entryPoints: {
         //     index: url,
@@ -88,7 +97,7 @@ export async function bundle({
             esbuildPluginBundleDependencies({
                 signal,
             }),
-            polyfillNode({}),
+            polyfillNode({}) as any,
             {
                 name: 'virtual loader',
                 setup(build) {
@@ -143,6 +152,7 @@ export async function bundle({
             let codeNew =
                 `// @ts-nocheck\n` +
                 `/* eslint-disable */\n` +
+                '/* This file was generated by Unframer, do not edit manually */\n' +
                 dprint.format(resultPathAbs, file.text, {
                     lineWidth: 140,
                     quoteStyle: 'alwaysSingle',
@@ -151,14 +161,14 @@ export async function bundle({
                 })
             const lines = findRelativeLinks(codeNew)
             if (lines.length) {
-                logger.error(
+                spinner.error(
                     `found broken links for ${path.relative(
                         out,
                         file.path,
                     )}, don't use relative links in Framer components`,
                 )
                 lines.forEach((line) => {
-                    logger.error(`${path.resolve(out, file.path)}:${line + 1}`)
+                    logger.log(`${path.resolve(out, file.path)}:${line + 1}`)
                 })
             }
 
@@ -168,6 +178,8 @@ export async function bundle({
             logger.log(`writing`, path.relative(out, file.path))
             fs.writeFileSync(resultPathAbs, codeNew, 'utf-8')
         }
+        spinner.stop()
+
         let allFonts = [] as ComponentFontBundle[]
         const sema = new Sema(10)
         const packageJson = path.resolve(out, 'package.json')
@@ -176,9 +188,13 @@ export async function bundle({
             JSON.stringify({ type: 'module' }),
             'utf-8',
         )
+        if (!result?.outputFiles) {
+            throw new Error('Failed to generate result')
+        }
 
+        spinner.start('Extracting types')
         const propControlsData = await Promise.all(
-            result.outputFiles.map(async (file) => {
+            result?.outputFiles.map(async (file) => {
                 try {
                     await sema.acquire()
                     const name = path.basename(file.path).replace(/\.js$/, '')
@@ -187,6 +203,7 @@ export async function bundle({
                         return
                     }
                     logger.log(`extracting types for ${name}`)
+                    spinner.update(`Extracting types for ${name}`)
                     const { propertyControls, fonts } =
                         await extractPropControlsUnsafe(resultPathAbs, name)
                     if (!propertyControls) {
@@ -215,16 +232,19 @@ export async function bundle({
                 }
             }),
         ).finally(() => fs.rmSync(packageJson))
+        spinner.stop()
 
         const cssString =
+            '/* This file was generated by Unframer, do not edit manually */\n' +
             '/* This css file has all the necessary styles to run all your components */\n' +
+            '\n' +
+            getStyleTokensCss(tokens) +
             breakpointsStyles(breakpoints) +
             '\n\n' +
             combinedCSSRules
                 .map((x) => (x?.startsWith('  ') ? dedent(x) : x))
                 .join('\n') +
             getFontsStyles(allFonts)
-
         fs.writeFileSync(path.resolve(out, 'styles.css'), cssString, 'utf-8')
 
         logFontsUsage(allFonts)
@@ -263,12 +283,17 @@ export async function bundle({
         if (watch) {
             logger.log('waiting for components or config changes')
         }
-
-        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" +
-            '/* Bug: https://www.framer.community/c/bugs/color-style-unlinks-when-copying-component-between-projects-resulting-in-potential-value-discrepancy */\n' +
-            getTokensCss({ out, result })
-        fs.writeFileSync(path.resolve(out, 'tokens.css'), tokensCss, 'utf-8')
+        if (!tokens?.length) {
+            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" +
+                '/* Bug: https://www.framer.community/c/bugs/color-style-unlinks-when-copying-component-between-projects-resulting-in-potential-value-discrepancy */\n' +
+                getTokensCss({ out, result })
+            fs.writeFileSync(
+                path.resolve(out, 'tokens.css'),
+                tokensCss,
+                'utf-8',
+            )
+        }
         const res = {
             components: Object.entries(components).map(([name, v]) => {
                 const propControls = propControlsData.find(
@@ -284,60 +309,204 @@ export async function bundle({
                 }
             }),
         }
+
         return res
     }
 
     if (!watch) {
         const result = await rebuild()
         await buildContext.dispose()
+        console.log()
+        console.log()
+
+        let exampleComponent = result?.components?.find((x) => {
+            if (!x.propertyControls) return false
+            const variants = getVariantsFromPropControls(x.propertyControls)
+            return variants?.breakpoints.length >= 2
+        })
+        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
+            }
+        }
+        const variants = getVariantsFromPropControls(
+            exampleComponent?.propertyControls,
+        )
+        const breakpoints = variants?.breakpoints
+        if (!breakpoints) {
+            return
+        }
+        logger.log(
+            'exampleComponent?.propertyControls',
+            exampleComponent?.propertyControls,
+        )
+        const variantsExample = {
+            lg: breakpoints[1],
+            base: breakpoints[0],
+        }
+        let prop =
+            findExampleProperty(exampleComponent?.propertyControls) ||
+            'exampleFramerVariable'
+        const outDir = path.posix.relative(process.cwd(), out)
+        console.log(
+            terminalMarkdown(dedent`
+        # How to use the Framer components
+
+        Your components are exported to \`${outDir}\` folder. Now please install the \`unframer\` runtime dependency:
+
+        \`\`\`sh
+        npm install unframer
+        \`\`\`
+
+        Each component has a \`.Responsive\` variant that allows you to specify different variants for different breakpoints.
+        
+        You can use the components like this (try copy pasting the code below into your React app):
+
+        \`\`\`jsx
+        import './${outDir}/styles.css'
+        import ${exampleComponent?.componentName} from './${outDir}/${
+                exampleComponent?.path
+            }'
+        
+        export default function App() {
+            return (
+                <div>
+                    <${exampleComponent?.componentName}
+                        ${prop}='example'
+                        style={{ width: '100%' }}
+                    />
+                    <${exampleComponent?.componentName}.Responsive
+                        ${prop}='example'
+                        variants={${JSON.stringify(variantsExample || {})}}
+                    />
+                </div>
+            );
+        };
+        \`\`\`
+
+        It's very important 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
+        `),
+        )
         return result
     }
 
-    // when user press ctrl+c dispose
-    process.on('SIGINT', async () => {
-        await buildContext.cancel()
-        buildContext.dispose()
-    })
-    process.on('SIGABRT', async () => {
-        await buildContext.cancel()
-        buildContext.dispose()
-    })
-    signal?.addEventListener('abort', async () => {
-        await buildContext.cancel()
-        buildContext.dispose()
-    })
+    // // when user press ctrl+c dispose
+    // process.on('SIGINT', async () => {
+    //     await buildContext.cancel()
+    //     buildContext.dispose()
+    // })
+    // process.on('SIGABRT', async () => {
+    //     await buildContext.cancel()
+    //     buildContext.dispose()
+    // })
+    // signal?.addEventListener('abort', async () => {
+    //     await buildContext.cancel()
+    //     buildContext.dispose()
+    // })
+
+    // const res = await rebuild()
+
+    // /**
+    //  * Get resolved URLs for all components and also wait for 1 second if it took less time than that
+    //  */
+    // const getResolvedUrls = () =>
+    //     Promise.all([
+    //         ...Object.values(components).map((u) => {
+    //             const url = new URL(u)
+    //             url.searchParams.set('ts', Date.now().toString())
+    //             return resolveRedirect({ url: url.toString(), signal })
+    //         }),
+    //         new Promise((res) => setTimeout(res, 5000)),
+    //     ])
+    // let prevUrls = await getResolvedUrls()
+    // while (!signal?.aborted) {
+    //     const urls = await getResolvedUrls()
+    //     const changed = urls
+    //         .map((x, i) => (x !== prevUrls[i] ? i : null))
+    //         .filter(Boolean)
+    //     if (!changed?.length) {
+    //         continue
+    //     }
+    //     const changedNames = Object.keys(components).filter((_, i) =>
+    //         changed.includes(i),
+    //     )
+    //     logger.log(`found new component URLs for ${changedNames.join(', ')}`)
+    //     prevUrls = urls
+    //     await rebuild()
+    // }
+    // return res
+}
 
-    const res = await rebuild()
-
-    /**
-     * Get resolved URLs for all components and also wait for 1 second if it took less time than that
-     */
-    const getResolvedUrls = () =>
-        Promise.all([
-            ...Object.values(components).map((u) => {
-                const url = new URL(u)
-                url.searchParams.set('ts', Date.now().toString())
-                return resolveRedirect({ url: url.toString(), signal })
-            }),
-            new Promise((res) => setTimeout(res, 5000)),
-        ])
-    let prevUrls = await getResolvedUrls()
-    while (!signal?.aborted) {
-        const urls = await getResolvedUrls()
-        const changed = urls
-            .map((x, i) => (x !== prevUrls[i] ? i : null))
-            .filter(Boolean)
-        if (!changed?.length) {
-            continue
-        }
-        const changedNames = Object.keys(components).filter((_, i) =>
-            changed.includes(i),
+export function getDarkModeSelector(opts: {
+    darkModeType?: 'class' | 'media'
+    content: string
+}) {
+    const { darkModeType = 'class', content } = opts
+    if (darkModeType === 'media') {
+        return (
+            '@media (prefers-color-scheme: dark) {\n' +
+            '    :root {\n' +
+            content +
+            '\n' +
+            '    }\n' +
+            '}'
         )
-        logger.log(`found new component URLs for ${changedNames.join(', ')}`)
-        prevUrls = urls
-        await rebuild()
     }
-    return res
+    return '.dark:root {\n' + content + '\n' + '}'
+}
+
+export function getStyleTokensCss(
+    tokens: StyleToken[],
+    darkModeType: 'class' | 'media' = 'class',
+) {
+    if (!tokens?.length) {
+        return ''
+    }
+
+    const lightTokens = tokens
+        .map(
+            (token) =>
+                '    --token-' + token.id + ': ' + token.lightColor + ';',
+        )
+        .join('\n')
+
+    const darkTokens = tokens
+        .map(
+            (token) => '    --token-' + token.id + ': ' + token.darkColor + ';',
+        )
+        .join('\n')
+
+    return (
+        ':root {\n' +
+        lightTokens +
+        '\n' +
+        '}\n\n' +
+        getDarkModeSelector({
+            darkModeType,
+            content: darkTokens,
+        })
+    )
 }
 
 function decapitalize(str: string) {
@@ -615,6 +784,7 @@ export function propControlsToType(controls: PropertyControls, fileName) {
                 .map((line) => `    ${line}`)
                 .join('\n') + '\n'
         let t = ''
+        t += '/* This file was generated by Unframer, do not edit manually */\n'
         t += 'import * as React from "react"\n\n'
         t += 'import { UnframerBreakpoint } from "unframer"\n\n'
         t += `export interface Props {\n${defaultPropsTypes}${types}\n}\n\n`
@@ -669,17 +839,17 @@ export function parsePropertyControls(code: string) {
     return propControls.slice(realStart + 1, -1)
 }
 
-type TokenInfo = {
+type ExtractedTokenInfo = {
     tokenName: string
     metadata?: Record<string, any>
 
     defaultValue: string
 }
 
-export function extractTokenInfo(code: string): TokenInfo[] {
+export function extractTokenInfo(code: string): ExtractedTokenInfo[] {
     const lines = code.split('\n')
     const tokenLines = lines.filter((line) => line.includes('var(--token'))
-    const tokens: TokenInfo[] = []
+    const tokens: ExtractedTokenInfo[] = []
 
     for (const line of tokenLines) {
         let startIndex = 0
@@ -755,3 +925,42 @@ export function componentCamelCase(str: string) {
     str = str + 'FramerComponent'
     return str
 }
+
+const breakpointVariants = ['mobile', 'tablet', 'desktop']
+
+function getVariantsFromPropControls(propControls?: PropertyControls) {
+    if (!propControls?.variant) {
+        return null
+    }
+
+    let variants =
+        propControls.variant?.['optionTitles'] ||
+        propControls.variant?.['options'] ||
+        []
+    // Sort breakpoint-related variants first
+    return {
+        variants: variants,
+        breakpoints: variants.filter((v) =>
+            breakpointVariants.some((device) =>
+                v.toLowerCase().includes(device),
+            ),
+        ),
+    }
+}
+
+function findExampleProperty(propertyControls?: PropertyControls) {
+    if (!propertyControls) {
+        return null
+    }
+
+    const stringProp = Object.entries(propertyControls).find(([_, control]) => {
+        // console.log('control', _, control)
+        return control?.type === ControlType.String
+    })
+
+    if (!stringProp) {
+        return null
+    }
+
+    return stringProp[0]
+}

package/src/framer.js

@@ -15349,7 +15349,7 @@ function steps(numSteps, direction = 'end',) {
   };
 }
 
-// https :https://app.framerstatic.com/framer.PLXHDWID.mjs
+// https :https://app.framerstatic.com/framer.7SGKTLCE.mjs
 init_chunk_QLPHEVXG();
 import React4 from 'react';
 import { startTransition as startTransition2, } from 'react';
@@ -18651,6 +18651,7 @@ function Router({
   locales = EMPTY_ARRAY,
   preserveQueryParams = false,
   enableAsyncURLUpdates = false,
+  LayoutTemplate,
 },) {
   useMarkRouterEffects();
   useReplaceInitialState({
@@ -18879,14 +18880,27 @@ function Router({
             notFoundPage,
             defaultPageStyle,
             forceUpdateKey: dep,
-            children: jsxs(Fragment, {
-              children: [
-                jsx(MarkSuspenseEffects.Start, {},),
-                pageExistsInCurrentLocale
-                  ? renderPage(current.page, defaultPageStyle,)
-                  : notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
-              ],
-            }, remountKey,),
+            children: jsx(WithLayoutTemplate, {
+              LayoutTemplate,
+              routeId: currentRouteId,
+              children: jsxs(Fragment, {
+                children: [
+                  jsx(MarkSuspenseEffects.Start, {},),
+                  pageExistsInCurrentLocale
+                    ? renderPage(
+                      current.page,
+                      LayoutTemplate
+                        ? {
+                          ...defaultPageStyle,
+                          display: 'content',
+                        }
+                        : defaultPageStyle,
+                    )
+                    : // LAYOUT_TEMPLATE @TODO: display: content for not found page?
+                    notFoundPage && renderPage(notFoundPage, defaultPageStyle,),
+                ],
+              }, remountKey,),
+            },),
           },),
           jsx(TurnOnReactEventHandling, {},),
           jsx(MarkSuspenseEffects.End, {},),
@@ -18895,6 +18909,17 @@ function Router({
     },),
   },);
 }
+function WithLayoutTemplate({
+  LayoutTemplate,
+  routeId,
+  children,
+},) {
+  if (!LayoutTemplate) return children;
+  return jsx(LayoutTemplate, {
+    routeId,
+    children,
+  },);
+}
 function scrollElementIntoView(element, smoothScroll,) {
   const scrollIntoViewOptions = smoothScroll
     ? {
@@ -36218,9 +36243,7 @@ function createHook(forwardedRef,) {
   let preventNextCall = false;
   function cloneChildrenWithPropsAndRef(children, props,) {
     if (preventNextCall) {
-      throw new ReferenceError(
-        'useCloneChildrenWithPropsAndRef: You should not call cloneChildrenWithPropsAndRef more than once during the render cycle.',
-      );
+      ;
     }
     preventNextCall = true;
     if (React2.Children.count(children,) > 1 && forwardedRef) {
@@ -42137,6 +42160,18 @@ var Ordering = class {
     if (this.length !== other.length) return false;
     return this.getHash() === other.getHash();
   }
+  providedByFields(fields,) {
+    for (
+      const {
+        field,
+      } of this.fields
+    ) {
+      if (fields.has(field,)) continue;
+      if (field.name === VIRTUAL_INDEX_FIELD) continue;
+      return false;
+    }
+    return true;
+  }
 };
 var Scope = class {
   constructor(parent,) {
@@ -44740,13 +44775,21 @@ var Normalizer = class {
     return this.newRelationalLeftJoin(right, left, constraint,);
   }
   newRelationalFilter(input, predicate,) {
-    if (input instanceof RelationalLeftJoin && predicate.referencedFields.subsetOf(input.leftGroup.relational.outputFields,)) {
-      const left = this.newRelationalFilter(input.left, predicate,);
-      return this.newRelationalLeftJoin(left, input.right, input.constraint,);
+    if (
+      input instanceof RelationalLeftJoin &&
+      // Check that the predicate doesn't depend on any joined field.
+      predicate.referencedFields.subsetOf(input.leftGroup.relational.outputFields,)
+    ) {
+      const pushedFilter = this.newRelationalFilter(input.left, predicate,);
+      return this.newRelationalLeftJoin(pushedFilter, input.right, input.constraint,);
     }
-    if (input instanceof RelationalRightJoin && predicate.referencedFields.subsetOf(input.rightGroup.relational.outputFields,)) {
-      const right = this.newRelationalFilter(input.right, predicate,);
-      return this.newRelationalLeftJoin(input.left, right, input.constraint,);
+    if (
+      input instanceof RelationalRightJoin &&
+      // Check that the predicate doesn't depend on any joined field.
+      predicate.referencedFields.subsetOf(input.rightGroup.relational.outputFields,)
+    ) {
+      const pushedFilter = this.newRelationalFilter(input.right, predicate,);
+      return this.newRelationalLeftJoin(input.left, pushedFilter, input.constraint,);
     }
     const node = new RelationalFilter(input, predicate,);
     return this.finishRelational(node,);
@@ -44756,6 +44799,16 @@ var Normalizer = class {
     return this.finishRelational(node,);
   }
   newRelationalLimit(input, limit, ordering,) {
+    if (
+      input instanceof RelationalProject &&
+      // Check that the limit doesn't depend on any projected field.
+      limit.referencedFields.subsetOf(input.inputGroup.relational.outputFields,) &&
+      // Check that the ordering doesn't depend on any projected field.
+      ordering.providedByFields(input.inputGroup.relational.outputFields,)
+    ) {
+      const pushedLimit = this.newRelationalLimit(input.input, limit, ordering,);
+      return this.newRelationalProject(pushedLimit, input.projections, input.passthrough,);
+    }
     const node = new RelationalLimit(input, limit, ordering,);
     return this.finishRelational(node,);
   }
@@ -53073,7 +53126,7 @@ var package_default = {
     react: '^18.2.0',
     'react-dom': '^18.2.0',
     semver: '^7.5.2',
-    typescript: '^5.6.2',
+    typescript: '^5.7.2',
     yargs: '^17.6.2',
   },
   peerDependencies: {

package/src/utils.ts

@@ -1,8 +1,25 @@
 import pico from 'picocolors'
 
+import { marked } from 'marked'
+import { markedTerminal } from 'marked-terminal'
+import { createSpinner } from 'nanospinner'
+
+export const spinner = createSpinner('Downloading Framer Components') as any
+
+marked.use(markedTerminal())
+
+export function terminalMarkdown(markdown: string) {
+    return marked(markdown)
+}
+
+const shouldDebugUnframer = !!process.env.DEBUG_UNFRAMER
+
 const prefix = '[unframer]'
 export const logger = {
     log(...args) {
+        if (!shouldDebugUnframer) {
+            return
+        }
         console.log(prefix, ...args)
     },
     green(...args) {