avto-dev/back2front-laravel

Laravel package for sending data from backend to frontend over JavaScript object

v2.5.0 2021-04-05 05:02 UTC

This package is auto-updated.

Last update: 2022-06-05 07:49:20 UTC


README

Laravel

Send backend data to frontend for Laravel applications

Version PHP Version Build Status Coverage Downloads count License

Package for sending data from backend to frontend JS variable.

Package a repository of the form "key" => "value" and methods for converting data to array and JSON.

Install

Require this package with composer using the following command:

$ composer require avto-dev/back2front-laravel "^2.0"

Installed composer is required (how to install composer).

You need to fix the major version of package.

For publish config and assets execute in console next command:

$ php artisan vendor:publish --provider="AvtoDev\\Back2Front\\ServiceProvider" --force

This command will publish files ./config/back-to-front.php with basic setting for package and public/vendor/back-to-front/front-stack.js with JavaScript object for getting access to the data.

Usage

At backend

To get the stack object at backend you can use global helper:

<?php

backToFrontStack();

or getting object from service container:

<?php

use AvtoDev\Back2Front\Back2FrontInterface;

/** @var Back2FrontInterface $service */
$service = resolve(Back2FrontInterface::class);
Methods

Back2Front object provides the following public methods:

Method Description
put($key, $value) Set variable in stack. Parameter key must be a string
get($key, [default]): mixed Get value by key
has($key): bool Check that key exists in storage
forget($key) Remove item from storage
toArray(): array Return data in array
toJson(): string Return data in JSON encoded

Also you can iterate object.

Back2Front supports dot notation in put, get, has and forget methods.

<?php

backToFrontStack()->put('user.name', 'John Doe');

At frontend will object:

{
    "user": {
        "name": "John Doe"
    }
}

At frontend

For output data at frontend you should add following code in your blade-template (preferably in the section head of the resulting HTML document):

<script type="text/javascript">
    Object.defineProperty(window, 'DATA_PROPERTY_NAME', {
        writable: false,
        value: {!! backToFrontStack()->toJson() !!}
    });
</script>

Or by blade-directive

@back_to_front_data('DATA_PROPERTY_NAME')

It creates property with name equals DATA_PROPERTY_NAME for superg lobal object window with early added data.

Default value of DATA_PROPERTY_NAME is 'backend'. If you use custom value and want to use front-stack helper on frontend, than you need call window.frontStack.setStackName('custom_name'); before helper usage.

Package contains javaScript helper for access to data object.

Use it you may adding js file at page:

<script src="/vendor/back-to-front/front-stack.js" type="text/javascript"></script>

You also can use it as require.js dependency.

This creates window.frontStack object which provides following methods:

Method Description
get(key, [default]) Get value by key. Supports "dot" notation for access to items if in data contains multidimensional arrays. Returns undefined if item don't exists or default value if it set
has(key): bool Check that key exists in storage
all(): object Returns data object

Example

At backend:

backToFrontStack()->put('user_id', $user->id);

At frontend:

<script type="text/javascript">
    console.log(window.frontStack.get('user_id'));
</script>

Testing

For package testing we use phpunit framework and docker-ce + docker-compose as develop environment. So, just write into your terminal after repository cloning:

$ make build
$ make latest # or 'make lowest'
$ make test

For testing JavaScript code using Mocha and Chai framework.

Run in console npm test. Coverage report will in coverage/coverage.json and in coverage/lcov-report/index.html for humans.

Changes log

Release date Commits since latest release

Changes log can be found here.

Support

Issues Issues

If you will find any package errors, please, make an issue in current repository.

License

This is open-sourced software licensed under the MIT License.