Design app fixes after Webpacker installation

.rubocop_ruby.yml

@@ -15,6 +15,7 @@ AllCops:
   Exclude:
     - "**/vendor/**/*"
     - "development_app/**/*"
+    - "decidim_app-design/node_modules/**/*"
     - "spec/decidim_dummy_app/**/*"
     - "node_modules/**/*"
   # Default formatter will be used if no -f/--format option is given.
@@ -1228,7 +1229,7 @@ RSpec/ContextWording:
 RSpec/DescribeClass:
   Exclude:
     - spec/gemfiles_spec.rb
-    - spec/js_bundles_spec.rb
+    - spec/webpacker_spec.rb
     - spec/i18n_spec.rb
     - "**/*/spec/**/*_badge_spec.rb"
     - decidim-core/spec/lib/global_engines_spec.rb

decidim-core/lib/decidim/webpacker/webpack/custom.js

@@ -150,7 +150,6 @@ module.exports = {
     decidim_geocoding_provider_here: "DECIDIM_PATH/decidim-core/app/packs/entrypoints/decidim_geocoding_provider_here.js",
     decidim_map_provider_default: "DECIDIM_PATH/decidim-core/app/packs/entrypoints/decidim_map_provider_default.js",
     decidim_map_provider_here: "DECIDIM_PATH/decidim-core/app/packs/entrypoints/decidim_map_provider_here.js",
-    decidim_widget: "DECIDIM_PATH/decidim-core/app/packs/entrypoints/decidim_widget.js",
-    decidim_app_design_public: "DECIDIM_PATH/decidim_app-design/app/packs/entrypoints/public.js"
+    decidim_widget: "DECIDIM_PATH/decidim-core/app/packs/entrypoints/decidim_widget.js"
   }
 }

decidim_app-design/.gitignore

@@ -18,6 +18,8 @@
 
 .byebug_history
 
+.nvmrc
+/public/decidim-packs
 /public/packs
 /public/packs-test
 /node_modules

decidim_app-design/README.md

@@ -22,6 +22,8 @@ This approach has several benefits:
 $ bundle install
 [Installs all dependencies]
 Bundle complete!
+$ bundle exec rails decidim:webpacker:install
+[Installs webpacker dependencies]
 $ bundle exec rails s
 => Booting Puma
 => Rails 5.1.4 application starting in development
@@ -34,6 +36,8 @@ Puma starting in single mode...
 Use Ctrl-C to stop
 ```
 
+As Decidim uses webpacker, optionally you can run `bin/webpack-dev-server` too for fast asset re-compilation.
+
 Navigate to `http://localhost:3000`. You should see a navigable website with examples.
 
 ## Contributing

decidim_app-design/app/packs/entrypoints/public.js

@@ -1,6 +1,10 @@
 import $ from "jquery"
 import "core-js/stable";
 import "regenerator-runtime/runtime";
+import Configuration from "src/decidim/configuration"
+
+window.Decidim = window.Decidim || {};
+window.Decidim.config = new Configuration()
 
 import '../src/evote_check_nota'
 import '../src/vizzs/datacharts'

decidim_app-design/babel.config.json

@@ -0,0 +1,30 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env", {
+        "forceAllTransforms": true,
+        "useBuiltIns": "entry",
+        "corejs": 3,
+        "modules": false
+      }
+    ],
+    ["@babel/preset-react"]
+  ],
+  "plugins": [
+    "@babel/plugin-transform-classes",
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "helpers": false,
+        "regenerator": true,
+        "corejs": false
+      }
+    ],
+    [
+      "@babel/plugin-transform-regenerator",
+      {
+        "async": false
+      }
+    ]
+  ]
+}

decidim_app-design/config/webpack/.modernizrrc

@@ -0,0 +1,9 @@
+{
+  "minify": true,
+    "options": [
+      "setClasses"
+    ],
+    "feature-detects": [
+      "css/transitions"
+    ]
+}

decidim_app-design/config/webpack/base.js

@@ -1,3 +1,6 @@
-const { webpackConfig } = require('@rails/webpacker')
+/* eslint-disable */
 
-module.exports = webpackConfig
+const { webpackConfig, merge } = require("@rails/webpacker")
+const customConfig = require("./custom")
+
+module.exports = merge(webpackConfig, customConfig)

