shared.js — svelte Source File

Architecture documentation for shared.js, a javascript file in the svelte codebase. 7 imports, 11 dependents.

File javascript ClientRuntime Hydration 7 imports 11 dependents 3 functions

Entity Profile

ClientRuntime→ Hydration→ shared.js — svelte Source File

Dependency Diagram

graph LR
  af7441d2_339a_2db1_88df_90dba2875c10["shared.js"]
  1ae6fa4e_16ee_acdf_5e28_17eb0819fddb["effects.js"]
  af7441d2_339a_2db1_88df_90dba2875c10 --> 1ae6fa4e_16ee_acdf_5e28_17eb0819fddb
  20340432_01a2_6741_abf4_60ccab51cdb3["teardown"]
  af7441d2_339a_2db1_88df_90dba2875c10 --> 20340432_01a2_6741_abf4_60ccab51cdb3
  bde4209f_8ffc_1594_4024_b1835a44bcf6["runtime.js"]
  af7441d2_339a_2db1_88df_90dba2875c10 --> bde4209f_8ffc_1594_4024_b1835a44bcf6
  55623862_10b7_5361_e30b_34ec6941f1a7["set_active_effect"]
  af7441d2_339a_2db1_88df_90dba2875c10 --> 55623862_10b7_5361_e30b_34ec6941f1a7
  311ef9f4_9b68_c178_c1db_3b8696f7d964["set_active_reaction"]
  af7441d2_339a_2db1_88df_90dba2875c10 --> 311ef9f4_9b68_c178_c1db_3b8696f7d964
  56e684d7_8156_2bdf_6537_717e59d1e537["misc.js"]
  af7441d2_339a_2db1_88df_90dba2875c10 --> 56e684d7_8156_2bdf_6537_717e59d1e537
  f331da79_3d16_9f30_3a8b_0b6cd7a6de51["add_form_reset_listener"]
  af7441d2_339a_2db1_88df_90dba2875c10 --> f331da79_3d16_9f30_3a8b_0b6cd7a6de51
  bb75dac7_8bcf_2d4b_80fd_684f4431a04c["document.js"]
  bb75dac7_8bcf_2d4b_80fd_684f4431a04c --> af7441d2_339a_2db1_88df_90dba2875c10
  2254d980_5794_d0a4_3609_60f21d662ff4["input.js"]
  2254d980_5794_d0a4_3609_60f21d662ff4 --> af7441d2_339a_2db1_88df_90dba2875c10
  1fdae683_fcfe_7f32_daab_6a4edc3c6b85["media.js"]
  1fdae683_fcfe_7f32_daab_6a4edc3c6b85 --> af7441d2_339a_2db1_88df_90dba2875c10
  564fa7bd_a88b_4eb4_fdda_122f3360ee09["navigator.js"]
  564fa7bd_a88b_4eb4_fdda_122f3360ee09 --> af7441d2_339a_2db1_88df_90dba2875c10
  dbe1ea86_6e94_eeeb_a2d1_1db78ca967bc["select.js"]
  dbe1ea86_6e94_eeeb_a2d1_1db78ca967bc --> af7441d2_339a_2db1_88df_90dba2875c10
  c3b70c5c_4392_04e8_77c1_3cef97110727["universal.js"]
  c3b70c5c_4392_04e8_77c1_3cef97110727 --> af7441d2_339a_2db1_88df_90dba2875c10
  8246ee55_416b_58b3_f7ac_d471f90be1e9["window.js"]
  8246ee55_416b_58b3_f7ac_d471f90be1e9 --> af7441d2_339a_2db1_88df_90dba2875c10
  style af7441d2_339a_2db1_88df_90dba2875c10 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { teardown } from '../../../reactivity/effects.js';
import {
	active_effect,
	active_reaction,
	set_active_effect,
	set_active_reaction
} from '../../../runtime.js';
import { add_form_reset_listener } from '../misc.js';

/**
 * Fires the handler once immediately (unless corresponding arg is set to `false`),
 * then listens to the given events until the render effect context is destroyed
 * @param {EventTarget} target
 * @param {Array<string>} events
 * @param {(event?: Event) => void} handler
 * @param {any} call_handler_immediately
 */
export function listen(target, events, handler, call_handler_immediately = true) {
	if (call_handler_immediately) {
		handler();
	}

	for (var name of events) {
		target.addEventListener(name, handler);
	}

	teardown(() => {
		for (var name of events) {
			target.removeEventListener(name, handler);
		}
	});
}

/**
 * @template T
 * @param {() => T} fn
 */
export function without_reactive_context(fn) {
	var previous_reaction = active_reaction;
	var previous_effect = active_effect;
	set_active_reaction(null);
	set_active_effect(null);
	try {
		return fn();
	} finally {
		set_active_reaction(previous_reaction);
		set_active_effect(previous_effect);
	}
}

/**
 * Listen to the given event, and then instantiate a global form reset listener if not already done,
 * to notify all bindings when the form is reset
 * @param {HTMLElement} element
 * @param {string} event
 * @param {(is_reset?: true) => void} handler
 * @param {(is_reset?: true) => void} [on_reset]
 */
export function listen_to_event_and_reset_event(element, event, handler, on_reset = handler) {
	element.addEventListener(event, () => without_reactive_context(handler));
	// @ts-expect-error
	const prev = element.__on_r;
	if (prev) {
		// special case for checkbox that can have multiple binds (group & checked)
		// @ts-expect-error
		element.__on_r = () => {
			prev();
			on_reset(true);
		};
	} else {
		// @ts-expect-error
		element.__on_r = () => on_reset(true);
	}

	add_form_reset_listener();
}

Domain

ClientRuntime

Subdomains

Hydration

Functions

Dependencies

Imported By

Source

View on GitHub

Frequently Asked Questions

What does shared.js do?

shared.js is a source file in the svelte codebase, written in javascript. It belongs to the ClientRuntime domain, Hydration subdomain.

What functions are defined in shared.js?

shared.js defines 3 function(s): listen, listen_to_event_and_reset_event, without_reactive_context.

What does shared.js depend on?

shared.js imports 7 module(s): add_form_reset_listener, effects.js, misc.js, runtime.js, set_active_effect, set_active_reaction, teardown.

What files import shared.js?

shared.js is imported by 11 file(s): document.js, effects.js, events.js, input.js, media.js, navigator.js, runtime.js, select.js, and 3 more.

Where is shared.js in the architecture?

shared.js is located at packages/svelte/src/internal/client/dom/elements/bindings/shared.js (domain: ClientRuntime, subdomain: Hydration, directory: packages/svelte/src/internal/client/dom/elements/bindings).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free