Added ESbuild via JS Bundling gem (#18)

* Setup Hotwire and NPM package

* fix install generator

* Setup ESlint

.circleci/config.yml

@@ -38,6 +38,10 @@ run_tests: &run_tests
         name: Create test app
         command: |
           bundle exec rake test_app
+    - run:
+        name: Unlink NPM package
+        command: |
+          cd spec/dummy && yarn unlink @spree/dashboard
     - run:
           name: Run Rspec
           command: |
@@ -71,6 +75,10 @@ run_tests_3_0: &run_tests_3_0
         name: Create test app
         command: |
           bundle exec rake test_app
+    - run:
+        name: Unlink NPM package
+        command: |
+          cd spec/dummy && yarn unlink @spree/dashboard
     - run:
           name: Run Rspec
           command: |

.eslintignore

@@ -1,7 +1,7 @@
 **/vendor/**
 **/dummy/**
-**/sandbox/**
 *-min.js
 *.min.js
 jquery*.js
-/cli/lib/spree_cli/templates/**
+app/assets/javascripts
+

.eslintrc.cjs

@@ -0,0 +1,29 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 13,
+        "sourceType": "module"
+    },
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "never"
+        ]
+    }
+}

.gitignore

@@ -56,3 +56,9 @@ vendor/bundle
 */vendor/bundle
 .ignore
 TODO
+
+
+node_modules
+app/assets/javascripts/spree_dashboard.js
+app/assets/javascripts/spree_dashboard.*.js
+src

app/javascript/spree/dashboard/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/spree/dashboard/controllers/hello_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "name", "output" ]
+
+  greet() {
+    this.outputTarget.textContent =
+      `Hello, ${this.nameTarget.value}!`
+  }
+}

app/javascript/spree/dashboard/controllers/index.js

@@ -0,0 +1,7 @@
+// This file is auto-generated by ./bin/rails stimulus:manifest:update
+// Run that command whenever you add a new controller
+
+import { application } from "./application"
+
+import HelloController from "./hello_controller"
+application.register("hello", HelloController)

app/javascript/spree/dashboard/index.js

@@ -0,0 +1,13 @@
+import "./controllers"
+// import * as Turbo from "@hotwired/turbo"
+
+class Dashboard {
+  constructor() {
+    console.log("Spree Dashboard initialized")
+  }
+}
+
+export {
+  Dashboard
+  // Turbo
+}

app/views/spree/admin/shared/_head.html.erb

@@ -16,6 +16,7 @@
 <%= stylesheet_link_tag 'spree/backend/all', media: :all %>
 
 <%= render 'spree/admin/shared/paths' %>
+<%= javascript_include_tag "spree-dashboard", defer: true %>
 <%= javascript_include_tag 'spree/backend/all' %>
 <%= render "spree/admin/shared/translations" %>
 

lib/generators/spree/backend/install/install_generator.rb

@@ -2,7 +2,7 @@ module Spree
   module Backend
     module Generators
       class InstallGenerator < Rails::Generators::Base