decidim_app-design/config/webpack/custom.js

@@ -0,0 +1,156 @@
+/* eslint-disable */
+
+const path = require("path");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: require.resolve("quill"),
+        loader: "expose-loader",
+        options: {
+          exposes: ["Quill"]
+        }
+      },
+      {
+        test: require.resolve("jquery"),
+        loader: "expose-loader",
+        options: {
+          exposes: ["$", "jQuery"]
+        }
+      },
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules\/(?!tributejs)/,
+        loader: "babel-loader"
+      },
+      {
+        test: /\.(graphql|gql)$/,
+        loader: "graphql-tag/loader"
+      },
+      {
+        test: require.resolve("react"),
+        loader: "expose-loader",
+        options: {
+          exposes: ["React"]
+        }
+      },
+      {
+        test: require.resolve("@rails/ujs"),
+        loader: "expose-loader",
+        options: {
+          exposes: ["Rails"]
+        }
+      },
+      {
+        test: [
+          /\.md$/,
+          /\.odt$/,
+        ],
+        exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
+        type: 'asset/resource',
+        generator: {
+          filename: 'media/documents/[hash][ext][query]'
+        }
+      },
+      // Overwrite webpacker files rule to amend the filename output
+      // and include the name of the file, otherwise some SVGs
+      // are not generated because the hash is the same between them
+      {
+        test: [
+          /\.bmp$/,
+          /\.gif$/,
+          /\.jpe?g$/,
+          /\.png$/,
+          /\.tiff$/,
+          /\.ico$/,
+          /\.avif$/,
+          /\.webp$/,
+          /\.eot$/,
+          /\.otf$/,
+          /\.ttf$/,
+          /\.woff$/,
+          /\.woff2$/,
+          /\.svg$/
+        ],
+        exclude: [/\.(js|mjs|jsx|ts|tsx)$/],
+        type: 'asset/resource',
+        generator: {
+          filename: 'media/images/[name]-[hash][ext][query]'
+        }
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".js", ".jsx", ".gql", ".graphql"],
+    fallback: {
+      crypto: false
+    }
+  },
+  // https://github.com/rails/webpacker/issues/2932
+  // As Decidim uses multiple packs, we need to enforce a single runtime, to prevent duplication
+  optimization: {
+    runtimeChunk: false
+  },
+  entry: {
+    decidim_admin: "../decidim-admin/app/packs/entrypoints/decidim_admin.js",
+    decidim_accountability: "../decidim-accountability/app/packs/entrypoints/decidim_accountability.js",
+    decidim_accountability_admin: "../decidim-accountability/app/packs/entrypoints/decidim_accountability_admin.js",
+    decidim_assemblies: "../decidim-assemblies/app/packs/entrypoints/decidim_assemblies.js",
+    decidim_assemblies_admin: "../decidim-assemblies/app/packs/entrypoints/decidim_assemblies_admin.js",
+    decidim_api_docs: "../decidim-api/app/packs/entrypoints/decidim_api_docs.js",
+    decidim_blogs: "../decidim-blogs/app/packs/entrypoints/decidim_blogs.js",
+    decidim_budgets: "../decidim-budgets/app/packs/entrypoints/decidim_budgets.js",
+    decidim_conferences_admin: "../decidim-conferences/app/packs/entrypoints/decidim_conferences_admin.js",
+    decidim_consultations: "../decidim-consultations/app/packs/entrypoints/decidim_consultations.js",
+    decidim_core: "../decidim-core/app/packs/entrypoints/decidim_core.js",
+    decidim_conference_diploma: "../decidim-core/app/packs/entrypoints/decidim_conference_diploma.js",
+    decidim_debates_admin: "../decidim-debates/app/packs/entrypoints/decidim_debates_admin.js",
+    decidim_dev: "../decidim-dev/app/packs/entrypoints/decidim_dev.js",
+    decidim_elections: "../decidim-elections/app/packs/entrypoints/decidim_elections.js",
+    decidim_elections_onboarding: "../decidim-elections/app/packs/entrypoints/decidim_elections_onboarding.js",
+    decidim_elections_admin_pending_action: "../decidim-elections/app/packs/entrypoints/decidim_elections_admin_pending_action.js",
+    decidim_elections_admin_vote_statistics: "../decidim-elections/app/packs/entrypoints/decidim_elections_admin_vote_statistics.js",
+    decidim_elections_trustee_key_ceremony: "../decidim-elections/app/packs/entrypoints/decidim_elections_trustee_key_ceremony.js",
+    decidim_elections_trustee_tally: "../decidim-elections/app/packs/entrypoints/decidim_elections_trustee_tally.js",
+    decidim_elections_trustee_zone: "../decidim-elections/app/packs/entrypoints/decidim_elections_trustee_zone.js",
+    decidim_elections_trustee_trustee_zone: "../decidim-elections/app/packs/entrypoints/decidim_elections_trustee_trustee_zone.js",
+    decidim_elections_voter_casting_vote: "../decidim-elections/app/packs/entrypoints/decidim_elections_voter_casting-vote.js",
+    decidim_elections_voter_new_vote: "../decidim-elections/app/packs/entrypoints/decidim_elections_voter_new-vote.js",
+    decidim_elections_voter_setup_preview: "../decidim-elections/app/packs/entrypoints/decidim_elections_voter_setup-preview.js",
+    decidim_elections_voter_setup_vote: "../decidim-elections/app/packs/entrypoints/decidim_elections_voter_setup-vote.js",
+    decidim_elections_voter_verify_vote: "../decidim-elections/app/packs/entrypoints/decidim_elections_voter_verify-vote.js",
+    decidim_email: "../decidim-core/app/packs/entrypoints/decidim_email.js",
+    decidim_votings_admin_monitoring_committee_members_form: "../decidim-elections/app/packs/entrypoints/decidim_votings_admin_monitoring_committee_members_form.js",
+    decidim_votings_admin_polling_officers_form: "../decidim-elections/app/packs/entrypoints/decidim_votings_admin_polling_officers_form.js",
+    decidim_votings_admin_polling_officers_picker: "../decidim-elections/app/packs/entrypoints/decidim_votings_admin_polling_officers_picker.js",
+    decidim_votings_admin_polling_stations_form: "../decidim-elections/app/packs/entrypoints/decidim_votings_admin_polling_stations_form.js",
+    decidim_votings_admin_update_census_dataset_status: "../decidim-elections/app/packs/entrypoints/decidim_votings_admin_update_census_dataset_status.js",
+    decidim_votings_voting_description_cell: "../decidim-elections/app/packs/entrypoints/decidim_votings_voting-description-cell.js",
+    decidim_votings_admin_votings: "../decidim-elections/app/packs/entrypoints/decidim_votings_admin_votings.js",
+    decidim_forms: "../decidim-forms/app/packs/entrypoints/decidim_forms.js",
+    decidim_forms_admin: "../decidim-forms/app/packs/entrypoints/decidim_forms_admin.js",
+    decidim_questionnaire_answers_pdf: "../decidim-forms/app/packs/entrypoints/decidim_questionnaire_answers_pdf.js",
+    decidim_initiatives: "../decidim-initiatives/app/packs/entrypoints/decidim_initiatives.js",
+    decidim_initiatives_admin: "../decidim-initiatives/app/packs/entrypoints/decidim_initiatives_admin.js",
+    decidim_initiatives_print: "../decidim-initiatives/app/packs/entrypoints/decidim_initiatives_print.js",
+    decidim_initiatives_initiatives_votes: "../decidim-initiatives/app/packs/entrypoints/decidim_initiatives_initiatives_votes.js",
+    decidim_map: "../decidim-core/app/packs/entrypoints/decidim_map.js",
+    decidim_meetings: "../decidim-meetings/app/packs/entrypoints/decidim_meetings.js",
+    decidim_meetings_admin: "../decidim-meetings/app/packs/entrypoints/decidim_meetings_admin.js",
+    decidim_pages: "../decidim-pages/app/packs/entrypoints/decidim_pages.js",
+    decidim_participatory_processes: "../decidim-participatory_processes/app/packs/entrypoints/decidim_participatory_processes.js",
+    decidim_participatory_processes_admin: "../decidim-participatory_processes/app/packs/entrypoints/decidim_participatory_processes_admin.js",
+    decidim_proposals: "../decidim-proposals/app/packs/entrypoints/decidim_proposals.js",
+    decidim_proposals_admin: "../decidim-proposals/app/packs/entrypoints/decidim_proposals_admin.js",
+    decidim_sortitions: "../decidim-sortitions/app/packs/entrypoints/decidim_sortitions.js",
+    decidim_system: "../decidim-system/app/packs/entrypoints/decidim_system.js",
+    decidim_templates: "../decidim-templates/app/packs/entrypoints/decidim_templates.js",
+    decidim_geocoding_provider_photon: "../decidim-core/app/packs/entrypoints/decidim_geocoding_provider_photon.js",
+    decidim_geocoding_provider_here: "../decidim-core/app/packs/entrypoints/decidim_geocoding_provider_here.js",
+    decidim_map_provider_default: "../decidim-core/app/packs/entrypoints/decidim_map_provider_default.js",
+    decidim_map_provider_here: "../decidim-core/app/packs/entrypoints/decidim_map_provider_here.js",
+    decidim_widget: "../decidim-core/app/packs/entrypoints/decidim_widget.js",
+    decidim_app_design_public: "../decidim_app-design/app/packs/entrypoints/public.js"
+  }
+}

