@reframejs/unframer 4.2.0-reframe.0

package/dist/esbuild.js

@@ -0,0 +1,317 @@
+import { fetch } from 'undici';
+import { RateLimit, Sema } from 'async-sema';
+import { logger, spinner } from './utils.js';
+import { transform } from 'esbuild';
+import { resolvePackage } from './exporter.js';
+import { notifyError } from './sentry.js';
+import { dispatcher } from './undici-dispatcher.js';
+import { framerPackageVersions } from './framer-package-versions.js';
+export const defaultExternalPackages = [
+    'react',
+    'react-dom',
+    'framer',
+    'unframer',
+    'framer-motion', //
+];
+let redirectCache = new Map();
+export const replaceWebPageIds = ({ elements, code, }) => {
+    // Match webPageId pattern with optional trailing comma
+    const pattern = /{[\s\n]*webPageId[\s\n]*:[\s\n]*(['"])(.*?)\1[\s\n]*,?[\s\n]*}/g;
+    return code.replace(pattern, (match, quote, id) => {
+        const path = elements.find((e) => e.webPageId === id)?.path;
+        if (!path) {
+            return match;
+        }
+        logger.log(`Replacing relative link to ${id} with fixed path: ${path}`);
+        return `'${path}'`;
+    });
+};
+export function esbuildPluginBundleDependencies({ signal = undefined, externalPackages = [], externalizeNpm = false, outDir, onCollectMissingPackage = (pkg) => { }, onFetch = (info) => { }, }) {
+    externalPackages = [...defaultExternalPackages, ...externalPackages];
+    // console.log(externalPackages)
+    const codeCache = new Map();
+    const reportedMissingPackages = new Set();
+    spinner.start();
+    const plugin = {
+        name: 'esbuild-plugin',
+        setup(build) {
+            const namespace = '/';
+            build.onResolve({ filter: /^https?:\/\// }, (args) => {
+                const url = new URL(args.path);
+                return {
+                    path: args.path,
+                    external: false,
+                    // sideEffects: false,
+                    namespace,
+                };
+            });
+            const resolveDep = async (args) => {
+                if (signal?.aborted) {
+                    throw new Error('aborted');
+                }
+                if (args.path.startsWith('https://')) {
+                    return {
+                        path: args.path,
+                        external: false,
+                        // sideEffects: false,
+                        namespace,
+                    };
+                }
+                if (args.path === 'framer') {
+                    return {
+                        path: 'unframer',
+                        external: true,
+                    };
+                }
+                if ('framer-motion' === args.path) {
+                    return {
+                        path: 'unframer',
+                        external: true,
+                    };
+                }
+                if (externalPackages.some((x) => x === args.path || args.path.startsWith(x + '/'))) {
+                    const pkg = getPackageName(args.path);
+                    const installed = await resolvePackage({
+                        cwd: outDir,
+                        pkg,
+                    }).catch(() => '');
+                    if (!installed) {
+                        if (!reportedMissingPackages.has(pkg)) {
+                            const hasFramerVersion = Object.prototype.hasOwnProperty.call(framerPackageVersions, pkg);
+                            if (hasFramerVersion) {
+                                const version = framerPackageVersions[pkg];
+                                spinner.info(`Missing package detected: ${pkg} (using Framer version ^${version})`);
+                            }
+                            else {
+                                spinner.info(`Missing package detected: ${pkg}`);
+                            }
+                            reportedMissingPackages.add(pkg);
+                        }
+                        // Check if we have a specific version from framerPackageVersions
+                        const packageWithVersion = Object.prototype.hasOwnProperty.call(framerPackageVersions, pkg)
+                            ? `${pkg}@^${framerPackageVersions[pkg]}`
+                            : pkg;
+                        onCollectMissingPackage?.(packageWithVersion);
+                    }
+                    return {
+                        path: args.path,
+                        external: true,
+                    };
+                }
+                // console.log('resolve', args.path)
+                if (args.path.startsWith('.') || args.path.startsWith('/')) {
+                    // esm.sh uses /*@pkg@version/path for unbundled deps; when externalizing npm,
+                    // strip the esm.sh prefix and treat as a bare npm specifier
+                    if (externalizeNpm && args.path.startsWith('/*')) {
+                        const bare = args.path.slice(2); // remove /*
+                        const pkg = getPackageName(bare);
+                        return {
+                            path: pkg,
+                            external: true,
+                        };
+                    }
+                    const u = new URL(args.path, args.importer).toString();
+                    // logger.log('resolve', u)
+                    return {
+                        path: u,
+                        namespace,
+                    };
+                }
+                if (externalizeNpm) {
+                    const pkg = getPackageName(args.path);
+                    const installed = await resolvePackage({
+                        cwd: outDir,
+                        pkg,
+                    }).catch(() => '');
+                    if (!installed) {
+                        if (!reportedMissingPackages.has(pkg)) {
+                            const hasFramerVersion = Object.prototype.hasOwnProperty.call(framerPackageVersions, pkg);
+                            if (hasFramerVersion) {
+                                const version = framerPackageVersions[pkg];
+                                spinner.info(`Missing package detected: ${pkg} (using Framer version ^${version})`);
+                            }
+                            else {
+                                spinner.info(`Missing package detected: ${pkg}`);
+                            }
+                            reportedMissingPackages.add(pkg);
+                        }
+                        // Check if we have a specific version from framerPackageVersions
+                        const packageWithVersion = Object.prototype.hasOwnProperty.call(framerPackageVersions, pkg)
+                            ? `${pkg}@^${framerPackageVersions[pkg]}`
+                            : pkg;
+                        onCollectMissingPackage?.(packageWithVersion);
+                    }
+                    return {
+                        path: args.path,
+                        external: true,
+                    };
+                }
+                const url = `https://esm.sh/*${args.path}`;
+                return {
+                    path: url,
+                    namespace,
+                    external: false,
+                };
+            };
+            // build.onResolve({ filter: /^\w/ }, resolveDep)
+            build.onResolve({ filter: /.*/, namespace }, resolveDep);
+            build.onEnd(() => {
+                spinner.stop();
+            });
+            build.onLoad({ filter: /.*/, namespace }, async (args) => {
+                try {
+                    if (signal?.aborted) {
+                        throw new Error('aborted');
+                    }
+                    const url = args.path;
+                    const resolved = await resolveRedirect({
+                        url,
+                        redirectCache,
+                        signal,
+                    });
+                    if (codeCache.has(url)) {
+                        const code = await codeCache.get(url);
+                        return {
+                            contents: code,
+                            loader: 'js',
+                        };
+                    }
+                    let loader = 'jsx';
+                    const promise = Promise.resolve().then(async () => {
+                        onFetch({ url, resolvedUrl: resolved });
+                        logger.log('fetching', url, 'because of', args.path);
+                        spinner.update(`Fetching ${url.replace(/https?:\/\//, '')}`);
+                        const res = await fetchWithRetry(resolved, {
+                            signal,
+                            dispatcher,
+                        });
+                        if (!res.ok) {
+                            throw new Error(`Cannot fetch ${resolved}: ${res.status} ${res.statusText}`);
+                        }
+                        // console.log('type', res.headers.get('content-type'))
+                        if (res.headers
+                            .get('content-type')
+                            ?.startsWith('application/json')) {
+                            loader = 'json';
+                            return await res.text();
+                        }
+                        let text = await res.text();
+                        // when it finds a line with /* webpackIgnore: true */
+                        // it also adds /* @vite-ignore */
+                        text = text.replace(/(\/\* webpackIgnore: true \*\/)/g, '$1 /* @vite-ignore */');
+                        // if (!text.includes('import.meta.url')) {
+                        //     return text
+                        // }
+                        logger.log('transforming', url);
+                        const transformed = await transform(text, {
+                            define: {
+                                'import.meta.url': JSON.stringify(resolved),
+                                navigator: '__unframerNavigator',
+                                window: '__unframerWindow',
+                            },
+                            // Fix lottie (navigator): https://github.com/airbnb/lottie-web/issues/3047
+                            // Fix window is undefined errors in SSR/Node environments
+                            banner: `var __unframerWindow = typeof window !== 'undefined' ? window : undefined; var __unframerNavigator = typeof __unframerWindow !== 'undefined' ? navigator : undefined;`,
+                            minify: false,
+                            format: 'esm',
+                            jsx: 'transform',
+                            logLevel: 'error',
+                            loader,
+                            platform: 'browser',
+                        });
+                        // console.log('transformed', resolved)
+                        return transformed.code;
+                    });
+                    if (loader === 'jsx') {
+                        codeCache.set(url, promise);
+                    }
+                    const code = await promise;
+                    return {
+                        contents: code,
+                        loader,
+                    };
+                }
+                catch (e) {
+                    logger.error(e.message);
+                    notifyError(e);
+                    process.exit(1);
+                }
+            });
+        },
+    };
+    return plugin;
+}
+export async function resolveRedirect({ redirectCache, signal, url, }) {
+    if (!url) {
+        return '';
+    }
+    url = url.toString();
+    if (redirectCache && redirectCache.has(url)) {
+        return await redirectCache.get(url);
+    }
+    // console.time(`resolveRedirect ${url}`)
+    const p = recursiveResolveRedirect(url, signal);
+    // console.timeEnd(`resolveRedirect ${url}`)
+    if (redirectCache) {
+        redirectCache.set(url, p);
+    }
+    return await p;
+}
+export async function recursiveResolveRedirect(url, signal) {
+    if (!url) {
+        return;
+    }
+    let res = await fetchWithRetry(url, {
+        redirect: 'manual',
+        method: 'HEAD',
+        dispatcher,
+        signal,
+    });
+    const loc = res.headers.get('location');
+    if (res.status < 400 && res.status >= 300 && loc) {
+        // Resolve relative Location headers (e.g. /ogl@1.0.11/src/index.js) against the original URL's origin
+        const resolved = new URL(loc, url).toString();
+        logger.log('following redirect', resolved);
+        return recursiveResolveRedirect(resolved);
+    }
+    return url;
+}
+let semaphore = new Sema(3);
+let rateLimiter = RateLimit(20, { timeUnit: 1000 });
+export const fetchWithRetry = retryTwice(async (url, options) => {
+    await semaphore.acquire();
+    const timeout = setTimeout(() => {
+        logger.error('fetch taking more than 10s', url);
+    }, 10000);
+    return await fetch(url, options).finally(() => {
+        clearTimeout(timeout);
+        semaphore.release();
+    });
+});
+export function retryTwice(fn) {
+    return async (...args) => {
+        try {
+            return await fn(...args);
+        }
+        catch (e) {
+            // ignore abort errors
+            if (e.name === 'AbortError') {
+                return;
+            }
+            logger.error('retrying', e.message);
+            return await fn(...args);
+        }
+    };
+}
+export function getPackageName(importPath) {
+    // Handle scoped packages
+    if (importPath.startsWith('@')) {
+        const [scope, rest] = importPath.split('/');
+        if (!rest)
+            return importPath;
+        return `${scope}/${rest.split('/')[0]}`;
+    }
+    // Handle regular packages
+    return importPath.split('/')[0];
+}
+//# sourceMappingURL=esbuild.js.map

package/dist/exporter.d.ts

@@ -0,0 +1,96 @@
+import { BuildResult, type BuildOptions } from 'esbuild';
+import { Config } from './cli.js';
+import { ComponentFontBundle } from './css-core.js';
+import type { PropertyControls } from './framer-types.js';
+export type StyleToken = {
+    id: string;
+    name?: string | null;
+    lightColor: string;
+    darkColor: string;
+};
+export declare function bundle({ config, cwd: out, watch, signal, metafile }: {
+    config: Config;
+    cwd: string;
+    watch?: boolean;
+    signal?: AbortSignal;
+    metafile?: boolean;
+}): Promise<{
+    result: BundleResult;
+    rebuild: () => Promise<BundleResult>;
+    buildContext: import("esbuild").BuildContext<{
+        absWorkingDir: string;
+        entryPoints: {
+            in: string;
+            out: string;
+        }[];
+        jsx: "automatic";
+        bundle: true;
+        platform: "browser";
+        metafile: true;
+        format: "esm";
+        minify: false;
+        treeShaking: true;
+        splitting: true;
+        logLevel: "error";
+        pure: string[];
+        external: string[];
+        chunkNames: string;
+        plugins: import("esbuild").Plugin[];
+        write: false;
+        outdir: string;
+    }> | {
+        rebuild(): Promise<BuildResult<BuildOptions>>;
+        cancel(): void;
+        dispose(): void;
+    };
+}>;
+export declare function resolvePackageVersion({ cwd, pkg }: {
+    cwd: any;
+    pkg: any;
+}): Promise<string | undefined>;
+export declare function resolvePackage({ cwd, pkg }: {
+    cwd: any;
+    pkg: any;
+}): Promise<boolean>;
+export declare function getDarkModeSelector(opts: {
+    darkModeType?: 'class' | 'media';
+    content: string;
+}): string;
+export declare function getStyleTokensCss(tokens: StyleToken[], darkModeType?: 'class' | 'media'): string;
+export declare function findRelativeLinks(text: string): number[];
+export declare function extractPropControlsUnsafe(filename: any, name: any): Promise<{
+    propertyControls?: PropertyControls;
+    fonts?: ComponentFontBundle[];
+}>;
+export declare function parsePropertyControls(code: string): string | null;
+type ExtractedTokenInfo = {
+    tokenName: string;
+    metadata?: Record<string, any>;
+    defaultValue: string;
+};
+export declare function extractTokenInfo(code: string): ExtractedTokenInfo[];
+export declare function indentWithTabs(str: string, tabs: string): string;
+export declare function createExampleComponentCode({ outDir, config }: {
+    outDir: string;
+    config: Config;
+}): Promise<{
+    outDirForExample: string;
+    exampleCode: string;
+}>;
+type BundleResult = {
+    components: Array<{
+        componentPathSlug: string;
+        name: string;
+        url: string;
+        componentName: string;
+        propertyControls?: PropertyControls;
+    }>;
+};
+/**
+ * Compares two semantic version strings.
+ * Returns true if versionB is greater than versionA.
+ * Handles x.y.z, x.y, x, and optional pre-release (-alpha, etc).
+ */
+export declare function isVersionGreater(versionA: string, versionB: string): boolean;
+export {};
+//# sourceMappingURL=exporter.d.ts.map