@reframejs/unframer 4.2.0-reframe.0

package/dist/react.d.ts

@@ -0,0 +1,76 @@
+import { ComponentPropsWithoutRef, ComponentType } from 'react';
+import { defaultBreakpointSizes } from './css-core.js';
+export type UnframerBreakpoint = keyof typeof defaultBreakpointSizes;
+/**
+ * @deprecated Use styles.css import instead
+ */
+export declare function FramerStyles({ Components }: {
+    Components?: any[] | undefined;
+}): any;
+export declare const WithFramerBreakpoints: <T extends ComponentType<{
+    variant?: any;
+    className?: string | undefined;
+}>>({ Component, variants: _breakpointsMap, ...rest }: {
+    Component: T;
+    variants: Record<"2xl" | "base" | "lg" | "md" | "sm" | "xl", ComponentPropsWithoutRef<T>["variant"]>;
+} & Omit<ComponentPropsWithoutRef<T>, "variant">) => any;
+import React from 'react';
+export declare function ResolveLinksAdapted({ links, children }: {
+    children: any;
+    links: any;
+}): any;
+export declare function AdaptedLink({ href, nodeId, openInNewTab, smoothScroll, children, ...rest }: {
+    [x: string]: any;
+    children: any;
+    href: any;
+    nodeId: any;
+    openInNewTab: any;
+    smoothScroll: any;
+}): React.JSX.Element;
+export declare function ContextProviders({ locale: locale_, children, framerSiteId, routes, locales }: {
+    children: any;
+    framerSiteId: any;
+    locale: any;
+    locales: any;
+    routes: any;
+}): React.JSX.Element;
+type UnframerProviderProps = {
+    /**
+     * Optional function to handle client-side navigation.
+     * You can provide a navigation function such as one from React Router's `useNavigate`
+     * or Next.js's `useRouter().push`, for example:
+     *
+     * ```tsx
+     * // Using React Router:
+     * import { useNavigate } from "react-router-dom";
+     * const navigate = useNavigate();
+     *
+     * <UnframerProvider navigate={navigate}>...</UnframerProvider>
+     *
+     * // Using Next.js:
+     * import { useRouter } from "next/navigation";
+     * const router = useRouter();
+     * const navigate = (url: string) => router.push(url);
+     *
+     * <UnframerProvider navigate={navigate}>...</UnframerProvider>
+     * ```
+     */
+    navigate?: (url: string) => void;
+    /**
+     * The locale slug for the language, e.g. "de" for German, "it" for Italian, etc.
+     * This should be a short identifier (typically two or more lowercase letters)
+     * that uniquely identifies the active language/region. Used for language resolution,
+     * translations, routing, etc.
+     * Examples:
+     *   - "en" for English
+     *   - "de" for German
+     *   - "it" for Italian
+     *   - "fr" for French
+     *   - "es" for Spanish
+     */
+    locale?: string;
+    children: React.ReactNode;
+};
+export declare function UnframerProvider(props: UnframerProviderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=react.d.ts.map

package/dist/react.js

@@ -0,0 +1,280 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { combinedCSSRules } from './framer.js';
+import { preconnect, prefetchDNS } from 'react-dom';
+import { createContext, useContext, useMemo, useSyncExternalStore, } from 'react';
+import { breakpointsStylesLegacy, defaultBreakpointSizes, getFontsStyles, } from './css-core.js';
+import { version } from './version.js';
+function classNames(...args) {
+    return args.filter(Boolean).join(' ');
+}
+function Hints() {
+    prefetchDNS('https://fonts.gstatic.com');
+    preconnect('https://fonts.gstatic.com');
+    preconnect('https://framerusercontent.com');
+    return null; // nothing to render
+}
+// breakpoints from the higher to the lower
+const defaultBreakpoints = Object.keys(defaultBreakpointSizes).reverse();
+function getBreakpointNameFromWindowWidth(windowWidth) {
+    return defaultBreakpoints.find((name) => windowWidth >= defaultBreakpointSizes[name]);
+}
+function fillBreakpoints(breakpoints) {
+    const breakpointsOrder = ['base', 'sm', 'md', 'lg', 'xl', '2xl'];
+    const filledBreakpoints = { ...breakpoints };
+    for (let i = 1; i < breakpointsOrder.length; i++) {
+        const currentBreakpoint = breakpointsOrder[i];
+        const previousBreakpoint = breakpointsOrder[i - 1];
+        if (!filledBreakpoints[currentBreakpoint]) {
+            filledBreakpoints[currentBreakpoint] =
+                filledBreakpoints[previousBreakpoint];
+        }
+    }
+    return filledBreakpoints;
+}
+const nothing = () => {
+    return () => { };
+};
+/**
+ * @deprecated Use styles.css import instead
+ */
+export function FramerStyles({ Components = [] }) {
+    const isClient = useSyncExternalStore(nothing, () => true, () => false);
+    const breakpoints = (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: breakpointsStylesLegacy(defaultBreakpointSizes),
+        }, suppressHydrationWarning: true, hidden: true }, 'breakpointsStyles'));
+    const fonts = (_jsx("style", { dangerouslySetInnerHTML: {
+            __html: getFontsStyles(Components.map((x) => x.fonts || []).flat()),
+        }, suppressHydrationWarning: true, hidden: true }, 'fonts'));
+    // if (isClient) {
+    //     // on client framer injects the styles by itself
+    //     return (
+    //         <>
+    //             {breakpoints}
+    //             {fonts}
+    //         </>
+    //     )
+    // }
+    return (_jsxs(_Fragment, { children: [breakpoints, fonts, _jsx("style", { dangerouslySetInnerHTML: {
+                    __html: combinedCSSRules.join('\n'),
+                }, suppressHydrationWarning: true, hidden: true }, 'combinedCSSRules')
+        ] }));
+}
+function removeInactiveUnframerHiddenElements() {
+    // Remove all elements with the 'unframer-hidden' class that are not for the current breakpoint
+    const windowWidth = window.innerWidth;
+    const activeBreakpoint = getBreakpointNameFromWindowWidth(windowWidth);
+    const activeClass = activeBreakpoint ? `unframer-${activeBreakpoint}` : null;
+    document.querySelectorAll('.unframer-hidden').forEach((el) => {
+        if (el.classList.contains('unframer-hidden') &&
+            activeClass &&
+            !el.classList.contains(activeClass)) {
+            el.parentNode?.removeChild(el);
+        }
+    });
+}
+if (typeof window !== 'undefined') {
+    removeInactiveUnframerHiddenElements();
+}
+export const WithFramerBreakpoints = ({ Component, variants: _breakpointsMap, ...rest }) => {
+    // getServerSnapshot must always return '' to match what the server rendered.
+    // During hydration React calls getServerSnapshot on the client too; if it
+    // returned the real breakpoint, the tree structure would differ from the
+    // server (server renders all variants, client would render only one).
+    const currentBreakpoint = useSyncExternalStore(onResize, () => {
+        return getBreakpointNameFromWindowWidth(window.innerWidth);
+    }, () => '');
+    if (isEmpty(_breakpointsMap)) {
+        // @ts-ignore
+        return _jsx(Component, { ...rest });
+    }
+    const allBreakpoints = fillBreakpoints(_breakpointsMap);
+    const variants = new Map();
+    for (let breakpointName of Object.keys(allBreakpoints)) {
+        const realVariant = allBreakpoints[breakpointName];
+        if (!realVariant) {
+            continue;
+        }
+        const existingVariant = variants.get(realVariant);
+        if (existingVariant) {
+            existingVariant.breakpoints.push(breakpointName);
+            existingVariant.className = classNames(existingVariant.className, `unframer-${breakpointName}`);
+        }
+        else {
+            variants.set(realVariant, {
+                className: classNames('unframer unframer-hidden', `unframer-${breakpointName}`),
+                variant: realVariant,
+                breakpoints: [breakpointName],
+            });
+        }
+    }
+    const parts = [...variants.values()].map(({ className, breakpoints, variant }, i) => {
+        const shouldShow = !currentBreakpoint || breakpoints.includes(currentBreakpoint);
+        if (!shouldShow) {
+            return null;
+        }
+        const c = classNames(className, rest.className);
+        return (
+        // @ts-ignore
+        _jsx(Component, { suppressHydrationWarning: true, 
+            // LayoutGroup is used internally
+            layoutId: variant, ...rest, className: c, variant: variant }, variant));
+    });
+    parts.push(_jsx(DebugUnframerVersion, {}, 'debug-unframer-version'));
+    return parts;
+};
+const onResize = (callback) => {
+    window.addEventListener('resize', callback);
+    return () => window.removeEventListener('resize', callback);
+};
+const onResizeWithDebounce = (callback) => {
+    let timeoutId;
+    const debouncedCallback = () => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            callback();
+        }, 16);
+    };
+    window.addEventListener('resize', debouncedCallback);
+    return () => {
+        clearTimeout(timeoutId);
+        window.removeEventListener('resize', debouncedCallback);
+    };
+};
+import React from 'react';
+import { 
+// @ts-ignore
+CustomCursorHost, 
+// @ts-ignore
+FetchClientProvider, 
+// @ts-ignore
+FormContext, 
+// @ts-ignore
+FramerLink as Link, 
+// @ts-ignore
+LocaleInfoContext, } from './framer.js';
+const routesContext = React.createContext({});
+function replacePathParams(path, params) {
+    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));
+}
+function isRelativeLink(url) {
+    if (!url) {
+        return false;
+    }
+    return url?.startsWith?.('/') || url?.startsWith?.('#');
+}
+function isMailto(url) {
+    if (!url) {
+        return false;
+    }
+    return url?.startsWith?.('mailto:');
+}
+export function AdaptedLink({ href, nodeId, openInNewTab, smoothScroll, children, ...rest }) {
+    const context = useContext(unframerContext);
+    let navigateClientSide = context.navigate && !openInNewTab
+        ? (e) => {
+            if (!context.navigate)
+                return;
+            const href = e.currentTarget?.getAttribute('href');
+            if (!href || !isRelativeLink(href))
+                return;
+            e.preventDefault();
+            if (rest.onClick)
+                rest.onClick(e);
+            context.navigate(href);
+        }
+        : null;
+    const onlyForFramer = { children, nodeId, openInNewTab, smoothScroll };
+    const routes = React.useContext(routesContext);
+    const webPageId = href?.webPageId;
+    const pathVariables = href?.pathVariables;
+    const route = routes?.[webPageId];
+    const target = openInNewTab ? '_blank' : undefined;
+    if (isRelativeLink(href) || isMailto(href)) {
+        return (_jsx(_Fragment, { children: React.cloneElement(children, {
+                ...rest,
+                suppressHydrationWarning: true,
+                onClick: navigateClientSide,
+                href,
+                target,
+            }) }));
+    }
+    if (!webPageId) {
+        return (_jsx(Link, { suppressHydrationWarning: true, href: href, ...rest, ...onlyForFramer }));
+    }
+    if (!route || !route.path) {
+        return (_jsx(Link, { suppressHydrationWarning: true, href: href, ...rest, ...onlyForFramer }));
+    }
+    let resolvedPath = route.path;
+    if (pathVariables) {
+        resolvedPath = replacePathParams(resolvedPath, pathVariables);
+    }
+    if (isRelativeLink(resolvedPath) || isMailto(href)) {
+        return (_jsx(_Fragment, { children: React.cloneElement(children, {
+                ...rest,
+                suppressHydrationWarning: true,
+                onClick: navigateClientSide,
+                href: resolvedPath,
+                target,
+            }) }));
+    }
+    return (_jsx(Link, { href: resolvedPath, suppressHydrationWarning: true, ...rest, ...onlyForFramer }));
+}
+export function ContextProviders({ locale: locale_, children, framerSiteId, routes, 
+// collectionUtils,
+locales, }) {
+    const context = useContext(unframerContext);
+    const locale = locale_ || context?.locale;
+    const activeLocale = locales?.find((l) => l.slug === locale || l.code === locale || l.id === locale);
+    const localeInfo = useMemo(() => {
+        return {
+            activeLocale,
+            locales,
+            setLocale: async (localeOrLocaleId) => {
+                console.log('setLocale', localeOrLocaleId);
+            },
+        };
+    }, [activeLocale, locales]);
+    return (_jsxs(FetchClientProvider, { children: [
+            _jsx(Hints, {}), _jsx(CustomCursorHost, { children: _jsx(FormContext.Provider, { value: framerSiteId, children: _jsx(LocaleInfoContext, { value: localeInfo, children: _jsx(routesContext.Provider, { value: routes, children: children }) }) }) })
+        ] }));
+}
+/**
+ * Add Unframer debug information to debug websites using Unframer
+ */
+function DebugUnframerVersion() {
+    return null;
+    return (_jsxs("details", { style: { display: 'none' }, children: ["Using", ' ', _jsx("a", { href: 'https://unframer.co', className: '', children: "Framer React Export" }), ' ', "version ", version] }));
+}
+function isEmpty(obj) {
+    for (let key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            return false;
+        }
+    }
+    return true;
+}
+const unframerContext = createContext({
+    navigate: undefined,
+});
+export function UnframerProvider(props) {
+    return (_jsxs(unframerContext.Provider, { value: props, children: [
+            _jsx(Hints, {}), props.children] }));
+}
+//# sourceMappingURL=react.js.map

