Pass live api through context not a prop

Author: vonagam

README.md

@@ -217,11 +217,12 @@ If you have examples you want to add, feel free to create a PR, I'd be happy to
 
 ```svelte
 <script>
+    import {getContext} from "svelte"
     // 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
+    const live = getContext("live-svelte")
 
     function increase() {
         // This pushes the event over the websocket
@@ -236,7 +237,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/js/live_svelte/hooks.js

@@ -71,7 +71,6 @@ function getProps(ref) {
     return {
         ...getAttributeJson(ref, "data-props"),
         ...getLiveJsonProps(ref),
-        live: ref,
         $$slots: getSlots(ref),
         $$scope: {},
     }
@@ -106,6 +105,7 @@ export function getHooks(components) {
             this._instance = new Component({
                 target: this.el,
                 props: getProps(this),
+                context: new Map([['live-svelte', this]]),
                 hydrate: this.el.hasAttribute("data-ssr"),
             })
         },

example_project/assets/package-lock.json

@@ -1,11 +1,11 @@
 <script>
     import {fly} from "svelte/transition"
     import {elasticOut} from "svelte/easing"
-    import {afterUpdate} from "svelte"
+    import {getContext, afterUpdate} from "svelte"
 
     export let messages
     export let name
-    export let live
+    const live = getContext("live-svelte")
 
     let body = ""
     let messagesElement

example_project/assets/svelte/Chat.svelte

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

example_project/assets/svelte/LightControllers.svelte

@@ -1,8 +1,10 @@
 <script>
     import {slide, fly} from "svelte/transition"
+    import {getContext} from "svelte"
 
-    export let live
     export let items = []
+    const live = getContext("live-svelte")
+
     let body
     let i = 1
     let showItems = true

example_project/assets/svelte/LogList.svelte

@@ -21,10 +21,10 @@ defmodule ExampleWeb.LiveExample5 do
     <script>
         import {slide, fly} from "svelte/transition"
         import {Marquee} from "dynamic-marquee"
-        import {onMount} from "svelte"
+        import {getContext, onMount} from "svelte"
 
         export let news = []
-        export let live
+        const live = getContext("live-svelte")
 
         let newItem = ""
         let marquee

example_project/lib/example_web/live/live_breaking_news.ex

@@ -1,11 +1,11 @@
 <script>
     import {slide, fly, fade} from "svelte/transition"
     import {elasticOut} from "svelte/easing"
-    import {afterUpdate} from "svelte"
+    import {getContext, afterUpdate} from "svelte"
 
     export let messages
     export let name
-    export let live
+    const live = getContext("live-svelte")
 
     let body = ""
     let messagesElement

examples/advanced_chat/AdvancedChat.svelte

@@ -1,8 +1,9 @@
 <script>
     import {fly} from "svelte/transition"
+    import {getContext} from "svelte"
 
     export let number = 1
-    export let live
+    const live = getContext("live-svelte")
 
     function increase() {
         live.pushEvent("set_number", {number: number + 1})

examples/animated_number/Numbers.svelte

@@ -2,10 +2,10 @@
     // https://github.com/tjenkinson/dynamic-marquee
     import {slide, fly} from "svelte/transition"
     import {Marquee} from "dynamic-marquee"
-    import {onMount} from "svelte"
+    import {getContext, onMount} from "svelte"
 
     export let news = []
-    export let live
+    const live = getContext("live-svelte")
 
     let newItem = ""
     let marquee