From ced9a261ba533ba2078921a829562eccbbf49c3e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 19 Oct 2024 10:26:06 -0400
Subject: [PATCH] more

---
 documentation/docs/02-runes/05-$props.md      |   2 +-
 documentation/docs/02-runes/06-$bindable.md   |   2 +-
 documentation/docs/02-runes/07-$inspect.md    |   2 +-
 documentation/docs/02-runes/08-$host.md       |   2 +-
 .../01-component-fundamentals.md              | 202 ------------------
 5 files changed, 4 insertions(+), 206 deletions(-)
 delete mode 100644 documentation/docs/03-template-syntax/01-component-fundamentals.md

diff --git a/documentation/docs/02-runes/05-$props.md b/documentation/docs/02-runes/05-$props.md
index 3041884254..1ac90662c7 100644
--- a/documentation/docs/02-runes/05-$props.md
+++ b/documentation/docs/02-runes/05-$props.md
@@ -2,4 +2,4 @@
 title: $props
 ---
 
-TODO
+Coming soon!
diff --git a/documentation/docs/02-runes/06-$bindable.md b/documentation/docs/02-runes/06-$bindable.md
index 35d0d9143d..b2b5661eb4 100644
--- a/documentation/docs/02-runes/06-$bindable.md
+++ b/documentation/docs/02-runes/06-$bindable.md
@@ -2,4 +2,4 @@
 title: $bindable
 ---
 
-TODO
+Coming soon!
diff --git a/documentation/docs/02-runes/07-$inspect.md b/documentation/docs/02-runes/07-$inspect.md
index ad256ede14..8bfb708bce 100644
--- a/documentation/docs/02-runes/07-$inspect.md
+++ b/documentation/docs/02-runes/07-$inspect.md
@@ -2,4 +2,4 @@
 title: $inspect
 ---
 
-TODO
+Coming soon!
diff --git a/documentation/docs/02-runes/08-$host.md b/documentation/docs/02-runes/08-$host.md
index c8cd21c58b..dee06943b5 100644
--- a/documentation/docs/02-runes/08-$host.md
+++ b/documentation/docs/02-runes/08-$host.md
@@ -2,4 +2,4 @@
 title: $host
 ---
 
-TODO
+Coming soon!
diff --git a/documentation/docs/03-template-syntax/01-component-fundamentals.md b/documentation/docs/03-template-syntax/01-component-fundamentals.md
deleted file mode 100644
index 0e5597c020..0000000000
--- a/documentation/docs/03-template-syntax/01-component-fundamentals.md
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: Component fundamentals
----
-
-- script (module) / template / style (rough overview)
-- `$props` / `$state` (in the context of components)
-
-Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
-
-All three sections — script, styles and markup — are optional.
-
-```svelte
-<script>
-	// logic goes here
-</script>
-
-<!-- markup (zero or more items) goes here -->
-
-<style>
-	/* styles go here */
-</style>
-```
-
-## `<script>`
-
-A `<script>` block contains JavaScript (or TypeScript, when adding the `lang="ts"` attribute) that runs when a component instance is created. Variables declared (or imported) at the top level are 'visible' from the component's markup.
-
-### Public API of a component
-
-Svelte uses the `$props` rune to declare _properties_ or _props_, which means describing the public interface of the component which becomes accessible to consumers of the component.
-
-> [!NOTE] `$props` is one of several runes, which are special hints for Svelte's compiler to make things reactive.
-
-```svelte
-<script>
-	let { foo, bar, baz } = $props();
-
-	// Values that are passed in as props
-	// are immediately available
-	console.log({ foo, bar, baz });
-</script>
-```
-
-You can specify a fallback value for a prop. It will be used if the component's consumer doesn't specify the prop on the component when instantiating the component, or if the passed value is `undefined` at some point.
-
-```svelte
-<script>
-	let { foo = 'optional default initial value' } = $props();
-</script>
-```
-
-To get all properties, use rest syntax:
-
-```svelte
-<script>
-	let { a, b, c, ...everythingElse } = $props();
-</script>
-```
-
-You can use reserved words as prop names.
-
-```svelte
-<script>
-	// creates a `class` property, even
-	// though it is a reserved word
-	let { class: className } = $props();
-</script>
-```
-
-If you're using TypeScript, you can declare the prop types:
-
-```svelte
-<script lang="ts">
-	interface Props {
-		required: string;
-		optional?: number;
-		[key: string]: unknown;
-	}
-
-	let { required, optional, ...everythingElse }: Props = $props();
-</script>
-```
-
-If you're using JavaScript, you can declare the prop types using JSDoc:
-
-```svelte
-<script>
-	/** @type {{ x: string }} */
-	let { x } = $props();
-
-	// or use @typedef if you want to document the properties:
-
-	/**
-	 * @typedef {Object} MyProps
-	 * @property {string} y Some documentation
-	 */
-
-	/** @type {MyProps} */
-	let { y } = $props();
-</script>
-```
-
-If you export a `const`, `class` or `function`, it is readonly from outside the component.
-
-```svelte
-<script>
-	export const thisIs = 'readonly';
-
-	export function greet(name) {
-		alert(`hello ${name}!`);
-	}
-</script>
-```
-
-Readonly props can be accessed as properties on the element, tied to the component using [`bind:this` syntax](bindings#bind:this).
-
-### Reactive variables
-
-To change component state and trigger a re-render, just assign to a locally declared variable that was declared using the `$state` rune.
-
-Update expressions (`count += 1`) and property assignments (`obj.x = y`) have the same effect.
-
-```svelte
-<script>
-	let count = $state(0);
-
-	function handleClick() {
-		// calling this function will trigger an
-		// update if the markup references `count`
-		count = count + 1;
-	}
-</script>
-```
-
-Svelte's `<script>` blocks are run only when the component is created, so assignments within a `<script>` block are not automatically run again when a prop updates.
-
-```svelte
-<script>
-	let { person } = $props();
-	// this will only set `name` on component creation
-	// it will not update when `person` does
-	let { name } = person;
-</script>
-```
-
-If you'd like to react to changes to a prop, use the `$derived` or `$effect` runes instead.
-
-```svelte
-<script>
-	let count = $state(0);
-
-	let double = $derived(count * 2);
-
-	$effect(() => {
-		if (count > 10) {
-			alert('Too high!');
-		}
-	});
-</script>
-```
-
-For more information on reactivity, read the documentation around runes.
-
-## `<script module>`
-
-A `<script>` tag with a `module` attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular `<script>` (and the component markup) but not vice versa.
-
-You can `export` bindings from this block, and they will become exports of the compiled module.
-
-You cannot `export default`, since the default export is the component itself.
-
-```svelte
-<script module>
-	let totalComponents = 0;
-
-	// the export keyword allows this function to imported with e.g.
-	// `import Example, { alertTotal } from './Example.svelte'`
-	export function alertTotal() {
-		alert(totalComponents);
-	}
-</script>
-
-<script>
-	totalComponents += 1;
-	console.log(`total number of times this component has been created: ${totalComponents}`);
-</script>
-```
-
-## `<style>`
-
-CSS inside a `<style>` block will be scoped to that component.
-
-```svelte
-<style>
-	p {
-		/* this will only affect <p> elements in this component */
-		color: burlywood;
-	}
-</style>
-```
-
-For more information regarding styling, read the documentation around [styles and classes](styles-and-classes).