פויל לאָודינג מאַדזשולז אין סוועלטע

דינאַמיש אַרייַנפיר אין סוועלטע

ווען קאָדירונג אין Svelte, איר קען האָבן די פאָדערונג צו לאָדן קאַמפּאָונאַנץ בלויז אויף פאָדערונג, ווען זיי זענען אַקשלי דארף. רעאַקט האט סאַלווד דעם פּראָבלעם גאַנץ מאַסטערפאַלי מיט זיין "שפּאַנונג"-קאָמפּאָנענט. אויב איר ווילן צו דערגרייכן עפּעס ענלעך אין סוועלטע, איך האָבן גוט נייַעס פֿאַר איר.

סוועלטע "שפּאַנונג" אָן שפּאַנונג

בייסיקלי וואָס איז פארלאנגט איז צו נוצן די געבויט-אין מעקאַניזאַם פון Svelte צו דערוואַרטן אַסינק פונקציע רופט אין די קאָמפּאָנענט זיך. די פאלגענדע פּשוט בייַשפּיל ווייזט וואָס איך מיינען מיט דעם.

<script>
  // Dummy function, just so that we
  // have some async stuff.
	async function getData() {
		await new Promise(res => setTimeout(res, 1000));
		return { key: "value" };
	}
</script>

{#await getData()}
	<p>Fetching data...</p>
{:then res}
	<p>Accessing data: "key": "{res.key}"</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

ווי איר קענען זען, מיר נאָר דערוואַרטן די צוריקקומען ווערט פון די פֿונקציע און דערנאָך נוצן עס אין אונדזער וי. דער זעלביקער טעכניק קענען זיין געניצט פֿאַר ימפּאָרטינג גאַנץ מאַדזשולז.

דינאַמיש אַרייַנפיר מיט סוועלטע

ניצן די דינאַמיש "אַרייַנפיר", בנימצא אין ES6, מיר קענען שרייַבן אַ פּשוט פויל קאָמפּאָנענט אַרייַנפיר.

//
// Live demo:
// https://svelte.dev/repl/b7551180977d4e738b07d428f3172d5e?version=3.46.4
//

//
// App.svelte
// 

<h1>App title</h1>

{#await import("./Content.svelte") then Module}
	<Module.default subtitle="Subtilte as prop" />
{/await}

//
// Content.svelte
//

<script>
	export let subtitle;
</script>

<article>
  <h2>
		Content title
	</h2>
	<h3>
		{subtitle}
	</h3>
	<p>
		Content body.
	</p>
</article>

מיט דעם וויסן, מיר זענען איצט ביכולת צו פויל מאַסע קיין קאָמפּאָנענט. א פּראַקטיש בייַשפּיל איך בין אַקשלי ניצן פֿאַר spikze.club איז ימפּלאַמענטיישאַן פון אַ איין "יקאָן" קאָמפּאָנענט וואָס לאָודז די ספּעציפיש בילדל אויף מאָנען.

<!--
  Source: https://carbon-icons-svelte.onrender.com/
-->
<script lang="ts">
  // Using a link so that 'clsx' can eliminate
  // all other variant compared to an enum, which
  // should lead to a smaller size at runtime.
  export let variant: "internal-link" | "external-link" | "section-link" | "close" | "add-circle";
  let cn: string = undefined;
  export { cn as class };
</script>

{#if variant === "external-link"}
  {#await import("carbon-icons-svelte/lib/ArrowUpRight20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

{#if variant === "internal-link"}
  {#await import("carbon-icons-svelte/lib/ArrowRight20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

{#if variant === "section-link"}
  {#await import("carbon-icons-svelte/lib/ArrowDown20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

{#if variant === "close"}
  {#await import("carbon-icons-svelte/lib/Close20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

{#if variant === "add-circle"}
  {#await import("carbon-icons-svelte/lib/AddAlt20") then Icon}
    <Icon.default class={cn} />
  {/await}
{/if}

נעם צוזאם

איר האָט געזען ווי צו נוצן די דינאַמיש אַרייַנפיר פון ES6 צו פשוט אַרייַנפיר קיין דאַטן אויף פאָדערונג. ווי דאָס אַפּלייז צו ביידע דיין קאַמפּאָונאַנץ און דריט טיילווייַז לייברעריז, עס איז גאָרנישט צו האַלטן איר פון סקיילינג דיין ווייַטער סוועלטע אַפּ.