spatie / laravel-blade-javascript

A Blade directive to export variables to JavaScript

A Blade directive to export variables to JavaScript

This package contains a Blade directive to export values to JavaScript.

Here's an example of how it can be used:

@javascript('key', 'value')

The rendered view will output:

<script>window['key'] = 'value';</script>

So in your browser you now have access to a key variable:

console.log(key); //outputs "value"

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.

Installation

You can install the package via composer:

composer require spatie/laravel-blade-javascript

The package will automatically register itself.

Optionally the config file can be published with

php artisan vendor:publish --provider="Spatie\BladeJavaScript\BladeJavaScriptServiceProvider" --tag="config"

This is the contents of the published config file:

return [

    /**
     * All passed values will be present in this JavaScript namespace. Set this to an empty string
     * to use the window object.
     */
    'namespace' => '',
];

If you want to customize the generated <script> tag you can publish and override the used view.

php artisan vendor:publish --provider="Spatie\BladeJavaScript\BladeJavaScriptServiceProvider" --tag="views"

After this you can edit the published view resources/views/vendor/bladeJavaScript/index.blade.php. This is usefull to add the type or a CSP nonce.

Usage

With the package installed you can make use of a @javascript Blade directive.

@javascript('key', 'value')

The rendered view will output:

<script>key = 'value';</script>

You can also use a single argument:

@javascript(['key' => 'value'])

This will also output:

<script>key = 'value';</script>

When setting the namespace to eg js in the config file this will be the output:

<script>window['js'] = window['js'] || {};js['key'] = 'value';</script>

Changelog

Please see CHANGELOG for more information what has changed recently.

Testing

composer test

Contributing

Please see CONTRIBUTING for details.

Security

If you've found a bug regarding security please mail [email protected] instead of using the issue tracker.

Credits

• Freek Van der Herten
• Sebastian De Deyne
• All Contributors

This repository contains some code from the laracasts/PHP-Vars-To-Js-Transformer package written by Jeffrey Way.

License

The MIT License (MIT). Please see License File for more information.

laravel-blade-javascript's Issues

no CSP Support

At the moment there is no CSP support by default - which is a bit strange cause you guys have also a laravel csp package.

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src ...". Either the 'unsafe-inline' keyword, a hash ('...'), or a nonce ('nonce-...') is required to enable inline execution.

I don't want to allow inline scripts - so I have to set something on the script tag itself. Atm I've overriden the \Spatie\BladeJavaScript\Renderer class but this isn't optimal - there would be several ways to fix this.

laravel-csp package related

1. add the hash of the inline script to the policy https://github.com/spatie/laravel-csp/issues/33
2. use the csp_nonce() function on the script

general
3) use a blade file for the script tag that could be overriden

which one do you like the most?

Cannot install laravel-javascript-views package https://packagist.org/packages/spatie/laravel-javascript-views

I know this is not the right place to open this issue but I cannot find a laravel javascript view package on Github, Is it still open source?

[IDEA] Add `console.log` blade directive

You could easily add that directive using existing methods,
it would be useful to do a quick echo to some php variable,
would PR be accepted for that functionality?

laravel-blade-javascript/README.md

Lines 25 to 28 in 2f25eae

	So in your browser you now have access to a key variable:
	```js
	console.log(key); //outputs "value"
	```

Assigning Multiple Key Value Pairs

Unless I'm missing it, I would like to suggest the feature to assign multiple key/value pairs at once to minimize the excess <script> tags.

Something like this perhaps?

@javascript(['key' => 'value', 'key2' => 'value2'])

<script>window['key'] = 'value';window['key2'] = 'value2';</script>

Fail to pass floats

When I try to pass float variable, lbj turns it to integer with out fractional part. For example:

@javascript([
... ,
'float' => 4.5
])

console.log(float) ==> 4

How can I pass float variable to js?

About the minimal php version

Hi,

Most of your packages require php 7 and honestly this package doesn't need php 7.
It is a simple package that 80% of the php users including me still use php 5

Why deny us such a great package for the sake of type hinting the return values ?
It would be nice if you could use php 5 instead.

Conflicts with Vue.js?

Whenever I use the @javascript tag in my blade templates I get the following Vue.js error:

- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Removing the tags from the template fixes the issue. Should I be using Vuex instead of this package? I very much prefer the simplicity of this package.

syntax error, unexpected '<'

I'm using this package like so
@javascript('url', {{ route('url') }})
and receiving
syntax error, unexpected '<' (View: [redacted])

Can't use function as value

When using a function as the value e.g. @javascript('date', date('Y-m-d')) the last parenthesis will get removed by this function and results in a syntax error:
https://github.com/spatie/laravel-blade-javascript/blob/master/src/BladeJavaScriptServiceProvider.php#L29

When using the array syntax, it works as expected: @javascript(['date' => date('Y-m-d')])

Append values to the existing namespace instead of override.

Hi! In some situations, to keep consistency, there is a need to use the same window namespace for custom solutions as we might use for assigning data via @javascript(). Current implementation of the module overrides data that have been declared before @javascript(). What do you think about appending data to the namespace if such already exists (and maybe even make it configurable?) instead of just clearing that?

Support for L5.5

composer install error

php -v

PHP 5.6.27-1+deb.sury.org~xenial+1 (cli) 
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2016, by Zend Technologies

[InvalidArgumentException]
Could not find package spatie/laravel-blade-javascript at any version matching your PHP version 5.6.27.0

how to pass methods into javascript?

Hi

Thanks for making laravel-blade-javascript.

is there a way I can pass my class functions to javascript?

@javascript('mybjects', myObjects)

Library generating invalid HTML output

Just started using this library and I noticed that the scripts are being added in an invalid manner. That's to say, when using this library the HTML output from Laravel now contains invalid HTML markup.

For illustration purpose I've created a simple/empty template file. You can see this here:

<script>window['key'] = 'value';</script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
</html>

When you attempt to validate this with an HTML validator it throws some errors. In total this creates 4 errors in the W3 HTML validator.

• Start tag seen without seeing a doctype first. Expected .
• Stray doctype.
• Stray start tag html.
• Cannot recover after last error. Any further errors will be ignored.