Update arizona.svelte template to use arizona_svelte library (#22)

- Template now leverages @arizona-framework/svelte npm package and arizona_svelte Erlang lib
- Simplified template structure by removing redundant local modules
- Users get automatic component lifecycle monitoring out of the box
- Enhanced developer experience with LifecycleDemo component
- Templates are now lighter and leverage the robust arizona_svelte library
- Perfect synergy: template generates projects that use the library based on this template

Key architectural improvements:
- External arizona_svelte library handles component management
- Template focuses on project structure and configuration
- Users benefit from maintained, tested library code
- Cleaner separation between template and runtime functionality

Author: williamthome

README.md

@@ -94,10 +94,15 @@ $ rebar3 new arizona.presence my_chat_app
 # Create a modern frontend application
 $ rebar3 new arizona.frontend my_web_app
 
-# Create a full-stack Svelte application
+# Create a full-stack Svelte application (uses arizona_svelte library)
 $ rebar3 new arizona.svelte my_svelte_app
 ```
 
+> **Note**: The arizona.svelte template leverages the **arizona_svelte library**
+> for robust Svelte integration. This provides production-ready component management,
+> automatic lifecycle monitoring, and seamless Arizona-Svelte interoperability out
+> of the box.
+
 ## Templates
 
 ### Frontend Template
@@ -124,26 +129,36 @@ The app will be available at http://localhost:1912 with hot-reloading enabled.
 
 ### Svelte Template
 
-The Svelte template creates a full-stack Arizona application with Svelte integration:
+The Svelte template creates a full-stack Arizona application powered by the
+**arizona_svelte library**:
 
+- **Arizona Svelte Library** - Production-ready Erlang/OTP and npm packages for
+Svelte integration
+- **Automatic Component Lifecycle** - Components mount/unmount automatically
+with DOM changes
 - **Svelte 5** - Modern reactive frontend framework with runes
 - **Vite** - Fast build tool with hot module replacement
 - **Tailwind CSS v4** - Modern utility-first CSS framework
-- **Component architecture** - HelloWorld and Counter Svelte components
-- **Hot-reloading** - Both CSS and JS changes reload automatically
-- **Arizona-Svelte bridge** - Seamless integration between server and client
-- **Hybrid rendering** - Server-side Arizona components with embedded Svelte components
+- **Interactive Demo Components** - HelloWorld, Counter, and LifecycleDemo components
+- **Real-time Monitoring** - Built-in component lifecycle monitoring and logging
+- **WebSocket Integration** - Automatic re-mounting after Arizona HTML patches
+- **Developer Tools** - Global `arizonaSvelte` debugging interface
 
 After creating a Svelte template project:
 
 ```bash
 cd myapp
-npm install          # Install dependencies
+npm install          # Install dependencies (includes @arizona-framework/svelte)
 npm run build        # Build CSS and JS
 rebar3 shell         # Start the Arizona server
 ```
 
-The app will be available at http://localhost:1912 with full hot-reloading for both CSS and Svelte components.
+The app will be available at http://localhost:1912 with:
+
+- **Automatic component management** - No manual mounting/unmounting needed
+- **Full hot-reloading** for both CSS and Svelte components
+- **Interactive lifecycle demo** for testing and learning
+- **Production-ready architecture** leveraging the arizona_svelte library
 
 ### Controls
 

priv/templates/arizona.svelte.template

@@ -15,6 +15,7 @@
 {template, "arizona.svelte/assets/svelte/components/Counter.svelte", "{{name}}/assets/svelte/components/Counter.svelte"}.
 {template, "arizona.svelte/assets/svelte/components/HelloWorld.svelte", "{{name}}/assets/svelte/components/HelloWorld.svelte"}.
 {template, "arizona.svelte/assets/svelte/components/LifecycleDemo.svelte", "{{name}}/assets/svelte/components/LifecycleDemo.svelte"}.
+{template, "arizona.svelte/assets/svelte/components/index.js", "{{name}}/assets/svelte/components/index.js"}.
 {template, "arizona.svelte/assets/tailwind.config.js", "{{name}}/assets/tailwind.config.js"}.
 {template, "arizona.svelte/assets/vite.config.js", "{{name}}/assets/vite.config.js"}.
 
@@ -35,14 +36,11 @@
 
 {template, "arizona.svelte/src/app.src", "{{name}}/src/{{name}}.app.src"}.
 {template, "arizona.svelte/src/app.erl", "{{name}}/src/{{name}}_app.erl"}.
-{template, "arizona.svelte/src/components.erl", "{{name}}/src/{{name}}_components.erl"}.
 {template, "arizona.svelte/src/counter.erl", "{{name}}/src/{{name}}_counter.erl"}.
 {template, "arizona.svelte/src/css_reloader.erl", "{{name}}/src/{{name}}_css_reloader.erl"}.
 {template, "arizona.svelte/src/js_reloader.erl", "{{name}}/src/{{name}}_js_reloader.erl"}.
 {template, "arizona.svelte/src/layout.erl", "{{name}}/src/{{name}}_layout.erl"}.
-{template, "arizona.svelte/src/main.erl", "{{name}}/src/{{name}}.erl"}.
 {template, "arizona.svelte/src/sup.erl", "{{name}}/src/{{name}}_sup.erl"}.
-{template, "arizona.svelte/src/template.erl", "{{name}}/src/{{name}}_template.erl"}.
 {template, "arizona.svelte/src/view.erl", "{{name}}/src/{{name}}_view.erl"}.
 
 %% /
@@ -51,4 +49,4 @@
 {template, "arizona.svelte/LICENSE.md", "{{name}}/LICENSE.md"}.
 {template, "arizona.svelte/package.json", "{{name}}/package.json"}.
 {template, "arizona.svelte/README.md", "{{name}}/README.md"}.
-{template, "arizona.svelte/rebar.config", "{{name}}/rebar.config"}.
+{template, "arizona.svelte/rebar.config", "{{name}}/rebar.config"}.

priv/templates/arizona.svelte/assets/js/main.js

@@ -1,12 +1,13 @@
 import Arizona from '@arizona-framework/client';
-import ArizonaSvelte from './arizona-svelte.js';
+import ArizonaSvelte from '@arizona-framework/svelte';
+import * as components from '../svelte/components';
 
 // Initialize Arizona framework
 globalThis.arizona = new Arizona({ logLevel: 'debug' });
-arizona.connect({ wsPath: '/live' });
+arizona.connect('/live');
 
 // Initialize ArizonaSvelte with automatic monitoring
-const arizonaSvelte = new ArizonaSvelte();
+const arizonaSvelte = new ArizonaSvelte({ components });
 
 // Start automatic monitoring - components will mount/unmount automatically
 arizonaSvelte.startMonitoring({

priv/templates/arizona.svelte/assets/svelte/components/index.js

@@ -0,0 +1,3 @@
+export { default as Counter } from './Counter.svelte';
+export { default as HelloWorld } from './HelloWorld.svelte';
+export { default as LifecycleDemo } from './LifecycleDemo.svelte';

priv/templates/arizona.svelte/package.json

@@ -23,6 +23,7 @@
     "vite": "^7.1.7"
   },
   "dependencies": {
-    "@arizona-framework/client": "^0.2.0"
+    "@arizona-framework/client": "^0.2.0",
+    "@arizona-framework/svelte": "^0.2.0"
   }
 }

priv/templates/arizona.svelte/rebar.config

@@ -6,7 +6,9 @@
     {arizona, {git, "https://github.com/arizona-framework/arizona.git",
                {branch, "main"}}},
     {arizona_rebar3_plugin, {git, "https://github.com/arizona-framework/arizona_rebar3_plugin",
-                             {branch, "main"}}}
+                             {branch, "main"}}},
+    {arizona_svelte, {git, "https://github.com/arizona-framework/arizona_svelte.git",
+                      {branch, "main"}}}
 ]}.
 
 {plugins, [

priv/templates/arizona.svelte/src/components.erl

@@ -69,7 +69,7 @@ render(Bindings) ->
             <div class="text-xs text-arizona-teal/70 mb-2 text-center font-mono">
                 ↳ Svelte Component embedded inside Arizona Stateful Component
             </div>
-            {{{name}}:render_component(~"Counter", #{
+            {arizona_svelte:render_component(~"Counter", #{
                 title => ~"Svelte Counter (Client-side)",
                 initialCount => arizona_template:get_binding(count, Bindings)
             })}