actionview-svelte-handler 0.3.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,37 +1,65 @@
-require 'erb'
+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) 
-      return <<-RUBY
-        locals = j(local_assigns.to_json).presence
-        props = j(Svelte.props.to_json).presence
-        source = j('#{source}')
-        ssr = local_assigns.dig(:svelte, :ssr) != nil ? local_assigns.dig(:svelte, :ssr) : Svelte.ssr
-        
-        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({
-          source: source,
+    def call(template, source)
+      digest = Digest::SHA256.base64digest(source)
+
+      <<-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,
-          ssr: ssr
+          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
         
+        assembler.rewind
+
         result = JSON.parse(`NODE_NO_WARNINGS=1 node --experimental-vm-modules \#{assembler.path}`).deep_symbolize_keys
-          
-        island = ERB.new(File.read("#{Svelte.gem_dir}/lib/svelte/templates/island.html.erb")).result_with_hash({ result: result, locals: local_assigns })
+                        
+        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
+        assembler&.close
+        assembler&.unlink
         
-        return island
+        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
   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,13 +3,15 @@ require "svelte/helpers"
 
 module Svelte
   class Railtie < ::Rails::Railtie
-    initializer "svelte" 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        
+        ActionView::Base.send :include, Svelte::Helpers
       end
-      
-      `npm install #{Svelte.gem_dir} --install-links --save=false`
-    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.3.0"
+  VERSION = "0.4.1"
 end

data/lib/svelte.rb

@@ -1,17 +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

data/lib/ts/builder.ts

@@ -0,0 +1,174 @@
+import { readable, Stores } 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 type { Warning } from 'svelte/types/compiler/interfaces'
+import * as recast from 'recast'
+
+export interface BuildSuccess {
+  client: string
+  server: {
+    html: string
+    css: string
+  } | null
+  compiled: {
+    client: string
+    server: string | undefined
+  }
+}
+
+export interface BuildError {
+  error: any
+}
+
+export type BuildResult = BuildSuccess | BuildError
+
+/**
+ * Builder is a class that builds, compiles and bundles Svelte components into a nice object for the template handler
+ */
+class Builder {
+  path: string
+  props: Stores
+  locals: object
+  compiled: {
+    client: string | null
+    server: string | null
+  }
+
+  ssr: boolean
+  workingDir: string
+  preprocess: object
+
+  constructor (
+    path: string,
+    props: object,
+    locals: object,
+    client: string | null,
+    server: string | null,
+    ssr: boolean,
+    workingDir: string,
+    preprocess: object
+  ) {
+    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: 'ssr' | 'dom', sveltePath = 'svelte'): Promise<string> {
+    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: Warning) => {
+            if (
+              warning.code === 'missing-declaration' &&
+              warning.message.includes("'props'")
+            ) {
+              return false
+            }
+            return true
+          }
+        })
+      ]
+    })
+
+    // @ts-expect-error
+    const throwables = [].concat(bundle.errors, bundle.warnings)
+
+    if (throwables.length > 0) {
+      throw throwables[0] // eslint-disable-line @typescript-eslint/no-throw-literal
+    }
+
+    return bundle.outputFiles[0].text
+  }
+
+  async client (): Promise<string> {
+    return (
+      this.compiled?.client || (this.standardizeClient(await this.bundle('dom', 'https://esm.sh/svelte'))) // eslint-disable-line
+    )
+  }
+
+  standardizeClient (code: string): string {
+    const ast = recast.parse(code)
+
+    let name: string | undefined
+
+    recast.visit(ast, {
+      visitExportNamedDeclaration: (path) => {
+        const stagingName: any = 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 (): Promise<{ output: string, html: string, css: string }> {
+    const output = this.compiled?.server || (await this.bundle('ssr')) // eslint-disable-line
+
+    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 (): Promise<BuildResult> {
+    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 }
+    }
+  }
+}
+
+export default Builder