maglevcms 1.0.0 → 1.1.0

data/app/frontend/live-preview-client/rails.js

@@ -0,0 +1,204 @@
+import * as axios from 'axios'
+import { debounce } from './utils'
+
+const parentDocument = window.parent.document
+const previewDocument = window.document
+const csrfParam =
+  window.location !== window.parent.location
+    ? {
+        [parentDocument
+          .querySelector("meta[name='csrf-param']")
+          .getAttribute('content')]: parentDocument
+          .querySelector("meta[name='csrf-token']")
+          .getAttribute('content'),
+      }
+    : {}
+
+const start = () => {
+  // Within a Rails site, no need to remove the event listeners
+  window.addEventListener('maglev:section:add', addSection)
+  window.addEventListener('maglev:section:move', moveSections)
+  window.addEventListener('maglev:section:update', updateSection)
+  window.addEventListener('maglev:section:remove', removeSection)
+  window.addEventListener('maglev:block:add', replaceSection)
+  window.addEventListener('maglev:block:move', replaceSection)
+  window.addEventListener('maglev:block:update', updateBlock)
+  window.addEventListener('maglev:block:remove', replaceSection)
+
+  window.addEventListener('maglev:style:update', updateStyle)
+}
+
+export default { start }
+
+// === Section related actions ===
+
+const addSection = (event) => {
+  const { content, section, insertAt } = event.detail
+  debouncedUpdatePreviewDocument(content, section, insertAt)
+}
+
+const moveSections = (event) => {
+  const { sectionId, targetSectionId, direction } = event.detail
+
+  const sectionElement = previewDocument.querySelector(
+    `[data-maglev-section-id='${sectionId}']`,
+  )
+  const targetSectionElement = previewDocument.querySelector(
+    `[data-maglev-section-id='${targetSectionId}']`,
+  )
+
+  if (direction === 'up')
+    targetSectionElement.parentNode.insertBefore(
+      sectionElement,
+      targetSectionElement,
+    )
+  else
+    targetSectionElement.parentNode.insertBefore(
+      sectionElement,
+      targetSectionElement.nextSibling,
+    )
+
+  // scroll to the new placement of the section
+  sectionElement.scrollIntoView(true)
+}
+
+const updateSection = (event) => {
+  const { content, section, change } = event.detail
+  updateSectionOrBlock(content, section, section, change)
+}
+
+const removeSection = (event) => {
+  const { sectionId } = event.detail
+  const selector = `[data-maglev-section-id='${sectionId}']`
+  let element = previewDocument.querySelector(selector)
+  element.remove()
+}
+
+// === Block related actions ===
+
+const updateBlock = (event) => {
+  const { content, section, sectionBlock, change } = event.detail
+  updateSectionOrBlock(content, section, sectionBlock, change)
+}
+
+const replaceSection = (event) => {
+  const { content, section } = event.detail
+  debouncedUpdatePreviewDocument(content, section)
+}
+
+// === Other actions ===
+
+const updateStyle = async (event) => {
+  const { content, style } = event.detail
+
+  const doc = await getUpdatedDoc({
+    pageSections: JSON.stringify(content.pageSections),
+    style: JSON.stringify(style),
+  })
+
+  // update the CSS variables
+  const selector = '#maglev-style'
+  const sourceElement = doc.querySelector(selector)
+  let targetElement = previewDocument.querySelector(selector)
+
+  if (sourceElement) {
+    targetElement.replaceWith(sourceElement)
+  }
+}
+
+// === Helpers ===
+
+const updateSectionOrBlock = (content, section, source, change) => {
+  const foundSetting = updateSetting(source, change)
+  if (!foundSetting) debouncedUpdatePreviewDocument(content, section)
+}
+
+const updateSetting = (source, change) => {
+  switch (change.settingType) {
+    case 'text':
+      return updateTextSetting(source, change)
+    case 'link':
+      if (change.settingOptions.withText && change.value)
+        return updateTextSetting(source, {
+          ...change,
+          value: change.value.text,
+          settingId: `${change.settingId}.text`,
+        })
+      break
+    default:
+      // ok, we can't cherry-pick the modification so we have to refresh the whole section
+      break
+  }
+  return false
+}
+
+const updateTextSetting = (source, change) => {
+  const selector = `[data-maglev-id='${source.id}.${change.settingId}']`
+  const settings = previewDocument.querySelectorAll(selector)
+  settings.forEach(($el) => ($el.innerHTML = change.value))
+  return settings.length > 0
+}
+
+const updatePreviewDocument = async (content, section, insertAt) => {
+  const doc = await getUpdatedDoc({
+    pageSections: JSON.stringify([
+      content.pageSections.find((s) => s.id == section.id), // no need to render the other sections
+    ]),
+  })
+
+  // NOTE: Instructions to refresh the whole document
+  // removeEventListeners()
+  // previewDocument.querySelector('body').replaceWith(doc.querySelector('body'))
+  // setupEvents(previewDocument)
+
+  const selector = `[data-maglev-section-id='${section.id}']`
+  const sourceElement = doc.querySelector(selector)
+  let targetElement = previewDocument.querySelector(selector)
+
+  if (!sourceElement)
+    throw new Error(`Maglev section ${section.id} not generated by the server`)
+
+  if (targetElement) {
+    targetElement.replaceWith(sourceElement)
+  } else {
+    insertSectionInDOM(sourceElement, insertAt)
+    targetElement = previewDocument.querySelector(selector)
+  }
+
+  targetElement.scrollIntoView(true)
+}
+
+const debouncedUpdatePreviewDocument = debounce(updatePreviewDocument, 300)
+
+const insertSectionInDOM = (element, insertAt) => {
+  switch (insertAt) {
+    case 'top': {
+      const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
+      parentNode.prepend(element)
+      break
+    }
+    case 'bottom':
+    case undefined:
+    case null:
+    case '': {
+      const parentNode = previewDocument.querySelector('[data-maglev-dropzone]')
+      parentNode.appendChild(element)
+      break
+    }
+    default: {
+      const selector = `[data-maglev-section-id='${insertAt}']`
+      const pivotElement = previewDocument.querySelector(selector)
+      pivotElement.parentNode.insertBefore(element, pivotElement.nextSibling)
+    }
+  }
+}
+
+const getUpdatedDoc = async (attributes) => {
+  const { data } = await axios.post(previewDocument.location.href, {
+    ...attributes,
+    ...csrfParam,
+  })
+  const parser = new DOMParser()
+  const doc = parser.parseFromString(data, 'text/html')
+  return doc
+}

