actionview-svelte-handler 0.5.7 → 0.7.0

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

@@ -7,14 +7,12 @@
     <%= 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>
+<script type="module"><%= result.dig(:client).strip %>;
+new App({
+  target: document.getElementById("hydratee-<%= digest %>"),
+  props: JSON.parse('<%= locals.to_json %>'),
+  hydrate: true
+});
+</script>
   </template>
 </is-land>

data/lib/svelte/version.rb

@@ -1,3 +1,3 @@
 module Svelte
-  VERSION = "0.5.7"
+  VERSION = "0.7.0"
 end

data/lib/svelte.rb

@@ -1,11 +1,12 @@
 require "active_support/core_ext"
-require "svelte/variabilization"
-require "svelte/railtie"
-require "svelte/errors"
-require "svelte/helpers"
-require "svelte/handler"
-require "svelte/version"
 require "active_support/isolated_execution_state"
+require "zeitwerk"
+
+loader = Zeitwerk::Loader.for_gem
+loader.ignore("#{__dir__}/generators")
+loader.ignore("#{__dir__}/actionview-svelte-handler.rb")
+
+loader.setup
 
 module Svelte
   include ActionView::Helpers::JavaScriptHelper
@@ -38,3 +39,5 @@ module Svelte
     nil
   end
 end
+
+loader.eager_load

data/lib/ts/builder.ts

@@ -1,10 +1,16 @@
 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'
+import { rollup } from 'rollup';
+import svelte from "rollup-plugin-svelte"
+import alias from '@rollup/plugin-alias';
+import commonjs from '@rollup/plugin-commonjs';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import virtual from '@rollup/plugin-virtual';
+import swc from '@rollup/plugin-swc';
+import path from "node:path"
 
 export interface BuildSuccess {
   client: string
@@ -40,19 +46,24 @@ class Builder {
   ssr: boolean
   workingDir: string
   preprocess: object
+  pathAliases?: object
+  root: string
 
   constructor (
     path: string,
+    root: string,
     props: object,
     locals: object,
     client: string | null,
     server: string | null,
     ssr: boolean,
     workingDir: string,
-    preprocess: object
+    preprocess: object,
+    pathAliases: object
   ) {
     this.path = path
-    this.props = readable(props)
+    this.root = root
+    this.props = readable(Object.assign(props, locals, props))
     this.locals = locals
     this.compiled = {
       client,
@@ -61,55 +72,82 @@ class Builder {
     this.ssr = ssr
     this.workingDir = workingDir
     this.preprocess = preprocess
+    this.pathAliases = pathAliases
   }
 
-  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,
+  async bundle (generate: 'ssr' | 'dom'): Promise<string> {
+    const bundle = (await (await rollup({
+      input: 'entry',
+      output: {
+        format: "esm",
+        sourcemap: true
+      },
+      watch: {
+        skipWrite: true
+      },
       plugins: [
-        // @ts-expect-error
-        sveltePlugin({
+        // @ts-expect-error see https://github.com/rollup/plugins/issues/1662
+        virtual({
+          entry: `import App from '${this.path}'; export default App`
+        }),
+        // @ts-expect-error see https://github.com/rollup/plugins/issues/1662
+        svelte({
           compilerOptions: {
             generate,
             css: 'injected',
             hydratable: true,
-            sveltePath
           },
+          emitCss: false,
           preprocess: sveltePreprocess(this.preprocess),
-          filterWarnings: (warning: Warning) => {
+          onwarn: (warning: Warning, handler: Function) => {
             if (
               warning.code === 'missing-declaration' &&
               warning.message.includes("'props'")
-            ) {
-              return false
-            }
-            return true
+            ) return
+
+            throw new Error(warning.message);
+          }
+        }),
+        // @ts-expect-error see https://github.com/rollup/plugins/issues/1662
+        alias({
+          entries: Object.entries(this.pathAliases || {}).map((k, v) => { return new Object({ find: k, replacement: v }) })
+        }),
+        // @ts-expect-error see https://github.com/rollup/plugins/issues/1662
+        commonjs(),
+        nodeResolve({
+          browser: true,
+          exportConditions: ['svelte'],
+          extensions: ['.svelte']
+        }),
+        // @ts-expect-error see https://github.com/rollup/plugins/issues/1662
+        swc({
+          swc: {
+            jsc: {
+              target: "es6",
+              minify: {
+                format: {
+                  comments: 'all'
+                },
+              }
+            },
+            minify: true,
+            sourceMaps: true,
+            inlineSourcesContent: true
           }
         })
       ]
+    })).generate({ format: "esm", sourcemap: true })).output
+    
+    bundle[0].map!.sources = bundle[0].map!.sources.map((el) => {
+      return path.relative(this.path, this.root) + "/" + path.relative(this.root, el)
     })
-
-    // @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
+    
+    return `//# sourceMappingURL=${bundle[0].map!.toUrl()}\n//# sourceURL=${path.relative(this.path, this.root) + "/" +  path.relative(this.root, this.path) }\n${bundle[0].code}`.trim()
   }
 
   async client (): Promise<string> {
     return (
-      this.compiled?.client || (this.standardizeClient(await this.bundle('dom', 'https://esm.sh/svelte'))) // eslint-disable-line
+      this.compiled?.client || this.standardizeClient(await this.bundle("dom")) // eslint-disable-line
     )
   }
 
@@ -135,7 +173,7 @@ class Builder {
         return false
       }
     })
-
+    
     return recast.print(ast).code
   }
 

data/lib/ts/types/builder.d.ts

@@ -29,8 +29,10 @@ declare class Builder {
     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);
-    bundle(generate: 'ssr' | 'dom', sveltePath?: string): Promise<string>;
+    pathAliases?: object;
+    root: string;
+    constructor(path: string, root: string, props: object, locals: object, client: string | null, server: string | null, ssr: boolean, workingDir: string, preprocess: object, pathAliases: object);
+    bundle(generate: 'ssr' | 'dom'): Promise<string>;
     client(): Promise<string>;
     standardizeClient(code: string): string;
     server(): Promise<{