@cloudflare/vite-plugin 0.0.0-26fa9e802 → 0.0.0-29f2076a6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -30
- package/dist/index.d.ts +7 -0
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# `@cloudflare/vite-plugin`
|
|
2
2
|
|
|
3
|
-
[Intro](#intro) | [Quick start](#quick-start) | [Tutorial](#tutorial) | [API](#api) | [Cloudflare environments](#
|
|
3
|
+
[Intro](#intro) | [Quick start](#quick-start) | [Tutorial](#tutorial) | [API](#api) | [Cloudflare environments](#cloudflare-environments) | [Migrating from `wrangler dev`](#migrating-from-wrangler-dev)
|
|
4
4
|
|
|
5
5
|
## Intro
|
|
6
6
|
|
|
@@ -27,12 +27,12 @@ npm install @cloudflare/vite-plugin wrangler --save-dev
|
|
|
27
27
|
```ts
|
|
28
28
|
// vite.config.ts
|
|
29
29
|
|
|
30
|
-
import { defineConfig } from
|
|
31
|
-
import { cloudflare } from
|
|
30
|
+
import { defineConfig } from "vite";
|
|
31
|
+
import { cloudflare } from "@cloudflare/vite-plugin";
|
|
32
32
|
|
|
33
33
|
export default defineConfig({
|
|
34
34
|
plugins: [cloudflare()],
|
|
35
|
-
})
|
|
35
|
+
});
|
|
36
36
|
```
|
|
37
37
|
|
|
38
38
|
### Create your Worker config file
|
|
@@ -52,9 +52,9 @@ main = "./src/index.ts"
|
|
|
52
52
|
|
|
53
53
|
export default {
|
|
54
54
|
fetch() {
|
|
55
|
-
return new Response(`Running in ${navigator.userAgent}!`)
|
|
55
|
+
return new Response(`Running in ${navigator.userAgent}!`);
|
|
56
56
|
},
|
|
57
|
-
}
|
|
57
|
+
};
|
|
58
58
|
```
|
|
59
59
|
|
|
60
60
|
You can now develop (`vite dev`), build (`vite build`), preview (`vite preview`), and deploy (`wrangler deploy`) your application.
|
|
@@ -88,13 +88,13 @@ npm install @cloudflare/vite-plugin wrangler --save-dev
|
|
|
88
88
|
```ts
|
|
89
89
|
// vite.config.ts
|
|
90
90
|
|
|
91
|
-
import { defineConfig } from
|
|
92
|
-
import react from
|
|
93
|
-
import { cloudflare } from
|
|
91
|
+
import { defineConfig } from "vite";
|
|
92
|
+
import react from "@vitejs/plugin-react";
|
|
93
|
+
import { cloudflare } from "@cloudflare/vite-plugin";
|
|
94
94
|
|
|
95
95
|
export default defineConfig({
|
|
96
96
|
plugins: [react(), cloudflare()],
|
|
97
|
-
})
|
|
97
|
+
});
|
|
98
98
|
```
|
|
99
99
|
|
|
100
100
|
#### Create your Worker config file
|
|
@@ -181,22 +181,22 @@ The assets `binding` defined here will allow you to access the assets functional
|
|
|
181
181
|
// api/index.ts
|
|
182
182
|
|
|
183
183
|
interface Env {
|
|
184
|
-
ASSETS: Fetcher
|
|
184
|
+
ASSETS: Fetcher;
|
|
185
185
|
}
|
|
186
186
|
|
|
187
187
|
export default {
|
|
188
188
|
fetch(request, env) {
|
|
189
|
-
const url = new URL(request.url)
|
|
189
|
+
const url = new URL(request.url);
|
|
190
190
|
|
|
191
|
-
if (url.pathname.startsWith(
|
|
191
|
+
if (url.pathname.startsWith("/api/")) {
|
|
192
192
|
return Response.json({
|
|
193
|
-
name:
|
|
194
|
-
})
|
|
193
|
+
name: "Cloudflare",
|
|
194
|
+
});
|
|
195
195
|
}
|
|
196
196
|
|
|
197
|
-
return env.ASSETS.fetch(request)
|
|
197
|
+
return env.ASSETS.fetch(request);
|
|
198
198
|
},
|
|
199
|
-
} satisfies ExportedHandler<Env
|
|
199
|
+
} satisfies ExportedHandler<Env>;
|
|
200
200
|
```
|
|
201
201
|
|
|
202
202
|
The Worker above will be invoked for any request not matching a static asset.
|
|
@@ -211,14 +211,14 @@ Replace the file contents with the following code:
|
|
|
211
211
|
```tsx
|
|
212
212
|
// src/App.tsx
|
|
213
213
|
|
|
214
|
-
import { useState } from
|
|
215
|
-
import reactLogo from
|
|
216
|
-
import viteLogo from
|
|
217
|
-
import
|
|
214
|
+
import { useState } from "react";
|
|
215
|
+
import reactLogo from "./assets/react.svg";
|
|
216
|
+
import viteLogo from "/vite.svg";
|
|
217
|
+
import "./App.css";
|
|
218
218
|
|
|
219
219
|
function App() {
|
|
220
|
-
const [count, setCount] = useState(0)
|
|
221
|
-
const [name, setName] = useState(
|
|
220
|
+
const [count, setCount] = useState(0);
|
|
221
|
+
const [name, setName] = useState("unknown");
|
|
222
222
|
|
|
223
223
|
return (
|
|
224
224
|
<>
|
|
@@ -245,9 +245,9 @@ function App() {
|
|
|
245
245
|
<div className="card">
|
|
246
246
|
<button
|
|
247
247
|
onClick={() => {
|
|
248
|
-
fetch(
|
|
248
|
+
fetch("/api/")
|
|
249
249
|
.then((res) => res.json() as Promise<{ name: string }>)
|
|
250
|
-
.then((data) => setName(data.name))
|
|
250
|
+
.then((data) => setName(data.name));
|
|
251
251
|
}}
|
|
252
252
|
aria-label="get name"
|
|
253
253
|
>
|
|
@@ -261,10 +261,10 @@ function App() {
|
|
|
261
261
|
Click on the Vite and React logos to learn more
|
|
262
262
|
</p>
|
|
263
263
|
</>
|
|
264
|
-
)
|
|
264
|
+
);
|
|
265
265
|
}
|
|
266
266
|
|
|
267
|
-
export default App
|
|
267
|
+
export default App;
|
|
268
268
|
```
|
|
269
269
|
|
|
270
270
|
Now, if you click the button, it will display 'Name from API is: Cloudflare'.
|
|
@@ -310,12 +310,12 @@ The `cloudflare` plugin should be included in the Vite `plugins` array:
|
|
|
310
310
|
```ts
|
|
311
311
|
// vite.config.ts
|
|
312
312
|
|
|
313
|
-
import { defineConfig } from
|
|
314
|
-
import { cloudflare } from
|
|
313
|
+
import { defineConfig } from "vite";
|
|
314
|
+
import { cloudflare } from "@cloudflare/vite-plugin";
|
|
315
315
|
|
|
316
316
|
export default defineConfig({
|
|
317
317
|
plugins: [cloudflare()],
|
|
318
|
-
})
|
|
318
|
+
});
|
|
319
319
|
```
|
|
320
320
|
|
|
321
321
|
It accepts an optional `PluginConfig` parameter.
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,13 @@ interface PluginConfig extends EntryWorkerConfig {
|
|
|
19
19
|
persistState?: PersistState;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
/**
|
|
23
|
+
* Vite plugin that enables a full-featured integration between Vite and the Cloudflare Workers runtime.
|
|
24
|
+
*
|
|
25
|
+
* See the [README](https://github.com/cloudflare/workers-sdk/tree/main/packages/vite-plugin-cloudflare#readme) for more details.
|
|
26
|
+
*
|
|
27
|
+
* @param pluginConfig An optional {@link PluginConfig} object.
|
|
28
|
+
*/
|
|
22
29
|
declare function cloudflare(pluginConfig?: PluginConfig): vite.Plugin;
|
|
23
30
|
|
|
24
31
|
export { cloudflare };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloudflare/vite-plugin",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-29f2076a6",
|
|
4
4
|
"description": "Cloudflare plugin for Vite",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cloudflare",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"@hattip/adapter-node": "^0.0.49",
|
|
37
37
|
"unenv": "npm:unenv-nightly@2.0.0-20241218-183400-5d6aec3",
|
|
38
38
|
"ws": "^8.18.0",
|
|
39
|
-
"miniflare": "0.0.0-
|
|
39
|
+
"miniflare": "0.0.0-29f2076a6"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@cloudflare/workers-types": "^4.20241230.0",
|
|
@@ -46,13 +46,13 @@
|
|
|
46
46
|
"tsup": "^8.3.0",
|
|
47
47
|
"typescript": "^5.7.2",
|
|
48
48
|
"vite": "^6.0.7",
|
|
49
|
-
"@cloudflare/workers-shared": "0.0.0-26fa9e802",
|
|
50
49
|
"@cloudflare/workers-tsconfig": "0.0.0",
|
|
51
|
-
"wrangler": "0.0.0-
|
|
50
|
+
"wrangler": "0.0.0-29f2076a6",
|
|
51
|
+
"@cloudflare/workers-shared": "0.0.0-29f2076a6"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"vite": "^6.0.7",
|
|
55
|
-
"wrangler": "^
|
|
55
|
+
"wrangler": "^3.101.0"
|
|
56
56
|
},
|
|
57
57
|
"publishConfig": {
|
|
58
58
|
"access": "public"
|