maglevcms 1.0.0 → 1.1.0

data/lib/tasks/maglev_tasks.rake

@@ -1,11 +1,9 @@
 # frozen_string_literal: true
 
-def ensure_log_goes_to_stdout
-  old_logger = Webpacker.logger
-  Webpacker.logger = ActiveSupport::Logger.new($stdout)
-  yield
-ensure
-  Webpacker.logger = old_logger
+$stdout.sync = true
+
+def within_engine_folder(&block)
+  Dir.chdir(File.join(__dir__, '..', '..'), &block)
 end
 
 namespace :maglev do
@@ -57,52 +55,80 @@ namespace :maglev do
     end
   end
 
-  namespace :webpacker do
-    desc 'Install deps with yarn'
-    task yarn_install: :environment do
-      Dir.chdir(File.join(__dir__, '..', '..')) do
-        system 'yarn install --no-progress'
+  namespace :vite do
+    desc 'Bundle frontend entrypoints using ViteRuby'
+    task build: :'vite:verify_install' do
+      within_engine_folder do
+        ViteRuby.commands.build_from_task
       end
     end
 
-    desc 'Compile JavaScript packs using webpack for production with digests'
-    task compile: %i[yarn_install environment] do
-      Webpacker.with_node_env('production') do
-        ensure_log_goes_to_stdout do
-          if Maglev.webpacker.commands.compile
-            # Successful compilation!
-          else
-            # Failed compilation
-            exit!
-          end
-        end
+    desc 'Bundle entrypoints using Vite Ruby (SSR only if enabled)'
+    task build_all: :'vite:verify_install' do
+      within_engine_folder do
+        ViteRuby.commands.build_from_task
+        ViteRuby.commands.build_from_task('--ssr') if ViteRuby.config.ssr_build_enabled
       end
     end
-  end
-end
 
-def yarn_install_available?
-  rails_major = Rails::VERSION::MAJOR
-  rails_minor = Rails::VERSION::MINOR
+    desc 'Ensure build dependencies like Vite are installed before bundling'
+    task install_dependencies: :environment do
+      within_engine_folder do
+        cmd = ViteRuby.commands.legacy_npm_version? ? 'npx ci --yes' : 'npx --yes ci'
+        system({ 'NODE_ENV' => 'development' }, cmd)
+      end
+    end
 
-  rails_major > 5 || (rails_major == 5 && rails_minor >= 1)
-end
+    desc 'Verify if ViteRuby is properly installed in the app'
+    task verify_install: :environment do
+      within_engine_folder do
+        ViteRuby.commands.verify_install
+      end
+    end
+
+    desc 'Remove old bundles created by ViteRuby'
+    task :clean, %i[keep age] => :'vite:verify_install' do |_, args|
+      within_engine_folder do
+        ViteRuby.commands.clean_from_task(args)
+      end
+    end
+
+    desc 'Remove the build output directory for ViteRuby'
+    task clobber: :'vite:verify_install' do
+      within_engine_folder do
+        ViteRuby.commands.clobber
+      end
+    end
 
-def enhance_assets_precompile
-  # yarn:install was added in Rails 5.1
-  deps = yarn_install_available? ? [] : ['maglev:webpacker:yarn_install']
-  Rake::Task['assets:precompile'].enhance(deps) do
-    Rake::Task['maglev:webpacker:compile'].invoke
+    desc "Provide information on ViteRuby's environment"
+    task info: :environment do
+      within_engine_folder do
+        ViteRuby.commands.print_info
+      end
+    end
   end
 end
 
-# Compile packs after we've compiled all other assets during precompilation
-skip_webpacker_precompile = %w[no false n f].include?(ENV['WEBPACKER_PRECOMPILE'])
-
-unless skip_webpacker_precompile
+unless ENV['VITE_RUBY_SKIP_ASSETS_PRECOMPILE_EXTENSION'] == 'true'
   if Rake::Task.task_defined?('assets:precompile')
-    enhance_assets_precompile
+    Rake::Task['assets:precompile'].enhance do |_task|
+      Rake::Task['maglev:vite:install_dependencies'].invoke
+      Rake::Task['maglev:vite:build_all'].invoke
+    end
+  else
+    Rake::Task.define_task("assets:precompile": ['maglev:vite:install_dependencies', 'maglev:vite:build_all'])
+  end
+
+  Rake::Task.define_task('assets:clean', %i[keep age]) unless Rake::Task.task_defined?('assets:clean')
+  Rake::Task['assets:clean'].enhance do |_, args|
+    Rake::Task['maglev:vite:clean'].invoke(*args.to_h.values)
+  end
+
+  if Rake::Task.task_defined?('assets:clobber')
+    Rake::Task['assets:clobber'].enhance do
+      Rake::Task['maglev:vite:clobber'].invoke
+    end
   else
