Not sure how to make the example work for webpack

[OlivierFortier]

Hello, I am trying to run the example for webpack loader, but how exactly am I supposed to render a view on a webpage ? Running webpack in the example produces a "main.js" file , but then when I include it in a script tag in an html page nothing gets rendered.

Sorry if I misunderstood how this works, I just want to use blade as a templating engine for my front-end projects.

For reference here is a stackblitz : https://stackblitz.com/edit/node-ysmdmf?embed=1&file=views/view.bjs

[OlivierFortier]

Ok, so I have figured out how it works now and am able to render a template on the screen with the webpack example. However I can't seem to use certain features like pass data into the template.

I am trying to pass some variables in the template like so :

Whenever I try to access those params from my template like so :

I get the following error :

I also can't seem to extend the layout

[OlivierFortier]

I just tried the server-side example using express and it seems like everything works fine there. I can pass data into my templates, use directives , etc... out of the box. But I don't want to use express or a backend server to use blade-js, I want to use it on the front-end.

The thing is, I want to do this client side, and use the webpack loader to use blade-js as my front-end templates with vue and storybook for example. Is this something that can be done ?

[tarik02]

You should use myVar instead of $myVar. Symbol $ is parsed as a valid part of variable name. Otherwise you can pass variable with $ prefix.

[OlivierFortier]

I tried without the $ sign and I am still unable to render the template. Here's a stackblitz : https://stackblitz.com/edit/bladejs-webpack?file=views/view.bjs

Do you know of any repos using the webpack loader that I could take a look at for reference ?

[tarik02]

So, I found the problem. Template runtime uses special utility functions that generates the following code for template:

const __params = __env.params;
const myVar = __params.myVar;

And then that code goes to eval. This code is generated at runtime, by enumerating __params object. And the final problem is that this construction does not work in JavaScript strict mode. Another alternative was to use with statement, but it also does not work with strict mode.

The only approach I see now is to take an example from Vue framework team and their template compiler: they use special buble fork that compiles their templates the way they want (automatically adds object access to all variables inside the template).

[OlivierFortier]

I wish I could help with that, but I'm not really good enough to work on compilers, runtimes, loaders and all that magic stuff !

Thanks for the answer though !

[tarik02]

Fixed with 3.0.0: https://stackblitz.com/edit/bladejs-webpack-1qxwpf?file=package.json

[OlivierFortier]

Wow, thank you so much !

[OlivierFortier]

I was wondering if you knew of any examples in the wild that uses the webpack loader and the runtime ? I'd like to take a look at how it is used in a "real" project ! With layouts and partials and all that jazz 🎉🚀

[tarik02]

I was wondering if you knew of any examples in the wild that uses the webpack loader and the runtime ? I'd like to take a look at how it is used in a "real" project ! With layouts and partials and all that jazz 🎉🚀

I'd recommend you looking at some real Laravel project and take overall structure from there. It does not seem that anyone really using this package in JavaScript.