an opal experiment

Gemfile

@@ -32,6 +32,8 @@ gem "devise-async"
 gem "passenger" , "6.0.15" ,  require: "phusion_passenger/rack_handler"
 gem "bootsnap", require: false
 
+gem "opal-rails"
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: %i[ mri mingw x64_mingw ]

Gemfile.lock

@@ -262,6 +262,18 @@ GEM
       mustache
       nokogiri (~> 1.7)
       sanitize
+    opal (1.7.2)
+      ast (>= 2.3.0)
+      parser (~> 3.0, >= 3.0.3.2)
+    opal-rails (2.0.2)
+      opal (~> 1.0)
+      opal-sprockets (~> 1.0)
+      rails (>= 6.0, < 7.1)
+      sprockets-rails (>= 3.0)
+    opal-sprockets (1.0.3)
+      opal (>= 1.0, < 2.0)
+      sprockets (~> 4.0)
+      tilt (>= 1.4)
     open4 (1.3.4)
     orm_adapter (0.5.0)
     parser (3.2.0.0)
@@ -435,6 +447,7 @@ DEPENDENCIES
   kaminari
   merged!
   mina
+  opal-rails
   passenger (= 6.0.15)
   pg (~> 1.1)
   pundit (~> 2.3)

app/assets/config/manifest.js

@@ -3,3 +3,4 @@
 //= link_tree ../../javascript .js
 //= link_tree ../../../vendor/javascript .js
 //= link_tree ../builds
+//= link_directory ../javascript .js

app/assets/javascript/opal_main.js.rb

@@ -0,0 +1 @@
+require "opal"

app/controllers/kanta_controller.rb

@@ -0,0 +1,7 @@
+class KantaController < ApplicationController
+
+  def show
+    @image = Merged::Image.first
+  end
+
+end

app/views/kanta/_form.html.haml

@@ -0,0 +1,10 @@
+= form_for @kantum do |f|
+  - if @kantum.errors.any?
+    #error_explanation
+      %h2= "#{pluralize(@kantum.errors.count, "error")} prohibited this kantum from being saved:"
+      %ul
+        - @kantum.errors.full_messages.each do |message|
+          %li= message
+
+  .actions
+    = f.submit 'Save'

app/views/kanta/edit.html.haml

@@ -0,0 +1,7 @@
+%h1 Editing kantum
+
+= render 'form'
+
+= link_to 'Show', @kantum
+\|
+= link_to 'Back', kanta_path

app/views/kanta/index.html.haml

@@ -0,0 +1,19 @@
+%h1 Listing kanta
+
+%table
+  %thead
+    %tr
+      %th
+      %th
+      %th
+
+  %tbody
+    - @kanta.each do |kantum|
+      %tr
+        %td= link_to 'Show', kantum
+        %td= link_to 'Edit', edit_kantum_path(kantum)
+        %td= link_to 'Destroy', kantum, method: :delete, data: { confirm: 'Are you sure?' }
+
+%br
+
+= link_to 'New Kantum', new_kantum_path

app/views/kanta/new.html.haml

@@ -0,0 +1,5 @@
+%h1 New kantum
+
+= render 'form'
+
+= link_to 'Back', kanta_path

app/views/kanta/show.html.haml

@@ -0,0 +1,18 @@
+.flex.justify-center
+  .flex.flex-col
+    = @image.attributes
+
+    %a.underline{ '@click' => "hi"}
+      Back
+
+:opal
+  class Kanta
+    def initialize(hash)
+      hash.each do |k,v|
+      puts k
+      puts v
+      end
+    end
+  end
+
+  kanta = Kanta.new(bg: 'bg-cyan-200')

app/views/layouts/application.haml

@@ -27,6 +27,7 @@
     = csp_meta_tag
     = stylesheet_link_tag "tailwind"
     = stylesheet_link_tag "application"
+    = javascript_include_tag "opal_main"
     
     = javascript_importmap_tags
     - if false

config/initializers/opal.rb

@@ -0,0 +1,22 @@
+# Check out the full list of the available configuration options at
+# https://github.com/opal/opal/blob/master/lib/opal/config.rb
+
+Rails.application.configure do
+  # We suggest keeping the configuration above as default for all environments,
+  # disabling some of them might slightly reduce the bundle size or reduce performance
+  # by degrading some ruby features.
+  config.opal.method_missing_enabled   = true
+  config.opal.const_missing_enabled    = true
+  config.opal.arity_check_enabled      = true
+  config.opal.freezing_stubs_enabled   = true
+  config.opal.dynamic_require_severity = :ignore
+
+  # To enable passing assigns from the controller to the opal template handler
+  # change the following configuration to one of these values:
+  #
+  #   - true    # both locals and instance variables
+  #   - :locals # only locals
+  #   - :ivars  # only instance variables
+  #
+  config.opal.assigns_in_templates = false
+end

config/routes.rb

@@ -1,4 +1,5 @@
 Rails.application.routes.draw do
+  resources :kanta
   resources :pictures
   resources :stories
 

lib/opal/rails/haml_filter.rb

@@ -0,0 +1,19 @@
+require "haml"
+require "haml/filters"
+require "haml/filters/base"
+
+module Haml
+  class Filters
+    class Opal < Base
+      def compile(node)
+        temple = [:multi]
+        temple << [:static, "<script type='text/javascript'>\n"]
+        temple << [:static, ::Opal.compile(node.value[:text]) ]
+        temple << [:static, "\n</script>"]
+        temple
+      end
+    end
+  end
+end
+
+Haml::Filters.registered[:opal] ||= Haml::Filters::Opal