diff --git a/site/content/docs/04-compile-time.md b/site/content/docs/04-compile-time.md index 65dd38325a..7dd1e371f6 100644 --- a/site/content/docs/04-compile-time.md +++ b/site/content/docs/04-compile-time.md @@ -11,7 +11,8 @@ Typically, you won't interact with the Svelte compiler directly, but will instea Nonetheless, it's useful to understand how to use the compiler, since bundler plugins generally expose compiler options to you. -### `compile` + +### `svelte.compile` ```js result: { @@ -21,17 +22,17 @@ result: { warnings, vars, stats -} = compile(source: string, options?: {...}) +} = svelte.compile(source: string, options?: {...}) ``` --- -This is where the magic happens. `compile` takes your component source code, and turns it into a JavaScript module that exports a class. +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 {compile} = require('svelte/compiler'); +const svelte = require('svelte/compiler'); -const result = compile(source, { +const result = svelte.compile(source, { // options }); ``` @@ -91,7 +92,7 @@ const { warnings, vars, stats -} = compile(source); +} = svelte.compile(source); ``` * `js` and `css` are objects with the following properties: @@ -146,19 +147,19 @@ compiled: { stats: { timings: { [label]: number } } -} = compile(source: string, options?: {...}) +} = svelte.compile(source: string, options?: {...}) ``` --> -### `preprocess` +### `svelte.preprocess` ```js result: { code: string, dependencies: Array -} = preprocess( +} = svelte.preprocess( source: string, preprocessors: Array<{ markup?: (input: { source: string, filename: string }) => Promise<{ @@ -193,9 +194,9 @@ The `markup` function receives the entire component source text, along with the > Preprocessor functions may additionally return a `map` object alongside `code` and `dependencies`, where `map` is a sourcemap representing the transformation. In current versions of Svelte it will be ignored, but future versions of Svelte may take account of preprocessor sourcemaps. ```js -const {preprocess} = require('svelte/compiler'); +const svelte = require('svelte/compiler'); -const { code } = preprocess(source, { +const { code } = svelte.preprocess(source, { markup: ({ content, filename }) => { return { code: content.replace(/foo/g, 'bar') @@ -213,11 +214,11 @@ The `script` and `style` functions receive the contents of `