content stripped of elements when rendered

icyc9 commented 5 years ago

hey, the template is rendering the content as plain text, stripping the <tr> / <td> elements. @snuggs

<script src=//unpkg.com/snuggsi></script>

<tbody> 
  <template name=proxies>
    <tr>
      <td>{ip}</td>
      <td>{port}</td>
      <td>{user}</td>
      <td>{pass}</td>
      <td>{alive}</td>
      <td>{speed}</td>
      <td>{website}</td>
    </tr>
  </template>
</tbody>

<script>

const
  template = Template `proxies`
, context  = [
    { 
      ip: '54.86.170.131',
      port: '33128',
      user: 'rob',
      pass: '1111',
      alive: true,
      speed: 111,
      website: 'https://sneakyhead.com'
    }, 

    {
      ip: '54.86.170.142',
      port: '33128',
      user: 'rob',
      pass: '1111',
      alive: true,
      speed: 222,
      website: 'https://supremenewyork.com'
    }
  ]

template.bind (context)

</script>

output: `

  54.86.170.131
  33128
  rob
  1111
  true
  111
  https://sneakyhead.com

  54.86.170.142
  33128
  rob
  1111
  true
  222
  https://supremenewyork.com

`

snuggs commented 5 years ago

NICE FIND @RobertChristopher I remember back in the bad old days (2 or so years ago) there was some issue with inserting table rows. This may be it but I know there's a way around it. Will do some digging today. /cc @brandondees @tmornini @btakita @rianby64 @janz93

icyc9 commented 5 years ago

@snuggs very inspired by snuggsi & the philosophy here, its a large step away from the corporate code that powers the world wide web. I see myself as more of a `devpunk' haha & am inspired to deconstruct down to the platform layer. its a powerful foundation to reconstruct over & I've been shifting my perception of development.

this gem by @tmornini really woke me up. https://slack-files.com/T03JT4FC2-F151AAF7A-13fe6f98da

theres an art to building conventions and connecting them into larger flows. the medium of the web is shifting to web components & using the structure of links. a lot of these early web component frameworks are building complex solutions ( polymer ), which are early implementations. I'd prefer to plant my own seeds right on top of the platform & grow strong roots, building my own conventions. its an art of self expression thats not injected with corporate framework.

frameworks are competitive but snuggsi is complementary which is why I've really enjoyed working with it. another project that has really opened my mind is cell.js ( https://www.celljs.org ). plain old javascript objects are simple. simple is better than complex!

@snuggs been trying to get in contact man & get a hangout. I'd love to start contributing to snuggsi as I want to build all my creations over this architecture. small building blocks can build the stepping stones to large empires!

tmornini commented 5 years ago

@RobertChristopher Thanks for the mention, but I did write that post — though I agree with it.

I may have shared it, it feels familiar. 😎

snuggs commented 5 years ago

@RobertChristopher @tmornini found a good example of our scope. Because remember snuggsi is just automation of boilerplate to use what's already in the platform. Seems like we can iterate table rows so that's a good sign. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template#Example

icyc9 commented 5 years ago

@snuggs exactly, very simple. i'll do some self digging around the codebase to become more familiar. we are tree shaking the DOM of all its dependencies & stripping it to small templating. thats all you ever needed, simple man....

icyc9 commented 5 years ago

@snuggs intuition brought me into here https://github.com/devpunks/snuggsi/blob/master/token-list/index.es ...

snuggs commented 5 years ago

@RobertChristopher can you throw up a jsfiddle with a repro(duction) of the issue? Best part is you souldn't have to include any dependencies other than the HTML you provided. Then we can wrap a test case around it and wrap it up with an example with documentation since you've pretty much championed an example most of the way there.

@tmornini @brandondees @rianby64 and now we see the power of the library. #UseThePlatform

snuggs commented 4 years ago

@RobertChristopher @rianby64 @btakita I have been investigating this issue the past couple weeks and think we have a wrangle on things. We have some good news and bad news:

Bad News

Internet Explorer will strip <table> specific child elements (i.e. <tr>,<td>, etc.) from any element not within a <table>, <tbody>, <thead>, nor <tfoot>. This IS a platform issue of ALL Internet Explorer versions (excluding EDGE) P.S. It’s Not Possible! and seems like even tests with lit-html were disabled for Internet Explorer

This is an active problem which creates need for libraries to wrap html strings in appropriate parent tags. Internet Explorer 11 is now moved from Q1/2021 EOL to (sometime in)2021 😦 The same issue exists for <select> and <option>

Remedies

[ ] Create a detailed warning documentation when using <template>

(Now on to the) Good News

It is assumed a table cannot be created without a comment by using a template representing a partial aspect of the table.

Claims (Cannot create partial tables with templates): github.com/WebReflection/hyperHTML/issues/194 github.com/WebReflection/hyperHTML/issues/79#issue-248628718

Claim: Partial attributes and attributes without quotes https://github.com/WebReflection/hyperHTML/issues/79#issue-248628718

Our following examples hold this to not be true:

JSFiddle with table rows JSFiddle with table cells JSFiddle with partial attributes & attributes without comments

Remedies

[ ] Use Ranges in `<template>`

Use a Range instead of multiple string objects for template iteration. This is not only cleaner but allows markers to be placed in code. This prevents the need to have comments be used in order to find placement of replaceable content within the element. This allows us to Use DocumentFragments in memory which has been supported standard since jQuery. Best part is there is support back to 13 November, 2000 since DOM Level 2.

@RobertChristopher I have been investigating this issue the past couple weeks and think we have a wrangle on things. We have some good news and bad news:

Bad News

Internet Explorer will strip <table> specific child elements (i.e. <tr>,<td>, etc.) from any element not within a <table>, <tbody>, <thead>, nor <tfoot>. This IS a platform issue of ALL Internet Explorer versions (excluding EDGE) P.S. It’s Not Possible! and seems like even tests with lit-html were disabled for Internet Explorer

[ ] Use aria labeled custom elements for `<table>`s and `<select>`s

References: https://www.youtube.com/watch?v=7a6bLXw2lqQ https://github.com/GoogleChromeLabs/howto-components

Example


<!— Table —>
<aria-table role=table>
  <aria-thead>Header</aria-thead>
  <aria-tfoot>Foooter</aria-tfoot>

  <aria-tbody>
  <aria-tr role=row>
    <aria-td role=cell>Cells or rows can be repeated.</aria-td>
  </aria-tr>
  </aria-tbody>
</aria-table>

<!— Select —>
<aria-select role=listbox>
  <aria-optgroup role=listgroup>
    <aria-option role=listitem>Option Text</aria-option>
    <aria-option role=listitem>Option Text</aria-option>
  </aria-optgroup>

  <aria-option role=listitem selected>Option outside of group</aria-option>
</aria-select>

This will be a great choice as it is not only backwards compatible but forward thinking as well. Only question would be does this create an actual <table> and <select> for IE11?

Wrap `<template>` content in tables.

WARNING: Avoid like the plague (for obvious reasons) https://stackoverflow.com/questions/26384954/template-tag-polyfill-for-ie-11-not-working-with-table-tr-and-td/31617318

Use `<tr>` as an ad-hock »template »

Use a custom element. (Why not just start using them now instead of the things that don’t work?)

See example: https://github.com/w3c/webcomponents/issues/765#issuecomment-419721136

Perhaps this may be a good use case - https://github.com/aurelia/html-template-element/issues/3#issuecomment-171041821 Great blog post on solution - http://davismj.me/blog/advanced-tables/

References

W3C DOM Level 2 Ranges

devpunks / snuggsi