option() — svelte Function Reference

Architecture documentation for the option() function in renderer.js from the svelte codebase.

Function javascript ServerRuntime Renderer calls 4

Entity Profile

ServerRuntime→ Renderer→ option() — svelte Function Reference

Dependency Diagram

graph TD
  1a677ead_a9d4_0a77_cc80_ba51cda0e64d["option()"]
  ce85d155_9f13_f67c_9824_407161a6c2c7["Renderer"]
  1a677ead_a9d4_0a77_cc80_ba51cda0e64d -->|defined in| ce85d155_9f13_f67c_9824_407161a6c2c7
  6f1eae94_35bd_e5bc_d962_31f3ce608951["push()"]
  1a677ead_a9d4_0a77_cc80_ba51cda0e64d -->|calls| 6f1eae94_35bd_e5bc_d962_31f3ce608951
  30cd611d_dc10_8cb7_0b6a_cde40be8727a["attributes()"]
  1a677ead_a9d4_0a77_cc80_ba51cda0e64d -->|calls| 30cd611d_dc10_8cb7_0b6a_cde40be8727a
  040542fe_bbb9_45cf_f9c5_44e9f53ccbd4["head()"]
  1a677ead_a9d4_0a77_cc80_ba51cda0e64d -->|calls| 040542fe_bbb9_45cf_f9c5_44e9f53ccbd4
  c5be8ca5_baec_c99c_4e0b_ffd4fd83f2a8["child()"]
  1a677ead_a9d4_0a77_cc80_ba51cda0e64d -->|calls| c5be8ca5_baec_c99c_4e0b_ffd4fd83f2a8
  style 1a677ead_a9d4_0a77_cc80_ba51cda0e64d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/server/renderer.js lines 261–303

	option(attrs, body, css_hash, classes, styles, flags, is_rich) {
		this.#out.push(`<option${attributes(attrs, css_hash, classes, styles, flags)}`);

		/**
		 * @param {Renderer} renderer
		 * @param {any} value
		 * @param {{ head?: string, body: any }} content
		 */
		const close = (renderer, value, { head, body }) => {
			if ('value' in attrs) {
				value = attrs.value;
			}

			if (value === this.local.select_value) {
				renderer.#out.push(' selected');
			}

			renderer.#out.push(`>${body}${is_rich ? '<!>' : ''}</option>`);

			// super edge case, but may as well handle it
			if (head) {
				renderer.head((child) => child.push(head));
			}
		};

		if (typeof body === 'function') {
			this.child((renderer) => {
				const r = new Renderer(this.global, this);
				body(r);

				if (this.global.mode === 'async') {
					return r.#collect_content_async().then((content) => {
						close(renderer, content.body.replaceAll('<!---->', ''), content);
					});
				} else {
					const content = r.#collect_content();
					close(renderer, content.body.replaceAll('<!---->', ''), content);
				}
			});
		} else {
			close(this, body, { body });
		}
	}