chore: use miniflare for testing repo and recommend to users (#585)

2024-11-21 21:25:11 +00:00 · 2021-09-28 12:30:54 +01:00 · 2021-09-28 12:30:54 +01:00 · b8b32ac32d
commit b8b32ac32d
parent f70825d3af
5 changed files with 448 additions and 399 deletions
--- a/docs/content/6.deployment/platforms/cloudflare.md
+++ b/docs/content/6.deployment/platforms/cloudflare.md
@ -25,6 +25,15 @@ bucket = ".output/public"
 entry-point = ".output"
 ```

+## Testing locally
+
+You can use [miniflare](https://miniflare.dev/), a local Cloudflare Workers development server, to test your app locally:
+
+```bash
+NITRO_PRESET=cloudflare yarn build
+npx miniflare .output/server/index.mjs --site .output/public
+```
+
 ## Deploy from your local machine using wrangler

 Install [wrangler](https://github.com/cloudflare/wrangler) and login to your Cloudflare account:
--- a/package.json
+++ b/package.json
@ -43,8 +43,8 @@
    "execa": "^5.1.1",
    "globby": "^11.0.4",
    "jiti": "^1.12.3",
-    "jsdom": "^17.0.0",
    "lerna": "^4.0.0",
+    "miniflare": "^1.4.1",
    "mocha": "^9.1.1",
    "object-hash": "^2.2.0",
    "pathe": "^0.2.0",
--- a/packages/nitro/src/presets/cloudflare.ts
+++ b/packages/nitro/src/presets/cloudflare.ts
@ -1,6 +1,6 @@
 import { resolve } from 'pathe'
 import consola from 'consola'
-import { extendPreset, writeFile, prettyPath } from '../utils'
+import { extendPreset, writeFile, prettyPath, hl } from '../utils'
 import { NitroContext, NitroPreset } from '../context'
 import { worker } from './worker'

@ -17,7 +17,7 @@ export const cloudflare: NitroPreset = extendPreset(worker, {
      if (inDir) {
        inDir = 'in ' + inDir
      }
-      consola.success('Ready to run `wrangler publish`', inDir)
+      consola.success('Ready to run', hl('npx wrangler publish ' + inDir), 'or', hl('npx miniflare ' + prettyPath(output.serverDir) + '/index.mjs --site ' + prettyPath(output.publicDir)), 'for local testing')
    }
  }
 })
--- a/test/presets/cloudflare.test.mjs
+++ b/test/presets/cloudflare.test.mjs
@ -1,7 +1,6 @@
-import { resolve } from 'pathe'
 import { promises as fsp } from 'fs'
-import { TextEncoder, TextDecoder } from 'util'
-import { JSDOM } from 'jsdom'
+import { resolve } from 'pathe'
+import { Miniflare } from 'miniflare'

 import { setupTest, testNitroBehavior } from './_tests.mjs'

@ -10,60 +9,14 @@ describe('nitro:preset:cloudflare', () => {
  const ctx = setupTest('cloudflare')
  testNitroBehavior(ctx, async () => {
    const script = await fsp.readFile(resolve(ctx.outDir, 'server/index.mjs'), 'utf-8')
-    const dom = new JSDOM(
-      `<!DOCTYPE html>
-      <html>
-        <body>
-          <script>
-            global = window
-            window.Response = class Response {
-              constructor (body, { headers, status, statusText } = {}) {
-                this.body = body
-                this.status = status || 200
-                this.headers = headers || {}
-                this.statusText = statusText || ''
-              }
-              get ok() {
-                return this.status === 200
-              }
-              async text() {
-                return this.body
-              }
-              async json() {
-                return JSON.parse(this.body)
-              }
-            }
-            window.addEventListener = (method, handler) => {
-              window.handleEvent = async event => {
-                event.respondWith = response => {
-                  event.response = response
-                }
-                await handler(event)
-                return event.response
-              }
-            }
-          </script>
-          <script>window._load = function() { ${script} }</script>
-        </body>
-      </html>`,
-      { runScripts: 'dangerously' }
-    )
-
-    // https://github.com/jsdom/jsdom/issues/2524
-    // https://github.com/inrupt/solid-client-authn-js/issues/1676#issuecomment-917016646
-    dom.window.TextEncoder = TextEncoder
-    dom.window.TextDecoder = TextDecoder
-    dom.window._load()
+    const mf = new Miniflare({ script })

    return async ({ url, headers, method, body }) => {
-      const data = await dom.window.handleEvent({
-        request: {
-          url: 'http://localhost' + url,
-          headers: headers || {},
-          method: method || 'GET',
-          redirect: null,
-          body: body || null
-        }
+      const data = await mf.dispatchFetch('http://localhost' + url, {
+        headers: headers || {},
+        method: method || 'GET',
+        redirect: null,
+        body: body || null
      }).then(r => r.text())

      return { data }
--- a/yarn.lock
+++ b/yarn.lock