Custom Component componentRenderer example for builders.js?

Is there a similar function to skuid.component.factory() that renders builder-side versions?

I’ve resported to something almost completely static for now:

componentRenderer : function (component) {            // Set title
            component.setTitle(component.builder.name);
            // Shortcuts
            var state = component.state;
            // Load script model
            var scriptModelId = state.attr('scriptmodel');
            // skuid.model.Model(scriptModelId).initialize().register().load();
            // Build containers and contents
            var helpContainer = $('<div>').html('The Script Component expects a model on the Script__c sObject with a single row. ' 
                + 'Create a condition on the model using the Name or Assing_Code__c field.
');
            var scriptContainer = $('<div>').html('<div class="nx-pagebuilder-component-body"><div class="nx-basicfieldeditor-section-wrapper"><div class="nx-basicfieldeditor-section"><div class="nx-basicfieldeditor-section-body"><div class="nx-pagebuilder-acceptor" style="border: 0px solid white;"><div class="nx-pagebuilder-component nx-pagebuilder-component-hidewrapper ui-draggable ui-draggable-handle nx-pagebuilder-field" '
                +'data-model="' + scriptModelId
                + '" style="background: inherit;"><div class="nx-pagebuilder-component-header"><div class="nx-pagebuilder-component-actionbar"><div class="nx-pagebuilder-component-actionitem"><div class="nx-pagebuilder-component-actionicon sk-icon sk-icon-delete"></div><div class="nx-pagebuilder-component-actionspacer"></div></div></div><span></span></div><div class="nx-pagebuilder-component-body nx-basicfieldeditor-item" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(242, 242, 242); padding: 0px 8px; overflow: hidden; background: inherit;"><div class="nx-basicfieldeditor-item-label nx-layout-above">'
                + component.builder.name
                + '</div><div class="nx-field nx-layout-above"><div class="nx-fieldtext">'
                + 'RICHTEXT'
                + '</div></div></div></div></div></div></div></div></div>'
                );
            
            // Add contents to DOM
            component.body.append(helpContainer,scriptContainer); 
        },

You can construct your componentRenderer using the actual Component’s rendering logic, as long as you have requested that the Runtime JS logic gets loaded in the Builder via your Builders Manifest file (which it does NOT by default) — e.g. if you have MyComponentBuilderJS and MyComponentJS, you would need to load both files in the Builders Manifest file’s JS Resources list in order to use skuid.component.factory() in the Builder environment the way you’re thinking.

So assuming that your Runtime JS is loaded in the builder, you could do something like this to have a live preview, BUT live previews are very often NOT ideal. However… here is a super-basic idea of what it would look like to do this:

componentRenderer : function (component) {            
   component.setTitle(component.builder.name);
   component.body.append(skuid.component.factory({ xmlDefinition: component.state }));
}

Makes sense. Thanks, Zach!