data/app/frontend/live-preview-client/utils.js

@@ -0,0 +1,22 @@
+export const isBlank = (object) => {
+  return (
+    object === undefined ||
+    object === null ||
+    (typeof object === 'string' && object.length === 0) ||
+    (typeof object === 'object' && object.length === 0)
+  )
+}
+
+export const debounce = (fn, time) => {
+  let timeoutId
+  function wrapper(...args) {
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+    }
+    timeoutId = setTimeout(() => {
+      timeoutId = null
+      fn(...args)
+    }, time)
+  }
+  return wrapper
+}

data/app/helpers/maglev/application_helper.rb

@@ -1,13 +1,27 @@
 # frozen_string_literal: true
 
-require 'webpacker/helper'
+require 'vite_rails/version'
+require 'vite_rails/tag_helpers'
 
 module Maglev
   module ApplicationHelper
-    include ::Webpacker::Helper
+    include ::ViteRails::TagHelpers
 
-    def current_webpacker_instance
-      use_engine_webpacker? ? ::Maglev.webpacker : super
+    def vite_manifest
+      use_engine_vite? ? maglev_asset_manifest : super
+    end
+
+    def maglev_live_preview_client_javascript_tag
+      # no need to render the tag when the site is being visited outside the editor
+      return '' unless maglev_rendering_mode == :editor
+
+      entries = maglev_asset_manifest.resolve_entries(*%w[live-preview-rails-client], type: :javascript)
+
+      javascript_include_tag(*entries.fetch(:scripts).flatten.uniq, crossorigin: 'anonymous', type: 'module')
+    end
+
+    def maglev_asset_manifest
+      ::Maglev::Engine.vite_ruby.manifest
     end
   end
 end

data/app/helpers/maglev/editor_helper.rb

@@ -54,7 +54,14 @@ module Maglev
     end
 
     def editor_favicon_url
-      editor_asset_path(maglev_config.favicon, 'favicon.png')
+      case maglev_config.favicon
+      when nil
+        editor_asset_path(nil, 'favicon.png')
+      when String
+        editor_asset_path(maglev_config.favicon, 'favicon.png')
+      when Proc
+        instance_exec(maglev_site, &maglev_config.favicon)
+      end
     end
 
     def editor_site_publishable
@@ -63,8 +70,11 @@ module Maglev
 
     def editor_asset_path(source, default_source)
       if source.blank?
