Merge pull request #17 from hedgeye-sdeming/188347131-fix-storybook-js

[#188347131] fix: embrace stimulus-loading, with workaround for non-importmap applications

README.md

@@ -109,6 +109,14 @@ class HelloWorld < Phlex::HTML
 end
 ```
 
+Now, if you are not using `importmap` in your Rails app, you will need to add the following to
+your `config/development.rb`, as a workaround for a sprockets bug. This is the suggested setting anyway.
+
+```ruby
+ # See: https://stackoverflow.com/questions/77053696/importmap-rails-sprockets-not-finding-stimulus-loading-js-in-fresh-stimulus-ra 
+ config.assets.digest = true
+```
+
 ## License
 
 The gem is available as open source under the terms of the [MIT License](LICENSE).

app/javascript/phlex_storybook/application.js

@@ -1,5 +1,3 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
-// import TurboPower from 'turbo_power'
-// TurboPower.initialize(Turbo.StreamActions)

app/javascript/phlex_storybook/controllers/index.js

@@ -2,14 +2,29 @@
 
 import { application } from "controllers/application"
 
-import StoryDisplayController from "./story_display_controller"
-application.register("story-display", StoryDisplayController)
+// load controllers manually...
+//
+// This only works when not using importmaps because it tries to import without the fingerprints...
+//
+// If mounting this engine in a non-importmaps app you can set `config.assets.digest = true` in development.rb to
+// work around this problem. Or migrate to importmaps!
+//
+// This is left here for reference only.
+//
+// import StoryDisplayController from "./story_display_controller"
+// application.register("story-display", StoryDisplayController)
+//
+// import ExperimentsController from "./experiments_controller"
+// application.register("experiments", ExperimentsController)
+//
+// import CopyController from "./copy_controller"
+// application.register("copy", CopyController)
+//
+// import CodeEditorController from "./code_editor_controller"
+// application.register("code-editor", CodeEditorController)
 
-import ExperimentsController from "./experiments_controller"
-application.register("experiments", ExperimentsController)
-
-import CopyController from "./copy_controller"
-application.register("copy", CopyController)
-
-import CodeEditorController from "./code_editor_controller"
-application.register("code-editor", CodeEditorController)
+//
+// automatically load controllers
+//
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

config/importmap.rb

@@ -1,6 +1,11 @@
-pin "phlex_storybook", to: "phlex_storybook/application.js", preload: true
+pin 'monaco-editor', to: 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
+
 pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
-pin 'monaco-editor', to: 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 
-pin_all_from PhlexStorybook::Engine.root.join("app/javascript/phlex_storybook/controllers"), under: "controllers", to: "phlex_storybook/controllers"
+pin "phlex_storybook", to: "phlex_storybook/application.js", preload: true
+pin_all_from PhlexStorybook::Engine.root.join("app/javascript/phlex_storybook/controllers"),
+             under: "controllers",
+             to: "phlex_storybook/controllers",
+             preload: true

lib/phlex_storybook/tasks/install.rb

@@ -31,6 +31,12 @@ def install
             #       category "Category 1"
             #     end
             #   end
+            #
+            # If you aren't using importmaps then you may have add this to your config/development.rb file:
+            # 
+            #   # See: https://stackoverflow.com/questions/77053696/importmap-rails-sprockets-not-finding-stimulus-loading-js-in-fresh-stimulus-ra 
+            #   config.assets.digest = true
+            # 
 
             PhlexStorybook.configuration.add_component_path("app/components")
           RUBY