ryansolid / dom-expressions

A Fine-Grained Runtime for Performant DOM Rendering
MIT License
885 stars 127 forks source link

What is an easy way of running/debugging the babel-plugin-jsx package? #192

Closed obask closed 1 year ago

obask commented 1 year ago

I was wondering how to quickly run or debug a single .jsx file since I only see large unit tests and build scripts for the plugin. In order to run it with a debugger, I created this snippet: https://github.com/obask/dom-expressions/commit/1626f8299fd0c860c3c5ffed940de99747f88391 Do you think this is a good approach or there is a simpler way to iterate on the project?

This script allows to transform a small file and run it with a debugger:

Screenshot 2023-01-02 at 1 31 11 AM

It also outputs a transformed version of the debug/in.jsx file:

> node --es-module-specifier-resolution=node debug/main.js

import { template as _$template } from "dom";
const _tmpl$ = /*#__PURE__*/_$template(`<div id="main"><h1 class="base" id="my-h1"><a href="/">Welcome</a></h1></div>`, 6);
...
const template = (() => {
  const _el$ = _tmpl$.cloneNode(true),
        _el$2 = _el$.firstChild,
        _el$3 = _el$2.firstChild;

PS: How contributors learn Solid's internals in general? It would be nice to add this information to the CONTRIBUTING.md and INSTALL.md files(eventually) as a resource for developers who are interested in learning more about Solid's internals. Thank you!

obask commented 1 year ago

I found a video "first look at DOM expressions" which touches on these topics.