fix Framer links, using my own routing logic, removed Router from Framer

remix-app/framer-intl/chunk-72DMJFRS.js

@@ -62,7 +62,7 @@ function withSingleToggle(Component,) {
             }
           }
         } catch (e) {
-          console.warn('Cannot access stylesheet:', sheet.href,);
+          console.warn('Cannot access stylesheet:',e, sheet.href,);
         }
       }
       let styleElement = document.createElement('style',);

remix-app/framer-intl/chunk-DAGDNIBA.js

@@ -124,7 +124,7 @@ function withSingleToggle(Component3,) {
             }
           }
         } catch (e) {
-          console.warn('Cannot access stylesheet:', sheet.href,);
+          console.warn('Cannot access stylesheet:',e, sheet.href,);
         }
       }
       let styleElement = document.createElement('style',);
@@ -215,7 +215,7 @@ function withSingleToggle2(Component3,) {
             }
           }
         } catch (e) {
-          console.warn('Cannot access stylesheet:', sheet.href,);
+          console.warn('Cannot access stylesheet:', e,sheet.href,);
         }
       }
       let styleElement = document.createElement('style',);

remix-app/framer-intl/hero-section.js

@@ -568,6 +568,7 @@ function ComponentWithRoot({ locale, ...rest },) {
         },
         'cvVskSlKE': {
           'path': '/sign-up',
+          'page': null,
         },
         'dqRVpj9Kn': {
           'path': '/docs/:slug',

unframer/package.json

@@ -59,7 +59,7 @@
         "just-kebab-case": "^4.2.0",
         "marked": "^15.0.3",
         "marked-terminal": "^7.2.1",
-        "nanospinner": "^1.2.0",
+        "nanospinner": "^1.2.2",
         "picocolors": "^1.0.1",
         "real-framer-motion": "npm:[email protected]",
         "spiceflow": "^1.4.1",

unframer/scripts/download.ts

@@ -199,7 +199,8 @@ export async function fixFramerCode({ resultFile }) {
     }
     codeAfter +=  '\n\n'
     codeAfter += dedent`
-    export { Router, FetchClientProvider, FormContext }
+    export { Link as FramerLink  }
+    export { Router, FetchClientProvider, FormContext, LocaleInfoContext }
     `
     codeAfter = codeAfter.replace(toRemove, '')
 

unframer/src/exporter.ts

@@ -68,6 +68,12 @@ export async function bundle({
 
     spinner.start()
 
+    const otherRoutes = Object.fromEntries(
+        (config.framerWebPages || []).map((page) => [
+            page.webPageId,
+            { path: page.path, page: null },
+        ]),
+    )
     const buildContext = await context({
         absWorkingDir: out,
         entryPoints: Object.keys(components).map((name) => {
@@ -121,20 +127,17 @@ export async function bundle({
                                     JSON.stringify(config.locales) || '[]'
                                 }
 
-                                Component.Responsive = ({ locale, ...props }) => {
+                                Component.Responsive = ({ locale, ...rest }) => {
                                     return (
                                         <ContextProviders
                                             routeId="x"
-                                            routes={{
-                                                x: {
-                                                    elements: {},
-                                                    page: <WithFramerBreakpoints
+                                            routes={${JSON.stringify(
+                                                otherRoutes,
+                                            )}}
+                                            children={<WithFramerBreakpoints
                                                         Component={Component}
-                                                        {...props}
-                                                    />,
-                                                    path: '/',
-                                                },
-                                            }}
+                                                        {...rest}
+                                                    />}
                                             framerSiteId={${JSON.stringify(
                                                 config.fullFramerProjectId,
                                             )}}
@@ -148,13 +151,12 @@ export async function bundle({
                                     return (
                                         <ContextProviders
                                             routeId="x"
-                                            routes={{
-                                                x: {
-                                                    elements: {},
-                                                    page: <Component {...rest} />,
-                                                    path: '/',
-                                                },
-                                            }}
+                                            routes={${JSON.stringify(
+                                                otherRoutes,
+                                                null,
+                                                2,
+                                            )}}
+                                            children={<Component {...rest} />}
                                             framerSiteId={${JSON.stringify(
                                                 config.fullFramerProjectId,
                                             )}}
@@ -227,21 +229,21 @@ export async function bundle({
                 `/* eslint-disable */\n` +
                 doNotEditComment +
                 formatted
-            if (framerWebPages?.length) {
-                codeNew = replaceWebPageIds({
-                    code: codeNew,
-                    elements: framerWebPages,
-                })
-            }
-            const lines = findRelativeLinks(codeNew)
-            if (lines.length) {
-                spinner.error(
-                    `found broken links for ${path.relative(out, file.path)}`,
-                )
-                lines.forEach((line) => {
-                    logger.log(`${path.resolve(out, file.path)}:${line + 1}`)
-                })
-            }
+            // if (framerWebPages?.length) {
+            //     codeNew = replaceWebPageIds({
+            //         code: codeNew,
+            //         elements: framerWebPages,
+            //     })
+            // }
+            // const lines = findRelativeLinks(codeNew)
+            // if (lines.length) {
+            //     spinner.error(
+            //         `found broken links for ${path.relative(out, file.path)}`,
+            //     )
+            //     lines.forEach((line) => {
+            //         logger.log(`${path.resolve(out, file.path)}:${line + 1}`)
+            //     })
+            // }
 
             if (existing === codeNew) {
                 continue
@@ -402,11 +404,15 @@ export async function bundle({
 
     // when user press ctrl+c dispose
     process.on('SIGINT', async () => {
+        spinner.stop()
+        console.log()
         await buildContext.cancel()
         buildContext.dispose()
         process.exit(0) // Ensure process exits
     })
     process.on('SIGABRT', async () => {
+        spinner.stop()
+        console.log()
         await buildContext.cancel()
         buildContext.dispose()
         process.exit(0) // Ensure process exits

unframer/src/framer.js

@@ -52196,4 +52196,5 @@ if (typeof document !== 'undefined') {
     document.head.appendChild(fragment);
 }
 
-export { Router, FetchClientProvider, FormContext }
+export { Link as FramerLink  }
+export { Router, FetchClientProvider, FormContext, LocaleInfoContext }

unframer/src/index.ts

@@ -1,8 +1,14 @@
 export * from './framer.js'
-
+import {
+    AdaptedLink as Link,
+    ResolveLinksAdapted as ResolveLinks,
+} from './react.js'
 export {
     FramerStyles,
     UnframerBreakpoint,
     WithFramerBreakpoints,
     ContextProviders,
+    AdaptedLink,
 } from './react.js'
+
+export { Link, ResolveLinks }

unframer/src/react.tsx

@@ -229,36 +229,117 @@ import {
     FormContext,
     // @ts-ignore
     Router,
+    // @ts-ignore
+    LocaleInfoContext,
+    // @ts-ignore
+    FramerLink as Link,
 } from './framer.js'
+import React from 'react'
+
+type Routes = Record<string, { path: string }>
+
+const routesContext = React.createContext<Routes>({})
+
+function replacePathParams(path: string, params: Record<string, string>) {
+    const paramRegex = /:[a-zA-Z]+/g
+    const matches = path.match(paramRegex)
+
+    // If there is only one match
+    if (matches?.length === 1) {
+        const paramValue = Object.values(params)[0]
+
+        let res = path.replace(paramRegex, paramValue)
+        // console.log({ matches, params, paramValue, res })
+
+        return res
+    }
+
+    return path.replace(paramRegex, (match) => {
+        const param = match.slice(1) // Remove the : prefix
+        return params[param] || match // Replace with param value or keep original if not found
+    })
+}
+
+export function ResolveLinksAdapted({ links, children }) {
+    // TODO add ref
+    return children(links.map((x) => x.href))
+}
+
+export function AdaptedLink({
+    href,
+    nodeId,
+    openInNewTab,
+    smoothScroll,
+    ...rest
+}) {
+    const onlyForFramer = { nodeId, openInNewTab, smoothScroll }
+    const routes = React.useContext(routesContext)
+    const webPageId = href?.webPageId as string
+    const pathVariables = href?.pathVariables as Record<string, string>
+    const route = routes?.[webPageId]
+    // console.log({ href, pathVariables, path: route?.path, ...rest })
+    if (href?.startsWith && href.startsWith('/')) {
+        return <a href={href} {...rest} />
+    }
+    if (!webPageId) {
+        return <Link href={href} {...rest} {...onlyForFramer} />
+    }
+
+    if (!route || !route.path) {
+        return <Link href={href} {...rest} {...onlyForFramer} />
+    }
+    let path = route.path
+    if (pathVariables) {
+        path = replacePathParams(path, pathVariables)
+    }
+    if (path?.startsWith?.('/')) {
+        return <a href={path} {...rest} />
+    }
+
+    return <Link href={path} {...rest} {...onlyForFramer} />
+}
 
 export function ContextProviders({
     locale,
     children,
     framerSiteId,
     routes,
-    routeId,
-    pathVariables,
-    collectionUtils,
+    // collectionUtils,
     locales,
 }) {
-    const localeId = locales?.find(
+    const activeLocale = locales?.find(
         (l) => l.slug === locale || l.code === locale || l.id === locale,
-    )?.id
+    )
+
+    const localeInfo = useMemo(() => {
+        return {
+            activeLocale,
+            locales,
+            setLocale: async (localeOrLocaleId) => {
+                console.log('setLocale', localeOrLocaleId)
+            },
+        }
+    }, [activeLocale, locales])
     return (
         <FetchClientProvider>
             <CustomCursorHost>
                 <FormContext.Provider value={framerSiteId}>
-                    <Router
-                        initialRoute={routeId}
-                        initialPathVariables={pathVariables}
-                        initialLocaleId={localeId}
-                        enableImproveInpDuringHydration={true}
-                        routes={routes}
-                        collectionUtils={collectionUtils}
-                        locales={locales}
-                    >
-                        {children}
-                    </Router>
+                    <LocaleInfoContext value={localeInfo}>
+                        <routesContext.Provider value={routes}>
+                            {/* <Router
+                                initialRoute='x'
+                                routes={{
+                                    x: { page: children, path: '/' },
+                                    ...routes,
+                                }}
+                                locales={locales}
+                                initialLocaleId={activeLocale?.id}
+                            >
+                                {children}
+                            </Router> */}
+                            {children}
+                        </routesContext.Provider>
+                    </LocaleInfoContext>
                 </FormContext.Provider>
             </CustomCursorHost>
         </FetchClientProvider>

unframer/src/utils.ts

@@ -4,7 +4,7 @@ import { marked } from 'marked'
 import { markedTerminal } from 'marked-terminal'
 import { createSpinner } from 'nanospinner'
 
-export const spinner = createSpinner('Downloading Framer Components') as any
+export const spinner = createSpinner('Downloading Framer Components')
 
 marked.use(markedTerminal())