feat: brand new plugin system 🎉

.rubocop.yml

@@ -21,7 +21,7 @@ Documentation:
   Enabled: false
 
 AllCops:
-  TargetRubyVersion: 2.6
+  TargetRubyVersion: 3.1
   Exclude:
     - 'bin/*'  
     - 'coverage/**/*'  

Gemfile.lock

@@ -104,6 +104,7 @@ GEM
     factory_bot_rails (6.2.0)
       factory_bot (~> 6.2.0)
       railties (>= 5.0.0)
+    ffi (1.17.0-arm64-darwin)
     ffi (1.17.0-x86_64-darwin)
     ffi (1.17.0-x86_64-linux-gnu)
     generator_spec (0.10.0)
@@ -161,6 +162,8 @@ GEM
     net-smtp (0.5.0)
       net-protocol
     nio4r (2.7.3)
+    nokogiri (1.16.6-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.16.6-x86_64-darwin)
       racc (~> 1.4)
     nokogiri (1.16.6-x86_64-linux)
@@ -315,6 +318,7 @@ GEM
     zeitwerk (2.6.18)
 
 PLATFORMS
+  arm64-darwin-23
   x86_64-darwin-22
   x86_64-linux
 

app/components/maglev/content/builder.rb

@@ -3,25 +3,8 @@
 module Maglev
   module Content
     module Builder
-      TYPES = {
-        text: Maglev::Content::Text,
-        image: Maglev::Content::Image,
-        link: Maglev::Content::Link,
-        checkbox: Maglev::Content::Checkbox,
-        color: Maglev::Content::Color,
-        select: Maglev::Content::Select,
-        collection_item: Maglev::Content::CollectionItem,
-        icon: Maglev::Content::Icon,
-        divider: Maglev::Content::Void,
-        hint: Maglev::Content::Void
-      }.freeze
-
       def build(scope, content, setting)
-        klass = TYPES[setting.type.to_sym]
-
-        raise "[Maglev] Unknown setting type: #{setting.type}" unless klass
-
-        klass.new(scope, content, setting)
+        setting.content_class.new(scope, content, setting)
       end
 
       module_function :build

app/components/maglev/page_component.rb

@@ -36,10 +36,10 @@ def build_section(definition, attributes)
       build(
         SectionComponent,
         parent: self,
-        definition: definition,
+        definition:,
         attributes: attributes.deep_transform_keys! { |k| k.to_s.underscore.to_sym },
-        templates_root_path: templates_root_path,
-        rendering_mode: rendering_mode
+        templates_root_path:,
+        rendering_mode:
       )
     end
   end

app/controllers/concerns/maglev/fetchers_concern.rb

@@ -30,15 +30,15 @@ def fetch_maglev_page
         path: maglev_page_path_from_params,
         locale: content_locale,
         default_locale: default_content_locale,
-        fallback_to_default_locale: fallback_to_default_locale,
+        fallback_to_default_locale:,
         only_visible: maglev_rendering_mode == :live
       )
     end
 
     def fetch_maglev_page_sections(page_sections = nil)
       @fetch_maglev_page_sections ||= maglev_services.get_page_sections.call(
         page: fetch_maglev_page,
-        page_sections: page_sections,
+        page_sections:,
         locale: content_locale
       )
     end
@@ -106,7 +106,7 @@ def maglev_page_fullpaths
       maglev_site.locale_prefixes.inject({}) do |memo, locale|
         memo.merge(locale => maglev_services.get_page_fullpath.call(
           page: maglev_page,
-          locale: locale,
+          locale:,
           preview_mode: maglev_rendering_mode != :live
         ))
       end

app/controllers/maglev/api/page_clones_controller.rb

@@ -11,7 +11,7 @@ def create
       private
 
       def clone_page(page)
-        services.clone_page.call(page: page)
+        services.clone_page.call(page:)
       end
 
       def resources

app/controllers/maglev/api/pages_controller.rb

@@ -4,12 +4,12 @@ module Maglev
   module Api
     class PagesController < ::Maglev::ApiController
       def index