package/dist/renamer.d.ts

@@ -0,0 +1,11 @@
+import traverse, { type Scope } from '@babel/traverse';
+import { NodePath } from '@babel/core';
+export default class BatchRenamer {
+    constructor(scope: Scope, map: Map<string, string>);
+    map: Map<string, string>;
+    scope: Scope;
+    maybeConvertFromExportDeclaration(parentDeclar: NodePath): void;
+    maybeConvertFromClassFunctionExpression(path: NodePath): NodePath<traverse.Node>;
+    rename(): void;
+}
+//# sourceMappingURL=renamer.d.ts.map

package/dist/renamer.js

@@ -0,0 +1,139 @@
+// original https://github.com/babel/babel/blob/9c77558234c87b9220604fbc1519089e2d6334e2/packages/babel-traverse/src/scope/lib/renamer.ts#L61
+import splitExportDeclaration from '@babel/helper-split-export-declaration';
+import traverse, { visitors, } from '@babel/traverse';
+import * as t from '@babel/types';
+// ESM import of CommonJS module - traverse.default contains the actual traverse function
+const traverseNode = traverse.default?.node || traverse.node;
+const renameVisitor = {
+    ReferencedIdentifier({ node }, state) {
+        for (let [oldName, newName] of state.map) {
+            // console.log(node.name, oldName, newName)
+            if (node.name === oldName) {
+                node.name = newName;
+            }
+        }
+    },
+    // Scope(path, state) {
+    //     if (
+    //         !path.scope.bindingIdentifierEquals(
+    //             state.oldName,
+    //             state.binding.identifier,
+    //         )
+    //     ) {
+    //         path.skip()
+    //         if (path.isMethod()) {
+    //             requeueComputedKeyAndDecorators(path)
+    //         }
+    //     }
+    // },
+    ObjectProperty({ node, scope }, state) {
+        const { name } = node.key;
+        if (node.shorthand &&
+            // In destructuring the identifier is already renamed by the
+            // AssignmentExpression|Declaration|VariableDeclarator visitor,
+            // while in object literals it's renamed later by the
+            // ReferencedIdentifier visitor.
+            // (name === state.oldName || name === state.newName) &&
+            (state.map.has(name) || inverseMap(state.map).has(name)) &&
+            // Ignore shadowed bindings
+            [...state.map.keys()].some((oldName) => state.scope.getBindingIdentifier(oldName) ===
+                scope.getBindingIdentifier(name))) {
+            node.shorthand = false;
+            if (node.extra?.shorthand)
+                node.extra.shorthand = false;
+        }
+    },
+    // @ts-ignore
+    'AssignmentExpression|Declaration|VariableDeclarator'(path, state) {
+        if (path.isVariableDeclaration())
+            return;
+        const ids = path.getOuterBindingIdentifiers();
+        for (const name in ids) {
+            for (let [oldName, newName] of state.map) {
+                // console.log(name, oldName, newName)
+                if (name === oldName)
+                    ids[name].name = newName;
+            }
+        }
+    },
+};
+let cache = new WeakMap();
+function inverseMap(map) {
+    if (cache.has(map))
+        return cache.get(map);
+    const inverse = new Map();
+    for (let [key, value] of map) {
+        inverse.set(value, key);
+    }
+    cache.set(map, inverse);
+    return inverse;
+}
+export default class BatchRenamer {
+    constructor(scope, map) {
+        this.map = map;
+        this.scope = scope;
+    }
+    maybeConvertFromExportDeclaration(parentDeclar) {
+        const maybeExportDeclar = parentDeclar.parentPath;
+        if (!maybeExportDeclar?.isExportDeclaration()) {
+            return;
+        }
+        if (maybeExportDeclar.isExportDefaultDeclaration()) {
+            const { declaration } = maybeExportDeclar.node;
+            if (t.isDeclaration(declaration) && !declaration.id) {
+                return;
+            }
+        }
+        if (maybeExportDeclar.isExportAllDeclaration()) {
+            return;
+        }
+        splitExportDeclaration(maybeExportDeclar);
+    }
+    maybeConvertFromClassFunctionExpression(path) {
+        return path;
+    }
+    rename( /* Babel 7 - block?: t.Pattern | t.Scopable */ /* Babel 7 - block?: t.Pattern | t.Scopable */) {
+        const { scope, map } = this;
+        for (let binding of [...map.keys()].map((name) => scope.getBinding(name))) {
+            if (!binding) {
+                continue;
+            }
+            const path = binding.path;
+            const parentDeclar = path.find((path) => path.isDeclaration() ||
+                path.isFunctionExpression() ||
+                path.isClassExpression());
+            if (parentDeclar) {
+                const bindingIds = parentDeclar.getOuterBindingIdentifiers();
+                const oldNames = Object.keys(bindingIds);
+                for (let oldName of oldNames) {
+                    const binding = scope.getBinding(oldName);
+                    if (binding && bindingIds[oldName] === binding.identifier) {
+                        // When we are renaming an exported identifier, we need to ensure that
+                        // the exported binding keeps the old name.
+                        this.maybeConvertFromExportDeclaration(parentDeclar);
+                    }
+                }
+            }
+        }
+        traverseNode(scope.block, visitors.explode(renameVisitor), scope, this, scope.path, 
+        // When blockToTraverse is a SwitchStatement, the discriminant
+        // is not part of the current scope and thus should be skipped.
+        { discriminant: true });
+        for (let [oldName, newName] of map) {
+            if (oldName === newName)
+                continue;
+            if (!arguments[0]) {
+                scope.removeOwnBinding(oldName);
+                const binding = scope.getBinding(oldName);
+                if (binding) {
+                    binding.identifier.name = newName;
+                    scope.bindings[newName] = binding;
+                }
+                else {
+                    // logger.log(`binding not found for ${oldName}`)
+                }
+            }
+        }
+    }
+}
+//# sourceMappingURL=renamer.js.map

package/dist/sentry.d.ts

@@ -0,0 +1,2 @@
+export declare function notifyError(error: any, msg?: string): Promise<void>;
+//# sourceMappingURL=sentry.d.ts.map

package/dist/sentry.js

@@ -0,0 +1,5 @@
+// TODO the idea was to use Sentry to send back info but the package is too bloated
+export async function notifyError(error, msg) {
+    console.error(msg, error?.['stack'] || error);
+}
+//# sourceMappingURL=sentry.js.map

package/dist/stackblitz.d.ts

@@ -0,0 +1,9 @@
+export declare function generateStackblitzFiles({ projectId, appComponentCode, title }: {
+    appComponentCode?: string | undefined;
+    projectId: any;
+    title?: string | undefined;
+}): {
+    relativePath: string;
+    contents: string;
+}[];
+//# sourceMappingURL=stackblitz.d.ts.map