bundle component has redundant complexity due to legacy `BundleNested`

[samuelstroschein]

Context

We eventually need unbundled editing components to unblock diffing components, slotting, and more complex application UIs.

A reason against unbundling is the amount of business logic the component does at the moment. I looked into the component and found:

• Most of the components code and complexity is about mutating BundleNested and scheduling updates due to the mutations.
• Mutations are redundant with SQLite now, and thereby the majority of logic in the component.
• Every component exposes insert, update, delete events. That's redundant. One change event is enough to trigger inserts, updated, or deletions with SQLite.

Optimierung der Logik in Unbundled Components

Proposal

Unbundle the components and offer an opinionated wrapper "starter" component for apps.

• apps can start just as easy with the wrapping component as today
• unblocks apps from building custom editing components and differs from using the unbundled components
• severely simplifies the components (good for maintenance and iteration speed)

// opinionated editor with bundle nested (?) for ease of wiring
<inlang-editor .bundleNested={} @change={}></inlang-editor>

// headless building blocks for a custom editor or diff components
<inlang-bundle-editor .bundle={} @change={}></inlang-bundle-editor>
<inlang-message-editor .message={} @change={}></inlang-message-editor>
<inlang-variant-editor .variant={} @change={}></inlang-variant-editor>

Additional information

Here is the API I came up with in the loom.

• no need for insert, update, delete events. just have change event like most HTML elements

function handleChange(value, type) {
  if (value === undefined){
    await project.db.delete(type).where({id: value.id}).execute();
  } else {  
    await project.db.insert(type)
      .values(value)
      .onConflict((oc) => oc
        .column('id')
        .doUpdateSet(value))
      .execute();
  }
}
return html`
  <inlang-bundle-editor 
     .bundle=${bundle} 
     @change=${(value) => handleChange(value, "bundle")}>
    ${bundle.messages.map((message) => {
      return html`
        <inlang-message-editor 
          .message=${message} 
          @change=${(value) => handleChange(value, 'message')}
          .settings=${project.settings.get()}
        >
          ${message.variants.map((variant) => {
            return html`
              <inlang-variant-editor 
                .variant=${variant} 
                @change=${(value) => handleChange(value, "variant")}>
                <div class="flex" slot="action">
                  <button >
                    Machine translate
                  </button>
                  <inlang-message-selector-button
                    @change=${(value) => handleChange(value, "message")} 
                    .message=${message}
                  >
                  </inlang-selector-button>
              </div>
              </inlang-variant-editor>
            `;
          })}
        </inlang-message-editor>
      `;
    })}
  </inlang-bundle-editor>
`;

[samuelstroschein]

@nils.jacobsen i assigned you to see that this issue wis worked on. i think you duplicated it somewhere else?

[NilsJacobsen]

I'm actually not sure if we need the wrapping component, because its super easy to wire the things up. 👍

[samuelstroschein]

let's go without a wrapping component then. we can introduce it at a later point in time if it's required