Builder DevTools Components builder inputs (props) not found

Bugs
1

Detailed steps to reproduce the bug
When i use the DevTools to register an unregistered component (for example the default counter component) it removes the inputs (props) from the builder-registry.js

Screenshots or video link

image
image706×362 32.1 KB

Code stack you are integrating Builder with
NextJS and Builder DevTools

2

Hello @DoubleU,

Welcome to the Builder.io forum!

It appears that the counter component lacks props, and this might be why default props aren’t being detected.

To address this, consider registering the custom component with input as illustrated below:

Builder.registerComponent(Counter, {
   name: "counter",
   input: [
     {
        name: 'count',
        type: 'number',
        defaultValue: 0,
     },
   ],
});
3

Hi @manish-sharma,

Thanks for your reply! This isn’t what I mean. I will try to clarify my issue.

This is the default counter component Counter.jsx that is created by following the guide for devtools and NextJS App router:

"use client";
import React, { useState } from "react";
import styles from "./styles.module.css";

function Counter({ initialCount = 99 }) {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount((prevCount) => prevCount + 1);
  };

  const decrement = () => {
    setCount((prevCount) => prevCount - 1);
  };

  return (
    <div className={styles.counter}>
      <button className={styles.btn} onClick={decrement}>
        -
      </button>
      <span className={styles.count}>{count}</span>
      <button className={styles.btn} onClick={increment}>
        +
      </button>
    </div>
  );
}

export default Counter;

So the component doesn’t lack any props, right? InitialCount is defined, but the Devtools doesn’t seem to recognize props when registering? This is what the Devtools register in the builder-registry.js:

"use client";
import { Builder } from "@builder.io/react";
import Counter from "./components/Counter/Counter";

Builder.registerComponent(Counter, {
  name: "Counter",
});

I can update the builder-registry.js by adding the inputs manually:

"use client";
import { Builder } from "@builder.io/react";
import Counter from "./components/Counter/Counter";

Builder.registerComponent(Counter, {
  name: "Counter",
  inputs: [
    {
      name: "InitialCount",
      type: "number",
      defaultValue: 99,
    }
  ],
});

When I unregister the counter component in the Devtools, the builder-registry.js will be empty. Once I register the same counter component the inputs are missing:

"use client";
import { Builder } from "@builder.io/react";
import Counter from "./components/Counter/Counter";

Builder.registerComponent(Counter, {
  name: "Counter",
});

Thanks in advance!

4

Hi @DoubleU,

I attempted a similar operation with NextJS and Builder DevTools. It appears to include the inputs in the registration code. Loom Video

By default, the code is set as follows:

Builder.registerComponent(Counter, {
  name: "Counter",
  inputs: [
    {
      name: "initialCount",
      type: "number",
    },
  ],
});

However, if additional attributes are added, or inputs are modified and the component is deregistered, the default code will be reinstated upon registration. This seems to be the current behavior. We’ll share this with our internal team to enhance the DevTools experience.

Was that the issue you were pointing out? Let us know!

Thank you.

1 Like