Babel preset about dom-chef

[fregante]

If someone actually makes a babel plugin out of dom-chef I'd love to actually see JSX converted into plain DOM calls like Svelte does. That stuff is amazing:

<h1>Hello {{name}}!</h1>

// ...
create: function () {
	h1 = createElement( 'h1' );
	text = createText( "Hello " );
	text_1 = createText( text_1_value = state.name );
	text_2 = createText( "!" );
},

mount: function ( target, anchor ) {
	insertNode( h1, target, anchor );
	appendNode( text, h1 );
	appendNode( text_1, h1 );
	appendNode( text_2, h1 );
},
// ...

Svelte unfortunately adds a little unnecessary boilerplate to keep it dynamic and app-like, otherwise I'd have used that in Refined GitHub instead.

[fregante]

Apparently babel 7.9.0 automatically imports React:

https://babeljs.io/blog/2020/03/16/7.9.0#a-new-jsx-transform-11154-https-githubcom-babel-babel-pull-11154

Due to:

https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#auto-import

I think our config would be:

    [
      "@babel/preset-react",
      {
        "pragma": "h",
        "pragmaFrag": "DocumentFragment",
        "runtime": "automatic", // enables auto-import
        "importSource": "dom-chef"
      }
    ]
  ]

From: https://babeljs.io/docs/en/babel-preset-react#with-a-configuration-file-recommended

So now this is a documentation-only issue, which would follow #56 and then #57

[fregante]

Bingo: https://github.com/treycordova/nativejsx and https://github.com/treycordova/nativejsx-loader

export const check = <svg aria-hidden="true" class="octicon octicon-check" height="16" version="1.1" viewBox="0 0 12 16" width="12"><path d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"></path></svg>;

export const check = function () {
    const _a = document.createElement('svg');
    _a.setAttribute('aria-hidden', 'true');
    _a.setAttribute('class', 'octicon octicon-check');
    _a.setAttribute('height', '16');
    _a.setAttribute('version', '1.1');
    _a.setAttribute('viewBox', '0 0 12 16');
    _a.setAttribute('width', '12');
    const _b = document.createElement('path');
    _b.setAttribute('d', 'M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z');
    _a.appendChild(_b);
    return _a;
}.call(this);

Two issues:

• no SVG support at the moment treycordova/nativejsx#26
• I can't get it to work with async/await treycordova/nativejsx#27 ✓

[vadimdemedes]

@sindresorhus Great idea! Agree with every point.

@bfred-it That stuff is great, I'll keep that in mind.

[dankotov]

Apologies for a perhaps noob question, however, according to babel docs, pragma and pragmaFrag cannot be set with runtime: "automatic". Is dom-chef therefore not compatible with automatic runtime?

docs: https://babeljs.io/docs/en/babel-preset-react#with-a-configuration-file-recommended

[fregante]

@dankotov correct. That's #57

[dankotov]

@fregante understood! appreciate the prompt reply