-    Rake::Task.define_task("assets:precompile": 'maglev:webpacker:compile')
+    Rake::Task.define_task("assets:clobber": 'maglev:vite:clobber')
   end
 end

data/package.json

@@ -2,49 +2,44 @@
   "name": "maglev",
   "private": true,
   "scripts": {
-    "prettier-format": "prettier --config .prettierrc 'app/javascript/**/*.{vue,js}' --write",
-    "test": "jest"
+    "prettier-format": "prettier --config .prettierrc 'app/frontend/**/*.{vue,js}' --write",
+    "test": "vitest"
   },
   "dependencies": {
     "axios": "^0.21.1",
     "camelcase-object-deep": "^1.1.3",
     "normalizr": "^3.6.1",
     "stimulus": "^2.0.0",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "stimulus-vite-helpers": "^3.0.1",
     "tiptap": "^1.31.0",
     "tiptap-extensions": "^1.34.0",
     "turbolinks": "^5.2.0",
     "v-tooltip": "^2.1.3",
-    "vue": "^2.6.12",
+    "vue": "^2.7.13",
     "vue-i18n": "^8.21.1",
-    "vue-loader": "^15.9.3",
     "vue-router": "^3.4.4",
-    "vue-template-compiler": "^2.6.12",
     "vue-window-size": "0.6.2",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.5.1"
   },
   "version": "0.1.0",
   "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
-    "@rails/webpacker": "5.4.3",
-    "@vue/cli-plugin-eslint": "^4.5.13",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.3.0",
-    "autoprefixer": "^9",
-    "babel-jest": "^27.4.5",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.7.0",
-    "eslint": "^7.30.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.13.0",
-    "install": "^0.13.0",
-    "jest": "^27.4.5",
-    "postcss": "^7.0.36",
+    "@vitejs/plugin-vue2": "^2.0.0",
+    "@vue/compiler-dom": "^3.2.41",
+    "@vue/test-utils": "^1.3.1",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.26.0",
+    "jsdom": "^20.0.2",
+    "postcss": "^8.4.18",
     "prettier": "^2.3.2",
-    "vue-svg-loader": "^0.17.0-beta.2",
-    "webpack-dev-server": "^3.11.3"
+    "sass": "^1.55.0",    
+    "tailwindcss": "^3.2.1",
+    "vite": "^3.2.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-ruby": "^3.1.2",
+    "vite-plugin-vue2-svg": "^0.3.0",
+    "vitest": "^0.24.4",
+    "vue-template-compiler": "^2.7.13"
   },
   "resolutions": {
     "prosemirror-model": "^1.11.2",
@@ -52,30 +47,8 @@
     "nth-check": "^2.0.1",
     "ansi-regex": "^5.0.1",
     "node-forge": "^1.3.0",
-    "postcss": "^7.0.36",
     "minimist": "^1.2.6",
     "eventsource": "^1.1.1",
-    "terser": "^5.14.2",
     "async": "^2.6.4"
-  },
-  "jest": {
-    "roots": [
-      "app/javascript/editor"
-    ],
-    "testMatch": [
-      "**/__tests__/**/*.spec.js"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "vue"
-    ],
-    "moduleNameMapper": {
-      "@/(.*)$": "<rootDir>/app/javascript/editor/$1"
-    },
-    "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
-    },
-    "testEnvironment": "jsdom"
   }
 }

data/postcss.config.js

@@ -1,14 +1,18 @@
 module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-flexbugs-fixes'),
-    require('tailwindcss'),
-    require('autoprefixer'),
-    require('postcss-preset-env')({
-      autoprefixer: {
-        flexbox: 'no-2009'
-      },
-      stage: 3
-    })
-  ]
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+  // plugins: [
+  //   require('postcss-import'),
+  //   require('postcss-flexbugs-fixes'),
+  //   require('tailwindcss'),
+  //   require('autoprefixer'),
+  //   require('postcss-preset-env')({
+  //     autoprefixer: {
+  //       flexbox: 'no-2009'
+  //     },
+  //     stage: 3
+  //   })
+  // ]
 }

data/tailwind.config.js

@@ -1,17 +1,14 @@
 module.exports = {
-  purge: {
-    enabled: ['production', 'staging'].includes(process.env.NODE_ENV),
-    content: [
-      './**/*.html.erb',
-      './app/helpers/**/*.rb',
-      './app/javascript/**/*.{js,vue}',
-    ],
-  },
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './**/*.html.erb',
+    './app/helpers/**/*.rb',
+    './app/javascript/**/*.{js,vue}',
+    './app/frontend/**/*.{js,vue}',
+  ],
   theme: {
     extend: {
-      colors: {        
-        'editor-primary': 'var(--editor-color-primary)',
+      colors: {
+        'editor-primary': 'rgb(var(--editor-color-primary-rgb) / <alpha-value>)',
         'gray': {
           '100': '#f5f5f5',
           '200': '#eeeeee',