Define new Trait type in typescript

[jcenlo]

Hi, i am trying to create a plugin with typescript, but i am not the best with typescript, i need a little bit of help, i am not sure how to solve this error, i just follow this docs https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type , in js works perfect but when i try to do in typescript i get error

i am really stuck with this line 11, don't recognise (.get)

import type { Editor, TraitProperties } from 'grapesjs';
import { RequiredPluginOptions } from '.';

type AddTraitType = (id: string, def: TraitProperties) => void;

export default (editor: Editor, opts: RequiredPluginOptions): void => {
  editor.TraitManager.addType('href-next', {
    // Expects as return a simple HTML string or an HTML element
    createInput: ({ trait }): HTMLElement => {
      // Here we can decide to use properties from the trait
      const traitOpts = trait.get('options') || [];
      const options = traitOpts.length
        ? traitOpts
        : [
            { id: 'url', name: 'URL' },
            { id: 'email', name: 'Email' },
          ];

      // Create a new element container and add some content
      const el = document.createElement('div');
      el.innerHTML = `
        <select class="href-next__type">
          ${options
            .map((opt) => `<option value="${opt.id}">${opt.name}</option>`)
            .join('')}
        </select>
        <div class="href-next__url-inputs">
          <input class="href-next__url" placeholder="Insert URL"/>
        </div>
        <div class="href-next__email-inputs">
          <input class="href-next__email" placeholder="Insert email"/>
          <input class="href-next__email-subject" placeholder="Insert subject"/>
        </div>
      `;

      // Let's make our content interactive
      const inputsUrl = el.querySelector('.href-next__url-inputs')!;
      const inputsEmail = el.querySelector('.href-next__email-inputs')!;
      const inputType = el.querySelector('.href-next__type')!;
      inputType.addEventListener('change', (ev) => {
        switch (ev.target.value) {
          case 'url':
            inputsUrl.style.display = '';
            inputsEmail.style.display = 'none';
            break;
          case 'email':
            inputsUrl.style.display = 'none';
            inputsEmail.style.display = '';
            break;
        }
      });

      return el;
    },
  });
};

Thanks by the help in advance, gracias

[Julia-Alberici]

What is the error messsage that shows when you hover the error?

[jcenlo]

Hi Julia,

this is the error

Property 'get' does not exist on type 'Trait'.

i have in mind 3 theories

extend a grapesjs property or add types, but my problem is i don't know what i have to extend or import, i am exploring grapesjs code trying to find something, but i am not lucky at the moment

also i am not sure if, with the new update the method has change and docs are not update

my components traits are not returning the right info

[jcenlo]

i think i find a solution, still show a error but looks like @artf has used in here

createInput({ trait }) {
	// @ts-ignore
	const { model, target } = this;
	const opts = model.get("options") || [];
}

[Julia-Alberici]

yeah, you got it. Unfortunately grapesjs still have a lot of typescript issues (maybe some of them are solved on the latest version, didn't test it) so when you got stuck with types the only way to go is @ts-ignore :)

[artf]

Yeah TS declarations are still to improve but honestly the 'get' does not exist on type 'Trait' is not expected, @jcenlo do you use the latest version?

[jcenlo]

@Julia-Alberici Thanks for your help , Now I have a new mantra...

Keep Calm and use @ts-ignore

@artf, yes i am using the last version, i am trying to create something like this but with updated code

Good to know this issues, i was overthinking too much trying to add types, etc, i will use @ts-ignore until TS works fine, thanks for all your work

"devDependencies": {
    "grapesjs-cli": "^4.0.1"
  },
  "dependencies": {
    "grapesjs": "^0.21.1"
  }