Feat/register component devtools (#3619)

## Description

Add a short description of what changes you made, why you made them, and
any other context that you think might be helpful for someone to better
understand what is contained in this pull request. This sort of
information is useful for people reviewing the code, as well as anyone
from the future trying to understand why changes were made or why a bug
started happening.

_Screenshot_
If relevant, add a screenshot or two of the changes you made.

.changeset/few-ties-move.md

@@ -0,0 +1,12 @@
+---
+'@builder.io/sdk-vue': patch
+'@builder.io/sdk-angular': patch
+'@builder.io/sdk-react-nextjs': patch
+'@builder.io/sdk-qwik': patch
+'@builder.io/sdk-react': patch
+'@builder.io/sdk-react-native': patch
+'@builder.io/sdk-solid': patch
+'@builder.io/sdk-svelte': patch
+---
+
+misc: add internal `registerComponentFromDevTools` helpers for devtools.

packages/sdks/src/components/content/components/enable-editor.lite.tsx

@@ -20,7 +20,7 @@ import { fetch } from '../../../functions/get-fetch.js';
 import { isBrowser } from '../../../functions/is-browser.js';
 import { isEditing } from '../../../functions/is-editing.js';
 import { isPreviewing } from '../../../functions/is-previewing.js';
-import { createRegisterComponentMessage } from '../../../functions/register-component.js';
+import { sendRegisterComponentMessage } from '../../../functions/register-component.js';
 import { _track } from '../../../functions/track/index.js';
 import { getInteractionPropertiesForEvent } from '../../../functions/track/interaction.js';
 import { getDefaultCanTrack } from '../../../helpers/canTrack.js';
@@ -291,8 +291,7 @@ export default function EnableEditor(props: BuilderEditorProps) {
       Object.values<ComponentInfo>(
         props.builderContextSignal.value.componentInfos
       ).forEach((registeredComponent) => {
-        const message = createRegisterComponentMessage(registeredComponent);
-        window.parent?.postMessage(message, '*');
+        sendRegisterComponentMessage(registeredComponent);
       });
       window.addEventListener(
         'builder:component:stateChangeListenerActivated',

packages/sdks/src/functions/register-component.ts

@@ -1,10 +1,25 @@
+import type { RegisteredComponent } from '../context/types.js';
 import type { ComponentInfo } from '../types/components.js';
 
 export const createRegisterComponentMessage = (info: ComponentInfo) => ({
   type: 'builder.registerComponent',
   data: serializeIncludingFunctions(info),
 });
 
+export const sendRegisterComponentMessage = (info: ComponentInfo) => {
+  window.parent?.postMessage(createRegisterComponentMessage(info), '*');
+};
+
+/**
+ * @private
+ * @description This is a private internal function that is used to register a component from the Builder DevTools.
+ * Do not use this function directly.
+ */
+export const registerComponentFromDevTools = (info: RegisteredComponent) => {
+  const { component: _, ...rest } = info;
+  sendRegisterComponentMessage(rest);
+};
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 const serializeFn = (fnValue: Function) => {
   const fnStr = fnValue.toString().trim();

packages/sdks/src/server-index.ts

@@ -27,7 +27,10 @@ export type { ComponentInfo } from './types/components.js';
  */
 export { isEditing } from './functions/is-editing.js';
 export { isPreviewing } from './functions/is-previewing.js';
-export { createRegisterComponentMessage } from './functions/register-component.js';
+export {
+  createRegisterComponentMessage,
+  registerComponentFromDevTools,
+} from './functions/register-component.js';
 
 export { register } from './functions/register.js';
 export type { InsertMenuConfig, InsertMenuItem } from './functions/register.js';