https://github.com/flat3/babel-blade

Blade compiler for inline Babel scripts
https://github.com/flat3/babel-blade

babel babeljs blade laravel

Last synced: 5 days ago
JSON representation

Blade compiler for inline Babel scripts

• Host: GitHub
• URL: https://github.com/flat3/babel-blade
• Owner: flat3
• License: mit
• Created: 2021-02-06T11:15:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-02-07T19:01:25.000Z (over 3 years ago)
• Last Synced: 2024-09-25T08:02:06.968Z (8 days ago)
• Topics: babel, babeljs, blade, laravel
• Language: PHP
• Homepage:
• Size: 53.7 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Babel compiler for Laravel Blade

This package allows you to safely write modern, inline JavaScript in blade templates.

Compilation only happens at Blade template caching time, so has no effect on production performance.

## Installation

To install the package via composer:

`composer require flat3/babel-blade`

The compiler expects a nodejs install on the same PATH that is being used by your PHP interpreter.

You must install babel (and normally the env preset) in your Laravel project:

`npm install --dev @babel/core @babel/preset-env`

The compiler looks for a babel configuration starting from the view root (normally resources/views) and searching upwards.

You can therefore use any existing babel configuration file in your project, or you can create one in resources/views that will only be used for babel-blade.

For example at `resources/views/.babelrc.json`

```

{

  "presets": [

    [

      "@babel/preset-env",

      {

        "targets": {

          "chrome": "58",

          "ie": "11"

        }

      }

    ]

  ]

}

```

## Usage

Babel-blade looks for script blocks that use the string literal `` so no other javascript or script block will be modified.

This script block using the babel config above:

```

<script type="text/babel">

(...args) => console.log(...args)

```

will be transformed at compile time into:

```

(function() { "use strict";

(function () {

  var _console;

  return (_console = console).log.apply(_console, arguments);

});

  

})();

```

## Laravel Vapor

The Vapor build process clears the view caches and builds templates on first load server-side.

This is incompatible with babel-blade, since nodejs etc. will not be available.

To work around this, invoke the build as part of the vapor deploy process as `BABEL_BLADE_CACHE=1 php artisan view:cache`.

This will compile the templates locally into blade files in the view root, and add `@include`s to pull the compiled code

in during compilation.

## Polyfills

Babel implements async/await using generators, which need to be polyfilled on older platforms.

Without the polyfill you'll see the error:

```

ReferenceError: Can't find variable: regeneratorRuntime

```

To solve this you can include an additional script tag that includes the polyfill, for example:

```

```

## Blade directives

Because babel-blade runs early in the compilation process, directives such as `@json($src)` haven't been parsed yet and will be passed to Babel as they are.

You will then get failures such as ```Support for the experimental syntax 'decorators-legacy' isn't currently enabled``` as Babel tries to parse `@json`.

There is likely not a solution to this due to the order of execution in blade, instead use the style `"{{$src}}" with appropriate escaping.`

## License

Copyright © Chris Lloyd

Flat3 babel-blade is open-sourced software licensed under the [MIT license]