unframer 0.6.0

package/README.md

@@ -0,0 +1,138 @@
+<div align='center'>
+    <br/>
+    <br/>
+    <h3>unframer</h3>
+    <br/>
+    <br/>
+</div>
+
+> [!IMPORTANT]
+> If your component has any problem like missing imports create an issue with the component url, these issues are usually because of updates to the `framer` runtime which is kept in sync in this repository in [unframer/framer-fixed/dist](./unframer/framer-fixed/dist) folder
+
+Download framer components as simple files
+
+-   Works with any React framework (Next.js, Gatsby, Vite, etc)
+-   Includes all your components dependencies
+-   Has Typescript support, inferred from your component variables (like `variant`)
+
+## Usage
+
+1. Install the package
+
+    ```sh
+    npm install unframer framer-motion
+    ```
+
+1. Create an `unframer.json` file like the following (the key will be used for the component folder inside `outDir`)
+
+    ```json
+    {
+        "outDir": "./framer",
+        "components": {
+            "logos": "https://framer.com/m/Logo-Ticker-1CEq.js@YtVlixDzOkypVBs3Dpav",
+            "menus": "https://framer.com/m/Mega-Menu-2wT3.js@W0zNsrcZ2WAwVuzt0BCl"
+        }
+    }
+    ```
+
+1. Copy your framer component url and add it to your config (remove the part after `@` to always use the latest version)
+
+    ![url import](./assets/framer-url-import.png)
+
+1. Run the command `npx unframer` to download the components and their types in the `outDir` directory
+1. Import the component inside your `jsx` files, for example
+
+```tsx
+import Menu from './framer/menus'
+import { FramerStyles } from 'unframer/dist/react'
+
+export default function App() {
+    return (
+        <div>
+            {/* Injects fonts and other framer utility styles */}
+            <FramerStyles Components={[Menu]} />
+            <Menu componentVariable='some variable' />
+        </div>
+    )
+}
+```
+
+## Using responsive variants
+
+```tsx
+import Logos from './framer/logos'
+import { FramerStyles } from 'unframer/dist/react'
+
+export default function App() {
+    return (
+        <div>
+            {/* Injects fonts and other framer utility styles */}
+            <FramerStyles Components={[Logos]} />
+            {/* Changes component variant based on breakpoint */}
+            <Logos.Responsive
+                variants={{
+                    Desktop: 'Logo Ticker',
+                    Tablet: 'Logo Ticker - M',
+                    Mobile: 'Logo Ticker - M',
+                }}
+            />
+        </div>
+    )
+}
+```
+
+## Styling
+
+You can use `className` or `style` props to style your components
+
+Notice that you will often need to use `!important` to override styles already defined in framer like `width` and `height`
+
+```tsx
+import Logos from './framer/logos'
+import { FramerStyles } from 'unframer/dist/react'
+
+export default function App() {
+    return (
+        <div>
+            {/* Injects fonts and other framer utility styles */}
+            <FramerStyles Components={[Logos]} />
+            {/* Changes component variant based on breakpoint */}
+            <Logos.responsive
+                className='!w-full'
+                variants={{
+                    Desktop: 'Logo Ticker',
+                    Tablet: 'Logo Ticker - M',
+                    Mobile: 'Logo Ticker - M',
+                }}
+            />
+        </div>
+    )
+}
+```
+
+## Supported component props
+
+`unframer` will add TypeScript definitions for your Framer components props and variables, some example variables you can use are:
+
+-   `variant`, created when you use variants in Framer
+-   functions, created when you use an `event` variable in Framer
+-   Any scalar variable like String, Number, Boolean, Date, etc
+-   Image variables (object with `src`, `srcSet` and `alt`), created when you use an `image` variable in Framer
+-   Link strings, created when you make a link a variable in Framer
+-   Rich text, created when you use a `richText` variable in Framer
+-   Color, a string
+-   React component, created when you use a `component` variable in Framer, for example in the Ticker component
+
+Known limitations:
+
+-   Color styles (also known as tokens) can get out of sync with your Framer project, if this happen you will have to find the corresponding css variable (in the form of `--token-xxxx`) in the component code and define it in your CSS, for example:
+
+```css
+:root {
+    --token-64603892-5c8b-477a-82d6-e795e75dd5dc: #0b5c96;
+}
+```
+
+## Example
+
+Look at the [nextjs-app](./nextjs-app) folder for an example

package/bin.mjs

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+import { cli } from './dist/cli.js'
+
+cli()

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+export declare function cli(): Promise<void>;
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"AAUA,wBAAsB,GAAG,kBA+CxB"}

