Dec

How to Transform PHP Variables to JavaScript Variables?

laravel php laravel-packages

Sometimes you are in a situation, where you need to pass some server-side string/array/collection/whatever to your JavaScript. Traditionally, this can be a bit of a pain - particularly when your application grows. So Laracasts has introduced a package called PHP-Vars-To-Js-Transformer which can simplify the process drastically.

Installation

You can begin by installing this package through Composer.

composer require laracasts/utilities

For Laravel Users

For Laravel users, there is a service provider you can make use of to automatically register the necessary bindings.

Laravel 5.5+ users: this step may be skipped, as we can auto-register the package with the framework.

// config/app.php

'providers' => [
    '...',
    'Laracasts\Utilities\JavaScript\JavaScriptServiceProvider'
];

When this provider is booted, you’ll gain access to a helpful JavaScript facade, which you may use in your controllers.

public function index()
{
    JavaScript::put([
        'foo' => 'bar',
        'user' => User::first(),
        'age' => 29
    ]);

    return View::make('hello');
}

In Laravel 5, of course, add use JavaScript; to the top of your controller.

Using the code above, you’ll now be able to access foo, user, and age from your JavaScript.

console.log(foo); // bar
console.log(user); // User Obj
console.log(age); // 29

This package, by default, binds your JavaScript variables to a footer view, which you will
include. For example:

<body>
    <h1>My Page</h1>

    @include ('footer') // <-- Variables prepended to this view
</body>

Naturally, you can change this default to a different view. See below.

Defaults

If using Laravel, there are only two configuration options that you’ll need to worry about. First, publish the default configuration.

php artisan vendor:publish

// Or...

php artisan vendor:publish --provider="Laracasts\Utilities\JavaScript\JavaScriptServiceProvider"

This will add a new configuration file to: config/javascript.php.

bind_js_vars_to_this_view

You need to update this file to specify which view you want your new JavaScript variables to be prepended to. Typically, your footer is a good place for this.

If you include something like a layouts/partials/footer partial, where you store your footer and script references, then make the bind_js_vars_to_this_view key equal to that path. Behind the scenes, the Laravel implementation of this package will listen for when that view is composed, and essentially paste the JS variables within it.

js_namespace

By default, all JavaScript vars will be nested under the global window object. You’ll likely want to change this. Update the js_namespace key with the name of your desired JavaScript namespace. It can be anything. Just remember: if you change this setting (which you should), then you’ll access all JavaScript variables, like so:

MyNewNamespace.varName

Note

Run this artisan command after changing the view path.

php artisan config:clear

Without Laravel

If you’re not using Laravel, then you’ll need to hard-wire things yourself. (Or, feel free to submit a pull request with an implementation for your desired framework.)

First, create an implementation of the Laracasts\Utilities\JavaScript\ViewBinder interface. This class is in charge of inserting the given JavaScript into your view/page.

<?php

class MyAppViewBinder implements Laracasts\Utilities\JavaScript\ViewBinder {

    // $js will contain your JS-formatted variable initializations
    public function bind($js)
    {
        // Do what you need to do to add this JavaScript to
        // the appropriate place in your app.
    }
}

Next, put it all together:

use Laracasts\Utilities\JavaScript\Transformers\Transformer;

$binder = new MyAppViewBinder;

$javascript = new Transformer($binder, 'window'); // change window to your desired namespace

$javascript->put(['foo' => 'bar']);

Now, you can access window.foo from your JavaScript.

Remember, though, this is only necessary if you aren’t using Laravel. If you are, then just reference the service provider, as demonstrated above.

For more information & source code you can visit its documentation on Github.

Published at : 07-12-2021

AUTHOR

Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Blog Detail