From 76720ae4e6a8a34053c55a2c5e1de31866e6a615 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Tue, 4 Apr 2023 00:54:33 +0530
Subject: [PATCH 1/4] CJS to ESM

---
 .../docs/04-compiler-and-api/01-svelte-compiler.md   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
index 0a47c0345f5d..186d1c0a564c 100644
--- a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
+++ b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
@@ -22,7 +22,7 @@ result: {
 This is where the magic happens. `svelte.compile` takes your component source code, and turns it into a JavaScript module that exports a class.
 
 ```js
-const svelte = require('svelte/compiler');
+import svelte from 'svelte/compiler';
 
 const result = svelte.compile(source, {
 	// options
@@ -160,7 +160,7 @@ ast: object = svelte.parse(
 The `parse` function parses a component, returning only its abstract syntax tree. Unlike compiling with the `generate: false` option, this will not perform any validation or other analysis of the component beyond parsing it. Note that the returned AST is not considered public API, so breaking changes could occur at any point in time.
 
 ```js
-const svelte = require('svelte/compiler');
+import svelte from 'svelte/compiler';
 
 const ast = svelte.parse(source, { filename: 'App.svelte' });
 ```
@@ -208,8 +208,8 @@ The `markup` function receives the entire component source text, along with the
 > Preprocessor functions should additionally return a `map` object alongside `code` and `dependencies`, where `map` is a sourcemap representing the transformation.
 
 ```js
-const svelte = require('svelte/compiler');
-const MagicString = require('magic-string');
+import svelte from 'svelte/compiler';
+import MagicString from 'magic-string';
 
 const { code } = await svelte.preprocess(
 	source,
@@ -238,8 +238,8 @@ The `script` and `style` functions receive the contents of `<script>` and `<styl
 If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
 
 ```js
-const svelte = require('svelte/compiler');
-const sass = require('node-sass');
+import svelte from 'svelte/compiler';
+import sass from 'node-sass';
 const { dirname } = require('path');
 
 const { code, dependencies } = await svelte.preprocess(

From 6164d149c0555a5b39bb286eab7ed2329334e3d9 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Tue, 4 Apr 2023 00:58:59 +0530
Subject: [PATCH 2/4] Commit

---
 .../docs/04-compiler-and-api/01-svelte-compiler.md       | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
index 186d1c0a564c..4b1c070b62ad 100644
--- a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
+++ b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
@@ -240,7 +240,7 @@ If a `dependencies` array is returned, it will be included in the result object.
 ```js
 import svelte from 'svelte/compiler';
 import sass from 'node-sass';
-const { dirname } = require('path');
+import { dirname } from 'path';
 
 const { code, dependencies } = await svelte.preprocess(
 	source,
@@ -278,7 +278,7 @@ const { code, dependencies } = await svelte.preprocess(
 Multiple preprocessors can be used together. The output of the first becomes the input to the second. `markup` functions run first, then `script` and `style`.
 
 ```js
-const svelte = require('svelte/compiler');
+import svelte from 'svelte/compiler';
 
 const { code } = await svelte.preprocess(
 	source,
@@ -326,7 +326,8 @@ The `walk` function provides a way to walk the abstract syntax trees generated b
 The walker takes an abstract syntax tree to walk and an object with two optional methods: `enter` and `leave`. For each node, `enter` is called (if present). Then, unless `this.skip()` is called during `enter`, each of the children are traversed, and then `leave` is called on the node.
 
 ```js
-const svelte = require('svelte/compiler');
+import svelte from 'svelte/compiler';
+
 svelte.walk(ast, {
 	enter(node, parent, prop, index) {
 		do_something(node);
@@ -345,6 +346,6 @@ svelte.walk(ast, {
 The current version, as set in package.json.
 
 ```js
-const svelte = require('svelte/compiler');
+import svelte from 'svelte/compiler';
 console.log(`running svelte version ${svelte.VERSION}`);
 ```

From 0fb0689beb5802029944fe492d808a19d2bfb64e Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Tue, 4 Apr 2023 02:22:07 +0530
Subject: [PATCH 3/4] Update content

---
 .../04-compiler-and-api/01-svelte-compiler.md | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
index 4b1c070b62ad..67a2075a0822 100644
--- a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
+++ b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
@@ -235,37 +235,28 @@ const { code } = await svelte.preprocess(
 
 The `script` and `style` functions receive the contents of `<script>` and `<style>` elements respectively (`content`) as well as the entire component source text (`markup`). In addition to `filename`, they get an object of the element's attributes.
 
-If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
+If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) and [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
 
 ```js
-import svelte from 'svelte/compiler';
-import sass from 'node-sass';
+import { preprocess } from 'svelte/compiler';
+import sass from 'sass';
 import { dirname } from 'path';
 
-const { code, dependencies } = await svelte.preprocess(
+const { code, dependencies } = await preprocess(
 	source,
 	{
 		style: async ({ content, attributes, filename }) => {
 			// only process <style lang="sass">
-			if (attributes.lang !== 'sass') return;
-
-			const { css, stats } = await new Promise((resolve, reject) =>
-				sass.render(
-					{
-						file: filename,
-						data: content,
-						includePaths: [dirname(filename)]
-					},
-					(err, result) => {
-						if (err) reject(err);
-						else resolve(result);
-					}
-				)
-			);
+			if (attributes.lang !== 'sass' && attributes.lang !== 'scss') return;
+
+			const { css, loadedUrls } = await sass.compileStringAsync(content, {
+				data: content,
+				includePaths: [dirname(filename)]
+			});
 
 			return {
-				code: css.toString(),
-				dependencies: stats.includedFiles
+				code: css,
+				dependencies: loadedUrls
 			};
 		}
 	},

From 573a66156f07a4533ddd9b12fc7f71d63cbca823 Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Tue, 4 Apr 2023 02:27:15 +0530
Subject: [PATCH 4/4] Update code example

---
 site/content/docs/04-compiler-and-api/01-svelte-compiler.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
index 67a2075a0822..092ef6abbfae 100644
--- a/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
+++ b/site/content/docs/04-compiler-and-api/01-svelte-compiler.md
@@ -250,8 +250,7 @@ const { code, dependencies } = await preprocess(
 			if (attributes.lang !== 'sass' && attributes.lang !== 'scss') return;
 
 			const { css, loadedUrls } = await sass.compileStringAsync(content, {
-				data: content,
-				includePaths: [dirname(filename)]
+				loadPaths: [dirname(filename)]
 			});
 
 			return {