chore: update build setup

index.ts

@@ -0,0 +1,12 @@
+/*
+ * youch
+ *
+ * (c) Poppinss
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export { Youch } from './src/youch.js'
+export { Metadata } from './src/metadata.js'
+export { BaseComponent } from './src/component.js'

package.json

@@ -1,19 +1,22 @@
 {
   "name": "youch",
-  "description": "",
-  "version": "",
+  "description": "Pretty print JavaScript errors on the Web and the Terminal",
+  "version": "3.3.4",
   "engines": {
     "node": ">=20.6.0"
   },
   "type": "module",
   "files": [
     "build",
     "!build/bin",
+    "!build/example",
     "!build/tests"
   ],
   "main": "build/index.js",
   "exports": {
-    ".": "./build/index.js"
+    ".": "./build/index.js",
+    "./types": "./build/src/types.js",
+    "./templates/*": "./build/templates/*"
   },
   "scripts": {
     "pretest": "npm run lint",
@@ -22,8 +25,9 @@
     "format": "prettier --write .",
     "typecheck": "tsc --noEmit",
     "precompile": "npm run lint",
+    "copy:assets": "copyfiles --up=1 src/public/**/* build",
     "compile": "tsup-node && tsc --emitDeclarationOnly --declaration",
-    "build": "npm run compile",
+    "build": "npm run compile && npm run copy:assets",
     "version": "npm run build",
     "prepublishOnly": "npm run build",
     "release": "release-it",
@@ -50,6 +54,7 @@
     "axios": "^1.7.7",
     "c8": "^10.1.2",
     "cookie": "^1.0.1",
+    "copyfiles": "^2.4.1",
     "eslint": "^9.14.0",
     "flydrive": "^1.1.0",
     "jsdom": "^25.0.1",