-        asset_path("maglev/#{default_source}")
+        vite_asset_path("images/#{default_source}")
+      elsif source =~ %r{^(https?://|/)}
+        source
       else
+        # rely on Sprockets by default
         ActionController::Base.helpers.asset_path(source)
       end
     end

data/app/models/maglev/asset.rb

@@ -10,7 +10,7 @@ module Maglev
     ## methods ##
 
     def to_param
-      "#{id}-#{filename.parameterize}"
+      "#{id}-#{File.basename(filename, '.*').parameterize}#{File.extname(filename)}"
     end
 
     ## class methods ##

data/app/views/layouts/maglev/admin/application.html.erb

@@ -2,13 +2,14 @@
 <html>
 <head>
   <title>Maglev - Admin</title>
+  
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
-  <%= javascript_pack_tag 'application' %>
-  <%= stylesheet_pack_tag 'application' %>
-
-  <%= favicon_link_tag 'maglev/favicon.png' %>
+  <%= vite_javascript_tag 'admin' %>
+  <%= vite_stylesheet_tag 'admin.scss' %>
+  
+  <%= favicon_link_tag vite_asset_path 'images/favicon.png' %>
 </head>
 <body class="bg-gray-100">
   <main role="main" class="container mx-auto">

data/app/views/maglev/editor/show.html.erb

@@ -19,15 +19,15 @@
     window.customTranslations = <%= h editor_custom_translations.to_json.html_safe %>
   </script>
   
-  <%= javascript_pack_tag 'editor' %>
-  <%= stylesheet_pack_tag 'editor' %>
+  <%= vite_client_tag %>
+  <%= vite_javascript_tag 'editor' %>
 
   <%= favicon_link_tag editor_favicon_url %>
 
   <style>
     :root {
       --editor-color-primary: <%= editor_primary_hex_color %>;
-      --editor-color-primary-non-hex: <%= editor_primary_rgb_color.join(', ') %>;
+      --editor-color-primary-rgb: <%= editor_primary_rgb_color.join(' ') %>;
     }
   </style>
 

data/app/views/maglev/settings/index.html.erb

@@ -0,0 +1,11 @@
+<html>
+<body>
+  <code>
+    <pre>
+      http://localhost:3000<%= sources_from_manifest_entrypoints(%w(live-preview-client), type: :javascript).first %>
+
+      <%= live_preview_client_js_url %>
+    </pre>
+  </code>
+</body>
+</html>

data/bin/vite

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'vite' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+bundle_binstub = File.expand_path("../bundle", __FILE__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("vite_ruby", "vite")

data/config/routes.rb

@@ -19,6 +19,16 @@ Maglev::Engine.routes.draw do
 
   root to: redirect { Maglev::Engine.routes.url_helpers.admin_root_path }
 
+  # JS client lib for a headless use of Maglev
+  get 'live-preview-client.js', to: (redirect(status: 302) do |_, request|
+    manifest = ::Maglev::Engine.vite_ruby.manifest
+    entries = manifest.resolve_entries(*%w[live-preview-rails-client], type: :javascript)
+    [
+      request.base_url,
+      *entries.fetch(:scripts).flatten.uniq
+    ].join
+  end), as: :live_preview_client_js
+
   # Admin
   namespace :admin do
     root to: 'dashboard#index'

data/config/vite.json

@@ -0,0 +1,16 @@
+{
+  "all": {
+    "sourceCodeDir": "app/frontend",
+    "watchAdditionalPaths": []
+  },
+  "development": {
+    "autoBuild": true,
+    "publicOutputDir": "maglev-assets",
+    "port": 3136
+  },
+  "test": {
+    "autoBuild": true,
+    "publicOutputDir": "maglev-assets",
+    "port": 3137
+  }
+}

data/lib/generators/maglev/install_generator.rb

@@ -7,7 +7,7 @@ module Maglev
     hook_for :maglev_install
 
     def compile_editor_assets
-      rake 'maglev:webpacker:compile'
+      rake 'maglev:vite:build_all'
     end
 
     def migrations

data/lib/generators/maglev/section_generator.rb

@@ -21,7 +21,8 @@ module Maglev
 
     def select_category
       @category = options['category']
-      return if @category.present?
+
+      return if @category.present? && categories.include?(@category)
 
       say 'You have to select a category for your section. Please check your Maglev theme.yml file to manage them.',
           :blue

data/lib/generators/maglev/templates/install/config/initializers/maglev.rb

@@ -7,10 +7,16 @@ Maglev.configure do |config|
   # Logo of the Editor (top left corner).
   # Put your custom logo in the app/assets/images folder of your Rails application.
   # config.logo = 'logo.png'
+  # Or use the following option:
+  # config.logo = ->(site) { site.siteable.avatar_url }
+  # config.logo = ->(site) { ActionController::Base.helpers.vite_asset_path('logo.png') }
 
   # Favicon (window tab)
   # Put your custom favicon in the app/assets/images folder of your Rails application.
   # config.favicon = 'favicon.ico'
+  # Or use the following options:
+  # config.favicon = ->(site) { site.siteable.favicon_url }
+  # config.favicon = ->(site) { ActionController::Base.helpers.vite_asset_path('favicon.png') }
 
   # Primary color of the Editor
   # config.primary_color = '#7E6EDB'

data/lib/generators/maglev/templates/section/app/theme/sections/%category%/%file_name%.yml.tt

@@ -14,7 +14,7 @@ category: <%= category %>
 # Insert this section at the top or the bottom of the page (default: nil)
 # insert_at: top 
 
-# one single instance per page?
+# One single instance per page?
 # singleton: true
 
 # Definition of the settings:
@@ -37,7 +37,7 @@ settings:
   - label: Option 2
     value: option_2
   <%- when 'color' -%>
-  presents: ['#E5E7EB', '#FECACA', '#FDE68A', '#A7F3D0', '#BFDBFE']
+  presets: ['#E5E7EB', '#FECACA', '#FDE68A', '#A7F3D0', '#BFDBFE']
   <%- end -%>
   <% if setting.value? -%>default: <%= setting.default %><% end -%>
 

data/lib/generators/maglev/templates/theme/app/views/theme/layout.html.erb.tt

@@ -11,6 +11,8 @@
 
   <%%= render_maglev_alternate_links %>
 
+  <%%= maglev_live_preview_client_javascript_tag %>
+
   <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
 </head>
 <body class="bg-white">

data/lib/maglev/engine.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require 'vite_ruby'
+
 module Maglev
   class Engine < ::Rails::Engine
     isolate_namespace Maglev
@@ -10,8 +12,6 @@ module Maglev
       g.factory_bot dir: 'spec/factories'
     end
 
-    config.assets.precompile += %w[maglev/logo.png maglev/favicon.png]
-
     initializer 'maglev.theme_reloader' do |app|
       require_relative './theme_filesystem_loader'
       theme_path = Rails.root.join('app/theme')
@@ -38,29 +38,34 @@ module Maglev
       Rails.application.config.i18n.load_path += Dir["#{config.root}/config/locales/**/*.yml"]
     end
 
-    initializer 'maglev.webpacker.proxy' do |app|
-      insert_middleware = begin
-        Maglev.webpacker.config.dev_server.present?
-      rescue StandardError
-        nil
-      end
-      next unless insert_middleware
+    delegate :vite_ruby, to: :class
 
-      app.middleware.insert_before(
-        0, Webpacker::DevServerProxy,
-        ssl_verify_none: true,
-        webpacker: Maglev.webpacker
-      )
+    def self.vite_ruby
+      @vite_ruby ||= ::ViteRuby.new(root: root)
     end
 
-    # Serves the engine's webpack when requested
-    initializer 'maglev.webpacker.static' do |app|
-      app.config.middleware.insert_before(
-        1,
+    # Serves the engine's vite-ruby when requested
+    initializer 'maglev.vite_rails.static' do |app|
+      app.config.middleware.use(
         Rack::Static,
-        urls: ['/maglev-packs'],
-        root: File.expand_path(File.join(__dir__, '..', '..', 'public'))
+        urls: ["/#{vite_ruby.config.public_output_dir}"],
+        root: root.join(vite_ruby.config.public_dir)
       )
     end
+
+    initializer 'maglev.vite_rails_engine.proxy' do |app|
+      if vite_ruby.run_proxy?
+        app.middleware.insert_before 0,
+                                     ViteRuby::DevServerProxy,
+                                     ssl_verify_none: true,
+                                     vite_ruby: vite_ruby
+      end
+    end
+
+    initializer 'maglev.vite_rails_engine.logger' do
+      config.after_initialize do
+        vite_ruby.logger = Rails.logger
+      end
+    end
   end
 end

data/lib/maglev/theme_filesystem_loader.rb

@@ -14,7 +14,7 @@ module Maglev
       theme.sections = Maglev::Section::Store.new(sections)
       theme
     rescue Errno::ENOENT
-      Kernel.puts "Missing theme file(s) in #{path}"
+      log_missing_theme_file(path)
     end
 
     private
@@ -51,5 +51,13 @@ module Maglev
       path = fetch_section_screenshot_path.call(theme: theme, section: section, absolute: true)
       File.exist?(path) ? File.mtime(path).to_i : nil
     end
+
+    def log_missing_theme_file(path)
+      # don't log the error if the ruby code is not executed inside
+      # the Rails console or when the Rails server is running
+      return if !Rails.const_defined?('Console') && !Rails.const_defined?('Server')
+
+      Kernel.puts "Missing theme file(s) in #{path}"
+    end
   end
 end

data/lib/maglev/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Maglev
-  VERSION = '1.0.0'
+  VERSION = '1.1.0'
 end

data/lib/maglev.rb

@@ -59,12 +59,5 @@ module Maglev
     def services(overrides = {})
       ::Maglev::AppContainer.new(config.services.merge(overrides)).call
     end
-
-    def webpacker
-      @webpacker ||= ::Webpacker::Instance.new(
-        root_path: ROOT_PATH,
-        config_path: ROOT_PATH.join('config/webpacker.yml')
-      )
-    end
   end
 end