Calling Developers!
We are reenergizing our code contribution process! Learn More

What are the Slack Archives?

It’s a history of our time together in the Slack Community! There’s a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.

Because this space is not active, you won’t be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..

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

Options
U04TQ9UG04U
U04TQ9UG04U Posts: 25 🧑🏻‍🚀 - Cadet
edited March 2023 in Help

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 ?

Comments

  • U01K43ADW5N
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    edited March 2023
    Options

    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
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    Options

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

  • U04TQ9UG04U
    U04TQ9UG04U Posts: 25 🧑🏻‍🚀 - Cadet
    Options

    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
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    Options
    {% define config = {
        name: 'form',
        tag: 'form'
    } %}
    

    you'll need something like this

  • U04TQ9UG04U
    U04TQ9UG04U Posts: 25 🧑🏻‍🚀 - Cadet
    Options

    oh okay.
    but nope, didn't change anything

  • U01K43ADW5N
    U01K43ADW5N Posts: 69 🧑🏻‍🚀 - Cadet
    Options

    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
    U04TQ9UG04U Posts: 25 🧑🏻‍🚀 - Cadet
    Options

    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
    U04TQ9UG04U Posts: 25 🧑🏻‍🚀 - Cadet
    Options

    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
    U019JM2HE7N Posts: 61 🧑🏻‍🚀 - Cadet
    edited March 2023
    Options

    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
    U019JM2HE7N Posts: 61 🧑🏻‍🚀 - Cadet
    Options

    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
    U04TQ9UG04U Posts: 25 🧑🏻‍🚀 - Cadet
    Options

    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
    U019JM2HE7N Posts: 61 🧑🏻‍🚀 - Cadet
    Options

    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
    U04TQ9UG04U Posts: 25 🧑🏻‍🚀 - Cadet
    edited March 2023
    Options

    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 🙏