Twill: Custom Vue component forms in admin [form.blade.php] (block hack) is not rendered

[zedee]

Hi, I have a ... well, critical issue after updating to 2.0

I need on some modules a total custom Vue component formfield in order to make special forms (some sort of repeater but with very specific and custom specs). It is not a repeater though.

I had those Vue components directly "injected" into the form.blade.php template, as there was no way to add custom specific formFields at that time, so I followed a kinda 'hacky' process someone told me on Spectrum chats.

Example of what I have right now:

@extends('twill::layouts.form')

@section('contentFields')
    @formField('input', [
        'name' => 'title',
        'label' => 'Quiz title',
        'maxlength' => 100
    ])
    @formField('input', [
        'name' => 'points_correct',
        'label' => 'Points per success',
        'maxlength' => 3,
        'default' => 10
    ])
    @formField('input', [
        'name' => 'points_miss',
        'label' => 'Points per failure',
        'maxlength' => 3,
        'default' => 3
    ])
    @formField('browser', [
        'label' => "Journey quiz group",
        'name' => 'journey',
        'moduleName' => 'journeys',
        'routePrefix' => 'travessies-i-trivial',
        'max' => 1
    ])
    @formField('browser', [
        'label' => "Play related to quiz",
        'name' => 'play',
        'moduleName' => 'plays',
        'routePrefix' => 'obres-critiques-festivals',
        'max' => 1
    ])
    <a17-block-quizzes :quiz-question-data="{{ $questionsData }}"></a17-block-quizzes>
@stop

Since I updated to last Twill version, those custom components dissapeared!!!! :fearful:

I've been trying to run php artisan twill:blocks and then npm run twill-build but unsuccessful. Seems that the custom component is not rendered on the view, as looking at the HTML source code, it appears the <a17-block-quizzes> tag instead of the rendered component.

Now the backend is unusable, as those components were crucial for some sections of the website.

How can I roll back to the 'hacky' behavior?
How can I add my custom formfields that were working before?

Any manual solution? I will modify Twill core and add it to my own fork if there's no more solution to this.

I chose Twill months ago as a good CMS thinking it could be flexible, customizable and able handle a complex site, but the work, effort and issues I'm putting into this project means a 10 fold dedication instead of saving time... anyway at this point I have no way to rollback, so I have to fix this at all costs :disappointed:

Any ideas??

[ifox]

Twill 2.0 changes did consider your use case and does not intend to remove this possibility at all. Did you review our full changelog? I think it is about marking those custom blocks as being compiled in your config/twill.php file.

[ifox]

https://github.com/area17/twill/blob/2.x/CHANGELOG.md#blocks-and-frontend-build-workflow

[zedee]

Twill 2.0 changes did consider your use case and does not intend to remove this possibility at all. Did you review our full changelog? I think it is about marking those custom blocks as being compiled in your config/twill.php file.

Okay, that's a relief. I will take a look, I didn't noticed of the changelog!

[zedee]

@ifox There's still something odd..

I followed the changelog instructions, but now I got the following error:

Twill dev assets manifest is missing. Make sure you are running the npm run serve command inside Twill.

[ifox]

@zedee this error is coming from:

https://github.com/area17/twill/blob/c0c492c5805f2c72a8c89ac1ebfee0c97cfa087d/src/Helpers/frontend_helpers.php#L49

which can only be executed if the following conditional is true:

https://github.com/area17/twill/blob/c0c492c5805f2c72a8c89ac1ebfee0c97cfa087d/src/Helpers/frontend_helpers.php#L38

It probably means you've enabled twill.dev_mode. When doing that, you want to run php artisan twill:dev, not twill:build.

[zedee]

It probably means you've enabled twill.dev_mode. When doing that, you want to run php artisan twill:dev, not twill:build.

Yes, I'm running php artisan twill:dev, not twill:build

Also, I'm developing all of this in a Docker container (Laradock), with a custom domain myapp.local. May this be the reason? I've configured also the TWILL_DEV_MODE_URL to point there but not sure if it's working.

In my twill.config I have the following settings:

    'dev_mode' => env('APP_DEBUG', false),
    'dev_mode_url' => env('TWILL_DEV_MODE_URL', 'http://localhost:8080'),
    'public_directory' => env('TWILL_ASSETS_DIR', 'assets/admin'),
    'manifest_file' => 'assets/admin/twill-manifest.json',
    'vendor_path' => 'vendor/area17/twill',
    'custom_components_resource_path' => 'assets/js/components',
    'build_timeout' => 300,

I did again for 3rd time and now I get like 700 errors like this:

131:1   error  Expected indentation of 10 spaces but found 20 spaces  vue/script-indent 

