Add better VDOM support, use different template syntax. #184
Conversation
… template is reserved
…ion warning for <template>, but still support <template> for backwards compatability.
|
@haydenjameslee bump |
There was a problem hiding this comment.
Hi, I'm not going to merge this as it.
The template tag is a standard https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template I don't see why we can't use it.
Has the <template> tag a special meaning in vuejs? Isn't it an issue in vuejs? Do you really need a different tag name for vuejs?
I absolutely don't want a deprecation warning for this, it will be a pain for the users of this library. The <template> will stay in the examples.
I can consider a much smaller PR that modify the parts I commented, so isTemplateTag templateHasOneOrZeroChildren if it helps you with vuejs, but it should be backward compatible without vuejs with the examples with the <template> tag.
| @@ -28,7 +28,7 @@ class Schemas { | |||
| if (!this.validateTemplate(schema, templateEl)) { | |||
| return; | |||
| } | |||
| this.templateCache[schema.template] = document.importNode(templateEl.content, true); | |||
| this.templateCache[schema.template] = document.importNode(templateEl.childNodes[0], true); | |||
There was a problem hiding this comment.
I guess this is the main part to be able to use naf-template tag with vuejs?
| @@ -84,11 +87,11 @@ class Schemas { | |||
| } | |||
|
|
|||
| isTemplateTag(el) { | |||
| return el.tagName.toLowerCase() === 'template'; | |||
| return ['naf-template', 'template'].indexOf(el.tagName.toLowerCase()) > -1 | |||
There was a problem hiding this comment.
I guess this is the main part to be able to use naf-template tag with vuejs?
| } | ||
|
|
||
| templateHasOneOrZeroChildren(el) { | ||
| return el.content.childElementCount < 2; | ||
| return el.childNodes.length < 2 |
There was a problem hiding this comment.
I guess this is the main part to be able to use naf-template tag with vuejs?
|
If you really need a different tag name for vuejs, please add a paragraph about it in the README. |
|
There was an aframe-react issue here #226 this was a similar issue? Although I don't understand it completely. |
|
@vincentfretin The issue with the
Because of this, Vue attempts to parse every tag with There was a work around (I can't remember exactly what I did as it's been more than a year), but it made the workflow cumbersome and a pain to juggle. |
Updated the existing system which uses the base HTML entity
<template>in favor of<nav-template>, to avoid collisions when integrating with other frameworks, such as vue.js.Modified README.md and examples to illustrate the change to
<naf-template>.Added backwards compatibility support for the
<template>syntax with a deprecation warning using theNAF.logsystem.Updated the Schema node management system to use the actual Node Entities rather than inspecting the content, which could have collisions with other javascript libraries that rely on a self-managed virtual dom.