Bug 38714

Summary: Adjust templates for prettier
Product: Koha Reporter: Jonathan Druart <jonathan.druart>
Component: TemplatesAssignee: Jonathan Druart <jonathan.druart>
Status: Signed Off --- QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: dcook, lucas, victor
Version: unspecified   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:
Bug Depends on: 38713, 38720, 38832, 38838, 38900    
Bug Blocks: 38664, 38718    

Description Jonathan Druart 2024-12-16 13:12:10 UTC
In order to run prettier on our .tt files we will need to adjust some structures.

For instance we will need to remove the following construction:
[% IF selected %]
  <option selected>
[% ELSE %]
  <option>
[% END %]
</option>

Or
[% IF error %]
  <div class="error">
[% ELSE %]
  <div>
[% END %]

It will require to reorganize the code in some places but nothing hard.

In case it is not possible we will flag the template section to ignore it for tidy.
Comment 1 Jonathan Druart 2025-01-21 08:45:56 UTC
This is ready for testing, you can test using the last commit starting with "Bug 38714" from the branch of bug 38664.

You can test this even if bug 38720 is not in > NSO. We will be able here to tell if HTML1 is valid or not.

It will be interesting to test the whole translation process:
- generate po files before these patches
- commit koha-10n
- apply patches and generate po files
- compare

- test the UI in translated interfaces

- look at the generated templates and make sure the changes do not break them.
Comment 2 Lucas Gass (lukeg) 2025-01-28 16:55:27 UTC
I did this from outside my k-t-d:

cd /somewhere/outside/your/koha/path
git clone https://gitlab.com/joubu/prettier-plugin-jinja-template.git
cd /koha-dir
yarn install
ln -s /path/to/prettier-plugin-jinja-template /path/to/koha/node_modules/prettier-plugin-jinja-template

and then inside my k-t-d:

kohadev-koha@kohadevbox:koha((b54a15b3d6e...))$ prettier koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
[error] Cannot find package 'prettier-plugin-jinja-template' imported from /kohadevbox/koha/noop.js
Comment 3 Jonathan Druart 2025-01-29 11:08:24 UTC
(In reply to Lucas Gass (lukeg) from comment #2)
> I did this from outside my k-t-d:
> 
> cd /somewhere/outside/your/koha/path
> git clone https://gitlab.com/joubu/prettier-plugin-jinja-template.git
> cd /koha-dir
> yarn install
> ln -s /path/to/prettier-plugin-jinja-template
> /path/to/koha/node_modules/prettier-plugin-jinja-template
> 
> and then inside my k-t-d:
> 
> kohadev-koha@kohadevbox:koha((b54a15b3d6e...))$ prettier
> koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
> [error] Cannot find package 'prettier-plugin-jinja-template' imported from
> /kohadevbox/koha/noop.js

Yes, within ktd the symlink will be broken.

BUT! Update:

I've published our own npm package, see https://www.npmjs.com/package/@koha-community/prettier-plugin-template-toolkit (README is wrong for 2.0.1, will adjust later, the plugin name is prettierrc.js needs to specify the "koha-community" namespace)

See the following commit on bug_38664:
Bug 38664: Use our own prettier plugin - @koha-community/prettier-plugin-template-toolkit


I would suggest you to:
git fetch joubu
git checkout last commit from bug 38714 on the bug_38664 branch
git show bug_38664:.prettierrc.js > .prettierrc.js
git show bug_38664:package.json > package.json
yarn install

Now try:
prettier koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt

=> It should return a tidy version of the file.
Comment 4 Lucas Gass (lukeg) 2025-01-29 16:46:21 UTC
(In reply to Jonathan Druart from comment #3)
> (In reply to Lucas Gass (lukeg) from comment #2)
> > I did this from outside my k-t-d:
> > 
> > cd /somewhere/outside/your/koha/path
> > git clone https://gitlab.com/joubu/prettier-plugin-jinja-template.git
> > cd /koha-dir
> > yarn install
> > ln -s /path/to/prettier-plugin-jinja-template
> > /path/to/koha/node_modules/prettier-plugin-jinja-template
> > 
> > and then inside my k-t-d:
> > 
> > kohadev-koha@kohadevbox:koha((b54a15b3d6e...))$ prettier
> > koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
> > [error] Cannot find package 'prettier-plugin-jinja-template' imported from
> > /kohadevbox/koha/noop.js
> 
> Yes, within ktd the symlink will be broken.
> 
> BUT! Update:
> 
> I've published our own npm package, see
> https://www.npmjs.com/package/@koha-community/prettier-plugin-template-
> toolkit (README is wrong for 2.0.1, will adjust later, the plugin name is
> prettierrc.js needs to specify the "koha-community" namespace)
> 
> See the following commit on bug_38664:
> Bug 38664: Use our own prettier plugin -
> @koha-community/prettier-plugin-template-toolkit
> 
> 
> I would suggest you to:
> git fetch joubu
> git checkout last commit from bug 38714 on the bug_38664 branch
> git show bug_38664:.prettierrc.js > .prettierrc.js
> git show bug_38664:package.json > package.json
> yarn install
> 
> Now try:
> prettier koha-tmpl/intranet-tmpl/prog/en/modules/intranet-main.tt
> 
> => It should return a tidy version of the file.

Thank you, this is working for me using these steps. Now I will test with some translated interfaces.
Comment 5 Lucas Gass (lukeg) 2025-02-04 14:45:09 UTC
I've tested this with translations and I would add my sign-off line at this point.
Comment 6 Katrin Fischer 2025-02-04 14:59:37 UTC
(In reply to Lucas Gass (lukeg) from comment #5)
> I've tested this with translations and I would add my sign-off line at this
> point.

Thanks Lucas!

We have some open dependencies here - could you take a look at them as well? (you might already have tested them with this one. bug 38720 and bug 38838.
Comment 7 Jonathan Druart 2025-02-05 20:07:18 UTC
(In reply to Lucas Gass (lukeg) from comment #5)
> I've tested this with translations and I would add my sign-off line at this
> point.

Added your signed-off-by line to the 225 commits related to this bug that are on the bug_38664 branch.

Thanks, Lucas!