Can the linter be configured to be more permissive? If I have to correct 700 places weird spacing issues I think I'm not gonna make it :disappointed:

[ifox]

FYI you do not need to copy all configurations from Twill when you want to change something.

I'd try to build before trying to run the dev server in a Docker container as those are 2 different issues.

Are those linter issues coming from your custom components?

[zedee]

FYI you do not need to copy all configurations from Twill when you want to change something.

Yes I know, but out of desperation I put all the relevant entries and start poking them in order to make it work.

I'd try to build before trying to run the dev server in a Docker container as those are 2 different issues.

I guess you mean building directly in my system instead of inside of the docker container? Ok, i'll try it. Anyway I think is something related to port mapping and laradock workspace but anyway I'll try that way.

Are those linter issues coming from your custom components?

Yep, all from my custom components. Can the linter be disabled or ignore specific paths/files? Not against clean/good code but I think the rules are too ultra-tight, as I'm developing this alone and just a basic set will be sufficient.

[ifox]

We can definitely look into making the linter configurable. Can you try to update https://github.com/area17/twill/blob/2.x/.eslintrc.js locally and see if you're able to go through? Or otherwise, using the useEslint: false option in the vue.config.js file. If that works for you, we can totally make that an option.

[ifox]

Building should not be a problem in your container if you have the right node and npm versions. I was more thinking that the dev server might need more adjustments and that you probably want to focus on fixing your build first.

[zedee]

We can definitely look into making the linter configurable. Can you try to update https://github.com/area17/twill/blob/2.x/.eslintrc.js locally and see if you're able to go through? Or otherwise, using the useEslint: false option in the vue.config.js file. If that works for you, we can totally make that an option.

Fantastic, that worked. I'll set it up on my fork.

I tried to run all the npm stuff locally (outside the container), and seen some improvements, but still is not working. If I try to access to http://localhost:8081/ (which is where php artisan twill:dev points when finished), I get a 404 error with this message:

Cannot GET /

Happened the same when I mapped docker workspace (where I run all artisan and npm commands) to an external port.

[zedee]

the dev server might need more adjustments and that you probably want to focus on fixing your build first.

Yes, indeed. I see you did made quite an improvement with this version and I appreciate a lot features like this that I was needing so bad, the complicated part is I made too many hacks and now well, doing the 'right way' is not working for me as expected.

OK, so what we have now is that I can access to the Node dev server. The thing is that at this moment, seems not to serve anything

[ifox]

The root of the dev server doesn't serve anything, try: http://localhost:8081/twill-manifest.json (if 8081 is still the port you're getting out of php artisan twill:dev). You can add the --noInstall option too to avoid waiting for npm installations each time you restart it

[zedee]

The root of the dev server doesn't serve anything, try: http://localhost:8081/twill-manifest.json (if 8081 is still the port you're getting out of php artisan twill:dev). You can add the --noInstall option too to avoid waiting for npm installations each time you restart it

Ahh.... Okay, yes. Now http://localhost:8081/twill-manifest.json is serving the .json file correctly.

But when I access to http://admin.mysite.local it still complains about not finding the manifest file.

UPDATE: Okay, we're getting closer. I found what was going on. All had to do with Docker.

This is an issue between what the php-fpm docker container "sees". Obviously localhost was not working because wasn't pointing to the node dev container. Now I put the IP of the container where I'm running twill:dev and is working.

[ifox]

When you are browsing locally the page will request twill.dev_mode_url, which is probably not resolved outside of your container. Or are you running it locally right now?

[zedee]

When you are browsing locally the page will request twill.dev_mode_url, which is probably not resolved outside of your container. Or are you running it locally right now?

Exactly. That's what happened. (You answered while I was updating).

Jeez, many thanks for your patience and assistance, you made me find finally what was going on.

[ifox]

Amazing! Glad I could help. Are your custom blocks back? 😁

[zedee]

Amazing! Glad I could help. Are your custom blocks back?

Yes, what a relief. When I noticed that they disappeared first time, I almost fainted.

Fortunately with the changes you made on last version, it will be less painful/hacky to customize and debug custom components. Thanks to you and your team!

[ifox]

Thank you!

Exactly, a little trouble but get them back but a much better setup in the long run, and I'm sure this thread will be helpful to others.

About the linting, I'm sure you should be able to fix most of your issues automatically with the --fix option of Vue CLI/Eslint.

[zedee]

About the linting, I'm sure you should be able to fix most of your issues automatically with the --fix option of Vue CLI/Eslint.

By the way, where can I put this --fix option?

Well, I tried but cannot disable eslint at all

[ifox]

When working in Twill directly I use npm run lint --fix.

It should be possible to run something like that on your own files.