feat: finialize for first beta release

.github/workflows/release.yml

@@ -25,7 +25,7 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: npm install
-      - run: npm run release -- --ci
+      - run: npm run release major -- --ci --preRelease=beta
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -76,7 +76,12 @@ Let's de-construct the error page and understand what each section of the web pa
 
 ### Error info
 
-![](./assets/error-info.png)
+<details>
+  <summary>View image</summary>
+
+  ![](./assets/error-info.png)
+
+</details>
 
 The top-most section displays the Error info, which includes:
 
@@ -88,21 +93,38 @@ See: [How to override the Error info template]()
 
 ### Stack trace
 
+<details>
+  <summary>View image</summary>
+
+  ![](./assets/error-stack.png)
+
+</details>
+
 The Stack trace section displays individual frames as accordion sections and clicking on the section title will reveal the frame source code. The soure code is not available for native stack frames that are part of the Node.js, Deno, and Bun internals.
 
-![](./assets/error-stack.png)
+### Raw output
+
+<details>
+  <summary>View image</summary>
+
+  ![](./assets/stack-raw-output.png)
+
+</details>
 
 Clicking the `Raw` button displays the Error object in its raw form with all the error properties (and not just the stack trace).
 
 You might find the raw output helpful for errors that contains additional properties. For example: HTTP client libraries like Axios, Got, Undici and others usually contain the HTTP response details within the error object.
 
-![](./assets/stack-raw-output.png)
-
 ### Error cause
 
-[Error cause](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause) is a standard way to bubble errors while wrapping them within a generic error. Youch displays the error cause as an interactive property within its own section.
+<details>
+  <summary>View image</summary>
+
+  ![](./assets/error-cause.png)
+
+</details>
 
-![](./assets/error-cause.png)
+[Error cause](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause) is a standard way to bubble errors while wrapping them within a generic error. Youch displays the error cause as an interactive property within its own section.
 
 ### Metadata
 
@@ -133,31 +155,54 @@ Calling the `youch.group` method multiple times with the same group name will me
 
 ## Using a custom source code loader
 
-The Error info is displayed using the [ErrorInfo](https://github.com/poppinss/youch/blob/4.x/src/templates/error-info/main.ts) component and you can override it with a custom component as follows.
+Youch reads the source code of files within the stacktrace using the Node.js `fs` module. However, you can override this default and provide a custom source loader using the `youch.sourceLoader` method.
 
-```ts
-import { BaseComponent } from 'youch/component'
-import { ErrorInfoProps } from 'youch/types'
+> Note: The `sourceLoader` is called for every frame within the stack traces. Therefore you must perform the needed checks before attempting to read the source code of a file.
+>
+> For example, you must not attempt to read the source code for fileNames pointing to native code.
 
-class MyErrorInfo extends BaseComponent<ErrorInfoProps> {
-  render() {}
-}
+```ts
+import { Youch } from 'youch'
+const youch = new Youch(options)
 
-const youch = new Youch({ title: 'Something went wrong' })
-youch.use('errorInfo', new MyErrorInfo())
+youch.sourceLoader(async (stackFrame) => {
+  if (stackFrame.type !== 'native') {
+    stackFrame.source = await getSourceForFile(stackFrame.fileName)
+  }
+})
 ```
 
 ## Injecting custom styles
 
-## Attaching metadata
+You may inject custom CSS styles using the `youch.injectStyles` method. The styles will be injected after the styles from the inbuilt templates.
+
+```ts
+import { Youch } from 'youch'
+const youch = new Youch(options)
+
+youch.injectStyles(`
+  :root {
+    // Override variables for light mode
+    --surface-bg: #fff;
+    --surface-fg: #000;
+    --muted-fg: #999;
+  }
+
+  html.dark {
+    // Override variables for dark mode
+  }
+`)
+```
 
 ## Overriding syntax highlighter
 
-## Overriding templates
+Youch uses the [speed-highlight](https://github.com/speed-highlight/core), which is lightweight code highlighting library for JavaScript. If you like you override the syntax highlighter, you can do so by registering a custom component for the `errorStackSource` template.
 
-## Pre-parsing errors
+In the following example, we use [Shiki](https://shiki.matsu.io/) to perform syntax highlighting using a custom component.
 
-## Transforming parser error
+```ts
+
+```
 
 ## Contributing
 

example/axios.ts

@@ -0,0 +1,4 @@
+import axios from 'axios'
+export async function run() {
+  await axios('http://localhost:8000')
+}

example/flydrive.ts

@@ -21,6 +21,6 @@ const disk = new Disk(
   })
 )
 
-export function readFile() {
-  return disk.get('some-file-name')
+export async function run() {
+  await disk.get('some-file-name')
 }

example/http_statuses.ts

@@ -0,0 +1,234 @@
+export const HTTP_STATUSES = [
+  {
+    code: 202,
+    pharse: 'Accepted',
+  },
+  {
+    code: 502,
+    pharse: 'Bad Gateway',
+  },
+  {
+    code: 400,
+    pharse: 'Bad Request',
+  },
+  {
+    code: 409,
+    pharse: 'Conflict',
+  },
+  {
+    code: 100,
+    pharse: 'Continue',
+  },
+  {
+    code: 201,
+    pharse: 'Created',
+  },
+  {
+    code: 417,
+    pharse: 'Expectation Failed',
+  },
+  {
+    code: 424,
+    pharse: 'Failed Dependency',
+  },
+  {
+    code: 403,
+    pharse: 'Forbidden',
+  },
+  {
+    code: 504,
+    pharse: 'Gateway Timeout',
+  },
+  {
+    code: 410,
+    pharse: 'Gone',
+  },
+  {
+    code: 505,
+    pharse: 'HTTP Version Not Supported',
+  },
+  {
+    code: 418,
+    pharse: "I'm a teapot",
+  },
+  {
+    code: 419,
+    pharse: 'Insufficient Space on Resource',
+  },
+  {
+    code: 507,
+    pharse: 'Insufficient Storage',
+  },
+  {
+    code: 500,
+    pharse: 'Internal Server Error',
+  },
+  {
+    code: 411,
+    pharse: 'Length Required',
+  },
+  {
+    code: 423,
+    pharse: 'Locked',
+  },
+  {
+    code: 420,
+    pharse: 'Method Failure',
+  },
+  {
+    code: 405,
+    pharse: 'Method Not Allowed',
+  },
+  {
+    code: 301,
+    pharse: 'Moved Permanently',
+  },
+  {
+    code: 302,
+    pharse: 'Moved Temporarily',
+  },
+  {
+    code: 207,
+    pharse: 'Multi-Status',
+  },
+  {
+    code: 300,
+    pharse: 'Multiple Choices',
+  },
+  {
+    code: 511,
+    pharse: 'Network Authentication Required',
+  },
+  {
+    code: 204,
+    pharse: 'No Content',
+  },
+  {
+    code: 203,
+    pharse: 'Non Authoritative Information',
+  },
+  {
+    code: 406,
+    pharse: 'Not Acceptable',
+  },
+  {
+    code: 404,
+    pharse: 'Not Found',
+  },
+  {
+    code: 501,
+    pharse: 'Not Implemented',
+  },
+  {
+    code: 304,
+    pharse: 'Not Modified',
+  },
+  {
+    code: 200,
+    pharse: 'OK',
+  },
+  {
+    code: 206,
+    pharse: 'Partial Content',
+  },
+  {
+    code: 402,
+    pharse: 'Payment Required',
+  },
+  {
+    code: 308,
+    pharse: 'Permanent Redirect',
+  },
+  {
+    code: 412,
+    pharse: 'Precondition Failed',
+  },
+  {
+    code: 428,
+    pharse: 'Precondition Required',
+  },
+  {
+    code: 102,
+    pharse: 'Processing',
+  },
+  {
+    code: 103,
+    pharse: 'Early Hints',
+  },
+  {
+    code: 426,
+    pharse: 'Upgrade Required',
+  },
+  {
+    code: 407,
+    pharse: 'Proxy Authentication Required',
+  },
+  {
+    code: 431,
+    pharse: 'Request Header Fields Too Large',
+  },
+  {
+    code: 408,
+    pharse: 'Request Timeout',
+  },
+  {
+    code: 413,
+    pharse: 'Request Entity Too Large',
+  },
+  {
+    code: 414,
+    pharse: 'Request-URI Too Long',
+  },
+  {
+    code: 416,
+    pharse: 'Requested Range Not Satisfiable',
+  },
+  {
+    code: 205,
+    pharse: 'Reset Content',
+  },
+  {
+    code: 303,
+    pharse: 'See Other',
+  },
+  {
+    code: 503,
+    pharse: 'Service Unavailable',
+  },
+  {
+    code: 101,
+    pharse: 'Switching Protocols',
+  },
+  {
+    code: 307,
+    pharse: 'Temporary Redirect',
+  },
+  {
+    code: 429,
+    pharse: 'Too Many Requests',
+  },
+  {
+    code: 401,
+    pharse: 'Unauthorized',
+  },
+  {
+    code: 451,
+    pharse: 'Unavailable For Legal Reasons',
+  },
+  {
+    code: 422,
+    pharse: 'Unprocessable Entity',
+  },
+  {
+    code: 415,
+    pharse: 'Unsupported Media Type',
+  },
+  {
+    code: 305,
+    pharse: 'Use Proxy',
+  },
+  {
+    code: 421,
+    pharse: 'Misdirected Request',
+  },
+]