Hi all, I am having a really fumb issue with the type script files. I'm trying to add a custom ts fi

U04TQ9UG04U

Hi all,
I am having a really fumb issue with the type script files. I'm trying to add a custom ts file to a bundle but it isn't loaded.
To illustrate, I'm trying to add a TS file to the form template.
in the ShopUi/Theme/default/componenets/molecules/form folder.
the contents of the index.ts file is :

import './form';
import register from 'ShopUi/app/registry';
export default register('form', () => import(/* webpackMode: "eager" */ './form'));

I created a form.ts file which contains the following :

import Component from 'ShopUi/models/component';

export default class Form extends Component {

    protected readyCallback(): void {
    }

    protected init() {
        alert('hey');
        super.init();

    }
}

I ran commands docker/sdk cli npm run yves , docker/sdk console frontend:yves:build , docker/sdk cli npm run yves:watch, docker/sdk console cache:empty-all (in case it was a cache issue 🤷 )

But the changes to the index.ts are not being taken into account and the new form.ts file is not loaded ...

Does anyone no if I'm missing a command or if I need to specify the file somewhere else ?

U01K43ADW5N

hi christian. everything seems correct in the .ts files.
have you changed the twig component tag to the same name as the tag name used in your register? 'form' in your case.

U01K43ADW5N

If they are not the same, the app wiill not mount the component

U04TQ9UG04U

Thanks for your reply.

I don't get what you're proposing however,

This is contents of the default form.twig file in the same folder :

{% extends molecule('form', '@SprykerShop:ShopUi') %}

{% define data = {
    shouldRequireMessage: false,
} %}

{% block body %}
    helloJS <br>
    {{ config.jsName }}
    {% block title %}
        {{ parent() }}
    {% endblock %}

    {% if data.enableStart %}
        {{ form_start(data.form, data.options) }}
    {% endif %}

    <div class="{{config.name}}__container">
        {% block errors %}
            {{ parent() }}
        {% endblock %}

        {% block fieldset %}
            {{ parent() }}
        {% endblock %}

        {% block message %}
            {% if data.shouldRequireMessage %}
                <div class="{{ config.name }}__require-message">
                    <small class="text-secondary">{{ 'general.required_fields.text' | trans }}</small>
                </div>
            {% endif %}
        {% endblock %}

        <div class="{{config.name}}__actions">
            {% block actions %}
                {{ parent() }}
            {% endblock %}
        </div>
    </div>

    {% if data.enableEnd %}
        {{ form_end(data.form) }}
    {% endif %}
{% endblock %}

I juste added the "helloJS" and config.jsName (that outpust "js-form").

Should I extend the component at the top of the twig file ?

{% extends model('component') %}

U01K43ADW5N

{% define config = {
    name: 'form',
    tag: 'form'
} %}

you'll need something like this

U04TQ9UG04U

oh okay.
but nope, didn't change anything

U01K43ADW5N

hmm... is this component actually a twig component?
I can see that it extends the form from core ShopUI
and that form is not actually a component (it does not extends the component model)

U04TQ9UG04U

good question... I guess so because this folder src/Pyz/Yves/ShopUi/Theme/default/components/molecules/form/
is already present in the b2b demo shop. I juste added the form.ts to test integrating javascript in the page / component to understand the mechanics of it all. Then try to implement some custom JS in my own widget.

So if I follow you, I should created a twig template that extends the component model to integrate some JS on the page ??

All theme subfolders (molecules, atoms, ...) have their own scss, twig and index.ts file so I find it strange that there can't be a custom TS file whatever the twig template extends.

U04TQ9UG04U

I've noticed that the file is indeed added to the default/js/yves_default.app.js file
So the compiling seems to work, however the file is never call / loaded on the page call

U019JM2HE7N

form is not a valid "name" for your Custom Element, because it does not contain a hyphen:
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define#parameters

U019JM2HE7N

Don't exactly know what you are trying to achieve, but if you try add javascript logic to all forms, I would recommend registering another component (with hyphen) via the registry and placing it in your form.tpl

U04TQ9UG04U

Thanks for your comments @U019JM2HE7N. I will be careful on my naming of custom elements in the futur.

My first goal is to add some javascript to a custom widget.

But not being able to load the typescript file for my new widget, I wanted to add some js to an already existing element (ie: form) to try and grasp the mechanics of it all.

However I am still unable to load any typescript and don't understand why....

U019JM2HE7N

Hi @U04TQ9UG04U, so have you tried to add a atomic component with a valid tagName in index.ts and a matching twig file? If you provide some code i can have a look why your typescript code is not loading

U04TQ9UG04U

Hi @U019JM2HE7N, No I have not myself. But the frontend dev that works with us found why it wasn't working. If I understood correctly, the TS file wasn't placed in the right folder. Placing it in the organisms folder made it work.
We had some cache issues in in our teams environnement so maybe that played a part... 🤷
There are so many new things with Spryker, it's hard to know where an issue is coming from .
But all in all, thanks for your help 🙏