Something failed!
+There was an error loading the app. Please make sure you have the environment variables properly setup
+ +diff --git a/.github/workflows/svelte.yml b/.github/workflows/svelte.yml
new file mode 100644
index 0000000000..f7f3c861f3
--- /dev/null
+++ b/.github/workflows/svelte.yml
@@ -0,0 +1,25 @@
+name: sdk/svelte
+
+on:
+ push:
+ branches: [main, 'feat/**']
+ paths-ignore:
+ - '**.md' #Do not need to run CI for markdown changes.
+ pull_request:
+ branches: [main, 'feat/**']
+ paths-ignore:
+ - '**.md'
+
+jobs:
+ build-test-svelte:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ - id: shared
+ name: Shared CI Steps
+ uses: ./actions/ci
+ with:
+ workspace_name: '@launchdarkly/svelte-client-sdk'
+ workspace_path: packages/sdk/svelte
+ should_build_docs: false
diff --git a/package.json b/package.json
index 204f37e542..f14cbd3f7d 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
"packages/sdk/react-universal/example",
"packages/sdk/vercel",
"packages/sdk/svelte",
+ "packages/sdk/svelte/example",
"packages/sdk/akamai-base",
"packages/sdk/akamai-base/example",
"packages/sdk/akamai-edgekv",
diff --git a/packages/sdk/svelte/README.md b/packages/sdk/svelte/README.md
new file mode 100644
index 0000000000..1095307e31
--- /dev/null
+++ b/packages/sdk/svelte/README.md
@@ -0,0 +1,144 @@
+# LaunchDarkly Svelte Client SDK
+
+# ⛔️⛔️⛔️⛔️
+
+> [!CAUTION]
+> This library is a alpha version and should not be considered ready for production use while this message is visible.
+
+This is the Svelte Client SDK for LaunchDarkly. It is a wrapper around the LaunchDarkly JavaScript SDK but with a Svelte-friendly API.
+
+## Getting started
+
+First, install the package:
+
+```bash
+# npm
+npm install @launchdarkly/svelte-client-sdk
+
+# yarn
+yarn add @launchdarkly/svelte-client-sdk
+```
+
+Then, initialize the SDK with your client-side ID using the `LDProvider` component:
+
+```svelte
+
+
+// Use context relevant to your application
+const context = {
+ kind: 'user',
+ key: 'user-key',
+};
+
+ this will render if the feature flag is on this will render if the feature flag is off
{$flagValue}
+``` + +#### Getting all flag values + +If you need to get all flag values you can use the `flags` object. The `flags` object is an instance of [Svelte Store](https://svelte.dev/docs/svelte-store), which means you can use it with the `$` store subscriber syntax or the `subscribe` method. Here is an example of how to use the `flags` object: + +```svelte + + +{#each Object.keys($allFlags) as flagName} +{flagName}: {$allFlags[flagName]}
+{/each} +``` + +## About LaunchDarkly + +- LaunchDarkly is a continuous delivery platform that provides feature flags as a service and allows developers to iterate quickly and safely. We allow you to easily flag your features and manage them from the LaunchDarkly dashboard. With LaunchDarkly, you can: + - Roll out a new feature to a subset of your users (like a group of users who opt-in to a beta tester group), gathering feedback and bug reports from real-world use cases. + - Gradually roll out a feature to an increasing percentage of users, and track the effect that the feature has on key metrics (for instance, how likely is a user to complete a purchase if they have feature A versus feature B?). + - Turn off a feature that you realize is causing performance problems in production, without needing to re-deploy, or even restart the application with a changed configuration file. + - Grant access to certain features based on user attributes, like payment plan (eg: users on the ‘gold’ plan get access to more features than users in the ‘silver’ plan). + - Disable parts of your application to facilitate maintenance, without taking everything offline. +- LaunchDarkly provides feature flag SDKs for a wide variety of languages and technologies. Read [our documentation](https://docs.launchdarkly.com/sdk) for a complete list. +- Explore LaunchDarkly + - [launchdarkly.com](https://www.launchdarkly.com/ 'LaunchDarkly Main Website') for more information + - [docs.launchdarkly.com](https://docs.launchdarkly.com/ 'LaunchDarkly Documentation') for our documentation and SDK reference guides + - [apidocs.launchdarkly.com](https://apidocs.launchdarkly.com/ 'LaunchDarkly API Documentation') for our API documentation + - [blog.launchdarkly.com](https://blog.launchdarkly.com/ 'LaunchDarkly Blog Documentation') for the latest product updates + +## Credits + +- Original Svelte SDK code contributed by [Robinson Marquez](https://github.com/nosnibor89) diff --git a/packages/sdk/svelte/example/.eslintignore b/packages/sdk/svelte/example/.eslintignore new file mode 100644 index 0000000000..38972655fa --- /dev/null +++ b/packages/sdk/svelte/example/.eslintignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/packages/sdk/svelte/example/.eslintrc.cjs b/packages/sdk/svelte/example/.eslintrc.cjs new file mode 100644 index 0000000000..0b757582c0 --- /dev/null +++ b/packages/sdk/svelte/example/.eslintrc.cjs @@ -0,0 +1,31 @@ +/** @type { import("eslint").Linter.Config } */ +module.exports = { + root: true, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:svelte/recommended', + 'prettier' + ], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint'], + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020, + extraFileExtensions: ['.svelte'] + }, + env: { + browser: true, + es2017: true, + node: true + }, + overrides: [ + { + files: ['*.svelte'], + parser: 'svelte-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser' + } + } + ] +}; diff --git a/packages/sdk/svelte/example/.gitignore b/packages/sdk/svelte/example/.gitignore new file mode 100644 index 0000000000..ac7211b403 --- /dev/null +++ b/packages/sdk/svelte/example/.gitignore @@ -0,0 +1,11 @@ +.DS_Store +node_modules +/build +/dist +/.svelte-kit +/package +.env +.env.* +!.env.example +vite.config.js.timestamp-* +vite.config.ts.timestamp-* diff --git a/packages/sdk/svelte/example/.npmrc b/packages/sdk/svelte/example/.npmrc new file mode 100644 index 0000000000..b6f27f1359 --- /dev/null +++ b/packages/sdk/svelte/example/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/packages/sdk/svelte/example/.prettierignore b/packages/sdk/svelte/example/.prettierignore new file mode 100644 index 0000000000..cc41cea9b2 --- /dev/null +++ b/packages/sdk/svelte/example/.prettierignore @@ -0,0 +1,4 @@ +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/packages/sdk/svelte/example/.prettierrc b/packages/sdk/svelte/example/.prettierrc new file mode 100644 index 0000000000..95730232b6 --- /dev/null +++ b/packages/sdk/svelte/example/.prettierrc @@ -0,0 +1,8 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte"], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/packages/sdk/svelte/example/README.md b/packages/sdk/svelte/example/README.md new file mode 100644 index 0000000000..b74eaeb4b7 --- /dev/null +++ b/packages/sdk/svelte/example/README.md @@ -0,0 +1,44 @@ +# LaunchDarkly Svelte Client SDK Example + +This example project demonstrates the usage of the `@launchdarkly/svelte-client-sdk`. It showcases how to conditionally render content based on feature flags using the `LDFlag` component. + +## Installing Dependencies and Setting Environment Variables + +First, install the project dependencies: + +```bash +# npm +npm install + +# yarn +yarn install +``` + +Next, create a `.env` file in the root of the project and add your LaunchDarkly client-side ID and flag key. You can obtain these from any LaunchDarkly project/environment you choose. + +```bash +PUBLIC_LD_CLIENT_ID=your-client-side-id +PUBLIC_LD_FLAG_KEY=your-flag-key +``` + +Note: The flag specified by `PUBLIC_LD_FLAG_KEY` must be a boolean flag. + +## Running the Project + +To run the project, use the following command: + +```bash +# npm +npm run dev + +# yarn +yarn dev +``` + +This will start the development server. Open your browser and navigate to the provided URL to see the example in action. The box will change its background color based on the value of the feature flag specified by `PUBLIC_LD_FLAG_KEY`. + +### Role of `LDProvider` + +The `LDProvider` component is used to initialize the LaunchDarkly client and provide the feature flag context to the rest of the application. It requires a `clientID` and a `context` object. The `context` object typically contains information about the user or environment, which LaunchDarkly uses to determine the state of feature flags. + +In this example, the `LDProvider` wraps the entire application, ensuring that all child components have access to the feature flag data. The `slot="initializing"` is used to display a loading message while the flags are being fetched. diff --git a/packages/sdk/svelte/example/package.json b/packages/sdk/svelte/example/package.json new file mode 100644 index 0000000000..7d0b084570 --- /dev/null +++ b/packages/sdk/svelte/example/package.json @@ -0,0 +1,49 @@ +{ + "name": "ld-svelte-example", + "version": "0.0.1", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview" + }, + "exports": { + ".": { + "types": "./dist/index.d.ts", + "svelte": "./dist/index.js", + "default": "./dist/index.js" + } + }, + "files": [ + "dist", + "!dist/**/*.test.*", + "!dist/**/*.spec.*" + ], + "svelte": "./dist/index.js", + "types": "./dist/index.d.ts", + "type": "module", + "dependencies": { + "@launchdarkly/svelte-client-sdk": "workspace:^", + "esm-env": "^1.0.0", + "svelte": "^5.4.0" + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^3.0.0", + "@sveltejs/kit": "^2.0.0", + "@sveltejs/package": "^2.0.0", + "@sveltejs/vite-plugin-svelte": "^5.0.1", + "@types/eslint": "8.56.0", + "@typescript-eslint/eslint-plugin": "^6.0.0", + "@typescript-eslint/parser": "^6.0.0", + "eslint": "^8.56.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-svelte": "^2.35.1", + "jsdom": "^24.0.0", + "prettier": "^3.1.1", + "prettier-plugin-svelte": "^3.1.2", + "svelte-check": "^3.6.0", + "tslib": "^2.4.1", + "typescript": "^5.0.0", + "vite": "^6.0.2", + "vitest": "^2.1.8" + } +} diff --git a/packages/sdk/svelte/example/src/app.d.ts b/packages/sdk/svelte/example/src/app.d.ts new file mode 100644 index 0000000000..743f07b2e5 --- /dev/null +++ b/packages/sdk/svelte/example/src/app.d.ts @@ -0,0 +1,13 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } +} + +export {}; diff --git a/packages/sdk/svelte/example/src/app.html b/packages/sdk/svelte/example/src/app.html new file mode 100644 index 0000000000..f22aeaad5e --- /dev/null +++ b/packages/sdk/svelte/example/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +There was an error loading the app. Please make sure you have the environment variables properly setup
+ +loading flags...
+this box is lightblue when flag is on ({PUBLIC_LD_FLAG_KEY})
+this box is lightyellow when flag is off ({PUBLIC_LD_FLAG_KEY})
+