From f8effeddbb935a8054ab258f61e2c5b8936e51b1 Mon Sep 17 00:00:00 2001 From: remorses Date: Sat, 25 Jan 2025 23:43:06 +0100 Subject: [PATCH] nn --- README.md | 2 -- unframer/README.md | 21 +++++++++++++++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c1af447..88376b3 100644 --- a/README.md +++ b/README.md @@ -205,8 +205,6 @@ If you find any errors rendering your components: ## Known limitations: -- Internationalization is not supported now - - You may face React warnings like: - `Accessing element.ref was removed in React 19.` This warning appears because Framer still uses the old `element.ref` API which was removed in React 19. This warning is harmless and will be fixed when Framer updates their codebase to use the new React 19 APIs. - `A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.` This warning sometimes appears when using SWV icons, it should be harmless, it only happens in development mode. diff --git a/unframer/README.md b/unframer/README.md index 768c47f..c1af447 100644 --- a/unframer/README.md +++ b/unframer/README.md @@ -159,6 +159,27 @@ export default function App() { } ``` +## Watching for changes + +You can use the `--watch` flag to automatically re-export components when they change in Framer: notice that you will need to click the Publish button in Framer to trigger the cli, Framer only updates the JavaScript modules when you publish your website. + +
+How it works +Unframer cli will poll your website url every 2 seconds with a HEAD request, when the `etag` header changes it will re-export the components. This means that the --watch flag may not work if your components are not used in your main page of your Framer website. +
+ +## How does unframer cli work? + +The Framer React Export plugin saves your Framer components JavaScript url in the Unframer database. When you run the Unframer cli the components urls are fetched and bundled with esbuild. The bundler will also resolve npm dependencies in your Framer overrides and code components using the latest version. + +You can customize the npm dependencies versions using the `--external` flag and installing them manually with `npm install`. + +Unframer will also create a `styles.css` file with the Framer global styles and the fonts used in your components. + +To generate TypeScript types for your components Unframer runs your downloaded components with Node.js and extracts the TypeScript types from the component `propertyControls` field, which is used to populate the Framer right bar controls. + +The Responsive component renders your components for each different breakpoint and only shows the current breakpoint via a CSS media query. The unused breakpoints are removed before hydration thanks to React [`useSyncExternalStore`](https://react.dev/reference/react/useSyncExternalStore). + ## Troubleshooting If you find any errors rendering your components: