a way to proxy props

[titoBouzout]

In react I have made a component named Box which automates most of my layout needs if not all. https://github.com/titoBouzout/crippling-sorrow-styling

I use it like.. "The "Holy Grail Layout"(sticky footer)

<Box col grow>
	<Box>header</Box>
	<Box grow>content</Box>
	<Box>footer</Box>
</Box>

In react this works somewhat as follows:

function Box(props) {
	return React.createElement('div', proxy_props(props))
}
function proxy_props(props){
	if(props.col){
		props.className = 'column'
		delete props.col 
	}
	return props
}

1. In mobx-jsx I was trying to recreate this pattern but I have been failing. I have seen two kind of errors but Im mostly sure Im doing something wrong, so I would like to ask for an example on using createComponent to recreate that pattern.

MISSING_EXPORT Error: 'assignProps' is not exported by www.client\node_modules\mobx-jsx\dist\index.js, imported by www.client\jsx\@layout\sidebar-left.jsx

2. [removed]

Thanks!

[titoBouzout]

Upon reconsideration, I think the 2nd point would be too much, as some props could be dynamic, will require playing with the AST unless Im mistaken.

[ryansolid]

Yeah I think the first problem is I updated everything this week and haven't gotten around to this library. This library should be using 0.19.x versions right now. And I've just released 0.20.0. It's awkward as it's technically an optional peer dependency so I can't really add that link to the package.json. I changed how I wrap props in this release which is probably what you are hitting. I will update this tonight.

That being said it sounds like you want to dynamically transform the props and then spread them on the child.

function Box(props) {
  return <div {...proxy_props(props)} />
}

[titoBouzout]

Simply enough thanks and take your time please! Is there a way to dynamically change the type of tag? The Box function accepts a props.element property telling which kind of element should use like props.element = 'label' instead of a div

[ryansolid]

I made a special component in Solid for this and admittedly I have more helpers there. https://github.com/ryansolid/solid/blob/master/packages/solid/src/dom/index.ts#L55. But I think for your directed case you want to look at this portion:

const el = document.createElement(props.element);
spread(el, () => proxy_props(props));
return el;

[titoBouzout]

Hey Ryan thanks a lot for the update! I have been working on this and I will report back my approaches.

Im still not completely sure that my reasons to use mobx-jsx instead of Solid are good enough to be honest, Solid looks pretty good and handy. I think its because Im more familiar with mobx and my code will look almost the same if not the same as when I was using React. My other motivation is that I want to stick to something that just works efficiently and won't change. The roadmap of Solid looks pretty clean but some discussions on the issues are very interesting. It may not be wise to try to stick to a proof of concept. I still need to reach the point of form handling and Im not sure if Im missing something else. Anyway, thanks a lot for your support much appreciated!

[ryansolid]

Those are fair considerations. I am using the fact that Solid isn't 1.0.0 right now to still update things. Where this started as a very generic bring your own reactive system solution, as I've worked more with Solid the more that I see advantage in specifically catered reactive system for the problem at hand. Still learning what this should look like. MobX JSX by comparison is pretty conservative in my thinking and its unrealistic that when I get to a point that I'd be changing the API that I'd bother doing that to the other libraries. They'd just look like Solid, and be that much harder to cater to my whim. While I think Solid is getting there I've found the need to do second/third passes on most topics as I fill out the features. Things are shifting less but it's still moving.

[ryansolid]

I added 2 new helpers here for props that I need to document..

assignProps and splitProps. These will let you do operations on your props without losing reactivity. assignProps is like Object.assign with the same signature.. can be used to merge, or clone or set default props. Split breaks the props objects into multiple objects splitting the properties among them.

const [local, others] = splitProps(props, ["children", ''containerStyle"])

return (<div style={local.containerStyle}>
  <div {...others} />
  {local.children}
</div>);

[titoBouzout]

Thanks, I will take a look, I have been manually transpiling my components to this library while also being distracted by related things, its taking time but I would like to return and document some things.