re: Why the React community is missing the point about Web Components VIEW POST

TOP OF THREAD FULL DISCUSSION
re: You can do that just fine with React. There are people who don't like JSX and they write vanilla JS, e.g. github.com/Jador/react-hyperscript.... A...
var h = require('react-hyperscript');
var React = require('react');

var AnotherComponent = require('./another-component');

module.exports = React.createClass({
  render: function render() {
    return (
      h('div.example', [
        h('h1#heading', 'This is hyperscript'),
        h('h2', 'creating React.js markup'),
        h(AnotherComponent, {foo: 'bar'}, [
          h('li', [
            h('a', {href: 'http://whatever.com'}, 'One list item')
          ]),
          h('li', 'Another list item')
        ])
      ])
    );
  }
});
import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module';
import './another-component.js';
const tpl = html`
  <div class="example">
    <h1 id="heading">This is lit-html</h1>
    <h2>Creating HTML Markup</h2>
    <another-component foo="bar">
      <li>
        <a href="http://whatever.com">One List Item</a>
      </li>
      <li>Another List Item</li>
    </another-component>
  </div>
` 
render(tpl, container)

🤷‍♂️

The difference is obvious, isn't it? One is just JS functions. You can refactor them. Lint them. Runs code analysis tools on them. Split them out. Move to a different module.

The other one is a string blob.

It's not HTML though. It's a string blob inside Javascript code. You can wish it away, but the reality remains.

🤷‍♂️

If your problem is tooling then maybe this extension can help. Does it have to say .html on the file extension to be more than a "string blob"? HTML is text after all, it's literally in the name.

That extension doesn't negate the fact that it remains a string blob inside Javascript. Having a string inside a programming language and calling it something else doesn't make it something else.

I wonder how do you feel about writing inside <script> and <style> tags in HTML. In which ways <script> alert("hi") </script> differs from template.innerHTML = "<div> hi </div>"? (Provided that there's tooling support and that the browser knows it has to parse the latter string as HTML not JavaScript.)

I wonder if people actually know what tagged literals are in JS.

Hint:

html`string`

is nothing more than a single function call with, you guessed it, a string

html('string', ...)

No amount of word twisting and wishful thinking can change that. I really advise you to look at what lit-html does such as diligently parsing this string looking for tags and markers: github.com/Polymer/lit-html/blob/m...

And no. the browser does not know how to "parse this string as HTML". Because it's just a string, it's handled as a string, and is used a string, and nothing else.

You all realize that JavaScript is just a string in a file without an engine to parse, compile, and execute it, right?

Im fine with it being string blobs, string parsing is much faster than html parsing.

Well, it's a drop more complicated than that. Tagged template literals know about their static and dynamic parts. And lit-html uses template tags and weakmaps for fast parsing and efficient storage.

code of conduct - report abuse