Issues @ x-tag.github.io/docs

[Enteleform]

[1]

The Getting Started & Gettin' Jedi with Pseudos sections mention lifecycle callbacks, but do not address how to work with them. I've tried implementing them via pseudo, event, function, & x-tag v1's implementation; but haven't been able to get them working.

---

[2]

The first example in Gettin' Jedi with Pseudos causes an exception:

xtag.register('xtag-example', {
  content: '<input/>',
  events: {
    'tap:delegate(input)': function(){
      // Perform an action only when the user taps on an
      // <input/> element within your component.
    }
  }
});

Uncaught TypeError: Failed to execute 'define' on 'CustomElementRegistry': The callback provided as parameter 2 is not a function.
    at Object.register (x-tag.js:131)
    at app.js:80

---

[3]

The xtag.addEvents(ELEMENT, OBJECT) example causes an exception:

xtag.addEvents(myElement, {
  'tap': function(event){
    alert('myElement was just tapped');
  },
  'keypress:keypass(13)': function(event){
    alert('The enter key was pressed, all other keys are blocked');
  }
});

Uncaught TypeError: Cannot read property 'onParse' of undefined
    at r.replace (x-tag.js:2)
    at String.replace (<anonymous>)
    at Object.addEvent (x-tag.js:2)
    at Object.addEvents (x-tag.js:2)
    at app.js:94

The exception is caused by 'keypress:keypass(13)': function(event){.

'keypress': function(event){ works as expected. What is the proper syntax for checking specific keypresses?

---

[4]

The example at A Word on Extensions and Pseudos seems incomplete:

xtag.create('x-foo', class extends XTagElement {
  'alert::foo' (){

  }
  'count:bar' (){

  }
  'send::attr:bar:zaz' (){
    
  }
});

The example would be more helpful with code & output that demonstrates how/when each of the pseudos/extensions are utilized.

[ghost]

@Enteleform
look at the specs here, those examples need to be updated in the docs...
link to specs => https://github.com/x-tag/core/blob/master/tests/core/spec.js

line 448 :)

[ghost]

That gives an example of delegate, the use of content is obsolete in v2 and is replace with template.

[Enteleform]

@KipOmaha
Oh cool, thanks. Do you know how to access lifecycle callbacks in v2? That's the main issue I'm personally running into. Aside from that, just figured I'd point out the other documentation issues I ran into.

[ghost]

In v2 cumstom elements is used and the XTagElement and xtag object work together to provide its own es6 lifecycle callback. If you look at the extensions you can see the new syntax is

xtag.extensions.myFooExtension = {
  mixin: (base) => class extends base {
    connectedCallback() {
      // to do application logic
    }
  }
  onParse(ctor,name,args,obj) {
  // to do application logic
  },
  onCompile(ctor,name,args,obj) {
  // to do application logic
  },
  onConstruct(node,obj) {
  // to do application logic
  }
}

Its important to understand the execution thread and the parameters so make sure you take a look at the specs and also the PR requests => #19

The linked pr is for a better extension documentation. I don't work on the library directly but am glad to helps the xtag project if you have any ideas for better extension docs let me know.

Also if your looking for compat with v1 lifecycle callbacks I don't think its part of the new specs.

[Enteleform]

@KipOmaha
Thanks, looked into it & found out about connectedCallback, disconnectedCallback, adoptedCallback, & attributeChangedCallback @ https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

These actually work directly in a subclassed XTagElement & don't seem to require the use of extensions.

[ghost]

Oh sorry yeah, i misunderstood. I thought you were talking about v1 lifecycle, sorry.

FYI they work for extension mixins too