[8.x] Introduce JsString for encoding data to use in JavaScript
#39460
Conversation
inxilpro
changed the title
JsString for encoding data to use in JavaScript
|
It's also worth noting that some of the reasoning behind using |
|
@inxilpro can this be used in all the exact same scenarios as the previous version? Within quotes, within Blade components, etc.? |
|
Could a root function be used instead? Like |
|
@taylorotwell Yep, it's built to handle all the same scenarios. |
|
@DarkGhostHunter the concern is about adding a new global helper. I think for right now it may be better to just add the helper in your own codebase if you want it. As long as we add an alias for <div x-data="{{ JsString::from($data) }}">
...
</div>
<!-- or -->
<script>
let foo = {{ JsString::from($foo) }};
</script>If you want to, you can then add you own helper: if (! function_exists('js')) {
function js($data, $flags = 0, $depth = 512) {
return new JsString($data, $flags, $depth);
}
} |
|
So does |
Yeah, So in the end, the typical usage would be: <!-- for HTML attributes, use @js() -->
<div x-data="@js($data)"></div>
<!-- for inline JS, use @js() -->
<script>
let data = @js($data);
</script>
<!-- for Blade components, use JsString -->
<x-alert :data="new JsString($data)" />For the Blade component case, I'd probably bake that into my component such that it accepts any |
|
I just pushed an update that makes For example: {{-- modal.blade.php --}}
@props(['config' => new stdClass()])
<div {{ $attributes->except('x-data') }} x-data="{ open: false, config: @js($config) }">
{{ $slot }}
</div>
{{-- Both of these would work: --}}
<x-modal :config="$data" />
<x-modal :config="new JsString($data)" />This way you can just always use the |
|
(That said, I'm OK with renaming it back to |
|
Renamed the class back to |
|
Thanks for contributing to Laravel! ❤️ |
I commented on #39389 but I think Taylor merged as I was commenting. This is a slight modification to the new
Jsobject with a few benefits:Js::fromimplementation is about 70% slower due to the use ofatob(). It also makes the produced string much less legible in debugging (compare benchmarks for an example).JsStringimplementation takes theJsonableandArrayableinterfaces into accountJSON_HEX_TAG,JSON_HEX_APOS,JSON_HEX_AMP, andJSON_HEX_QUOTencoding flags to avoid issues with quotes and help mitigate XSS issuesJsStringobject that implementsHtmlable, we can do something like{{ JsString::from($user) }}rather than needing to use the unescaped syntax{!! ... !!}JsStringis a nice parallel toHtmlString— it's not two different concepts for two similar use casesShow benchmarks
Benchmarks
You can run this benchmark on https://jsbench.me/
JsString
Js