question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Potential savings in attributes transpilation

See original GitHub issue

Is there any reason why empty attributes <div empty /> are getting transpiled into empty=""? As I understand by default HTML understands empty as "" value. Getting rid of ="" could reduce the build size while still persisting the same effect.

https://github.com/ryansolid/dom-expressions/blob/62bd00e61c2cf217cae818be21ace06a32c8dfd0/packages/babel-plugin-jsx-dom-expressions/src/dom/element.js#L528

- results.template += value ? `="${value.value}"` : `=""`; 
+ results.template += value ? `="${value.value}"` : ""; 

I also noticed another case that could prevent generating more templates. In many cases the templates differs only by attributes.

    <>
      <div>
        <div class="bang">
          Hello
          <span>!</span>
        </div>
      </div>
      <div>
        <div class="h1">
          Hello
          <span>!</span>
        </div>
      </div>
    </>

Currently this syntax would generate 2 the same templates with just a different attribute value:

const _tmpl$ = template(`<div><div class="bang">Hello<span>!</span></div></div>`, 6),
      _tmpl$2 = template(`<div><div class="h1">Hello<span>!</span></div></div>`, 6);

We could optimize it by treating attributes always as dynamic:

setAttribute(_el$2, "my-attr", "value");

That why we could reduce build size drastically reducing the amount of templates.

I am aware that currently this can be achieved by wrapping each attr with template literals but this is inconvenient for DX

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
ryansolidcommented, Sep 1, 2021

I’ve removed the ="" from 0.29.15.

0reactions
ryansolidcommented, Dec 20, 2022

Well I only ever did half of the suggestion and the OP was going to investigate the other half. But I agree this one is stale.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Selective transpilation for modern JavaScript environments
This post is a fairly deep dive into some advanced transpilation configurations using Gulp, Babel, and SystemJS; the end goal is to ship ......
Read more >
You might not need to transpile your JavaScript
The bandwidth savings for avoiding transpilation is great! Update 7 (2018–01–15): Lebab (the reverse of Babel) is has a CLI for modernizing old ......
Read more >
npm:steppe-transpiler
A simple HTML to HTML transpilation designed to save you keystrokes when writing raw. I prefer this to using custom HTML languages that...
Read more >
Source walkthrough - C2Rust Manual
c2rust-transpile ... This crate implements all of the translation logic for getting from C to Rust. It consumes input from the c2rust-ast-exporter crate...
Read more >
Should We All Start Implementing Differential Serving?
There's been a lot of discussion around the potential to serve browsers the ... version of Chrome, deliver the slimmer, non-transpiled version.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found