actionview-svelte-handler 0.2.0 → 0.4.1

data/lib/svelte/errors.rb

@@ -0,0 +1,151 @@
+require "active_support/syntax_error_proxy"
+require "action_view/template/error"
+module Svelte
+  class CompilerError < ActiveSupport::SyntaxErrorProxy # steep:ignore UnknownConstant
+    attr_accessor :location, :suggestion, :template
+
+    def initialize(message, location)
+      @location = location
+      @sugggestion = @location.dig(:suggestion) || ""
+      # steep:ignore:start
+      super(message) # : self
+      # steep:ignore:end
+    end
+
+    def message
+      to_s
+    end
+
+    def backtrace
+      if suggestion
+        ["#{Rails.root.join location[:file]}:#{location[:line]}:#{message}, #{suggestion}"] + caller
+      else
+        ["#{Rails.root.join location[:file]}:#{location[:line]}:#{message}"] + caller
+      end
+    end
+
+    def cause
+      nil
+    end
+
+    def bindings
+      [template.send(:binding)]
+    end
+
+    def backtrace_locations
+      traces = backtrace.map { |trace|
+        file, line = trace.match(/^(.+?):(\d+).*$/, &:captures) || trace
+        ActiveSupport::SyntaxErrorProxy::BacktraceLocation.new(file, line.to_i, trace) # steep:ignore UnknownConstant
+      }
+
+      traces.map { |loc| ActiveSupport::SyntaxErrorProxy::BacktraceLocationProxy.new(loc, self) } # steep:ignore UnknownConstant
+    end
+
+    def annotated_source_code
+      location[:lineText].split("\n").map.with_index(1) { |line, index|
+        indentation = " " * 4
+        "#{index}:#{indentation}#{line}"
+      }
+    end
+  end
+
+  class TemplateError < StandardError
+    attr_reader :cause, :template
+
+    SOURCE_CODE_RADIUS = 3
+
+    def initialize(template, error)
+      raise("Did not provide cause error") unless error
+      @cause = error
+
+      raise("Did not provide template") unless template
+      @template, @sub_templates = template, nil
+
+      raise("Cause error is nil for TemplateError") unless @cause
+      @cause.template = template
+
+      # steep:ignore:start
+      super(@cause.message) # : self
+      # steep:ignore:end
+    end
+
+    def message
+      @cause.message
+    end
+
+    def annotated_source_code
+      @cause.annotated_source_code
+    end
+
+    # Following is copypasta-ed from ActionView::Template::Error
+    def backtrace
+      @cause.backtrace
+    end
+
+    def backtrace_locations
+      @cause.backtrace_locations
+    end
+
+    def file_name
+      @template.identifier
+    end
+
+    def sub_template_message
+      if @sub_templates
+        "Trace of template inclusion: " +
+          @sub_templates.collect(&:inspect).join(", ")
+      else
+        ""
+      end
+    end
+
+    def source_extract(indentation = 0)
+      return [] unless (num = line_number)
+      num = num.to_i
+
+      source_code = @template.encode!.split("\n")
+
+      start_on_line = [num - SOURCE_CODE_RADIUS - 1, 0].max
+      end_on_line = [num + SOURCE_CODE_RADIUS - 1, source_code.length].min
+
+      indent = end_on_line.to_s.size + indentation
+      return [] unless (source_code = source_code[start_on_line..end_on_line])
+
+      formatted_code_for(source_code, start_on_line, indent)
+    end
+
+    def sub_template_of(template_path)
+      @sub_templates ||= []
+      @sub_templates << template_path
+    end
+
+    def line_number
+      @line_number ||=
+        if file_name
+          regexp = /#{Regexp.escape File.basename(file_name)}:(\d+)/
+          $1 if message =~ regexp || backtrace.find { |line| line =~ regexp }
+        end
+    end
+
+    private
+
+    def source_location
+      if line_number
+        "on line ##{line_number} of "
+      else
+        "in "
+      end + file_name
+    end
+
+    def formatted_code_for(source_code, line_counter, indent)
+      raise("line counter is nil") if line_counter.nil?
+      indent_template = "%#{indent}s: %s"
+      source_code.map do |line|
+        line_counter += 1
+        indent_template % [line_counter, line]
+      end
+    end
+  end
+end
+
+# {:id=>"", :location=>{:column=>13, :file=>"demo/e.html.svelte", :length=>3, :line=>7, :lineText=>"<h1>{hola}, {nam}</h1>", :namespace=>"file", :suggestion=>""}, :notes=>[], :pluginName=>"esbuild-svelte", :text=>"'nam' is not defined"}

