Update index.html · Pull Request #19 · x-tag/x-tag.github.io

ghost · 2018-04-08T06:39:03Z

removed unfinished sentence.
Added Creating your own Extension Heading did not finish content.

removed unfinished sentence. Added `Creating your own Extension` Heading did not finish content.

added a line for `creating an extension` moved `creating an extension` up a section

ghost · 2018-04-08T13:10:29Z

closing pull request #16
this PR contains all the changes from the #16

additional: changed two `h4` headings to `h3` headings => To an Extended Voyage and Say Hello to Custom Attribute Accessors. I was going to put an additional example that doesn't use the `type` and also an example with an event to show the versatility of the X-Tag. Let me know what issues their are

csuwildcat · 2018-04-13T15:19:24Z

-    // the disabled="" attribute. Because it is declared as a boolean, 
-    // all values passed into its getter/setter will be a Boolean.
-    this.firstElementChild.disabled = value;
+  get 'mode::attr'(){ 


Can you explain this part a bit? The template extension itself auto-switches template renders when you change the template via the template setter: this.template = 'myModeSnippet'

So basically what I did here was use it the way your template attribute uses it. I wasn't sure about this myself, did you want to include any content on these types of uses?

In the future I can bring up issues before making a PR.

Minus the promise api bit of course.

==> If you were using other dependencies that used a template attribute using render directly instead of initiating the template setter could be a work around.

I may be mistaken but using the render() method doesn't set the template attribute or am I incorrect, @csuwildcat?

I got that mistaken a bit...the render() api will always write the newest template that you summoned into existence...which I thought it wouldn't. Maybe a line in the docs should be added just in case others misunderstand that templates get replaced rather than appended onto the targeted node.

The mode attribute itself was so that you could create different types and than define different modes for those types. I have a bit more for x-tag components concerning types and modes.

I have to push an update to my dashboard build, when I do that I could create a branch with the build that utilizes the x-tags type and mode extension, if you want. It would be helpful, cause I could use some help concerning the event API being used in the extensions being defined. [i.e. they are not firing when added to an extension object]

I did more testing with the extensions and got the src plugin running, I guess something maybe out of place somewhere I overlooked.

Duh I just found it.

I'm sorry for bombing this thread but this is annoying me...I have bit of code working the way its supposed to but it matters what order I put the extensions in. For instance this works =>
XTagElement.extensions("mode","typed",...)

but not

XTagElement.extensions("typed","mode",...)

Is this a bug or is their a reason I'm not seeing?

csuwildcat · 2018-04-13T15:21:51Z

-<h4>To an Extended Voyage</h4>
+<pre class="language-javascript"><code>// Lets create our X-Tag extension.
+
+xtag.extensions.lifecycle = {


While this is absolutely a technically accurate example, I think it could confuse people to see something that looks like the old API/W3C spec - maybe we can get an example that is of a new type of feature?

I agree, I threw it in there from my own v2 extensions that I'm building. How about making a `xtag.extensions.jenny = { }' example?

lol sorry xtag.extensions.foo

I'm going to commit a different example today.

@csuwildcat

@csuwildcat, How is this?

removed "*::lifecycle" with "::gobble"

ghost · 2018-04-26T04:19:14Z

I think its a good idea to commit an extensions example from the jasmine testing what do you think? I think that the examples I used are good but in a hacky sort of way....

csuwildcat · 2018-04-26T11:52:38Z

I agree that the test examples are probably a good idea for this.

…

On Wed, Apr 25, 2018, 9:19 PM KIP ***@***.***> wrote: I think its a good idea to commit an extensions example from the jasmine testing what do you think? I think that the examples I used are good but in a hacky sort of way.... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAICyuL1WajnEx1hGwoausd8VGwQ2oiUks5tsUrCgaJpZM4TLaYY> .

csuwildcat · 2018-04-27T02:02:45Z

This could be a bug, I'm not sure why this would happen. Can you create a simple Codepen out of this example and link it here?

…

On Thu, Apr 26, 2018, 7:00 PM KIP ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In index.html <#19 (comment)>: > -xtag.create('x-bar', class extends XTagElement { - '::template(true)' (){ return '<input />' } - set 'disabled::attr(boolean)' (value){ - // The ::attr extended property links node.disabled to gets/sets of - // the disabled="" attribute. Because it is declared as a boolean, - // all values passed into its getter/setter will be a Boolean. - this.firstElementChild.disabled = value; + get 'mode::attr'(){ Is this a bug or is their a reason I'm not seeing? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAICymlK7aCwUo3jBxhf22mfDi7alqPrks5tsnutgaJpZM4TLaYY> .

ghost · 2018-04-27T02:05:24Z

Of course.! :)

ghost · 2018-04-27T02:15:46Z

https://codepen.io/kipomaha/pen/xjRKwa

EDIT: I put comments and the html

EDIT: Do you understand the comments @csuwildcat ?

EDIT: I thought I changed all the mistaken => (base) => class extends xtagelement {}
to =>
(base) => class extends base{} ....sorry.... :(

Good update so far.

csuwildcat · 2018-04-27T17:47:12Z

The test case is pretty large, and I can't really track the error well, given there are many, many JS includes and it is hard to understand the loading sequence. Can you do something that shows where the x-tag lib is being loaded, vs the Pen code that throws? You are loading the lib before the custom code, correct?

…

On Thu, Apr 26, 2018 at 7:15 PM, KIP ***@***.***> wrote: https://codepen.io/kipomaha/pen/xjRKwa — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAICykrYTloOqTTP-QcZbzH_XiT7ngWCks5tsn9VgaJpZM4TLaYY> .

csuwildcat · 2018-04-27T17:52:43Z

It looks like the Pen is failing to load the base X-Tag JS, which is making it impossible to debug any subsequent issue that may be in play further down when you use the lib/extensions code. On Fri, Apr 27, 2018 at 10:46 AM, Daniel Buchner <danieljb2@gmail.com> wrote:

…

The test case is pretty large, and I can't really track the error well, given there are many, many JS includes and it is hard to understand the loading sequence. Can you do something that shows where the x-tag lib is being loaded, vs the Pen code that throws? You are loading the lib before the custom code, correct? On Thu, Apr 26, 2018 at 7:15 PM, KIP ***@***.***> wrote: > https://codepen.io/kipomaha/pen/xjRKwa > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#19 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AAICykrYTloOqTTP-QcZbzH_XiT7ngWCks5tsn9VgaJpZM4TLaYY> > . >

ghost · 2018-04-27T18:06:22Z

I am new to codepen. I just started the account, so I dumped a bunch and started reorganizing.
The Problem was resolved, though.
Sorry for the false alarm...long story short I thought I had fixed all the part in the code but missed an occurrence of it in the mode.js file.
MORE DETAILS BELOW. It is a strange occurrence and is a stable way to build a mixin if you had a diff library that you wanted to incorporate.

When I started to put it onto code pen it became apparent to me what had happened inadvertently.

When I created the mixin for the type extension I went and did:

mixin: (base) => class extends XTagElement {}
instead of
mixin: (base) => class extends base {}

Which was a problem I had earlier [I thought for sure I had fixed them all] but didn't recognize the symptoms, because the oncompile , onparse, and onconstruct were working.

ghost · 2018-04-27T18:12:37Z

here is the code pen for the offending file. https://codepen.io/kipomaha/pen/gzLKea?editors=1010

ghost · 2018-04-27T18:17:56Z

I guess what I did was create a custom class mixin... sort of by accident.

ghost · 2018-04-27T18:47:05Z

https://codepen.io/kipomaha/full/xjRKwa <= example of my error....nobody should ever do this.......

ghost · 2018-04-27T19:03:29Z

@csuwildcat the example of my error is their if you wanted to see what it causes.

ghost · 2018-04-27T19:04:48Z

Open the console [may want to drag it so its taller] and you will see the log. x-bili doesn't see the bili attribute

csuwildcat · 2018-05-05T18:01:17Z

@kipomaha this is the output I see on that page:

pen.js:28   hi onParse.
pen.js:8     hi onParse.
pen.js:36   testin attr bil.
pen.js:37   hi onConstruct
pen.js:16   testin attr bili.
pen.js:17   hi onConstruct
pen.js:28   hi onParse.
pen.js:8     hi onParse.
pen.js:36   testin attr bil.
pen.js:37   hi onConstruct
pen.js:16   undefined
pen.js:17   hi onConstruct

Is the issue line 16 where the value is undefined?

ghost · 2018-05-05T20:02:45Z

So the code runs the same except that the XTagElement.extensions("bil","bili",...) is switched up so that the custom extensions are presented as parameters in a different order in each custom element, @csu wildcat.
The order causes it to be undefined in one custom element and not the other. It's kind of confusing...sorry :(
-- EDIT: @csuwildcat so yeah it was cause it was undefined and I couldn't figure it out. I had the extension in a separate file and forgot to fix an error. It confused me cause when I switched the order of the extension parameters it would work. Sorry for the confusion.

ghost · 2018-05-05T23:32:29Z

@csuwildcat I made changes to the test case. Below is the log. Okay so the extension gets executed in the order that they appear in the element definitions. So the parse, compile, and construct methods will get executed in the order they appear not in the extension parameters but in the object. I still don't quite get why the order of this matters...I mean the mistake in the mixin I made should have thrown an error I would have thought intuitively but it runs in some cases making it hard to identify when boxing with multiple JavaScript element definition files.

 Parsing `bib` extension.   ------   xjRKwa (85,5)

 Parsing `bar` extension.   ------   xjRKwa (66,5)

 Parsing `bal` extension.   ------   xjRKwa (104,5)

 Compiling `bib` extension.   ------   xjRKwa (88,5)

 Compiling `bar` extension   ------   xjRKwa (69,5)

 Compiling `bal` extension.   ------   xjRKwa (107,5)

 Constructing `bib` extension for:    ------   xjRKwa (91,5)

<x-foo bal="x-foo" bib="x-foo" bili="x-foo"></x-foo>

 Testing attr getter `bil`.   ------   xjRKwa (93,5)

 Result:true   ------   xjRKwa (94,16)

 Constructing `bar` extension for:    ------   xjRKwa (72,5)


<x-foo bal="x-foo" bib="x-foo" bili="x-foo"></x-foo>

 Testing attr getter bili.   ------   xjRKwa (74,5)

 Result:true   ------   xjRKwa (75,17)

 Constructing `bal` extension for:    ------   xjRKwa (110,5)


<x-foo bal="x-foo" bib="x-foo" bili="x-foo"></x-foo>

 Testing attr bal.   ------   xjRKwa (112,5)

 Result:true   ------   xjRKwa (113,16)

 Parsing `bib` extension.   ------   xjRKwa (85,5)

 Parsing `bar` extension...   ------   xjRKwa (66,5)

 Parsing `bal` extension.   ------   xjRKwa (104,5)

Compiling `bib` extension.  ------   xjRKwa (88,5)

 Compiling `bar` extension  ------   xjRKwa (69,5)

 Compiling `bal` extension.  ------   xjRKwa (107,5)

 Constructing `bib` extension for:   ------   xjRKwa (91,5)

<x-tup bal="x-tup" bib="x-tup" bili="x-tup"></x-tup>

 Testing attr getter `bil`.  ------   xjRKwa (93,5)

 Result:true  ------   xjRKwa (94,16)

 Constructing `bar` extension for:  ------    xjRKwa (72,5)

<x-tup bal="x-tup" bib="x-tup" bili="x-tup"></x-tup>

 undefined  ------   xjRKwa (74,5)

 Result:false  ------   xjRKwa (75,49)

 Constructing `bal` extension for:   ------   xjRKwa (110,5)
 
<x-tup bal="x-tup" bib="x-tup" bili="x-tup"></x-tup>

 Testing attr bal.  ------   xjRKwa (112,5)

 Result:true   ------   xjRKwa (113,16)

kipomaha added 2 commits April 8, 2018 01:32

Update index.html

f433afd

removed unfinished sentence. Added `Creating your own Extension` Heading did not finish content.

patch-2

8a8cf6c

added a line for `creating an extension` moved `creating an extension` up a section

csuwildcat reviewed Apr 13, 2018

View reviewed changes

kipomaha added 2 commits April 18, 2018 13:37

Update index.html

c393de6

@csuwildcat, How is this?

Update index.html

02009dc

removed "*::lifecycle" with "::gobble"

ghost mentioned this pull request Apr 27, 2018

Issues @ x-tag.github.io/docs #21

Open

Uh oh!

Conversation

ghost commented Apr 8, 2018

Uh oh!

ghost commented Apr 8, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ghost Apr 13, 2018 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ghost Apr 25, 2018 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ghost commented Apr 26, 2018

Uh oh!

csuwildcat commented Apr 26, 2018 via email

Uh oh!

csuwildcat commented Apr 27, 2018 via email

Uh oh!

ghost commented Apr 27, 2018

Uh oh!

ghost commented Apr 27, 2018 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

csuwildcat commented Apr 27, 2018 via email

Uh oh!

csuwildcat commented Apr 27, 2018 via email

Uh oh!

ghost commented Apr 27, 2018

Uh oh!

ghost commented Apr 27, 2018

Uh oh!

ghost commented Apr 27, 2018 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghost commented Apr 27, 2018

Uh oh!

ghost commented Apr 27, 2018

Uh oh!

ghost commented Apr 27, 2018

Uh oh!

csuwildcat commented May 5, 2018

Uh oh!

ghost commented May 5, 2018 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ghost commented May 5, 2018 • edited by ghost Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ghost Apr 13, 2018 •

edited by ghost

Loading

ghost Apr 25, 2018 •

edited by ghost

Loading

ghost commented Apr 27, 2018 •

edited by ghost

Loading

ghost commented Apr 27, 2018 •

edited by ghost

Loading

ghost commented May 5, 2018 •

edited by ghost

Loading

ghost commented May 5, 2018 •

edited by ghost

Loading