Add Propshaft support (#1402)

* Add propshaft support

Author: Bramjetten

Gemfile

@@ -3,6 +3,9 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 gemspec
 
+# Assets for the dummy app (can also be sprockets, but propshaft is the new default)
+gem "propshaft"
+
 group :development do
   gem "letter_opener"
 end

Gemfile.lock

@@ -16,7 +16,6 @@ PATH
       pg
       rack-rewrite (>= 1.5.0)
       rails (>= 6.0, < 8.0)
-      sprockets-rails
       stimulus-rails (>= 0.7.0)
       tailwindcss-ruby
       turbo-rails (>= 0.9, < 3.0)
@@ -228,6 +227,11 @@ GEM
     nokogiri (1.16.7-x86_64-linux)
       racc (~> 1.4)
     pg (1.5.9)
+    propshaft (1.1.0)
+      actionpack (>= 7.0.0)
+      activesupport (>= 7.0.0)
+      rack
+      railties (>= 7.0.0)
     pry (0.15.0)
       coderay (~> 1.1)
       method_source (~> 1.0)
@@ -305,13 +309,6 @@ GEM
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
     simplecov-html (0.10.2)
-    sprockets (4.2.1)
-      concurrent-ruby (~> 1.0)
-      rack (>= 2.2.4, < 4)
-    sprockets-rails (3.5.2)
-      actionpack (>= 6.1)
-      activesupport (>= 6.1)
-      sprockets (>= 3.0.0)
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.2)
@@ -364,6 +361,7 @@ DEPENDENCIES
   letter_opener
   minitest-reporters
   mocha
+  propshaft
   pry-rails
   puma
   rails-controller-testing

app/assets/config/spina/manifest.js

@@ -5,7 +5,7 @@
 //= link_directory ../../javascripts/spina/libraries
 
 //= link spina/animate.css
-//= link spina/fonts.css
+//= link spina/fonts-sprockets.css
 //= link spina/tailwind.css
 
-//= link spina/application.js
+//= link spina/application.js

app/assets/javascripts/spina/application.js

@@ -1,3 +1,3 @@
 import "@hotwired/turbo-rails"
 import "libraries/trix"
-import "controllers"
+import "controllers"

app/assets/javascripts/spina/controllers/confetti_controller.js

@@ -40,4 +40,4 @@ export default class extends Controller {
     return document.querySelector("#confetti")
   }
 
-}
+}

app/assets/javascripts/spina/controllers/data_binding_controller.js

