shopify_theme_builder 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 307e28c3c750b87460a048c082ba3c3287a480419c1b1c52faa84660de8b543a
-  data.tar.gz: 1ea87aa101f2858f46090e8f12d61c231bb4671dbd10aaa53b5427497690ae28
+  metadata.gz: 96de2b7ebf1688b16c967eb0a10fc193b0ba49064f0612a2a8ae7b73d8ff5ca4
+  data.tar.gz: e8db2e1b3643c1f2b479a4e87c03c00e1c2c8e3354ec7914dca566eabab82746
 SHA512:
-  metadata.gz: 4997036e87e815574d49b2857e4c8f859fcd53afcd279652ec3b81b563d454bd0826c21101a616c82cb8b0b570817e1c3d6d20a827c7d91d0940f81ed5d4766c
-  data.tar.gz: 199222a677430c7ec42719ef04574050327f61f8648c5096b7d60c9f06ac9a4c03b42fdbc90e307f41b46fd916eebb79fbac437a82c67ba00f87ce3805126279
+  metadata.gz: 1bbc6a322bd5a4bb4156e5692c49fa7358b962da211453289a9e9ad7bb419d76b0e28508b4fa41ec6f6eb662436d3b79c16d4e5a6a2ae46d130cb79b9faae1b4
+  data.tar.gz: ce8c3198cc5d190ca41d7e1e46f69a3c59fa3649735d74c11bcc42c37eefb950723484453e6fd909785273323c257cab39711eafbb4a5bec9da3e19d47be3ec1

data/README.md

@@ -33,6 +33,11 @@ _components/
     schema.json
     style.css
     index.js
+    controllers.js
+assets/
+  tailwind-output.css
+  tailwind.css
+  controllers.js
 blocks/
   button.liquid
 ```
@@ -43,6 +48,34 @@ All files inside the `button` folder will be compiled into a single `button.liqu
 
 ShopifyThemeBuilder also supports Tailwind CSS integration. You can specify an input CSS file that includes Tailwind directives and an output CSS file where the compiled styles will be saved. The watcher will automatically run the Tailwind build process whenever changes are detected in the components folder.
 
+## Stimulus JS Support
+
+ShopifyThemeBuilder supports Stimulus JS integration. You can specify an output JavaScript file where the compiled Stimulus controllers will be saved. The watcher will automatically compile the Stimulus controllers whenever changes are detected in the components folder.
+
+### How to create Stimulus controllers
+
+To create Stimulus controllers, create a `controller.js` file inside your component folder. For example:
+
+```
+_components/
+  my_component/
+    controller.js
+```
+
+The content of the `controller.js` file should follow the Stimulus controller structure. For example:
+
+```javascript
+class HelloController extends Controller {
+  connect() {
+    console.log("My component controller connected")
+  }
+}
+
+Stimulus.register("hello", HelloController)
+```
+
+When the watcher runs, it will compile all `controller.js` files from your components into a single JavaScript file that can be included in your Shopify theme.
+
 ## Installation
 
 Install the gem and add to the application's Gemfile by executing:
@@ -61,9 +94,10 @@ bundle exec theme-builder watch
 
 You can customize multiple options when running the watcher:
 - `--folders`: Specify one or more folders to watch (default is `_components`).
-- `--tailwind-input-file`: Specify the Tailwind CSS input file (default is `src/styles/tailwind.css`).
-- `--tailwind-output-file`: Specify the Tailwind CSS output file (default is `assets/tailwind-output.css`).
+- `--tailwind-input-file`: Specify the Tailwind CSS input file (default is `./assets/tailwind.css`).
+- `--tailwind-output-file`: Specify the Tailwind CSS output file (default is `./assets/tailwind-output.css`).
 - `--skip-tailwind`: Skip the Tailwind CSS build process (default is `false`).
+- `--stimulus-output-file`: Specify the Stimulus JS output file (default is `./assets/controllers.js`).
 
 If you need help with all available options, or how to set them, run:
 
@@ -79,6 +113,12 @@ The watcher will create a CSS file that can be included in your Shopify theme la
 {{ 'tailwind-output.css' | asset_url | stylesheet_tag }}
 ```
 
+And a JavaScript file that can be included in your Shopify theme layout in this way:
+
+```liquid
+<script type="module" src="{{ 'controllers.js' | asset_url }}"></script>
+```
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `bin/rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
@@ -88,7 +128,7 @@ To install this gem onto your local machine, run `bundle exec rake install`. To
 ## Next Steps
 
 - [x] Run the tailwind build process automatically.
-- [ ] Add Stimulus JS support.
+- [x] Add Stimulus JS support.
 - [ ] Create a command to build an example component with all the files.
 - [ ] Decompile existing Shopify files into components structure (?).
 

data/lib/shopify_theme_builder/command_line.rb

