Documentation / @ripl/vue / defineRiplElement

Function: defineRiplElement()

defineRiplElement(definition): DefineComponent<{ }, () => VNode<RendererNode, RendererElement, {[key: string]: any; }>, { }, { }, { }, ComponentOptionsMixin, ComponentOptionsMixin, string[], string, PublicProps, ToResolvedProps<{ }, string[]>, { }, { }, { }, { }, string, ComponentProvideOptions, true, { }, any>

Defined in: adapters/vue/src/core/define-element.ts:116

Builds a declarative component for a Ripl element.

The element is constructed and attached during setup(), which Vue runs top-down and in template order, so paint order matches the template without any extra bookkeeping. The component renders a single marker node into the context's hidden mirror, which is what lets a later reorder be detected and replayed onto the group.

Parameters

Parameter	Type	Description
definition	RiplNodeDefinition	How to construct the element and which props it accepts.

Returns

DefineComponent<{ }, () => VNode<RendererNode, RendererElement, {[key: string]: any; }>, { }, { }, { }, ComponentOptionsMixin, ComponentOptionsMixin, string[], string, PublicProps, ToResolvedProps<{ }, string[]>, { }, { }, { }, { }, string, ComponentProvideOptions, true, { }, any>

A component to register globally or import directly.

Example

const RiplCircle = defineRiplElement({
    name: 'RiplCircle',
    stateKeys: ELEMENT_STATE_KEYS.circle,
    create: elementFactory<Shape2DOptions<CircleState>>(createCircle),
});