Giter Site home page Giter Site logo

Comments (4)

WebReflection avatar WebReflection commented on May 27, 2024

those are two different template literals ... try again:

const {wire, bind} = hyperHTML;

const li = info => hyperHTML.wire(info)`<li></li>`;

const info = {some: 'data'};
const sameLI = li(info)
 
// what if we use same template later on?
console.assert(
  sameLI === li(info),
  'same reference means exactly the same node'
);

from hyperhtml.

jakubhruby avatar jakubhruby commented on May 27, 2024

Please help me get the difference between calling wire() twice in code or twice via anonymous function. As I understand it you do not compare the content of literals, but the literal arrays (strict comparisons), am I right?

const {wire} = hyperHTML;

const info = {some: 'data'};
const notSameLI = hyperHTML.wire(info)`<li></li>`;
const sameLI = li();

function li()  {
	return hyperHTML.wire(info)`<li></li>`
}
 
// this works, because literal is created just once inside li() function body
console.assert(
  sameLI === li(),
  'sameLI: same reference means exactly the same node'
);

// this doesn't work, because we have two literal objects with the same content
console.assert(
  sameLI === hyperHTML.wire(info)`<li></li>`,
  'notSameLI: same reference means exactly the same node'
);

https://jsfiddle.net/t24qgs36/

from hyperhtml.

WebReflection avatar WebReflection commented on May 27, 2024

Please help me get the difference between calling wire() twice in code or twice via anonymous function.

The issue is not wire(), but how template literals uniqueness works.

const templates = new Set;
const tag = template => { templates.add(template); };
const same = value => tag`a${value}c`;

// these two calls will use the same template literal
same(1);
same(2);
// indeed the set size is 1
console.log(templates.size);

templates.clear();

// these are two different templates literals
// even with the same value (as it's irrelevant)
tag`a${1}c`;
tag`a${1}c`;

// this will log 2
console.log(templates.size);

As I understand it you do not compare the content of literals, but the literal arrays (strict comparisons), am I right?

I compare nothing, I associate a template literal to a node. If the template literal is different, the node is different.

That's how every template literal based library works, and again, it's because of how template literals uniqueness is specified by ECMAScript standard.

from hyperhtml.

WebReflection avatar WebReflection commented on May 27, 2024

more info here, since the behavior changed over time, and hyperHTML was born before that change:
https://medium.com/@WebReflection/a-tiny-disastrous-ecmascript-change-fadc05c83e69

from hyperhtml.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.