@@ -77,13 +82,15 @@
   },
   "tsup": {
     "entry": [
-      "index.ts"
+      "index.ts",
+      "src/types.ts",
+      "src/templates/**/*.ts"
     ],
     "outDir": "./build",
     "clean": true,
     "format": "esm",
     "dts": false,
-    "sourcemap": true,
+    "sourcemap": false,
     "target": "esnext"
   },
   "release-it": {

src/public_dir.ts

@@ -0,0 +1,10 @@
+/*
+ * youch
+ *
+ * (c) Poppinss
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export const publicDirURL = new URL('./public/', import.meta.url)

src/templates.ts

@@ -12,35 +12,14 @@ import { createScript, createStyleSheet } from '@poppinss/dumper/html'
 
 import { Metadata } from './metadata.js'
 import { BaseComponent } from './component.js'
+import type { YouchTemplates } from './types.js'
 import { Header } from './templates/header/main.js'
 import { Layout } from './templates/layout/main.js'
-import { ErrorInfo } from './templates/error-info/main.js'
-import { ErrorCause } from './templates/error-cause/main.js'
-import { ErrorStack } from './templates/error-stack/main.js'
+import { ErrorInfo } from './templates/error_info/main.js'
+import { ErrorCause } from './templates/error_cause/main.js'
+import { ErrorStack } from './templates/error_stack/main.js'
 import { ErrorMetadata } from './templates/error_metadata/main.js'
-import { ErrorStackSource } from './templates/error-stack-source/main.js'
-import type {
-  LayoutProps,
-  ErrorInfoProps,
-  ErrorCauseProps,
-  ErrorStackProps,
-  ErrorMetadataProps,
-  ErrorStackSourceProps,
-} from './types.js'
-
-/**
- * Collection of known templates. Only these templates can be
- * rendered using the Templates collection
- */
-export type KnownTemplates = {
-  header: BaseComponent
-  layout: BaseComponent<LayoutProps>
-  errorInfo: BaseComponent<ErrorInfoProps>
-  errorStack: BaseComponent<ErrorStackProps>
-  errorStackSource: BaseComponent<ErrorStackSourceProps>
-  errorCause: BaseComponent<ErrorCauseProps>
-  errorMetadata: BaseComponent<ErrorMetadataProps>
-}
+import { ErrorStackSource } from './templates/error_stack_source/main.js'
 
 /**
  * A super lightweight templates collection that allows composing
@@ -66,7 +45,7 @@ export type KnownTemplates = {
  * ```
  */
 export class Templates {
-  #knownTemplates: KnownTemplates
+  #knownTemplates: YouchTemplates
   #styles: Map<string, string> = new Map([['global', createStyleSheet()]])
   #scripts: Map<string, string> = new Map([['global', createScript()]])
 
@@ -114,7 +93,7 @@ export class Templates {
    * Collects styles and scripts for components as we render
    * them.
    */
-  async #collectStylesAndScripts(templateName: keyof KnownTemplates) {
+  async #collectStylesAndScripts(templateName: keyof YouchTemplates) {
     /**
      * Collect styles only once for a given template
      */
@@ -139,9 +118,9 @@ export class Templates {
   /**
    * Renders a known template by its name
    */
-  async #renderTmpl<K extends keyof KnownTemplates>(
+  async #renderTmpl<K extends keyof YouchTemplates>(
     templateName: K,
-    props: KnownTemplates[K]['$props']
+    props: YouchTemplates[K]['$props']
   ): Promise<string> {
     const component: BaseComponent<any> = this.#knownTemplates[templateName]
     if (!component) {
@@ -157,7 +136,7 @@ export class Templates {
    * Overriding components allows you control the HTML layout, styles and
    * the frontend scripts of an HTML fragment.
    */
-  use<K extends keyof KnownTemplates>(templateName: K, component: KnownTemplates[K]): this {
+  use<K extends keyof YouchTemplates>(templateName: K, component: YouchTemplates[K]): this {
     this.#knownTemplates[templateName] = component
     return this
   }

src/templates/error-cause/main.ts → src/templates/error_cause/main.ts

@@ -10,13 +10,14 @@
 import { dump, themes } from '@poppinss/dumper/html'
 
 import { BaseComponent } from '../../component.js'
+import { publicDirURL } from '../../public_dir.js'
 import type { ErrorCauseProps } from '../../types.js'
 
 /**
  * Displays the Error cause as a formatted value
  */
 export class ErrorCause extends BaseComponent<ErrorCauseProps> {
-  cssFile = new URL('./style.css', import.meta.url)
+  cssFile = new URL('./error_cause/style.css', publicDirURL)
 
   async render(props: ErrorCause['$props']): Promise<string> {
     if (!props.error.cause) {

src/templates/error-info/main.ts → src/templates/error_info/main.ts

@@ -8,6 +8,7 @@
  */
 
 import { BaseComponent } from '../../component.js'
+import { publicDirURL } from '../../public_dir.js'
 import type { ErrorInfoProps } from '../../types.js'
 
 const ERROR_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="24" height="24" fill="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 7v6m0 4.01.01-.011M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Z"/></svg>`
@@ -19,7 +20,7 @@ const HINT_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true
  * error name, error message and the hint.
  */
 export class ErrorInfo extends BaseComponent<ErrorInfoProps> {
-  cssFile = new URL('./style.css', import.meta.url)
+  cssFile = new URL('./error_info/style.css', publicDirURL)
 
   async render(props: ErrorInfoProps): Promise<string> {
     return `<section>

src/templates/error_metadata/main.ts

@@ -10,7 +10,7 @@
 import { dump, themes } from '@poppinss/dumper/html'
 
 import { BaseComponent } from '../../component.js'
-import { ErrorMetadataProps, ErrorMetadataRow } from '../../types.js'
+import type { ErrorMetadataProps, ErrorMetadataRow } from '../../types.js'
 
 /**
  * Displays the error metadata as cards

src/templates/error-stack/main.ts → src/templates/error_stack/main.ts

@@ -8,10 +8,11 @@
  */
 
 import { dump, themes } from '@poppinss/dumper/html'
-import type { ParsedError, StackFrame } from 'youch-core/types'
+import type { StackFrame } from 'youch-core/types'
 
 import { BaseComponent } from '../../component.js'
-import { ErrorStackProps } from '../../types.js'
+import { publicDirURL } from '../../public_dir.js'
+import type { ErrorStackProps } from '../../types.js'
 
 /**
  * Known editors and their URLs to open the file within
@@ -32,8 +33,8 @@ const EDITORS: Record<string, string> = {
  * source code for individual stack frames
  */
 export class ErrorStack extends BaseComponent<ErrorStackProps> {
-  cssFile = new URL('./style.css', import.meta.url)
-  scriptFile = new URL('./script.js', import.meta.url)
+  cssFile = new URL('./error_stack/style.css', publicDirURL)
+  scriptFile = new URL('./error_stack/script.js', publicDirURL)
 
   /**
    * Light weight HTML escape helper

src/templates/error-stack-source/main.ts → src/templates/error_stack_source/main.ts

@@ -11,6 +11,7 @@ import { extname } from 'node:path'
 import { highlightText, type ShjLanguage } from '@speed-highlight/core'
 
 import { BaseComponent } from '../../component.js'
+import { publicDirURL } from '../../public_dir.js'
 import type { ErrorStackSourceProps } from '../../types.js'
 
 /**
@@ -34,7 +35,7 @@ const LANGS_MAP: Record<string, ShjLanguage> = {
  * highlighting.
  */
 export class ErrorStackSource extends BaseComponent<ErrorStackSourceProps> {
-  cssFile = new URL('./style.css', import.meta.url)
+  cssFile = new URL('./error_stack_source/style.css', publicDirURL)
 
   async render(props: ErrorStackSourceProps): Promise<string> {
     const frame = props.frame

src/templates/header/main.ts

@@ -8,6 +8,7 @@
  */
 
 import { BaseComponent } from '../../component.js'
+import { publicDirURL } from '../../public_dir.js'
 
 const DARK_MODE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0h24v24H0z" stroke="none"/><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"/></svg>`
 
@@ -18,8 +19,8 @@ const LIGHT_MODE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="tru
  * theme-switcher for now
  */
 export class Header extends BaseComponent {
-  cssFile = new URL('./style.css', import.meta.url)
-  scriptFile = new URL('./script.js', import.meta.url)
+  cssFile = new URL('./header/style.css', publicDirURL)
+  scriptFile = new URL('./header/script.js', publicDirURL)
 
   async render(): Promise<string> {
     return `<header id="header">

src/templates/layout/main.ts

@@ -8,6 +8,7 @@
  */
 
 import { BaseComponent } from '../../component.js'
+import { publicDirURL } from '../../public_dir.js'
 import type { LayoutProps } from '../../types.js'
 
 /**
@@ -18,8 +19,8 @@ import type { LayoutProps } from '../../types.js'
  * structure or the CSS variables for the colors.
  */
 export class Layout extends BaseComponent<LayoutProps> {
-  cssFile = new URL('./style.css', import.meta.url)
-  scriptFile = new URL('./script.js', import.meta.url)
+  cssFile = new URL('./layout/style.css', publicDirURL)
+  scriptFile = new URL('./layout/script.js', publicDirURL)
 
   async render(props: LayoutProps): Promise<string> {
     return `<!DOCTYPE html>

src/types.ts

@@ -9,6 +9,7 @@
 
 import type { ParsedError, StackFrame } from 'youch-core/types'
 import type { Metadata } from './metadata.js'
+import type { BaseComponent } from './component.js'
 
 export * from 'youch-core/types'
 
@@ -119,3 +120,17 @@ export type YouchOptions = {
    */
   ide?: string
 }
+
+/**
+ * Collection of known templates. Only these templates can be
+ * rendered using the Templates collection
+ */
+export type YouchTemplates = {
+  header: BaseComponent
+  layout: BaseComponent<LayoutProps>
+  errorInfo: BaseComponent<ErrorInfoProps>
+  errorStack: BaseComponent<ErrorStackProps>
+  errorStackSource: BaseComponent<ErrorStackSourceProps>
+  errorCause: BaseComponent<ErrorCauseProps>
+  errorMetadata: BaseComponent<ErrorMetadataProps>
+}