svelte-on-rails 0.0.41 → 0.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +18 -58
  3. data/lib/generators/svelte_on_rails/install/install_generator.rb +25 -18
  4. data/lib/svelte-on-rails.rb +0 -1
  5. data/lib/svelte_on_rails/configuration.rb +42 -5
  6. data/lib/svelte_on_rails/installer/hello_world.rb +5 -1
  7. data/lib/svelte_on_rails/installer/npm.rb +1 -1
  8. data/lib/svelte_on_rails/lib/development_utils.rb +24 -11
  9. data/lib/svelte_on_rails/lib/utils.rb +37 -1
  10. data/lib/svelte_on_rails/renderer/renderer.rb +6 -1
  11. data/lib/svelte_on_rails/renderer/utils.js +2 -1
  12. data/lib/svelte_on_rails/view_helpers.rb +1 -3
  13. data/lib/tasks/svelte_on_rails_tasks.rake +25 -31
  14. data/templates/config_base/app/frontend/ssr/ssr.js +4 -0
  15. data/templates/config_base/vite-ssr.config.ts +133 -0
  16. data/templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-england.png +0 -0
  17. data/templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-face-smile-wink.svg +1 -0
  18. data/templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-switzerland.jpg +0 -0
  19. data/templates/rails_vite_hello_world/app/frontend/javascript/components/JavascriptImport.svelte +7 -0
  20. data/templates/rails_vite_hello_world/app/frontend/javascript/components/JpgImport.svelte +7 -0
  21. data/templates/rails_vite_hello_world/app/frontend/javascript/components/ParentWithChild.svelte +6 -0
  22. data/templates/rails_vite_hello_world/app/frontend/javascript/components/PngImport.svelte +7 -0
  23. data/templates/rails_vite_hello_world/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte +2 -6
  24. data/templates/rails_vite_hello_world/app/frontend/javascript/components/SvgRawImport.svelte +7 -0
  25. data/templates/rails_vite_hello_world/app/frontend/javascript/components/sub/NestedComponent.svelte +1 -1
  26. data/templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascript.js +4 -1
  27. data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_nav.html.erb +11 -0
  28. data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_styles.html.erb +16 -0
  29. data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/backend_frontend_rendered.html.erb +37 -0
  30. data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/index.html.erb +8 -4
  31. data/templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/ssr_auto_rendered.html.erb +26 -0
  32. metadata +17 -10
  33. data/lib/svelte_on_rails/compiler/compile.js +0 -123
  34. data/lib/svelte_on_rails/compiler/compiler.rb +0 -120
  35. data/lib/svelte_on_rails/compiler/customPlugins.js +0 -60
  36. data/templates/rails_vite_hello_world/app/frontend/images/atom.svg +0 -1
  37. data/templates/rails_vite_hello_world/app/frontend/images/check-circle-green.png +0 -0
  38. data/templates/rails_vite_hello_world/app/frontend/images/svg.svg +0 -3
  39. data/templates/rails_vite_hello_world/app/frontend/javascript/components/Pug.svelte +0 -14
  40. /data/templates/{svelte_on_rails_vite_base → config_base}/app/frontend/initializers/svelte.js +0 -0
  41. /data/templates/{svelte_on_rails_vite_base → config_base}/config/svelte_on_rails.yml +0 -0