@@ -1 +1,234 @@
-//= require ../libraries/stimulus-data-bindings@1.3.2.js
+import { Controller } from '@hotwired/stimulus'
+
+/**
+ * One way data and visibility bindings for inputs
+ * @extends Controller
+ */
+export default class DataBindingController extends Controller {
+  /**
+   * Initialize bindings on connection to the DOM
+   */
+  connect() {
+    if (this.element.dataset.bindingDebug === "true") {
+      this.debugMode = true
+    }
+
+    this._debug("stimulus-data-binding: connecting to wrapper:", this.element)
+
+    const sourceElements = Array.from(this.element.querySelectorAll('[data-binding-target]'))
+    if (this.element.dataset.bindingTarget) sourceElements.unshift(this.element)
+
+    if (sourceElements.length === 0) this._debug("No source elements found. Did you set data-binding-target on your source elements?")
+
+    for (const sourceElement of sourceElements) {
+      if (this.debugMode) console.group("stimulus-data-binding: Source element")
+      this._debug("Source element found", sourceElement)
+
+      if (sourceElement.dataset.bindingInitial !== 'false') {
+        this._debug("Running initial binding on source element")
+        this._runBindings(sourceElement)
+      } else {
+        this._debug("%cNot running initial binding on source element as binding-initial is set to false", "color: rgba(150,150,150,0.8);")
+      }
+
+      if (this.debugMode) console.groupEnd()
+    }
+  }
+
+  /**
+   * Updates bindings for the current element.
+   * @param {Event} e - an event with a currentTarget DOMElement
+   */
+  update(e) {
+    this._runBindings(e.currentTarget)
+  }
+
+  /**
+   * @private
+   * @param {DOMElement} source
+   */
+  _runBindings(source) {
+    this._debug("Searching for targets for source: ", source)
+    for (const targetRef of source.dataset.bindingTarget.split(' ')) {
+      const targetElements = this._bindingElements(targetRef)
+
+      if (targetElements.length === 0) this._debug(`Could not find any target elements for ref ${targetRef}. Have you set data-target-ref="${targetRef}" on your target elements?`)
+
+      for (const target of targetElements) {
+        if (this.debugMode) console.group("stimulus-data-binding: Target Element")
+        this._debug("Target found. Running bindings for target: ", target)
+
+        const bindingCondition = this._getDatum('bindingCondition', source, target)
+
+        if (bindingCondition) {
+          this._debug(`Evaluating binding condition: '${bindingCondition}'`)
+        } else {
+          this._debug(`%cNo binding condition set. Evaluating as true. To add a condition set 'data-binding-condition="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        const conditionPassed = this._evaluate(
+          bindingCondition,
+          {
+            source,
+            target
+          }
+        )
+
+        if (conditionPassed) {
+          this._debug(`Condition evaluated to: `, conditionPassed)
+        } else {
+          this._debug(`Condition evaluated to: `, conditionPassed)
+        }
+
+        const bindingValue = this._getDatum('bindingValue', source, target)
+
+        if (bindingValue) {
+          this._debug(`Evaluating binding value: '${bindingValue}'`)
+        } else {
+          this._debug(`%cNo binding value set, evaluating as true. to set a value for the attribute / property on your target elements set 'data-binding-value="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        const value = this._evaluate(
+          bindingValue,
+          {
+            source,
+            target
+          }
+        )
+
+        this._debug(`Value evaluated to: '${value}'`)
+
+        const bindingAttribute = this._getDatum(
+          'bindingAttribute',
+          source,
+          target
+        )
+
+        if (!bindingAttribute) {
+          this._debug(`%cNo binding attribute set. To add attributes to your target element set 'data-binding-attribute="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        if (bindingAttribute) {
+          for (const attribute of bindingAttribute.split(' ')) {
+            if (conditionPassed) {
+              this._debug(`Condition passed so setting attribute '${attribute}' to '${value}'`)
+              target.setAttribute(attribute, value)
+            } else {
+              this._debug(`Condition failed so removing attribute '${attribute}'`)
+              target.removeAttribute(attribute)
+            }
+          }
+        }
+
+        const bindingProperty = this._getDatum(
+          'bindingProperty',
+          source,
+          target
+        )
+
+        if (!bindingProperty) {
+          this._debug(`%cNo binding property set. To add properties to your target element set 'data-binding-property="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        if (bindingProperty) {
+          for (const prop of bindingProperty.split(' ')) {
+            const propertyValue = conditionPassed ? value : ''
+            if (target[prop] != propertyValue) { target.dataset.hasChanged = true }
+
+            if (conditionPassed) {
+              this._debug(`Condition passed so setting property '${prop}' from ${target[prop]} to '${value}'`)
+            } else {
+              this._debug(`Condition failed so setting property '${prop}' from ${target[prop]} to '' (empty string)`)
+            }
+
+            target[prop] = propertyValue
+          }
+        }
+
+        const bindingClass = this._getDatum(
+          'bindingClass',
+          source,
+          target
+        )
+
+        if (!bindingClass) {
+          this._debug(`%cNo binding class set. To add classes to your target element set 'data-binding-class="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        if (bindingClass) {
+          for (const klass of bindingClass.split(' ')) {
+            if (conditionPassed) {
+              this._debug(`Condition passed so adding class '${klass}'`)
+              target.classList.add(klass)
+            } else {
+              this._debug(`Condition failed so removing class '${klass}'`)
+              target.classList.remove(klass)
+            }
+          }
+        }
+
+        const bindingEvent = this._getDatum('bindingEvent', source, target)
+
+        if (!bindingEvent) {
+          this._debug(`%cNo binding event set. To dispatch events on property change to your target element set 'data-binding-event="..."'`, "color: rgba(150,150,150,0.8);")
+        }
+
+        if (bindingEvent) {
+          for (const event of bindingEvent.split(' ')) {
+            if (target.dataset.hasChanged) {
+              this._debug(`Target has changed so dispatching event ${event}`)
+              target.dispatchEvent(new Event(event, { cancelable: true, bubbles: true }))
+              delete target.dataset.hasChanged
+            } else {
+              this._debug(`No changes to target properties so not dispatching '${event}'`)
+            }
+          }
+        }
+
+        if (this.debugMode) console.groupEnd()
+      }
+    }
+  }
+
+  /**
+   * @private
+   * @param {String} name - the name of the binding reference
+   */
+  _bindingElements(name) {
+    return this.element.querySelectorAll(`[data-binding-ref="${name}"]`)
+  }
+
+  /**
+   * @private
+   * @param {String} attribute - the attribute to fetch from the source / target dataaset
+   * @param {String} source - The source element to get the attribute from, only loads if target doesnt have it
+   * @param {String} target - The target element to get the attribute from, has precedence over the source
+   */
+  _getDatum(attribute, source, target) {
+    return target.dataset[attribute] || source.dataset[attribute]
+  }
+
+  /**
+   * @private
+   * @param {String} expression - expression to safe eval
+   * @param {Object} variables - variables to be present when evaluating the given expression
+   */
+  _evaluate(expression, variables = {}) {
+    if (!expression) return true
+    return new Function(
+      Object.keys(variables).map((v) => `$${v}`),
+      `return ${expression.trim()}`
+    )(...Object.values(variables))
+  }
+
+  /**
+  * @private
+  * @param {String} expression - expression to safe eval
+  * @param {Object} variables - variables to be present when evaluating the given expression
+  */
+  _debug(...args) {
+    if (this.debugMode) {
+      console.log(...args)
+    }
+  }
+}

app/assets/javascripts/spina/controllers/form_controller.js

@@ -1,6 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
 import debounce from "libraries/debounce"
-import formRequestSubmitPolyfill from "libraries/form-request-submit-polyfill"
 
 export default class extends Controller {
 
@@ -20,4 +19,4 @@ export default class extends Controller {
     return this.element.dataset.debounceTime || 0
   }
 
-}
+}

app/assets/javascripts/spina/controllers/hotkeys_controller.js

@@ -18,4 +18,4 @@ export default class extends Controller {
     }
   }
 
-}
+}

app/assets/javascripts/spina/controllers/reveal_controller.js

@@ -1,6 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
 import Sortable from "libraries/sortablejs"
-import formRequestSubmitPolyfill from "libraries/form-request-submit-polyfill"
 
 export default class extends Controller {
   static get targets() {
@@ -36,4 +35,4 @@ export default class extends Controller {
     return this.sortable.toArray()
   }
 
-}
+}

app/assets/javascripts/spina/controllers/sortable_controller.js

@@ -1 +1 @@
-//= require ./canvas-confetti@1.3.2.js
+export { default } from "libraries/canvas-confetti@1.3.2"

app/assets/javascripts/spina/libraries/canvas-confetti.js

@@ -1 +1 @@
-//= require ./hotkeys@3.8.7.js
+export { default } from "libraries/hotkeys@3.8.7"

app/assets/javascripts/spina/libraries/form-request-submit-polyfill.js

@@ -1 +1 @@
-//= require ./sortablejs@1.13.0.js
+export { default } from "libraries/sortablejs@1.13.0"

app/assets/javascripts/spina/libraries/form-request-submit-polyfill@2.0.0.js

@@ -1,4 +1,4 @@
-//= require ./trix@1.3.1.esm.js
+import "libraries/trix@1.3.1.esm"
 
 // Extra headings
 Trix.config.blockAttributes.heading2 = {

app/assets/javascripts/spina/libraries/hotkeys.js

@@ -0,0 +1,114 @@
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 400;
+  src: url('Metropolis-Regular.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-style: italic;
+  src: url('Metropolis-RegularItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 100;
+  src: url('Metropolis-Thin.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 100;
+  font-style: italic;
+  src: url('Metropolis-ThinItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 200;
+  src: url('Metropolis-ExtraLight.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 200;
+  src: url('Metropolis-ExtraLightItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 300;
+  src: url('Metropolis-Light.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 300;
+  font-style: italic;
+  src: url('Metropolis-LightItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 500;
+  src: url('Metropolis-Medium.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 500;
+  font-style: italic;
+  src: url('Metropolis-MediumItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 600;
+  src: url('Metropolis-SemiBold.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 600;
+  font-style: italic;
+  src: url('Metropolis-SemiBoldItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 700;
+  src: url('Metropolis-Bold.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 700;
+  font-style: italic;
+  src: url('Metropolis-BoldItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 800;
+  src: url('Metropolis-ExtraBold.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 800;
+  font-style: italic;
+  src: url('Metropolis-ExtraBoldItalic.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 900;
+  src: url('Metropolis-Black.woff2') format("woff2");
+}
+
+@font-face {
+  font-family: "Metropolis";
+  font-weight: 900;
+  font-style: italic;
+  src: url('Metropolis-BlackItalic.woff2') format("woff2");
+}

app/assets/javascripts/spina/libraries/sortablejs.js

@@ -1,10 +1,10 @@
 module Spina::Admin
   module PagesHelper
     def asset_available?(path)
-      if Rails.configuration.assets.compile
-        Rails.application.precompiled_assets.include?(path)
-      else
-        Rails.application.assets_manifest.assets[path].present?
+      if defined?(Propshaft)
+        check_propshaft_asset(path)
+      elsif defined?(Sprockets)
+        check_sprockets_asset(path)
       end
     end
 
@@ -24,5 +24,24 @@ def parts_partial_namespace(part_type)
     def option_label(part, value)
       t(["options", part.name, value].compact.join("."))
     end
+
+    private
+
+      def check_propshaft_asset(path)
+        if Rails.configuration.assets.compile
+          Rails.application.assets.load_path.find(path).present? rescue false
+        else
+          Rails.application.assets.asset_for(path).present? rescue false
+        end
+      end
+
+      def check_sprockets_asset(path)
+        if Rails.configuration.assets.compile
+          Rails.application.precompiled_assets.include?(path)
+        else
+          Rails.application.assets_manifest.assets[path].present?
+        end
+      end
+
   end
 end

app/assets/javascripts/spina/libraries/stimulus-data-bindings@1.3.2.js

@@ -10,8 +10,15 @@
 
     <title><%= Spina.config.backend_title %></title>
 
+    <!-- Fonts -->
+    <% if defined?(Propshaft) %>
+      <%= stylesheet_link_tag "spina/fonts-propshaft", data: {turbo_track: "reload"} %>
+    <% elsif defined?(Sprockets) %>
+      <%= stylesheet_link_tag "spina/fonts-sprockets", data: {turbo_track: "reload"} %>
+    <% end %>
+
     <!-- Stylesheets -->
-    <%= stylesheet_link_tag "spina/tailwind", "spina/fonts", "spina/animate", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "spina/tailwind", "spina/animate", "data-turbo-track": "reload" %>
 
     <!-- Spina's importmap -->
     <%= spina_importmap_tags %>
@@ -25,4 +32,4 @@
     <%= render "spina/admin/shared/version" %>
     <%= content_for?(:body) ? yield(:body) : yield %>
   </body>
-</html>
+</html>

app/assets/javascripts/spina/libraries/stimulus-reveal@1.4.2.js

@@ -11,7 +11,6 @@
 require "view_component"
 require "jsonapi/serializer"
 require "browser"
-require "sprockets/railtie"
 
 module Spina
   class Engine < ::Rails::Engine

app/assets/javascripts/spina/libraries/trix.js

@@ -1,7 +1,10 @@
 module Spina
   class Railtie < Rails::Railtie
     initializer "spina.assets.precompile" do |app|
-      app.config.assets.precompile += %w[spina/manifest]
+      if defined?(Sprockets)
+        # Sprockets configuration
+        app.config.assets.precompile += %w[spina/manifest]
+      end
     end
 
     initializer "spina.theme_reloader" do |app|

app/assets/stylesheets/spina/fonts-propshaft.css

@@ -34,7 +34,6 @@ Gem::Specification.new do |gem|
   gem.files = Dir["{app,config,db,lib,vendor}/**/*"] + ["Rakefile", "README.md"]
 
   gem.add_dependency "rails", ">= 6.0", "< 8.0"
-  gem.add_dependency "sprockets-rails"
   gem.add_dependency "pg"
   gem.add_dependency "bcrypt"
   gem.add_dependency "image_processing"