Visitar URL original
Add better VDOM support, use different template syntax. by garrensweet · Pull Request #184 · networked-aframe/networked-aframe · GitHub
Skip to content

Add better VDOM support, use different template syntax. - #184

Open
garrensweet wants to merge 4 commits into
networked-aframe:masterfrom
garrensweet:master
Open

garrensweet wants to merge 4 commits into
networked-aframe:masterfrom
garrensweet:master

Conversation

@garrensweet

Copy link
Copy Markdown
  • 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 the NAF.log system.

  • 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.

@garrensweet

Copy link
Copy Markdown
Author

@haydenjameslee bump

@vincentfretin vincentfretin left a comment •

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/Schemas.js
return;
}
this.templateCache[schema.template] = document.importNode(templateEl.content, true);
this.templateCache[schema.template] = document.importNode(templateEl.childNodes[0], true);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this is the main part to be able to use naf-template tag with vuejs?

Comment thread src/Schemas.js

isTemplateTag(el) {
return el.tagName.toLowerCase() === 'template';
return ['naf-template', 'template'].indexOf(el.tagName.toLowerCase()) > -1

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this is the main part to be able to use naf-template tag with vuejs?

Comment thread src/Schemas.js

templateHasOneOrZeroChildren(el) {
return el.content.childElementCount < 2;
return el.childNodes.length < 2

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess this is the main part to be able to use naf-template tag with vuejs?

@vincentfretin

Copy link
Copy Markdown
Member

If you really need a different tag name for vuejs, please add a paragraph about it in the README.

@vincentfretin

Copy link
Copy Markdown
Member

There was an aframe-react issue here #226 this was a similar issue? Although I don't understand it completely.

@garrensweet

Copy link
Copy Markdown
Author

@vincentfretin The issue with the <template is systemic to Vue in particular:

Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

Because of this, Vue attempts to parse every tag with <template as its own and there is no way to ignore it from the Vue library. Therefore, anytime we use <template within a Vue component, the result is that the build will be broken and Vue will throw an egregious amount of errors.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants