Possible to turn every element into an Element component?

[cmaycumber]

I'm curious if it's possible to go through the entire component tree and convert every component into an element type.

My goal is to make the whole component tree editable by default, any help with this would be great.

[ankri]

I am sorry, I cannot fully follow you. What do you mean by "making the whole component tree editable"?

a)

<Editor>
 <Frame>
   <div>These components?</div> {/* <----- */}
 </Frame>
</Editor>

Are those components just html tags like for example <div>, <button> or <span> or more complicated components like for example <TabControl />, <CustomButton /> or <Container />?

or

b)

<Editor>
 <Frame data={theseComponents}> {/* <------ */}
 </Frame>
</Editor>

[ankri]

So. I took a shot at it (codesandbox)

Cons:

• you cannot do import * as MantineComponents from '@mantine/core'; you have to import them one by one
• still some any types because I became lazy

Pros:

• Full TypeScript Support for the components. There is still one error with typing of is of <Element> though

One would also need to find a way how to determine what component should be a <Element canvas /> (Container). And with (semi) automatically creating the UserComponents I would imagine that it could be tricky to build a Settings Toolbar?

[cmaycumber]

Appreciate you looking at this.

Here's the code from my resolver if you want to compare:

import { useNode, useEditor } from '@craftjs/core';
import * as Components from 'drip';
import { Portal } from '@gorhom/portal';
import React, { useState, useEffect, useLayoutEffect } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { Button } from 'react-native';
import { Popover } from 'react-native-popper';

// Generate the resolvers for the drag and drop components
export const Resolvers = Object.entries(Components).reduce(
  (acc, [key, Value]) => {
    acc[key] = ({ sx, ...props }) => {
      const { id } = useNode();
      const [layout, setLayout] = useState(undefined);

      const { actions, query } = useEditor();

      const {
        isActive,
        isHover,
        dom,
        name,
        moveable,
        deletable,
        connectors: { connect, drag },
        parent,
        displayName
      } = useNode((node) => ({
        isHover: node.events.hovered,
        isActive: node.events.selected,
        dom: node.dom,
        name: node.data.custom.displayName || node.data.displayName,
        displayName: node.data.displayName,
        moveable: query.node(node.id).isDraggable(),
        deletable: query.node(node.id).isDeletable(),
        parent: node.data.parent,
        props: node.data.props
      }));

      // Set hot key for deleting node
      useHotkeys(
        'backspace',
        () => (isActive && deletable ? actions.delete(id) : null),
        {},
        [isActive]
      );

      console.log(deletable, moveable, id);

      return (
        <Value
          sx={{
            ...sx,
            ...((isHover || isActive) && {
              outlineStyle: 'solid',
              outlineWidth: 2,
              zIndex: 10000,
              outlineColor: isActive ? 'green' : 'cyan'
            })
          }}
          {...props}
          // TODO: Merge refs here
          ref={(ref) => connect(drag(ref))}
        />
      );
    };

    // Render settings based on the component type, should be mostly standard
    const ComponentSettings = () => {
      return null;
    };

    // Set the craft settings on the resolver item
    acc[key].craft = {
      related: {
        settings: ComponentSettings
      }
    };

    return acc;
  },
  {} as Record<keyof typeof Components, any>
);

For the settings toolbar, I imagined a plugin-like system or something similar most component libraries at least have some core styles /system (layout styles, spacing styles, etc.) and maybe do something type typescript-docgen for the props.

[ankri]

Nice!

I am not familiar with drip. But do you need to make sure that it only exports components and maybe need to filter components? Regardless, I would add a check so that future updates to drip do not accidently export non components.

[cmaycumber]

Got it thanks, that's a good idea. I'll definitely take a look at your codesandbox and see if I can rework some of my logic.

[ankri]

I'm not doing anything fundamentally different than you 👍 . I forked the original codesandbox and incorporated your code - still works ;-)

The only thing that is different is the WrapperComponent that I used to circumvent the linter yelling at me for using hooks in nested functions. Little does the linter know, that we just create FunctionComponents anyway.