From 536aa651b0a15391a1b16308620ac8ba44a2c934 Mon Sep 17 00:00:00 2001 From: Ryan Lamb <4955475+kinyoklion@users.noreply.github.com> Date: Wed, 28 Aug 2024 11:36:26 -0700 Subject: [PATCH] chore: Scaffold browser SDK project. --- .github/workflows/browser.yml | 33 ++++++++++ .github/workflows/manual-publish-docs.yml | 1 + .github/workflows/manual-publish.yml | 1 + README.md | 19 +++++- package.json | 3 +- packages/sdk/browser/LICENSE | 13 ++++ packages/sdk/browser/README.md | 62 +++++++++++++++++++ packages/sdk/browser/__tests__/index.test.ts | 3 + packages/sdk/browser/package.json | 65 ++++++++++++++++++++ packages/sdk/browser/src/index.ts | 4 ++ packages/sdk/browser/tsconfig.eslint.json | 5 ++ packages/sdk/browser/tsconfig.json | 35 +++++++++++ packages/sdk/browser/tsconfig.ref.json | 7 +++ packages/sdk/browser/tsconfig.test.json | 14 +++++ packages/sdk/browser/typedoc.json | 5 ++ packages/sdk/browser/vite.config.ts | 18 ++++++ tsconfig.json | 3 + 17 files changed, 288 insertions(+), 3 deletions(-) create mode 100644 .github/workflows/browser.yml create mode 100644 packages/sdk/browser/LICENSE create mode 100644 packages/sdk/browser/README.md create mode 100644 packages/sdk/browser/__tests__/index.test.ts create mode 100644 packages/sdk/browser/package.json create mode 100644 packages/sdk/browser/src/index.ts create mode 100644 packages/sdk/browser/tsconfig.eslint.json create mode 100644 packages/sdk/browser/tsconfig.json create mode 100644 packages/sdk/browser/tsconfig.ref.json create mode 100644 packages/sdk/browser/tsconfig.test.json create mode 100644 packages/sdk/browser/typedoc.json create mode 100644 packages/sdk/browser/vite.config.ts diff --git a/.github/workflows/browser.yml b/.github/workflows/browser.yml new file mode 100644 index 000000000..da12b51e5 --- /dev/null +++ b/.github/workflows/browser.yml @@ -0,0 +1,33 @@ +name: sdk/browser + +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-browser: + runs-on: ubuntu-latest + + strategy: + matrix: + # Node versions to run on. + version: [18, 21] + + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.version }} + registry-url: 'https://registry.npmjs.org' + - id: shared + name: Shared CI Steps + uses: ./actions/ci + with: + workspace_name: '@launchdarkly/js-client-sdk' + workspace_path: packages/sdk/browser diff --git a/.github/workflows/manual-publish-docs.yml b/.github/workflows/manual-publish-docs.yml index a56d43212..397bc1a58 100644 --- a/.github/workflows/manual-publish-docs.yml +++ b/.github/workflows/manual-publish-docs.yml @@ -19,6 +19,7 @@ on: - packages/store/node-server-sdk-redis - packages/store/node-server-sdk-dynamodb - packages/telemetry/node-server-sdk-otel + - packages/sdk/browser name: Publish Documentation jobs: build-publish: diff --git a/.github/workflows/manual-publish.yml b/.github/workflows/manual-publish.yml index f8a463ff8..c8ba253ad 100644 --- a/.github/workflows/manual-publish.yml +++ b/.github/workflows/manual-publish.yml @@ -32,6 +32,7 @@ on: - packages/store/node-server-sdk-dynamodb - packages/telemetry/node-server-sdk-otel - packages/tooling/jest + - packages/sdk/browser prerelease: description: 'Is this a prerelease. If so, then the latest tag will not be updated in npm.' type: boolean diff --git a/README.md b/README.md index c50a78700..6da3b2fa0 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,11 @@ This includes shared libraries, used by SDKs and other tools, as well as SDKs. | [@launchdarkly/vercel-server-sdk](packages/sdk/vercel/README.md) | [![NPM][sdk-vercel-npm-badge]][sdk-vercel-npm-link] | [Vercel][package-sdk-vercel-issues] | [![Actions Status][sdk-vercel-ci-badge]][sdk-vercel-ci] | | [@launchdarkly/react-native-client-sdk](packages/sdk/react-native/README.md) | [![NPM][sdk-react-native-npm-badge]][sdk-react-native-npm-link] | [React-Native][package-sdk-react-native-issues] | [![Actions Status][sdk-react-native-ci-badge]][sdk-react-native-ci] | + + | Shared packages | npm | issues | tests | | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------------------- | | [@launchdarkly/js-sdk-common](packages/shared/common/README.md) | [![NPM][common-npm-badge]][common-npm-link] | [Common][package-shared-common-issues] | [![Actions Status][shared-common-ci-badge]][shared-common-ci] | @@ -62,7 +67,7 @@ We encourage pull requests and other contributions from the community. Check out - 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). + - 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 @@ -168,4 +173,14 @@ We encourage pull requests and other contributions from the community. Check out [node-otel-ci]: https://github.com/launchdarkly/js-core/actions/workflows/node-otel.yml [node-otel-npm-badge]: https://img.shields.io/npm/v/@launchdarkly/node-server-sdk-otel.svg?style=flat-square [node-otel-npm-link]: https://www.npmjs.com/package/@launchdarkly/node-server-sdk-otel -[node-otel-issues]: https://github.com/launchdarkly/js-core/issues?q=is%3Aissue+is%3Aopen+label%3A%22package%3A+telemetry%2Fnode-server-sdk-otel%22+ \ No newline at end of file +[node-otel-issues]: https://github.com/launchdarkly/js-core/issues?q=is%3Aissue+is%3Aopen+label%3A%22package%3A+telemetry%2Fnode-server-sdk-otel%22+ +[//]: # 'sdk/browser' +[sdk-browser-ci-badge]: https://github.com/launchdarkly/js-core/actions/workflows/browser.yml/badge.svg +[sdk-browser-ci]: https://github.com/launchdarkly/js-core/actions/workflows/browser.yml +[sdk-browser-npm-badge]: https://img.shields.io/npm/v/@launchdarkly/js-client-sdk.svg?style=flat-square +[sdk-browser-npm-link]: https://www.npmjs.com/package/@launchdarkly/js-client-sdk +[sdk-browser-ghp-badge]: https://img.shields.io/static/v1?label=GitHub+Pages&message=API+reference&color=00add8 +[sdk-browser-ghp-link]: https://launchdarkly.github.io/js-core/packages/sdk/browser/docs/ +[sdk-browser-dm-badge]: https://img.shields.io/npm/dm/@launchdarkly/js-client-sdk.svg?style=flat-square +[sdk-browser-dt-badge]: https://img.shields.io/npm/dt/@launchdarkly/js-client-sdk.svg?style=flat-square +[package-sdk-browser-issues]: https://github.com/launchdarkly/js-core/issues?q=is%3Aissue+is%3Aopen+label%3A%22package%3A+sdk%2Fbrowser%22+ diff --git a/package.json b/package.json index 6789419f7..3fa5d4200 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "packages/store/node-server-sdk-redis", "packages/store/node-server-sdk-dynamodb", "packages/telemetry/node-server-sdk-otel", - "packages/tooling/jest" + "packages/tooling/jest", + "packages/sdk/browser" ], "private": true, "scripts": { diff --git a/packages/sdk/browser/LICENSE b/packages/sdk/browser/LICENSE new file mode 100644 index 000000000..50add35e7 --- /dev/null +++ b/packages/sdk/browser/LICENSE @@ -0,0 +1,13 @@ +Copyright 2024 Catamorphic, Co. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/sdk/browser/README.md b/packages/sdk/browser/README.md new file mode 100644 index 000000000..310404cbe --- /dev/null +++ b/packages/sdk/browser/README.md @@ -0,0 +1,62 @@ +# LaunchDarkly JavaScript SDK for Browsers + + + +> [!CAUTION] +> This library is a beta version and should not be considered ready for production use while this message is visible. + +## Features + +- Supports both React Server Components and Client Components +- Idiomatic server side rendering +- Bootstrapping out of the box + +## Install + +```shell +# npm +npm i @launchdarkly/js-client-sdk + +# yarn +yarn add -D @launchdarkly/js-client-sdk +``` +## Getting started + +Refer to the [SDK documentation](https://docs.launchdarkly.com/sdk/client-side/javascript#getting-started) for instructions on getting started with using the SDK. + +Note: _If you are using JavaScript in a non-browser environment, please check our other SDK packages in [js-core](https://github.com/launchdarkly/js-core)_ +Please note that the JavaScript SDK has two special requirements in terms of your LaunchDarkly environment. First, in terms of the credentials for your environment that appear on your [Account Settings](https://app.launchdarkly.com/settings/projects) dashboard, the JavaScript SDK uses the "Client-side ID"-- not the "SDK key" or the "Mobile key". Second, for any feature flag that you will be using in JavaScript code, you must check the "Make this flag available to client-side SDKs" box on that flag's Settings page. + +## Verifying SDK build provenance with the SLSA framework + +LaunchDarkly uses the [SLSA framework](https://slsa.dev/spec/v1.0/about) (Supply-chain Levels for Software Artifacts) to help developers make their supply chain more secure by ensuring the authenticity and build integrity of our published SDK packages. To learn more, see the [provenance guide](PROVENANCE.md). + +## 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 + +[browser-sdk-ci-badge]: https://github.com/launchdarkly/js-core/actions/workflows/browser.yml/badge.svg +[browser-sdk-ci]: https://github.com/launchdarkly/js-core/actions/workflows/browser.yml +[browser-sdk-npm-badge]: https://img.shields.io/npm/v/@launchdarkly/js-client-sdk.svg?style=flat-square +[browser-sdk-npm-link]: https://www.npmjs.com/package/@launchdarkly/js-client-sdk +[browser-sdk-ghp-badge]: https://img.shields.io/static/v1?label=GitHub+Pages&message=API+reference&color=00add8 +[browser-sdk-ghp-link]: https://launchdarkly.github.io/js-core/packages/sdk/browser/docs/ +[browser-sdk-dm-badge]: https://img.shields.io/npm/dm/@launchdarkly/js-client-sdk.svg?style=flat-square +[browser-sdk-dt-badge]: https://img.shields.io/npm/dt/@launchdarkly/js-client-sdk.svg?style=flat-square diff --git a/packages/sdk/browser/__tests__/index.test.ts b/packages/sdk/browser/__tests__/index.test.ts new file mode 100644 index 000000000..1c44f4715 --- /dev/null +++ b/packages/sdk/browser/__tests__/index.test.ts @@ -0,0 +1,3 @@ +it('can run tests', () => { + expect(true).toBe(true); +}); diff --git a/packages/sdk/browser/package.json b/packages/sdk/browser/package.json new file mode 100644 index 000000000..db1174e65 --- /dev/null +++ b/packages/sdk/browser/package.json @@ -0,0 +1,65 @@ +{ + "name": "@launchdarkly/js-client-sdk", + "version": "0.0.0", + "description": "LaunchDarkly SDK for JavaScript in Browsers", + "homepage": "https://github.com/launchdarkly/js-core/tree/main/packages/sdk/browser", + "repository": { + "type": "git", + "url": "https://github.com/launchdarkly/js-core.git" + }, + "license": "Apache-2.0", + "packageManager": "yarn@3.4.1", + "keywords": [ + "launchdarkly", + "feature flags", + "feature toggles", + "feature management", + "sdk" + ], + "exports": { + "types": "./dist/src/index.d.ts", + "require": "./dist/cjs/index.js", + "import": "./dist/esm/index.js" + }, + "type": "module", + "main": "./dist/cjs/index.js", + "types": "./dist/src/index.d.ts", + "files": [ + "dist" + ], + "scripts": { + "clean": "rimraf dist", + "build": "vite build", + "lint": "eslint . --ext .ts,.tsx", + "prettier": "prettier --write '**/*.@(js|ts|tsx|json|css)' --ignore-path ../../../.prettierignore", + "test": "jest", + "coverage": "yarn test --coverage", + "check": "yarn prettier && yarn lint && yarn build && yarn test" + }, + "dependencies": { + "@launchdarkly/js-client-sdk-common": "1.5.0" + }, + "devDependencies": { + "@launchdarkly/private-js-mocks": "0.0.1", + "@testing-library/react": "^14.1.2", + "@trivago/prettier-plugin-sort-imports": "^4.1.1", + "@types/jest": "^29.5.11", + "@typescript-eslint/eslint-plugin": "^6.20.0", + "@typescript-eslint/parser": "^6.20.0", + "eslint": "^8.45.0", + "eslint-config-airbnb-base": "^15.0.0", + "eslint-config-airbnb-typescript": "^17.1.0", + "eslint-config-prettier": "^8.8.0", + "eslint-plugin-import": "^2.27.5", + "eslint-plugin-jest": "^27.6.3", + "eslint-plugin-prettier": "^5.0.0", + "jest": "^29.7.0", + "prettier": "^3.0.0", + "rimraf": "^5.0.5", + "ts-jest": "^29.1.1", + "typedoc": "0.25.0", + "typescript": "^5.5.3", + "vite": "^5.4.1", + "vite-plugin-dts": "^4.0.3" + } +} diff --git a/packages/sdk/browser/src/index.ts b/packages/sdk/browser/src/index.ts new file mode 100644 index 000000000..a31204dbd --- /dev/null +++ b/packages/sdk/browser/src/index.ts @@ -0,0 +1,4 @@ +export function Hello() { + // eslint-disable-next-line no-console + console.log('HELLO'); +} diff --git a/packages/sdk/browser/tsconfig.eslint.json b/packages/sdk/browser/tsconfig.eslint.json new file mode 100644 index 000000000..8241f86c3 --- /dev/null +++ b/packages/sdk/browser/tsconfig.eslint.json @@ -0,0 +1,5 @@ +{ + "extends": "./tsconfig.json", + "include": ["/**/*.ts", "/**/*.tsx"], + "exclude": ["node_modules"] +} diff --git a/packages/sdk/browser/tsconfig.json b/packages/sdk/browser/tsconfig.json new file mode 100644 index 000000000..b1c92fdd9 --- /dev/null +++ b/packages/sdk/browser/tsconfig.json @@ -0,0 +1,35 @@ +{ + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "declaration": true, + "declarationMap": true, + "jsx": "react-jsx", + "lib": ["es6", "dom"], + "module": "ES6", + "moduleResolution": "node", + "noImplicitOverride": true, + "resolveJsonModule": true, + // Uses "." so it can load package.json. + "rootDir": ".", + "skipLibCheck": true, + // enables importers to jump to source + "sourceMap": true, + "strict": true, + "stripInternal": true, + "target": "ES2017", + "types": ["node", "jest"], + "allowJs": true + }, + "exclude": [ + "vite.config.ts", + "__tests__", + "dist", + "docs", + "example", + "node_modules", + "babel.config.js", + "jest.config.ts", + "jestSetupFile.ts", + "**/*.test.ts*" + ] +} diff --git a/packages/sdk/browser/tsconfig.ref.json b/packages/sdk/browser/tsconfig.ref.json new file mode 100644 index 000000000..3925f645b --- /dev/null +++ b/packages/sdk/browser/tsconfig.ref.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.json", + "include": ["src/**/*", "package.json", "__tests__/index.test.ts"], + "compilerOptions": { + "composite": true + } +} diff --git a/packages/sdk/browser/tsconfig.test.json b/packages/sdk/browser/tsconfig.test.json new file mode 100644 index 000000000..2c617dcaa --- /dev/null +++ b/packages/sdk/browser/tsconfig.test.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "esModuleInterop": true, + "jsx": "react-jsx", + "lib": ["es6", "dom"], + "module": "ES6", + "moduleResolution": "node", + "resolveJsonModule": true, + "rootDir": ".", + "strict": true, + "types": ["jest", "node"] + }, + "exclude": ["dist", "node_modules", "__tests__", "example"] +} diff --git a/packages/sdk/browser/typedoc.json b/packages/sdk/browser/typedoc.json new file mode 100644 index 000000000..7ac616b54 --- /dev/null +++ b/packages/sdk/browser/typedoc.json @@ -0,0 +1,5 @@ +{ + "extends": ["../../../typedoc.base.json"], + "entryPoints": ["src/index.ts"], + "out": "docs" +} diff --git a/packages/sdk/browser/vite.config.ts b/packages/sdk/browser/vite.config.ts new file mode 100644 index 000000000..74378ce66 --- /dev/null +++ b/packages/sdk/browser/vite.config.ts @@ -0,0 +1,18 @@ +/* eslint-disable import/no-extraneous-dependencies */ +// This file intentionally uses dev dependencies as it is a build file. +import { resolve } from 'path'; +import { defineConfig } from 'vite'; +import dts from 'vite-plugin-dts'; + +export default defineConfig({ + plugins: [dts()], + build: { + lib: { + entry: resolve(__dirname, 'src/index.ts'), + name: '@launchdarkly/js-client-sdk', + fileName: (format) => `index.${format}.js`, + formats: ['cjs', 'es'], + }, + rollupOptions: {}, + }, +}); diff --git a/tsconfig.json b/tsconfig.json index e87ecee8f..02923fad6 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -54,6 +54,9 @@ }, { "path": "./packages/tooling/jest/tsconfig.ref.json" + }, + { + "path": "./packages/sdk/browser/tsconfig.ref.json" } ] }