### Run Basic Example with Bun
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Executes the basic example application using the Bun runtime. This is a common way to test and demonstrate the functionality of the WebView-Bun project. Ensure you have Bun installed and the project dependencies set up.
```bash
bun run examples/basic.ts
```
--------------------------------
### Install webview-bun using Bun
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
This command installs the webview-bun package using the Bun package manager. Ensure Bun is installed on your system.
```bash
bun i webview-bun
```
--------------------------------
### Install development dependencies on macOS
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Installs necessary development tools for building webview-bun on macOS using Homebrew. This includes CMake, Ninja, and Clang.
```bash
brew install cmake ninja clang
```
--------------------------------
### Basic webview application with Bun
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Demonstrates a simple webview application using the webview-bun library. It creates a webview window, sets its HTML content, and runs the application. This requires the webview-bun package to be installed.
```typescript
import { Webview } from "webview-bun";
const html = `
Hello from bun v${Bun.version} !
`;
const webview = new Webview();
webview.setHTML(html);
webview.run();
```
--------------------------------
### Install development dependencies on Linux
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Installs necessary development libraries for building webview-bun on Debian-based Linux systems. This includes GTK 4, WebKitGTK 6 development files, CMake, Ninja, and Clang.
```bash
sudo apt install libgtk-4-dev libwebkitgtk-6.0-dev cmake ninja-build clang
```
--------------------------------
### Install development dependencies on Fedora
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Installs necessary development libraries for building webview-bun on Fedora Linux systems. This includes GTK 4 development files, WebKitGTK 6 development files, CMake, Ninja, and Clang.
```bash
sudo dnf install gtk4-devel webkitgtk6.0-devel cmake ninja-build clang
```
--------------------------------
### Install development dependencies on Arch Linux
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Installs necessary development tools for building webview-bun on Arch Linux systems. This includes CMake, Ninja, and Clang. GTK 4 and WebKitGTK 6 are typically available through the package manager.
```bash
sudo pacman -S cmake ninja clang
```
--------------------------------
### Create Basic Webview Window with HTML Content
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Creates a new webview instance with default settings and displays provided HTML content in a native window. This is the fundamental step for launching a webview application.
```typescript
import { Webview } from "webview-bun";
const html = `
Hello from bun v${Bun.version}!
This is a native desktop window powered by webview.
`;
const webview = new Webview();
webview.title = "My Desktop App";
webview.setHTML(html);
webview.run(); // Blocks until window is closed
```
--------------------------------
### Integrate webview-bun with Bun Web Server
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Demonstrates running a Bun web server in a worker thread and displaying its content within a webview window. This pattern is useful for applications that need to serve dynamic content locally. Requires 'webview-bun' and Bun's worker capabilities.
```typescript
// worker.ts
const server = Bun.serve({
port: 3000,
fetch(req) {
return new Response(
`
Served by Bun.serve
Request URL: ${req.url}
`,
{
headers: { "Content-Type": "text/html" }
}
);
},
});
console.log(`Server running on ${server.url}`);
// index.ts
import { Webview } from "webview-bun";
const worker = new Worker("./worker.ts");
const webview = new Webview();
webview.navigate("http://localhost:3000/");
webview.run();
worker.terminate();
```
--------------------------------
### Clone webview-bun repository with submodules
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Clones the webview-bun repository, including its submodules (specifically the webview library). This is a prerequisite for building the project from source. After cloning, navigate into the repository directory.
```bash
git clone --recurse-submodules https://github.com/tr1ckydev/webview-bun
cd webview-bun
```
--------------------------------
### Manage Multiple Webview Windows with webview-bun
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Demonstrates how to create and manage multiple webview windows independently. Each window can have its own title and navigate to different URLs. The `run()` method is called on each instance to keep them active.
```typescript
import { Webview } from "webview-bun";
const webview1 = new Webview();
webview1.title = "Bun Documentation";
webview1.navigate("https://bun.sh/");
const webview2 = new Webview();
webview2.title = "Wikipedia";
webview2.navigate("https://www.wikipedia.org/");
// Run both windows (blocks until both are closed)
webview1.run();
webview2.run();
```
--------------------------------
### Build a single-file executable with Bun
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Compiles a TypeScript file into a single, minified, and sourcemapped executable using Bun's build command. This is useful for distributing webview applications as standalone binaries. The `--outfile` flag specifies the output file name.
```bash
bun build --compile --minify --sourcemap ./examples/todoapp/app.ts --outfile todoapp
```
--------------------------------
### Build webserver and worker files with Bun
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Builds multiple TypeScript files, including a web server and a worker, into a single executable using Bun's build command. This is relevant for applications that need to run a web server and manage webview windows concurrently using workers to avoid blocking the main thread.
```bash
bun build --compile --minify --sourcemap ./index.ts ./worker.ts --outfile webserver
```
--------------------------------
### Build the webview-bun library
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Builds the shared library file for webview-bun using the `build` script provided in the project. This command invokes the underlying CMake build system of the webview library. The compiled library will be located in the `build` folder.
```bash
bun run build
```
--------------------------------
### Inject Initialization Scripts with webview-bun
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Injects JavaScript code that runs automatically on every page load. Useful for setting up global functions or styles before the main page content is fully loaded. It requires the 'webview-bun' library.
```typescript
import { Webview } from "webview-bun";
const webview = new Webview();
// This code runs before window.onload on every page
webview.init(`
console.log('Initialization script running');
// Add global styling
const style = document.createElement('style');
style.textContent = 'body { font-family: Arial, sans-serif; margin: 20px; }';
document.head.appendChild(style);
// Add global utility function
window.formatDate = (date) => new Date(date).toLocaleString();
`);
const html = `
Page with Init Script
`;
webview.setHTML(html);
webview.run();
```
--------------------------------
### Configure Webview Window Size and Constraints
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Sets custom window dimensions and size constraints using the SizeHint enum for fixed, minimum, maximum, or flexible sizing. This allows for precise control over the application window's appearance.
```typescript
import { Webview, SizeHint } from "webview-bun";
// Create a fixed-size window
const webview = new Webview(false, {
width: 800,
height: 600,
hint: SizeHint.FIXED
});
webview.title = "Fixed Size Window";
webview.navigate("https://bun.sh/");
webview.run();
// Change size dynamically
const webview2 = new Webview();
webview2.size = {
width: 400,
height: 300,
hint: SizeHint.MIN // Minimum size constraint
};
webview2.navigate("https://www.wikipedia.org/");
webview2.run();
```
--------------------------------
### Clean and rebuild the webview-bun library
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Clears the build cache and then rebuilds the webview-bun library. This is useful for ensuring a clean build environment or when making significant changes to the build configuration or source code. It requires the `clean` script to be defined in the project.
```bash
bun clean
bun run build
```
--------------------------------
### Navigate to External URLs in Webview
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Loads external web pages into the webview window using the navigate method. This allows the application to function as a basic web browser.
```typescript
import { Webview } from "webview-bun";
const webview = new Webview();
webview.title = "Web Browser";
webview.navigate("https://bun.sh/");
webview.run();
```
--------------------------------
### Cross-compile executable for a target platform with Bun
Source: https://github.com/tr1ckydev/webview-bun/blob/main/README.md
Enables cross-compilation of a TypeScript file into an executable for a specific target platform using Bun's build command. This allows creating binaries for different operating systems and architectures from a single build environment. The `--target` flag specifies the desired platform.
```bash
bun build --compile --target=bun-windows-x64 --minify --sourcemap ./examples/todoapp/app.ts --outfile todoapp
```
--------------------------------
### Clean Up Resources with webview-bun
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Shows how to properly destroy webview instances and unload the library when the application is closing. `webview.destroy()` cleans up a single instance, while `unload()` cleans up all instances and the library itself. This prevents resource leaks.
```typescript
import { Webview, unload } from "webview-bun";
const webview = new Webview();
webview.setHTML("
Temporary Window
");
// Destroy single instance manually
setTimeout(() => {
webview.destroy(); // Closes window and frees resources
}, 3000);
// Or use unload() to destroy all instances and unload library
// unload();
```
--------------------------------
### JavaScript: Create and Manage To-Do List Items
Source: https://github.com/tr1ckydev/webview-bun/blob/main/examples/todoapp/ui.html
This JavaScript code handles the core functionality of the to-do list. It includes functions to add new tasks, mark them as complete, and delete them. It also manages the creation and attachment of 'close' buttons to each list item.
```javascript
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
};
}
var list = document.querySelector("ul");
list.addEventListener(
"click",
function (ev) {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("checked");
}
},
false,
);
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === "") {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
};
}
}
```
--------------------------------
### Enable Debug Mode in webview-bun
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Enables developer tools for debugging web content on supported platforms. When initialized with `true`, the webview will have inspectable elements, accessible via right-clicking. Requires the 'webview-bun' library.
```typescript
import { Webview } from "webview-bun";
// Enable debug mode (first parameter)
const webview = new Webview(true);
webview.navigate("https://example.com/");
// Developer tools will be available (right-click -> Inspect)
webview.run();
```
--------------------------------
### Use Raw Bindings for Advanced Control with webview-bun
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Utilizes `bindRaw` for low-level control over function binding, providing direct access to sequence IDs and request strings. This allows for manual parsing of arguments and returning results. It requires the 'webview-bun' library.
```typescript
import { Webview } from "webview-bun";
const html = `
`;
const webview = new Webview();
webview.bindRaw("customFunction", (seq, req, arg) => {
console.log("Sequence:", seq);
console.log("Request:", req); // JSON array string: ["test", 42]
const args = JSON.parse(req);
const result = { processed: args[0].toUpperCase(), doubled: args[1] * 2 };
// Return result manually
webview.return(seq, 0, JSON.stringify(result));
});
webview.setHTML(html);
webview.run();
```
--------------------------------
### CSS: Styling for To-Do List Elements
Source: https://github.com/tr1ckydev/webview-bun/blob/main/examples/todoapp/ui.html
This CSS code defines the visual appearance of the to-do list. It includes styles for the body, list items (including hover and checked states), close buttons, headers, input fields, and the 'Add' button.
```css
body { margin: 0; min-width: 250px; }
/* Include the padding and border in an element's total width and height */
* { box-sizing: border-box; }
/* Remove margins and padding from the list */
ul { margin: 0; padding: 0; }
/* Style the list items */
ul li { cursor: pointer; position: relative; padding: 12px 8px 12px 40px; list-style-type: none; background: #eee; font-size: 18px; transition: 0.2s; /* make the list items unselectable */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) { background: #f9f9f9; }
/* Darker background-color on hover */
ul li:hover { background: #ddd; }
/* When clicked on, add a background color and strike out text */
ul li.checked { background: #888; color: #fff; text-decoration: line-through; }
/* Add a "checked" mark when clicked on */
ul li.checked::before { content: ""; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px; }
/* Style the close button */
.close { position: absolute; right: 0; top: 0; padding: 12px 16px 12px 16px; }
.close:hover { background-color: #f44336; color: white; }
/* Style the header */
.header { background-color: #f44336; padding: 30px 40px; color: white; text-align: center; }
/* Clear floats after the header */
.header:after { content: ""; display: table; clear: both; }
/* Style the input */
input { margin: 0; border: none; border-radius: 0; width: 75%; padding: 10px; float: left; font-size: 16px; }
/* Style the "Add" button */
.addBtn { padding: 10px; width: 25%; background: #d9d9d9; color: #555; float: left; text-align: center; font-size: 16px; cursor: pointer; transition: 0.3s; border-radius: 0; }
.addBtn:hover { background-color: #bbb; }
```
--------------------------------
### Bind Native Bun Functions to Webview JavaScript
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Exposes Bun functions to the webview's JavaScript context, enabling bidirectional communication with automatic JSON serialization. This allows web content to call native code and vice versa.
```typescript
import { Webview } from "webview-bun";
const html = `
Function Binding Demo
`;
const webview = new Webview();
// Bind synchronous function
webview.bind("greet", (name) => {
console.log(`Greeting ${name} from native code`);
return { message: `Hello, ${name}!`, timestamp: Date.now() };
});
// Bind async function
webview.bind("calculate", async (a, b) => {
await new Promise(resolve => setTimeout(resolve, 100));
return { sum: a + b, product: a * b };
});
// Bind console logging
webview.bind("log", (...args) => console.log("[WebView]", ...args));
webview.title = "Binding Example";
webview.setHTML(html);
webview.run();
```
--------------------------------
### Evaluate JavaScript in Webview Context
Source: https://context7.com/tr1ckydev/webview-bun/llms.txt
Executes arbitrary JavaScript code in the webview context to manipulate the DOM or trigger actions. This allows for dynamic updates and interaction with the web content after it has been loaded.
```typescript
import { Webview } from "webview-bun";
const html = `
Initial Title
Count: 0
`;
const webview = new Webview();
webview.setHTML(html);
// Evaluate JavaScript after a delay
setTimeout(() => {
webview.eval(`
document.getElementById('title').textContent = 'Updated by Bun!';
document.getElementById('title').style.color = 'blue';
`);
let count = 0;
setInterval(() => {
webview.eval(`
document.getElementById('counter').textContent = 'Count: ${++count}';
`);
}, 1000);
}, 500);
webview.run();
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.