shopify_theme_builder 0.2.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de0bb008961c3b947c4496bd5605d24144073d22d4c721587b3f529073ed1096
-  data.tar.gz: 4e494faa701e5bd4dd47c9b609155626bab03438d85cc7a3603bd9e42e5a0ca3
+  metadata.gz: 96de2b7ebf1688b16c967eb0a10fc193b0ba49064f0612a2a8ae7b73d8ff5ca4
+  data.tar.gz: e8db2e1b3643c1f2b479a4e87c03c00e1c2c8e3354ec7914dca566eabab82746
 SHA512:
-  metadata.gz: bd5f70a0f803adcef6eba571c822f8d7d1b45de0c24aa0360c84bc4c19c431357426d53c471c7735e3e3fdd72d1f7774d2f9d141b90409f59402e52d6f6f8cf4
-  data.tar.gz: 94d70495fd131b5201586e2035c0d4c1ca862718547a112afb755c88b20eb3d34ba3658995c30c252de369dd60010221a213a0cd6d6d600c682a4e34adf60c9c
+  metadata.gz: 1bbc6a322bd5a4bb4156e5692c49fa7358b962da211453289a9e9ad7bb419d76b0e28508b4fa41ec6f6eb662436d3b79c16d4e5a6a2ae46d130cb79b9faae1b4
+  data.tar.gz: ce8c3198cc5d190ca41d7e1e46f69a3c59fa3649735d74c11bcc42c37eefb950723484453e6fd909785273323c257cab39711eafbb4a5bec9da3e19d47be3ec1

data/README.md

@@ -33,12 +33,48 @@ _components/
     schema.json
     style.css
     index.js
+    controllers.js
+assets/
+  tailwind-output.css
+  tailwind.css
+  controllers.js
 blocks/
   button.liquid
 ```
 
 All files inside the `button` folder will be compiled into a single `button.liquid` file in the `blocks` folder, combining the comment, doc, Liquid, JSON, CSS, and JavaScript code.
 
+## Tailwind CSS Support
+
+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
 
@@ -53,38 +89,46 @@ bundle add shopify_theme_builder --group "development"
 To watch for changes in the default components folder and build the theme, run:
 
 ```bash
-bundle exec theme-watcher
+bundle exec theme-builder watch
 ```
 
-You can customize the components folder by passing options:
+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 `./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:
 
 ```bash
-bundle exec theme-watcher my_components
+bundle exec theme-builder help watch
 ```
 
-If you prefer, you can import the watcher executable locally using:
+## After Running the Watcher
 
-```bash
-bundle binstubs shopify_theme_builder
+The watcher will create a CSS file that can be included in your Shopify theme layout in this way:
+
+```liquid
+{{ 'tailwind-output.css' | asset_url | stylesheet_tag }}
 ```
 
-It will create a `bin/theme-watcher` file that you can run with:
+And a JavaScript file that can be included in your Shopify theme layout in this way:
 
-```bash
-bin/theme-watcher
+```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.
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, run `bin/release VERSION`, which will update the version file, create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
-## TODO
+## Next Steps
 
-- [ ] Run the tailwind build process automatically.
-- [ ] Check if stimulus controllers are loaded correctly in Shopify themes.
+- [x] Run the tailwind build process automatically.
+- [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/exe/theme-builder

@@ -0,0 +1,7 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "shopify_theme_builder"
+
+ShopifyThemeBuilder::CommandLine.start(ARGV)

data/lib/shopify_theme_builder/command_line.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+require "thor"
+
+module ShopifyThemeBuilder
+  # CommandLine class to handle CLI commands using Thor.
+  class CommandLine < Thor
+    desc "watch", "Watch for changes in the components folder and build the theme accordingly"
+    method_option :folders, type: :array, default: ["_components"], desc: "Folders to watch for changes"
+    method_option :tailwind_input_file, type: :string, default: "./assets/tailwind.css", desc: "Tailwind CSS input file"
+    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],
+        stimulus_output_file: options[:stimulus_output_file]
+      )
+    end
+  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.2.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,52 +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"])
-      create_folders(folders_to_watch)
-
-      initial_build(folders_to_watch)
-
-      watch_folders(folders_to_watch)
-    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
-      end
-    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.2.0
+  version: 0.4.0
 platform: ruby
 authors:
 - Massimiliano Lattanzio
@@ -38,10 +38,44 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.7'
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-ruby
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: thor
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.4'
 email:
 - massimiliano.lattanzio@gmail.com
 executables:
-- theme-watcher
+- theme-builder
 extensions: []
 extra_rdoc_files: []
 files:
@@ -49,9 +83,11 @@ files:
 - LICENSE.txt
 - README.md
 - Rakefile
-- exe/theme-watcher
+- exe/theme-builder
 - 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

data/exe/theme-watcher

@@ -1,13 +0,0 @@
-#!/usr/bin/env ruby
-# frozen_string_literal: true
-
-require "bundler/setup"
-require "shopify_theme_builder"
-
-$stdout.sync = true
-
-if ARGV.empty?
-  ShopifyThemeBuilder.watch
-else
-  ShopifyThemeBuilder.watch(folders_to_watch: ARGV)
-end