3 ms·

Only partially related to the blog post, but... The thing that is lost on me with all of these webcomponents solutions is that they inevitably rely on tagged t

Only partially related to the blog post, but... The thing that is lost on me with all of these webcomponents solutions is that they inevitably rely on tagged templates to do the heaviest lifting. I don't want to write strings, I want to write statically analyzable code. IDEs do some heavy lifting here for visual hints, and there are a few html-in-js linting solutions, but none of them are very compelling.

Onavo 2y ago
Well since the letter x is taken, we can use w for web components. So a component file with tagged HTMl strings should have the extension .tsw or .jsw
madeofpalk 2y ago
This too was my roadblock in the article > You’d be forgiven for thinking you were looking at a React component! Frankly, I don’t see a fundamental difference between these and frameworks like Svelte or Vue Regardless of whether you should be forgiven for thinking it’s a react component, it omits it’s biggest strength - JSX is just JavaScript function calls, and thus can be composed as JavaScript and type checked as java/typescript. This to me is the fundamental difference between React/JSX and other approaches. Any framework that gives up on type checking for the view layer is a non-starter in my books.
- CharlieDigital 2y ago
  The fundamental differences are quite stark. Vue, Svelte, web components, and vanilla only execute code that is marked as a callback. Example: let x = 0 var counter = computed(() => ... ) In this Vue snippet of an SFC, the callback in the computed executes in reaction to some change without invoking the assignment of x (obviously a trivial case here). DOM + JavaScript is the same React invokes the entire component function and all calls and allocations in the path of the component function. The mental model is inverted in a sense. This is one of the reasons React generally performs more poorly in both speed and space.
spankalee 2y ago
Static analysis works on strings: source code. Similarly, it can, and does work on the strings in a tagged template literal. Lit's templates are HTML with bindings. They're very analyzable, including checking for valid structure, associating tags with definitions, type-checking bindings. The tools that do this parse template strings, build an AST, and run analysis passes just like other source analysis tools. Developers get standard intellisense features like jump-to-definition, hover-over docs, errors on invalid properties and events, etc. But also... templating is an implementation concern. To build a web component you don't have to use a tagged-template-based system. There are template systems that use JSX. You can use Preact, or React themselves. And your component users don't ever have to know what template system you chose to implement your component.

Onavo 2y ago

Well since the letter x is taken, we can use w for web components. So a component file with tagged HTMl strings should have the extension .tsw or .jsw

madeofpalk 2y ago

This too was my roadblock in the article > You’d be forgiven for thinking you were looking at a React component! Frankly, I don’t see a fundamental difference between these and frameworks like Svelte or Vue Regardless of whether you should be forgiven for thinking it’s a react component, it omits it’s biggest strength - JSX is just JavaScript function calls, and thus can be composed as JavaScript and type checked as java/typescript. This to me is the fundamental difference between React/JSX and other approaches. Any framework that gives up on type checking for the view layer is a non-starter in my books.

CharlieDigital 2y ago
The fundamental differences are quite stark. Vue, Svelte, web components, and vanilla only execute code that is marked as a callback. Example: let x = 0 var counter = computed(() => ... ) In this Vue snippet of an SFC, the callback in the computed executes in reaction to some change without invoking the assignment of x (obviously a trivial case here). DOM + JavaScript is the same React invokes the entire component function and all calls and allocations in the path of the component function. The mental model is inverted in a sense. This is one of the reasons React generally performs more poorly in both speed and space.

spankalee 2y ago

Static analysis works on strings: source code. Similarly, it can, and does work on the strings in a tagged template literal. Lit's templates are HTML with bindings. They're very analyzable, including checking for valid structure, associating tags with definitions, type-checking bindings. The tools that do this parse template strings, build an AST, and run analysis passes just like other source analysis tools. Developers get standard intellisense features like jump-to-definition, hover-over docs, errors on invalid properties and events, etc. But also... templating is an implementation concern. To build a web component you don't have to use a tagged-template-based system. There are template systems that use JSX. You can use Preact, or React themselves. And your component users don't ever have to know what template system you chose to implement your component.