-        @pages = services.search_pages.call(q: params[:q], content_locale: content_locale,
+        @pages = services.search_pages.call(q: params[:q], content_locale:,
                                             default_locale: default_content_locale)
       end
 
       def show
-        @page = services.search_pages.call(id: params[:id], content_locale: content_locale,
+        @page = services.search_pages.call(id: params[:id], content_locale:,
                                            default_locale: default_content_locale)
         head :not_found if @page.nil?
       end
@@ -45,12 +45,12 @@ def site_params
         lock_version = params.dig(:site, :lock_version)
         sections = params[:site].to_unsafe_hash[:sections] unless params.dig(:site, :sections).nil?
         style = params.dig(:site, :style)
-        (lock_version && sections ? { lock_version: lock_version, sections: sections } : {}).merge(style: style)
+        (lock_version && sections ? { lock_version:, sections: } : {}).merge(style:)
       end
 
       def persist!(page)
         services.persist_page.call(
-          page: page,
+          page:,
           page_attributes: page_params,
           site: maglev_site,
           site_attributes: site_params

app/controllers/maglev/page_preview_controller.rb

@@ -44,7 +44,7 @@ def use_engine_vite?
     end
 
     def extract_content_locale
-      _, locale = maglev_services.extract_locale.call(params: params, locales: maglev_site.locale_prefixes)
+      _, locale = maglev_services.extract_locale.call(params:, locales: maglev_site.locale_prefixes)
       ::I18n.locale = locale
     end
 

app/frontend/editor/components/dynamic-form/dynamic-input.vue

@@ -1,100 +1,16 @@
 <template>
-  <div>
-    <uikit-text-input
-      :label="label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      @blur="$emit('blur')"
-      v-model="inputValue"
-      v-if="
-        setting.type == 'text' &&
-        !options.html &&
-        parseInt(options.nbRows || 1) < 2
-      "
-    />
-    <uikit-textarea-input
-      :label="label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      :rows="options.nbRows"
-      @blur="$emit('blur')"
-      v-model="inputValue"
-      v-if="
-        setting.type == 'text' && !options.html && parseInt(options.nbRows) > 1
-      "
-    />
-    <uikit-rich-text-input
-      :label="label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      :lineBreak="options.lineBreak"
-      :rows="options.nbRows"
-      :table="options.htmlTable"
-      @blur="$emit('blur')"
-      v-model="inputValue"
-      v-if="setting.type == 'text' && options.html"
-    />
-    <uikit-image-input
-      :label="label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      v-model="inputValue"
-      v-if="setting.type == 'image'"
-    />
-    <uikit-icon-input
-      :label="label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      v-model="inputValue"
-      v-if="setting.type == 'icon'"
-    />
-    <uikit-checkbox-input
-      :label="label"
-      :name="setting.id"
-      v-model="inputValue"
-      v-if="setting.type == 'checkbox'"
-    />
-    <uikit-link-input
-      :label="label"
-      :name="setting.id"
-      :isFocused="isFocused"
-      :withText="options.withText"
-      v-model="inputValue"
-      v-if="setting.type == 'link'"
-    />
-    <uikit-color-input
-      :label="label"
-      :name="setting.id"
-      v-model="inputValue"
-      :presets="options.presets"
-      v-if="setting.type == 'color'"
-    />
-    <uikit-simple-select
-      :label="label"
-      :name="setting.id"
-      v-model="inputValue"
-      :selectOptions="options.selectOptions"
-      v-if="setting.type == 'select'"
-    />
-    <uikit-collection-item-input
-      :label="label"
-      :name="setting.id"
-      v-model="inputValue"
-      :collection-id="options.collectionId"
-      v-if="setting.type == 'collection_item'"
-    />
-
-    <uikit-divider
-      :text="label"
-      :withHint="options.withHint"
-      v-if="setting.type == 'divider'"
-    />
-
-    <uikit-hint :text="label" v-if="setting.type == 'hint'" />
-  </div>
+  <component 
+    :is="inputComponent"
+    v-bind="{...inputProps}"
+    v-model="inputValue"
+    @blur="$emit('blur')"
+    v-if="inputComponent" 
+  />
 </template>
 
 <script>
+import { getInput } from '@/misc/dynamic-inputs'
+
 export default {
   name: 'DynamicInput',
   props: {
@@ -104,6 +20,20 @@ export default {
     i18nScope: { type: String, required: false },
   },
   computed: {
+    inputComponent() {
+      return getInput(this.setting.type)?.component
+    },
+    inputProps() {
+      const input = getInput(this.setting.type)
+
+      if (!input) return {}
+
+      return input.transformProps({ 
+        label: this.label, 
+        name: this.name, 
+        isFocused: this.isFocused
+      }, this.options)
+    },
     label() {
       // i18n key examples:
       // - themes.simple.style.settings.main_color
@@ -114,9 +44,12 @@ export default {
         : null
       return translation || this.setting.label
     },
+    name() {
+      return this.setting.id
+    },
     options() {
       return this.setting.options
-    },
+    },    
     value() {
       const content = this.content.find(
         (sectionContent) => sectionContent.id === this.setting.id,

app/frontend/editor/components/kit/dropdown.vue

@@ -21,8 +21,6 @@
 </template>
 
 <script>
-import { ModalBus } from '@/plugins/event-bus'
-
 export default {
   name: 'UIKitDropdown',
   props: {
@@ -39,7 +37,7 @@ export default {
     }
   },
   mounted() {
-    ModalBus.$on('open', () => this.close())
+    this.modalBus.$on('open', () => this.close())
     document.addEventListener('keydown', this.onEscape)
     this.$once('hook:beforeDestroy', () => {
       document.removeEventListener('keydown', this.onEscape)

app/frontend/editor/components/kit/index.js

@@ -15,6 +15,7 @@ import SelectInput from './select-input.vue'
 import TextAreaInput from './textarea-input.vue'
 import TextInput from './text-input.vue'
 import RichTextInput from './rich-text-input.vue'
+import PolymorphicTextInput from './polymorphic-text-input.vue'
 import CheckboxInput from './checkbox-input.vue'
 import SearchInput from './search-input.vue'
 import Pagination from './pagination/index.vue'
@@ -42,6 +43,7 @@ Vue.component('uikit-select-input', SelectInput)
 Vue.component('uikit-textarea-input', TextAreaInput)
 Vue.component('uikit-text-input', TextInput)
 Vue.component('uikit-rich-text-input', RichTextInput)
+Vue.component('uikit-polymorphic-text-input', PolymorphicTextInput)
 Vue.component('uikit-checkbox-input', CheckboxInput)
 Vue.component('uikit-search-input', SearchInput)
 Vue.component('uikit-pagination', Pagination)

app/frontend/editor/components/kit/modal-root.vue

@@ -18,8 +18,6 @@
 </template>
 
 <script>
-import { ModalBus } from '@/plugins/event-bus'
-
 export default {
   name: 'UIKitModalRoot',
   data() {
@@ -28,7 +26,7 @@ export default {
     }
   },
   created() {
-    ModalBus.$on(
+    this.modalBus.$on(
       'open',
       ({
         component,
@@ -47,7 +45,7 @@ export default {
       },
     )
 
-    ModalBus.$on('close', () => this.handleClose())
+    this.modalBus.$on('close', () => this.handleClose())
     document.addEventListener('keyup', this.handleKeyup)
   },
   beforeDestroy() {