million [$300] feat: cross file blocks + ui component library support

Currently, we only support using block() in the same file as the original component, like so:

import { block } from 'million/react';

function Component() {
	// ...
}

const ComponentBlock = block(Component);

But what if we could do cross file blocks?

// file1.jsx
export function Component() {
	// ...
}

// file2.jsx
import { block } from 'million/react';
import { Component } from './file1';

const ComponentBlock = block(Component);

And what if we could do this within modules?

import { Button } from 'chakraui';

const ButtonBlock = block(Button);

For reference, this was my original approach: https://github.com/aidenybai/million/tree/fix/cross-file-blocks. If you're committed to fixing this issue, email me [email protected] and we can brainstorm on this

Jul 19 '23 08:07 aidenybai

/bounty $300

Jul 19 '23 08:07 aidenybai

💎 $300 bounty • Million.js (YC W24)

Steps to solve:

Start working: Comment /attempt #488 with your implementation plan
Submit work: Create a pull request including /claim #488 in the PR body to claim the bounty
Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts

Thank you for contributing to aidenybai/million!

Add a bounty • Share on socials

Attempt	Started (GMT+0)	Solution
🔴 @Wholesomebruh	Jul 28, 2023, 11:22:43 PM	WIP
🟢 @Grenish	Aug 29, 2023, 5:05:58 AM	WIP
🟢 @riffly	Sep 7, 2023, 7:31:45 AM	WIP
🔴 @adityajideveloper	Oct 1, 2023, 3:11:56 AM	WIP
🟢 @karthiknadar1204	Nov 23, 2023, 12:54:33 PM	WIP
🔴 @adilkadivala	Aug 3, 2024, 3:03:41 PM	WIP

Jul 19 '23 08:07 algora-pbc[bot]

I've got this!!!!

Jul 19 '23 08:07 ehizman

I'll try to figure it out and see what happens 😅

Jul 19 '23 16:07 oliverloops

@aidenybai Is it possible to render as follows, but there is a performance problem?

import { Row } from "./BlockSample";

function App() {
  const RowB = block(({ adj }: Props) => <Row adjective={adj} />);
  return (
      <RowB adj="aaaaaaa" />
  );
}

Jul 31 '23 14:07 nojiritakeshi

React have really a huge ecosystem and its the first preference of any web app but most of the time applications use UI libraries to provide a great experience to the end user. soon in the future million will use in every react project if we able to solve that problem.

Aug 02 '23 09:08 gxanshu

Maybe that can fix :

const block = (/*args*/) => {
  const vnode =
    typeof fn === 'function' && !!fn.prototype?.isReactComponent
      ? new fn(HOLE_PROXY).render()
      : fn(HOLE_PROXY);
  //...
};

With this fn as test :

import { Component } from 'react';

class fn extends Component {
  constructor(props?: MillionProps) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Hello</h1> World
        <p
          title="baz"
          className={this.props?.bar}
          style={{ margin: this.props?.zoo }}
        >
          {this.props?.foo}
        </p>
      </div>
    );
  }
}

Aug 02 '23 14:08 eencoffee

@aidenybai let me work on this Please assign

Aug 17 '23 15:08 ashutosh887

@aidenybai Is it possible to render as follows, but there is a performance problem?
import { Row } from "./BlockSample";

function App() {
  const RowB = block(({ adj }: Props) => <Row adjective={adj} />);
  return (
      <RowB adj="aaaaaaa" />
  );
}

While this method works, millionjs compiler cannot optimize the component as it doesn't have any access to the real component code, and there's not much performance problem except that you have extra code that does nothing...

Aug 21 '23 18:08 renhiyama

The main issue lies at the code bundlers' level (vite, rollup, webpack, packit, etc.) Any/Most code bundler's "plugin rules" expects the plugin to work at the file-level. Millionjs compiler doesn't break the rule because it stays and works in/with the same file code that the bundler itself provides. However, this feature implementation requires millionjs compiler to read other files (here in this case would be the imported files and modules) and perform optimizations there. So what I see is that we need to write bundler-specific code to hack our way around, but then it arises a different problem. Some code bundlers dont have proper "order" of plugins implementation, and most of the code bundlers seem to have different caching mechanisms, and millionjs compiler cannot(?) access/make use of it/follow them.

Considering these severe problems, the time to compile/bundle any code using millionjs might increase a lot as it might recursively run through the same file a lot of times.

Aug 21 '23 18:08 renhiyama

/attempt #488

Options

Cancel my attempt

Aug 29 '23 05:08 Grenish

Note: The user @Wholesomebruh is already attempting to complete issue #488 and claim the bounty. If you attempt to complete the same issue, there is a chance that @Wholesomebruh will complete the issue first, and be awarded the bounty. We recommend discussing with @Wholesomebruh and potentially collaborating on the same solution versus creating an alternate solution.

Aug 29 '23 05:08 algora-pbc[bot]

It's open from my side, I don't know how to cancel my attempt.

Aug 29 '23 06:08 baibhavKumar1

/attempt #488

Options

Cancel my attempt

Sep 07 '23 07:09 riffly

Note: The user @Grenish is already attempting to complete issue #488 and claim the bounty. If you attempt to complete the same issue, there is a chance that @Grenish will complete the issue first, and be awarded the bounty. We recommend discussing with @Grenish and potentially collaborating on the same solution versus creating an alternate solution.

Sep 07 '23 07:09 algora-pbc[bot]

is this issue still open? I see it was opened a long time ago.

Sep 24 '23 07:09 dennismzia

@aidenybai Can i try this?

Sep 26 '23 15:09 ogil7190

/attempt #488

Options

Cancel my attempt

Oct 01 '23 03:10 AS1100K