clapton 0.0.21 → 0.0.23

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27fa8b6f3ac907d41af32dc550fa4556dc127895ace2e296969b49b8dc8f887a
-  data.tar.gz: 8b5099fd20fc5f804d792c48da12b694755b18e8d51a9f65442ad61e1b2a7f6d
+  metadata.gz: f5a917233f15421e530f894af3f7fa67b46b79c78d8568cd158566610f6c2db5
+  data.tar.gz: 2935aea66e3fc3e7442606c0fcf55ffcea56b61bb36864c4fc77101680cc29ea
 SHA512:
-  metadata.gz: be4dabb30c708af3c0ce9b1cb0a20eb1b58d79924e2303c880b2d4b0a563eb304d906d456b105b24999baaaebb05053d618136de336c0b5b579581f07817a9b6
-  data.tar.gz: ddd55a8d86a0c9f5666c7fb686ed137c442e8d377341279856eb140d39a2eb08fe5538f05aa3be29ae9448ce1aee6e64eb0d93187c6bf8a1f45b1f4bdf44f12b
+  metadata.gz: 458297f32dca2583bfb675fb74bba00b781bef37d825b9a76e9116cea3c3bf0f98b18d1d6867d62b67d47638335c2f99d0ef3885358281f5fad63245e53e6d2f
+  data.tar.gz: 586febac7acaf53ed42c0dadaa696c5e136bee87de707214343cf36104f2b56625f3aef3cfa4dfd71bd34c8108243813b26f8ea8f8fa7d7aea7ac2b686e9c25a

data/README.md

