unify importmap and npm use on 'blacklight-frontend', modernize packa…

…ge.json with exports

app/javascript/blacklight/bookmark_toggle.js → app/javascript/blacklight-frontend/bookmark_toggle.js

@@ -1,4 +1,4 @@
-import CheckboxSubmit from 'blacklight/checkbox_submit'
+import CheckboxSubmit from 'blacklight-frontend/checkbox_submit'
 
 const BookmarkToggle = (e) => {
   if (e.target.matches('[data-checkboxsubmit-target="checkbox"]')) {

app/javascript/blacklight/facet_suggest.js → app/javascript/blacklight-frontend/facet_suggest.js

@@ -1,4 +1,4 @@
-import debounce from "blacklight/debounce";
+import debounce from "blacklight-frontend/debounce";
 
 const FacetSuggest = async (e) => {
   if (e.target.matches('.facet-suggest')) {
@@ -11,9 +11,9 @@ const FacetSuggest = async (e) => {
     if (response.ok) {
         const blob = await response.blob()
         const text = await blob.text()
-    
+
         const facetArea = document.querySelector('.facet-extended-list');
-    
+
         if (text && facetArea) {
             facetArea.innerHTML = text
         }

app/javascript/blacklight-frontend/index.js

@@ -0,0 +1,16 @@
+import BookmarkToggle from 'blacklight-frontend/bookmark_toggle'
+import ButtonFocus from 'blacklight-frontend/button_focus'
+import FacetSuggest from 'blacklight-frontend/facet_suggest'
+import Modal from 'blacklight-frontend/modal'
+import SearchContext from 'blacklight-frontend/search_context'
+import Core from 'blacklight-frontend/core'
+
+export default {
+  BookmarkToggle,
+  ButtonFocus,
+  FacetSuggest,
+  Modal,
+  SearchContext,
+  Core,
+  onLoad: Core.onLoad
+}

app/javascript/blacklight/modal.js → app/javascript/blacklight-frontend/modal.js

@@ -52,7 +52,7 @@
   can be a turbo-stream that defines some HTML fragementsand where on the page to put them:
   https://turbo.hotwired.dev/handbook/streams
 */
-import ModalForm from 'blacklight/modalForm'
+import ModalForm from 'blacklight-frontend/modalForm'
 
 const Modal = (() => {
   const modal = {}
@@ -111,7 +111,7 @@ const Modal = (() => {
     }
     elements.forEach((el) => frag.appendChild(el))
     modal.activateScripts(frag)
-    
+
     document.querySelector(`${modal.modalSelector} .modal-content`).replaceChildren(frag)
 
     modal.show();

config/importmap.rb

@@ -1,3 +1,3 @@
 # frozen_string_literal: true
 
-pin_all_from File.expand_path("../app/javascript/blacklight", __dir__), under: "blacklight"
+pin_all_from File.expand_path("../app/javascript/blacklight-frontend", __dir__), under: "blacklight-frontend"

lib/generators/blacklight/assets/importmap_generator.rb

@@ -34,7 +34,7 @@ def append_blacklight_javascript
         append_to_file 'app/javascript/application.js' do
           <<~CONTENT
             import githubAutoCompleteElement from "@github/auto-complete-element"
-            import Blacklight from "blacklight"
+            import Blacklight from "blacklight-frontend"
           CONTENT
         end
       end

package.json

@@ -2,8 +2,17 @@
   "name": "blacklight-frontend",
   "version": "9.0.0-alpha",
   "description": "The frontend code and styles for Blacklight",
-  "main": "app/assets/javascripts/blacklight",
-  "module": "app/assets/javascripts/blacklight/blacklight.esm.js",
+
+  "exports": {
+    "./blacklight.esm.js": "./app/assets/javascripts/blacklight/blacklight.esm.js",
+    "./stylesheets/*": "./app/assets/stylesheets/blacklight/*",
+    ".": {
+      "import": "./app/javascript/blacklight-frontend/index.js",
+      "require": "./app/assets/javascripts/blacklight.js"
+    },
+    "./*": "./app/javascript/blacklight-frontend/*.js"
+   },
+
   "scripts": {
     "prepare": "rollup --config rollup.config.js --sourcemap && ESM=true rollup --config rollup.config.js --sourcemap"
   },

rollup.config.js

@@ -19,7 +19,7 @@ let includePathOptions = {
 };
 
 const rollupConfig = {
-  input: path.resolve(__dirname, `app/javascript/blacklight/index.js`),
+  input: path.resolve(__dirname, `app/javascript/blacklight-frontend/index.js`),
   output: {
     file: path.resolve(__dirname, `app/assets/javascripts/blacklight/${fileDest}.js`),
     format: ESM ? 'esm' : 'umd',