Add development only scripts, update readme

networkteam · Jun 25, 2024 · 46c0134 · 46c0134
1 parent 804f93e
commit 46c0134
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -47,10 +47,64 @@ export default defineConfig((configEnv) => ({
 
 ### 4. You can now include Vite assets for development / production in your Fusion files:
 
+Let the package include everything for you, including [vite development scripts](https://vitejs.dev/guide/backend-integration):
+
+```fusion
+prototype(Customer.Base:Document.DefaultPage) < prototype(Neos.Neos:Page) {
+    head {
+        javascript.base = Networkteam.Neos.Vite:Head.Assets {
+            header = Networkteam.Neos.Vite:Asset {
+                entry = 'Resources/Private/Javascript/header.js'
+            }
+        }
+    }
+
+    bodyAssets = Networkteam.Neos.Vite:Body.Assets {
+        footer = Networkteam.Neos.Vite:Asset {
+          entry = 'Resources/Private/Javascript/footer.js'
+        }
+
+        // Include development scripts needed by Vite, for example:
+        developmentOnlyScripts {
+            // here you have access to the Vite server URL via context variable `viteUrl`
+            pluginName = ${'<script type="module" src="' + viteUrl + '@vite-plugin/client"></script>'}
+        }
+        @position = 'before closingBodyTag'
+    }
+}
+```
+
+Or, include everything manually using:
+
 ```fusion
 header = Networkteam.Neos.Vite:Asset {
     entry = 'Resources/Private/Javascript/header.js'
 }
+
+developmentOnlyScripts = Networkteam.Neos.Vite:Helper.DevelopmentOnlyScripts {
+    @context.viteUrl = ${Configuration.setting('Networkteam.Neos.Vite.server._default.url')}
+    pluginName = '<script type="module" src="' + viteUrl + '@vite-plugin/client"></script>'
+}
+```
+
+You can also use development-only scripts as Condition with Prototype `Networkteam.Neos.Vite:Helper.IsDevelopmentOnly`:
+
+```fusion
+prototype(Customer.Base:Helper.SpritemapBaseUrl) < prototype(Neos.Fusion:Case) {
+    inDevelopmentMode {
+        condition = Networkteam.Neos.Vite:Helper.IsDevelopmentOnly
+        renderer = '#icon-'
+    }
+    default {
+        condition = ${false}
+        renderer = Neos.Fusion:Value {
+            @context.spritemap = Networkteam.Neos.Vite:AssetUrl {
+                entry = 'spritemap.svg'
+            }
+            value = ${spritemap + '#icon-'}
+        }
+    }
+}
 ```
 
 This Fusion object will use a different include based on the FLOW_CONTEXT:

diff --git a/Resources/Private/Fusion/Body/Assets.fusion b/Resources/Private/Fusion/Body/Assets.fusion
@@ -0,0 +1,6 @@
+prototype(Networkteam.Neos.Vite:Body.Assets) < prototype(Neos.Fusion:Join) {
+    developmentOnlyScripts = Networkteam.Neos.Vite:Helper.DevelopmentOnlyScripts {
+        @context.viteUrl = ${Configuration.setting('Networkteam.Neos.Vite.server._default.url')}
+        // insert the vite client scripts
+    }
+}
diff --git a/Resources/Private/Fusion/Head/Assets.fusion b/Resources/Private/Fusion/Head/Assets.fusion
@@ -0,0 +1,7 @@
+prototype(Networkteam.Neos.Vite:Head.Assets) < prototype(Neos.Fusion:Join) {
+    developmentOnlyScripts = Networkteam.Neos.Vite:Helper.DevelopmentOnlyScripts {
+        @context.viteUrl = ${Configuration.setting('Networkteam.Neos.Vite.server._default.url')}
+        // Inject the react-refresh runtime into the page see: https://vitejs.dev/guide/backend-integration
+        reactRefresh = ${"<script type='module'>import RefreshRuntime from '" + viteUrl + "@react-refresh';RefreshRuntime.injectIntoGlobalHook(window);window.$RefreshReg$ = () => {};window.$RefreshSig$ = () => (type) => type;window.__vite_plugin_react_preamble_installed__ = true</script>"}
+    }
+}
diff --git a/Resources/Private/Fusion/Helper/DevelopmentOnly.fusion b/Resources/Private/Fusion/Helper/DevelopmentOnly.fusion
@@ -0,0 +1,31 @@
+/**
+  * Usage:
+  * developmentOnlyScripts = Viebrockhaus.Base:Helper.DevelopmentOnlyScripts {
+  *     @context.viteUrl = ${Configuration.setting('Networkteam.Neos.Vite.server._default.url')}
+  *     0 = ${'<script type="module" src="' + viteUrl + '@vite-plugin-svg-spritemap/client"></script>'}
+  * }
+  *
+  */
+
+prototype(Networkteam.Neos.Vite:Helper.DevelopmentOnlyScripts) < prototype(Neos.Fusion:Join) {
+    @context {
+        flowContext = ${Configuration.setting('Neos.Flow.core.context')}
+    }
+    @if.isDevelopmentContext = ${String.indexOf(flowContext, 'Development') >= 0}
+}
+
+prototype(Networkteam.Neos.Vite:Helper.IsDevelopmentOnly) < prototype(Neos.Fusion:Case) {
+    @context {
+        flowContext = ${Configuration.setting('Neos.Flow.core.context')}
+    }
+
+    inDevelopment {
+        condition = ${String.indexOf(flowContext, 'Development') >= 0}
+        renderer = ${true}
+    }
+
+    default {
+        condition = ${true}
+        renderer = ${false}
+    }
+}