Do v0

Author: denisstasyev

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+max_line_length = 100
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{json,yaml,yml}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,9 @@
+# IDE's
+.vscode
+
+# Project
+node_modules
+dist
+.npmrc
+
+.DS_Store

.prettierrc.yml

@@ -0,0 +1,18 @@
+arrowParens: avoid
+useTabs: true
+tabWidth: 4
+singleQuote: true
+semi: false
+printWidth: 100
+trailingComma: all
+overrides:
+  - files:
+      - '*.md'
+      - '*.json'
+      - '*.yaml'
+      - '*.yml'
+    options:
+      useTabs: false
+      tabWidth: 2
+svelteSortOrder: scripts-markup-styles
+svelteBracketNewLine: true

README.md

@@ -1,2 +1,51 @@
 # svelte-error-boundary
+
+[![NPM version](https://img.shields.io/npm/v/svelte-error-boundary.svg?style=flat)](https://www.npmjs.com/package/svelte-error-boundary) [![NPM downloads](https://img.shields.io/npm/dm/svelte-error-boundary.svg?style=flat)](https://www.npmjs.com/package/svelte-error-boundary) [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)
+
 Fix error boundary Svelte 3 problem to prevent full app crash
+
+## :cake: Features
+
+Right now Svelte 3 has no built-in error handling in components out of the box. To solve this issue this package was created inspired by [this thread](https://github.com/sveltejs/svelte/issues/3733).
+
+- Simply applies Javascript `try...catch` statement to child components :lock:
+- Easy to use (as traditional component)
+
+## Install
+
+```bash
+npm i svelte-error-boundary
+```
+
+## Usage
+
+```html
+<script>
+  import ErrorBoundary from 'svelte-error-boundary'
+
+  ...
+</script>
+
+<ErrorBoundary name="custom try catch">
+  <BrokenComponent />
+</ErrorBoundary>
+```
+
+## API
+
+### Parameters
+
+| Name        | Type     | Default     | Description                 |
+| ----------- | -------- | ----------- | --------------------------- |
+| name        | string   | `undefined` | Custom name for error scope |
+| handleError | function | `undefined` | Function to handle error    |
+
+Function `handleError(error, name)` can be used to send error logs to server and so on.
+
+Note that this component does not support SSR (`svelte.compile` with option: `generate: 'ssr'`) and does not support hydration (`svelte.compile` with option: `hydratable: true`).
+
+Please use this `ErrorBoundary` component directly over the `BrokenComponent`, otherwise errors may appear outside. You can manually test the `ErrorBoundary` component by inserting `throw new Error('test')` inside your component.
+
+## License
+
+MIT &copy; [Denis Stasyev](https://github.com/denisstasyev)

package-lock.json

@@ -0,0 +1,38 @@
+{
+  "name": "svelte-error-boundary",
+  "version": "1.0.1",
+  "description": "Fix error boundary Svelte 3 problem to prevent full app crash",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "files": [
+    "dist/*"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "format": "prettier --write 'src/**/*'",
+    "prepublishOnly": "npm run format & npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/denisstasyev/svelte-error-boundary.git"
+  },
+  "keywords": [
+    "svelte",
+    "error",
+    "boundary"
+  ],
+  "author": "Denis Stasyev",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/denisstasyev/svelte-error-boundary/issues"
+  },
+  "homepage": "https://github.com/denisstasyev/svelte-error-boundary#readme",
+  "devDependencies": {
+    "prettier": "latest",
+    "prettier-plugin-svelte": "latest",
+    "rollup": "latest",
+    "rollup-plugin-node-resolve": "latest",
+    "rollup-plugin-svelte": "latest",
+    "svelte": "latest"
+  }
+}

package.json

@@ -0,0 +1,18 @@
+import svelte from 'rollup-plugin-svelte'
+import resolve from 'rollup-plugin-node-resolve'
+
+import pkg from './package.json'
+
+const name = pkg.name
+	.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
+	.replace(/^\w/, m => m.toUpperCase())
+	.replace(/-\w/g, m => m[1].toUpperCase())
+
+export default {
+	input: 'src/index.js',
+	output: [
+		{ file: pkg.module, format: 'es' },
+		{ file: pkg.main, format: 'umd', name },
+	],
+	plugins: [svelte(), resolve()],
+}

rollup.config.js

@@ -0,0 +1 @@
+<slot />

src/ErrorBoundary.svelte

@@ -0,0 +1,19 @@
+import ErrorBoundary from './ErrorBoundary.svelte'
+
+export default class errorBoundary extends ErrorBoundary {
+	constructor(config) {
+		config.props.$$slots.default = config.props.$$slots.default.map(x => (...args) => {
+			try {
+				return x(...args)
+			} catch (error) {
+				if (config.props.handleError) {
+					config.props.handleError(error, config.props.name)
+				}
+				console.log(`ERROR${config.props.name ? ` (${config.props.name})` : ''}: `, error)
+				return null
+			}
+		})
+
+		super(config)
+	}
+}