Pass live api through context

woutdp · Sep 4, 2023 · 9daf2da · 9daf2da
1 parent d9eba0a
commit 9daf2da
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git a/assets/js/live_svelte/hooks.js b/assets/js/live_svelte/hooks.js
@@ -71,7 +71,7 @@ function getProps(ref) {
     return {
         ...getAttributeJson(ref, "data-props"),
         ...getLiveJsonProps(ref),
-        live: ref,
+        ...ref._live_props,
         $$slots: getSlots(ref),
         $$scope: {},
     }
@@ -83,7 +83,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 = {
@@ -98,6 +98,9 @@ export function getHooks(components) {
                 throw new Error(`Unable to find ${componentName} component.`)
             }
 
+            this._live_props = options?.prop !== false ? {live: this} : undefined
+            this._live_context = options?.context !== false ? new Map([["live-svelte", this]]) : undefined
+
             for (const liveJsonElement of Object.keys(getAttributeJson(this, "data-live-json"))) {
                 window.addEventListener(`${liveJsonElement}_initialized`, event => this._instance.$set(getProps(this)), false)
                 window.addEventListener(`${liveJsonElement}_patched`, event => this._instance.$set(getProps(this)), false)
@@ -106,6 +109,7 @@ export function getHooks(components) {
             this._instance = new Component({
                 target: this.el,
                 props: getProps(this),
+                context: this._live_context,
                 hydrate: this.el.hasAttribute("data-ssr"),
             })
         },

diff --git a/assets/js/live_svelte/index.js b/assets/js/live_svelte/index.js
@@ -1,2 +1,3 @@
 export {getRender} from "./render"
 export {getHooks} from "./hooks"
+export {getLive} from "./utils"
diff --git a/assets/js/live_svelte/types.d.ts b/assets/js/live_svelte/types.d.ts
@@ -9,5 +9,11 @@ export type Live = {
     uploadTo(phxTarget: any, name: string, files: any): void
 }
 
-export declare const getHooks: (components: object) => object
+export type HooksOptions = {
+    prop?: boolean
+    context?: boolean
+}
+
+export declare const getHooks: (components: object, options?: HooksOptions) => object
 export declare const getRender: (components: object) => (name: string, props: object, slots: object) => any
+export declare const getLive: (getContext: (key: string) => any) => Live
diff --git a/assets/js/live_svelte/utils.js b/assets/js/live_svelte/utils.js
@@ -9,3 +9,7 @@ export function normalizeComponents(components) {
     }
     return normalized
 }
+
+export function getLive(getContext) {
+    return getContext("live-svelte")
+}