Remove sassc sprockets (#4)

* remove sassc/sprockets dependencies.
add propshaft + css/js-bundling-rails instead

* add puma for system tests

* remove jquery-rails

* add built assets to git

* make jquery available globally for now

* add propshaft to all gemfiles, update rails versions to fix security warnings

* use sprockets for 6.1 - propshaft needs rails 7

* enable file_upload

* add flatpickr package

* fix burger menu

* move redactor imports to wysywyg.js

* remove compiled assets from git. compile on gem build instead.

Downside: the gem cannot be used directly from git (referenced in Gemfile via github/git/path) since assets are missing.

.gitattributes

@@ -1,2 +1,3 @@
 app/assets/javascripts/comfy/vendor/* linguist-vendored
 app/assets/stylesheets/comfy/vendor/* linguist-vendored
+app/assets/builds/* linguist-generated

.github/workflows/coveralls.yml

@@ -26,6 +26,13 @@ jobs:
       - name: Checkout source
         uses: actions/checkout@v2
 
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+
       - name: Install Ruby ${{ matrix.ruby-version }}
         uses: ruby/setup-ruby@v1
         with:

.github/workflows/rubyonrails.yml

@@ -28,6 +28,13 @@ jobs:
       - name: Checkout source
         uses: actions/checkout@v2
 
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: yarn
+      - run: yarn install --frozen-lockfile
+
       - name: Install Ruby ${{ matrix.ruby-version }}
         uses: ruby/setup-ruby@v1
         with:

.gitignore

@@ -19,3 +19,7 @@ coverage/
 /storage
 db/cms_fixtures/test-site/
 .idea
+
+/node_modules
+/app/assets/builds/*
+!/app/assets/builds/.keep

CONTRIBUTING.md

@@ -8,6 +8,8 @@ Fork the project. Optionally, create a branch you want to work on.
 
 ### 2. Get it running locally
 
+- Install NodeJS and yarn
+- Install JS dependencies with `yarn`
 - Install gem dependencies with `bundle install`
 - There's nothing to configure, by default database is SQLite so it will be
   created for you. Just run `bundle exec rake db:migrate`
@@ -19,7 +21,7 @@ Fork the project. Optionally, create a branch you want to work on.
 ### 3. Hack away
 
 - Create a few small pull requests instead of a humoungous one. I can merge small stuff faster.
-- When adding new code just make sure it follows the same slyle as the existing code.
+- When adding new code just make sure it follows the same style as the existing code.
 - Avoid adding 3rd party dependencies if you can.
 - Tests please, but nothing complicated. UnitTest / Fixtures all the way. Make sure all tests pass.
 - Run `bundle exec rubocop` and fix any issues raised.

Gemfile

@@ -12,6 +12,7 @@ group :development, :test do
   gem 'byebug',             '~> 11.1.0', platforms: %i[mri mingw x64_mingw]
   gem 'gem-release'
   gem 'image_processing',   '>= 1.12.0'
+  gem 'propshaft',          '~> 1.1.0'
   gem 'sqlite3',            '~> 1.6.7'
   # gem 'mysql2',             '~> 0.5'
   # gem 'pg',                 '~> 1.5.4'
@@ -31,6 +32,7 @@ group :test do
   gem 'minitest',                 '>= 5.23.0'
   gem 'minitest-reporters',       '>= 1.6.1'
   gem 'mocha',                    '>= 2.3.0', require: false
+  gem 'puma'
   gem 'rails-controller-testing', '~> 1.0.5'
   gem 'rubocop',                  '~> 1.63.0', require: false
   gem 'rubocop-minitest'

app/assets/config/manifest.js

@@ -0,0 +1 @@
+//= link_tree ../builds

app/assets/javascripts/comfy/admin/cms/application.js

@@ -1,39 +1,24 @@
-//= require rails-ujs
-//= require jquery3
+import ujs from "@rails/ujs";
+ujs.start();
 
-//= require comfy/vendor/codemirror
-//= require comfy/vendor/codemirror/mode/css/css
-//= require comfy/vendor/codemirror/mode/htmlmixed/htmlmixed
-//= require comfy/vendor/codemirror/mode/javascript/javascript
-//= require comfy/vendor/codemirror/mode/markdown/markdown
-//= require comfy/vendor/codemirror/mode/xml/xml
-//= require comfy/vendor/codemirror/addon/edit/closetag
-//= require comfy/vendor/sortable.min
-//= require comfy/vendor/bootstrap.bundle.min
-//= require comfy/vendor/diff/diff_match_patch.min
-//= require comfy/vendor/diff/pretty_text_diff
-//= require comfy/vendor/fontawesome
-//= require comfy/vendor/redactor
-//= require comfy/vendor/redactor/filemanager
-//= require comfy/vendor/redactor/imagemanager
-//= require comfy/vendor/redactor/definedlinks
-//= require comfy/vendor/redactor/table
-//= require comfy/vendor/redactor/video
-//= require_directory ../../vendor/redactor/i18n/
-//= require comfy/vendor/flatpickr.min
-//= require_directory ../../vendor/flatpickr/i18n/
+import "bootstrap/js/src/tab";
+import "bootstrap/js/src/collapse";
 
-//= require comfy/admin/cms/base
-//= require comfy/admin/cms/categories
-//= require comfy/admin/cms/codemirror
-//= require comfy/admin/cms/diff
-//= require comfy/admin/cms/file_link
-//= require comfy/admin/cms/file_upload
-//= require comfy/admin/cms/files_modal
-//= require comfy/admin/cms/page_fragments
-//= require comfy/admin/cms/sortable_list
-//= require comfy/admin/cms/slugify
-//= require comfy/admin/cms/timepicker
-//= require comfy/admin/cms/wysiwyg
+import "../../vendor/diff/diff_match_patch.min";
+import "../../vendor/diff/pretty_text_diff";
+import "../../vendor/fontawesome";
 
-//= require comfy/admin/cms/custom
+import "./base";
+import "./categories";
+import "./codemirror";
+import "./diff";
+import "./file_link";
+import "./file_upload";
+import "./files_modal";
+import "./page_fragments";
+import "./sortable_list";
+import "./slugify";
+import "./timepicker";
+import "./wysiwyg";
+
+import "./custom";

app/assets/javascripts/comfy/admin/cms/base.js

@@ -4,16 +4,16 @@
 
   // TODO(glebm): Use the battle-tested universal onPageLoad code and enable Turbolinks+async in the demo app.
   // See: https://gist.github.com/glebm/2496daf445877055447a6fac46509d9a
-  const isTurbolinks = 'Turbolinks' in window && window.Turbolinks.supported;
+  const isTurbolinks = "Turbolinks" in window && window.Turbolinks.supported;
   if (isTurbolinks) {
-    document.addEventListener('turbolinks:load', () => {
+    document.addEventListener("turbolinks:load", () => {
       window.CMS.init();
     });
-    document.addEventListener('turbolinks:before-cache', () => {
+    document.addEventListener("turbolinks:before-cache", () => {
       window.CMS.dispose();
     });
   } else {
-    document.addEventListener('DOMContentLoaded', () => {
+    document.addEventListener("DOMContentLoaded", () => {
       window.CMS.init();
     });
   }
@@ -42,5 +42,6 @@
     CMS.timepicker.dispose();
   };
 
-  CMS.getLocale = () => document.querySelector('meta[name="cms-locale"]').content;
+  CMS.getLocale = () =>
+    document.querySelector('meta[name="cms-locale"]').content;
 })();

app/assets/javascripts/comfy/admin/cms/codemirror.js

@@ -1,31 +1,43 @@
+import jQuery from "jquery";
+import CodeMirror from "codemirror";
+import "codemirror/mode/markdown/markdown";
+import "codemirror/mode/htmlmixed/htmlmixed";
+
 (() => {
   const codeMirrorInstances = [];
   window.CMS.codemirror = {
     init(root = document) {
-      for (const textarea of root.querySelectorAll('textarea[data-cms-cm-mode]')) {
+      for (const textarea of root.querySelectorAll(
+        "textarea[data-cms-cm-mode]"
+      )) {
         const codemirror = CodeMirror.fromTextArea(textarea, {
           mode: textarea.dataset.cmsCmMode,
           tabSize: 2,
           lineWrapping: true,
           autoCloseTags: true,
           lineNumbers: true,
-          viewportMargin: Infinity
+          viewportMargin: Infinity,
         });
         codeMirrorInstances.push(codemirror);
       }
 
-      const tabsRoot = root.id === 'form-fragments' ? root : root.querySelector('#form-fragments');
-      jQuery(tabsRoot).find('a[data-toggle="tab"]').on('shown.bs.tab', () => {
-        for (const codemirror of codeMirrorInstances) {
-          codemirror.refresh();
-        }
-      });
+      const tabsRoot =
+        root.id === "form-fragments"
+          ? root
+          : root.querySelector("#form-fragments");
+      jQuery(tabsRoot)
+        .find('a[data-toggle="tab"]')
+        .on("shown.bs.tab", () => {
+          for (const codemirror of codeMirrorInstances) {
+            codemirror.refresh();
+          }
+        });
     },
     dispose() {
       for (const codemirror of codeMirrorInstances) {
         codemirror.toTextArea();
       }
       codeMirrorInstances.length = 0;
-    }
-}
+    },
+  };
 })();

app/assets/javascripts/comfy/admin/cms/diff.js

@@ -1,10 +1,12 @@
+import jQuery from "jquery";
+
 (() => {
   window.CMS.diff = () => {
-    jQuery('.revision').prettyTextDiff({
+    jQuery(".revision").prettyTextDiff({
       cleanup: true,
-      originalContainer: '.original',
-      changedContainer: '.current',
-      diffContainer: '.diff .content',
+      originalContainer: ".original",
+      changedContainer: ".current",
+      diffContainer: ".diff .content",
     });
-  }
+  };
 })();

app/assets/javascripts/comfy/admin/cms/file_link.js

@@ -1,3 +1,6 @@
+import jQuery from "jquery";
+import Popover from "bootstrap/js/src/popover";
+
 (() => {
   const isFirefox = /\bFirefox\//.test(navigator.userAgent);
 
@@ -6,20 +9,23 @@
       this.link = link;
       this.isImage = !!link.dataset.cmsFileThumbUrl;
 
-      link.addEventListener('dragstart', (evt) => {
-        evt.dataTransfer.setData('text/plain', this.link.dataset.cmsFileLinkTag);
+      link.addEventListener("dragstart", (evt) => {
+        evt.dataTransfer.setData(
+          "text/plain",
+          this.link.dataset.cmsFileLinkTag
+        );
       });
 
       if (this.isImage) {
-        new bootstrap.Popover(link, {
+        new Popover(link, {
           container: link.parentElement,
-          trigger: 'hover',
-          placement: 'top',
+          trigger: "hover",
+          placement: "top",
           content: this.buildFileThumbnail(),
-          html: true
+          html: true,
         });
 
-        link.addEventListener('dragstart', (evt) => {
+        link.addEventListener("dragstart", (evt) => {
           evt.dataTransfer.setDragImage(this.buildFileThumbnail(), 4, 2);
           this.getPopover().hide();
         });
@@ -41,10 +47,10 @@
     // https://bugzilla.mozilla.org/show_bug.cgi?id=505521
     workAroundFirefoxPopoverGlitch() {
       if (!isFirefox) return;
-      this.link.addEventListener('dragstart', () => {
+      this.link.addEventListener("dragstart", () => {
         this.getPopover().disable();
       });
-      this.link.addEventListener('dragend', () => {
+      this.link.addEventListener("dragend", () => {
         setTimeout(() => {
           const popover = this.getPopover();
           popover.enable();
@@ -55,12 +61,12 @@
 
     // We can't keep a reference to the Popover object, because Bootstrap re-creates it internally.
     getPopover() {
-      return jQuery(this.link).data(bootstrap.Popover.DATA_KEY);
+      return jQuery(this.link).data(Popover.DATA_KEY);
     }
   }
 
   window.CMS.fileLinks = (root = document) => {
-    for (const link of root.querySelectorAll('[data-cms-file-link-tag]')) {
+    for (const link of root.querySelectorAll("[data-cms-file-link-tag]")) {
       new FileLink(link);
     }
   };