feat: capacitor sdk

.changeset/lazy-steaks-judge.md

@@ -0,0 +1,5 @@
+---
+"@logto/capacitor": major
+---
+
+add Capacitor SDK

.changeset/mighty-plums-remain.md

@@ -0,0 +1,7 @@
+---
+"@logto/browser": patch
+"@logto/client": patch
+"@logto/js": patch
+---
+
+add comment annotations for better dev experience

packages/browser/README.md

@@ -1,9 +1,9 @@
-# Logto JS (Core) SDK
-[![Version](https://img.shields.io/npm/v/@logto/js)](https://www.npmjs.com/package/@logto/js)
+# Logto JS Browser SDK
+[![Version](https://img.shields.io/npm/v/@logto/browser)](https://www.npmjs.com/package/@logto/browser)
 [![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
 [![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)
 
-The Logto JavaScript Core SDK written in TypeScript. Check out our [docs](https://docs.logto.io/JavaScript/browser/) for more information.
+The Logto JavaScript Browser SDK written in TypeScript. Check out our [docs](https://docs.logto.io/JavaScript/browser/) for more information.
 
 We also provide [文档](https://docs.logto.io/zh-cn/sdk/JavaScript/browser/) in Simplified Chinese.
 
@@ -42,4 +42,4 @@ If Logto does not support your front-end framework and you want to create your o
 
 [![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
 [![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/sdk/JavaScript/browser/)
-[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)
+[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)

packages/browser/src/index.ts

@@ -6,13 +6,17 @@
 import { BrowserStorage } from './storage.js';
 import { generateCodeChallenge, generateCodeVerifier, generateState } from './utils/generators.js';
 
+export { createRequester, default as BaseClient } from '@logto/client';
+export { generateCodeChallenge, generateCodeVerifier, generateState } from './utils/generators.js';
+
 export type {
  IdTokenClaims,
  LogtoErrorCode,
  LogtoConfig,
  LogtoClientErrorCode,
  UserInfoResponse,
  InteractionMode,
+ ClientAdapter,
 } from '@logto/client';
 
 export {

packages/capacitor/CHANGELOG.md

@@ -0,0 +1 @@
+# @logto/capacitor

packages/capacitor/FixJsdomEnvironment.js

@@ -0,0 +1,16 @@
+// https://github.com/microsoft/TypeScript/issues/50690
+// eslint-disable-next-line import/no-named-default
+import { default as JSDOMEnvironment } from 'jest-environment-jsdom';
+
+// https://github.com/facebook/jest/blob/v29.4.3/website/versioned_docs/version-29.4/Configuration.md#testenvironment-string
+export default class FixJsdomEnvironment extends JSDOMEnvironment.default {
+ constructor(...args) {
+ super(...args);
+
+ // FIXME https://github.com/jsdom/jsdom/issues/1724
+ this.global.fetch = fetch;
+ this.global.Headers = Headers;
+ this.global.Request = Request;
+ this.global.Response = Response;
+ }
+}

packages/capacitor/README.md

@@ -0,0 +1,36 @@
+# Logto JS Capacitor SDK
+[![Version](https://img.shields.io/npm/v/@logto/capacitor)](https://www.npmjs.com/package/@logto/capacitor)
+[![Build Status](https://github.com/logto-io/js/actions/workflows/main.yml/badge.svg)](https://github.com/logto-io/js/actions/workflows/main.yml)
+[![Codecov](https://img.shields.io/codecov/c/github/logto-io/js)](https://app.codecov.io/gh/logto-io/js?branch=master)
+
+The Logto JavaScript Capacitor SDK written in TypeScript.
+
+## Installation
+
+### Using npm
+
+```bash
+npm install @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
+```
+
+### Using yarn
+
+```bash
+yarn add @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
+```
+
+### Using pnpm
+
+```bash
+pnpm add @logto/capacitor @capacitor/app @capacitor/browser @capacitor/preferences
+```
+
+## What is this and how does it work?
+
+See [Integrate Logto in your application](https://docs.logto.io/docs/recipes/integrate-logto/) for more information.
+
+## Resources
+
+[![Website](https://img.shields.io/badge/website-logto.io-8262F8.svg)](https://logto.io/)
+[![Docs](https://img.shields.io/badge/docs-logto.io-green.svg)](https://docs.logto.io/sdk/JavaScript/browser/)
+[![Discord](https://img.shields.io/discord/965845662535147551?logo=discord&logoColor=ffffff&color=7389D8&cacheSeconds=600)](https://discord.gg/UEPaF3j5e6)

packages/capacitor/jest.config.js

@@ -0,0 +1,10 @@
+import baseConfig from '../../jest.config.js';
+
+/** @type {import('jest').Config} */
+const config = {
+ ...baseConfig,
+ testEnvironment: './FixJsdomEnvironment.js',
+ setupFilesAfterEnv: ['<rootDir>/jest.setup.js', 'jest-matcher-specific-error'],
+};
+
+export default config;

packages/capacitor/jest.setup.js

@@ -0,0 +1,17 @@
+// Need to disable following rules to mock text-decode/text-encoder and crypto for jsdom
+// https://github.com/jsdom/jsdom/issues/1612
+
+import crypto from 'node:crypto';
+
+import { TextDecoder, TextEncoder } from 'text-encoder';
+
+/* eslint-disable @silverhand/fp/no-mutation */
+// Mock WebCrypto in JSDOM
+if (global.window !== undefined) {
+ global.CryptoKey = crypto.webcrypto.CryptoKey;
+ global.crypto.subtle = crypto.webcrypto.subtle;
+}
+
+global.TextDecoder = TextDecoder;
+global.TextEncoder = TextEncoder;
+/* eslint-enable @silverhand/fp/no-mutation */

packages/capacitor/package.json

@@ -0,0 +1,66 @@
+{
+ "name": "@logto/capacitor",
+ "version": "0.1.0",
+ "type": "module",
+ "main": "./lib/index.cjs",
+ "module": "./lib/index.js",
+ "types": "./lib/index.d.ts",
+ "exports": {
+ "types": "./lib/index.d.ts",
+ "require": "./lib/index.cjs",
+ "import": "./lib/index.js",
+ "default": "./lib/index.js"
+ },
+ "files": [
+ "lib"
+ ],
+ "license": "MIT",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/logto-io/js.git",
+ "directory": "packages/capacitor"
+ },
+ "scripts": {
+ "dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+ "precommit": "lint-staged",
+ "check": "tsc --noEmit",
+ "build": "rm -rf lib/ && tsc -p tsconfig.build.json --noEmit && rollup -c",
+ "lint": "eslint --ext .ts src",
+ "test": "jest",
+ "test:coverage": "jest --silent --coverage",
+ "prepack": "pnpm build && pnpm test"
+ },
+ "dependencies": {
+ "@logto/browser": "workspace:^2.1.0"
+ },
+ "devDependencies": {
+ "@capacitor/app": "^5.0.6",
+ "@capacitor/browser": "^5.0.6",
+ "@capacitor/preferences": "^5.0.6",
+ "@silverhand/eslint-config": "^4.0.1",
+ "@silverhand/ts-config": "^4.0.0",
+ "@swc/core": "^1.3.50",
+ "@swc/jest": "^0.2.24",
+ "@types/jest": "^29.5.0",
+ "eslint": "^8.44.0",
+ "jest": "^29.5.0",
+ "jest-environment-jsdom": "^29.5.0",
+ "jest-matcher-specific-error": "^1.0.0",
+ "lint-staged": "^13.0.0",
+ "prettier": "^3.0.0",
+ "text-encoder": "^0.0.4",
+ "typescript": "^5.0.0"
+ },
+ "eslintConfig": {
+ "extends": "@silverhand"
+ },
+ "prettier": "@silverhand/eslint-config/.prettierrc",
+ "publishConfig": {
+ "access": "public"
+ },
+ "peerDependencies": {
+ "@capacitor/app": "^5.0.6",
+ "@capacitor/browser": "^5.0.6",
+ "@capacitor/preferences": "^5.0.6"
+ }
+}

packages/capacitor/rollup.config.js

@@ -0,0 +1 @@
+export { default } from '../../rollup.config.js';

packages/capacitor/src/index.test.ts

@@ -0,0 +1,35 @@
+import { Browser } from '@capacitor/browser';
+
+import CapacitorLogtoClient from './index.js';
+
+jest.mock('@capacitor/browser', () => ({
+ Browser: {
+ open: jest.fn(),
+ },
+}));
+
+class CapacitorLogtoClientTest extends CapacitorLogtoClient {
+ getAdapter() {
+ return this.adapter;
+ }
+}
+const createClient = () =>
+ new CapacitorLogtoClientTest({
+ endpoint: 'https://your.logto.endpoint',
+ appId: 'your-app-id',
+ });
+
+describe('CapacitorLogtoClient', () => {
+ it('should override navigate', async () => {
+ const client = createClient();
+ expect(client.getAdapter().navigate).toBeDefined();
+ await client.getAdapter().navigate('https://example.com');
+
+ const spy = jest.spyOn(Browser, 'open');
+ expect(spy).toHaveBeenCalledWith({
+ url: 'https://example.com',
+ windowName: '_self',
+ presentationStyle: 'popover',
+ });
+ });
+});