docs(blog): Introducing Runes - mention .svelte.js suffix (#11522)

* Update 2023-09-20-runes.md

* More file names

* update import

* remove unnecessary .svelte.js

* Note for runes

* Apply suggestions from code review

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Fix language, remove NOTE:

* Reword the note

* , -> and

* Update documentation/blog/2023-09-20-runes.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

Author: PuruVJ

documentation/blog/2023-09-20-runes.md

@@ -8,6 +8,7 @@ authorURL: /
 In 2019, Svelte 3 turned JavaScript into a [reactive language](/blog/svelte-3-rethinking-reactivity). Svelte is a web UI framework that uses a compiler to turn declarative component code like this...
 
 ```svelte
+<!--- file: App.svelte --->
 <script>
 	let count = 0;
 
@@ -54,6 +55,7 @@ Runes are symbols that influence the Svelte compiler. Whereas Svelte today uses
 For example, to declare a piece of reactive state, we can use the `$state` rune:
 
 ```diff
+<!--- file: App.svelte --->
 <script>
 -	let count = 0;
 +	let count = $state(0);
@@ -77,6 +79,7 @@ Well, no. The reality is that as applications grow in complexity, figuring out w
 With runes, reactivity extends beyond the boundaries of your `.svelte` files. Suppose we wanted to encapsulate our counter logic in a way that could be reused between components. Today, you would use a [custom store](https://learn.svelte.dev/tutorial/custom-stores) in a `.js` or `.ts` file:
 
 ```js
+/// file: counter.js
 import { writable } from 'svelte/store';
 
 export function createCounter() {
@@ -92,7 +95,9 @@ export function createCounter() {
 Because this implements the _store contract_ — the returned value has a `subscribe` method — we can reference the store value by prefixing the store name with `$`:
 
 ```diff
+<!--- file: App.svelte --->
 <script>
+/// file: App.svelte
 +	import { createCounter } from './counter.js';
 +
 +	const counter = createCounter();
@@ -115,6 +120,7 @@ This works, but it's pretty weird! We've found that the store API can get rather
 With runes, things get much simpler:
 
 ```diff
+/// file: counter.svelte.js
 -import { writable } from 'svelte/store';
 
 export function createCounter() {
@@ -131,8 +137,10 @@ export function createCounter() {
 ```
 
 ```diff
+<!--- file: App.svelte --->
 <script>
-	import { createCounter } from './counter.js';
+-	import { createCounter } from './counter.js';
++	import { createCounter } from './counter.svelte.js';
 
 	const counter = createCounter();
 </script>
@@ -143,6 +151,8 @@ export function createCounter() {
 </button>
 ```
 
+> Outside `.svelte` components, runes can only be used in `.svelte.js` and `.svelte.ts` modules.
+
 Note that we're using a [get property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) in the returned object, so that `counter.count` always refers to the current value rather than the value at the time the function was called.
 
 ## Runtime reactivity