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 on Jul 19, 2023

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

renhiyama on Aug 21, 2023

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

moegidine on Aug 2, 2023

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

oliverloops on Jul 19, 2023

I’ve got this!!!

ehizman on Jul 19, 2023

💎 $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 bounty • Share 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

algora-pbc[bot] on Apr 27, 2024