@@ -349,6 +349,15 @@ module ApplicationCable
 end
 ```
 
+### Using with importmap-rails
+
+Use `clapton_javascript_tag` instead of `javascript_importmap_tags`.
+
+```diff
+- <%= javascript_importmap_tags %>
++ <%= clapton_javascript_tag %>
+```
+
 ### Events
 
 #### clapton:render

data/app/helpers/clapton/clapton_helper.rb

@@ -1,11 +1,10 @@
 module Clapton
   module ClaptonHelper
 
-    def clapton_javascript_tag
+    def clapton_javascript_tag(entry_point = "application", importmap: nil)
       all_components = Dir.glob(Rails.root.join("app", "components", "**", "*.rb"))
-      tags = <<~HTML
-        <script type="importmap">
-          {
+      clapton_json = JSON.parse <<~JSON
+      {
             "imports": {
               "client": "/clapton/client.js",
               "components": "/clapton/components.js",
@@ -15,10 +14,25 @@ module Clapton
               end.join(",\n") }
             }
           }
-        </script>
-        <script type="module" src="/clapton/client.js"></script>
-      HTML
-      tags.html_safe
+      JSON
+      if defined?(javascript_importmap_tags)
+        importmap ||= Rails.application.importmap
+        json = { imports: JSON.parse(importmap.to_json(resolver: self))["imports"].merge(clapton_json["imports"]) }
+        safe_join [
+          javascript_inline_importmap_tag(json.to_json),
+          javascript_importmap_module_preload_tags(importmap, entry_point:),
+          javascript_import_module_tag(entry_point),
+          tag.script(type: "module", src: "/clapton/client.js"),
+        ], "\n"
+      else
+        html = <<~HTML
+          <script type="importmap">
+            #{clapton_json.to_json}
+          </script>
+          <script type="module" src="/clapton/client.js"></script>
+        HTML
+        html.html_safe
+      end
     end
 
     def clapton_tag

data/lib/clapton/engine.rb

@@ -47,12 +47,12 @@ module Clapton
         js += "\n"
         js += "import { c } from 'c';"
         js += "\n"
-        code.scan(/(\w+)Component\.new/).each do |match|
-          js += "import { #{match[0]}Component } from '#{match[0]}Component';"
-          js += "\n"
+        Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |f|
+          if File.basename(file, ".rb") != File.basename(f, ".rb")
+            js += "import { #{File.basename(f, ".rb").camelize} } from '#{File.basename(f, ".rb").camelize}';"
+            js += "\n"
+          end
         end
-        code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)\(/, '\1@c.\2(')
-        code = code.gsub(/([^a-zA-Z0-9])c\.(\w+?)(\.|$)/, '\1@c.\2()\3')
         js += Ruby2JS.convert(code, preset: true)
         js += "\n"
         js += "export { #{File.basename(file, ".rb").camelize} };"

data/lib/clapton/javascripts/dist/client.js

@@ -1448,6 +1448,13 @@ document.addEventListener("DOMContentLoaded", async () => {
     const event = new Event('clapton:render');
     document.dispatchEvent(event);
 });
+document.addEventListener("turbo:render", async () => {
+    await initializeComponents();
+    initializeActions();
+    initializeInputs();
+    const event = new Event('clapton:render');
+    document.dispatchEvent(event);
+});
 window.addEventListener('beforeunload', () => {
     sessionStorage.setItem('scrollPosition', window.scrollY.toString());
 });

data/lib/clapton/javascripts/src/c-base.ts

@@ -0,0 +1,160 @@
+import { Clapton } from "components"
+
+const bq = (...props: any[]) => {
+  return new Clapton.BlockQuote(...props)
+}
+
+const box = (...props: any[]) => {
+  return new Clapton.Box(...props)
+}
+
+const b = (...props: any[]) => {
+  return new Clapton.Bold(...props)
+}
+
+const button = (...props: any[]) => {
+  return new Clapton.Button(...props)
+}
+
+const check = (...props: any[]) => {
+  return new Clapton.Checkbox(props[0], props[1], props[2])
+}
+
+const code = (...props: any[]) => {
+  return new Clapton.Code(...props)
+}
+
+const datetime = (...props: any[]) => {
+  return new Clapton.DateTimeField(props[0], props[1], props[2])
+}
+
+const el = (...props: any[]) => {
+  return new Clapton.Element(props[0], props[1])
+}
+
+const embed = (...props: any[]) => {
+  return new Clapton.Embed(props[0])
+}
+
+const em = (...props: any[]) => {
+  return new Clapton.Emphasis(...props)
+}
+
+const form = (...props: any[]) => {
+  return new Clapton.Form(...props)
+}
+
+const h = (...props: any[]) => {
+  return new Clapton.Heading(props[0], props[1])
+}
+
+const img = (...props: any[]) => {
+  return new Clapton.Image(props[0], props[1], props[2])
+}
+
+const a = (...props: any[]) => {
+  return new Clapton.Link(props[0], props[1])
+}
+
+const li = (...props: any[]) => {
+  return new Clapton.ListItem(...props)
+}
+
+const ul = (...props: any[]) => {
+  return new Clapton.List(...props)
+}
+
+const ol = (...props: any[]) => {
+  return new Clapton.OrderedList(...props)
+}
+
+const p = (...props: any[]) => {
+  return new Clapton.Paragraph(...props)
+}
+
+const q = (...props: any[]) => {
+  return new Clapton.Quote(...props)
+}
+
+const radio = (...props: any[]) => {
+  return new Clapton.RadioButton(props[0], props[1], props[2])
+}
+
+const select = (...props: any[]) => {
+  return new Clapton.Select(props[0], props[1], props[2])
+}
+
+const span = (...props: any[]) => {
+  return new Clapton.Span(...props)
+}
+
+const textarea = (...props: any[]) => {
+  return new Clapton.TextArea(props[0], props[1], props[2])
+}
+
+const input = (...props: any[]) => {
+  return new Clapton.TextField(props[0], props[1], props[2])
+}
+
+const text = (...props: any[]) => {
+  return new Clapton.Text(props[0])
+}
+
+const c = (name: string, ...props: any[]) => {
+  switch (name) {
+    case "bq":
+      return bq(...props)
+    case "box":
+      return box(...props)
+    case "b":
+      return b(...props)
+    case "button":
+      return button(...props)
+    case "check":
+      return check(...props)
+    case "code":
+      return code(...props)
+    case "datetime":
+      return datetime(...props)
+    case "el":
+      return el(...props)
+    case "embed":
+      return embed(...props)
+    case "em":
+      return em(...props)
+    case "form":
+      return form(...props)
+    case "h":
+      return h(...props)
+    case "img":
+      return img(...props)
+    case "a":
+      return a(...props)
+    case "li":
+      return li(...props)
+    case "ul":
+      return ul(...props)
+    case "ol":
+      return ol(...props)
+    case "p":
+      return p(...props)
+    case "q":
+      return q(...props)
+    case "radio":
+      return radio(...props)
+    case "select":
+      return select(...props)
+    case "span":
+      return span(...props)
+    case "textarea":
+      return textarea(...props)
+    case "input":
+      return input(...props)
+    case "text":
+      return text(...props)
+    default:
+      return new Clapton.Component(...props)
+  }
+}
+
+export { c }

data/lib/clapton/javascripts/src/c-for-test.ts

@@ -1,160 +1,3 @@
-import { Clapton } from "components"
-
-const bq = (...props: any[]) => {
-  return new Clapton.BlockQuote(...props)
-}
-
-const box = (...props: any[]) => {
-  return new Clapton.Box(...props)
-}
-
-const b = (...props: any[]) => {
-  return new Clapton.Bold(...props)
-}
-
-const button = (...props: any[]) => {
-  return new Clapton.Button(...props)
-}
-
-const check = (...props: any[]) => {
-  return new Clapton.Checkbox(props[0], props[1], props[2])
-}
-
-const code = (...props: any[]) => {
-  return new Clapton.Code(...props)
-}
-
-const datetime = (...props: any[]) => {
-  return new Clapton.DateTimeField(props[0], props[1], props[2])
-}
-
-const el = (...props: any[]) => {
-  return new Clapton.Element(props[0], props[1])
-}
-
-const embed = (...props: any[]) => {
-  return new Clapton.Embed(props[0])
-}
-
-const em = (...props: any[]) => {
-  return new Clapton.Emphasis(...props)
-}
-
-const form = (...props: any[]) => {
-  return new Clapton.Form(...props)
-}
-
-const h = (...props: any[]) => {
-  return new Clapton.Heading(props[0], props[1])
-}
-
-const img = (...props: any[]) => {
-  return new Clapton.Image(props[0], props[1], props[2])
-}
-
-const a = (...props: any[]) => {
-  return new Clapton.Link(props[0], props[1])
-}
-
-const li = (...props: any[]) => {
-  return new Clapton.ListItem(...props)
-}
-
-const ul = (...props: any[]) => {
-  return new Clapton.List(...props)
-}
-
-const ol = (...props: any[]) => {
-  return new Clapton.OrderedList(...props)
-}
-
-const p = (...props: any[]) => {
-  return new Clapton.Paragraph(...props)
-}
-
-const q = (...props: any[]) => {
-  return new Clapton.Quote(...props)
-}
-
-const radio = (...props: any[]) => {
-  return new Clapton.RadioButton(props[0], props[1], props[2])
-}
-
-const select = (...props: any[]) => {
-  return new Clapton.Select(props[0], props[1], props[2])
-}
-
-const span = (...props: any[]) => {
-  return new Clapton.Span(...props)
-}
-
-const textarea = (...props: any[]) => {
-  return new Clapton.TextArea(props[0], props[1], props[2])
-}
-
-const input = (...props: any[]) => {
-  return new Clapton.TextField(props[0], props[1], props[2])
-}
-
-const text = (...props: any[]) => {
-  return new Clapton.Text(props[0])
-}
-
-const c = (name: string, ...props: any[]) => {
-  switch (name) {
-    case "bq":
-      return bq(...props)
-    case "box":
-      return box(...props)
-    case "b":
-      return b(...props)
-    case "button":
-      return button(...props)
-    case "check":
-      return check(...props)
-    case "code":
-      return code(...props)
-    case "datetime":
-      return datetime(...props)
-    case "el":
-      return el(...props)
-    case "embed":
-      return embed(...props)
-    case "em":
-      return em(...props)
-    case "form":
-      return form(...props)
-    case "h":
-      return h(...props)
-    case "img":
-      return img(...props)
-    case "a":
-      return a(...props)
-    case "li":
-      return li(...props)
-    case "ul":
-      return ul(...props)
-    case "ol":
-      return ol(...props)
-    case "p":
-      return p(...props)
-    case "q":
-      return q(...props)
-    case "radio":
-      return radio(...props)
-    case "select":
-      return select(...props)
-    case "span":
-      return span(...props)
-    case "textarea":
-      return textarea(...props)
-    case "input":
-      return input(...props)
-    case "text":
-      return text(...props)
-    default:
-      return new Clapton.Component(...props)
-  }
-}
+import { c } from "./c-base"
 
 export default c

data/lib/clapton/javascripts/src/c.ts

@@ -1,160 +1,3 @@
-import { Clapton } from "components"
-
-const bq = (...props: any[]) => {
-  return new Clapton.BlockQuote(...props)
-}
-
-const box = (...props: any[]) => {
-  return new Clapton.Box(...props)
-}
-
-const b = (...props: any[]) => {
-  return new Clapton.Bold(...props)
-}
-
-const button = (...props: any[]) => {
-  return new Clapton.Button(...props)
-}
-
-const check = (...props: any[]) => {
-  return new Clapton.Checkbox(props[0], props[1], props[2])
-}
-
-const code = (...props: any[]) => {
-  return new Clapton.Code(...props)
-}
-
-const datetime = (...props: any[]) => {
-  return new Clapton.DateTimeField(props[0], props[1], props[2])
-}
-
-const el = (...props: any[]) => {
-  return new Clapton.Element(props[0], props[1])
-}
-
-const embed = (...props: any[]) => {
-  return new Clapton.Embed(props[0])
-}
-
-const em = (...props: any[]) => {
-  return new Clapton.Emphasis(...props)
-}
-
-const form = (...props: any[]) => {
-  return new Clapton.Form(...props)
-}
-
-const h = (...props: any[]) => {
-  return new Clapton.Heading(props[0], props[1])
-}
-
-const img = (...props: any[]) => {
-  return new Clapton.Image(props[0], props[1], props[2])
-}
-
-const a = (...props: any[]) => {
-  return new Clapton.Link(props[0], props[1])
-}
-
-const li = (...props: any[]) => {
-  return new Clapton.ListItem(...props)
-}
-
-const ul = (...props: any[]) => {
-  return new Clapton.List(...props)
-}
-
-const ol = (...props: any[]) => {
-  return new Clapton.OrderedList(...props)
-}
-
-const p = (...props: any[]) => {
-  return new Clapton.Paragraph(...props)
-}
-
-const q = (...props: any[]) => {
-  return new Clapton.Quote(...props)
-}
-
-const radio = (...props: any[]) => {
-  return new Clapton.RadioButton(props[0], props[1], props[2])
-}
-
-const select = (...props: any[]) => {
-  return new Clapton.Select(props[0], props[1], props[2])
-}
-
-const span = (...props: any[]) => {
-  return new Clapton.Span(...props)
-}
-
-const textarea = (...props: any[]) => {
-  return new Clapton.TextArea(props[0], props[1], props[2])
-}
-
-const input = (...props: any[]) => {
-  return new Clapton.TextField(props[0], props[1], props[2])
-}
-
-const text = (...props: any[]) => {
-  return new Clapton.Text(props[0])
-}
-
-const c = (name: string, ...props: any[]) => {
-  switch (name) {
-    case "bq":
-      return bq(...props)
-    case "box":
-      return box(...props)
-    case "b":
-      return b(...props)
-    case "button":
-      return button(...props)
-    case "check":
-      return check(...props)
-    case "code":
-      return code(...props)
-    case "datetime":
-      return datetime(...props)
-    case "el":
-      return el(...props)
-    case "embed":
-      return embed(...props)
-    case "em":
-      return em(...props)
-    case "form":
-      return form(...props)
-    case "h":
-      return h(...props)
-    case "img":
-      return img(...props)
-    case "a":
-      return a(...props)
-    case "li":
-      return li(...props)
-    case "ul":
-      return ul(...props)
-    case "ol":
-      return ol(...props)
-    case "p":
-      return p(...props)
-    case "q":
-      return q(...props)
-    case "radio":
-      return radio(...props)
-    case "select":
-      return select(...props)
-    case "span":
-      return span(...props)
-    case "textarea":
-      return textarea(...props)
-    case "input":
-      return input(...props)
-    case "text":
-      return text(...props)
-    default:
-      return new Clapton.Component(...props)
-  }
-}
+import { c } from "./c-base"
 
 export { c }

data/lib/clapton/javascripts/src/client.ts

@@ -46,6 +46,14 @@ document.addEventListener("DOMContentLoaded", async () => {
   document.dispatchEvent(event);
 });
 
+document.addEventListener("turbo:render", async () => {
+  await initializeComponents();
+  initializeActions();
+  initializeInputs();
+  const event = new Event('clapton:render');
+  document.dispatchEvent(event);
+});
+
 window.addEventListener('beforeunload', () => {
   sessionStorage.setItem('scrollPosition', window.scrollY.toString());
 });

data/lib/clapton/version.rb

@@ -1,3 +1,3 @@
 module Clapton
-  VERSION = '0.0.21'
+  VERSION = '0.0.23'
 end

data/lib/tasks/clapton_tasks.rake

@@ -1,6 +1,10 @@
 namespace :clapton do
   task compile: :environment do
+    FileUtils.mkdir_p(Rails.root.join("public", "clapton")) unless Rails.root.join("public", "clapton").exist?
+    File.write(Rails.root.join("public", "clapton", "components.js"), File.read(File.join(__dir__, "..", "clapton", "javascripts", "dist", "components.js")))
+    File.write(Rails.root.join("public", "clapton", "client.js"), File.read(File.join(__dir__, "..", "clapton", "javascripts", "dist", "client.js")))
+    File.write(Rails.root.join("public", "clapton", "c.js"), File.read(File.join(__dir__, "..", "clapton", "javascripts", "dist", "c.js")))
+
     Clapton::Engine.compile_components
-    puts "Clapton components compiled"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: clapton
 version: !ruby/object:Gem::Version
-  version: 0.0.21
+  version: 0.0.23
 platform: ruby
 authors:
 - Moeki Kawakami
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-10-16 00:00:00.000000000 Z
+date: 2024-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -6706,6 +6706,7 @@ files:
 - lib/clapton/javascripts/src/actions/handle-action.spec.ts
 - lib/clapton/javascripts/src/actions/handle-action.ts
 - lib/clapton/javascripts/src/actions/initialize-actions.ts
+- lib/clapton/javascripts/src/c-base.ts
 - lib/clapton/javascripts/src/c-for-test.ts
 - lib/clapton/javascripts/src/c.ts
 - lib/clapton/javascripts/src/channel/clapton-channel.js