decidim_app-design/config/webpack/development.js

@@ -1,5 +1,7 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+/* eslint-disable */
 
-const webpackConfig = require('./base')
+process.env.NODE_ENV = process.env.NODE_ENV || "development"
+
+const webpackConfig = require("./base")
 
 module.exports = webpackConfig

decidim_app-design/config/webpack/production.js

@@ -1,5 +1,7 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
+/* eslint-disable */
 
-const webpackConfig = require('./base')
+process.env.NODE_ENV = process.env.NODE_ENV || "production"
+
+const webpackConfig = require("./base")
 
 module.exports = webpackConfig

decidim_app-design/config/webpack/test.js

@@ -1,5 +1,7 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
+/* eslint-disable */
 
-const webpackConfig = require('./base')
+process.env.NODE_ENV = process.env.NODE_ENV || "development"
+
+const webpackConfig = require("./base")
 
 module.exports = webpackConfig

decidim_app-design/config/webpacker.yml

@@ -1,28 +1,58 @@
+# File written by Decidim generator
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
   source_path: app/packs
   source_entry_path: entrypoints
+  public_output_path: decidim-packs
   public_root_path: public
-  public_output_path: packs
-  cache_path: tmp/cache/webpacker
   webpack_compile_output: true
+  cache_path: tmp/webpacker-cache
+  extract_css: true
 
