@togglely/sdk-svelte 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +133 -0
- package/package.json +37 -0
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# @togglely/sdk-svelte
|
|
2
|
+
|
|
3
|
+
Svelte SDK for Togglely - Feature toggles with stores.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @togglely/sdk-svelte
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Initialize
|
|
14
|
+
|
|
15
|
+
```svelte
|
|
16
|
+
<script>
|
|
17
|
+
import { initTogglely } from '@togglely/sdk-svelte';
|
|
18
|
+
|
|
19
|
+
initTogglely({
|
|
20
|
+
apiKey: 'your-api-key',
|
|
21
|
+
environment: 'production',
|
|
22
|
+
baseUrl: 'https://your-togglely-instance.com'
|
|
23
|
+
});
|
|
24
|
+
</script>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Stores
|
|
28
|
+
|
|
29
|
+
#### `toggle(key, defaultValue)`
|
|
30
|
+
|
|
31
|
+
Check if a boolean feature toggle is enabled:
|
|
32
|
+
|
|
33
|
+
```svelte
|
|
34
|
+
<script>
|
|
35
|
+
import { toggle } from '@togglely/sdk-svelte';
|
|
36
|
+
|
|
37
|
+
const isEnabled = toggle('new-feature', false);
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
{#if $isEnabled}
|
|
41
|
+
<NewFeature />
|
|
42
|
+
{:else}
|
|
43
|
+
<OldFeature />
|
|
44
|
+
{/if}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
#### `stringToggle(key, defaultValue)`
|
|
48
|
+
|
|
49
|
+
Get a string toggle value:
|
|
50
|
+
|
|
51
|
+
```svelte
|
|
52
|
+
<script>
|
|
53
|
+
const message = stringToggle('welcome-message', 'Hello');
|
|
54
|
+
</script>
|
|
55
|
+
|
|
56
|
+
<p>{$message}</p>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### `numberToggle(key, defaultValue)`
|
|
60
|
+
|
|
61
|
+
Get a number toggle value:
|
|
62
|
+
|
|
63
|
+
```svelte
|
|
64
|
+
<script>
|
|
65
|
+
const limit = numberToggle('max-items', 10);
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<p>Max items: {$limit}</p>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
#### `jsonToggle(key, defaultValue)`
|
|
72
|
+
|
|
73
|
+
Get a JSON toggle value:
|
|
74
|
+
|
|
75
|
+
```svelte
|
|
76
|
+
<script>
|
|
77
|
+
const config = jsonToggle('app-config', { theme: 'light' });
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
<p>Theme: {$config.theme}</p>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
#### `toggles()`
|
|
84
|
+
|
|
85
|
+
Get all toggles:
|
|
86
|
+
|
|
87
|
+
```svelte
|
|
88
|
+
<script>
|
|
89
|
+
const allToggles = toggles();
|
|
90
|
+
</script>
|
|
91
|
+
|
|
92
|
+
{#each Object.entries($allToggles) as [key, toggle]}
|
|
93
|
+
<p>{key}: {toggle.value}</p>
|
|
94
|
+
{/each}
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
#### `togglelyState()`
|
|
98
|
+
|
|
99
|
+
Get the SDK state:
|
|
100
|
+
|
|
101
|
+
```svelte
|
|
102
|
+
<script>
|
|
103
|
+
const state = togglelyState();
|
|
104
|
+
</script>
|
|
105
|
+
|
|
106
|
+
{#if $state.isOffline}
|
|
107
|
+
<p>Using offline mode</p>
|
|
108
|
+
{/if}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Action
|
|
112
|
+
|
|
113
|
+
Use the `featureToggle` action to show/hide elements:
|
|
114
|
+
|
|
115
|
+
```svelte
|
|
116
|
+
<script>
|
|
117
|
+
import { featureToggle } from '@togglely/sdk-svelte';
|
|
118
|
+
</script>
|
|
119
|
+
|
|
120
|
+
<div use:featureToggle={'new-feature'}>
|
|
121
|
+
Only visible when toggle is enabled
|
|
122
|
+
</div>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Context
|
|
126
|
+
|
|
127
|
+
```svelte
|
|
128
|
+
<script>
|
|
129
|
+
import { setTogglelyContext } from '@togglely/sdk-svelte';
|
|
130
|
+
|
|
131
|
+
setTogglelyContext({ userId: '123', email: 'user@example.com' });
|
|
132
|
+
</script>
|
|
133
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@togglely/sdk-svelte",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Svelte SDK for Togglely - Feature toggles with stores",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.esm.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"svelte": "dist/index.js",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "tsc && rollup -c",
|
|
14
|
+
"test": "jest"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"feature-flags",
|
|
18
|
+
"feature-toggles",
|
|
19
|
+
"togglely",
|
|
20
|
+
"svelte",
|
|
21
|
+
"stores"
|
|
22
|
+
],
|
|
23
|
+
"author": "Togglely",
|
|
24
|
+
"license": "MIT",
|
|
25
|
+
"peerDependencies": {
|
|
26
|
+
"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@togglely/sdk-core": "^1.0.0"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@rollup/plugin-typescript": "^11.1.5",
|
|
33
|
+
"rollup": "^4.9.1",
|
|
34
|
+
"tslib": "^2.6.2",
|
|
35
|
+
"typescript": "^5.3.3"
|
|
36
|
+
}
|
|
37
|
+
}
|