Where's the compiler?

[ccorcos]

I'm trying to understand how this library works and I'm seeing "compiler" mentioned all over the place. However, when I look through the code, I don't see a compiler anywhere.

From your paper: https://arxiv.org/pdf/2202.08409v1.pdf

This was accomplished by designing a computationally efficient diffing algorithm that relies on a compiler,

built-in mechanisms are implemented to allow for imperative optimizations, allowing the compiler to directly skip runtime diffing.

I'm seeing the diff code here, but that looks like its happening at runtime? 🤷‍♂️ https://github.com/aidenybai/million/blob/392b07a86ceb87e5aa4181b57bcbb705f34b27b5/packages/million/render.ts#L29

From your website:

Million supports full-class support for compiler optimizations, allowing you to ergonomically create your own compiler over Million.

By computing the user interface beforehand with a compiler, Million reduces the overhead of traditional Virtual DOM.

Million takes it a step further by leveraging compilation to make a quantum leap in improving bundle size and render speed.

The documentation says all I have to do is npm install million to get started but there doesn't appear to be a build step necessary to do any compilation... When / where does the compiling happen?

As for the performance benchmarks, you say its faster than React, but React isn't in your benchmark for comparison...

Maybe consider using the list of popular virtual dom libraries in the Preact benchmark comparison.

Thanks for the help!

[SukkaW]

FYI, the code of the compiler located here: https://github.com/aidenybai/million/tree/main/packages/vite-plugin-million

[aidenybai]

Hi @ccorcos, thanks for your interest in Million and happy to answer your questions.

I'm seeing the diff code here, but that looks like its happening at runtime? 🤷‍♂️

Million is a Virtual DOM, there is a runtime component for diffing, alongside a compiler.

The documentation says all I have to do is npm install million to get started but there doesn't appear to be a build step necessary to do any compilation... When / where does the compiling happen?

The compilation happens with the vite plugin, per @SukkaW's comment.

As for the performance benchmarks, you say its faster than React, but React isn't in your benchmark for comparison...

I assume you're referring to the Tweet. The test made in the benchmark was measuring the time it takes to add 5000 nodes in succession (for loop). On the left, it shows the time it takes to diff and patch the nodes. On the right, it shows delta compute and dom application.

The benchmark itself is only to compare to other Virtual DOM libraries. We are exploring comparisons between libraries with #37

[ccorcos]

Ah ok. Thanks for the reply.

So regarding the compiler, what exactly is the optimization here? It looks like it's unwrapping components into one large single component? Is that what's going on? I'm also curious how this handles hooks in subcomponents.

https://github.com/aidenybai/million/blob/392b07a86ceb87e5aa4181b57bcbb705f34b27b5/packages/vite-plugin-million/compile.ts#L75

I assume you're referring to the Tweet. The test made in the benchmark was measuring the time it takes to add 5000 nodes in succession (for loop). On the left, it shows the time it takes to diff and patch the nodes. On the right, it shows delta compute and dom application.

Ah, so that tweet has nothing to do with the compiler, right? That's just useList which keeps track of list mutations via Proxy and passes those deltas on to the component?

https://github.com/aidenybai/million/blob/15a85673bb9fbb8adb4be1ccc57cabd85f113aa5/website/pages/docs/react/use-list.mdx

Still trying to figure out how the deltas bypass the diffing mechanism though... somewhere in here?

https://github.com/aidenybai/million/blob/392b07a86ceb87e5aa4181b57bcbb705f34b27b5/packages/million/render.ts

Thanks,

Chet

[aidenybai]

So regarding the compiler, what exactly is the optimization here? It looks like it's unwrapping components into one large single component? Is that what's going on? I'm also curious how this handles hooks in subcomponents.

The current optimization renders hyperscript calls to flattened vnode objects, similar to how inferno does it. More optimizations to come.

Ah, so that tweet has nothing to do with the compiler, right? That's just useList which keeps track of list mutations via Proxy and passes those deltas on to the component?

Yes, that's correct. The Tweet has nothing to do with it and it's benchmarking useList

Still trying to figure out how the deltas bypass the diffing mechanism though... somewhere in here?

The delta logic occurs in src/drivers/use-children.ts

[aidenybai]

closed via v2