phoenix_live_view 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/js/phoenix_live_view/dom.ts +3 -1
- package/assets/js/phoenix_live_view/dom_patch.ts +1 -1
- package/assets/js/phoenix_live_view/live_socket.ts +16 -9
- package/assets/js/phoenix_live_view/view.ts +6 -0
- package/assets/js/types/assets/js/phoenix_live_view/aria.d.ts +9 -0
- package/assets/js/types/assets/js/phoenix_live_view/browser.d.ts +20 -0
- package/assets/js/types/assets/js/phoenix_live_view/constants.d.ts +98 -0
- package/assets/js/types/assets/js/phoenix_live_view/dom.d.ts +82 -0
- package/assets/js/types/assets/js/phoenix_live_view/dom_patch.d.ts +65 -0
- package/assets/js/types/assets/js/phoenix_live_view/dom_post_morph_restorer.d.ts +8 -0
- package/assets/js/types/assets/js/phoenix_live_view/element_ref.d.ts +14 -0
- package/assets/js/types/assets/js/phoenix_live_view/entry_uploader.d.ts +16 -0
- package/assets/js/types/assets/js/phoenix_live_view/hooks.d.ts +3 -0
- package/assets/js/types/assets/js/phoenix_live_view/index.d.ts +48 -0
- package/assets/js/types/assets/js/phoenix_live_view/js.d.ts +99 -0
- package/assets/js/types/assets/js/phoenix_live_view/js_commands.d.ts +225 -0
- package/assets/js/types/assets/js/phoenix_live_view/live_socket.d.ts +315 -0
- package/assets/js/types/assets/js/phoenix_live_view/live_uploader.d.ts +29 -0
- package/assets/js/types/assets/js/phoenix_live_view/rendered.d.ts +50 -0
- package/assets/js/types/assets/js/phoenix_live_view/upload_entry.d.ts +42 -0
- package/assets/js/types/assets/js/phoenix_live_view/utils.d.ts +15 -0
- package/assets/js/types/assets/js/phoenix_live_view/view.d.ts +1 -0
- package/assets/js/types/assets/js/phoenix_live_view/view_hook.d.ts +279 -0
- package/package.json +2 -2
- package/priv/static/phoenix_live_view.cjs.js +16 -9
- package/priv/static/phoenix_live_view.cjs.js.map +2 -2
- package/priv/static/phoenix_live_view.esm.js +16 -9
- package/priv/static/phoenix_live_view.esm.js.map +2 -2
- package/priv/static/phoenix_live_view.js +16 -9
- package/priv/static/phoenix_live_view.min.js +4 -4
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
import LiveSocket from "./live_socket";
|
|
2
|
+
/**
|
|
3
|
+
* An encoded JS command. Use functions in the `Phoenix.LiveView.JS` module on
|
|
4
|
+
* the server to create and compose JS commands.
|
|
5
|
+
*
|
|
6
|
+
* The underlying primitive type is considered opaque, and may change in future
|
|
7
|
+
* versions.
|
|
8
|
+
*/
|
|
9
|
+
export type EncodedJS = string | Array<any>;
|
|
10
|
+
type Transition = string | string[];
|
|
11
|
+
type BaseOpts = {
|
|
12
|
+
/**
|
|
13
|
+
* The CSS transition classes to set.
|
|
14
|
+
* Accepts a string of classes or a 3-tuple like:
|
|
15
|
+
* `["ease-out duration-300", "opacity-0", "opacity-100"]`.
|
|
16
|
+
*/
|
|
17
|
+
transition?: Transition;
|
|
18
|
+
/** The transition duration in milliseconds. Defaults to `200`. */
|
|
19
|
+
time?: number;
|
|
20
|
+
/** Whether to block UI during transition. Defaults to `true`. */
|
|
21
|
+
blocking?: boolean;
|
|
22
|
+
};
|
|
23
|
+
type ShowOpts = BaseOpts & {
|
|
24
|
+
/** The CSS display value to set. Defaults to `"block"`. */
|
|
25
|
+
display?: string;
|
|
26
|
+
};
|
|
27
|
+
type ToggleOpts = {
|
|
28
|
+
/** The CSS display value to set. Defaults to `"block"`. */
|
|
29
|
+
display?: string;
|
|
30
|
+
/**
|
|
31
|
+
* The CSS transition classes for showing.
|
|
32
|
+
* Accepts either the string of classes to apply when toggling in, or
|
|
33
|
+
* a 3-tuple containing the transition class, the class to apply
|
|
34
|
+
* to start the transition, and the ending transition class, such as:
|
|
35
|
+
* `["ease-out duration-300", "opacity-0", "opacity-100"]`.
|
|
36
|
+
*/
|
|
37
|
+
in?: Transition;
|
|
38
|
+
/**
|
|
39
|
+
* The CSS transition classes for hiding.
|
|
40
|
+
* Accepts either string of classes to apply when toggling out, or
|
|
41
|
+
* a 3-tuple containing the transition class, the class to apply
|
|
42
|
+
* to start the transition, and the ending transition class, such as:
|
|
43
|
+
* `["ease-out duration-300", "opacity-100", "opacity-0"]`.
|
|
44
|
+
*/
|
|
45
|
+
out?: Transition;
|
|
46
|
+
/** The transition duration in milliseconds. */
|
|
47
|
+
time?: number;
|
|
48
|
+
/** Whether to block UI during transition. Defaults `true`. */
|
|
49
|
+
blocking?: boolean;
|
|
50
|
+
};
|
|
51
|
+
type TransitionCommandOpts = {
|
|
52
|
+
/** The transition duration in milliseconds. */
|
|
53
|
+
time?: number;
|
|
54
|
+
/** Whether to block UI during transition. Defaults `true`. */
|
|
55
|
+
blocking?: boolean;
|
|
56
|
+
};
|
|
57
|
+
type PushOpts = {
|
|
58
|
+
/** Data to be merged into the event payload. */
|
|
59
|
+
value?: any;
|
|
60
|
+
/** For targeting a LiveComponent by its ID, a component ID (number), or a CSS selector string. */
|
|
61
|
+
target?: HTMLElement | number | string;
|
|
62
|
+
/** Indicates if a page loading state should be shown. */
|
|
63
|
+
page_loading?: boolean;
|
|
64
|
+
[key: string]: any;
|
|
65
|
+
};
|
|
66
|
+
type NavigationOpts = {
|
|
67
|
+
/** Whether to replace the current history entry instead of pushing a new one. */
|
|
68
|
+
replace?: boolean;
|
|
69
|
+
};
|
|
70
|
+
/**
|
|
71
|
+
* Represents all possible JS commands that can be generated by the factory.
|
|
72
|
+
* This is used as a base for LiveSocketJSCommands and HookJSCommands.
|
|
73
|
+
*/
|
|
74
|
+
export interface AllJSCommands {
|
|
75
|
+
/**
|
|
76
|
+
* Executes an encoded JS command in the context of an element.
|
|
77
|
+
* This version is for general use via liveSocket.js().
|
|
78
|
+
*
|
|
79
|
+
* @param el - The element in whose context to execute the JS command.
|
|
80
|
+
* @param encodedJS - The encoded JS command with operations to execute.
|
|
81
|
+
*/
|
|
82
|
+
exec(el: HTMLElement, encodedJS: EncodedJS): void;
|
|
83
|
+
/**
|
|
84
|
+
* Shows an element.
|
|
85
|
+
*
|
|
86
|
+
* @param el - The element to show.
|
|
87
|
+
* @param {ShowOpts} [opts={}] - Optional settings.
|
|
88
|
+
* Accepts: `display`, `transition`, `time`, and `blocking`.
|
|
89
|
+
*/
|
|
90
|
+
show(el: HTMLElement, opts?: ShowOpts): void;
|
|
91
|
+
/**
|
|
92
|
+
* Hides an element.
|
|
93
|
+
*
|
|
94
|
+
* @param el - The element to hide.
|
|
95
|
+
* @param [opts={}] - Optional settings.
|
|
96
|
+
* Accepts: `transition`, `time`, and `blocking`.
|
|
97
|
+
*/
|
|
98
|
+
hide(el: HTMLElement, opts?: BaseOpts): void;
|
|
99
|
+
/**
|
|
100
|
+
* Toggles the visibility of an element.
|
|
101
|
+
*
|
|
102
|
+
* @param el - The element to toggle.
|
|
103
|
+
* @param [opts={}] - Optional settings.
|
|
104
|
+
* Accepts: `display`, `in`, `out`, `time`, and `blocking`.
|
|
105
|
+
*/
|
|
106
|
+
toggle(el: HTMLElement, opts?: ToggleOpts): void;
|
|
107
|
+
/**
|
|
108
|
+
* Adds CSS classes to an element.
|
|
109
|
+
*
|
|
110
|
+
* @param el - The element to add classes to.
|
|
111
|
+
* @param names - The class name(s) to add.
|
|
112
|
+
* @param [opts={}] - Optional settings.
|
|
113
|
+
* Accepts: `transition`, `time`, and `blocking`.
|
|
114
|
+
*/
|
|
115
|
+
addClass(el: HTMLElement, names: string | string[], opts?: BaseOpts): void;
|
|
116
|
+
/**
|
|
117
|
+
* Removes CSS classes from an element.
|
|
118
|
+
*
|
|
119
|
+
* @param el - The element to remove classes from.
|
|
120
|
+
* @param names - The class name(s) to remove.
|
|
121
|
+
* @param [opts={}] - Optional settings.
|
|
122
|
+
* Accepts: `transition`, `time`, and `blocking`.
|
|
123
|
+
*/
|
|
124
|
+
removeClass(el: HTMLElement, names: string | string[], opts?: BaseOpts): void;
|
|
125
|
+
/**
|
|
126
|
+
* Toggles CSS classes on an element.
|
|
127
|
+
*
|
|
128
|
+
* @param el - The element to toggle classes on.
|
|
129
|
+
* @param names - The class name(s) to toggle.
|
|
130
|
+
* @param [opts={}] - Optional settings.
|
|
131
|
+
* Accepts: `transition`, `time`, and `blocking`.
|
|
132
|
+
*/
|
|
133
|
+
toggleClass(el: HTMLElement, names: string | string[], opts?: BaseOpts): void;
|
|
134
|
+
/**
|
|
135
|
+
* Applies a CSS transition to an element.
|
|
136
|
+
*
|
|
137
|
+
* @param el - The element to apply the transition to.
|
|
138
|
+
* @param transition - The transition class(es) to apply.
|
|
139
|
+
* Accepts a string of classes to apply when transitioning or
|
|
140
|
+
* a 3-tuple containing the transition class, the class to apply
|
|
141
|
+
* to start the transition, and the ending transition class, such as:
|
|
142
|
+
*
|
|
143
|
+
* ["ease-out duration-300", "opacity-100", "opacity-0"]
|
|
144
|
+
*
|
|
145
|
+
* @param [opts={}] - Optional settings for timing and blocking behavior.
|
|
146
|
+
* Accepts: `time` and `blocking`.
|
|
147
|
+
*/
|
|
148
|
+
transition(el: HTMLElement, transition: string | string[], opts?: TransitionCommandOpts): void;
|
|
149
|
+
/**
|
|
150
|
+
* Sets an attribute on an element.
|
|
151
|
+
*
|
|
152
|
+
* @param el - The element to set the attribute on.
|
|
153
|
+
* @param attr - The attribute name to set.
|
|
154
|
+
* @param val - The value to set for the attribute.
|
|
155
|
+
*/
|
|
156
|
+
setAttribute(el: HTMLElement, attr: string, val: string): void;
|
|
157
|
+
/**
|
|
158
|
+
* Removes an attribute from an element.
|
|
159
|
+
*
|
|
160
|
+
* @param el - The element to remove the attribute from.
|
|
161
|
+
* @param attr - The attribute name to remove.
|
|
162
|
+
*/
|
|
163
|
+
removeAttribute(el: HTMLElement, attr: string): void;
|
|
164
|
+
/**
|
|
165
|
+
* Toggles an attribute on an element between two values.
|
|
166
|
+
*
|
|
167
|
+
* @param el - The element to toggle the attribute on.
|
|
168
|
+
* @param attr - The attribute name to toggle.
|
|
169
|
+
* @param val1 - The first value to toggle between.
|
|
170
|
+
* @param val2 - The second value to toggle between.
|
|
171
|
+
*/
|
|
172
|
+
toggleAttribute(el: HTMLElement, attr: string, val1: string, val2: string): void;
|
|
173
|
+
/**
|
|
174
|
+
* Pushes an event to the server.
|
|
175
|
+
*
|
|
176
|
+
* @param el - An element that belongs to the target LiveView / LiveComponent or a component ID.
|
|
177
|
+
* To target a LiveComponent by its ID, pass a separate `target` in the options.
|
|
178
|
+
* @param type - The event name to push.
|
|
179
|
+
* @param [opts={}] - Optional settings.
|
|
180
|
+
* Accepts: `value`, `target`, `page_loading`.
|
|
181
|
+
*/
|
|
182
|
+
push(el: HTMLElement, type: string, opts?: PushOpts): void;
|
|
183
|
+
/**
|
|
184
|
+
* Sends a navigation event to the server and updates the browser's pushState history.
|
|
185
|
+
*
|
|
186
|
+
* @param href - The URL to navigate to.
|
|
187
|
+
* @param [opts={}] - Optional settings.
|
|
188
|
+
* Accepts: `replace`.
|
|
189
|
+
*/
|
|
190
|
+
navigate(href: string, opts?: NavigationOpts): void;
|
|
191
|
+
/**
|
|
192
|
+
* Sends a patch event to the server and updates the browser's pushState history.
|
|
193
|
+
*
|
|
194
|
+
* @param href - The URL to patch to.
|
|
195
|
+
* @param [opts={}] - Optional settings.
|
|
196
|
+
* Accepts: `replace`.
|
|
197
|
+
*/
|
|
198
|
+
patch(href: string, opts?: NavigationOpts): void;
|
|
199
|
+
/**
|
|
200
|
+
* Mark attributes as ignored, skipping them when patching the DOM.
|
|
201
|
+
*
|
|
202
|
+
* @param el - The element to ignore attributes on.
|
|
203
|
+
* @param attrs - The attribute name or names to ignore.
|
|
204
|
+
*/
|
|
205
|
+
ignoreAttributes(el: HTMLElement, attrs: string | string[]): void;
|
|
206
|
+
}
|
|
207
|
+
declare const _default: (liveSocket: LiveSocket, eventType: string | null) => LiveSocketJSCommands;
|
|
208
|
+
export default _default;
|
|
209
|
+
/**
|
|
210
|
+
* JSCommands for use with `liveSocket.js()`.
|
|
211
|
+
* Includes the general `exec` command that requires an element.
|
|
212
|
+
*/
|
|
213
|
+
export type LiveSocketJSCommands = AllJSCommands;
|
|
214
|
+
/**
|
|
215
|
+
* JSCommands for use within a Hook.
|
|
216
|
+
* The `exec` command is tailored for hooks, not requiring an explicit element.
|
|
217
|
+
*/
|
|
218
|
+
export interface HookJSCommands extends Omit<AllJSCommands, "exec"> {
|
|
219
|
+
/**
|
|
220
|
+
* Executes a JS command in the context of the hook's element.
|
|
221
|
+
*
|
|
222
|
+
* @param encodedJS - The encoded JS command with operations to execute.
|
|
223
|
+
*/
|
|
224
|
+
exec(encodedJS: EncodedJS): void;
|
|
225
|
+
}
|
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
import { type Socket } from "phoenix";
|
|
2
|
+
import View from "./view";
|
|
3
|
+
import { EncodedJS, LiveSocketJSCommands } from "./js_commands";
|
|
4
|
+
import { HooksOptions } from "./view_hook";
|
|
5
|
+
/**
|
|
6
|
+
* Returns true if the given element was touched by a user.
|
|
7
|
+
* @param {HTMLElement} el - The element to check.
|
|
8
|
+
* @returns {boolean} True if the element was touched by a user, false otherwise.
|
|
9
|
+
*/
|
|
10
|
+
export declare const isUsedInput: (el: any) => any;
|
|
11
|
+
/**
|
|
12
|
+
* Options for configuring the LiveSocket instance.
|
|
13
|
+
*/
|
|
14
|
+
export interface LiveSocketOptions {
|
|
15
|
+
/**
|
|
16
|
+
* Defaults for phx-debounce and phx-throttle.
|
|
17
|
+
*/
|
|
18
|
+
defaults?: {
|
|
19
|
+
/** The millisecond phx-debounce time. Defaults to `300`. */
|
|
20
|
+
debounce?: number;
|
|
21
|
+
/** The millisecond phx-throttle time. Defaults to `300`. */
|
|
22
|
+
throttle?: number;
|
|
23
|
+
};
|
|
24
|
+
/**
|
|
25
|
+
* An object or function for passing connect params.
|
|
26
|
+
* The function receives the element associated with a given LiveView. For example:
|
|
27
|
+
*
|
|
28
|
+
* (el) => {view: el.getAttribute("data-my-view-name", token: window.myToken}
|
|
29
|
+
*
|
|
30
|
+
*/
|
|
31
|
+
params?: ((el: HTMLElement) => {
|
|
32
|
+
[key: string]: any;
|
|
33
|
+
}) | {
|
|
34
|
+
[key: string]: any;
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* The optional prefix to use for all phx DOM annotations.
|
|
38
|
+
*
|
|
39
|
+
* Defaults to `"phx-"`.
|
|
40
|
+
*/
|
|
41
|
+
bindingPrefix?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Callbacks for LiveView hooks.
|
|
44
|
+
*
|
|
45
|
+
* See [Client hooks via `phx-hook`](https://phoenix-live-view.hexdocs.pm/js-interop.html#client-hooks-via-phx-hook) for more information.
|
|
46
|
+
*/
|
|
47
|
+
hooks?: HooksOptions;
|
|
48
|
+
/** Callbacks for LiveView uploaders. */
|
|
49
|
+
uploaders?: {
|
|
50
|
+
[key: string]: any;
|
|
51
|
+
};
|
|
52
|
+
/** Delay in milliseconds before applying loading states. */
|
|
53
|
+
loaderTimeout?: number;
|
|
54
|
+
/** Delay in milliseconds before executing phx-disconnected commands. */
|
|
55
|
+
disconnectedTimeout?: number;
|
|
56
|
+
/** Maximum reloads before entering failsafe mode. */
|
|
57
|
+
maxReloads?: number;
|
|
58
|
+
/** Minimum time between normal reload attempts. */
|
|
59
|
+
reloadJitterMin?: number;
|
|
60
|
+
/** Maximum time between normal reload attempts. */
|
|
61
|
+
reloadJitterMax?: number;
|
|
62
|
+
/** Time between reload attempts in failsafe mode. */
|
|
63
|
+
failsafeJitter?: number;
|
|
64
|
+
/**
|
|
65
|
+
* Function to log debug information. For example:
|
|
66
|
+
*
|
|
67
|
+
* (view, kind, msg, obj) => console.log(`${view.id} ${kind}: ${msg} - `, obj)
|
|
68
|
+
*/
|
|
69
|
+
viewLogger?: (view: View, kind: string, msg: string, obj: any) => void;
|
|
70
|
+
/**
|
|
71
|
+
* Object mapping event names to functions for populating event metadata.
|
|
72
|
+
*
|
|
73
|
+
* metadata: {
|
|
74
|
+
* click: (e, el) => {
|
|
75
|
+
* return {
|
|
76
|
+
* ctrlKey: e.ctrlKey,
|
|
77
|
+
* metaKey: e.metaKey,
|
|
78
|
+
* detail: e.detail || 1,
|
|
79
|
+
* }
|
|
80
|
+
* },
|
|
81
|
+
* keydown: (e, el) => {
|
|
82
|
+
* return {
|
|
83
|
+
* key: e.key,
|
|
84
|
+
* ctrlKey: e.ctrlKey,
|
|
85
|
+
* metaKey: e.metaKey,
|
|
86
|
+
* shiftKey: e.shiftKey
|
|
87
|
+
* }
|
|
88
|
+
* }
|
|
89
|
+
* }
|
|
90
|
+
*
|
|
91
|
+
*/
|
|
92
|
+
metadata?: {
|
|
93
|
+
[K in keyof HTMLElementEventMap]?: (e: HTMLElementEventMap[K], el: HTMLElement) => object;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* An optional Storage-compatible object.
|
|
97
|
+
* Useful when LiveView won't have access to `sessionStorage`. For example, this could
|
|
98
|
+
* happen if a site loads a cross-domain LiveView in an iframe.
|
|
99
|
+
*
|
|
100
|
+
* Example usage:
|
|
101
|
+
*
|
|
102
|
+
* class InMemoryStorage {
|
|
103
|
+
* constructor() { this.storage = {} }
|
|
104
|
+
* getItem(keyName) { return this.storage[keyName] || null }
|
|
105
|
+
* removeItem(keyName) { delete this.storage[keyName] }
|
|
106
|
+
* setItem(keyName, keyValue) { this.storage[keyName] = keyValue }
|
|
107
|
+
* }
|
|
108
|
+
*/
|
|
109
|
+
sessionStorage?: Storage;
|
|
110
|
+
/**
|
|
111
|
+
* An optional Storage-compatible object.
|
|
112
|
+
* Useful when LiveView won't have access to `localStorage`.
|
|
113
|
+
*
|
|
114
|
+
* See {@link sessionStorage} for an example.
|
|
115
|
+
*/
|
|
116
|
+
localStorage?: Storage;
|
|
117
|
+
/**
|
|
118
|
+
* If set to `true`, `phx-change` events will be blocked (will not fire)
|
|
119
|
+
* while the user is composing input using an IME (Input Method Editor).
|
|
120
|
+
* This is determined by the `e.isComposing` property on keyboard events,
|
|
121
|
+
* which is `true` when the user is in the process of entering composed characters (for example,
|
|
122
|
+
* when typing Japanese or Chinese using romaji or pinyin input methods).
|
|
123
|
+
* By default, `phx-change` will not be blocked during a composition session,
|
|
124
|
+
* but note that there were issues reported in older versions of Safari,
|
|
125
|
+
* where a LiveView patch to the input caused unexpected behavior.
|
|
126
|
+
*
|
|
127
|
+
* For more information, see
|
|
128
|
+
* - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
|
|
129
|
+
* - https://github.com/phoenixframework/phoenix_live_view/issues/3322
|
|
130
|
+
*
|
|
131
|
+
* Defaults to `false`.
|
|
132
|
+
*/
|
|
133
|
+
blockPhxChangeWhileComposing?: boolean;
|
|
134
|
+
/** DOM callbacks. */
|
|
135
|
+
dom?: {
|
|
136
|
+
/**
|
|
137
|
+
* An optional function to modify the behavior of querying elements in JS commands.
|
|
138
|
+
* @param sourceEl - The source element, e.g. the button that was clicked.
|
|
139
|
+
* @param query - The query value.
|
|
140
|
+
* @param defaultQuery - A default query function that can be used if no custom query should be applied.
|
|
141
|
+
* @returns A list of DOM elements.
|
|
142
|
+
*/
|
|
143
|
+
jsQuerySelectorAll?: (sourceEl: HTMLElement, query: string, defaultQuery: () => Element[]) => Element[];
|
|
144
|
+
/**
|
|
145
|
+
* When defined, called with a start callback that needs to be called
|
|
146
|
+
* to perform the actual patch. Failing to call the start callback causes
|
|
147
|
+
* the page to become stuck.
|
|
148
|
+
*
|
|
149
|
+
* This can be used to delay patches in order to perform view transitions,
|
|
150
|
+
* for example:
|
|
151
|
+
*
|
|
152
|
+
* ```javascript
|
|
153
|
+
* let liveSocket = new LiveSocket("/live", Socket, {
|
|
154
|
+
* dom: {
|
|
155
|
+
* onDocumentPatch(start) {
|
|
156
|
+
* document.startViewTransition(start);
|
|
157
|
+
* }
|
|
158
|
+
* }
|
|
159
|
+
* })
|
|
160
|
+
* ```
|
|
161
|
+
*
|
|
162
|
+
* It is strongly advised to call start as quickly as possible.
|
|
163
|
+
*/
|
|
164
|
+
onDocumentPatch?: (start: () => void) => void;
|
|
165
|
+
/**
|
|
166
|
+
* Called immediately before a DOM patch is applied.
|
|
167
|
+
*/
|
|
168
|
+
onPatchStart?: (container: HTMLElement) => void;
|
|
169
|
+
/**
|
|
170
|
+
* Called immediately after a DOM patch is applied.
|
|
171
|
+
*/
|
|
172
|
+
onPatchEnd?: (container: HTMLElement) => void;
|
|
173
|
+
/**
|
|
174
|
+
* Called when a new DOM node is added.
|
|
175
|
+
*/
|
|
176
|
+
onNodeAdded?: (node: Node) => void;
|
|
177
|
+
/**
|
|
178
|
+
* Called before an element is updated.
|
|
179
|
+
*/
|
|
180
|
+
onBeforeElUpdated?: (fromEl: Element, toEl: Element) => void;
|
|
181
|
+
};
|
|
182
|
+
/** Allow passthrough of other options to the Phoenix Socket constructor. */
|
|
183
|
+
[key: string]: any;
|
|
184
|
+
}
|
|
185
|
+
export default class LiveSocket {
|
|
186
|
+
socket: Socket;
|
|
187
|
+
private bindingPrefix;
|
|
188
|
+
private viewLogger;
|
|
189
|
+
private metadataCallbacks;
|
|
190
|
+
private defaults;
|
|
191
|
+
private prevActive;
|
|
192
|
+
private silenced;
|
|
193
|
+
private outgoingMainEl;
|
|
194
|
+
private clickStartedAtTarget;
|
|
195
|
+
private linkRef;
|
|
196
|
+
private roots;
|
|
197
|
+
private href;
|
|
198
|
+
private pendingLink;
|
|
199
|
+
private currentLocation;
|
|
200
|
+
private hooks;
|
|
201
|
+
private reloadWithJitterTimer;
|
|
202
|
+
private maxReloads;
|
|
203
|
+
private reloadJitterMin;
|
|
204
|
+
private reloadJitterMax;
|
|
205
|
+
private failsafeJitter;
|
|
206
|
+
private sessionStorage;
|
|
207
|
+
private boundTopLevelEvents;
|
|
208
|
+
private boundEventNames;
|
|
209
|
+
private blockPhxChangeWhileComposing;
|
|
210
|
+
private serverCloseRef;
|
|
211
|
+
private transitions;
|
|
212
|
+
/**
|
|
213
|
+
* Creates a new LiveSocket instance.
|
|
214
|
+
*/
|
|
215
|
+
constructor(
|
|
216
|
+
/**
|
|
217
|
+
* The WebSocket endpoint URL, e.g., `"wss://example.com/live"`, or `"/live"` to inherit the host and protocol.
|
|
218
|
+
*/
|
|
219
|
+
url: string,
|
|
220
|
+
/**
|
|
221
|
+
* The required Phoenix Socket class imported from "phoenix". For example:
|
|
222
|
+
*
|
|
223
|
+
* ```javascript
|
|
224
|
+
* import {Socket} from "phoenix"
|
|
225
|
+
* import {LiveSocket} from "phoenix_live_view"
|
|
226
|
+
* let liveSocket = new LiveSocket("/live", Socket, {...})
|
|
227
|
+
* ```
|
|
228
|
+
*/
|
|
229
|
+
phxSocket: typeof Socket,
|
|
230
|
+
/**
|
|
231
|
+
* Optional configuration.
|
|
232
|
+
*/
|
|
233
|
+
opts?: Partial<LiveSocketOptions>);
|
|
234
|
+
/**
|
|
235
|
+
* Returns the version of the LiveView client.
|
|
236
|
+
*/
|
|
237
|
+
version(): string;
|
|
238
|
+
/**
|
|
239
|
+
* Returns true if profiling is enabled. See {@link enableProfiling} and {@link disableProfiling}.
|
|
240
|
+
*/
|
|
241
|
+
isProfileEnabled(): boolean;
|
|
242
|
+
/**
|
|
243
|
+
* Returns true if debugging is enabled. See {@link enableDebug} and {@link disableDebug}.
|
|
244
|
+
*/
|
|
245
|
+
isDebugEnabled(): boolean;
|
|
246
|
+
/**
|
|
247
|
+
* Returns true if debugging is disabled. See {@link enableDebug} and {@link disableDebug}.
|
|
248
|
+
*/
|
|
249
|
+
isDebugDisabled(): boolean;
|
|
250
|
+
/**
|
|
251
|
+
* Enables debugging.
|
|
252
|
+
*
|
|
253
|
+
* When debugging is enabled, the LiveView client will log debug information to the console.
|
|
254
|
+
* See [Debugging client events](https://phoenix-live-view.hexdocs.pm/js-interop.html#debugging-client-events) for more information.
|
|
255
|
+
*/
|
|
256
|
+
enableDebug(): void;
|
|
257
|
+
/**
|
|
258
|
+
* Enables profiling.
|
|
259
|
+
*
|
|
260
|
+
* When profiling is enabled, the LiveView client will log profiling information to the console.
|
|
261
|
+
*/
|
|
262
|
+
enableProfiling(): void;
|
|
263
|
+
/**
|
|
264
|
+
* Disables debugging.
|
|
265
|
+
*/
|
|
266
|
+
disableDebug(): void;
|
|
267
|
+
/**
|
|
268
|
+
* Disables profiling.
|
|
269
|
+
*/
|
|
270
|
+
disableProfiling(): void;
|
|
271
|
+
/**
|
|
272
|
+
* Enables latency simulation.
|
|
273
|
+
*
|
|
274
|
+
* When latency simulation is enabled, the LiveView client will add a delay to requests and responses from the server.
|
|
275
|
+
* See [Simulating Latency](https://phoenix-live-view.hexdocs.pm/js-interop.html#simulating-latency) for more information.
|
|
276
|
+
*/
|
|
277
|
+
enableLatencySim(upperBoundMs: number): void;
|
|
278
|
+
/**
|
|
279
|
+
* Disables latency simulation.
|
|
280
|
+
*/
|
|
281
|
+
disableLatencySim(): void;
|
|
282
|
+
/**
|
|
283
|
+
* Returns the current latency simulation upper bound.
|
|
284
|
+
*/
|
|
285
|
+
getLatencySim(): number | null;
|
|
286
|
+
/**
|
|
287
|
+
* Returns the Phoenix Socket instance.
|
|
288
|
+
*/
|
|
289
|
+
getSocket(): Socket;
|
|
290
|
+
/**
|
|
291
|
+
* Connects to the LiveView server.
|
|
292
|
+
*/
|
|
293
|
+
connect(): void;
|
|
294
|
+
/**
|
|
295
|
+
* Disconnects from the LiveView server.
|
|
296
|
+
*/
|
|
297
|
+
disconnect(callback?: () => void): void;
|
|
298
|
+
/**
|
|
299
|
+
* Can be used to replace the transport used by the underlying Phoenix Socket.
|
|
300
|
+
*/
|
|
301
|
+
replaceTransport(transport: any): void;
|
|
302
|
+
/**
|
|
303
|
+
* Executes an encoded JS command, targeting the given element.
|
|
304
|
+
*
|
|
305
|
+
* See [`Phoenix.LiveView.JS`](https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.JS.html) for more information.
|
|
306
|
+
*/
|
|
307
|
+
execJS(el: Element, encodedJS: EncodedJS, eventType?: string | null): void;
|
|
308
|
+
/**
|
|
309
|
+
* Returns an object with methods to manipulate the DOM and execute JavaScript.
|
|
310
|
+
* The applied changes integrate with server DOM patching.
|
|
311
|
+
*
|
|
312
|
+
* See [JavaScript interoperability](https://phoenix-live-view.hexdocs.pm/js-interop.html) for more information.
|
|
313
|
+
*/
|
|
314
|
+
js(): LiveSocketJSCommands;
|
|
315
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export default class LiveUploader {
|
|
2
|
+
static genFileRef(file: any): any;
|
|
3
|
+
static getEntryDataURL(inputEl: any, ref: any): string;
|
|
4
|
+
static hasUploadsInProgress(formEl: any): boolean;
|
|
5
|
+
static serializeUploads(inputEl: any): {};
|
|
6
|
+
static clearFiles(inputEl: any): void;
|
|
7
|
+
static untrackFile(inputEl: any, file: any): void;
|
|
8
|
+
/**
|
|
9
|
+
* @param {HTMLInputElement} inputEl
|
|
10
|
+
* @param {Array<File|Blob>} files
|
|
11
|
+
* @param {DataTransfer} [dataTransfer]
|
|
12
|
+
*/
|
|
13
|
+
static trackFiles(inputEl: HTMLInputElement, files: Array<File | Blob>, dataTransfer?: DataTransfer): void;
|
|
14
|
+
static activeFileInputs(formEl: any): HTMLInputElement[];
|
|
15
|
+
static activeFiles(input: any): any;
|
|
16
|
+
static inputsAwaitingPreflight(formEl: any): HTMLInputElement[];
|
|
17
|
+
static filesAwaitingPreflight(input: any): any;
|
|
18
|
+
static markPreflightInProgress(entries: any): void;
|
|
19
|
+
constructor(inputEl: any, view: any, onComplete: any);
|
|
20
|
+
autoUpload: any;
|
|
21
|
+
view: any;
|
|
22
|
+
onComplete: any;
|
|
23
|
+
_entries: UploadEntry[];
|
|
24
|
+
numEntriesInProgress: number;
|
|
25
|
+
isAutoUpload(): any;
|
|
26
|
+
entries(): UploadEntry[];
|
|
27
|
+
initAdapterUpload(resp: any, onError: any, liveSocket: any): void;
|
|
28
|
+
}
|
|
29
|
+
import UploadEntry from "./upload_entry";
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
export function modifyRoot(html: any, attrs: any, clearInnerHTML: any): any[];
|
|
2
|
+
/** @internal */
|
|
3
|
+
export default class Rendered {
|
|
4
|
+
static extract(diff: any): {
|
|
5
|
+
diff: any;
|
|
6
|
+
title: any;
|
|
7
|
+
reply: any;
|
|
8
|
+
events: any;
|
|
9
|
+
};
|
|
10
|
+
constructor(viewId: any, rendered: any);
|
|
11
|
+
viewId: any;
|
|
12
|
+
rendered: {};
|
|
13
|
+
magicId: number;
|
|
14
|
+
parentViewId(): any;
|
|
15
|
+
toString(onlyCids: any): {
|
|
16
|
+
buffer: string;
|
|
17
|
+
streams: Set<any>;
|
|
18
|
+
};
|
|
19
|
+
recursiveToString(rendered: any, components: any, onlyCids: any, changeTracking: any, rootAttrs: any): {
|
|
20
|
+
buffer: string;
|
|
21
|
+
streams: Set<any>;
|
|
22
|
+
};
|
|
23
|
+
componentCIDs(diff: any): number[];
|
|
24
|
+
isComponentOnlyDiff(diff: any): boolean;
|
|
25
|
+
getComponent(diff: any, cid: any): any;
|
|
26
|
+
resetRender(cid: any): void;
|
|
27
|
+
mergeDiff(diff: any): void;
|
|
28
|
+
cachedFindComponent(cid: any, cdiff: any, oldc: any, newc: any, cache: any): any;
|
|
29
|
+
mutableMerge(target: any, source: any): any;
|
|
30
|
+
doMutableMerge(target: any, source: any): void;
|
|
31
|
+
clone(diff: any): any;
|
|
32
|
+
mergeKeyed(target: any, source: any): void;
|
|
33
|
+
cloneMerge(target: any, source: any, pruneMagicId: any): any;
|
|
34
|
+
componentToString(cid: any): {
|
|
35
|
+
buffer: any;
|
|
36
|
+
streams: Set<any>;
|
|
37
|
+
};
|
|
38
|
+
pruneCIDs(cids: any): void;
|
|
39
|
+
get(): {};
|
|
40
|
+
isNewFingerprint(diff?: {}): boolean;
|
|
41
|
+
templateStatic(part: any, templates: any): any;
|
|
42
|
+
nextMagicID(): string;
|
|
43
|
+
toOutputBuffer(rendered: any, templates: any, output: any, changeTracking: any, rootAttrs?: {}): void;
|
|
44
|
+
comprehensionToBuffer(rendered: any, templates: any, output: any, changeTracking: any): void;
|
|
45
|
+
dynamicToBuffer(rendered: any, templates: any, output: any, changeTracking: any): void;
|
|
46
|
+
recursiveCIDToString(components: any, cid: any, onlyCids: any): {
|
|
47
|
+
buffer: string;
|
|
48
|
+
streams: Set<any>;
|
|
49
|
+
};
|
|
50
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
export default class UploadEntry {
|
|
2
|
+
static isActive(fileEl: any, file: any): boolean;
|
|
3
|
+
static isPreflighted(fileEl: any, file: any): boolean;
|
|
4
|
+
static isPreflightInProgress(file: any): boolean;
|
|
5
|
+
static markPreflightInProgress(file: any): void;
|
|
6
|
+
constructor(fileEl: any, file: any, view: any, autoUpload: any);
|
|
7
|
+
ref: any;
|
|
8
|
+
fileEl: any;
|
|
9
|
+
file: any;
|
|
10
|
+
view: any;
|
|
11
|
+
meta: any;
|
|
12
|
+
_isCancelled: boolean;
|
|
13
|
+
_isDone: boolean;
|
|
14
|
+
_progress: number;
|
|
15
|
+
_lastProgressSent: number;
|
|
16
|
+
_onDone: () => void;
|
|
17
|
+
_onElUpdated: any;
|
|
18
|
+
autoUpload: any;
|
|
19
|
+
metadata(): any;
|
|
20
|
+
progress(progress: any): void;
|
|
21
|
+
isCancelled(): boolean;
|
|
22
|
+
cancel(): void;
|
|
23
|
+
isDone(): boolean;
|
|
24
|
+
error(reason?: string): void;
|
|
25
|
+
isAutoUpload(): any;
|
|
26
|
+
onDone(callback: any): void;
|
|
27
|
+
onElUpdated(): void;
|
|
28
|
+
toPreflightPayload(): {
|
|
29
|
+
last_modified: any;
|
|
30
|
+
name: any;
|
|
31
|
+
relative_path: any;
|
|
32
|
+
size: any;
|
|
33
|
+
type: any;
|
|
34
|
+
ref: any;
|
|
35
|
+
meta: any;
|
|
36
|
+
};
|
|
37
|
+
uploader(uploaders: any): {
|
|
38
|
+
name: any;
|
|
39
|
+
callback: any;
|
|
40
|
+
};
|
|
41
|
+
zipPostFlight(resp: any): void;
|
|
42
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export declare const logError: (msg: any, obj?: any) => void;
|
|
2
|
+
export declare const ensureSameOrigin: (href: string, kind: "patch" | "navigate") => void;
|
|
3
|
+
export declare const isCid: (cid: any) => cid is number | string;
|
|
4
|
+
export declare function detectDuplicateIds(): void;
|
|
5
|
+
export declare function detectInvalidStreamInserts(inserts: any): void;
|
|
6
|
+
export declare const debug: (view: any, kind: any, msg: any, obj: any) => void;
|
|
7
|
+
export declare const closure: (val?: any) => any;
|
|
8
|
+
export declare const clone: (obj: any) => any;
|
|
9
|
+
export declare const closestPhxBinding: (startEl: Element, binding: string, borderEl?: Element) => Element;
|
|
10
|
+
export declare const isObject: (obj: any) => boolean;
|
|
11
|
+
export declare const isEqualObj: (obj1: any, obj2: any) => boolean;
|
|
12
|
+
export declare const isEmpty: (obj: any) => boolean;
|
|
13
|
+
export declare const maybe: (el: any, callback: any) => any;
|
|
14
|
+
export declare const channelUploader: (entries: any, onError: any, resp: any, liveSocket: any) => void;
|
|
15
|
+
export declare const eventContainsFiles: (e: any) => boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const prependFormDataKey: (key: any, prefix: any) => any;
|