@@ -0,0 +1,133 @@
1
+ import { defineConfig } from 'vite';
2
+ import RubyPlugin from 'vite-plugin-ruby';
3
+ import { svelte } from '@sveltejs/vite-plugin-svelte';
4
+ import * as fs from 'fs';
5
+ import * as path from 'path';
6
+ import { Plugin } from 'vite';
7
+
8
+ function rewriteAssetPathsPlugin(): Plugin {
9
+ const manifestPath = path.resolve('public/vite/manifest.json');
10
+ let manifest: Record<string, { file: string }> | null = null;
11
+
12
+ // Load client-side manifest if it exists (production)
13
+ if (fs.existsSync(manifestPath)) {
14
+ manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'));
15
+ }
16
+
17
+ return {
18
+ name: 'rewrite-asset-paths',
19
+ enforce: 'pre',
20
+ transform(code, id) {
21
+ if (id.endsWith('.svelte')) {
22
+ if (manifest) {
23
+ // Production: Rewrite asset paths using client-side manifest
24
+ let transformedCode = code;
25
+ for (const [assetKey, assetData] of Object.entries(manifest)) {
26
+ // Match assets like /assets/image.jpg, /assets/script.js, /assets/style.css
27
+ const assetRegex = new RegExp(`/assets/${assetKey.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, 'g');
28
+ transformedCode = transformedCode.replace(assetRegex, `/vite/${assetData.file}`);
29
+ }
30
+ return transformedCode;
31
+ } else {
32
+ // Development: Fallback to /vite-dev/assets/ for all assets
33
+ return code.replace(/\/assets\//g, '/vite-dev/assets/');
34
+ }
35
+ }
36
+ return null;
37
+ },
38
+ };
39
+ }
40
+
41
+ // Function to recursively find all .svelte files
42
+ function findSvelteFiles(dir: string, baseDir: string = dir): Record<string, string> {
43
+ const entries: Record<string, string> = {};
44
+ const files = fs.readdirSync(dir, { withFileTypes: true });
45
+
46
+ for (const file of files) {
47
+ const fullPath = path.join(dir, file.name);
48
+ if (file.isDirectory()) {
49
+ // Recurse into subdirectories
50
+ Object.assign(entries, findSvelteFiles(fullPath, baseDir));
51
+ } else if (file.isFile() && file.name.endsWith('.svelte')) {
52
+ // Create entry for .svelte file
53
+ const relativePath = path.relative(baseDir, fullPath);
54
+ const name = relativePath.replace('.svelte', '').replace(/\//g, '-'); // e.g., components-MyComponent
55
+ entries[`svelte-${name}`] = fullPath;
56
+ }
57
+ }
58
+ return entries;
59
+ }
60
+
61
+ // Collect all .svelte files in app/frontend
62
+ const svelteComponents = findSvelteFiles(path.resolve('app/frontend'));
63
+
64
+ export default defineConfig(({ mode }) => {
65
+
66
+ const isProduction = (process.env.RAILS_ENV === 'development' || process.env.RAILS_ENV === 'test' ? false : true);
67
+
68
+ return {
69
+ base: isProduction ? '/vite/' : '/vite-dev/',
70
+ plugins: [
71
+ rewriteAssetPathsPlugin(),
72
+ {
73
+ ...RubyPlugin(),
74
+ apply(config, { command }) {
75
+ if (command === 'build') {
76
+ if (config.plugins) { // Add this check
77
+ config.plugins = config.plugins.filter((plugin) => {
78
+ return !!(plugin && typeof plugin === 'object' && 'name' in plugin && plugin.name !== 'vite-plugin-ruby:assets-manifest');
79
+ });
80
+ }
81
+ }
82
+ return true;
83
+ },
84
+ },
85
+ svelte({
86
+ include: ['app/frontend/**/*.svelte'],
87
+ compilerOptions: {
88
+ // hydratable: false,
89
+ },
90
+ }),
91
+ {
92
+ name: 'force-manifest',
93
+ configResolved(config) {
94
+ console.log('Resolved build.manifest:', config.build.manifest);
95
+ if (!config.build.manifest) {
96
+ config.build.manifest = 'manifest-ssr.json';
97
+ console.log('Forced build.manifest to manifest-ssr.json');
98
+ }
99
+ },
100
+ },
101
+ ],
102
+ build: {
103
+ ssr: true,
104
+ outDir: 'public/vite-ssr',
105
+ manifest: 'manifest.json',
106
+ rollupOptions: {
107
+ input: {
108
+ ...svelteComponents,
109
+ ssr: 'app/frontend/ssr/ssr.js',
110
+ },
111
+ output: {
112
+ format: 'es',
113
+ entryFileNames: 'assets/[name]-[hash].js',
114
+ chunkFileNames: 'assets/[name]-[hash].js',
115
+ assetFileNames: 'assets/[name]-[hash][extname]',
116
+ manualChunks(id) {
117
+ if (id.indexOf('.svelte') !== -1) {
118
+ const lastSegment = id.split('/').pop();
119
+ if (lastSegment) {
120
+ const componentName = lastSegment.replace('.svelte', '');
121
+ return `svelte-${componentName}`;
122
+ }
123
+ }
124
+ }
125
+ },
126
+ },
127
+ },
128
+ optimizeDeps: {
129
+ include: ['svelte'],
130
+ },
131
+ logLevel: 'info',
132
+ };
133
+ });
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM164.1 325.5C158.3 318.8 148.2 318.1 141.5 323.9C134.8 329.7 134.1 339.8 139.9 346.5C162.1 372.1 200.9 400 255.1 400C311.1 400 349.8 372.1 372.1 346.5C377.9 339.8 377.2 329.7 370.5 323.9C363.8 318.1 353.7 318.8 347.9 325.5C329.9 346.2 299.4 368 255.1 368C212.6 368 182 346.2 164.1 325.5H164.1zM176.4 176C158.7 176 144.4 190.3 144.4 208C144.4 225.7 158.7 240 176.4 240C194 240 208.4 225.7 208.4 208C208.4 190.3 194 176 176.4 176zM300.8 233.6C318.4 210.1 353.6 210.1 371.2 233.6C376.5 240.7 386.5 242.1 393.6 236.8C400.7 231.5 402.1 221.5 396.8 214.4C366.4 173.9 305.6 173.9 275.2 214.4C269.9 221.5 271.3 231.5 278.4 236.8C285.5 242.1 295.5 240.7 300.8 233.6z"/></svg>
@@ -0,0 +1,7 @@
1
+ <script>
2
+ export let title;
3
+ import {nestedJavascriptFunction} from "../nestedJavascript.js";
4
+ </script>
5
+
6
+ <p>{title}</p>
7
+ <p>{nestedJavascriptFunction()}</p>
@@ -0,0 +1,7 @@
1
+ <script>
2
+ export let title;
3
+ import jpg from '../../images/svelte-on-rails-hello-world-switzerland.jpg'
4
+ </script>
5
+
6
+ <p>{title}</p>
7
+ <img alt="Jpg not loaded!" src="{jpg}" />
@@ -0,0 +1,6 @@
1
+ <script>
2
+ import Nested from './sub/NestedComponent.svelte'
3
+ export let title
4
+ </script>
5
+ <p>{title}</p>
6
+ <Nested />
@@ -0,0 +1,7 @@
1
+ <script>
2
+ export let title;
3
+ import png from '../../images/svelte-on-rails-hello-world-england.png'
4
+ </script>
5
+
6
+ <p>{title}</p>
7
+ <img alt="Png not loaded!" src="{png}" />
@@ -1,7 +1,5 @@
1
1
  <script>
2
- import svgRaw from '../../images/svg.svg?raw'
3
- //import svg from '../../images/svg.svg'
4
- import png from '../../images/check-circle-green.png'
2
+ import jpg from '../../images/svelte-on-rails-hello-world-switzerland.jpg'
5
3
  import Nested from './sub/NestedComponent.svelte'
6
4
  import {nestedJavascriptFunction} from '../nestedJavascript.js'
7
5
  export let items
@@ -27,9 +25,7 @@
27
25
  </ul>
28
26
 
29
27
  <hr/>
30
- <span class="wrap-svg">{@html svgRaw}</span>
31
- <!-- <img alt="svg ERROR" src={svg} />-->
32
- <img alt="png ERROR" src={png} />
28
+ <img alt="png ERROR" src={jpg} />
33
29
 
34
30
  <hr/>
35
31
  <Nested />
@@ -0,0 +1,7 @@
1
+ <script>
2
+ export let title;
3
+ import svgRaw from '../../images/svelte-on-rails-hello-world-face-smile-wink.svg?raw'
4
+ </script>
5
+
6
+ <p>{title}</p>
7
+ {@html svgRaw}
@@ -1 +1 @@
1
- <p>Nested Svelte Component</p>
1
+ <p class="nested-component">Nested Svelte Component</p>
@@ -1,3 +1,6 @@
1
+
2
+
1
3
  export function nestedJavascriptFunction() {
2
- return 'nestedJavascript!';
4
+ const randomHex = Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, '0');
5
+ return `JS result: #${randomHex}`;
3
6
  }
@@ -0,0 +1,11 @@
1
+ <div class="nav">
2
+ <%= link_to 'Hello World', '/svelte_on_rails_hello_world/index' %>
3
+ |
4
+ <%= link_to 'Backend/Frontend Test', '/svelte_on_rails_hello_world/backend_frontend_rendered' %>
5
+ |
6
+ <%= link_to 'SSR-Auto rendered (default)', '/svelte_on_rails_hello_world/ssr_auto_rendered' %>
7
+ </div>
8
+
9
+ <% turbo_id = request.headers['X-Turbo-Request-ID'] %>
10
+ <p class="<%= (turbo_id.present? ? 'turbo-request' : 'initial-request') %>"><%= (turbo_id.blank? ? 'This is a initial request' : "Turbo-Request-ID: #{turbo_id}") %></p>
11
+ <p>Rails.environment: <%= Rails.env %></p>
@@ -0,0 +1,16 @@
1
+ <style>
2
+ p {
3
+ color: darkgray;
4
+ }
5
+ .turbo-request {
6
+ color: #359500;
7
+ }
8
+ .initial-request {
9
+ color: #8B0000;
10
+ font-weight: bold;
11
+ }
12
+ img, svg {
13
+ width: 32px;
14
+ height: 32px;
15
+ }
16
+ </style>
@@ -0,0 +1,37 @@
1
+ <%= render 'styles' %>
2
+ <style>
3
+ .svelte-component {
4
+ border: 1px solid lightgray;
5
+ padding: 10px;
6
+ margin: 10px;
7
+ width: 100px;
8
+ display: inline-block;
9
+ }
10
+ </style>
11
+
12
+ <%= render 'nav' %>
13
+
14
+
15
+ <h1>SSR / Client side rendering test</h1>
16
+ <p>On the always client side rendered components you will see a unpleasant «blink» on the initial request.</p>
17
+ <p>After rendering both, client and server side rendered components, must look similar for making sure that on ssr:
18
+ :auto (which is default)
19
+ no unpleasant «blink» is appearing.</p>
20
+ <hr>
21
+
22
+ <% components = ['SvgRawImport', 'JpgImport', 'PngImport', 'JavascriptImport', 'ParentWithChild'] %>
23
+
24
+ <h3>Always rendered server side</h3>
25
+ <div class="ssr-only">
26
+ <% components.each do |component| %>
27
+ <%= svelte_component(component, ssr: true, hydrate: false, title: component) %>
28
+ <% end %>
29
+ </div>
30
+
31
+ <hr>
32
+ <h3>Always rendered client side</h3>
33
+ <div class="client-only">
34
+ <% components.each do |component| %>
35
+ <%= svelte_component(component, ssr: false, hydrate: true, title: component) %>
36
+ <% end %>
37
+ </div>
@@ -1,5 +1,9 @@
1
- <p>Example view</p>
1
+ <%= render 'styles' %>
2
2
 
3
- <%= svelte_component "SvelteOnRailsHelloWorld", items: ['attributes', 'are', 'parsed'] %>
4
- <%= svelte_component "Pug", ssr: true, notice: "Pug is rendered server-side" %>
5
- <%= svelte_component "Pug", ssr: false, notice: "Pug is rendered client-side" %>
3
+
4
+ <%= render 'nav' %>
5
+
6
+
7
+ <h1>Svelte is here</h1>
8
+
9
+ <%= svelte_component "SvelteOnRailsHelloWorld", items: ['attributes', 'are', 'parsed'] %>
@@ -0,0 +1,26 @@
1
+ <%= render 'styles' %>
2
+ <style>
3
+ .svelte-component {
4
+ border: 1px solid lightgray;
5
+ padding: 10px;
6
+ margin: 10px;
7
+ width: 100px;
8
+ display: inline-block;
9
+ }
10
+ </style>
11
+
12
+ <%= render 'nav' %>
13
+
14
+
15
+ <h1>ssr: :auto (default)</h1>
16
+
17
+
18
+ <% components = ['SvgRawImport', 'JpgImport', 'PngImport', 'JavascriptImport', 'ParentWithChild'] %>
19
+
20
+ <h3>Rendered server side only on initial request</h3>
21
+ <div class="ssr-auto">
22
+ <% components.each do |component| %>
23
+ <%= svelte_component(component, title: component) %>
24
+ <% end %>
25
+ </div>
26
+
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: svelte-on-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.41
4
+ version: 0.0.43
5
5
  platform: ruby
6
6
  authors:
7
7
  - Christian Sedlmair
@@ -31,9 +31,6 @@ files:
31
31
  - README.md
32
32
  - lib/generators/svelte_on_rails/install/install_generator.rb
33
33
  - lib/svelte-on-rails.rb
34
- - lib/svelte_on_rails/compiler/compile.js
35
- - lib/svelte_on_rails/compiler/compiler.rb
36
- - lib/svelte_on_rails/compiler/customPlugins.js
37
34
  - lib/svelte_on_rails/configuration.rb
38
35
  - lib/svelte_on_rails/installer/gem_utils.rb
39
36
  - lib/svelte_on_rails/installer/haml.rb
@@ -52,18 +49,28 @@ files:
52
49
  - lib/svelte_on_rails/renderer/utils.js
53
50
  - lib/svelte_on_rails/view_helpers.rb
54
51
  - lib/tasks/svelte_on_rails_tasks.rake
52
+ - templates/config_base/app/frontend/initializers/svelte.js
53
+ - templates/config_base/app/frontend/ssr/ssr.js
54
+ - templates/config_base/config/svelte_on_rails.yml
55
+ - templates/config_base/vite-ssr.config.ts
55
56
  - templates/rails_vite_hello_world/app/controllers/svelte_on_rails_hello_world_controller.rb
56
- - templates/rails_vite_hello_world/app/frontend/images/atom.svg
57
- - templates/rails_vite_hello_world/app/frontend/images/check-circle-green.png
58
- - templates/rails_vite_hello_world/app/frontend/images/svg.svg
59
- - templates/rails_vite_hello_world/app/frontend/javascript/components/Pug.svelte
57
+ - templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-england.png
58
+ - templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-face-smile-wink.svg
59
+ - templates/rails_vite_hello_world/app/frontend/images/svelte-on-rails-hello-world-switzerland.jpg
60
+ - templates/rails_vite_hello_world/app/frontend/javascript/components/JavascriptImport.svelte
61
+ - templates/rails_vite_hello_world/app/frontend/javascript/components/JpgImport.svelte
62
+ - templates/rails_vite_hello_world/app/frontend/javascript/components/ParentWithChild.svelte
63
+ - templates/rails_vite_hello_world/app/frontend/javascript/components/PngImport.svelte
60
64
  - templates/rails_vite_hello_world/app/frontend/javascript/components/SvelteOnRailsHelloWorld.svelte
65
+ - templates/rails_vite_hello_world/app/frontend/javascript/components/SvgRawImport.svelte
61
66
  - templates/rails_vite_hello_world/app/frontend/javascript/components/sub/NestedComponent.svelte
62
67
  - templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascript.js
63
68
  - templates/rails_vite_hello_world/app/frontend/javascript/nestedJavascriptToggled.js
69
+ - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_nav.html.erb
70
+ - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/_styles.html.erb
71
+ - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/backend_frontend_rendered.html.erb
64
72
  - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/index.html.erb
65
- - templates/svelte_on_rails_vite_base/app/frontend/initializers/svelte.js
66
- - templates/svelte_on_rails_vite_base/config/svelte_on_rails.yml
73
+ - templates/rails_vite_hello_world/app/views/svelte_on_rails_hello_world/ssr_auto_rendered.html.erb
67
74
  homepage: https://gitlab.com/sedl/svelte-on-rails
68
75
  licenses:
69
76
  - MIT
@@ -1,123 +0,0 @@
1
- #!/usr/bin/env node
2
-
3
- import path from 'path';
4
- import fs from 'fs/promises';
5
- import { rawResolver, stringPlugin, ssrExternals } from "./customPlugins.js";
6
-
7
- // Debugging: Log NODE_PATH and current working directory
8
- console.log('NODE_PATH:', process.env.NODE_PATH);
9
- console.log('Current Working Directory:', process.cwd());
10
-
11
- // Arguments: inputFile, outputDir, gemPath
12
- const args = process.argv.slice(2);
13
- const inputFile = args[0];
14
- const outputDir = args[1];
15
- const gemPath = args[2];
16
-
17
- // Pfad zu node_modules im Gem
18
- const gemNodeModules = path.join(gemPath, 'node_modules');
19
- // Path to node_modules in the Rails app (current working directory)
20
- const appNodeModules = path.join(process.cwd(), 'node_modules');
21
-
22
- // Dynamische Importe der Build-Tools aus dem Gem
23
- const { rollup } = await import(path.join(appNodeModules, 'rollup', 'dist', 'rollup.js'));
24
- const svelte = await import(path.join(appNodeModules, 'rollup-plugin-svelte', 'index.js')).then(m => m.default);
25
- const resolve = await import(path.join(appNodeModules, '@rollup', 'plugin-node-resolve', 'dist', 'es', 'index.js')).then(m => m.default);
26
- const commonjs = await import(path.join(appNodeModules, '@rollup/plugin-commonjs', 'dist', 'es', 'index.js')).then(m => m.default);
27
- const url = await import(path.join(appNodeModules, '@rollup', 'plugin-url', 'dist', 'es', 'index.js')).then(m => m.default);
28
- const css = await import(path.join(appNodeModules, 'rollup-plugin-css-only', 'dist', 'index.mjs')).then(m => m.default);
29
- const { sveltePreprocess } = await import(path.join(appNodeModules, 'svelte-preprocess', 'dist', 'index.js'));
30
-
31
-
32
- if (!inputFile || !outputDir || !gemPath) {
33
- console.error('Error: inputFile, outputDir, and gemPath must be specified.');
34
- console.error('Usage: node script.js <inputFile> <outputDir> <gemPath>');
35
- process.exit(1);
36
- }
37
-
38
- // Ensure that gemPath exists
39
- try {
40
- await fs.access(gemPath);
41
- } catch (error) {
42
- console.error(`Error: The gemPath "${gemPath}" does not exist.`);
43
- process.exit(1);
44
- }
45
-
46
- const fileName = path.basename(inputFile, '.svelte');
47
- const outputFile = path.join(outputDir, `${fileName}.js`);
48
- const outputCss = path.join(outputDir, `${fileName}.css`);
49
-
50
- const rollupConfig = {
51
- input: inputFile,
52
- output: {
53
- file: outputFile,
54
- format: 'esm',
55
- },
56
- external: [
57
- 'fs', 'path', 'url', 'module', 'http', 'https', 'zlib', 'stream', 'buffer',
58
- 'axios', 'form-data'
59
- ],
60
- onwarn(warning, warn) {
61
- if (warning.code === 'CIRCULAR_DEPENDENCY') return;
62
- if (warning.code === 'EMPTY_BUNDLE' || warning.code === 'UNUSED_EXTERNAL_IMPORT') return;
63
- warn(warning);
64
- },
65
- plugins: [
66
- svelte({
67
- preprocess: sveltePreprocess({
68
- pug: true,
69
- typescript: true
70
- }),
71
- compilerOptions: {
72
- generate: 'ssr',
73
- hydratable: false
74
- },
75
- onwarn(warning, handler) {
76
- if (warning.code === 'MISSING_EXPORT' && warning.exporter.includes('axios')) return;
77
- handler(warning);
78
- }
79
- }),
80
- rawResolver(),
81
- stringPlugin(),
82
- url({
83
- include: ['**/*.jpg', '**/*.png', '**/*.jpeg', '**/*.gif'],
84
- limit: 0,
85
- destDir: outputDir,
86
- publicPath: outputDir,
87
- emitFiles: true,
88
- }),
89
- css({ output: path.basename(outputCss) }),
90
- resolve({
91
- dedupe: ['svelte'],
92
- exportConditions: ['svelte', 'server'],
93
- // modulePaths: [appNodeModules, gemNodeModules], // Prioritize app's node_modules
94
- modulePaths: [appNodeModules], // Prioritize app's node_modules
95
- extensions: ['.mjs', '.js', '.cjs', '.ts'],
96
- mainFields: ['main', 'module']
97
- }),
98
- commonjs({
99
- include: [/node_modules/],
100
- transformMixedEsModules: true
101
- }),
102
- ssrExternals()
103
- ],
104
- };
105
-
106
- // Rollup build
107
- async function compile() {
108
- try {
109
- const startTime = performance.now();
110
- const bundle = await rollup(rollupConfig);
111
- await bundle.write(rollupConfig.output);
112
- await bundle.close();
113
- console.log(`Build successful: ${outputFile} and ${outputCss}`);
114
- const endTime = performance.now();
115
- const duration = (endTime - startTime).toFixed(2);
116
- console.log(`Execution time: ${duration} ms`);
117
- } catch (error) {
118
- console.error('Build failed:', error);
119
- process.exit(1);
120
- }
121
- }
122
-
123
- compile();
@@ -1,120 +0,0 @@
1
- module SvelteOnRails
2
-
3
- class Compiler
4
-
5
- require 'open3'
6
-
7
- def initialize(filename, base_path: SvelteOnRails::Configuration.instance.components_folder_full)
8
-
9
- utils = SvelteOnRails::Lib::Utils
10
- @files = utils.component_files(filename, base_path: base_path)
11
-
12
- end
13
-
14
- # compiler
15
- def compile_if_changes
16
-
17
- # letzte Änderung innerhalb des ordners ermitteln
18
-
19
- watch_changes = SvelteOnRails::Configuration.instance.watch_changes?
20
- ts_file = SvelteOnRails::Configuration.instance.dist_folder.join('reset_timestamp')
21
-
22
- have_changes = if watch_changes && File.exist?(ts_file)
23
-
24
- # compare last modification timestamp
25
- last_modification = 100.years.ago.to_time
26
- Dir.glob("#{SvelteOnRails::Configuration.instance.components_folder}**/*").each do |path|
27
- if File.file?(path)
28
- mtime = File.mtime(path)
29
- if mtime > last_modification
30
- last_modification = mtime
31
- end
32
- end
33
- end
34
- File.mtime(ts_file) < last_modification
35
-
36
- elsif watch_changes
37
- true
38
- elsif !File.exist?(ts_file)
39
- true
40
- else
41
- false
42
- end
43
-
44
- if have_changes || !File.exist?(compiled_js_file) || !File.exist?(compiled_css_file)
45
- if have_changes || (!File.exist?(ts_file) && watch_changes)
46
- self.class.reset_dist
47
- end
48
- compile
49
- end
50
- end
51
-
52
- def compiled_js_file
53
- @files[:compiled_file] + '.js'
54
- end
55
-
56
- def compiled_css_file
57
- @files[:compiled_file] + '.css'
58
- end
59
-
60
- def compiled_file
61
- @files[:compiled_file]
62
- end
63
-
64
- def compile
65
-
66
- start_time = Time.now
67
-
68
- cnf = SvelteOnRails::Configuration.instance
69
- subs = @files[:svelte_filename].split('/')[0..-2].join('/')
70
- dist = cnf.dist_folder + cnf.components_folder + subs
71
- utils = SvelteOnRails::Lib::Utils
72
-
73
- cmd = [
74
- 'node',
75
- utils.gem_app_dir + 'compiler/compile.js',
76
- @files[:svelte_file],
77
- dist,
78
- utils.gem_app_dir
79
- ].join(' ')
80
-
81
- Dir.chdir(cnf.rails_root) do
82
- env = { 'NODE_PATH' => File.join(cnf.rails_root, 'node_modules') }
83
-
84
- stdout, stderr, status = Open3.capture3(env, cmd, chdir: cnf.rails_root)
85
-
86
- unless status.to_s.match(/^pid [0-9]+ exit 0$/)
87
- raise "Compiling «#{@files[:svelte_filename]}» Server-side, script compile.js, executed within Rails.root:\n\n#{cmd}\n\n++++++\n\n#{stderr}\n\n++++++\n\n"
88
- end
89
- end
90
-
91
- time = Time.now - start_time
92
- Rails.logger.info " Compiled #{@files[:svelte_filename]}.js: #{time.round(3)}ms" rescue nil
93
- end
94
-
95
- def self.reset_dist
96
- unless Dir.exist?(SvelteOnRails::Configuration.instance.dist_folder)
97
- FileUtils.mkdir_p(SvelteOnRails::Configuration.instance.dist_folder)
98
- end
99
- FileUtils.rm_rf Dir.glob("#{SvelteOnRails::Configuration.instance.dist_folder}/*")
100
- FileUtils.touch SvelteOnRails::Configuration.instance.dist_folder.join('reset_timestamp')
101
- end
102
-
103
- def self.reset_and_compile_all
104
- reset_dist
105
- cnf = SvelteOnRails::Configuration.instance
106
- frontend_folder = cnf.frontend_folder_full
107
- files = Dir.glob(cnf.frontend_folder_full.join('**/*.svelte'))
108
- files.each_with_index do |file, ind|
109
- comp_name = file.to_s[(cnf.frontend_folder_full.to_s.length + 1)..-1]
110
-
111
- n = SvelteOnRails::Compiler.new(comp_name, base_path: frontend_folder)
112
- n.compile
113
-
114
- puts "compiled #{ind + 1}/#{files.length}: #{comp_name}"
115
-
116
- end
117
- end
118
-
119
- end
120
- end