@@ -11,12 +11,15 @@ module ShopifyThemeBuilder
     method_option :tailwind_output_file, type: :string, default: "./assets/tailwind-output.css",
                                          desc: "Tailwind CSS output file"
     method_option :skip_tailwind, type: :boolean, default: false, desc: "Skip Tailwind CSS processing"
+    method_option :stimulus_output_file, type: :string, default: "./assets/controllers.js",
+                                         desc: "Stimulus controllers output file"
     def watch
       ShopifyThemeBuilder.watch(
         folders_to_watch: options[:folders],
         tailwind_input_file: options[:tailwind_input_file],
         tailwind_output_file: options[:tailwind_output_file],
-        skip_tailwind: options[:skip_tailwind]
+        skip_tailwind: options[:skip_tailwind],
+        stimulus_output_file: options[:stimulus_output_file]
       )
     end
   end

data/lib/shopify_theme_builder/filewatcher.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "filewatcher"
+
+module ShopifyThemeBuilder
+  # It wraps the Filewatcher functionality to monitor file changes.
+  # It delegates method calls to the underlying Filewatcher instance.
+  # Check: https://github.com/filewatcher/filewatcher
+  class Filewatcher
+    def initialize(...)
+      @filewatcher = ::Filewatcher.new(...)
+    end
+
+    def method_missing(name, ...)
+      if @filewatcher.respond_to?(name)
+        @filewatcher.send(name, ...)
+      else
+        super
+      end
+    end
+
+    def respond_to_missing?(name, include_private)
+      @filewatcher.respond_to?(name) || super
+    end
+  end
+end

data/lib/shopify_theme_builder/liquid_processor.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "logger"
+
 module ShopifyThemeBuilder
   # LiquidProcessor is responsible for processing Liquid files
   # by combining various related files (Liquid, schema, CSS, JS, doc, comment)

data/lib/shopify_theme_builder/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ShopifyThemeBuilder
-  VERSION = "0.3.0"
+  VERSION = "0.4.0"
 end

data/lib/shopify_theme_builder/watcher.rb

@@ -1,27 +1,125 @@
 # frozen_string_literal: true
 
-require "filewatcher"
+require "fileutils"
+require "tailwindcss/ruby"
 
 module ShopifyThemeBuilder
-  # Watcher class for ShopifyThemeBuilder.
-  # It wraps the Filewatcher functionality to monitor file changes.
-  # It delegates method calls to the underlying Filewatcher instance.
-  # Check: https://github.com/filewatcher/filewatcher
+  # Watcher is responsible for monitoring specified folders for changes
+  # and triggering the build process for Shopify theme components.
   class Watcher
-    def initialize(...)
-      @filewatcher = Filewatcher.new(...)
+    def initialize(
+      folders_to_watch: ["_components"],
+      tailwind_input_file: "./assets/tailwind.css",
+      tailwind_output_file: "./assets/tailwind-output.css",
+      skip_tailwind: false,
+      stimulus_output_file: "./assets/controllers.js"
+    )
+      @folders_to_watch = folders_to_watch
+      @tailwind_input_file = tailwind_input_file
+      @tailwind_output_file = tailwind_output_file
+      @skip_tailwind = skip_tailwind
+      @stimulus_output_file = stimulus_output_file
     end
 
-    def method_missing(name, ...)
-      if @filewatcher.respond_to?(name)
-        @filewatcher.send(name, ...)
-      else
-        super
+    def watch
+      create_folders
+
+      initial_build
+
+      create_tailwind_file
+
+      run_tailwind
+
+      run_stimulus
+
+      watch_folders
+    end
+
+    private
+
+    def create_folders
+      puts "Creating necessary folders..."
+
+      FileUtils.mkdir_p(@folders_to_watch)
+      FileUtils.mkdir_p("sections")
+      FileUtils.mkdir_p("blocks")
+      FileUtils.mkdir_p("snippets")
+    end
+
+    def initial_build
+      puts "Doing an initial build..."
+
+      @folders_to_watch.each do |folder|
+        Builder.new(files_to_process: Dir.glob("#{folder}/**/*.*")).build
+      end
+    end
+
+    def watch_folders
+      puts "Watching for changes in '#{@folders_to_watch.join(", ")}' folders..."
+
+      Filewatcher.new(@folders_to_watch).watch do |changes|
+        changes.each_key do |filename|
+          relative_filename = filename.gsub("#{Dir.pwd}/", "")
+
+          Builder.new(files_to_process: [relative_filename]).build if relative_filename.start_with?(*@folders_to_watch)
+        end
+
+        run_tailwind
+
+        run_stimulus if changes.keys.any? { |f| f.end_with?("controller.js") }
       end
     end
 
