{"_id":"@arizona-framework/svelte","_rev":"2-6bb23c30019609974a279d6cea438fa4","name":"@arizona-framework/svelte","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@arizona-framework/svelte","version":"0.1.0","keywords":["arizona","framework","svelte","javascript","client","websocket","realtime","component","lifecycle"],"author":{"name":"William Fank Thomé","email":"willilamthome@hotmail.com"},"license":"Apache-2.0","_id":"@arizona-framework/svelte@0.1.0","maintainers":[{"name":"williamthome","email":"willegp88@gmail.com"}],"homepage":"https://github.com/arizona-framework/arizona_svelte","bugs":{"url":"https://github.com/arizona-framework/arizona_svelte/issues"},"dist":{"shasum":"ed5407df701fc3e31c86ca49a3e6935e933b0ef4","tarball":"https://registry.npmjs.org/@arizona-framework/svelte/-/svelte-0.1.0.tgz","fileCount":11,"integrity":"sha512-++s/WAVYKsqGMCIqtgt9Z5jIc63l/ac0G6uevwUVqUIrD2FwQAnJcMdYVhazN1euI6CPGAZPFHPZcD6piF3jBA==","signatures":[{"sig":"MEYCIQCQ4Y9fvBjumxsrFCNG8UP/mzOeiOnAXn0OBfi1AxSZxQIhAKiUHcuXteTusWXLocs7KsoHgK91Z6s3E+K2Vxt1epMv","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46257},"main":"./assets/js/arizona-svelte.js","type":"module","module":"./assets/js/arizona-svelte.js","engines":{"node":">=18.0.0"},"exports":{".":{"import":"./assets/js/arizona-svelte.js","require":"./assets/js/arizona-svelte.js"}},"gitHead":"052465cb005c6aea38463c0ddefaa320b45edf6f","scripts":{"ci":"npm run format:check && npm run lint:check && npm test","lint":"npm run lint:js && npm run lint:md","test":"vitest run","build":"vite build","format":"prettier --write \"./assets/**/*.js\" \"**/*.json\" \"**/*.yml\" --config prettier.config.js --ignore-path .gitignore --ignore-path .prettierignore","lint:js":"eslint assets/js/**/*.js --fix","lint:md":"markdownlint-cli2 \"*.md\"","prepack":"npm run build","build:dev":"vite build --mode development","lint:check":"npm run lint:js:check && npm run lint:md","format:lint":"npm run format && npm run lint","format:check":"prettier --check \"./assets/**/*.js\" \"**/*.json\" \"**/*.yml\" --config prettier.config.js --ignore-path .gitignore --ignore-path .prettierignore","build:analyze":"ANALYZE=true vite build","lint:js:check":"eslint assets/js/**/*.js","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"williamthome","email":"willegp88@gmail.com"},"repository":{"url":"git+https://github.com/arizona-framework/arizona_svelte.git","type":"git"},"_npmVersion":"10.9.3","description":"Svelte integration library for Arizona Framework","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","browserslist":["defaults","not IE 11"],"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"7.1.7","eslint":"9.36.0","vitest":"3.2.4","globals":"16.4.0","prettier":"3.6.2","uglify-js":"3.19.3","@eslint/js":"9.36.0","vite-plugin-dts":"4.5.4","@playwright/test":"1.55.1","markdownlint-cli2":"0.18.1","vite-plugin-eslint":"1.8.1","@vitest/coverage-v8":"3.2.4","vite-tsconfig-paths":"5.1.4","rollup-plugin-banner2":"1.3.1","rollup-plugin-license":"3.6.0","rollup-plugin-filesize":"10.0.0","rollup-plugin-visualizer":"6.0.3"},"peerDependencies":{"svelte":"5.39.6"},"_npmOperationalInternal":{"tmp":"tmp/svelte_0.1.0_1759090233641_0.943475318139755","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@arizona-framework/svelte","version":"0.2.0","description":"Svelte integration library for Arizona Framework","type":"module","main":"./assets/js/arizona-svelte.js","module":"./assets/js/arizona-svelte.js","exports":{".":{"import":"./assets/js/arizona-svelte.js","require":"./assets/js/arizona-svelte.js"}},"repository":{"type":"git","url":"git+https://github.com/arizona-framework/arizona_svelte.git"},"homepage":"https://github.com/arizona-framework/arizona_svelte","bugs":{"url":"https://github.com/arizona-framework/arizona_svelte/issues"},"engines":{"node":">=18.0.0"},"browserslist":["defaults","not IE 11"],"keywords":["arizona","framework","svelte","javascript","client","websocket","realtime","component","lifecycle"],"author":{"name":"William Fank Thomé","email":"willilamthome@hotmail.com"},"license":"Apache-2.0","sideEffects":false,"publishConfig":{"access":"public"},"scripts":{"build":"vite build","build:analyze":"ANALYZE=true vite build","build:dev":"vite build --mode development","format":"prettier --write \"./assets/**/*.js\" \"**/*.json\" \"**/*.yml\" --config prettier.config.js --ignore-path .gitignore --ignore-path .prettierignore","format:check":"prettier --check \"./assets/**/*.js\" \"**/*.json\" \"**/*.yml\" --config prettier.config.js --ignore-path .gitignore --ignore-path .prettierignore","lint:js":"eslint assets/js/**/*.js --fix","lint:js:check":"eslint assets/js/**/*.js","lint:md":"markdownlint-cli2 \"*.md\"","lint":"npm run lint:js && npm run lint:md","lint:check":"npm run lint:js:check && npm run lint:md","format:lint":"npm run format && npm run lint","test":"vitest run","test:coverage":"vitest run --coverage","ci":"npm run format:check && npm run lint:check && npm test","prepack":"npm run build"},"peerDependencies":{"svelte":"5.39.6"},"devDependencies":{"@eslint/js":"9.36.0","@playwright/test":"1.55.1","@vitest/coverage-v8":"3.2.4","eslint":"9.36.0","globals":"16.4.0","markdownlint-cli2":"0.18.1","prettier":"3.6.2","rollup-plugin-banner2":"1.3.1","rollup-plugin-filesize":"10.0.0","rollup-plugin-license":"3.6.0","rollup-plugin-visualizer":"6.0.3","uglify-js":"3.19.3","vite":"7.1.7","vite-plugin-dts":"4.5.4","vite-plugin-eslint":"1.8.1","vite-tsconfig-paths":"5.1.4","vitest":"3.2.4"},"_id":"@arizona-framework/svelte@0.2.0","gitHead":"37789d7f4a251bfd17c45d80ccce5e40195a25c8","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-MjZcZGlLse4FGHL8r8uGxHNkx4rK5iMDvAJ++RVQmv4sCFTkR5VfIVFOxo1kpYd0wvAo0F3AorfTtpzudAP3Yw==","shasum":"ef7ea396b7d6fc5b67a8cae6614e842dd277c774","tarball":"https://registry.npmjs.org/@arizona-framework/svelte/-/svelte-0.2.0.tgz","fileCount":9,"unpackedSize":45801,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCutdhFOh6A6wPgDemJc8YMNeqLxlAWdiz0hui/WjdCSwIhAPg/ahWR+DMflXHutyDbhBVt5lW7LeSdkWCANH2movln"}]},"_npmUser":{"name":"williamthome","email":"willegp88@gmail.com"},"directories":{},"maintainers":[{"name":"williamthome","email":"willegp88@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte_0.2.0_1759095192692_0.09077412367277016"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-28T20:10:33.539Z","modified":"2025-09-28T21:33:13.072Z","0.1.0":"2025-09-28T20:10:33.841Z","0.2.0":"2025-09-28T21:33:12.859Z"},"bugs":{"url":"https://github.com/arizona-framework/arizona_svelte/issues"},"author":{"name":"William Fank Thomé","email":"willilamthome@hotmail.com"},"license":"Apache-2.0","homepage":"https://github.com/arizona-framework/arizona_svelte","keywords":["arizona","framework","svelte","javascript","client","websocket","realtime","component","lifecycle"],"repository":{"type":"git","url":"git+https://github.com/arizona-framework/arizona_svelte.git"},"description":"Svelte integration library for Arizona Framework","maintainers":[{"name":"williamthome","email":"willegp88@gmail.com"}],"readme":"# Arizona Svelte\n\nSvelte integration library for the Arizona Framework - seamlessly embed Svelte\ncomponents in Arizona applications with automatic lifecycle management.\n\n## Installation\n\n### Erlang (Hex Package)\n\nAdd to your `rebar.config`:\n\n```erlang\n{deps, [\n    arizona,\n    arizona_svelte\n]}.\n```\n\n### JavaScript (NPM Package)\n\n```bash\nnpm install @arizona-framework/svelte svelte\n```\n\n## Creating a New Arizona Svelte App\n\nThe easiest way to get started is using the `rebar3_arizona` plugin to\ncreate a new app with Svelte template:\n\n### Option 1: Interactive CLI\n\n```bash\nrebar3 arizona\n# Choose \"Create new app\"\n# Enter an app name\n# Select the \"Svelte template\"\n```\n\n### Option 2: Direct Command\n\n```bash\nrebar3 new arizona.svelte my_svelte_app\n```\n\n### Setup and Run\n\n```bash\ncd my_svelte_app\nnpm install    # Install dependencies\nnpm run build  # Build CSS and JS\nrebar3 shell   # Start the Arizona server\n```\n\nYour app will be available at <http://localhost:1912> with hot-reloading\nfor both CSS and Svelte components.\n\nThe Svelte template includes:\n\n- Svelte 5 with modern `$state` and `$effect` runes\n- Vite build system and Tailwind CSS\n- Example HelloWorld and Counter components\n- Full integration with Arizona's real-time WebSocket updates\n\n## Manual Integration (Existing Projects)\n\nIf you want to add Svelte to an existing Arizona project, follow the\ninstallation and quick start sections below.\n\n## Quick Start\n\n### 1. Erlang Side - Render Components\n\n```erlang\n% In your Arizona view module\n-module(my_view).\n-export([render/1, my_page/1]).\n\nmy_page(_Bindings) ->\n    arizona_template:from_html(~\"\"\"\n    <div>\n        <h1>My Arizona + Svelte App</h1>\n\n        {% Render a Svelte component }\n        {arizona_svelte:render_component(\"Counter\", #{\n            title => \"My Counter\",\n            initialCount => 5\n        })}\n\n        {% Render another component with Arizona bindings }\n        {arizona_svelte:render_component(\"HelloWorld\", #{\n            name => arizona_template:get_binding(user_name, Bindings)\n        })}\n    </div>\n    \"\"\").\n```\n\n### 2. JavaScript Side - Register Components and Initialize\n\n```javascript\n// assets/js/main.js\nimport ArizonaSvelte from '@arizona-framework/svelte';\nimport Counter from '../svelte/components/Counter.svelte';\nimport HelloWorld from '../svelte/components/HelloWorld.svelte';\n\n// Option 1: Register components in constructor (recommended)\nconst arizonaSvelte = new ArizonaSvelte({\n  components: {\n    Counter,\n    HelloWorld\n  }\n});\n\n// Option 2: Register components manually\n// const arizonaSvelte = new ArizonaSvelte();\n// arizonaSvelte.registerComponents({\n//   Counter,\n//   HelloWorld\n// });\n\n// Start automatic component lifecycle monitoring\narizonaSvelte.startMonitoring({\n    autoMount: true,      // Automatically mount components found in DOM\n    autoUnmount: true,    // Automatically unmount removed components\n    observeSubtree: true, // Monitor entire DOM tree\n    debounceMs: 0         // No delay for immediate responsiveness\n});\n\n// Make available globally for debugging\nglobalThis.arizonaSvelte = arizonaSvelte;\n```\n\n### Alternative: Using an Index File\n\nCreate a centralized component index:\n\n```javascript\n// svelte/components/index.js\nexport { default as Counter } from './Counter.svelte';\nexport { default as HelloWorld } from './HelloWorld.svelte';\nexport { default as Dashboard } from './Dashboard.svelte';\n```\n\nThen import all at once:\n\n```javascript\n// assets/js/main.js\nimport ArizonaSvelte from '@arizona-framework/svelte';\nimport * as components from '../svelte/components/index.js';\n\nconst arizonaSvelte = new ArizonaSvelte({ components });\narizonaSvelte.startMonitoring();\n```\n\n### 3. Create Your Svelte Components\n\n```svelte\n<!-- assets/svelte/components/Counter.svelte -->\n<script>\n  let { title, initialCount = 0 } = $props();\n  let count = $state(initialCount);\n</script>\n\n<div class=\"counter\">\n  <h2>{title}</h2>\n  <p>Count: {count}</p>\n  <button onclick={() => count++}>+</button>\n  <button onclick={() => count--}>-</button>\n</div>\n```\n\n## Features\n\n- **🔄 Automatic Lifecycle Management**: Components mount/unmount automatically\nwhen DOM changes\n- **🏗️ Flexible Component Registration**: Register components via constructor or batch methods\n- **📡 Real-time Integration**: Works seamlessly with Arizona's WebSocket updates\n- **🎯 Simple Setup**: Register components and start monitoring in a few lines\n- **🧪 Development Friendly**: Built-in logging and debugging support\n- **⚡ High Performance**: Zero-debounce monitoring for immediate responsiveness\n\n## Important: State Independence\n\n**Critical Behavior:** Svelte components rendered via `arizona_svelte:render_component/2`\nmaintain independent state from Arizona. Arizona bindings in component props are\nevaluated only once during initial render and are NOT tracked for changes.\n\n```erlang\n%% This binding is evaluated once and never updated\n{arizona_svelte:render_component(\"UserDashboard\", #{\n    userId => arizona_template:get_binding(current_user, Bindings)\n})}\n```\n\nIf `current_user` changes in Arizona state, the Svelte component will NOT automatically\nreceive the new value. The component maintains its own reactive state using Svelte's\n`$state` runes.\n\n## API Reference\n\n### Erlang API\n\n#### `arizona_svelte:render_component/2`\n\nRenders a Svelte component with props.\n\n```erlang\narizona_svelte:render_component(Component, Props) -> Template.\n```\n\n- `Component :: binary()` - Name of the Svelte component\n- `Props :: #{atom() | binary() => json:encode_value()}` - Component props\n- Returns: `arizona_template:render_callback()`\n\n### JavaScript API\n\n#### `new ArizonaSvelte(options?)`\n\nCreates a new Arizona Svelte instance.\n\n**Options:**\n\n- `components: Object` - Components to register on instantiation\n\n```javascript\nconst arizonaSvelte = new ArizonaSvelte({\n  components: {\n    Counter: CounterComponent,\n    HelloWorld: HelloWorldComponent\n  }\n});\n```\n\n#### `arizonaSvelte.registerComponents(components)`\n\nRegister multiple components at once.\n\n```javascript\narizonaSvelte.registerComponents({\n  Dashboard: DashboardComponent,\n  Modal: ModalComponent\n});\n```\n\n#### `arizonaSvelte.startMonitoring(options?)`\n\nStarts automatic component lifecycle monitoring.\n\n**Options:**\n\n- `autoMount: boolean` - Auto-mount new components (default: true)\n- `autoUnmount: boolean` - Auto-unmount removed components (default: true)\n- `observeSubtree: boolean` - Monitor entire DOM tree (default: true)\n- `debounceMs: number` - Debounce delay in milliseconds (default: 0)\n\n#### Other Methods\n\n- `arizonaSvelte.stopMonitoring()` - Stop monitoring\n- `arizonaSvelte.isMonitoring()` - Check if monitoring is active\n- `arizonaSvelte.getRegistry()` - Get component registry\n- `arizonaSvelte.getLifecycle()` - Get lifecycle manager\n- `arizonaSvelte.getComponent(name)` - Get a specific component\n- `arizonaSvelte.hasComponent(name)` - Check if component is registered\n- `arizonaSvelte.getComponentNames()` - Get all registered component names\n\n## Requirements\n\n- **Erlang/OTP**: 28+\n- **Arizona Framework**\n- **Svelte**\n- **Node.js**: 18.0.0+\n\n## Sponsors\n\nIf you like this tool, please consider [sponsoring me](https://github.com/sponsors/williamthome).\nI'm thankful for your never-ending support :heart:\n\nI also accept coffees :coffee:\n\n[![\"Buy Me A Coffee\"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/williamthome)\n\n## License\n\nCopyright (c) 2025 [William Fank Thomé](https://github.com/williamthome)\n\nArizona Svelte is 100% open-source and community-driven. All components are\navailable under the Apache 2 License on [GitHub](https://github.com/arizona-framework/arizona_svelte).\n\nSee [LICENSE.md](LICENSE.md) for more information.\n","readmeFilename":"README.md"}