package/dist/cli.js

@@ -0,0 +1,98 @@
+import { bundle, logger } from './exporter.js';
+import chokidar from 'chokidar';
+import fs from 'fs-extra';
+import { findUp } from 'find-up';
+import path from 'path';
+const configName = 'unframer.json';
+const __dirname = path.dirname(new URL(import.meta.url).pathname);
+export async function cli() {
+    const cwd = process.cwd();
+    const watch = process.argv.includes('--watch');
+    logger.log(`Looking for ${configName} in ${cwd}`);
+    const configPath = await findUp([configName], { cwd });
+    if (!configPath) {
+        logger.log(`No ${configName} found`);
+        return;
+    }
+    const configContent = fs.readFileSync(configPath, 'utf8');
+    if (!configContent) {
+        logger.log(`No ${configName} contents found`);
+        return;
+    }
+    let config = JSON.parse(configContent);
+    await processConfig(config);
+    if (watch) {
+        const watcher = chokidar.watch(configPath, {
+            persistent: true,
+        });
+        let controller = new AbortController();
+        watcher.on('change', async (path) => {
+            console.log();
+            controller.abort();
+            controller = new AbortController();
+            const newConfig = safeJsonParse(fs.readFileSync(configPath, 'utf8'));
+            if (!newConfig) {
+                logger.log(`Invalid ${configName} file`);
+                return;
+            }
+            const newNames = getNewNames(config, newConfig);
+            if (newNames.length) {
+                logger.log(`New components found: ${newNames.join(', ')}`);
+                await processConfig({
+                    ...newConfig,
+                    components: pluck(newConfig.components, newNames),
+                }, controller.signal);
+            }
+            config = newConfig;
+        });
+    }
+}
+function safeJsonParse(json) {
+    try {
+        return JSON.parse(json);
+    }
+    catch (e) {
+        return null;
+    }
+}
+function pluck(o, names) {
+    return Object.fromEntries(names.map((n) => [n, o[n]]));
+}
+function getNewNames(oldConfig, newConfig) {
+    // get the new names, also check if the previous url (object value) has changed
+    const oldKeys = Object.keys(oldConfig.components);
+    const newKeys = Object.keys(newConfig.components);
+    const newNames = newKeys.filter((key) => {
+        if (!oldKeys.includes(key)) {
+            return true;
+        }
+        if (oldConfig.components[key] !== newConfig.components[key]) {
+            return true;
+        }
+        return false;
+    });
+    return newNames;
+}
+async function processConfig(config, signal) {
+    try {
+        const { components, outDir } = config || {};
+        const installDir = path.resolve(process.cwd(), outDir || 'framer');
+        if (!components) {
+            logger.log(`No components found in ${configName}`);
+            return;
+        }
+        await bundle({
+            components,
+            cwd: installDir,
+            signal,
+        });
+    }
+    catch (e) {
+        if (signal) {
+            logger.log('Error processing config', e.message);
+            return;
+        }
+        throw e;
+    }
+}
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.tsx"],"names":[],"mappings":"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"}

package/dist/cli.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=cli.test.d.ts.map

package/dist/cli.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.test.d.ts","sourceRoot":"","sources":["../src/cli.test.ts"],"names":[],"mappings":""}

package/dist/cli.test.js

@@ -0,0 +1,37 @@
+import tmp from 'tmp';
+import { test } from 'vitest';
+import { bundle } from './exporter.js';
+test('bundle simple component', async () => {
+    const tempFolder = tmp.dirSync({ unsafeCleanup: true }).name;
+    console.log('tempFolder', tempFolder);
+    const url = 'https://framer.com/m/Logo-Ticker-1CEq.js@YtVlixDzOkypVBs3Dpav';
+    await bundle({
+        components: {
+            ticker: url,
+        },
+        cwd: tempFolder,
+    });
+}, 1000 * 10);
+test('issue #1', async () => {
+    const tempFolder = tmp.dirSync({ unsafeCleanup: true }).name;
+    console.log('tempFolder', tempFolder);
+    const url = 'https://framer.com/m/Item-Qetw.js@vUDyI0yvPLONiBDf8Kzw';
+    await bundle({
+        components: {
+            item: url,
+        },
+        cwd: tempFolder,
+    });
+}, 1000 * 10);
+test('bundle ticker variant', async () => {
+    const tempFolder = tmp.dirSync({ unsafeCleanup: true }).name;
+    console.log('tempFolder', tempFolder);
+    const url = 'https://framer.com/m/Brand-Logo-Ticker-Uc8E.js@WLfLN2D3C6m9DWtZu0ci';
+    await bundle({
+        components: {
+            logos: url,
+        },
+        cwd: tempFolder,
+    });
+}, 1000 * 10);
+//# sourceMappingURL=cli.test.js.map

