JavaScript
To display something in Ray use the ray()
function. It accepts everything: strings, arrays, objects, ... you name it.
ray('a string')
ray(['an array'])
ray({ text: 'an object' })
ray
accepts multiple arguments. Each argument will be displayed in the Ray app.
ray('as' 'many' , 'arguments', 'as', 'you', 'like')
Using colors
You can colorize things your sent to ray by using the color function.
ray('this is green').color('green')
ray('this is orange').color('orange')
ray('this is red').color('red')
ray('this is blue').color('blue')
ray('this is purple').color('purple')
ray('this is gray').color('gray')
Using sizes
Ray can display things in different sizes.
ray('small').size('small')
ray('regular')
ray('large').size('large')
Creating a new screen
You can use newScreen
(or clearScreen
) to programmatically create a new screen.
ray().newScreen()
You can see values that were previously displayed, by clicking the little back button in the header of Ray.
Optionally, you can give a screen a name:
ray().newScreen('My debug screen')
You could opt to use newScreen
very early on in a request so you'll only see items that were sent to Ray in the current request. In a Laravel app, a good place for this might be the service provider.
Working with JSON
Want to display the json representation of anything you'd like in Ray? You can parse it into an object, then send it to Ray.
It will be displayed nicely and collapsable in Ray.
const jsonString = JSON.parse(['a' => 1, 'b' => ['c' => 3]]);
ray(jsonString);
Updating displayed items
You can update values that are already displayed in Ray. To do this, you must hold on the instance returned by the ray
function and call send on it.
Here's an example where you'll see a countdown from 10 to one.
const ray = ray('counting down!')
foreach(number in range(10, 1)) {
setTimeout(() => ray.send(number), 1000)
}
The instance ray
may also be used to add a color or size to items already on display. Here's an example where an items will change color and size after a second
const ray = ray('a string');
setTimeout(() => ray.color('red').size('large'), 1000)
Conditionally showing items
You can conditionally show things using the showIf
method. If you pass a truthy value, the item will be displayed.
ray('will be show').showIf(true);
ray('will not be shown').showIf(false);
You can also pass a callable to showIf
. If the callable returns a truthy value, it will be shown. Otherwise, it will not.
Removing items
You can remove an item that is already displayed in Ray. To do this, call the remove
function on an instance return by the ray
function.
const ray = ray('will be removed after 1 sec')
setTimeout(() => ray.remove(), 1000)
You can also conditionally remove items with the removeWhen
function (or the removeIf
alias).
ray('this one will be remove if the number is 2').removeWhen(number === 2)
removeWhen
also accepts a callable.
ray('this one will be remove if the number is 2').removeWhen(() => ... // return true to remove the item);
Hiding items
You can display something in ray and make it hidden immediately.
ray(largeObject).hide()
Returning items
To make all methods chainable, the ray()
function returns and instance of Spatie\Ray\Ray
. To quickly send something to Ray and have that something return as a value, use the pass
function.
ray().pass(anything) // the value of "anything" will be returned
This is handy when, for instance, debugging return values.
You can change
function foo() {
return 'return value'
}
to
function foo() {
return ray().pass('return value'),
}
Displaying a notification
You can use Ray to display a notification.
ray().notify('This is my notification');
Note: The JS ray client does not support getting the caller of a function, pausing execution, performance and memory measurements, or halting the JS process. There's also no current support for showing the origin of the js request, althrough we hope to add that in soon.