Eric Amodio
3 years ago
30 changed files with 2276 additions and 37 deletions
Split View
Diff Options
-
+8 -8.vscode/launch.json
-
+82 -0package.json
-
+16 -1src/commands/gitCommands.ts
-
+36 -1src/commands/quickCommand.steps.ts
-
+5 -2src/commands/quickCommand.ts
-
+5 -0src/commands/showView.ts
-
+5 -0src/constants.ts
-
+35 -0src/container.ts
-
+93 -1src/env/node/git/localGitProvider.ts
-
+23 -0src/errors.ts
-
+15 -0src/git/gitProvider.ts
-
+223 -1src/git/gitProviderService.ts
-
+41 -1src/premium/github/github.ts
-
+83 -0src/premium/github/githubGitProvider.ts
-
+641 -0src/premium/subscription/subscriptionService.ts
-
+23 -6src/quickpicks/items/directive.ts
-
+3 -0src/storage.ts
-
+166 -0src/subscription.ts
-
+12 -0src/system/function.ts
-
+2 -2src/views/nodes/repositoriesNode.ts
-
+13 -3src/views/nodes/viewNode.ts
-
+180 -0src/webviews/apps/premium/home/home.html
-
+80 -0src/webviews/apps/premium/home/home.scss
-
+118 -0src/webviews/apps/premium/home/home.ts
-
+11 -10src/webviews/apps/shared/appWithConfigBase.ts
-
+41 -0src/webviews/premium/home/homeWebviewView.ts
-
+13 -0src/webviews/premium/home/protocol.ts
-
+240 -0src/webviews/webviewViewBase.ts
-
+13 -0webpack.config.js
-
+50 -1yarn.lock
+ 8
- 8
.vscode/launch.json
View File
+ 82
- 0
package.json
View File
+ 16
- 1
src/commands/gitCommands.ts
View File
+ 36
- 1
src/commands/quickCommand.steps.ts
View File
+ 5
- 2
src/commands/quickCommand.ts
View File
+ 5
- 0
src/commands/showView.ts
View File
+ 5
- 0
src/constants.ts
View File
+ 35
- 0
src/container.ts
View File
+ 93
- 1
src/env/node/git/localGitProvider.ts
View File
+ 23
- 0
src/errors.ts
View File
+ 15
- 0
src/git/gitProvider.ts
View File
+ 223
- 1
src/git/gitProviderService.ts
View File
+ 41
- 1
src/premium/github/github.ts
View File
+ 83
- 0
src/premium/github/githubGitProvider.ts
View File
+ 641
- 0
src/premium/subscription/subscriptionService.ts
View File
| @ -0,0 +1,641 @@ | |||
| import { | |||
| authentication, | |||
| AuthenticationSession, | |||
| commands, | |||
| Disposable, | |||
| env, | |||
| Event, | |||
| EventEmitter, | |||
| MarkdownString, | |||
| StatusBarAlignment, | |||
| StatusBarItem, | |||
| Uri, | |||
| window, | |||
| } from 'vscode'; | |||
| import { fetch } from '@env/fetch'; | |||
| import { Commands, ContextKeys } from '../../constants'; | |||
| import type { Container } from '../../container'; | |||
| import { setContext } from '../../context'; | |||
| import { RepositoriesChangeEvent } from '../../git/gitProviderService'; | |||
| import { Logger } from '../../logger'; | |||
| import { StorageKeys } from '../../storage'; | |||
| import { | |||
| computeSubscriptionState, | |||
| getSubscriptionPlan, | |||
| getSubscriptionPlanPriority, | |||
| getSubscriptionTimeRemaining, | |||
| getTimeRemaining, | |||
| isPaidSubscriptionPlan, | |||
| isSubscriptionExpired, | |||
| isSubscriptionTrial, | |||
| Subscription, | |||
| SubscriptionPlanId, | |||
| SubscriptionState, | |||
| } from '../../subscription'; | |||
| import { executeCommand } from '../../system/command'; | |||
| import { createFromDateDelta } from '../../system/date'; | |||
| import { memoize } from '../../system/decorators/memoize'; | |||
| import { pluralize } from '../../system/string'; | |||
| // TODO: What user-agent should we use? | |||
| const userAgent = 'Visual-Studio-Code-GitLens'; | |||
| export interface SubscriptionChangeEvent { | |||
| readonly current: Subscription; | |||
| readonly previous: Subscription; | |||
| } | |||
| export class SubscriptionService implements Disposable { | |||
| private static authenticationProviderId = 'gitkraken'; | |||
| private static authenticationScopes = ['gitlens']; | |||
| private _onDidChange = new EventEmitter<SubscriptionChangeEvent>(); | |||
| get onDidChange(): Event<SubscriptionChangeEvent> { | |||
| return this._onDidChange.event; | |||
| } | |||
| private _disposable: Disposable; | |||
| private _subscription!: Subscription; | |||
| private _statusBarSubscription: StatusBarItem | undefined; | |||
| constructor(private readonly container: Container) { | |||
| this._disposable = this.container.onReady(this.onReady, this); | |||
| this.changeSubscription(this.getStoredSubscription(), true); | |||
| setTimeout(() => void this.ensureSession(false), 10000); | |||
| } | |||
| dispose(): void { | |||
| this._statusBarSubscription?.dispose(); | |||
| this._disposable.dispose(); | |||
| } | |||
| @memoize() | |||
| private get baseApiUri(): Uri { | |||
| const { env } = this.container; | |||
| if (env === 'staging') { | |||
| return Uri.parse('https://stagingapi.gitkraken.com'); | |||
| } | |||
| if (env === 'dev' || this.container.debugging) { | |||
| return Uri.parse('https://devapi.gitkraken.com'); | |||
| } | |||
| return Uri.parse('https://api.gitkraken.com'); | |||
| } | |||
| @memoize() | |||
| private get baseAccountUri(): Uri { | |||
| const { env } = this.container; | |||
| if (env === 'staging') { | |||
| return Uri.parse('https://stagingaccount.gitkraken.com'); | |||
| } | |||
| if (env === 'dev' || this.container.debugging) { | |||
| return Uri.parse('https://devaccount.gitkraken.com'); | |||
| } | |||
| return Uri.parse('https://account.gitkraken.com'); | |||
| } | |||
| @memoize() | |||
| private get baseSiteUri(): Uri { | |||
| const { env } = this.container; | |||
| if (env === 'staging') { | |||
| return Uri.parse('https://staging.gitkraken.com'); | |||
| } | |||
| if (env === 'dev' || this.container.debugging) { | |||
| return Uri.parse('https://dev.gitkraken.com'); | |||
| } | |||
| return Uri.parse('https://gitkraken.com'); | |||
| } | |||
| private _etag: number = 0; | |||
| get etag(): number { | |||
| return this._etag; | |||
| } | |||
| private onReady() { | |||
| this._disposable = Disposable.from( | |||
| this._disposable, | |||
| this.container.git.onDidChangeRepositories(this.onRepositoriesChanged, this), | |||
| ...this.registerCommands(), | |||
| ); | |||
| this.updateContext(); | |||
| } | |||
| private onRepositoriesChanged(_e: RepositoriesChangeEvent): void { | |||
| this.updateContext(); | |||
| } | |||
| private registerCommands(): Disposable[] { | |||
| void this.container.viewCommands; | |||
| return [ | |||
| commands.registerCommand('gitlens.premium.login', () => this.loginOrSignUp()), | |||
| commands.registerCommand('gitlens.premium.loginOrSignUp', () => this.loginOrSignUp()), | |||
| commands.registerCommand('gitlens.premium.signUp', () => this.loginOrSignUp()), | |||
| commands.registerCommand('gitlens.premium.logout', () => this.logout()), | |||
| commands.registerCommand('gitlens.premium.startPreview', () => this.startPreview()), | |||
| commands.registerCommand('gitlens.premium.purchase', () => this.purchase()), | |||
| commands.registerCommand('gitlens.premium.reset', () => this.reset()), | |||
| commands.registerCommand('gitlens.premium.resendVerification', () => this.resendVerification()), | |||
| commands.registerCommand('gitlens.premium.validate', () => this.validate()), | |||
| commands.registerCommand('gitlens.premium.showPlans', () => this.showPlans()), | |||
| ]; | |||
| } | |||
| async getSubscription(): Promise<Subscription> { | |||
| void (await this.ensureSession(false)); | |||
| return this._subscription; | |||
| } | |||
| async loginOrSignUp(): Promise<boolean> { | |||
| const session = await this.ensureSession(true); | |||
| return Boolean(session); | |||
| } | |||
| logout(): void { | |||
| this._sessionPromise = undefined; | |||
| this.reset(false); | |||
| } | |||
| async purchase(): Promise<void> { | |||
| void this.showPlans(); | |||
| await this.showHomeView(); | |||
| } | |||
| async resendVerification(): Promise<void> { | |||
| if (this._subscription.account?.verified) return; | |||
| void this.showHomeView(); | |||
| const session = await this.ensureSession(false); | |||
| if (session == null) return; | |||
| const rsp = await fetch(Uri.joinPath(this.baseApiUri, 'resend-email').toString(), { | |||
| method: 'POST', | |||
| headers: { | |||
| Authorization: `Bearer ${session.accessToken}`, | |||
| 'User-Agent': userAgent, | |||
| }, | |||
| body: JSON.stringify({ id: session.account.id }), | |||
| }); | |||
| if (!rsp.ok) { | |||
| debugger; | |||
| return; | |||
| } | |||
| const ok = { title: 'Recheck' }; | |||
| const cancel = { title: 'Cancel' }; | |||
| const result = await window.showInformationMessage( | |||
| "Once you have verified your email address, click 'Recheck'.", | |||
| ok, | |||
| cancel, | |||
| ); | |||
| if (result === ok) { | |||
| await this.validate(); | |||
| } | |||
| } | |||
| reset(all: boolean = true): void { | |||
| if (all && this.container.debugging) { | |||
| this.changeSubscription(undefined); | |||
| } | |||
| this.changeSubscription({ | |||
| ...this._subscription, | |||
| plan: { | |||
| actual: getSubscriptionPlan(SubscriptionPlanId.Free), | |||
| effective: getSubscriptionPlan(SubscriptionPlanId.Free), | |||
| }, | |||
| account: undefined, | |||
| }); | |||
| } | |||
| async showHomeView(): Promise<void> { | |||
| await executeCommand(Commands.ShowHomeView); | |||
| } | |||
| private showPlans(): void { | |||
| void env.openExternal(Uri.joinPath(this.baseSiteUri, 'gitlens/pricing')); | |||
| } | |||
| async startPreview(): Promise<void> { | |||
| let { plan, preview } = this._subscription; | |||
| if (preview != null || plan.effective.id !== SubscriptionPlanId.Free) { | |||
| if (plan.effective.id === SubscriptionPlanId.Free) { | |||
| const ok = { title: 'Create Free+ Account' }; | |||
| const cancel = { title: 'Cancel' }; | |||
| const result = await window.showInformationMessage( | |||
| 'Your premium feature preview has expired. Please create a Free+ account to extend your trial.', | |||
| ok, | |||
| cancel, | |||
| ); | |||
| if (result === ok) { | |||
| void this.loginOrSignUp(); | |||
| } | |||
| } | |||
| return; | |||
| } | |||
| const startedOn = new Date(); | |||
| let expiresOn = new Date(startedOn); | |||
| if (!this.container.debugging && this.container.env !== 'dev') { | |||
| // Normalize the date to just before midnight on the same day | |||
| expiresOn.setHours(23, 59, 59, 999); | |||
| expiresOn = createFromDateDelta(expiresOn, { days: 3 }); | |||
| } else { | |||
| expiresOn = createFromDateDelta(expiresOn, { minutes: 1 }); | |||
| } | |||
| preview = { | |||
| startedOn: startedOn.toISOString(), | |||
| expiresOn: expiresOn.toISOString(), | |||
| }; | |||
| this.changeSubscription({ | |||
| ...this._subscription, | |||
| plan: { | |||
| ...this._subscription.plan, | |||
| effective: getSubscriptionPlan(SubscriptionPlanId.Pro, startedOn, expiresOn), | |||
| }, | |||
| preview: preview, | |||
| }); | |||
| } | |||
| async validate(): Promise<void> { | |||
| const session = await this.ensureSession(false); | |||
| if (session == null) return; | |||
| await this.checkInAndValidate(session); | |||
| } | |||
| private async checkInAndValidate(session: AuthenticationSession): Promise<void> { | |||
| try { | |||
| const rsp = await fetch(Uri.joinPath(this.baseApiUri, 'gitlens/checkin').toString(), { | |||
| method: 'POST', | |||
| headers: { | |||
| Authorization: `Bearer ${session.accessToken}`, | |||
| 'User-Agent': userAgent, | |||
| }, | |||
| }); | |||
| if (!rsp.ok) { | |||
| // TODO@eamodio clear the details if there is an error? | |||
| debugger; | |||
| this.logout(); | |||
| return; | |||
| } | |||
| const data: GKLicenseInfo = await rsp.json(); | |||
| this.validateSubscription(data); | |||
| } catch (ex) { | |||
| Logger.error(ex); | |||
| debugger; | |||
| // TODO@eamodio clear the details if there is an error? | |||
| this.logout(); | |||
| } | |||
| } | |||
| private validateSubscription(data: GKLicenseInfo) { | |||
| const account: Subscription['account'] = { | |||
| id: data.user.id, | |||
| name: data.user.name, | |||
| email: data.user.email, | |||
| verified: data.user.status === 'activated', | |||
| }; | |||
| const effectiveLicenses = Object.entries(data.licenses.effectiveLicenses) as [GKLicenseType, GKLicense][]; | |||
| const paidLicenses = Object.entries(data.licenses.paidLicenses) as [GKLicenseType, GKLicense][]; | |||
| let actual: Subscription['plan']['actual'] | undefined; | |||
| if (paidLicenses.length > 0) { | |||
| paidLicenses.sort( | |||
| (a, b) => | |||
| licenseStatusPriority(b[1].latestStatus) - licenseStatusPriority(a[1].latestStatus) || | |||
| getSubscriptionPlanPriority(convertLicenseTypeToPlanId(b[0])) - | |||
| getSubscriptionPlanPriority(convertLicenseTypeToPlanId(a[0])), | |||
| ); | |||
| const [licenseType, license] = paidLicenses[0]; | |||
| actual = getSubscriptionPlan( | |||
| convertLicenseTypeToPlanId(licenseType), | |||
| new Date(license.latestStartDate), | |||
| new Date(license.latestEndDate), | |||
| ); | |||
| } | |||
| if (actual == null) { | |||
| actual = getSubscriptionPlan( | |||
| SubscriptionPlanId.FreePlus, | |||
| data.user.firstGitLensCheckIn != null ? new Date(data.user.firstGitLensCheckIn) : undefined, | |||
| ); | |||
| } | |||
| let effective: Subscription['plan']['effective'] | undefined; | |||
| if (effectiveLicenses.length > 0) { | |||
| effectiveLicenses.sort( | |||
| (a, b) => | |||
| licenseStatusPriority(b[1].latestStatus) - licenseStatusPriority(a[1].latestStatus) || | |||
| getSubscriptionPlanPriority(convertLicenseTypeToPlanId(b[0])) - | |||
| getSubscriptionPlanPriority(convertLicenseTypeToPlanId(a[0])), | |||
| ); | |||
| const [licenseType, license] = effectiveLicenses[0]; | |||
| effective = getSubscriptionPlan( | |||
| convertLicenseTypeToPlanId(licenseType), | |||
| new Date(license.latestStartDate), | |||
| new Date(license.latestEndDate), | |||
| ); | |||
| } | |||
| if (effective == null) { | |||
| effective = actual; | |||
| } | |||
| this.changeSubscription({ | |||
| plan: { | |||
| actual: actual, | |||
| effective: effective, | |||
| }, | |||
| account: account, | |||
| }); | |||
| } | |||
| private _sessionPromise: Promise<AuthenticationSession | null> | undefined; | |||
| private _session: AuthenticationSession | null | undefined; | |||
| private async ensureSession(createIfNeeded: boolean): Promise<AuthenticationSession | undefined> { | |||
| if (this._sessionPromise != null && this._session === undefined) { | |||
| this._session = await this._sessionPromise; | |||
| this._sessionPromise = undefined; | |||
| } | |||
| if (this._session != null) return this._session; | |||
| if (this._session === null && !createIfNeeded) return undefined; | |||
| if (this._sessionPromise === undefined) { | |||
| this._sessionPromise = this.getOrCreateSession(createIfNeeded); | |||
| } | |||
| this._session = await this._sessionPromise; | |||
| this._sessionPromise = undefined; | |||
| return this._session ?? undefined; | |||
| } | |||
| private async getOrCreateSession(createIfNeeded: boolean): Promise<AuthenticationSession | null> { | |||
| let session: AuthenticationSession | null | undefined; | |||
| this.updateStatusBar(true); | |||
| try { | |||
| session = await authentication.getSession( | |||
| SubscriptionService.authenticationProviderId, | |||
| SubscriptionService.authenticationScopes, | |||
| { | |||
| createIfNone: createIfNeeded, | |||
| silent: !createIfNeeded, | |||
| }, | |||
| ); | |||
| } catch (ex) { | |||
| session = null; | |||
| if (ex instanceof Error && ex.message.includes('User did not consent')) { | |||
| this.logout(); | |||
| return null; | |||
| } | |||
| } | |||
| if (session == null) { | |||
| this.updateContext(); | |||
| return session ?? null; | |||
| } | |||
| await this.checkInAndValidate(session); | |||
| return session; | |||
| } | |||
| private changeSubscription( | |||
| subscription: Optional<Subscription, 'state'> | undefined, | |||
| silent: boolean = false, | |||
| ): void { | |||
| if (subscription == null) { | |||
| subscription = { | |||
| plan: { | |||
| actual: getSubscriptionPlan(SubscriptionPlanId.Free), | |||
| effective: getSubscriptionPlan(SubscriptionPlanId.Free), | |||
| }, | |||
| account: undefined, | |||
| state: SubscriptionState.Free, | |||
| }; | |||
| } | |||
| // If the effective plan is Free, then check if the preview has expired, if not apply it | |||
| if ( | |||
| subscription.plan.effective.id === SubscriptionPlanId.Free && | |||
| subscription.preview != null && | |||
| (getTimeRemaining(subscription.preview.expiresOn) ?? 0) > 0 | |||
| ) { | |||
| (subscription.plan as PickMutable<Subscription['plan'], 'effective'>).effective = getSubscriptionPlan( | |||
| SubscriptionPlanId.Pro, | |||
| new Date(subscription.preview.startedOn), | |||
| new Date(subscription.preview.expiresOn), | |||
| ); | |||
| } | |||
| // If the effective plan has expired, then replace it with the actual plan | |||
| if (isSubscriptionExpired(subscription)) { | |||
| (subscription.plan as PickMutable<Subscription['plan'], 'effective'>).effective = subscription.plan.actual; | |||
| } | |||
| subscription.state = computeSubscriptionState(subscription); | |||
| assertSubscriptionState(subscription); | |||
| void this.storeSubscription(subscription); | |||
| const previous = this._subscription; // Can be undefined here, since we call this in the constructor | |||
| this._subscription = subscription; | |||
| this._etag = Date.now(); | |||
| this.updateContext(); | |||
| if (!silent && previous != null) { | |||
| this._onDidChange.fire({ current: subscription, previous: previous }); | |||
| } | |||
| } | |||
| private getStoredSubscription(): Subscription | undefined { | |||
| const storedSubscription = this.container.storage.get<Stored<Subscription>>(StorageKeys.PremiumSubscription); | |||
| return storedSubscription?.data; | |||
| } | |||
| private async storeSubscription(subscription: Subscription): Promise<void> { | |||
| return this.container.storage.store<Stored<Subscription>>(StorageKeys.PremiumSubscription, { | |||
| v: 1, | |||
| data: subscription, | |||
| }); | |||
| } | |||
| private updateContext(): void { | |||
| void this.updateStatusBar(); | |||
| queueMicrotask(async () => { | |||
| const { allowed, subscription } = await this.container.git.access(); | |||
| void setContext( | |||
| ContextKeys.PremiumUpgradeRequired, | |||
| allowed | |||
| ? false | |||
| : subscription.required != null && isPaidSubscriptionPlan(subscription.required) | |||
| ? 'paid' | |||
| : 'free+', | |||
| ); | |||
| }); | |||
| const { | |||
| plan: { actual }, | |||
| } = this._subscription; | |||
| void setContext(ContextKeys.Premium, actual.id); | |||
| void setContext(ContextKeys.PremiumPaid, isPaidSubscriptionPlan(actual.id)); | |||
| } | |||
| private updateStatusBar(pending: boolean = false): void { | |||
| this._statusBarSubscription = | |||
| this._statusBarSubscription ?? | |||
| window.createStatusBarItem('gitlens.subscription', StatusBarAlignment.Left, 1); | |||
| this._statusBarSubscription.name = 'GitLens Subscription'; | |||
| if (pending) { | |||
| this._statusBarSubscription.text = `$(sync~spin) GitLens signing in...`; | |||
| this._statusBarSubscription.tooltip = 'Signing in or validating your subscription...'; | |||
| return; | |||
| } | |||
| const { | |||
| account, | |||
| plan: { effective }, | |||
| } = this._subscription; | |||
| switch (effective.id) { | |||
| case SubscriptionPlanId.Free: | |||
| this._statusBarSubscription.text = effective.name; | |||
| this._statusBarSubscription.command = Commands.ShowHomeView; | |||
| this._statusBarSubscription.tooltip = new MarkdownString( | |||
| `You are on **${effective.name}**\n\nClick to upgrade to Free+ for access to premium features for public code`, | |||
| true, | |||
| ); | |||
| break; | |||
| case SubscriptionPlanId.FreePlus: | |||
| case SubscriptionPlanId.Pro: | |||
| case SubscriptionPlanId.Teams: | |||
| case SubscriptionPlanId.Enterprise: { | |||
| const trial = isSubscriptionTrial(this._subscription); | |||
| this._statusBarSubscription.text = trial ? `${effective.name} (Trial)` : effective.name; | |||
| this._statusBarSubscription.command = Commands.ShowHomeView; | |||
| if (account?.verified === false) { | |||
| this._statusBarSubscription.tooltip = new MarkdownString( | |||
| trial | |||
| ? `Before you can trial **${effective.name}**, you must verify your email address.\n\nClick to verify your email address` | |||
| : `Before you can access **${effective.name}**, you must verify your email address.\n\nClick to verify your email address`, | |||
| true, | |||
| ); | |||
| } else { | |||
| const remaining = getSubscriptionTimeRemaining(this._subscription, 'days'); | |||
| this._statusBarSubscription.tooltip = new MarkdownString( | |||
| trial | |||
| ? `You are trialing **${effective.name}**\n\nYou have ${pluralize( | |||
| 'day', | |||
| remaining ?? 0, | |||
| )} remaining in your trial.\n\nClick to see your subscription details` | |||
| : `You are on **${effective.name}**\n\nClick to see your subscription details`, | |||
| true, | |||
| ); | |||
| } | |||
| break; | |||
| } | |||
| } | |||
| this._statusBarSubscription.show(); | |||
| } | |||
| } | |||
| function assertSubscriptionState(subscription: Optional<Subscription, 'state'>): asserts subscription is Subscription {} | |||
| interface GKLicenseInfo { | |||
| user: GKUser; | |||
| licenses: { | |||
| paidLicenses: Record<GKLicenseType, GKLicense>; | |||
| effectiveLicenses: Record<GKLicenseType, GKLicense>; | |||
| }; | |||
| } | |||
| type GKLicenseType = | |||
| | 'gitlens-pro' | |||
| | 'gitlens-hosted-enterprise' | |||
| | 'gitlens-self-hosted-enterprise' | |||
| | 'gitlens-standalone-enterprise' | |||
| | 'bundle-pro' | |||
| | 'bundle-hosted-enterprise' | |||
| | 'bundle-self-hosted-enterprise' | |||
| | 'bundle-standalone-enterprise'; | |||
| function convertLicenseTypeToPlanId(licenseType: GKLicenseType): SubscriptionPlanId { | |||
| switch (licenseType) { | |||
| case 'gitlens-pro': | |||
| case 'bundle-pro': | |||
| return SubscriptionPlanId.Pro; | |||
| case 'gitlens-hosted-enterprise': | |||
| case 'gitlens-self-hosted-enterprise': | |||
| case 'gitlens-standalone-enterprise': | |||
| case 'bundle-hosted-enterprise': | |||
| case 'bundle-self-hosted-enterprise': | |||
| case 'bundle-standalone-enterprise': | |||
| return SubscriptionPlanId.Enterprise; | |||
| default: | |||
| return SubscriptionPlanId.FreePlus; | |||
| } | |||
| } | |||
| function licenseStatusPriority(status: GKLicense['latestStatus']): number { | |||
| switch (status) { | |||
| case 'active': | |||
| return 100; | |||
| case 'expired': | |||
| return -100; | |||
| case 'trial': | |||
| return 1; | |||
| case 'canceled': | |||
| return 0; | |||
| } | |||
| } | |||
| interface GKLicense { | |||
| latestStatus: 'active' | 'canceled' | 'expired' | 'trial'; | |||
| latestStartDate: string; | |||
| latestEndDate: string; | |||
| } | |||
| interface GKUser { | |||
| id: string; | |||
| name: string; | |||
| email: string; | |||
| status: 'activated' | 'pending'; | |||
| firstGitLensCheckIn?: string; | |||
| } | |||
| interface Stored<T, SchemaVersion extends number = 1> { | |||
| v: SchemaVersion; | |||
| data: T; | |||
| } | |||
+ 23
- 6
src/quickpicks/items/directive.ts
View File
+ 3
- 0
src/storage.ts
View File
+ 166
- 0
src/subscription.ts
View File
| @ -0,0 +1,166 @@ | |||
| import { getDateDifference } from './system/date'; | |||
| export const enum SubscriptionPlanId { | |||
| Free = 'free', | |||
| FreePlus = 'free+', | |||
| Pro = 'pro', | |||
| Teams = 'teams', | |||
| Enterprise = 'enterprise', | |||
| } | |||
| export type FreeSubscriptionPlans = Extract<SubscriptionPlanId, SubscriptionPlanId.Free | SubscriptionPlanId.FreePlus>; | |||
| export type PaidSubscriptionPlans = Exclude<SubscriptionPlanId, SubscriptionPlanId.Free | SubscriptionPlanId.FreePlus>; | |||
| export type RequiredSubscriptionPlans = Exclude<SubscriptionPlanId, SubscriptionPlanId.Free>; | |||
| export interface Subscription { | |||
| readonly plan: { | |||
| readonly actual: SubscriptionPlan; | |||
| readonly effective: SubscriptionPlan; | |||
| }; | |||
| account: SubscriptionAccount | undefined; | |||
| preview?: SubscriptionPreview; | |||
| state: SubscriptionState; | |||
| } | |||
| export interface SubscriptionPlan { | |||
| readonly id: SubscriptionPlanId; | |||
| readonly name: string; | |||
| readonly startedOn: string; | |||
| readonly expiresOn?: string | undefined; | |||
| } | |||
| export interface SubscriptionAccount { | |||
| readonly id: string; | |||
| readonly name: string; | |||
| readonly email: string | undefined; | |||
| readonly verified: boolean; | |||
| } | |||
| export interface SubscriptionPreview { | |||
| readonly startedOn: string; | |||
| readonly expiresOn: string; | |||
| } | |||
| export const enum SubscriptionState { | |||
| /** Indicates a user who hasn't verified their email address yet */ | |||
| VerificationRequired = -1, | |||
| /** Indicates a Free user who hasn't yet started the preview */ | |||
| Free = 0, | |||
| /** Indicates a Free user who is in preview */ | |||
| FreeInPreview, | |||
| /** Indicates a Free user who's preview has expired */ | |||
| FreePreviewExpired, | |||
| /** Indicates a Free+ user with a completed trial */ | |||
| FreePlusInTrial, | |||
| /** Indicates a Free+ user who's trial has expired */ | |||
| FreePlusTrialExpired, | |||
| /** Indicates a Paid user */ | |||
| Paid, | |||
| } | |||
| export function computeSubscriptionState(subscription: Optional<Subscription, 'state'>): SubscriptionState { | |||
| const { | |||
| account, | |||
| plan: { actual, effective }, | |||
| preview, | |||
| } = subscription; | |||
| if (account?.verified === false) return SubscriptionState.VerificationRequired; | |||
| if (actual.id === effective.id) { | |||
| switch (effective.id) { | |||
| case SubscriptionPlanId.Free: | |||
| return preview == null ? SubscriptionState.Free : SubscriptionState.FreePreviewExpired; | |||
| case SubscriptionPlanId.FreePlus: | |||
| return SubscriptionState.FreePlusTrialExpired; | |||
| case SubscriptionPlanId.Pro: | |||
| case SubscriptionPlanId.Teams: | |||
| case SubscriptionPlanId.Enterprise: | |||
| return SubscriptionState.Paid; | |||
| } | |||
| } | |||
| switch (effective.id) { | |||
| case SubscriptionPlanId.Free: | |||
| return preview == null ? SubscriptionState.Free : SubscriptionState.FreeInPreview; | |||
| case SubscriptionPlanId.FreePlus: | |||
| return SubscriptionState.FreePlusTrialExpired; | |||
| case SubscriptionPlanId.Pro: | |||
| return actual.id === SubscriptionPlanId.Free | |||
| ? SubscriptionState.FreeInPreview | |||
| : SubscriptionState.FreePlusInTrial; | |||
| case SubscriptionPlanId.Teams: | |||
| case SubscriptionPlanId.Enterprise: | |||
| return SubscriptionState.Paid; | |||
| } | |||
| } | |||
| export function getSubscriptionPlan(id: SubscriptionPlanId, startedOn?: Date, expiresOn?: Date): SubscriptionPlan { | |||
| return { | |||
| id: id, | |||
| name: getSubscriptionPlanName(id), | |||
| startedOn: (startedOn ?? new Date()).toISOString(), | |||
| expiresOn: expiresOn != null ? expiresOn.toISOString() : undefined, | |||
| }; | |||
| } | |||
| export function getSubscriptionPlanName(id: SubscriptionPlanId) { | |||
| switch (id) { | |||
| case SubscriptionPlanId.FreePlus: | |||
| return 'GitLens Free+'; | |||
| case SubscriptionPlanId.Pro: | |||
| return 'GitLens Pro'; | |||
| case SubscriptionPlanId.Teams: | |||
| return 'GitLens Teams'; | |||
| case SubscriptionPlanId.Enterprise: | |||
| return 'GitLens Enterprise'; | |||
| case SubscriptionPlanId.Free: | |||
| default: | |||
| return 'GitLens Free'; | |||
| } | |||
| } | |||
| const plansPriority = new Map<SubscriptionPlanId | undefined, number>([ | |||
| [undefined, -1], | |||
| [SubscriptionPlanId.Free, 0], | |||
| [SubscriptionPlanId.FreePlus, 1], | |||
| [SubscriptionPlanId.Pro, 2], | |||
| [SubscriptionPlanId.Teams, 3], | |||
| [SubscriptionPlanId.Enterprise, 4], | |||
| ]); | |||
| export function getSubscriptionPlanPriority(id: SubscriptionPlanId | undefined): number { | |||
| return plansPriority.get(id)!; | |||
| } | |||
| export function getSubscriptionTimeRemaining( | |||
| subscription: Optional<Subscription, 'state'>, | |||
| unit?: 'days' | 'hours' | 'minutes' | 'seconds', | |||
| ): number | undefined { | |||
| return getTimeRemaining(subscription.plan.effective.expiresOn, unit); | |||
| } | |||
| export function getTimeRemaining( | |||
| expiresOn: string | undefined, | |||
| unit?: 'days' | 'hours' | 'minutes' | 'seconds', | |||
| ): number | undefined { | |||
| return expiresOn != null ? getDateDifference(Date.now(), new Date(expiresOn), unit) : undefined; | |||
| } | |||
| export function isPaidSubscriptionPlan(id: SubscriptionPlanId): id is PaidSubscriptionPlans { | |||
| return id !== SubscriptionPlanId.Free && id !== SubscriptionPlanId.FreePlus; | |||
| } | |||
| export function isSubscriptionExpired(subscription: Optional<Subscription, 'state'>): boolean { | |||
| const remaining = getSubscriptionTimeRemaining(subscription); | |||
| return remaining != null && remaining <= 0; | |||
| } | |||
| export function isSubscriptionTrial(subscription: Optional<Subscription, 'state'>): boolean { | |||
| return subscription.plan.actual.id !== subscription.plan.effective.id; | |||
| } | |||
+ 12
- 0
src/system/function.ts
View File
+ 2
- 2
src/views/nodes/repositoriesNode.ts
View File
+ 13
- 3
src/views/nodes/viewNode.ts
View File
+ 180
- 0
src/webviews/apps/premium/home/home.html
View File
| @ -0,0 +1,180 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <style nonce="#{cspNonce}"> | |||
| @font-face { | |||
| font-family: 'codicon'; | |||
| src: url('#{root}/dist/webviews/codicon.ttf?404cbc4fe3a64b9a93064eef76704c79') format('truetype'); | |||
| } | |||
| </style> | |||
| </head> | |||
| <body class="preload"> | |||
| <div class="container"> | |||
| <div id="slot1"></div> | |||
| <vscode-divider></vscode-divider> | |||
| <div id="slot2"></div> | |||
| </div> | |||
| <script type="module" src="#{root}/dist/webviews/toolkit.min.js"></script> | |||
| #{endOfBody} | |||
| </body> | |||
| <template id="welcome"> | |||
| <section> | |||
| <h3>Welcome to GitLens 12!</h3> | |||
| <p> | |||
| GitLens <b>supercharges</b> Git inside VS Code and <b>unlocks</b> the untapped <b>knowledge</b> within | |||
| each repository. While GitLens is both very <b>powerful</b> and feature rich, it is <b>intuitive</b> and | |||
| highly customizable to meet your needs. | |||
| </p> | |||
| <p> | |||
| Jump over to the getting started experience to familiarize yourself with the features GitLens provides. | |||
| </p> | |||
| <vscode-button data-action="command:gitlens.getStarted">Get Started</vscode-button> | |||
| <p>Or, you can use the GitLens welcome experience to get setup quickly.</p> | |||
| <vscode-button data-action="command:gitlens.showWelcomePage">Welcome (Quick Setup)</vscode-button> | |||
| <ul> | |||
| <li> | |||
| To view all GitLens settings, run | |||
| <a href="command:workbench.action.quickOpen?%22>GitLens%3A%20Open%20Settings%22" | |||
| >GitLens: Open Settings</a | |||
| > | |||
| from the Command Palette. | |||
| </li> | |||
| <li> | |||
| <a href="command:gitlens.showSettingsPage%23views">GitLens side bar views</a> | |||
| for commits, branches, etc. are displayed within the Source Control side bar by default. | |||
| <a href="command:workbench.action.quickOpen?%22>GitLens%3A%20Set%20Views%20Layout%22" | |||
| >Run GitLens: Set Views Layout</a | |||
| > | |||
| from the Command Palette to display them here in the GitLens side bar, or drag & drop them | |||
| individually. | |||
| </li> | |||
| </ul> | |||
| <vscode-button data-action="command:gitlens.home.hideWelcome" appearance="secondary">Hide</vscode-button> | |||
| </section> | |||
| </template> | |||
| <template id="state:free"> | |||
| <section> | |||
| <h3>Try GitLens Premium Features</h3> | |||
| <p> | |||
| Premium features like <a href="">Git Worktrees</a> and <a href="">Visual File History</a> are available | |||
| with a free account, with many more features coming soon, including a commit graph and GitHub Enterprise | |||
| integration. Access to premium features for private code is available with a paid account. | |||
| <a href="">Learn more</a> about GitLens premium features. | |||
| </p> | |||
| <p> | |||
| You can try these premium features for free, without an account, for 3 days. All non-premium features | |||
| will continue to be free without an account. | |||
| </p> | |||
| <vscode-button data-action="command:gitlens.premium.startPreview">Try premium features now</vscode-button> | |||
| <vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button> | |||
| <vscode-button data-action="command:gitlens.premium.showPlans" appearance="secondary" | |||
| >View paid plans</vscode-button | |||
| > | |||
| </section> | |||
| </template> | |||
| <template id="state:free-preview"> | |||
| <section> | |||
| <h3>Trying Premium Features</h3> | |||
| <p> | |||
| You are currently trying premium GitLens features, like <a href="">Git Worktrees</a> and | |||
| <a href="">Visual File History</a>, for <span data-bind="previewDays">3 more days</span>. | |||
| <a href="">Learn more</a> about GitLens premium features. | |||
| </p> | |||
| <p> | |||
| After that time, a free account will be required to continue using these premium features for public | |||
| code, or you can puchase a paid plan to access premium features for private code. | |||
| </p> | |||
| <vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button> | |||
| <vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button> | |||
| <p>All non-premium features will continue to be free without an account.</p> | |||
| </section> | |||
| </template> | |||
| <template id="state:free-preview-expired"> | |||
| <section> | |||
| <h3>Continue using Premium Features</h3> | |||
| <p> | |||
| Premium GitLens features like <a href="">Git Worktrees</a> and <a href="">Visual File History</a>, a | |||
| commit graph (coming soon), and GitHub Enterprise integration (coming soon) are only available with an | |||
| account. <a href="">Learn more</a> about GitLens premium features. | |||
| </p> | |||
| <p>Create a free account to continue trialing premium features for all code for an additional 7 days.</p> | |||
| <vscode-button data-action="command:gitlens.premium.loginOrSignUp">Create a free account</vscode-button> | |||
| <vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button> | |||
| <p>All non-premium features will continue to be free without an account.</p> | |||
| <vscode-button data-action="command:gitlens.home.hideSubscription" appearance="secondary" | |||
| >Close</vscode-button | |||
| > | |||
| </section> | |||
| </template> | |||
| <template id="state:plus-trial"> | |||
| <section> | |||
| <h3>Premium Feature Trial</h3> | |||
| <p> | |||
| You are currently trialing premium GitLens features like <a href="">Git Worktrees</a> and | |||
| <a href="">Visual File History</a> for both public and private code. In | |||
| <span data-bind="trialDays">7 days</span>, accessing these premium features for private code will | |||
| require a paid account. | |||
| </p> | |||
| <vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button> | |||
| <p> | |||
| With your free account, you will continue to have access to premium features for public code, as well as | |||
| all non-premium features. | |||
| </p> | |||
| <!-- <vscode-button appearance="secondary">Close</vscode-button> --> | |||
| </section> | |||
| </template> | |||
| <template id="state:verify-email"> | |||
| <section> | |||
| <h3>Please validate your email</h3> | |||
| <p>To continue using premium GitLens features, please validate the email for the account you created.</p> | |||
| <vscode-button data-action="command:gitlens.premium.resendVerification" | |||
| >Resend verification email</vscode-button | |||
| > | |||
| <vscode-button data-action="command:gitlens.premium.validate">Refresh validation</vscode-button> | |||
| <p>All non-premium features will continue to be free without an account.</p> | |||
| </section> | |||
| </template> | |||
| <template id="state:plus-trial-expired"> | |||
| <section> | |||
| <h3>GitLens Free+</h3> | |||
| <p> | |||
| With your free account, you have access to GitLens Free+, which unlocks premium features like | |||
| <a href="">Git Worktrees</a> and <a href="">Visual File History</a> for public code. More premium | |||
| features like a commit graph and GitHub Enterprise integration are coming soon. | |||
| <a href="">Learn more</a> about GitLens premium features. | |||
| </p> | |||
| <p>Access to premium features for private code requires a paid plan.</p> | |||
| <vscode-button data-action="command:gitlens.premium.purchase">Purchase a plan</vscode-button> | |||
| <vscode-button data-action="command:gitlens.home.hideSubscription" appearance="secondary" | |||
| >Close</vscode-button | |||
| > | |||
| </section> | |||
| </template> | |||
| <template id="state:paid"> | |||
| <section> | |||
| <h3 data-bind="plan">GitLens Pro</h3> | |||
| <p> | |||
| Thank you for purchasing <span data-bind="plan">GitLens Pro</span>! With a | |||
| <span data-bind="plan">GitLens Pro</span> account, you can access premium features like | |||
| <a href="">Git Worktrees</a> and <a href="">Visual File History</a> for all of your code. | |||
| </p> | |||
| <p> | |||
| Additional premium featues like a commit graph and GitHub Enterprise integration are coming soon. | |||
| <a href="">Learn more</a> about GitLens premium features. | |||
| </p> | |||
| <vscode-button data-action="command:gitlens.home.hideSubscription" appearance="secondary" | |||
| >Close</vscode-button | |||
| > | |||
| </section> | |||
| </template> | |||
| </html> | |||
+ 80
- 0
src/webviews/apps/premium/home/home.scss
View File
| @ -0,0 +1,80 @@ | |||
| // @import '../../scss/base'; | |||
| // @import '../../scss/buttons'; | |||
| // @import '../../scss/utils'; | |||
| html { | |||
| height: 100%; | |||
| font-size: 62.5%; | |||
| box-sizing: border-box; | |||
| } | |||
| body { | |||
| background-color: var(--color-background); | |||
| color: var(--color-foreground); | |||
| font-family: var(--font-family); | |||
| height: 100%; | |||
| line-height: 1.4; | |||
| font-size: 100% !important; | |||
| } | |||
| .container { | |||
| color: var(--color-view-foreground); | |||
| display: grid; | |||
| font-size: 1.3em; | |||
| padding-bottom: 1.5rem; | |||
| } | |||
| section { | |||
| box-sizing: border-box; | |||
| display: flex; | |||
| flex-direction: column; | |||
| padding: 0; | |||
| } | |||
| h3 { | |||
| border: none; | |||
| color: var(--color-view-header-foreground); | |||
| font-size: 1.5rem; | |||
| font-weight: 600; | |||
| margin-bottom: 0; | |||
| white-space: nowrap; | |||
| } | |||
| a { | |||
| text-decoration: none; | |||
| &:focus { | |||
| outline-color: var(--focus-border); | |||
| } | |||
| &:hover { | |||
| text-decoration: underline; | |||
| } | |||
| } | |||
| b { | |||
| font-weight: 600; | |||
| } | |||
| p { | |||
| margin-bottom: 0; | |||
| } | |||
| vscode-button { | |||
| align-self: center; | |||
| margin-top: 1.5rem; | |||
| max-width: 300px; | |||
| width: 100%; | |||
| } | |||
| @media (min-width: 640px) { | |||
| vscode-button { | |||
| align-self: flex-start; | |||
| } | |||
| } | |||
| vscode-divider { | |||
| margin-top: 2rem; | |||
| } | |||
| @import '../../scss/codicons'; | |||
+ 118
- 0
src/webviews/apps/premium/home/home.ts
View File
| @ -0,0 +1,118 @@ | |||
| /*global window*/ | |||
| import './home.scss'; | |||
| import { Disposable } from 'vscode'; | |||
| import { getSubscriptionTimeRemaining, SubscriptionState } from '../../../../subscription'; | |||
| import { DidChangeSubscriptionNotificationType, State } from '../../../premium/home/protocol'; | |||
| import { ExecuteCommandType, IpcMessage, onIpc } from '../../../protocol'; | |||
| import { App } from '../../shared/appBase'; | |||
| import { DOM } from '../../shared/dom'; | |||
| export class HomeApp extends App<State> { | |||
| private $slot1!: HTMLDivElement; | |||
| private $slot2!: HTMLDivElement; | |||
| constructor() { | |||
| super('HomeApp', (window as any).bootstrap); | |||
| (window as any).bootstrap = undefined; | |||
| } | |||
| protected override onInitialize() { | |||
| this.$slot1 = document.getElementById('slot1') as HTMLDivElement; | |||
| this.$slot2 = document.getElementById('slot2') as HTMLDivElement; | |||
| this.updateState(); | |||
| } | |||
| protected override onBind(): Disposable[] { | |||
| const disposables = super.onBind?.() ?? []; | |||
| disposables.push(DOM.on('[data-action]', 'click', (e, target: HTMLElement) => this.onClicked(e, target))); | |||
| return disposables; | |||
| } | |||
| protected override onMessageReceived(e: MessageEvent) { | |||
| const msg = e.data as IpcMessage; | |||
| switch (msg.method) { | |||
| case DidChangeSubscriptionNotificationType.method: | |||
| onIpc(DidChangeSubscriptionNotificationType, msg, params => { | |||
| this.state = params; | |||
| this.updateState(); | |||
| }); | |||
| break; | |||
| default: | |||
| super.onMessageReceived?.(e); | |||
| break; | |||
| } | |||
| } | |||
| private onClicked(e: MouseEvent, target: HTMLElement) { | |||
| const action = target.dataset.action; | |||
| if (action?.startsWith('command:')) { | |||
| this.sendCommand(ExecuteCommandType, { command: action.slice(8) }); | |||
| } | |||
| } | |||
| private updateState() { | |||
| const { subscription } = this.state; | |||
| if (subscription.account?.verified === false) { | |||
| this.insertTemplate('state:verify-email', this.$slot1); | |||
| this.insertTemplate('welcome', this.$slot2); | |||
| return; | |||
| } | |||
| switch (subscription.state) { | |||
| case SubscriptionState.Free: | |||
| this.insertTemplate('welcome', this.$slot1); | |||
| this.insertTemplate('state:free', this.$slot2); | |||
| break; | |||
| case SubscriptionState.FreeInPreview: { | |||
| const remaining = getSubscriptionTimeRemaining(subscription, 'days'); | |||
| this.insertTemplate('state:free-preview', this.$slot1, { | |||
| previewDays: `${remaining === 1 ? `${remaining} more day` : `${remaining} more days`}`, | |||
| }); | |||
| this.insertTemplate('welcome', this.$slot2); | |||
| break; | |||
| } | |||
| case SubscriptionState.FreePreviewExpired: | |||
| this.insertTemplate('state:free-preview-expired', this.$slot1); | |||
| this.insertTemplate('welcome', this.$slot2); | |||
| break; | |||
| case SubscriptionState.FreePlusInTrial: { | |||
| const remaining = getSubscriptionTimeRemaining(subscription, 'days'); | |||
| this.insertTemplate('state:plus-trial', this.$slot1, { | |||
| trialDays: `${remaining === 1 ? `${remaining} day` : `${remaining} days`}`, | |||
| }); | |||
| this.insertTemplate('welcome', this.$slot2); | |||
| break; | |||
| } | |||
| case SubscriptionState.FreePlusTrialExpired: | |||
| this.insertTemplate('state:plus-trial-expired', this.$slot1); | |||
| this.insertTemplate('welcome', this.$slot2); | |||
| break; | |||
| case SubscriptionState.Paid: | |||
| this.insertTemplate('state:paid', this.$slot1); | |||
| this.insertTemplate('welcome', this.$slot2); | |||
| break; | |||
| } | |||
| } | |||
| private insertTemplate(id: string, $slot: HTMLDivElement, bindings?: Record<string, unknown>): void { | |||
| const $template = (document.getElementById(id) as HTMLTemplateElement)?.content.cloneNode(true); | |||
| $slot.replaceChildren($template); | |||
| if (bindings != null) { | |||
| for (const [key, value] of Object.entries(bindings)) { | |||
| const $el = $slot.querySelector(`[data-bind="${key}"]`); | |||
| if ($el != null) { | |||
| $el.textContent = String(value); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| new HomeApp(); | |||
+ 11
- 10
src/webviews/apps/shared/appWithConfigBase.ts
View File
+ 41
- 0
src/webviews/premium/home/homeWebviewView.ts
View File
| @ -0,0 +1,41 @@ | |||
| import { commands, Disposable, window } from 'vscode'; | |||
| import type { Container } from '../../../container'; | |||
| import type { SubscriptionChangeEvent } from '../../../premium/subscription/subscriptionService'; | |||
| import type { Subscription } from '../../../subscription'; | |||
| import { WebviewViewBase } from '../../webviewViewBase'; | |||
| import { DidChangeSubscriptionNotificationType, State } from './protocol'; | |||
| export class HomeWebviewView extends WebviewViewBase<State> { | |||
| constructor(container: Container) { | |||
| super(container, 'gitlens.views.home', 'home.html', 'Home'); | |||
| this.disposables.push(this.container.subscription.onDidChange(this.onSubscriptionChanged, this)); | |||
| } | |||
| private onSubscriptionChanged(e: SubscriptionChangeEvent) { | |||
| void this.notifyDidChangeData(e.current); | |||
| } | |||
| protected override registerCommands(): Disposable[] { | |||
| // TODO@eamodio implement hide commands | |||
| return [ | |||
| commands.registerCommand('gitlens.home.hideWelcome', () => {}), | |||
| commands.registerCommand('gitlens.home.hideSubscription', () => {}), | |||
| ]; | |||
| } | |||
| protected override async includeBootstrap(): Promise<State> { | |||
| const subscription = await this.container.subscription.getSubscription(); | |||
| return { | |||
| subscription: subscription, | |||
| }; | |||
| } | |||
| private notifyDidChangeData(subscription: Subscription) { | |||
| if (!this.isReady) return false; | |||
| return window.withProgress({ location: { viewId: this.id } }, () => | |||
| this.notify(DidChangeSubscriptionNotificationType, { subscription: subscription }), | |||
| ); | |||
| } | |||
| } | |||
+ 13
- 0
src/webviews/premium/home/protocol.ts
View File
| @ -0,0 +1,13 @@ | |||
| import type { Subscription } from '../../../subscription'; | |||
| import { IpcNotificationType } from '../../protocol'; | |||
| export interface State { | |||
| subscription: Subscription; | |||
| } | |||
| export interface DidChangeSubscriptionParams { | |||
| subscription: Subscription; | |||
| } | |||
| export const DidChangeSubscriptionNotificationType = new IpcNotificationType<DidChangeSubscriptionParams>( | |||
| 'subscription/didChange', | |||
| ); | |||
+ 240
- 0
src/webviews/webviewViewBase.ts
View File
| @ -0,0 +1,240 @@ | |||
| import { | |||
| CancellationToken, | |||
| Disposable, | |||
| Uri, | |||
| Webview, | |||
| WebviewView, | |||
| WebviewViewProvider, | |||
| WebviewViewResolveContext, | |||
| window, | |||
| workspace, | |||
| } from 'vscode'; | |||
| import { getNonce } from '@env/crypto'; | |||
| import { Commands } from '../constants'; | |||
| import type { Container } from '../container'; | |||
| import { Logger } from '../logger'; | |||
| import { executeCommand } from '../system/command'; | |||
| import { | |||
| ExecuteCommandType, | |||
| IpcMessage, | |||
| IpcMessageParams, | |||
| IpcNotificationType, | |||
| onIpc, | |||
| WebviewReadyCommandType, | |||
| } from './protocol'; | |||
| let ipcSequence = 0; | |||
| function nextIpcId() { | |||
| if (ipcSequence === Number.MAX_SAFE_INTEGER) { | |||
| ipcSequence = 1; | |||
| } else { | |||
| ipcSequence++; | |||
| } | |||
| return `host:${ipcSequence}`; | |||
| } | |||
| const emptyCommands: Disposable[] = [ | |||
| { | |||
| dispose: function () { | |||
| /* noop */ | |||
| }, | |||
| }, | |||
| ]; | |||
| export abstract class WebviewViewBase<State> implements WebviewViewProvider, Disposable { | |||
| protected readonly disposables: Disposable[] = []; | |||
| protected isReady: boolean = false; | |||
| private _disposableView: Disposable | undefined; | |||
| private _view: WebviewView | undefined; | |||
| constructor( | |||
| protected readonly container: Container, | |||
| public readonly id: string, | |||
| protected readonly fileName: string, | |||
| title: string, | |||
| ) { | |||
| this._title = title; | |||
| this.disposables.push(window.registerWebviewViewProvider(id, this)); | |||
| } | |||
| dispose() { | |||
| this.disposables.forEach(d => d.dispose()); | |||
| this._disposableView?.dispose(); | |||
| } | |||
| get description(): string | undefined { | |||
| return this._view?.description; | |||
| } | |||
| set description(description: string | undefined) { | |||
| if (this._view == null) return; | |||
| this._view.description = description; | |||
| } | |||
| private _title: string; | |||
| get title(): string { | |||
| return this._view?.title ?? this._title; | |||
| } | |||
| set title(title: string) { | |||
| this._title = title; | |||
| if (this._view == null) return; | |||
| this._view.title = title; | |||
| } | |||
| get visible() { | |||
| return this._view?.visible ?? false; | |||
| } | |||
| protected onReady?(): void; | |||
| protected onMessageReceived?(e: IpcMessage): void; | |||
| protected registerCommands(): Disposable[] { | |||
| return emptyCommands; | |||
| } | |||
| protected includeBootstrap?(): State | Promise<State>; | |||
| protected includeHead?(): string | Promise<string>; | |||
| protected includeBody?(): string | Promise<string>; | |||
| protected includeEndOfBody?(): string | Promise<string>; | |||
| async resolveWebviewView( | |||
| webviewView: WebviewView, | |||
| _context: WebviewViewResolveContext, | |||
| _token: CancellationToken, | |||
| ): Promise<void> { | |||
| this._view = webviewView; | |||
| webviewView.webview.options = { | |||
| enableCommandUris: true, | |||
| enableScripts: true, | |||
| }; | |||
| webviewView.title = this._title; | |||
| this._disposableView = Disposable.from( | |||
| this._view.onDidDispose(this.onViewDisposed, this), | |||
| // this._view.onDidChangeVisibility(this.onViewVisibilityChanged, this), | |||
| this._view.webview.onDidReceiveMessage(this.onMessageReceivedCore, this), | |||
| ...this.registerCommands(), | |||
| ); | |||
| webviewView.webview.html = await this.getHtml(webviewView.webview); | |||
| // this.onViewVisibilityChanged(); | |||
| } | |||
| private onViewDisposed() { | |||
| this._disposableView?.dispose(); | |||
| this._disposableView = undefined; | |||
| this._view = undefined; | |||
| } | |||
| // private _disposableVisibility: Disposable | undefined; | |||
| // private onViewVisibilityChanged() { | |||
| // if (this._view?.visible) { | |||
| // console.log('became visible'); | |||
| // if (this._disposableVisibility == null) { | |||
| // // this._disposableVisibility = window.onDidChangeActiveTextEditor( | |||
| // // debounce(this.onActiveEditorChanged, 500), | |||
| // // this, | |||
| // // ); | |||
| // // this.onActiveEditorChanged(window.activeTextEditor); | |||
| // } | |||
| // } else { | |||
| // console.log('became hidden'); | |||
| // this._disposableVisibility?.dispose(); | |||
| // this._disposableVisibility = undefined; | |||
| // // this.setTitle(this.title); | |||
| // } | |||
| // } | |||
| private onMessageReceivedCore(e: IpcMessage) { | |||
| if (e == null) return; | |||
| Logger.log(`WebviewView(${this.id}).onMessageReceived: method=${e.method}, data=${JSON.stringify(e)}`); | |||
| switch (e.method) { | |||
| case WebviewReadyCommandType.method: | |||
| onIpc(WebviewReadyCommandType, e, () => { | |||
| this.isReady = true; | |||
| this.onReady?.(); | |||
| }); | |||
| break; | |||
| case ExecuteCommandType.method: | |||
| onIpc(ExecuteCommandType, e, params => { | |||
| if (params.args != null) { | |||
| void executeCommand(params.command as Commands, ...params.args); | |||
| } else { | |||
| void executeCommand(params.command as Commands); | |||
| } | |||
| }); | |||
| break; | |||
| default: | |||
| this.onMessageReceived?.(e); | |||
| break; | |||
| } | |||
| } | |||
| private async getHtml(webview: Webview): Promise<string> { | |||
| const uri = Uri.joinPath(this.container.context.extensionUri, 'dist', 'webviews', this.fileName); | |||
| const content = new TextDecoder('utf8').decode(await workspace.fs.readFile(uri)); | |||
| const [bootstrap, head, body, endOfBody] = await Promise.all([ | |||
| this.includeBootstrap?.(), | |||
| this.includeHead?.(), | |||
| this.includeBody?.(), | |||
| this.includeEndOfBody?.(), | |||
| ]); | |||
| const cspSource = webview.cspSource; | |||
| const cspNonce = getNonce(); | |||
| const root = webview.asWebviewUri(this.container.context.extensionUri).toString(); | |||
| const html = content | |||
| .replace(/#{(head|body|endOfBody)}/i, (_substring, token) => { | |||
| switch (token) { | |||
| case 'head': | |||
| return head ?? ''; | |||
| case 'body': | |||
| return body ?? ''; | |||
| case 'endOfBody': | |||
| return bootstrap != null | |||
| ? `<script type="text/javascript" nonce="#{cspNonce}">window.bootstrap = ${JSON.stringify( | |||
| bootstrap, | |||
| )};</script>${endOfBody ?? ''}` | |||
| : endOfBody ?? ''; | |||
| default: | |||
| return ''; | |||
| } | |||
| }) | |||
| .replace(/#{(cspSource|cspNonce|root)}/g, (_substring, token) => { | |||
| switch (token) { | |||
| case 'cspSource': | |||
| return cspSource; | |||
| case 'cspNonce': | |||
| return cspNonce; | |||
| case 'root': | |||
| return root; | |||
| default: | |||
| return ''; | |||
| } | |||
| }); | |||
| return html; | |||
| } | |||
| protected notify<T extends IpcNotificationType<any>>(type: T, params: IpcMessageParams<T>): Thenable<boolean> { | |||
| return this.postMessage({ id: nextIpcId(), method: type.method, params: params }); | |||
| } | |||
| private postMessage(message: IpcMessage) { | |||
| if (this._view == null) return Promise.resolve(false); | |||
| return this._view.webview.postMessage(message); | |||
| } | |||
| } | |||