data/lib/svelte/handler.rb

@@ -1,53 +1,65 @@
+require "erb"
+require "svelte/helpers"
+
 module Svelte
+  DISCARD_PROPS = %w[lookup_context view_renderer current_template output_buffer view_flow rendered_format marked_for_same_origin_verification virtual_path]
+  ISLAND_ATTRS = {
+    "on:visible": "",
+    "on:idle": ""
+  }
+
   class Handler
-    include ActionView::Helpers::JavaScriptHelper
     def call(template, source)
-      file = Tempfile.new
-      src = Tempfile.new
-      src.write source.b
-      src.rewind
-
-      file.write <<-JS
-        import { compile } from 'svelte/compiler';
+      digest = Digest::SHA256.base64digest(source)
 
-        const src = await Bun.file("#{src.path}").text()
-        const result = compile(src, {generate: "dom", name: "Component", css: "injected", sveltePath: "https://esm.sh/svelte"})
+      <<-RUBY
+        template = ObjectSpace._id2ref(#{template.object_id})
+        
+        Svelte.props.merge!(
+          instance_values.reject { |k,v| 
+            k.start_with?("_") || Svelte::DISCARD_PROPS.include?(k) 
+          }
+        ) { |key,old,new| old }
+        
+        Svelte.props.deep_symbolize_keys!
+        
+        if local_assigns.dig(:svelte) == nil
+          local_assigns[:svelte] = {}
+        end  
+        
+        assembler = nil
+        
+        assembler = Tempfile.new(['assembler', ".mjs"], '#{Svelte.gem_dir}/tmp')
+          
+        assembler.write(ERB.new(File.read('#{Svelte.gem_dir}/lib/svelte/templates/assembler.js.erb')).result_with_hash({
+          path: '#{Rails.root.join template.identifier}',
+          locals: local_assigns,
+          compiled_client: j(Rails.cache.read('svelte/template/client' + '#{digest}')),
+          compiled_server: j(Rails.cache.read('svelte/template/server' + '#{digest}')),
+          ssr: Svelte.precedence(local_assigns.dig(:svelte, :ssr), template.variant.nil? ? nil : (template.variant == "server"), Svelte.ssr)
+        }))
+        
+        assembler.rewind
 
-        process.stdout.write(JSON.stringify(result))
-      JS
-
-      file.rewind
-
-      compiled = JSON.parse(%x(bun run #{file.path})).deep_symbolize_keys
-            
-      return <<-RUBY
-        Svelte::Handler.generate_island(#{(compiled.dig(:js, :code) || "").dump}, local_assigns.to_json.presence)
+        result = JSON.parse(`NODE_NO_WARNINGS=1 node --experimental-vm-modules \#{assembler.path}`).deep_symbolize_keys
+                        
+        if result[:error]
+          e = Svelte::CompilerError.new(result.dig(:error, :text), result.dig(:error, :location))
+          raise Svelte::TemplateError.new(template, e)
+        end
+        
+        assembler&.close
+        assembler&.unlink
+        
+        Rails.cache.write("svelte/template/client/" + '#{digest}', result[:compiled][:client], expires_in: 14.days)
+        Rails.cache.write("svelte/template/server/" + '#{digest}', result[:compiled][:server], expires_in: 14.days)
+                
+        ERB.new(File.read("#{Svelte.gem_dir}/lib/svelte/templates/island.html.erb")).result_with_hash({ result:, locals: local_assigns, digest: "#{digest}"})
       RUBY
     end
 
     def self.call(template, source)
       new.call(template, source)
     end
-    
-    def self.generate_island(js, props)
-      return <<-HTML
-        <is-land on:visible on:idle>
-          <template data-island>
-            <div id="svelte-app-client">
-            </div>
-            
-            <script type="module">
-              #{js}
-              
-              new Component({ 
-                target: document.getElementById("svelte-app-client"),
-                props: JSON.parse(#{props.to_json.presence || "{}"})
-              });
-            </script>
-            
-          </template>
-        </is-land>
-      HTML
-    end
   end
-end
+end

data/lib/svelte/helpers.rb

@@ -1,5 +1,5 @@
 module Svelte
-  module Helpers 
+  module Helpers
     include ActionView::Helpers::JavaScriptHelper
     def svelte_tags
       js = <<-JS
@@ -9,8 +9,18 @@ module Svelte
 
         window.props = readable(JSON.parse("#{j(Svelte.props.to_json)}"))
       JS
-      
+
       tag.script(js.html_safe, type: "module")
     end
+
+    delegate :destructure_attrs, to: :class
+
+    def self.destructure_attrs(hash)
+      string = ""
+      hash.each do |k, v|
+        string += "#{k}='#{j v}' "
+      end
+      string
+    end
   end
-end
+end

data/lib/svelte/js/.DO_NOT_MODIFY.md

@@ -0,0 +1,2 @@
+> [!CAUTION]
+> This folder is intended to be built from TypeScript files with `npm run build`

data/lib/svelte/js/builder.js

@@ -0,0 +1,122 @@
+/* 
+  IF YOU ARE READING THIS, YOU ARE VIEWING THE BUILT JS FROM THE SOURCE TYPESCRIPT AT ../ts/ .
+  
+  DO NOT MODIFY.
+*/
+
+import { readable } from "svelte/store";
+import { importFromStringSync } from "module-from-string";
+import * as esbuild from "esbuild";
+import sveltePlugin from "esbuild-svelte";
+import { sveltePreprocess } from "svelte-preprocess";
+import * as recast from "recast";
+class Builder {
+  path;
+  props;
+  locals;
+  compiled;
+  ssr;
+  workingDir;
+  preprocess;
+  constructor(path, props, locals, client, server, ssr, workingDir, preprocess) {
+    this.path = path;
+    this.props = readable(props);
+    this.locals = locals;
+    this.compiled = {
+      client,
+      server
+    };
+    this.ssr = ssr;
+    this.workingDir = workingDir;
+    this.preprocess = preprocess;
+  }
+  async bundle(generate, sveltePath = "svelte") {
+    const bundle = await esbuild.build({
+      entryPoints: [this.path],
+      mainFields: ["svelte", "browser", "module", "main"],
+      conditions: ["svelte", "browser"],
+      absWorkingDir: this.workingDir,
+      write: false,
+      outfile: "component.js",
+      bundle: true,
+      format: "esm",
+      metafile: true,
+      plugins: [
+        // @ts-expect-error
+        sveltePlugin({
+          compilerOptions: {
+            generate,
+            css: "injected",
+            hydratable: true,
+            sveltePath
+          },
+          preprocess: sveltePreprocess(this.preprocess),
+          filterWarnings: (warning) => {
+            if (warning.code === "missing-declaration" && warning.message.includes("'props'")) {
+              return false;
+            }
+            return true;
+          }
+        })
+      ]
+    });
+    const throwables = [].concat(bundle.errors, bundle.warnings);
+    if (throwables.length > 0) {
+      throw throwables[0];
+    }
+    return bundle.outputFiles[0].text;
+  }
+  async client() {
+    return this.compiled?.client || this.standardizeClient(await this.bundle("dom", "https://esm.sh/svelte"));
+  }
+  standardizeClient(code) {
+    const ast = recast.parse(code);
+    let name;
+    recast.visit(ast, {
+      visitExportNamedDeclaration: (path) => {
+        const stagingName = path.node?.specifiers?.[0].local?.name;
+        name = typeof stagingName !== "string" ? "" : stagingName;
+        path.prune();
+        return false;
+      }
+    });
+    recast.visit(ast, {
+      visitIdentifier: (path) => {
+        if (path.node.name === name) {
+          path.node.name = "App";
+        }
+        return false;
+      }
+    });
+    return recast.print(ast).code;
+  }
+  async server() {
+    const output = this.compiled?.server || await this.bundle("ssr");
+    const Component = importFromStringSync(output, {
+      globals: { props: this.props }
+    }).default;
+    const { html, css } = await Component.render(this.locals);
+    return { output, html, css: css.code };
+  }
+  async build() {
+    try {
+      const serv = this.ssr ? await this.server() : null;
+      const cli = await this.client();
+      const comp = {
+        client: cli,
+        server: serv?.output
+      };
+      return {
+        client: cli,
+        server: serv,
+        compiled: comp
+      };
+    } catch (e) {
+      return { error: e };
+    }
+  }
+}
+var builder_default = Builder;
+export {
+  builder_default as default
+};

data/lib/svelte/railtie.rb

@@ -3,11 +3,15 @@ require "svelte/helpers"
 
 module Svelte
   class Railtie < ::Rails::Railtie
-    initializer "svelte.register_actionview" do
+    initializer "svelte" do |app|
       ActiveSupport.on_load :action_view do
         ActionView::Template.register_template_handler :svelte, Svelte::Handler
         ActionView::Base.send :include, Svelte::Helpers
       end
+
+      ActionController::Base.class_eval <<-RUBY, __FILE__, __LINE__ + 1
+        include Svelte::Variabilization
+      RUBY
     end
   end
 end

data/lib/svelte/templates/assembler.js.erb

@@ -0,0 +1,16 @@
+import Builder from "<%= "#{Svelte.gem_dir}/lib/svelte/js/builder.js" %>";
+
+const bob = new Builder(
+  '<%= path %>', 
+  JSON.parse('<%= Svelte.props.to_json || "{}" %>'), 
+  JSON.parse('<%= locals.to_json || "{}" %>'),
+  '<%= compiled_client || "" %>',
+  '<%= compiled_server || "" %>',
+  <%= ssr %>,
+  '<%= Rails.root %>',
+  JSON.parse('<%= Svelte.preprocess.to_json || "{}" %>')
+)
+
+const built = await bob.build()
+
+process.stdout.write(JSON.stringify(built))

data/lib/svelte/templates/island.html.erb

@@ -0,0 +1,20 @@
+<is-land <%= Svelte::Helpers.destructure_attrs((locals.dig(:svelte, :island) rescue nil) || Svelte::ISLAND_ATTRS) %>>
+  <div id="hydratee-<%= digest %>">
+    <%= result.dig(:server, :html) %>
+  </div>
+  
+  <style>
+    <%= result.dig(:server, :css) %>
+  </style>
+  <template data-island>
+    <script type="module">
+      <%= result.dig(:client) %>
+            
+      new App({
+        target: document.getElementById("hydratee-<%= digest %>"),
+        props: JSON.parse('<%= locals.to_json %>'),
+        hydrate: true
+      });
+    </script>
+  </template>
+</is-land>

data/lib/svelte/variabilization.rb

@@ -0,0 +1,11 @@
+module Svelte
+  module Variabilization
+    extend ActiveSupport::Concern
+
+    included do
+      before_action do
+        request.variant = Array(request.variant).concat([:client, :server])
+      end
+    end
+  end
+end

data/lib/svelte/version.rb

@@ -1,3 +1,3 @@
 module Svelte
-  VERSION = "0.2.0"
+  VERSION = "0.4.1"
 end

data/lib/svelte.rb

@@ -1,11 +1,40 @@
+require "active_support/core_ext"
+require "svelte/variabilization"
 require "svelte/railtie"
-require "svelte/handler"
+require "svelte/errors"
 require "svelte/helpers"
+require "svelte/handler"
 require "svelte/version"
 require "active_support/isolated_execution_state"
 
 module Svelte
+  include ActionView::Helpers::JavaScriptHelper
+
+  def self.configure
+    yield(self)
+  end
+
+  # @dynamic self.ssr, self.aliases, self.preprocess
+  # @dynamic self.ssr=, self.aliases=, self.preprocess=
+  mattr_accessor :ssr, default: true
+  mattr_accessor :aliases, default: {}
+  mattr_accessor :preprocess, default: {}
+
   def self.props
-    ActiveSupport::IsolatedExecutionState[:svelte_props] ||= {}
+    ActiveSupport::IsolatedExecutionState[:svelte_props] ||= {} # steep:ignore UnknownConstant
+  end
+
+  def self.gem_dir
+    Gem::Specification.find_by_name("actionview-svelte-handler").gem_dir
+  end
+
+  def self.precedence(*args)
+    args.each do |v|
+      if !v.nil?
+        return v
+      end
+    end
+
+    nil
   end
 end

data/lib/tasks/svelte_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :svelte do
+#   # Task goes here
+# end