Skip to content

Commit

Permalink
nn
Browse files Browse the repository at this point in the history
  • Loading branch information
remorses committed Jan 25, 2025
1 parent 03433d9 commit f8effed
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 2 deletions.
2 changes: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
21 changes: 21 additions & 0 deletions unframer/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<details>
<summary>How it works</summary>
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.
</details>

## 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:
Expand Down

0 comments on commit f8effed

Please sign in to comment.