extract livedemo script from ruby2js.rb

rubys · rubys · commit afd73acb3096 · 2021-02-16T09:57:37.000-05:00
diff --git a/demo/Rakefile b/demo/Rakefile
@@ -31,14 +31,19 @@ file "#{demo}/editor.js" => ['../demo/editor.js'] do
   Dir.chdir(docs) {sh "yarn editor"}
 end
 
-file "#{demo}/livedemo.js" => [*opal_files, *source_files, 'filters.opal'] do
+file "#{demo}/livedemo.js" => 'livedemo.js.rb' do
+  Dir.chdir(docs) {system "rake #{demo}/index.erb"}
+end
+
+file "#{demo}/ruby2js.js" => [*opal_files, *source_files, 'filters.opal'] do
   mkdir demo unless Dir.exist? demo
-  sh "opal --compile -g regexp_parser -I ../lib -I . livedemo.opal > #{docs}/src/demo/livedemo.js"
+  sh "opal --compile -g regexp_parser -I ../lib -I . ruby2js.opal > #{docs}/src/demo/ruby2js.js"
 end
 
 task :default => [
   "#{demo}/index.erb",
   "#{demo}/editor.js",
-  "#{demo}/livedemo.js"
+  "#{demo}/livedemo.js",
+  "#{demo}/ruby2js.js"
 ]
 
diff --git a/demo/livedemo.js.rb b/demo/livedemo.js.rb
@@ -0,0 +1,103 @@
+async {
+  # determine base URL and what filters and options are selected
+  base = window.location.pathname
+  filters = new Set()
+  options = {}
+  window.location.search.scan(/(\w+)(=([^&]*))?/).each do |match|
+    options[match[0]] = match[2] && decodeURIComponent(match[2])
+  end
+  if options.filter
+    options.filter.split(',').each {|option| filters.add(option)}
+  end
+
+  updateLocation = -> (force = false) do
+    location = URL.new(base, window.location)
+
+    options.filter = Array(filters).join(',')
+    options.delete(:filter) if filters.empty?
+
+    search = []
+    options.each_pair do |key, value|
+      search << (value == undefined ? key : "#{key}=#{encodeURIComponent(value)}")
+    end
+
+    location.search = search.empty? ? "" : "#{search.join('&')}"
+    return if !force && window.location.to_s == location.to_s
+
+    history.replaceState({}, null, location.to_s)
+
+    return if document.getElementById('js').style.display == 'none'
+
+    # update JavaScript
+    event = MouseEvent.new('click',
+      bubbles: true, cancelable: true, view: window)
+    document.querySelector('input[type=submit]').dispatchEvent(event)
+  end
+
+  optionDialog = document.getElementById('option')
+  optionInput = optionDialog.querySelector('sl-input')
+  optionClose = optionDialog.querySelector('sl-button[slot="footer"]')
+
+  optionDialog.addEventListener 'sl-initial-focus' do
+    event.preventDefault()
+    optionInput.setFocus(preventScroll: true)
+  end
+
+  optionClose.addEventListener 'click' do
+    options[optionDialog.label] = optionInput.value
+    optionDialog.hide()
+  end
+
+  document.getElementById('ast').addEventListener 'sl-change' do
+    updateLocation(true)
+  end
+
+  document.querySelectorAll('sl-dropdown').each do |dropdown|
+    menu = dropdown.querySelector('sl-menu')
+    dropdown.addEventListener 'sl-show', -> () {
+      menu.style.display = 'block'
+    }, once: true
+
+    menu.addEventListener 'sl-select' do |event|
+      item = event.detail.item
+
+      if dropdown.id == 'options'
+	item.checked = !item.checked
+	name = item.textContent
+
+	if options.include? name
+	  options.delete(name)
+	elsif item.dataset.args
+	  event.target.parentNode.hide()
+	  dialog = document.getElementById('option')
+	  dialog.label = name
+	  dialog.querySelector('sl-input').value = options[name] || ''
+	  dialog.show()
+	else
+	  options[name] = undefined
+	end
+
+      elsif dropdown.id == 'filters'
+
+	item.checked = !item.checked
+	name = item.textContent
+        filters.add(name) unless filters.delete!(name)
+
+      elsif dropdown.id == 'eslevel'
+
+	button = event.target.parentNode.querySelector('sl-button')
+	value = item.textContent
+        options['es' + value] = undefined if value != "default"
+	event.target.querySelectorAll('sl-menu-item').each do |option|
+	  option.checked = (option == item)
+	  next if option.value == 'default' || option.value == value
+	  options.delete('es' + option.value)
+	end
+	button.textContent = value
+
+      end
+
+      updateLocation()
+    end
+  end
+}[]
diff --git a/demo/ruby2js.opal b/demo/ruby2js.opal
diff --git a/docs/Rakefile b/docs/Rakefile
@@ -41,9 +41,11 @@ file "#{demo}/index.erb" => '../demo/ruby2js.rb' do
     erb = [
       "---\nlayout: default\n---\n",
       livedoc[/<style[ >].*?<\/style>/m],
-      livedoc[/<body.*?>(.*?)<\/body>/m, 1],
+      livedoc[/<body.*?>(.*?)<\/body>/m, 1].
+        sub(/<script.*?<\/script>/m, ''),
+      '<script src="/demo/livedemo.js" asyn></script>',
       '<script src="/demo/editor.js" async></script>',
-      '<script src="/demo/livedemo.js" defer></script>'
+      '<script src="/demo/ruby2js.js" defer></script>'
     ].join("\n")
 
     IO.write("#{demo}/index.erb", erb)
@@ -54,10 +56,14 @@ file "#{demo}/editor.js" => ['../demo/editor.js'] do
   sh "yarn editor"
 end
 
-file "#{demo}/livedemo.js" => [*opal_files, *source_files, '../demo/filters.opal'] do
+file "#{demo}/livedemo.js" => ['../demo/livedemo.js.rb'] do
+  sh "#{RbConfig.ruby} ../demo/ruby2js.rb --filter functions --es2020 ../demo/livedemo.js.rb > #{demo}/livedemo.js"
+end
+
+file "#{demo}/ruby2js.js" => [*opal_files, *source_files, '../demo/filters.opal'] do
   mkdir demo unless Dir.exist? demo
-  opal = "opal --compile -g regexp_parser -I ../lib -I . livedemo.opal"
-  target = "#{docs}/src/demo/livedemo.js"
+  opal = "opal --compile -g regexp_parser -I ../lib -I . ruby2js.opal"
+  target = "#{docs}/src/demo/ruby2js.js"
   terser = "#{__dir__}/node_modules/.bin/terser"
   Dir.chdir '../demo' do
     if File.exist? terser
@@ -75,6 +81,7 @@ end
 task :default => [
   "#{demo}/index.erb",
   "#{demo}/editor.js",
-  "#{demo}/livedemo.js"
+  "#{demo}/livedemo.js",
+  "#{demo}/ruby2js.js"
 ]
 
