Skip to content

Commit 51a356b

Browse files
authored
docs: replace plugin updates (#14)
1 parent 8863dde commit 51a356b

File tree

9 files changed

+33
-33
lines changed

9 files changed

+33
-33
lines changed

src/content/tutorial/vite-plugin/replace-plugin/defining-transform-hook/_solution/vite-plugin-replace.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default function vitePluginReplace() {
22
return {
33
name: "replace-plugin",
4-
transform(src, id) {
4+
transform(code, id) {
55
if (id.includes("tutorial-example.js")) {
66
return { code: "mountHTML('<h1>Changed!</h1>')" };
77
}
Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
22
type: lesson
3-
title: Defining transform hook
3+
title: The transform hook
44
focus: /vite-plugin-replace.ts
55
---
66

7-
# Transform hook
7+
# The transform hook
88

9-
Modifying contents of a source code file is called **transforming** in Vite. To do this in a Vite plugin, we'll need to use `transform` hook.
9+
Modifying the contents of a source code file is called **transforming** in Vite. To transform a module in a Vite plugin, we'll need to use `transform` hook.
1010

1111
```ts add={3}
1212
{
@@ -15,9 +15,9 @@ Modifying contents of a source code file is called **transforming** in Vite. To
1515
}
1616
```
1717

18-
This hooks is called with two options:
18+
This hook is called with two options:
1919

20-
- `src` is the source code of the file, or the result of previous Vite plugin's transform
20+
- `code` is the source code of the file, or the result of previous Vite plugin's transform
2121
- `id` is the name of the module
2222

2323
As return value Vite expects an object with various properties.
@@ -26,12 +26,12 @@ In this tutorial we'll skip most of them and focus only on `code` property. This
2626
```ts
2727
{
2828
name: "replace-plugin",
29-
transform(src, id) {
29+
transform(code, id) {
3030
return { code: <transformed Javascript code> }
3131
}
3232
}
3333
```
3434

35-
In `tutorial-example.js` we have a helper function `mountHTML()`. It can be used to modify the page on preview tab. Try changing the contents of `tutorial-example.js` using `transform` hook so that `mountHTML` is called with `<h1>Changed!</h1>` instead.
35+
In `tutorial-example.js` we have a helper function `mountHTML()`. It can be used to modify the page on preview tab. Try changing the contents of `tutorial-example.js` using the `transform` hook so that `mountHTML` is called with `<h1>Changed!</h1>` instead.
3636

37-
> 💡 Note that `transform` hook is called for every single file that Vite processes. Make sure to specifically transform only `tutorial-example.js`. This can be detected by checking `id` for matches exactly as we did with the `load` hook.
37+
> 💡 Note that the `transform` hook is called for every single module that Vite processes. Make sure to only transform `tutorial-example.js`. This can be detected by checking `id` for matches in the same way we did for the `load` hook in the previous chapter.

src/content/tutorial/vite-plugin/replace-plugin/summarize-replace-plugin/_files/vite-plugin-replace.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
export default function vitePluginReplace(options) {
22
return {
33
name: "replace-plugin",
4-
transform(src, id) {
4+
transform(code, id) {
55
if (id.includes("tutorial-example.js")) {
6-
return { code: src.replaceAll(options.from, options.to) };
6+
return { code: code.replaceAll(options.from, options.to) };
77
}
88
}
99
};

src/content/tutorial/vite-plugin/replace-plugin/summarize-replace-plugin/_solution/vite-plugin-replace.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
export default function vitePluginReplace(options) {
22
return {
33
name: "replace-plugin",
4-
transform(src, id) {
4+
transform(code, id) {
55
if (id.includes("tutorial-example.js")) {
6-
return { code: src.replaceAll(options.from, options.to) };
6+
return { code: code.replaceAll(options.from, options.to) };
77
}
88
}
99
};

src/content/tutorial/vite-plugin/replace-plugin/summarize-replace-plugin/content.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,18 @@ focus: /vite.config.ts
66

77
# Summarize
88

9-
We've now created a plugin that's able to transform our source code. The plugin is also stored in a separate file from the `vite.config.ts`. Let's summarize the process:
9+
We've now created a plugin that's able to transform our source code. The plugin is also defined in a separate file from the `vite.config.ts`. Let's summarize the process:
1010

1111
<ol>
12-
<li>The <code>vite.config.ts</code> imports custom plugin from separate file and calls it with plugin options</li>
12+
<li>The <code>vite.config.ts</code> imports a custom plugin constructor from a separate module and calls it with plugin options</li>
1313

14-
<li class="mt2">Plugin intercepts <code>tutorial-example.js</code> in <code>transform</code> hook</li>
14+
<li class="mt2">The Plugin intercepts <code>tutorial-example.js</code> in the <code>transform</code> hook</li>
1515

16-
<li class="mt2"><code>transform</code> hook uses plugin options with <code>String.replaceAll</code> and modifies the passed <code>src</code></li>
16+
<li class="mt2">In the <code>transform</code> hook, we use the plugin options with <code>String.replaceAll</code> to modify the passed source <code>code</code></li>
1717

18-
<li class="mt2">Transformed code is returned from <code>transform</code> hook and browser loads the modified file&nbsp;✅</li>
18+
<li class="mt2">Transformed code is returned from the <code>transform</code> hook and the browser loads the modified module&nbsp;✅</li>
1919
</ol>
2020

2121
📚 Homework: Build a Vite plugin that replaces all usage of `process.env.<variable-name>` with the actual values during build.
2222

23-
> 💡 Note that when transforming source code we should also process [source maps](https://web.dev/articles/source-maps). There's npm package [`magic-string`](https://www.npmjs.com/package/magic-string) that's widely used by Vite's internal and community plugins.
23+
> 💡 Note that when transforming source code we should also process [source maps](https://web.dev/articles/source-maps). There's npm package [`magic-string`](https://www.npmjs.com/package/magic-string) that's widely used by Vite's internals and community plugins.

src/content/tutorial/vite-plugin/replace-plugin/transforming-code/content.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,24 @@ focus: /vite.config.ts
66

77
# Vite Replace plugin
88

9-
In this part we'll create a plugin that modifies our source code. This plugin will look for specific patterns in the source files and replace those with the configured value.
9+
In this chapter we'll create a plugin that modifies loaded source code. This plugin will look for specific patterns in the source files and replace those with the configured value.
1010

11-
For example, with configuration of `{ from: "Initial value", to: "Replaced value" }` this plugin should replace all occurences of `"Initial value"` with `"Replaced value"`.
11+
For example, when configured with `{ from: "Initial value", to: "Replaced value" }` this plugin should replace all occurrences of `"Initial value"` with `"Replaced value"`.
1212

13-
The plugin will also be in a separate file from our `vite.config.ts`.
13+
The plugin will also be in a separate file from our `vite.config.ts`. Inlining plugins is ok for simple cases, but it is usual to abstract them using Plugin Constructors to keep our app configuration manageable as our plugins pipeline grows. These plugins can also be later packaged and published to npm to share them with other Vite users. You'll normally reach out for popular community plugins for common patterns, before building your own.
1414

1515
```
1616
├── vite-plugin-replace.ts
1717
└── vite.config.ts
1818
```
1919

20-
To use this plugin we'll be importing it from the `vite-plugin-replace.ts` and passing it's return value to our Vite configuration's `plugins`.
20+
To use this plugin we'll be importing it from the `vite-plugin-replace.ts` module and passing it's return value to our Vite configuration's `plugins`.
2121

2222
```ts
2323
import replacePlugin from "./vite-plugin-replace";
2424
```
2525

26-
Options are passed to the plugin as function argument.
26+
`replacePlugin` is a plugin constructor. We'll call it with options to create a plugin instance.
2727

2828
```ts
2929
replacePlugin({
@@ -32,8 +32,8 @@ replacePlugin({
3232
});
3333
```
3434

35-
Import the plugin in `vite.config.ts` and pass it in `plugins`. The `vite-plugin-replace.ts` contains minimal plugin already.
35+
Import the plugin constructor in `vite.config.ts` and call it to add a new plugin in the `plugins` array. The `vite-plugin-replace.ts` contains a minimal plugin already.
3636

37-
Preview tab should indicate successful load of the plugin:
37+
The preview tab should indicate a successful load of the plugin:
3838

3939
> Loaded Vite plugins: replace-plugin ✅

src/content/tutorial/vite-plugin/replace-plugin/transforming-source-code/_files/vite-plugin-replace.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
export default function vitePluginReplace() {
22
return {
33
name: "replace-plugin",
4-
transform(src, id) {
4+
transform(code, id) {
55
if (id.includes("tutorial-example.js")) {
6-
return { code: src };
6+
return { code };
77
}
88
}
99
};

src/content/tutorial/vite-plugin/replace-plugin/transforming-source-code/_solution/vite-plugin-replace.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
export default function vitePluginReplace(options) {
22
return {
33
name: "replace-plugin",
4-
transform(src, id) {
4+
transform(code, id) {
55
if (id.includes("tutorial-example.js")) {
6-
return { code: src.replaceAll(options.from, options.to) };
6+
return { code: code.replaceAll(options.from, options.to) };
77
}
88
}
99
};

src/content/tutorial/vite-plugin/replace-plugin/transforming-source-code/content.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ focus: /vite-plugin-replace.ts
66

77
# Transforming source code
88

9-
Now that we can use `transform` hook to return code for a requested module, let's try modifying the original source code of the module.
9+
Now that we can use the `transform` hook to return a new version of the code for a requested module, let's try modifying the original source code of the module.
1010

1111
In the `vite.config.ts` we are passing the options for our plugin:
1212

@@ -26,10 +26,10 @@ export default function vitePluginReplace() {
2626
name: "replace-plugin",
2727
```
2828
29-
Next we need to modify the `src` of `transform` hook with the options.
29+
Next we need to modify the `code` of `transform` hook with the options.
3030
3131
```ts
32-
src.replaceAll(options.from, options.to);
32+
code.replaceAll(options.from, options.to);
3333
```
3434
3535
Add these changes to the `vite-plugin-replace.ts` and set proper values for the plugin options in `vite.config.ts`, so that preview tab outputs `Replaced value!`.

0 commit comments

Comments
 (0)