Pass live api through context not prop

Author: vonagam

README.md

@@ -217,11 +217,14 @@ If you have examples you want to add, feel free to create a PR, I'd be happy to
 
 ```svelte
 <script>
+    import {getLive} from "live_svelte"
+
+    // live contains all exported LiveView methods available to the frontend
+    const live = getLive()
+
     // The number prop is reactive,
     // this means if the server assigns the number, it will update in the frontend
     export let number = 1
-    // live contains all exported LiveView methods available to the frontend
-    export let live
 
     function increase() {
         // This pushes the event over the websocket
@@ -236,7 +239,7 @@ If you have examples you want to add, feel free to create a PR, I'd be happy to
     }
 
     function decrease() {
-        pushEvent("set_number", {number: number - 1}, () => {})
+        live.pushEvent("set_number", {number: number - 1}, () => {})
     }
 </script>
 

assets/copy/js/app.js

@@ -20,10 +20,13 @@ import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
+import {getContext} from "svelte"
 import topbar from "../vendor/topbar"
-import {getHooks} from "live_svelte"
+import {getHooks, setupLive} from "live_svelte"
 import * as Components from "../svelte/**/*.svelte"
 
+setupLive(getContext)
+
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveSocket("/live", Socket, {hooks: getHooks(Components), params: {_csrf_token: csrfToken}})
 

assets/js/live_svelte/hooks.js

@@ -1,4 +1,4 @@
-import {normalizeComponents} from "./utils"
+import {normalizeComponents, getLive} from "./utils"
 
 function getAttributeJson(ref, attributeName) {
     const data = ref.el.getAttribute(attributeName)
@@ -71,7 +71,6 @@ function getProps(ref) {
     return {
         ...getAttributeJson(ref, "data-props"),
         ...getLiveJsonProps(ref),
-        live: ref,
         $$slots: getSlots(ref),
         $$scope: {},
     }
@@ -83,7 +82,7 @@ function findSlotCtx(component) {
     return component.$$.ctx.find(ctxElement => ctxElement?.default)
 }
 
-export function getHooks(components) {
+export function getHooks(components, options) {
     components = normalizeComponents(components)
 
     const SvelteHook = {
@@ -106,6 +105,7 @@ export function getHooks(components) {
             this._instance = new Component({
                 target: this.el,
                 props: getProps(this),
+                context: new Map([[getLive, this]]),
                 hydrate: this.el.hasAttribute("data-ssr"),
             })
         },

assets/js/live_svelte/index.js

@@ -1,2 +1,3 @@
 export {getRender} from "./render"
 export {getHooks} from "./hooks"
+export {setupLive, getLive} from "./utils"

assets/js/live_svelte/types.d.ts

@@ -11,3 +11,5 @@ export type Live = {
 
 export declare const getHooks: (components: object) => object
 export declare const getRender: (components: object) => (name: string, props: object, slots: object) => any
+export declare const setupLive: (getContext: (key: string) => any) => Live
+export declare const getLive: () => Live

assets/js/live_svelte/utils.js

@@ -9,3 +9,13 @@ export function normalizeComponents(components) {
     }
     return normalized
 }
+
+let getSvelteContext = undefined
+
+export function setupLive(getContext) {
+    getSvelteContext = getContext
+}
+
+export function getLive() {
+    return getSvelteContext?.(getLive)
+}

example_project/assets/js/app.js

@@ -20,11 +20,14 @@ import "phoenix_html"
 // Establish Phoenix Socket and LiveView configuration.
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
+import {getContext} from "svelte"
 import topbar from "../vendor/topbar"
 import {createLiveJsonHooks} from "live_json"
-import {getHooks} from "live_svelte"
+import {getHooks, setupLive} from "live_svelte"
 import * as Components from "../svelte/**/*.svelte"
 
+setupLive(getContext)
+
 const Hooks = {
     ...createLiveJsonHooks(),
     ...getHooks(Components),

example_project/assets/package-lock.json

@@ -2,10 +2,12 @@
     import {fly} from "svelte/transition"
     import {elasticOut} from "svelte/easing"
     import {afterUpdate} from "svelte"
+    import {getLive} from "live_svelte"
+
+    const live = getLive()
 
     export let messages
     export let name
-    export let live
 
     let body = ""
     let messagesElement

example_project/assets/svelte/Chat.svelte

@@ -1,6 +1,10 @@
 <script>
-    export let live
+    import {getLive} from "live_svelte"
+
+    const live = getLive()
+
     export let isOn = false
+
     const toggleLight = () => {
         isOn = !isOn
         live.pushEvent(isOn ? "on" : "off")