Download the PHP package ganyicz/bond without Composer
On this page you can find all versions of the php package ganyicz/bond. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package bond
⚠️ Alpha release:
This package is currently under active development and not yet intended for production use; It is best to try on a fresh Laravel project. Feedback and contributions are welcome!
Bond brings modern component authoring to Laravel Blade and Alpine.js. It introduces a few features inspired by React and Vue, making it easier to write structured, maintainable components. Bond also ships with a VS Code extension that adds syntax highlighting, autocomplete, and error checking.
Installation
Install Bond into your project using Composer:
Next, add the following lines to your resources/js/app.js file. Bond will compile all scripts extracted from your Blade files here.
Finally, update your vite.config.js to register Bond:
If you're using Alpine.js CDN, make sure it's registered after your app.js file.
If you're using Livewire, you don't need to worry about this, as Livewire automatically loads Alpine.js for you. Just make sure your app.js file is registered somwhere in the <head> tag.
VS Code Extension
For the best development experience, install the Bond VS Code extension. It provides syntax highlighting, autocomplete, and error checking for both Bond components and Alpine.js attributes. The extension will be open-sourced in a future release.
Make sure to also install the official Laravel extension.
Bond will only load in files with language mode set to Blade.
Quick guide
Make sure you are familiar with both Alpine.js and Laravel Blade, as Bond builds on top of these technologies and supports all their features.
When ready, start your Vite development server:
Creating a new component
Bond is intended to be used within Blade components. Create one in resources/views/components. You can use the following Artisan command:
Then add a <script setup> tag and {{ $attributes }} as described below.
<script setup>
This is where you'll define props, state, and functions for this component. Bond’s Vite plugin will scan all Blade files within your resources/views directory, extract code from <script setup> tags and bundle it into a single JavaScript file. The script tags will never actually be rendered on the page.
[!IMPORTANT] Since the code will get extracted into a JavaScript file, you cannot use Blade within the script tag.
The component gets automatically mounted on the element where you place your {{ $attributes }}. In the background, Bond just adds directives like x-data and x-component to your attributes to identify and initialize the component.
[!IMPORTANT] Components using
<script setup>are isolated from the outer scope by design. To pass data in, use props or slots.
Defining props
Props let you pass reactive data from outside into your component. Define them in the callback parameter of the mount function with a type annotation:
Props can be accessed inside the mount function and in the template using the props. prefix.
Passing props
Once defined, any Alpine or Livewire variable can be passed in as a prop using the x- prefix:
All props are two-way bound by default. The message inside the component will reactively update when the outer variable changes and vice versa. (This behavior might change in future releases.)
You can also pass static values like numbers, strings, or functions.
[!CAUTION] Prop names cannot conflict with Alpine.js directives. For example, you cannot use
on,model, ortext. For the full list of reserved names, see the list of directives in Alpine.js docs.
Defining data
To define data and functions on your component, use the object returned from the mount function callback. When referencing data within that object, you must use the this keyword. In the template, you can access data directly without any prefix.
Using components
After you've defined your component, you can use it in your Blade templates like this:
While this is a simple example, you can use these patterns to build complex components with multiple props, two-way data binding, integrate with Livewire and more.
Slots
Bond components are isolated, which also applies to slots. Any content you pass into a slot will NOT have access to the parent scope by default.
Let's use the example from before, but instead of passing the message as a prop, we will use a slot.
The errors variable will not be accessible.
To make the slot behave as expected, wrap it in an element with an x-slot directive inside your component.
[!IMPORTANT] Directives used on an element with
x-slotwill also use the outer scope, not just its children.
Imports
Since Bond compiles <script setup> tags with Vite, you can use any import supported in a JavaScript/TypeScript file:
The @ alias points to resources/js by default. You can customize the aliases in your vite.config.js file, however this will not reflect in the VS Code extension at the moment and only the default alias will work in your IDE.
Make sure to always import types using the import type syntax to avoid issues.
Else statement
Alpine does not support else statements out of the box. Bond adds partial support for it. The limitation is that the template with the x-else directive must be inside the parent template.
A simpler custom syntax for control statements is planned:
Icons
Dynamic icons in Alpine usually require rendering all icons and toggling with x-show.
With Bond, you can import SVGs and render them dynamically with x-html:
This will likely be revisited in the next release with a more structured approach to icons.
TypeScript
Bond uses TypeScript to provide a terse syntax for props and also to power the IDE features. However, it disables the strict mode by default. This means you are not forced to use types. You can write regular JavaScript without getting type errors, but still get autocomplete and type hints in your IDE.
Options for both enabling strict mode and fully opting out of TypeScript will be available in the future.
Adding types to properties
If a property is not initialized immediately, use the as keyword to define its type:
[!IMPORTANT] TypeScript syntax is only supported inside
<script setup>. Alpine expressions are not bundled, and using types in them will cause runtime errors.
Roadmap
[!WARNING] The following features are planned but not yet implemented. Feedback and contributions are encouraged.
Attribute syntax
Bond will support a JSX-like syntax for attributes. This makes it easier to visually distinguish between HTML/Blade attributes and reactive bindings. This syntax will be optional.
The example above would be compiled to:
Control statement tags
Alpine requires wrapping conditional or loop logic in <template> tags, which can be verbose. Bond will introduce a cleaner syntax that will also enable real else statements.
The syntax below was designed to be visually distinct from Blade directives and its HTML-like structure will be easy to compile into Alpine.js code.
Compiled output:
Interpolation
Bond will add support for inline template interpolation. This lets you write expressions directly in HTML with curly braces, similar to Vue or React:
{name} will be replaced with the actual value at runtime.
Cross-file IntelliSense (VS Code)
The Bond VS Code extension will provide autocomplete and type checking for props on the outside of the component, ensuring type safety across files.
Common error diagnostics (VS Code)
The Bond VS Code extension will include diagnostics for common errors in Alpine.js attributes, such as a missing key in a x-for loop, one root element per <template> tag, and more.
Blade enhancements
While Bond primarily augments Alpine.js, several Blade-specific enhancements would be beneficial to improve modularity and organization.
Multiple components per file
Imports and aliases
