{"_id":"@atlantis-gr/svelte-config","name":"@atlantis-gr/svelte-config","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@atlantis-gr/svelte-config","version":"1.0.1","description":"Runtime configuration management for SvelteKit applications","scripts":{"dev":"vite dev","build:pack":"svelte-package && npm pack","build":"svelte-package","preview":"vite preview","prepare":"svelte-kit sync || echo ''","prepack":"svelte-package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","check:watch":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch","format":"prettier --write .","lint":"prettier --check ."},"sideEffects":["**/*.css"],"svelte":"./dist/index.js","types":"./dist/index.d.ts","type":"module","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js"},"./components":{"types":"./dist/components/index.d.ts","svelte":"./dist/components/index.js"}},"peerDependencies":{"@sveltejs/kit":"^2.0.0","svelte":"^5.0.0"},"dependencies":{"lodash-es":"^4.17.21","@atlantis-gr/svelte-logging-abstractions":"1.0.0"},"devDependencies":{"@sveltejs/adapter-auto":"^6.1.1","@sveltejs/kit":"^2.43.2","@sveltejs/package":"^2.5.4","@sveltejs/vite-plugin-svelte":"^6.2.0","@types/lodash-es":"^4.17.12","prettier":"^3.6.2","prettier-plugin-svelte":"^3.4.0","prettier-plugin-tailwindcss":"^0.6.14","publint":"^0.3.13","svelte":"^5.39.5","svelte-check":"^4.3.2","tailwindcss":"^4.1.13","typescript":"^5.9.2","vite":"^7.1.7"},"author":{"name":"Atlantis GR"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Atlantis-GR/svelte-components.git"},"keywords":["svelte","sveltekit","configuration","runtime","settings","environment"],"_id":"@atlantis-gr/svelte-config@1.0.1","gitHead":"137e0990ef179a7a96718e6db5186bbc15d47f13","bugs":{"url":"https://github.com/Atlantis-GR/svelte-components/issues"},"homepage":"https://github.com/Atlantis-GR/svelte-components#readme","_nodeVersion":"24.2.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-LCjzesoXT/4GfaFZ6ara9UaV9thMMfnarxDwuKAdbo4/287mFONlnynMIJ71uXFuW13vi6oc4zl3IwucqmaaEA==","shasum":"c722cf75496684aee75323bef60177a2a1c4d0db","tarball":"https://registry.npmjs.org/@atlantis-gr/svelte-config/-/svelte-config-1.0.1.tgz","fileCount":28,"unpackedSize":83997,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDPBs4kgQo++54u6VILgus+jL7nMb4T1OArVBFuIifB+QIgTSg6Fd3KvjkPVBUQ2JkqRWsxZo6hDGrlCM6r0oPymW0="}]},"_npmUser":{"name":"lefterisrentas","email":"lefteris.rentasac@gmail.com"},"directories":{},"maintainers":[{"name":"lefterisrentas","email":"lefteris.rentasac@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/svelte-config_1.0.1_1760717716219_0.34219661532928636"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-17T16:15:16.126Z","1.0.1":"2025-10-17T16:15:16.387Z","modified":"2025-10-17T16:15:16.680Z"},"maintainers":[{"name":"lefterisrentas","email":"lefteris.rentasac@gmail.com"}],"description":"Runtime configuration management for SvelteKit applications","homepage":"https://github.com/Atlantis-GR/svelte-components#readme","keywords":["svelte","sveltekit","configuration","runtime","settings","environment"],"repository":{"type":"git","url":"git+https://github.com/Atlantis-GR/svelte-components.git"},"author":{"name":"Atlantis GR"},"bugs":{"url":"https://github.com/Atlantis-GR/svelte-components/issues"},"license":"MIT","readme":"# @atlantis-gr/svelte-config\r\n\r\nRuntime configuration management for SvelteKit applications with dynamic settings and feature flags.\r\n\r\n## Features\r\n\r\n- Runtime configuration loading from multiple sources\r\n- Feature flags with real-time updates\r\n- Environment-specific configurations\r\n- Type-safe configuration access\r\n- Debug tools for configuration inspection\r\n- Secure configuration handling\r\n- Browser and server compatibility\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @atlantis-gr/svelte-config\r\n```\r\n\r\n## Usage\r\n\r\n### 1. Create Configuration Manifest\r\n\r\nCreate a configuration file in your `static/` directory:\r\n\r\n```json\r\n// static/app-settings.manifest.json\r\n{\r\n  \"api\": {\r\n    \"url\": \"http://localhost:3001\",\r\n    \"timeout\": 10000,\r\n    \"retries\": 3\r\n  },\r\n  \"features\": {\r\n    \"enableDarkMode\": true,\r\n    \"enableBetaFeatures\": false,\r\n    \"enableAdvancedLogging\": false\r\n  },\r\n  \"branding\": {\r\n    \"appName\": \"My Application\",\r\n    \"primaryColor\": \"#ff3e00\",\r\n    \"theme\": \"auto\"\r\n  },\r\n  \"environment\": {\r\n    \"development\": {\r\n      \"api_url\": \"http://localhost:3001\",\r\n      \"debug\": true\r\n    },\r\n    \"production\": {\r\n      \"api_url\": \"https://api.production.com\",\r\n      \"debug\": false\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### 2. Set Up Configuration Provider\r\n\r\n```svelte\r\n<!-- app.html or root layout -->\r\n<script>\r\n  import { ConfigProvider } from '@atlantis-gr/svelte-config/components';\r\n</script>\r\n\r\n<ConfigProvider configUrl=\"/app-settings.manifest.json\">\r\n  <slot />\r\n</ConfigProvider>\r\n```\r\n\r\n### 3. Use Configuration in Components\r\n\r\n```svelte\r\n<script>\r\n  import { useConfig } from '@atlantis-gr/svelte-config';\r\n  import { FeatureFlag, ConfigValue } from '@atlantis-gr/svelte-config/components';\r\n  \r\n  const { config, featureFlags, apiUrl } = useConfig();\r\n</script>\r\n\r\n<!-- Access configuration values -->\r\n<p>API URL: {$apiUrl}</p>\r\n\r\n<!-- Use feature flags -->\r\n<FeatureFlag flag=\"enableDarkMode\">\r\n  <button>Toggle Dark Mode</button>\r\n</FeatureFlag>\r\n\r\n<!-- Display configuration values -->\r\n<ConfigValue key=\"branding.appName\" fallback=\"Default App\" />\r\n\r\n<!-- Debug configuration -->\r\n{#if $config.environment?.debug}\r\n  <pre>{JSON.stringify($config, null, 2)}</pre>\r\n{/if}\r\n```\r\n\r\n## 🔧 API Reference\r\n\r\n### Components\r\n\r\n#### `<ConfigProvider>`\r\nProvides configuration context to child components.\r\n\r\n**Props:**\r\n- `configUrl: string` - URL to configuration manifest\r\n- `fallbackConfig?: object` - Default configuration if loading fails\r\n- `onConfigLoaded?: (config: any) => void` - Callback when config loads\r\n- `onConfigError?: (error: Error) => void` - Callback on loading errors\r\n\r\n#### `<FeatureFlag>`\r\nConditionally renders content based on feature flag state.\r\n\r\n**Props:**\r\n- `flag: string` - Feature flag key (supports dot notation)\r\n- `fallback?: boolean` - Default value if flag not found\r\n\r\n```svelte\r\n<FeatureFlag flag=\"features.enableBetaFeatures\">\r\n  <p>Beta features are enabled!</p>\r\n</FeatureFlag>\r\n```\r\n\r\n#### `<ConfigValue>`\r\nDisplays configuration values with optional formatting.\r\n\r\n**Props:**\r\n- `key: string` - Configuration key (supports dot notation)\r\n- `fallback?: any` - Default value if key not found\r\n- `format?: (value: any) => string` - Custom formatter function\r\n\r\n#### `<ConfigDebugger>`\r\nDevelopment tool for inspecting configuration state.\r\n\r\n**Props:**\r\n- `showJson?: boolean` - Display raw JSON (default: true)\r\n- `showFeatureFlags?: boolean` - Show feature flags separately (default: true)\r\n\r\n### Composables\r\n\r\n#### `useConfig()`\r\nReturns reactive stores for configuration access:\r\n\r\n```typescript\r\nconst {\r\n  config,           // Writable<ConfigObject>\r\n  featureFlags,     // Writable<FeatureFlags>\r\n  apiUrl,          // Writable<string>\r\n  isProduction,    // Writable<boolean>\r\n  culture,         // Writable<string>\r\n  appVersion,      // Writable<string>\r\n  service          // ConfigService instance\r\n} = useConfig();\r\n```\r\n\r\n### Services\r\n\r\n#### `ConfigService`\r\nCore configuration management service:\r\n\r\n```typescript\r\nimport { ConfigService } from '@atlantis-gr/svelte-config';\r\n\r\nconst configService = new ConfigService();\r\n\r\n// Load configuration\r\nawait configService.loadConfig('/config.json');\r\n\r\n// Get configuration value\r\nconst apiUrl = configService.get('api.url');\r\n\r\n// Update configuration\r\nconfigService.update({\r\n  features: {\r\n    enableBetaFeatures: true\r\n  }\r\n});\r\n\r\n// Subscribe to changes\r\nconfigService.subscribe((config) => {\r\n  console.log('Config updated:', config);\r\n});\r\n```\r\n\r\n## ⚙️ Configuration Structure\r\n\r\n### Standard Configuration Format\r\n\r\n```typescript\r\ninterface AppConfig {\r\n  api?: {\r\n    url?: string;\r\n    timeout?: number;\r\n    retries?: number;\r\n  };\r\n  features?: Record<string, boolean>;\r\n  branding?: {\r\n    appName?: string;\r\n    primaryColor?: string;\r\n    theme?: 'light' | 'dark' | 'auto';\r\n  };\r\n  environment?: {\r\n    [env: string]: Record<string, any>;\r\n  };\r\n  app?: {\r\n    version?: string;\r\n    culture?: string;\r\n    title?: string;\r\n    description?: string;\r\n  };\r\n}\r\n```\r\n\r\n### Environment-Specific Configuration\r\n\r\n```json\r\n{\r\n  \"environment\": {\r\n    \"development\": {\r\n      \"api_url\": \"http://localhost:3001\",\r\n      \"debug\": true,\r\n      \"features\": {\r\n        \"enableDebugMode\": true\r\n      }\r\n    },\r\n    \"staging\": {\r\n      \"api_url\": \"https://staging-api.example.com\",\r\n      \"debug\": false\r\n    },\r\n    \"production\": {\r\n      \"api_url\": \"https://api.example.com\",\r\n      \"debug\": false,\r\n      \"features\": {\r\n        \"enableDebugMode\": false\r\n      }\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n## 🔒 Security Considerations\r\n\r\n### Secure Configuration Values\r\n\r\nFor sensitive configuration values, use server-side APIs:\r\n\r\n```svelte\r\n<script>\r\n  import { onMount } from 'svelte';\r\n  import { useConfig } from '@atlantis-gr/svelte-config';\r\n  \r\n  const { service } = useConfig();\r\n  \r\n  onMount(async () => {\r\n    // Load secure configuration from API\r\n    const secureConfig = await fetch('/api/config/secure').then(r => r.json());\r\n    service.update(secureConfig);\r\n  });\r\n</script>\r\n```\r\n\r\n### Environment Variables\r\n\r\nNever expose sensitive data in client-side configuration:\r\n\r\n```json\r\n// ✅ Good - Public configuration\r\n{\r\n  \"api\": {\r\n    \"url\": \"https://api.example.com\"\r\n  }\r\n}\r\n\r\n// ❌ Bad - Sensitive data\r\n{\r\n  \"api\": {\r\n    \"secret\": \"secret-api-key\"  // Don't do this!\r\n  }\r\n}\r\n```\r\n\r\n## 🎨 Styling and Themes\r\n\r\n### Theme Configuration\r\n\r\n```json\r\n{\r\n  \"branding\": {\r\n    \"theme\": \"auto\",\r\n    \"primaryColor\": \"#ff3e00\",\r\n    \"secondaryColor\": \"#676778\",\r\n    \"cssVariables\": {\r\n      \"--primary-color\": \"#ff3e00\",\r\n      \"--secondary-color\": \"#676778\"\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Using Theme Values\r\n\r\n```svelte\r\n<script>\r\n  import { useConfig } from '@atlantis-gr/svelte-config';\r\n  \r\n  const { config } = useConfig();\r\n  \r\n  $: primaryColor = $config.branding?.primaryColor || '#000000';\r\n</script>\r\n\r\n<style>\r\n  .themed-button {\r\n    background-color: var(--primary-color, {primaryColor});\r\n  }\r\n</style>\r\n```\r\n\r\n## 🔄 Dynamic Updates\r\n\r\n### Updating Configuration at Runtime\r\n\r\n```typescript\r\nimport { useConfig } from '@atlantis-gr/svelte-config';\r\n\r\nconst { service } = useConfig();\r\n\r\n// Update feature flags\r\nfunction toggleFeature(flagName: string) {\r\n  service.update({\r\n    features: {\r\n      [flagName]: !service.get(`features.${flagName}`)\r\n    }\r\n  });\r\n}\r\n\r\n// Batch updates\r\nfunction updateMultipleSettings(updates: Partial<AppConfig>) {\r\n  service.update(updates);\r\n}\r\n```\r\n\r\n### Server-Side Configuration Updates\r\n\r\n```typescript\r\n// API endpoint for configuration updates\r\nasync function updateConfigFromServer() {\r\n  const response = await fetch('/api/config', {\r\n    headers: { 'Authorization': `Bearer ${token}` }\r\n  });\r\n  \r\n  const serverConfig = await response.json();\r\n  service.update(serverConfig);\r\n}\r\n```\r\n\r\n## 🧪 Testing\r\n\r\n```bash\r\n# Run type checking\r\nnpm run check\r\n\r\n# Build the library\r\nnpm run build\r\n\r\n# Format code\r\nnpm run format\r\n```\r\n\r\n### Testing Configuration Components\r\n\r\n```typescript\r\nimport { render } from '@testing-library/svelte';\r\nimport { ConfigProvider, FeatureFlag } from '@atlantis-gr/svelte-config/components';\r\n\r\ntest('feature flag renders when enabled', () => {\r\n  const config = {\r\n    features: { myFeature: true }\r\n  };\r\n  \r\n  const { getByText } = render(FeatureFlag, {\r\n    props: { flag: 'features.myFeature' },\r\n    context: new Map([['config', config]])\r\n  });\r\n  \r\n  // Test implementation\r\n});\r\n```\r\n\r\n## 📚 Examples\r\n\r\nSee the [sample application](../Svelte.Sample) for complete examples including:\r\n\r\n- Configuration loading and display\r\n- Feature flag implementations\r\n- Environment-specific settings\r\n- Debug tools usage\r\n- Runtime configuration updates\r\n\r\n## 🤝 Contributing\r\n\r\nSee [CONTRIBUTING.md](../CONTRIBUTING.md) for development setup and guidelines.\r\n\r\n## 📄 License\r\n\r\nMIT License - see [LICENSE](../LICENSE) for details.\r\n\r\n## 🆘 Support\r\n\r\n- 📖 [Documentation](../README.md)\r\n- 🐛 [Issue Tracker](https://github.com/your-org/svelte-components/issues)\r\n- 💬 [Discussions](https://github.com/your-org/svelte-components/discussions)","readmeFilename":"README.md","_rev":"1-8afbfbcd49ebd97370159f93fa5a7b69"}