package/dist/cli.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.test.js","sourceRoot":"","sources":["../src/cli.test.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,KAAK,CAAA;AAErB,OAAO,EAAE,IAAI,EAAU,MAAM,QAAQ,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAEtC,IAAI,CACA,yBAAyB,EACzB,KAAK,IAAI,EAAE;IACP,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAA;IAC5D,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IACrC,MAAM,GAAG,GACL,+DAA+D,CAAA;IACnE,MAAM,MAAM,CAAC;QACT,UAAU,EAAE;YACR,MAAM,EAAE,GAAG;SACd;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,CAAA;AACN,CAAC,EACD,IAAI,GAAG,EAAE,CACZ,CAAA;AACD,IAAI,CACA,UAAU,EACV,KAAK,IAAI,EAAE;IACP,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAA;IAC5D,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IACrC,MAAM,GAAG,GAAG,wDAAwD,CAAA;IACpE,MAAM,MAAM,CAAC;QACT,UAAU,EAAE;YACR,IAAI,EAAE,GAAG;SACZ;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,CAAA;AACN,CAAC,EACD,IAAI,GAAG,EAAE,CACZ,CAAA;AACD,IAAI,CACA,uBAAuB,EACvB,KAAK,IAAI,EAAE;IACP,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAA;IAC5D,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;IACrC,MAAM,GAAG,GACL,qEAAqE,CAAA;IACzE,MAAM,MAAM,CAAC;QACT,UAAU,EAAE;YACR,KAAK,EAAE,GAAG;SACb;QACD,GAAG,EAAE,UAAU;KAClB,CAAC,CAAA;AACN,CAAC,EACD,IAAI,GAAG,EAAE,CACZ,CAAA"}

package/dist/exporter.d.ts

@@ -0,0 +1,21 @@
+import { Plugin } from 'esbuild';
+import { PropertyControls } from '../framer-fixed/dist/framer.js';
+export declare const logger: {
+    log(...args: any[]): void;
+    error(...args: any[]): void;
+};
+export declare function bundle({ cwd: out, components, signal, }: {
+    cwd?: string | undefined;
+    components?: Record<string, string> | undefined;
+    signal?: AbortSignal | undefined;
+}): Promise<void>;
+export declare function extractPropControlsSafe(text: any, name: any): Promise<PropertyControls<any, any> | undefined>;
+export declare function extractPropControlsUnsafe(filename: any, name: any): Promise<any>;
+export declare function propControlsToType(controls?: PropertyControls): string;
+export declare function parsePropertyControls(code: string): string | null;
+export declare function esbuildPluginBundleDependencies({ signal, }: {
+    signal?: AbortSignal | undefined;
+}): Plugin;
+export declare function resolveRedirect(url?: string, redirectCache?: any): Promise<any>;
+export declare function recursiveResolveRedirect(url?: string): Promise<string | undefined>;
+//# sourceMappingURL=exporter.d.ts.map

package/dist/exporter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"exporter.d.ts","sourceRoot":"","sources":["../src/exporter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAoB,MAAM,SAAS,CAAA;AAQlD,OAAO,EAGH,gBAAgB,EACnB,MAAM,gCAAgC,CAAA;AAQvC,eAAO,MAAM,MAAM;;;CAOlB,CAAA;AAYD,wBAAsB,MAAM,CAAC,EACzB,GAAG,EAAE,GAAQ,EACb,UAAyC,EACzC,MAAqC,GACxC;;;;CAAA,iBAsIA;AAMD,wBAAsB,uBAAuB,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,mDAmCvD;AAED,wBAAsB,yBAAyB,CAAC,QAAQ,KAAA,EAAE,IAAI,KAAA,gBA2B7D;AAWD,wBAAgB,kBAAkB,CAAC,QAAQ,CAAC,EAAE,gBAAgB,UA8E7D;AAED,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,iBAqCjD;AAUD,wBAAgB,+BAA+B,CAAC,EAC5C,MAA6C,GAChD;;CAAA,UA6HA;AAED,wBAAsB,eAAe,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,GAAG,gBAYtE;AAED,wBAAsB,wBAAwB,CAAC,GAAG,CAAC,EAAE,MAAM,+BAa1D"}