{"_id":"@electric-ai/electric-sdk-stencil","_rev":"2-bba19bd828b1a637d66b0c1eaa2ff271","name":"@electric-ai/electric-sdk-stencil","dist-tags":{"latest":"1.5.0"},"versions":{"1.0.0-rc.1":{"name":"@electric-ai/electric-sdk-stencil","version":"1.0.0-rc.1","license":"MIT","_id":"@electric-ai/electric-sdk-stencil@1.0.0-rc.1","maintainers":[{"name":"electric_ai_engineering","email":"engineering@electric.ai"},{"name":"tommcgurlelectric","email":"tom.mcgurl@electric.ai"},{"name":"devinviss_electric","email":"devin.visslailli@electric.ai"},{"name":"matthew.haeberle","email":"matthew.haeberle@electric.ai"}],"homepage":"https://github.com/electric-ai/electric-sdk-stencil#readme","bugs":{"url":"https://github.com/electric-ai/electric-sdk-stencil/issues"},"dist":{"shasum":"15610046f9cc30c4c9d675352713e0b1605a3c10","tarball":"https://registry.npmjs.org/@electric-ai/electric-sdk-stencil/-/electric-sdk-stencil-1.0.0-rc.1.tgz","fileCount":170,"integrity":"sha512-jgjihklNB+rxXq3T1U2OJIdaZk+g2LF3jPdvUZbceka4krdVOd/B5xwv/GeAl/yeYyxW4Wxj/CYNC3auM/qdCA==","signatures":[{"sig":"MEUCIAI1qnLwn7bdOBqY9JwkNhuWbQIfEAPB6hJAj/AhKLvwAiEAxl+9K1YxQMscLyk/PuLT4Z1OpGkCxVHAd109Q6MEi34=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3011015},"main":"dist/index.cjs.js","_from":"file:electric-ai-electric-sdk-stencil-1.0.0-rc.1.tgz","types":"dist/types/index.d.ts","unpkg":"dist/electric-sdk-stencil/electric-sdk-stencil.esm.js","module":"dist/index.js","exports":{".":{"import":"./dist/electric-sdk-stencil/electric-sdk-stencil.esm.js","require":"./dist/index.cjs.js"},"./dist/*":{"types":"./dist/*","import":"./dist/*"},"./loader":{"types":"./loader/index.d.ts","import":"./loader/index.js","require":"./loader/index.cjs.js"},"./components/*":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js"}},"scripts":{"test":"stencil test --spec --e2e","build":"stencil build","start":"stencil build --dev --watch --serve --port 3000","generate":"stencil generate","test.watch":"stencil test --spec --e2e --watchAll"},"_npmUser":{"name":"devinviss_electric","email":"devin.visslailli@electric.ai"},"_resolved":"/private/var/folders/7d/k3dt4cdd0qsgzsqyrr4nfjmr0000gn/T/8247409ff5e8f2e2af49a9def81f485b/electric-ai-electric-sdk-stencil-1.0.0-rc.1.tgz","_integrity":"sha512-jgjihklNB+rxXq3T1U2OJIdaZk+g2LF3jPdvUZbceka4krdVOd/B5xwv/GeAl/yeYyxW4Wxj/CYNC3auM/qdCA==","collection":"dist/collection/collection-manifest.json","repository":{"url":"git+https://github.com/electric-ai/electric-sdk-stencil.git","type":"git"},"_npmVersion":"11.5.2","description":"Framework-agnostic Electric SDK web components built with Stencil","directories":{},"_nodeVersion":"24.6.0","dependencies":{"@stencil/store":"^2.0.16","@auth0/auth0-spa-js":"^2.1.3"},"_hasShrinkwrap":false,"collection:main":"dist/collection/index.js","devDependencies":{"jest":"^29.7.0","jest-cli":"^29.7.0","puppeteer":"^24.3.0","typescript":"^5.9.3","@types/jest":"^29.5.14","@types/node":"^22.13.5","@stencil/core":"^4.27.1","@stencil/react-output-target":"^1.2.0"},"_npmOperationalInternal":{"tmp":"tmp/electric-sdk-stencil_1.0.0-rc.1_1774989241456_0.32979857805309276","host":"s3://npm-registry-packages-npm-production"}},"1.5.0":{"name":"@electric-ai/electric-sdk-stencil","version":"1.5.0","description":"Framework-agnostic Electric SDK web components built with Stencil","main":"dist/index.cjs.js","module":"dist/index.js","types":"dist/types/index.d.ts","collection":"dist/collection/collection-manifest.json","collection:main":"dist/collection/index.js","unpkg":"dist/electric-sdk-stencil/electric-sdk-stencil.esm.js","exports":{".":{"import":"./dist/electric-sdk-stencil/electric-sdk-stencil.esm.js","require":"./dist/index.cjs.js"},"./dist/components":{"import":"./dist/components/index.js","types":"./dist/types/components.d.ts"},"./dist/*":{"import":"./dist/*","types":"./dist/*"},"./components/*":{"import":"./dist/components/*.js","types":"./dist/components/*.d.ts"},"./loader":{"import":"./loader/index.js","require":"./loader/index.cjs.js","types":"./loader/index.d.ts"}},"repository":{"type":"git","url":"git+https://github.com/electric-ai/electric-sdk-stencil.git"},"scripts":{"build":"stencil build && node scripts/patch-dist-types.js","start":"stencil build --dev --watch --serve --port 3000","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll","generate":"stencil generate"},"dependencies":{"@auth0/auth0-spa-js":"^2.1.3","@stencil/store":"^2.0.16"},"devDependencies":{"@stencil/core":"^4.27.1","@stencil/react-output-target":"^1.5.0","@types/jest":"^29.5.14","@types/node":"^22.13.5","jest":"^29.7.0","jest-cli":"^29.7.0","puppeteer":"^24.3.0","typescript":"^5.9.3"},"license":"MIT","gitHead":"8817ef1b74284f639fde736c6455d70994faafe6","_id":"@electric-ai/electric-sdk-stencil@1.5.0","bugs":{"url":"https://github.com/electric-ai/electric-sdk-stencil/issues"},"homepage":"https://github.com/electric-ai/electric-sdk-stencil#readme","_nodeVersion":"22.13.1","_npmVersion":"11.13.0","dist":{"integrity":"sha512-RrzmWXjM0MeqF90B/ydKnuO4YNgpRVWTl3iabrmdzVHoyX8wy7MXlNgNOPeFLM3oRQB7N40knmnj9Rqd2VgFCw==","shasum":"7d721b9ed713414ae2d81102d2a8d5475654a4a5","tarball":"https://registry.npmjs.org/@electric-ai/electric-sdk-stencil/-/electric-sdk-stencil-1.5.0.tgz","fileCount":176,"unpackedSize":3064719,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDX+JpUBq+6TVjvPyJiV/mV70X1nrtLheNdOeoDQ+c4ogIgWxHS+zxBSOvRpRrRRlI6ZBs9N94Xfrzi1xOoZC865v4="}]},"_npmUser":{"name":"CircleCI","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"circleci","oidcConfigId":"oidc:5f60c818-b328-4e49-9ef6-43abd194c2eb"}},"directories":{},"maintainers":[{"name":"electric_ai_engineering","email":"engineering@electric.ai"},{"name":"tommcgurlelectric","email":"tom.mcgurl@electric.ai"},{"name":"devinviss_electric","email":"devin.visslailli@electric.ai"},{"name":"matthew.haeberle","email":"matthew.haeberle@electric.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/electric-sdk-stencil_1.5.0_1777953999997_0.29083798396136173"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-31T20:34:01.325Z","modified":"2026-05-05T04:06:40.402Z","1.0.0-rc.1":"2026-03-31T20:34:01.700Z","1.5.0":"2026-05-05T04:06:40.233Z"},"bugs":{"url":"https://github.com/electric-ai/electric-sdk-stencil/issues"},"license":"MIT","homepage":"https://github.com/electric-ai/electric-sdk-stencil#readme","repository":{"type":"git","url":"git+https://github.com/electric-ai/electric-sdk-stencil.git"},"description":"Framework-agnostic Electric SDK web components built with Stencil","maintainers":[{"name":"electric_ai_engineering","email":"engineering@electric.ai"},{"name":"tommcgurlelectric","email":"tom.mcgurl@electric.ai"},{"name":"devinviss_electric","email":"devin.visslailli@electric.ai"},{"name":"matthew.haeberle","email":"matthew.haeberle@electric.ai"}],"readme":"# Electric SDK - Stencil Web Components\n\nFramework-agnostic web components for the Electric SDK, built with Stencil. Use with React, Vue, Angular, or vanilla JavaScript.\n\n## Features\n\n- 🚀 **Framework-agnostic** - Works with any framework or vanilla JavaScript\n- 🔐 **Built-in Authentication** - Integrated Auth0 authentication\n- 🎨 **Shadow DOM** - Encapsulated styles, no CSS conflicts\n- 📦 **Small Bundle Size** - No framework dependencies\n- 🔧 **TypeScript Support** - Full type definitions included\n- 🌐 **Native Web Components** - Standards-based, future-proof\n\n## Installation\n\n```bash\nnpm install electric-sdk-stencil\n```\n\n> **For SDK Development:** This project uses `pnpm` for package management. If you're contributing to the SDK or building from source, use `pnpm install` instead of `npm install`.\n\n## Components\n\n### electric-asset-list\n\nDisplays a list of user assets with built-in authentication.\n\n```html\n<electric-asset-list environment=\"staging\" auto-login=\"true\" use-popup-auth=\"true\"></electric-asset-list>\n```\n\n**Props:**\n\n- `environment` - Environment: \"staging\", \"demo\", or \"production\" (default: \"staging\")\n- `organization-id` - Organization ID\n- `auto-login` - Automatically attempt login (default: true)\n- `use-popup-auth` - Use popup instead of redirect (default: true)\n- `login-redirect-uri` - Custom redirect URI after login\n- `custom-class` - Custom CSS class name\n\n**Events:**\n\n- `errorOccurred` - Emitted when an error occurs\n- `loadingChanged` - Emitted when loading state changes\n\n### electric-asset-item\n\nDisplays a single asset/device (used internally by electric-asset-list).\n\n```html\n<electric-asset-item .device=\"${deviceObject}\"></electric-asset-item>\n```\n\n### electric-purchase-hardware\n\nEmbeds the hardware purchase interface via iframe.\n\n```html\n<electric-purchase-hardware iframe-url=\"https://example.com/purchase\" width=\"100%\" height=\"600px\" iframe-title=\"Purchase Hardware\"></electric-purchase-hardware>\n```\n\n### electric-auth-provider\n\nOptional wrapper for initializing SDK configuration once for multiple components.\n\n```html\n<electric-auth-provider environment=\"staging\" organization-id=\"org-123\">\n  <electric-asset-list></electric-asset-list>\n  <electric-purchase-hardware></electric-purchase-hardware>\n</electric-auth-provider>\n```\n\n## Usage\n\n### Vanilla JavaScript / HTML\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <script type=\"module\" src=\"https://unpkg.com/electric-sdk-stencil/dist/electric-sdk-stencil/electric-sdk-stencil.esm.js\"></script>\n  </head>\n  <body>\n    <electric-asset-list environment=\"staging\" auto-login=\"true\"></electric-asset-list>\n\n    <script>\n      const assetList = document.querySelector('electric-asset-list');\n\n      assetList.addEventListener('errorOccurred', e => {\n        console.error('Error:', e.detail);\n      });\n\n      assetList.addEventListener('loadingChanged', e => {\n        console.log('Loading:', e.detail);\n      });\n    </script>\n  </body>\n</html>\n```\n\n### React\n\n**Recommended:** Use the auto-generated React components:\n\n```tsx\nimport { defineCustomElements } from 'electric-sdk-stencil/loader';\nimport { ElectricAssetList } from 'electric-sdk-stencil/react';\nimport { authStore } from 'electric-sdk-stencil';\nimport { useEffect, useState } from 'react';\n\n// Call once in your app (e.g., in index.tsx or App.tsx)\ndefineCustomElements();\n\nfunction App() {\n  const [authState, setAuthState] = useState(authStore.state);\n\n  useEffect(() => {\n    const unsubscribe = authStore.onChange('isAuthenticated', () => {\n      setAuthState({ ...authStore.state });\n    });\n    return () => unsubscribe();\n  }, []);\n\n  if (authState.isLoading) return <div>Loading...</div>;\n\n  return <ElectricAssetList environment=\"staging\" autoLogin={true} onErrorOccurred={e => console.error(e.detail)} />;\n}\n```\n\nThe React integration provides:\n\n- Auto-generated React components via `@stencil/react-output-target`\n- Full TypeScript support\n- Event handling through props\n- Access to auth state via `authStore`\n\nSee the [React documentation](docs/docs/frameworks/react.md) for more details.\n\n### Vue 3\n\n```vue\n<template>\n  <electric-asset-list environment=\"staging\" :auto-login=\"true\" :use-popup-auth=\"true\" @errorOccurred=\"handleError\" @loadingChanged=\"handleLoadingChange\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { defineCustomElements } from 'electric-sdk-stencil/loader';\n\n// Call once\ndefineCustomElements();\n\nconst handleError = (e: CustomEvent<string>) => {\n  console.error('Error:', e.detail);\n};\n\nconst handleLoadingChange = (e: CustomEvent<boolean>) => {\n  console.log('Loading:', e.detail);\n};\n</script>\n```\n\nConfigure Vue to ignore custom elements:\n\n```typescript\n// main.ts or vite.config.ts\napp.config.compilerOptions.isCustomElement = tag => tag.startsWith('electric-');\n```\n\n### Angular\n\n```typescript\n// app.module.ts\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { defineCustomElements } from 'electric-sdk-stencil/loader';\n\ndefineCustomElements();\n\n@NgModule({\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  // ...\n})\nexport class AppModule {}\n```\n\n```html\n<!-- component.html -->\n<electric-asset-list\n  environment=\"staging\"\n  [auto-login]=\"true\"\n  [use-popup-auth]=\"true\"\n  (errorOccurred)=\"handleError($event)\"\n  (loadingChanged)=\"handleLoadingChange($event)\"\n></electric-asset-list>\n```\n\n```typescript\n// component.ts\nexport class AppComponent {\n  handleError(event: CustomEvent<string>) {\n    console.error('Error:', event.detail);\n  }\n\n  handleLoadingChange(event: CustomEvent<boolean>) {\n    console.log('Loading:', event.detail);\n  }\n}\n```\n\n## Advanced Usage\n\n### Programmatic API Access\n\n```typescript\nimport { getAuthService, getApiService, authStore, initializeElectricSDK } from 'electric-sdk-stencil';\n\n// Initialize SDK\ninitializeElectricSDK({\n  environment: 'staging',\n  organizationId: 'org-123',\n});\n\n// Access auth service\nconst authService = getAuthService();\nawait authService.loginWithPopup();\nconst isAuthenticated = authService.isAuthenticated();\n\n// Access API service\nconst apiService = getApiService();\nconst devices = await apiService.fetchUserDevices('user-id', 'org-id');\n\n// Subscribe to auth state changes\nauthStore.onChange('isAuthenticated', isAuth => {\n  console.log('Auth changed:', isAuth);\n});\n```\n\n### Custom Configuration\n\n```typescript\nimport { initializeElectricSDK } from 'electric-sdk-stencil';\n\ninitializeElectricSDK({\n  environment: 'production',\n  organizationId: 'your-org-id',\n  customConfig: {\n    coreEntityUrl: 'https://custom-api.example.com',\n    auth0Domain: 'custom-auth.example.com',\n    auth0ClientId: 'your-client-id',\n    auth0CallbackUrl: 'https://your-app.com/callback',\n    auth0Audience: 'https://your-api.example.com',\n    auth0Connection: 'your-auth0-connection', // Optional: specify Auth0 connection (e.g., 'adp-workforce-now')\n  },\n});\n```\n\n## Development\n\n> **Note:** This project uses `pnpm` for package management. Please use `pnpm` instead of `npm` for all commands.\n\n```bash\n# Install dependencies\npnpm install\n\n# Start development server with live reload\npnpm start\n\n# Build for production\npnpm run build\n\n# Run tests\npnpm test\n\n# Run tests in watch mode\npnpm run test.watch\n\n# Generate a new component\npnpm run generate\n```\n\n## Building from Source\n\n```bash\ngit clone https://github.com/electric-ai/electric-sdk-stencil.git\ncd electric-sdk-stencil\npnpm install\npnpm run build\n```\n\n## Browser Support\n\n- Chrome/Edge (latest)\n- Firefox (latest)\n- Safari (latest)\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## TypeScript Support\n\nFull TypeScript definitions are included. Import types:\n\n```typescript\nimport type { Employee, Device, ElectricSDKConfig, ElectricSDKOptions } from 'electric-sdk-stencil';\n```\n\n## Contributing\n\nContributions are welcome! Please read our contributing guidelines before submitting PRs.\n\n## License\n\nMIT\n\n## Support\n\nFor issues and questions, please open an issue on GitHub.\n","readmeFilename":"README.md"}