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 hello@aidenybai.com and we can brainstorm on this

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 32 (5 by maintainers)

Most upvoted comments

/bounty $300

@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…

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>
    );
  }
}

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

I’ve got this!!!

💎 $300 bounty created by aidenybai 🙋 If you start working on this, comment /attempt #488 along with your implementation plan 👉 To claim this bounty, submit a pull request that includes the text /claim #488 somewhere in its body 📝 Before proceeding, please make sure you can receive payouts in your country 💵 Payment arrives in your account 2-5 days after the bounty is rewarded 💯 You keep 100% of the bounty award 🙏 Thank you for contributing to aidenybai/million!

👉 Add a bountyShare on socials

🔴 Livestream on Algora TV while solving this bounty and receive $200 upon merge!

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