From 6d9ada9e2f71b536bcdf8a054116a3f5e34e9199 Mon Sep 17 00:00:00 2001 From: Andrey Yolkin Date: Mon, 14 Oct 2024 00:57:36 +0300 Subject: [PATCH 1/3] chore: migrate examples to v2 --- examples/body.ts | 10 ++++------ examples/cookies.ts | 8 +++----- examples/cors.ts | 8 +++----- examples/errors.ts | 9 ++++----- examples/first-server.ts | 4 ++-- examples/handler-middleware.ts | 9 +++------ examples/headers.ts | 28 +++++++--------------------- examples/index.mjs | 4 ++-- examples/nested-router.ts | 12 +++++------- examples/query-params.ts | 8 +++----- examples/redirect.ts | 8 +++----- examples/router.ts | 8 +++----- examples/server-sent-events.ts | 11 ++++------- examples/status.ts | 25 ++++++++----------------- examples/url-params.ts | 8 +++----- examples/websocket.ts | 4 ++-- 16 files changed, 59 insertions(+), 105 deletions(-) diff --git a/examples/body.ts b/examples/body.ts index 15a92a6c..02de44b9 100644 --- a/examples/body.ts +++ b/examples/body.ts @@ -1,15 +1,13 @@ -import { createApp, createRouter, readJSONBody } from "h3"; +import { createH3, readBody } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter() +app .get("/", () => "use POST method to try!") .post("/", async (event) => { - const body = await readJSONBody(event); + const body = await readBody(event); // Use can also use `readFormDataBody` to get a FormData object, `readMultiPartFormData` to get an array of MultiPartData or `readRawBody` to get a Buffer. return { body, }; }); - -app.use(router); diff --git a/examples/cookies.ts b/examples/cookies.ts index bb39163e..c1bd569c 100644 --- a/examples/cookies.ts +++ b/examples/cookies.ts @@ -1,8 +1,8 @@ -import { createApp, createRouter, getCookie, setCookie } from "h3"; +import { createH3, getCookie, setCookie } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter() +app .get("/", (event) => { const testCookie = getCookie(event, "testCookie"); return `testCookie is ${JSON.stringify(testCookie)} (go to /set to set it)`; @@ -13,5 +13,3 @@ const router = createRouter() setCookie(event, "testCookie", "bar", { httpOnly: true }); return "testCookie is set"; }); - -app.use(router); diff --git a/examples/cors.ts b/examples/cors.ts index 77f0573e..f95262cf 100644 --- a/examples/cors.ts +++ b/examples/cors.ts @@ -1,6 +1,6 @@ -import { createApp, createRouter, handleCors } from "h3"; +import { createH3, handleCors } from "h3"; -export const app = createApp(); +export const app = createH3(); app.use((event) => { if ( @@ -12,6 +12,4 @@ app.use((event) => { } }); -const router = createRouter().get("/hello", () => "world"); - -app.use(router); +app.get("/hello", () => "world"); diff --git a/examples/errors.ts b/examples/errors.ts index 1e932112..ff502680 100644 --- a/examples/errors.ts +++ b/examples/errors.ts @@ -1,13 +1,14 @@ -import { createApp, createError, createRouter } from "h3"; +import { createError, createH3 } from "h3"; -export const app = createApp({ debug: true }); +export const app = createH3({ debug: true }); -const router = createRouter() +app .get("/", () => { // Always "throw" errors to propgate them to the error handler throw createError({ statusMessage: "Simple error!", statusCode: 301 }); }) .get("/complexe-error", () => { + console.log("complexe-error"); // You can fully customize errors by adding data, cause and if it's a fatal error or not throw createError({ status: 400, @@ -24,5 +25,3 @@ const router = createRouter() data: { foo: "bar" }, }); }); - -app.use(router); diff --git a/examples/first-server.ts b/examples/first-server.ts index f12224a7..306a5d9e 100644 --- a/examples/first-server.ts +++ b/examples/first-server.ts @@ -1,6 +1,6 @@ -import { createApp } from "h3"; +import { createH3 } from "h3"; -export const app = createApp(); +export const app = createH3(); app // `/` is the root path and will response to every request. diff --git a/examples/handler-middleware.ts b/examples/handler-middleware.ts index 3e41e3a6..18208747 100644 --- a/examples/handler-middleware.ts +++ b/examples/handler-middleware.ts @@ -1,14 +1,13 @@ import { - createApp, - createRouter, + createH3, defineEventHandler, defineRequestMiddleware, defineResponseMiddleware, } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter().get( +app.get( "/", defineEventHandler({ onRequest: defineRequestMiddleware(() => { @@ -24,5 +23,3 @@ const router = createRouter().get( handler: () => "GET: hello world", }), ); - -app.use(router); diff --git a/examples/headers.ts b/examples/headers.ts index 3d9b3b46..107377b7 100644 --- a/examples/headers.ts +++ b/examples/headers.ts @@ -1,31 +1,17 @@ -import { - createApp, - createRouter, - getRequestHeader, - getResponseHeaders, - setResponseHeader, -} from "h3"; +import { createH3 } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter().get("/user-agent", (event) => { - const userAgent = getRequestHeader(event, "user-agent"); - // You can also use `getRequestHeaders` to get all headers at once. - // const headers = getRequestHeaders(event) +app.get("/user-agent", (event) => { + const userAgent = event.request.headers.get("user-agent"); - setResponseHeader(event, "content-type", "text/plain"); - setResponseHeader(event, "x-server", "nitro"); - // You can also use `setResponseHeaders` to set multiple headers at once. - // setResponseHeaders(event, { 'x-server': 'nitro', 'content-type': 'text/plain' }) + event.response.headers.set("content-type", "text/plain"); + event.response.headers.set("x-server", "nitro"); - const responseHeaders = getResponseHeaders(event); - // You can also use `getResponseHeader` to get a single header. - // const contentType = getResponseHeader(event, 'content-type') + const responseHeaders = Object.fromEntries(event.response.headers.entries()); return { userAgent, responseHeaders, }; }); - -app.use(router); diff --git a/examples/index.mjs b/examples/index.mjs index 53c450d2..aeaf4851 100644 --- a/examples/index.mjs +++ b/examples/index.mjs @@ -1,5 +1,5 @@ import { readdir } from "node:fs/promises"; -import { listenAndWatch } from "listhen"; +import { listen, listenAndWatch } from "listhen"; async function promptExample() { const { consola } = await import("consola"); @@ -14,6 +14,6 @@ async function promptExample() { const exampleFile = process.argv[2] || (await promptExample()); -listenAndWatch(new URL(exampleFile, import.meta.url), { +listen(new URL(exampleFile, import.meta.url), { name: `H3 example: ${exampleFile}`, }); diff --git a/examples/nested-router.ts b/examples/nested-router.ts index 12e1acbb..563e12f5 100644 --- a/examples/nested-router.ts +++ b/examples/nested-router.ts @@ -1,14 +1,12 @@ -import { createApp, createRouter, useBase, redirect } from "h3"; +import { createH3, redirect, withBase } from "h3"; // Init App -export const app = createApp({ debug: true }); +export const app = createH3({ debug: true }); // Main Router -const router = createRouter(); -router.use("/", (event) => redirect(event, "/api/test")); -app.use(router); +app.use("/", (event) => redirect(event, "/api/test")); +const apiRouter = createH3(); // Nested API Router -const apiRouter = createRouter(); -router.use("/api/**", useBase("/api", apiRouter.handler)); +app.use("/api/**", withBase("/api", apiRouter.handler)); apiRouter.use("/test", () => "API /test"); diff --git a/examples/query-params.ts b/examples/query-params.ts index 7dd86d10..ddea929b 100644 --- a/examples/query-params.ts +++ b/examples/query-params.ts @@ -1,10 +1,8 @@ -import { createApp, createRouter, getQuery } from "h3"; +import { createH3, getQuery } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter().get("/", (event) => { +app.get("/", (event) => { const query = getQuery(event); return `Hello ${query.name}`; }); - -app.use(router); diff --git a/examples/redirect.ts b/examples/redirect.ts index 86fec1fc..cd9950bc 100644 --- a/examples/redirect.ts +++ b/examples/redirect.ts @@ -1,8 +1,8 @@ -import { createApp, createRouter, redirect } from "h3"; +import { createH3, redirect } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter() +app .get("/unjs", (event) => { return redirect(event, "https://unjs.io/packages/h3"); // 302 Found by default }) @@ -10,5 +10,3 @@ const router = createRouter() // You can use any 3xx status code you want return redirect(event, "https://unjs.io/packages/h3", 301); }); - -app.use(router); diff --git a/examples/router.ts b/examples/router.ts index 1db2255e..71b426c4 100644 --- a/examples/router.ts +++ b/examples/router.ts @@ -1,13 +1,11 @@ -import { createApp, createRouter } from "h3"; +import { createH3 } from "../dist/index.mjs"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter() +app .get("/", () => "GET: hello world") .post("/", () => "POST: hello world") .put("/", () => "PUT: hello world") .delete("/", () => "DELETE: hello world") .patch("/", () => "PATCH: hello world") .head("/", () => "HEAD: hello world"); - -app.use(router); diff --git a/examples/server-sent-events.ts b/examples/server-sent-events.ts index 979750cf..f0192487 100644 --- a/examples/server-sent-events.ts +++ b/examples/server-sent-events.ts @@ -1,13 +1,10 @@ -import { createApp, createRouter, eventHandler, createEventStream } from "h3"; +import { createH3, createEventStream, defineEventHandler } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter(); -app.use(router); - -router.get( +app.get( "/", - eventHandler((event) => { + defineEventHandler((event) => { const eventStream = createEventStream(event); // Send a message every second diff --git a/examples/status.ts b/examples/status.ts index 9e6563bc..4b19cfa9 100644 --- a/examples/status.ts +++ b/examples/status.ts @@ -1,25 +1,19 @@ -import { - createApp, - createRouter, - getResponseStatus, - getResponseStatusText, - noContent, - setResponseStatus, -} from "h3"; +import { createH3, noContent } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter() +app .get("/not-found", (event) => { - setResponseStatus(event, 404); + event.response.status = 404; return "Not found"; // You need to explicitly return something to avoid a 404 'Cannot find any path matching "/not-found"' response. }) .get("/bad-request", (event) => { - setResponseStatus(event, 400, "Bad request message"); // You can customize the status message. + const status = 400; + const text = "Bad request message"; - const status = getResponseStatus(event); // You can get the status message. - const text = getResponseStatusText(event); // You can get the status message. + event.response.status = status; + event.response.statusText = text; // You can customize the status message. return { status, @@ -27,8 +21,5 @@ const router = createRouter() }; }) .get("/no-content", (event) => { - // Do not need to explicitly return because `noContent` will cut the connection. return noContent(event); }); - -app.use(router); diff --git a/examples/url-params.ts b/examples/url-params.ts index 5582faeb..2fc85612 100644 --- a/examples/url-params.ts +++ b/examples/url-params.ts @@ -1,8 +1,8 @@ -import { createApp, createRouter, getRouterParam, getRouterParams } from "h3"; +import { createH3, getRouterParam, getRouterParams } from "h3"; -export const app = createApp(); +export const app = createH3(); -const router = createRouter() +app .get("/:name", (event) => { const name = getRouterParam(event, "name"); return `Hello ${name}`; @@ -12,5 +12,3 @@ const router = createRouter() return `Hello ${params.name}, you are ${params.age} years old`; }); - -app.use(router); diff --git a/examples/websocket.ts b/examples/websocket.ts index d350efa9..18844284 100644 --- a/examples/websocket.ts +++ b/examples/websocket.ts @@ -1,6 +1,6 @@ -import { createApp, defineWebSocketHandler } from "h3"; +import { createH3, defineWebSocketHandler } from "h3"; -export const app = createApp(); +export const app = createH3(); app.use(() => fetch( From 3db92736576284b40f095c71d7d46c10f094b3a3 Mon Sep 17 00:00:00 2001 From: Andrey Yolkin Date: Mon, 14 Oct 2024 01:01:01 +0300 Subject: [PATCH 2/3] chore: restore wrongly removed `listenAndWatch` --- examples/index.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/index.mjs b/examples/index.mjs index aeaf4851..53c450d2 100644 --- a/examples/index.mjs +++ b/examples/index.mjs @@ -1,5 +1,5 @@ import { readdir } from "node:fs/promises"; -import { listen, listenAndWatch } from "listhen"; +import { listenAndWatch } from "listhen"; async function promptExample() { const { consola } = await import("consola"); @@ -14,6 +14,6 @@ async function promptExample() { const exampleFile = process.argv[2] || (await promptExample()); -listen(new URL(exampleFile, import.meta.url), { +listenAndWatch(new URL(exampleFile, import.meta.url), { name: `H3 example: ${exampleFile}`, }); From 0016e5bbab4167329c2417feb2b108377b92d474 Mon Sep 17 00:00:00 2001 From: Andrey Yolkin Date: Mon, 14 Oct 2024 01:02:32 +0300 Subject: [PATCH 3/3] chore: update import in router example to use `h3` package instead of local path --- examples/router.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/router.ts b/examples/router.ts index 71b426c4..eceeecfe 100644 --- a/examples/router.ts +++ b/examples/router.ts @@ -1,4 +1,4 @@ -import { createH3 } from "../dist/index.mjs"; +import { createH3 } from "h3"; export const app = createH3();