-    def respond_to_missing?(name, include_private)
-      @filewatcher.respond_to?(name) || super
+    def run_tailwind
+      return if @skip_tailwind
+
+      puts "Running Tailwind CSS build..."
+
+      system("tailwindcss", "-i", @tailwind_input_file, "-o", @tailwind_output_file)
+    end
+
+    def create_tailwind_file
+      return if @skip_tailwind || File.exist?(@tailwind_input_file)
+
+      puts "Creating default Tailwind CSS input file at '#{@tailwind_input_file}'..."
+
+      FileUtils.mkdir_p(File.dirname(@tailwind_input_file))
+      File.write @tailwind_input_file, tailwind_base_config
+    end
+
+    def tailwind_base_config
+      return '@import "tailwindcss";' if Gem::Version.new(Tailwindcss::Ruby::VERSION) >= Gem::Version.new("4.0.0")
+
+      system("tailwindcss", "init") unless File.exist?("tailwind.config.js")
+
+      <<~TAILWIND.strip
+        @tailwind base;
+        @tailwind components;
+        @tailwind utilities;
+      TAILWIND
+    end
+
+    def run_stimulus
+      controllers_files = @folders_to_watch.map { Dir.glob("#{_1}/**/controller.js") }.flatten
+
+      return if controllers_files.empty?
+
+      puts "Building Stimulus controllers..."
+
+      content = +base_stimulus_content
+
+      controllers_files.each do |file|
+        content << File.read(file)
+        content << "\n"
+      end
+
+      FileUtils.mkdir_p(File.dirname(@stimulus_output_file))
+      File.write(@stimulus_output_file, content.strip)
+    end
+
+    def base_stimulus_content
+      "import { Application, Controller } from \"https://unpkg.com/@hotwired/stimulus/dist/stimulus.js\"\n\
+window.Stimulus = Application.start()\n\n"
     end
   end
 end

data/lib/shopify_theme_builder.rb

@@ -1,70 +1,15 @@
 # frozen_string_literal: true
 
-require "fileutils"
-require "logger"
 require_relative "shopify_theme_builder/version"
-require_relative "shopify_theme_builder/watcher"
+require_relative "shopify_theme_builder/filewatcher"
 require_relative "shopify_theme_builder/liquid_processor"
 require_relative "shopify_theme_builder/builder"
 require_relative "shopify_theme_builder/command_line"
+require_relative "shopify_theme_builder/watcher"
 
 # The main module for ShopifyThemeBuilder.
 module ShopifyThemeBuilder
-  class << self
-    def watch(
-      folders_to_watch: ["_components"],
-      tailwind_input_file: "./assets/tailwind.css",
-      tailwind_output_file: "./assets/tailwind-output.css",
-      skip_tailwind: false
-    )
-      create_folders(folders_to_watch)
-
-      initial_build(folders_to_watch)
-
-      run_tailwind(tailwind_input_file, tailwind_output_file) unless skip_tailwind
-
-      watch_folders(folders_to_watch) do
-        run_tailwind(tailwind_input_file, tailwind_output_file) unless skip_tailwind
-      end
-    end
-
-    private
-
-    def create_folders(folders_to_watch)
-      puts "Creating necessary folders..."
-
-      FileUtils.mkdir_p(folders_to_watch)
-      FileUtils.mkdir_p("sections")
-      FileUtils.mkdir_p("blocks")
-      FileUtils.mkdir_p("snippets")
-    end
-
-    def initial_build(folders_to_watch)
-      puts "Doing an initial build..."
-
-      folders_to_watch.each do |folder|
-        Builder.new(files_to_process: Dir.glob("#{folder}/**/*.*")).build
-      end
-    end
-
-    def watch_folders(folders_to_watch)
-      puts "Watching for changes in '#{folders_to_watch.join(", ")}' folders..."
-
-      Watcher.new(folders_to_watch).watch do |changes|
-        changes.each_key do |filename|
-          relative_filename = filename.gsub("#{Dir.pwd}/", "")
-
-          Builder.new(files_to_process: [relative_filename]).build if relative_filename.start_with?(*folders_to_watch)
-        end
-
-        yield if block_given?
-      end
-    end
-
-    def run_tailwind(tailwind_input_file, tailwind_output_file)
-      puts "Running Tailwind CSS build..."
-
-      system("tailwindcss", "-i", tailwind_input_file, "-o", tailwind_output_file)
-    end
+  def self.watch(...)
+    Watcher.new(...).watch
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: shopify_theme_builder
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Massimiliano Lattanzio
@@ -87,6 +87,7 @@ files:
 - lib/shopify_theme_builder.rb
 - lib/shopify_theme_builder/builder.rb
 - lib/shopify_theme_builder/command_line.rb
+- lib/shopify_theme_builder/filewatcher.rb
 - lib/shopify_theme_builder/liquid_processor.rb
 - lib/shopify_theme_builder/version.rb
 - lib/shopify_theme_builder/watcher.rb