# svelte-browserify-wrapper

> Wrap every bundled Svelte component in a single function.

Latest version **1.0.0** (published 2017-05-23) · VOL license · 0 weekly downloads

## Install

```sh
npm install svelte-browserify-wrapper
pnpm add svelte-browserify-wrapper
yarn add svelte-browserify-wrapper
bun add svelte-browserify-wrapper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-05-23 |
| First published | 2017-05-23 |
| Weekly downloads | 0 |
| License | VOL |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | saibotsivad |
| Maintainers | saibotsivad |
| Keywords | svelte, browserify |

## Links

- npm: https://www.npmjs.com/package/svelte-browserify-wrapper
- Repository: https://github.com/saibotsivad/svelte-browserify-wrapper
- Homepage: https://github.com/saibotsivad/svelte-browserify-wrapper#readme
- Issues: https://github.com/saibotsivad/svelte-browserify-wrapper/issues
- npm.io page: https://npm.io/package/svelte-browserify-wrapper

## Dependencies (2)

- [through2](https://npm.io/package/through2.md) ^2.0.3
- [magic-string](https://npm.io/package/magic-string.md) ^0.20.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-05-23

## README

# svelte-browserify-wrapper

Wrap every bundled Svelte component in a single function.

## install

The usual way:

```
npm install svelte-browserify-wrapper
```

## what it does

Normally, with [sveltify](https://github.com/TehShrike/sveltify) at least,
as part of the browserify build each Svelte component is compiled into
something that looks like this:

```js
function MyComponent() {
	// ... code
}
// ... more code
module.exports = MyComponent;
```

This module is a browserify transform which, given a filename
of `./component-wrapper.js`, will change all those
`module.exports` lines into this:

```js
module.exports = require('./component-wrapper.js')(MyComponent);
```

## what's the point?

In your web app you want to use something cool like the
[mediator](https://github.com/TehShrike/mannish) pattern
to decouple your components from your services, but in
order for that pattern to be really useful you need to
have a singleton property available to all your components

You know that importing a global into your component is a
bad idea, but what are you supposed to do?!

Use this browserify transform as part of your build!

* Components are written as though there is a mediator method available.
* Tests mock that mediator, so they are testable without accessing singletons.
* The browserify bundle creates a singleton mediator, which the components use.

## bigger example

Write your components assuming there will be a method available:

```html
<!-- MyComponent.html-->
<button on:click="load()">Load Data</button>
<p>{{data}}</p>
<script>
export default {
	methods: {
		load() {
			return this.mediatorCall('load').then(data => this.set({ data }))
		}
	}
}
</script>
```

In your tests, you would simply mock out the `mediatorCall`:

```js
const MyComponent = require('./MyComponent.html')
const component = new MyComponent()
// create mock
component.mediatorCall = (key, ...args) => {
	assert(key === 'load') // => true
	return Promise.resolve('yolo')
}
// run test
component.load().then(() => {
	assert(component.get('data') === 'yolo') // => true
})
```

But in your build you would create a wrapper file:

```js
// ./wrap-component.js
const mediator = require('./singleton-mediator.js')

module.exports = function wrapComponent(componentConstructor) {
	return function proxyConstructor(options) {
		const component = new componentConstructor(options)
		component.mediatorCall = mediator.call
		return component
	}
}
```

And the singleton mediator:

```js
// ./singleton-mediator.js
const createMediator = require('mannish')
const mediator = createMediator()
module.exports = mediator
```

## setup in browserify

It's a browserify transform, so either in your `package.json`:

```json
"browserify": {
  "transform": [
	[ "sveltify" ],
	[
	  "svelte-browserify-wrapper",
	  {
		"filename": "./wrap-component.js"
	  }
	]
  ]
}
```

Or in your build file:

```js
const browserify = require('browserify')
const sveltify = require('sveltify')
const wrapper = require('svelte-browserify-wrapper')

const b = browserify()

b.transform(sveltify)
b.transform(wrapper, { filename: './wrap-component.js' })
```

## run the included example

In this repo the folder `/example` contains an example so you
can see how it all works together.

Open a terminal in the `/example` directory and run `npm run build`,
after which `npm run start`, and then open your browser to

http://localhost:3000

When you click the button, it will use the mediator to load
data within the Svelte component!

## license

Published and released under the [VOL](http://veryopenlicense.com).

---
_Source: https://npm.io/package/svelte-browserify-wrapper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._