Skip to content

Commit

Permalink
0.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathantneal
jonathantneal committed Jan 20, 2024
0 parents commit fd01f49
Show file tree
Hide file tree
Showing 23 changed files with 1,171 additions and 0 deletions.
19 changes: 19 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
root = true

[*]
charset = utf-8
end_of_line = lf
indent_style = tab
insert_final_newline = true
trim_trailing_whitespace = true

[*.astro]
insert_final_newline = false

[*.md]
indent_size = 2
indent_style = space

[*.yml]
indent_size = 2
indent_style = space
16 changes: 16 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
# build output
dist/
package-lock.json
*.lock

# dependencies
node_modules/

# logs
*.log*

# environment variables
*.env*

# macOS-specific files
.DS_Store
156 changes: 156 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
# Astro Worker <img src="https://jonneal.dev/astro-logo.svg" alt="" width="90" height="90" align="right">

**Astro Worker** lets you use Web Workers in Astro,
with server-side workers polyfilled by
[web-worker](https://github.com/developit/web-worker).

[![NPM Version][npm-img]][npm-url]
[![NPM Downloads][download-img]][download-url]
[![Open in StackBlitz][stackblitz-img]][stackblitz-url]

```bash
npm install @astropub/worker
```

## Usage

Import **@astropub/worker** in your Astro configuration.

```ts
import worker from "@astropub/worker"
import { defineConfig } from "astro/config"

export default defineConfig({
integrations: [
worker(),
],
})
```

### Creating a Worker

Create a worker in any Astro project.

```astro
---
/** @file /src/scripts/worker.ts */
addEventListener("message", (event) => {
console.log("client said:", event.data)
postMessage(event.data)
})
```

### Using a Worker

Import the worker into Astro frontmatter.

```astro
---
/** @file /src/pages/index.astro */
const worker = new Worker("../scripts/worker.ts", { type: "module" })
worker.addEventListener("message", (event) => {
console.log("worker said:", event.data)
})
worker.postMessage("Hello")
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Example</title>
</head>
<body>
<h1>Example</h1>
</body>
</html>
```

Alternatively, import the worker into a client-side script.

```astro
---
/** @file /src/pages/index.astro */
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Example</title>
</head>
<body>
<h1>Example</h1>
</body>
</html>
<script>
const worker = new Worker("../scripts/worker.ts", { type: "module" })
worker.addEventListener("message", (event) => {
console.log("worker said:", event.data)
})
worker.postMessage("Hello")
</script>
```

## How it works

This integration works by noticing when `Worker` or `SharedWorker` are used in
scripts. If they are, this integration corrects any string references to files.

```js
/* before (does not work in Astro) */
const worker = new Worker('../path/to/worker.js')

/* after (does work in Astro) */
const worker = new Worker(new URL('../path/to/worker.js', import.meta.url))
```
If the integration detects a server-side `Worker` then a polyfill is applied.
```js
---
/* before (does not work in Astro) */
const worker = new Worker('../path/to/worker.js')
---
```
```astro
---
/* after (does work in Astro) */
import "@astropub/worker/polyfill"

const worker = new Worker(new URL('../path/to/worker.js', import.meta.url))
---
```
Enjoy!
---
Code original to this project is licensed under the MIT No Attribution License.
Code from [web-worker](https://github.com/developit/web-worker) is licensed
under the Apache License (Apache-2.0), copyright Jason Miller.
[chat-url]: https://astro.build/chat
[docs-url]: https://github.com/astro-community/worker
[npm-img]: https://img.shields.io/npm/v/@astropub/worker?color=%23444&label=&labelColor=%23CB0000&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE1MCAxNTAgNDAwIDQwMCIgZmlsbD0iI0ZGRiI+PHBhdGggZD0iTTE1MCA1NTBoMjAwVjI1MGgxMDB2MzAwaDEwMFYxNTBIMTUweiIvPjwvc3ZnPg==&style=for-the-badge
[npm-url]: https://www.npmjs.com/package/@astropub/worker
[stackblitz-img]: https://img.shields.io/badge/-Open%20in%20Stackblitz-%231374EF?color=%23444&labelColor=%231374EF&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDggMTIgMTgiIGhlaWdodD0iMTgiIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0xMCAxNy42aDUuMmwtMyA3LjRMMjIgMTQuNGgtNS4ybDMtNy40TDEwIDE3LjZaIi8+PC9zdmc+&style=for-the-badge
[stackblitz-url]: https://stackblitz.com/github/astro-community/worker/tree/main/demo?file=README.md
[bundlejs-img]: https://img.shields.io/bundlejs/size/@astropub%2Fworker?style=for-the-badge
[bundlejs-url]: https://bundlejs.com/?bundle&q=@astropub/worker
[download-url]: https://www.npmjs.com/package/@astropub/worker
[download-img]: https://img.shields.io/badge/dynamic/json?url=https://api.npmjs.org/downloads/point/last-week/@astropub/worker&query=downloads&label=⇓+week&color=%23444&labelColor=%23EEd100&style=for-the-badge
5 changes: 5 additions & 0 deletions demo/.astro/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"devToolbar": {
"enabled": false
}
}
156 changes: 156 additions & 0 deletions demo/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
# Astro Worker <img src="https://jonneal.dev/astro-logo.svg" alt="" width="90" height="90" align="right">

**Astro Worker** lets you use Web Workers in Astro,
with server-side workers polyfilled by
[web-worker](https://github.com/developit/web-worker).

[![NPM Version][npm-img]][npm-url]
[![NPM Downloads][download-img]][download-url]
[![Open in StackBlitz][stackblitz-img]][stackblitz-url]

```bash
npm install @astropub/worker
```

## Usage

Import **@astropub/worker** in your Astro configuration.

```ts
import worker from "@astropub/worker"
import { defineConfig } from "astro/config"

export default defineConfig({
integrations: [
worker(),
],
})
```

### Creating a Worker

Create a worker in any Astro project.

```astro
---
/** @file /src/scripts/worker.ts */
addEventListener("message", (event) => {
console.log("client said:", event.data)
postMessage(event.data)
})
```

### Using a Worker

Import the worker into Astro frontmatter.

```astro
---
/** @file /src/pages/index.astro */
const worker = new Worker("../scripts/worker.ts", { type: "module" })
worker.addEventListener("message", (event) => {
console.log("worker said:", event.data)
})
worker.postMessage("Hello")
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Example</title>
</head>
<body>
<h1>Example</h1>
</body>
</html>
```

Alternatively, import the worker into a client-side script.

```astro
---
/** @file /src/pages/index.astro */
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Example</title>
</head>
<body>
<h1>Example</h1>
</body>
</html>
<script>
const worker = new Worker("../scripts/worker.ts", { type: "module" })
worker.addEventListener("message", (event) => {
console.log("worker said:", event.data)
})
worker.postMessage("Hello")
</script>
```

## How it works

This integration works by noticing when `Worker` or `SharedWorker` are used in
scripts. If they are, this integration corrects any string references to files.

```js
/* before (does not work in Astro) */
const worker = new Worker('../path/to/worker.js')

/* after (does work in Astro) */
const worker = new Worker(new URL('../path/to/worker.js', import.meta.url))
```
If the integration detects a server-side `Worker` then a polyfill is applied.
```js
---
/* before (does not work in Astro) */
const worker = new Worker('../path/to/worker.js')
---
```
```astro
---
/* after (does work in Astro) */
import "@astropub/worker/polyfill"

const worker = new Worker(new URL('../path/to/worker.js', import.meta.url))
---
```
Enjoy!
---
Code original to this project is licensed under the MIT No Attribution License.
Code from [web-worker](https://github.com/developit/web-worker) is licensed
under the Apache License (Apache-2.0), copyright Jason Miller.
[chat-url]: https://astro.build/chat
[docs-url]: https://github.com/astro-community/worker
[npm-img]: https://img.shields.io/npm/v/@astropub/worker?color=%23444&label=&labelColor=%23CB0000&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE1MCAxNTAgNDAwIDQwMCIgZmlsbD0iI0ZGRiI+PHBhdGggZD0iTTE1MCA1NTBoMjAwVjI1MGgxMDB2MzAwaDEwMFYxNTBIMTUweiIvPjwvc3ZnPg==&style=for-the-badge
[npm-url]: https://www.npmjs.com/package/@astropub/worker
[stackblitz-img]: https://img.shields.io/badge/-Open%20in%20Stackblitz-%231374EF?color=%23444&labelColor=%231374EF&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDggMTIgMTgiIGhlaWdodD0iMTgiIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0xMCAxNy42aDUuMmwtMyA3LjRMMjIgMTQuNGgtNS4ybDMtNy40TDEwIDE3LjZaIi8+PC9zdmc+&style=for-the-badge
[stackblitz-url]: https://stackblitz.com/github/astro-community/worker/tree/main/demo?file=README.md
[bundlejs-img]: https://img.shields.io/bundlejs/size/@astropub%2Fworker?style=for-the-badge
[bundlejs-url]: https://bundlejs.com/?bundle&q=@astropub/worker
[download-url]: https://www.npmjs.com/package/@astropub/worker
[download-img]: https://img.shields.io/badge/dynamic/json?url=https://api.npmjs.org/downloads/point/last-week/@astropub/worker&query=downloads&label=⇓+week&color=%23444&labelColor=%23EEd100&style=for-the-badge
8 changes: 8 additions & 0 deletions demo/astro.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import worker from '@astropub/worker'
import { defineConfig } from 'astro/config'

export default defineConfig({
integrations: [
worker(),
],
})
15 changes: 15 additions & 0 deletions demo/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "@astropub/worker.demo",
"private": true,
"type": "module",
"scripts": {
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"devDependencies": {
"@astropub/worker": "*",
"astro": "4"
}
}
13 changes: 13 additions & 0 deletions demo/public/favicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions demo/src/env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />
Loading

0 comments on commit fd01f49

Please sign in to comment.