-  # Additional paths webpack should lookup modules
-  # ['app/assets', 'engine/foo/app/assets']
-  additional_paths: []
+  additional_paths:
+    - node_modules
+    - app/packs
+    - ../decidim-accountability/app/packs
+    - ../decidim-admin/app/packs
+    - ../decidim-api/app/packs
+    - ../decidim-assemblies/app/packs
+    - ../decidim-blogs/app/packs
+    - ../decidim-budgets/app/packs
+    - ../decidim-comments/app/packs
+    - ../decidim-conferences/app/packs
+    - ../decidim-consultations/app/packs
+    - ../decidim-core/app/packs
+    - ../decidim-debates/app/packs
+    - ../decidim-dev/app/packs
+    - ../decidim-elections/app/packs
+    - ../decidim-forms/app/packs
+    - ../decidim-generators/app/packs
+    - ../decidim-initiatives/app/packs
+    - ../decidim-meetings/app/packs
+    - ../decidim-pages/app/packs
+    - ../decidim-participatory_processes/app/packs
+    - ../decidim-proposals/app/packs
+    - ../decidim-sortitions/app/packs
+    - ../decidim-surveys/app/packs
+    - ../decidim-system/app/packs
+    - ../decidim-templates/app/packs
+    - ../decidim-verifications/app/packs
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
 development:
   <<: *default
   compile: true
+  # Compile test packs to decidim decidim-packs folder
 
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
     host: localhost
+    # Notice that we use a different port (to prevent blocking the default one) as
+    # there will be at least two webpack servers running
     port: 3035
     public: localhost:3035
     # Inject browserside javascript that required by both HMR and Live(full) reload
@@ -51,8 +81,6 @@ development:
 test:
   <<: *default
   compile: true
-
-  # Compile test packs to a separate directory
   public_output_path: packs-test
 
 production: