svelte Architecture Docs
Home / File/ _config.js — svelte Source File

_config.js — svelte Source File

Architecture documentation for _config.js, a javascript file in the svelte codebase. 2 imports, 0 dependents.

File javascript BuildSystem QualityControl 2 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  449bd941_9b6e_fd41_f297_0284984ea5e9["_config.js"]
  d952c6b0_fdc4_6752_d5aa_0b4adfa256ee["test.ts"]
  449bd941_9b6e_fd41_f297_0284984ea5e9 --> d952c6b0_fdc4_6752_d5aa_0b4adfa256ee
  4ead6623_c53e_ab40_5690_64903d5addf1["svelte"]
  449bd941_9b6e_fd41_f297_0284984ea5e9 --> 4ead6623_c53e_ab40_5690_64903d5addf1
  style 449bd941_9b6e_fd41_f297_0284984ea5e9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { flushSync, tick } from 'svelte';
import { test } from '../../test';

// This test counts mutations on hydration
// set_style() should not mutate style on hydration, except if mismatch
export default test({
	mode: ['server', 'hydrate'],

	server_props: {
		browser: false
	},

	props: {
		browser: true
	},

	ssrHtml: `
		<main id="main" style="color: black;">
			<div style="color: red; font-size: 18px !important;"></div>
			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
			<div style="background:blue; background: linear-gradient(0, white 0%, red 100%); color: red; font-size: 18px !important;"></div>
			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
			<div style="background: url(https://placehold.co/100x100?text=;&font=roboto); color: red; font-size: 18px !important;"></div>
			<div style="background: url(&quot;https://placehold.co/100x100?text=;&font=roboto&quot;); color: red; font-size: 18px !important;"></div>
			<div style="background: url('https://placehold.co/100x100?text=;&font=roboto'); color: red; font-size: 18px !important;"></div>
		</main>
	`,

	html: `
		<main id="main" style="color: white;">
			<div style="color: red; font-size: 18px !important;"></div>
			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
			<div style="background:blue; background: linear-gradient(0, white 0%, red 100%); color: red; font-size: 18px !important;"></div>
			<div style="border: 1px solid; color: red; font-size: 18px !important;"></div>
			<div style="background: url(https://placehold.co/100x100?text=;&font=roboto); color: red; font-size: 18px !important;"></div>
			<div style="background: url(&quot;https://placehold.co/100x100?text=;&font=roboto&quot;); color: red; font-size: 18px !important;"></div>
			<div style="background: url('https://placehold.co/100x100?text=;&font=roboto'); color: red; font-size: 18px !important;"></div>
		</main>
	`,

	async test({ target, assert, component, instance }) {
		flushSync();
		tick();
		assert.deepEqual(instance.get_and_clear_mutations(), ['MAIN']);

		let divs = target.querySelectorAll('div');

		// Note : we cannot compare HTML because set_style() use dom.style.cssText
		// which can alter the format of the attribute...

		divs.forEach((d) => assert.equal(d.style.margin, ''));
		divs.forEach((d) => assert.equal(d.style.color, 'red'));
		divs.forEach((d) => assert.equal(d.style.fontSize, '18px'));

		component.margin = '1px';
		flushSync();
		assert.deepEqual(
			instance.get_and_clear_mutations(),
			['DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV'],
			'margin'
		);
		divs.forEach((d) => assert.equal(d.style.margin, '1px'));

		component.color = 'yellow';
		flushSync();
		assert.deepEqual(
			instance.get_and_clear_mutations(),
			['DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV'],
			'color'
		);
		divs.forEach((d) => assert.equal(d.style.color, 'yellow'));

		component.fontSize = '10px';
		flushSync();
		assert.deepEqual(
			instance.get_and_clear_mutations(),
			['DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV'],
			'fontSize'
		);
		divs.forEach((d) => assert.equal(d.style.fontSize, '10px'));

		component.fontSize = null;
		flushSync();
		assert.deepEqual(
			instance.get_and_clear_mutations(),
			['DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV', 'DIV'],
			'fontSize'
		);
		divs.forEach((d) => assert.equal(d.style.fontSize, ''));
	}
});

Domain

Subdomains

Functions

Dependencies

Source

Frequently Asked Questions

What does _config.js do?
_config.js is a source file in the svelte codebase, written in javascript. It belongs to the BuildSystem domain, QualityControl subdomain.
What functions are defined in _config.js?
_config.js defines 1 function(s): default.test.
What does _config.js depend on?
_config.js imports 2 module(s): svelte, test.ts.
Where is _config.js in the architecture?
_config.js is located at packages/svelte/tests/runtime-runes/samples/style-directive-mutations/_config.js (domain: BuildSystem, subdomain: QualityControl, directory: packages/svelte/tests/runtime-runes/samples/style-directive-mutations).

Analyze Your Own Codebase

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

Try Supermodel Free