unframer 2.11.2 → 2.13.0

package/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 }

package/src/react.tsx

@@ -229,36 +229,124 @@ 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,
+    children,
+    ...rest
+}) {
+    
+    const onlyForFramer = { children, 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]
+    const target = openInNewTab ? '_blank' : undefined
+    // console.log({ href, pathVariables, path: route?.path, ...rest })
+    if (href?.startsWith && href.startsWith('/')) {
+        return React.cloneElement(children, { ...rest, href, target })
+    }
+    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 React.cloneElement(children, {
+            ...rest,
+            href: path,
+            target,
+        })
+    }
+
+    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>

package/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())
 
@@ -31,8 +31,7 @@ export const logger = {
     },
 }
 
-export async function componentNameToPath(name: string) {
-    const { default: kebabCase } = await import('just-kebab-case')
+export function componentNameToPath(name: string) {
     return name
         .split('/')
         .filter(Boolean)
@@ -43,3 +42,31 @@ export async function componentNameToPath(name: string) {
 export function sleep(ms: number) {
     return new Promise((resolve) => setTimeout(resolve, ms))
 }
+
+// https://www.npmjs.com/package/just-kebab-case?activeTab=readme
+// any combination of spaces and punctuation characters
+// thanks to http://stackoverflow.com/a/25575009
+var wordSeparators =
+    /[\s\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,\-.\/:;<=>?@\[\]^_`{|}~]+/
+var capital_plus_lower = /[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD][a-zà-ÿ]/g
+var capitals = /[A-ZÀ-Ý\u00C0-\u00D6\u00D9-\u00DD]+/g
+
+export function kebabCase(str: string) {
+    // replace word starts with space + lower case equivalent for later parsing
+    // 1) treat cap + lower as start of new word
+    str = str.replace(capital_plus_lower, function (match) {
+        // match is one caps followed by one non-cap
+        return ' ' + (match[0].toLowerCase() || match[0]) + match[1]
+    })
+    // 2) treat all remaining capitals as words
+    str = str.replace(capitals, function (match) {
+        // match is a series of caps
+        return ' ' + match.toLowerCase()
+    })
+    return str
+        .trim()
+        .split(wordSeparators)
+        .join('-')
+        .replace(/^-/, '')
+        .replace(/-\s*$/, '')
+}