-        desc 'Installs spree rails admin panel'
+        desc 'Installs Spree Dashboard'
 
         def self.source_paths
           [
@@ -13,8 +13,10 @@ def self.source_paths
         end
 
         def install
+          template 'app/javascript/spree-dashboard.js'
           template 'vendor/assets/javascripts/spree/backend/all.js'
           template 'vendor/assets/stylesheets/spree/backend/all.css'
+          run 'yarn add @spree/dashboard'
         end
       end
     end

lib/generators/spree/backend/install/templates/app/javascript/spree-dashboard.js

@@ -0,0 +1,7 @@
+// Entry point for the build script in your package.json
+
+import "@spree/dashboard"
+
+new SpreeDashboard.Dashboard()
+
+// window.Turbo = SpreeDashboard.Turbo

lib/spree/backend.rb

@@ -9,8 +9,10 @@
 require 'flatpickr'
 require 'bootstrap'
 require 'glyphicons'
+require 'hotwire-rails'
 require 'popper_js'
 require 'inline_svg'
+require 'jsbundling-rails'
 require 'responders'
 require 'tinymce-rails'
 

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@spree/dashboard",
+  "version": "0.0.1-alpha1",
+  "description": "Spree Dashboard",
+  "main": "app/assets/javascripts/spree_dashboard.js",
+  "type": "module",
+  "files": [
+    "app/assets/javascripts/*.js",
+    "src/*.js"
+  ],
+  "homepage": "https://spreecommerce.org/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/spree/spree_backend.git"
+  },
+  "bugs": {
+    "url": "https://github.com/spree/spree_backend/issues"
+  },
+  "author": "Spark Solutions <hi@sparksolutions.co>",
+  "license": "MIT",
+  "dependencies": {
+    "@hotwired/stimulus": "^3.0.1",
+    "@hotwired/turbo": "^7.0.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-node-resolve": "^11.0.1",
+    "eslint": "^8.2.0",
+    "rollup": "^2.35.1",
+    "rollup-plugin-terser": "^7.0.2"
+  },
+  "scripts": {
+    "build": "rollup --config rollup.config.js",
+    "watch": "rollup --config rollup.config.js -w",
+    "lint": "eslint app/javascript",
+    "prepublishOnly": "rm -rf src && cp -R app/javascript/spree_dashboard src"
+  }
+}

rollup.config.js

@@ -0,0 +1,41 @@
+import resolve from "@rollup/plugin-node-resolve"
+import commonjs from "@rollup/plugin-commonjs"
+import { terser } from "rollup-plugin-terser"
+
+const terserOptions = {
+ mangle: false,
+ compress: false,
+ format: {
+   beautify: true,
+   indent_level: 2
+ }
+}
+
+export default [
+  {
+    input: "app/javascript/spree/dashboard/index.js",
+    output: {
+      file: "app/assets/javascripts/spree_dashboard.js",
+      format: "umd",
+      name: "SpreeDashboard"
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      terser(terserOptions)
+    ]
+  },
+
+  {
+    input: "app/javascript/spree/dashboard/index.js",
+    output: {
+      file: "app/assets/javascripts/spree_dashboard.esm.js",
+      format: "es"
+    },
+    plugins: [
+      resolve(),
+      commonjs(),
+      terser(terserOptions)
+    ]
+  }
+]

spree_backend.gemspec

@@ -28,15 +28,17 @@ Gem::Specification.new do |s|
   s.add_dependency 'spree', ">= 4.3.0"
 
   s.add_dependency 'babel-transpiler', '~> 0.7'
-  s.add_dependency 'bootstrap',       '~> 4.0'
-  s.add_dependency 'glyphicons',      '~> 1.0'
-  s.add_dependency 'flatpickr',       '~> 4.6'
-  s.add_dependency 'inline_svg',      '~> 1.5'
-  s.add_dependency 'jquery-rails',    '~> 4.3'
-  s.add_dependency 'jquery-ui-rails', '~> 6.0'
+  s.add_dependency 'bootstrap',        '~> 4.0'
+  s.add_dependency 'glyphicons',       '~> 1.0'
+  s.add_dependency 'flatpickr',        '~> 4.6'
+  s.add_dependency 'hotwire-rails'
+  s.add_dependency 'inline_svg',       '~> 1.5'
+  s.add_dependency 'jsbundling-rails'
+  s.add_dependency 'jquery-rails',     '~> 4.3'
+  s.add_dependency 'jquery-ui-rails',  '~> 6.0'
   s.add_dependency 'responders'
-  s.add_dependency 'sass-rails', '>= 5'
-  s.add_dependency 'select2-rails',   '~> 4.0'
-  s.add_dependency 'sprockets', '~> 4.0'
+  s.add_dependency 'sass-rails',       '>= 5'
+  s.add_dependency 'select2-rails',    '~> 4.0'
+  s.add_dependency 'sprockets',        '~> 4.0'
   s.add_dependency 'tinymce-rails'
 end