docs: add initial examples

.eslintrc

@@ -1,8 +1,11 @@
 {
-  "extends": ["eslint-config-unjs"],
+  "extends": [
+    "eslint-config-unjs"
+  ],
   "rules": {
     "no-undef": 0,
     "unicorn/consistent-destructuring": 0,
-    "unicorn/no-await-expression-member": 0
+    "unicorn/no-await-expression-member": 0,
+    "unicorn/prefer-top-level-await": 0
   }
 }

examples/README.md

@@ -0,0 +1,5 @@
+# ofetch examples
+
+In this directory you can find some examples of how to use ofetch.
+
+To learn more, you can read the [ofetch first hand tutorial on unjs.io](https://unjs.io/resources/learn/ofetch-101-firs-hand).

examples/body.ts

@@ -0,0 +1,15 @@
+import { $fetch } from "ofetch";
+
+async function main() {
+  const response = await $fetch<string>("https://api.github.com/markdown", {
+    method: "POST",
+    // To provide a body, we need to use the `body` option and just use an object.
+    body: {
+      text: "UnJS is **awesome**!\n\nCheck out their [website](https://unjs.io).",
+    },
+  }); // Be careful, we use the GitHub API.
+
+  console.log(response);
+}
+
+main().catch(console.error);

examples/error-handling.ts

@@ -0,0 +1,13 @@
+import { $fetch } from "ofetch";
+
+async function main() {
+  try {
+    await $fetch("https://api.github.com", {
+      method: "POST",
+    });
+  } catch (error) {
+    console.log(error.data); // This allow us to get the error body.
+  }
+}
+
+main().catch(console.error);

examples/first-request.ts

@@ -0,0 +1,9 @@
+import { $fetch } from "ofetch";
+
+async function main() {
+  const data = await $fetch("https://ungh.cc/repos/unjs/ofetch");
+
+  console.log(data);
+}
+
+main().catch(console.error);

examples/headers.ts

@@ -0,0 +1,23 @@
+import { $fetch } from "ofetch";
+
+async function main() {
+  const response = await $fetch("https://api.github.com/gists", {
+    method: "POST",
+    headers: {
+      Authorization: `token ${process.env.GH_TOKEN}`,
+    },
+    body: {
+      description: "This is a gist created by ofetch.",
+      public: true,
+      files: {
+        "unjs.txt": {
+          content: "UnJS is awesome!",
+        },
+      },
+    },
+  }); // Be careful, we use the GitHub API directly.
+
+  console.log(response.url);
+}
+
+main().catch(console.error);

examples/methods.ts

@@ -0,0 +1,11 @@
+import { $fetch } from "ofetch";
+
+async function main() {
+  const response = await $fetch("https://api.github.com/gists", {
+    method: "POST",
+  }); // Be careful, we use the GitHub API directly.
+
+  console.log(response);
+}
+
+main().catch(console.error);

examples/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "examples",
+  "dependencies": {
+    "jiti": "^1.19.3",
+    "ofetch": "workspace:../src"
+  }
+}

examples/query-string.ts

@@ -0,0 +1,16 @@
+import { $fetch } from "ofetch";
+
+async function main() {
+  const response = await $fetch(
+    "https://api.github.com/repos/unjs/ofetch/tags",
+    {
+      query: {
+        per_page: 2,
+      },
+    }
+  ); // Be careful, we use the GitHub API directly.
+
+  console.log(response);
+}
+
+main().catch(console.error);

examples/type-safety.ts

@@ -0,0 +1,19 @@
+import { $fetch } from "ofetch";
+
+interface Repo {
+  id: number;
+  name: string;
+  repo: string;
+  description: string;
+  stars: number;
+}
+
+async function main() {
+  const { repo } = await $fetch<{ repo: Repo }>(
+    "https://ungh.cc/repos/unjs/ofetch"
+  );
+
+  console.log(`The repo ${repo.name} has ${repo.stars} stars.`); // The repo object is now strongly typed.
+}
+
+main().catch(console.error);

package.json

@@ -62,8 +62,8 @@
   "scripts": {
     "build": "unbuild",
     "dev": "vitest",
-    "lint": "eslint --ext .ts . && prettier -c src test playground",
-    "lint:fix": "eslint --fix --ext .ts . && prettier -w src test playground",
+    "lint": "eslint --ext .ts . && prettier -c src test playground examples",
+    "lint:fix": "eslint --fix --ext .ts . && prettier -w src test playground examples",
     "prepack": "pnpm build",
     "play": "jiti playground/index.ts",
     "release": "pnpm test && changelogen --release && npm publish && git push --follow-tags",
@@ -92,4 +92,4 @@
     "vitest": "^0.34.3"
   },
   "packageManager": "[email protected]"
-}
+}

playground/index.ts

@@ -1,4 +1,4 @@
-import { $fetch } from "../src/node";
+import { $fetch } from "ofetch";
 
 async function main() {
   // const r = await $fetch<string>('http://google.com/404')

playground/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "playground",
+  "dependencies": {
+    "ofetch": "workspace:../src"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - "src"
+  - "playground"
+  - "examples"