Embed [`LiveView`][1]s in web pages through `LivePortal`s.
npm install live_view_portalEmbed [LiveView][1]s in web pages through LivePortals.
First install live_view_portal in your Phoenix application:
``bash`
npm install live_view_portal --prefix assets
Import into your desired javascript file.
`javascript`
import { LivePortal, deadMount } from "live_view_portal";
By default, portal uses a shadow DOM. You can disable it by setting useShadowDOM to falsedeadMount
in the function and the LivePortal class.
1. Run npm run build to bundle js.assets/js/dist/live_view_portal.js
2. Copy the built file from to your LiveView app under assets/vendor.import ../vendor/live_view_portal.js
3. .
You can check out the guide to setup your first app with LiveViewPortal.
LiveViewPortal's server side code is the same as Phoenix.LiveView. No Hex package is distributed for now. If in the
future we need to modify elixir code, we can publish it on Hex. Then LiveViewPortal would be introduced as a dependency
in the place of Phoenix.LiveView.
For now this project is pure JS.
LiveViewPortal introduces changes to LiveView code on the javascript side. It also exposes an API to create portals and
connect to the underlying LiveView.
Files inside assets/phoenix_live_view/js/:
- dom.jsdom_patch.js
- dom_post_morph_restorer.js
- js.js
- live_socket.js
- view.js
- view_hook.js`
-
We have decided to adopt the following versioning format: X.X.X-lvY.Y.Y, where:
- X.X.X represents the application version.
- lvY.Y.Y indicates the LiveView version.
#### Version Increment Rules
- Minor Version Updates: If the LiveView version is upgraded within its minor version (e.g., from 1.5.0 to 1.5.1), we will increment the minor version of our app.
- Major Version Updates: If the LiveView version is upgraded within its major version (e.g., from 1.5.0 to 2.0.0), we will increment the major version of our app.
[1]: https://github.com/phoenixframework/phoenix_live_view