opal-vite 0.2.14 → 0.2.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 93399be68e49a18a612682b0fe50eb3791fda0a6dc14ddbcd8f9970e5d29be7b
-  data.tar.gz: 4153c1d7194c000104493d2be30516e5db36b9231e947b0aa6f72ce4f3930fef
+  metadata.gz: 022e137267f9f6c1dde7aafeea3d56658e572d7a568d3cad25e7e3e4ea93edc6
+  data.tar.gz: 9a2aa4af5c09bee93073f84b2afa9ca78f332fd8858ce6ddfd21f5d96928b412
 SHA512:
-  metadata.gz: e184450fa18a680b8155b2c3190781ef31de310eae209659a493fe601ed25421981b0c777ef44f631daef7c16a50a6065ba8fb6d6c850fa2bc7f4478c5ecf56c
-  data.tar.gz: 8dd3d802b5e6f476dec0b402de184b55f55a5fc111af0fe1ca804072205d1108e80a30114ef70f534a8033e3da34faf4b280e4d2a86d5f42fd1e300ec1fccfc7
+  metadata.gz: 27f1206bfd58eda0c91e7f7031181eb05d3595e9ef675d8901a403d69e7b87fae4c6dd9a85daf187b7985db058ef619d546865cee303483140d6eb5c20d8b640
+  data.tar.gz: 22803cc1346dd41898a1ad30fd35697ca634045209665295f553ec7608081b16c96f45b1fe7a7a23e37049407777d376f7d3c5ad5eed29e1daa742cc50126361

data/lib/opal/vite/version.rb

@@ -1,5 +1,5 @@
 module Opal
   module Vite
-    VERSION = "0.2.14"
+    VERSION = "0.2.15"
   end
 end

data/opal/opal_vite/concerns/v1/vue_helpers.rb

@@ -85,6 +85,86 @@ module OpalVite
           result.to_n
         end
 
+        # ===================
+        # Vue Function Helpers
+        # ===================
+
+        # Wrap any Ruby proc/lambda in a pure JS function (removes $$class property)
+        # Use this for Vue options that expect functions (data, lifecycle hooks, etc.)
+        # @param block [Proc] Any Ruby proc or lambda
+        # @return [Function] Pure JS function for Vue compatibility
+        #
+        # Usage:
+        #   data: vue_fn { { count: 0 }.to_n }
+        #   someCallback: vue_fn { |arg| process(arg) }
+        def vue_fn(&block)
+          `(function() { var fn = #{block}; return function() { return fn.apply(this, arguments); }; })()`
+        end
+
+        # ===================
+        # Vue Method/Computed Helpers (解決策②)
+        # ===================
+        # These helpers reduce backtick JavaScript by wrapping Vue's `this`
+        # in a Native object, allowing Ruby-style property access.
+        #
+        # Example:
+        #   methods: {
+        #     increment: vue_method { |vm| vm[:count] += 1 }
+        #   }
+        #
+        # Instead of:
+        #   methods: `{ increment() { this.count++ } }`
+
+        # Create a Vue method that receives `this` as Native-wrapped vm
+        # @param block [Proc] Block that receives vm (Native-wrapped this) and optional arguments
+        # @return [Function] Pure JS function (no $$class property) for Vue compatibility
+        #
+        # Usage:
+        #   increment: vue_method { |vm| vm[:count] += 1 }
+        #   greet: vue_method { |vm, name| console_log("Hello, #{name}!") }
+        #   remove: vue_method { |vm, id| service.remove(id) }
+        #
+        # Note: When Vue calls the method, `this` is captured and passed as the first argument.
+        # Additional arguments from Vue (e.g., @click="removeTodo(todo.id)") are also passed.
+        def vue_method(&block)
+          p = proc do |*args|
+            vm = Native(`this`)
+            block.call(vm, *args)
+          end
+          # Wrap in pure JS function to avoid Vue $$class warning
+          `(function() { var fn = #{p}; return function() { return fn.apply(this, arguments); }; })()`
+        end
+
+        # Create a Vue computed getter that receives `this` as Native-wrapped vm
+        # @param block [Proc] Block that receives vm and returns computed value
+        # @return [Function] Pure JS function (no $$class property) for Vue compatibility
+        #
+        # Usage:
+        #   doubled: vue_computed_fn { |vm| vm[:count] * 2 }
+        def vue_computed_fn(&block)
+          p = proc do
+            vm = Native(`this`)
+            block.call(vm)
+          end
+          # Wrap in pure JS function to avoid Vue $$class warning
+          `(function() { var fn = #{p}; return function() { return fn.apply(this, arguments); }; })()`
+        end
+
+        # Create a Vue lifecycle hook that receives `this` as Native-wrapped vm
+        # @param block [Proc] Block that receives vm
+        # @return [Function] Pure JS function (no $$class property) for Vue compatibility
+        #
+        # Usage:
+        #   mounted: vue_hook { |vm| console_log("Mounted with count: #{vm[:count]}") }
+        def vue_hook(&block)
+          p = proc do
+            vm = Native(`this`)
+            block.call(vm)
+          end
+          # Wrap in pure JS function to avoid Vue $$class warning
+          `(function() { var fn = #{p}; return function() { return fn.apply(this, arguments); }; })()`
+        end
+
         # ===================
         # Lifecycle Hooks
         # ===================

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: opal-vite
 version: !ruby/object:Gem::Version
-  version: 0.2.14
+  version: 0.2.15
 platform: ruby
 authors:
 - stofu1234