@contember/cli 1.4.0-rc.8 → 2.0.0-alpha.8

package/src/lib/json.ts

@@ -0,0 +1,4 @@
+export type JSONPrimitive = string | number | boolean | null
+export type JSONValue = JSONPrimitive | JSONObject | JSONArray
+export type JSONObject = { readonly [K in string]: JSONValue }
+export type JSONArray = readonly JSONValue[]

package/src/lib/migrations/MigrationExecutionFacade.ts

@@ -0,0 +1,97 @@
+import prompts from 'prompts'
+import { MigrationPrinter } from './MigrationPrinter'
+import { isSchemaMigration, MigrationExecutor, SchemaVersionBuilder } from '@contember/migrations-client'
+import { MigrationsStatusFacade } from './MigrationsStatusFacade'
+import { MigrationVersionHelper } from '@contember/engine-common'
+import { RemoteProject } from '../project/RemoteProject'
+import { SystemClientProvider } from '../SystemClientProvider'
+import { TenantClientProvider } from '../TenantClientProvider'
+import { RemoteProjectProvider } from '../project/RemoteProjectProvider'
+
+export class MigrationExecutionFacade {
+	constructor(
+		private readonly systemClientProvider: SystemClientProvider,
+		private readonly tenantClientProvider: TenantClientProvider,
+		private readonly projectProvider: RemoteProjectProvider,
+		private readonly schemaVersionBuilder: SchemaVersionBuilder,
+		private readonly migrationPrinter: MigrationPrinter,
+		private readonly migrationExecutor: MigrationExecutor,
+		private readonly migrationStatusFacade: MigrationsStatusFacade,
+	) {
+	}
+
+	execute = async ({
+		requireConfirmation,
+		force,
+		until,
+		additionalMessage,
+	}: {
+		requireConfirmation: boolean
+		force?: boolean
+		until?: string
+		additionalMessage?: string
+	}): Promise<boolean> => {
+		const project = this.projectProvider.get()
+		await this.tenantClientProvider.get().createProject(project.name, true)
+
+		const status = await this.migrationStatusFacade.resolveMigrationsStatus({ force })
+		const migrations = until
+			? status.migrationsToExecute.filter(it => it.version <= MigrationVersionHelper.extractVersion(until))
+			: status.migrationsToExecute
+		if (migrations.length === 0) {
+			console.log('No migrations to execute')
+			return true
+		}
+		console.log('Will execute following migrations:')
+		migrations.forEach(it => console.log(it.name))
+		additionalMessage && console.log(additionalMessage)
+
+		if (requireConfirmation) {
+			if (!process.stdin.isTTY) {
+				throw 'TTY not available. Pass --yes option to confirm execution.'
+			}
+			do {
+				const { action } = await prompts({
+					type: 'select',
+					name: 'action',
+					message: 'Do you want to continue?',
+					choices: [
+						{ value: 'yes', title: 'Execute migrations' },
+						{ value: 'describe', title: 'Describe migrations' },
+						{ value: 'no', title: 'Abort' },
+					],
+				})
+				if (action === 'describe') {
+					const schema = await this.schemaVersionBuilder.buildSchemaUntil(migrations[0].version)
+					for (const migration of migrations) {
+						const migrationContent = await migration.localMigration.getContent()
+						if (!isSchemaMigration(migrationContent)) {
+							continue
+						}
+
+						await this.migrationPrinter.printMigrationDescription(schema, migrationContent, {
+							noSql: true,
+						})
+					}
+				} else if (action === 'yes') {
+					break
+				} else {
+					return false
+				}
+			} while (true)
+		}
+
+		await this.migrationExecutor.executeMigrations({
+			client: this.systemClientProvider.get(),
+			migrations,
+			contentMigrationFactoryArgs: {
+				apiToken: project.token,
+				apiBaseUrl: project.endpoint,
+				projectName: project.name,
+			},
+			log: message => console.log(message),
+			force,
+		})
+		return true
+	}
+}

package/src/lib/migrations/MigrationPrinter.ts

@@ -0,0 +1,86 @@
+import { Schema } from '@contember/schema'
+import chalk from 'chalk'
+import { AnyMigrationStatus, Migration, MigrationDescriber, MigrationState } from '@contember/migrations-client'
+import { emptyDatabaseMetadata } from '@contember/database'
+import chalkTable from 'chalk-table'
+import { assertNever } from '../assertNever'
+
+export class MigrationPrinter {
+	constructor(
+		private readonly migrationsDescriber: MigrationDescriber,
+	) {
+	}
+
+	printMigrationDescription = (
+		schema: Schema,
+		migration: Migration,
+		options: { sqlOnly?: boolean; noSql?: boolean },
+	) => {
+		const description = this.migrationsDescriber.describeModifications(schema, migration)
+		description.forEach(({ modification, getSql, description }) => {
+			const sql = getSql({
+				systemSchema: 'system',
+				databaseMetadata: emptyDatabaseMetadata,
+				invalidateDatabaseMetadata: () => null,
+			})
+			if (options.sqlOnly) {
+				if (sql.trim()) {
+					console.log(sql)
+				}
+			} else {
+				const color = description.isDestructive ? chalk.red : chalk.blue
+				console.group(color(`${description.message} [${modification.modification}]`))
+				if (description.failureWarning) {
+					console.log(chalk.bgWhite(chalk.redBright(description.failureWarning)))
+				}
+
+				if (!options.noSql) {
+					if (sql.trim()) {
+						console.log(sql)
+					} else {
+						console.log('No sql to execute')
+					}
+				}
+				console.groupEnd()
+			}
+		})
+	}
+
+	printStatusTable = (migrations: AnyMigrationStatus[]) => {
+		const table = chalkTable(
+			{
+				columns: ['status', 'migration', 'info'],
+			},
+			migrations.map(it => {
+				switch (it.state) {
+					case MigrationState.EXECUTED_ERROR:
+						return { status: chalk.bgRedBright.white('ERROR'), migration: it.name, info: it.errorMessage }
+					case MigrationState.EXECUTED_OK:
+						return {
+							status: chalk.bgGreen.blackBright('Executed'),
+							migration: it.name,
+							info: `Executed at ${it.executedMigration.executedAt.toISOString()}`,
+						}
+					case MigrationState.EXECUTED_MISSING:
+						return {
+							status: chalk.bgRedBright.white('ERROR'),
+							migration: it.name,
+							info: it.errorMessage,
+						}
+					case MigrationState.TO_EXECUTE_OK:
+						return {
+							status: chalk.bgBlueBright.white('Not executed'),
+							migration: it.name,
+							info: 'Will be executed during next deploy',
+						}
+					case MigrationState.TO_EXECUTE_ERROR:
+						return { status: chalk.bgRedBright.white('ERROR'), migration: it.name, info: it.errorMessage }
+					default:
+						assertNever(it)
+				}
+			}),
+		)
+		console.log(table)
+	}
+
+}

package/src/lib/migrations/MigrationRebaseFacade.ts

@@ -0,0 +1,41 @@
+import { Migration, MigrationFilesManager, SchemaVersionBuilder, SystemClient } from '@contember/migrations-client'
+import { MigrationsValidator } from './MigrationsValidator'
+import { emptySchema } from '@contember/schema-utils'
+import { MigrationVersionHelper } from '@contember/engine-common'
+import { SystemClientProvider } from '../SystemClientProvider'
+
+export class MigrationRebaseFacade {
+	constructor(
+		private readonly schemaVersionBuilder: SchemaVersionBuilder,
+		private readonly migrationsValidator: MigrationsValidator,
+		private readonly systemClientProvider: SystemClientProvider,
+		private readonly migrationFilesManager: MigrationFilesManager,
+	) {
+	}
+
+	rebase = async (migrations: Migration[]) => {
+		const versions = migrations.map(it => it.version)
+		const schemaWithoutMigrations = await this.schemaVersionBuilder.buildSchemaAdvanced(
+			emptySchema,
+			version => !versions.includes(version),
+		)
+		const valid = await this.migrationsValidator.validate(schemaWithoutMigrations, migrations)
+		if (!valid) {
+			throw `Cannot rebase migrations`
+		}
+
+		let i = 0
+		for (const migration of migrations) {
+			const name = migration.name.substring(MigrationVersionHelper.prefixLength + 1)
+			const [version, fullName] = MigrationVersionHelper.createVersion(name, i++)
+			const newMigration = {
+				name: fullName,
+				version: version,
+				formatVersion: migration.formatVersion,
+				modifications: migration.modifications,
+			}
+			await this.systemClientProvider.get().migrationModify(migration.version, newMigration)
+			await this.migrationFilesManager.moveFile(migration.name, newMigration.name)
+		}
+	}
+}

package/src/lib/migrations/MigrationsStatusFacade.ts

@@ -0,0 +1,27 @@
+import { MigrationsResolver, MigrationsStatusResolver, SystemClient } from '@contember/migrations-client'
+import { createMigrationStatusTable } from './migrations'
+import { SystemClientProvider } from '../SystemClientProvider'
+
+export class MigrationsStatusFacade {
+	constructor(
+		private readonly systemClientProvider: SystemClientProvider,
+		private readonly migrationsResolver: MigrationsResolver,
+		private readonly migrationsStatusResolver: MigrationsStatusResolver,
+	) {
+	}
+
+
+	public resolveMigrationsStatus = async ({ force }: { force?: boolean }) => {
+		const executedMigrations = await this.systemClientProvider.get().listExecutedMigrations()
+		const localMigrations = await this.migrationsResolver.getMigrationFiles()
+		const status = await this.migrationsStatusResolver.getMigrationsStatus(executedMigrations, localMigrations, force)
+		if (status.errorMigrations.length > 0) {
+			console.error(createMigrationStatusTable(status.errorMigrations))
+			if (!force) {
+				throw `Cannot execute migrations`
+			}
+		}
+
+		return status
+	}
+}

package/src/lib/migrations/MigrationsValidator.ts

@@ -0,0 +1,40 @@
+import { Migration } from '@contember/migrations-client'
+import { Schema } from '@contember/schema'
+import { SchemaValidatorSkippedErrors } from '@contember/schema-utils'
+import { MigrationDescriber, MigrationVersionHelper, SchemaMigrator, SchemaUpdateError } from '@contember/schema-migrations'
+import { validateSchemaAndPrintErrors } from '../schema/SchemaValidationHelper'
+
+export class MigrationsValidator {
+	constructor(
+		private readonly describer: MigrationDescriber,
+		private readonly migrator: SchemaMigrator,
+	) {
+	}
+
+	validate = (initialSchema: Schema, migrations: Migration[]): boolean => {
+		let migratedSchema = initialSchema
+		let projectValid = true
+		let skippedErrors: SchemaValidatorSkippedErrors[] = []
+		for (const migration of migrations) {
+			try {
+				// just a check that it does not fail
+				this.describer.describeModifications(migratedSchema, migration)
+
+				migratedSchema = this.migrator.applyModifications(migratedSchema, migration.modifications, migration.formatVersion)
+			} catch (e) {
+				if (e instanceof SchemaUpdateError) {
+					console.error(`Migration ${migration.name} has failed`)
+				}
+				throw e
+			}
+			const errorMessage = `Migration ${migration.name} produces invalid schema:`
+			skippedErrors = [
+				...skippedErrors.filter(it => it.skipUntil && MigrationVersionHelper.extractVersion(it.skipUntil) >= migration.version),
+				...migration.skippedErrors ?? [],
+			]
+			projectValid = validateSchemaAndPrintErrors(migratedSchema, errorMessage, skippedErrors)
+				&& projectValid
+		}
+		return projectValid
+	}
+}

package/src/lib/migrations/migrations.ts

@@ -0,0 +1,45 @@
+import { Migration, MigrationDescriber } from '@contember/schema-migrations'
+import chalk from 'chalk'
+import { Schema } from '@contember/schema'
+import chalkTable from 'chalk-table'
+import { assertNever } from '../assertNever'
+import { emptyDatabaseMetadata } from '@contember/database'
+import { MigrationState } from '@contember/migrations-client'
+import { AnyMigrationStatus } from '@contember/migrations-client'
+
+
+export const createMigrationStatusTable = (migrations: AnyMigrationStatus[]): string => {
+	return chalkTable(
+		{
+			columns: ['status', 'migration', 'info'],
+		},
+		migrations.map(it => {
+			switch (it.state) {
+				case MigrationState.EXECUTED_ERROR:
+					return { status: chalk.bgRedBright.white('ERROR'), migration: it.name, info: it.errorMessage }
+				case MigrationState.EXECUTED_OK:
+					return {
+						status: chalk.bgGreen.blackBright('Executed'),
+						migration: it.name,
+						info: `Executed at ${it.executedMigration.executedAt.toISOString()}`,
+					}
+				case MigrationState.EXECUTED_MISSING:
+					return {
+						status: chalk.bgRedBright.white('ERROR'),
+						migration: it.name,
+						info: it.errorMessage,
+					}
+				case MigrationState.TO_EXECUTE_OK:
+					return {
+						status: chalk.bgBlueBright.white('Not executed'),
+						migration: it.name,
+						info: 'Will be executed during next deploy',
+					}
+				case MigrationState.TO_EXECUTE_ERROR:
+					return { status: chalk.bgRedBright.white('ERROR'), migration: it.name, info: it.errorMessage }
+				default:
+					assertNever(it)
+			}
+		}),
+	)
+}

package/src/lib/project/RemoteProject.ts

@@ -0,0 +1,9 @@
+export class RemoteProject {
+	constructor(
+		public readonly name: string,
+		public readonly endpoint: string,
+		public readonly token: string,
+		public readonly adminEndpoint?: string,
+	) {
+	}
+}

package/src/lib/project/RemoteProjectProvider.ts

@@ -0,0 +1,16 @@
+import { RemoteProject } from './RemoteProject'
+
+export class RemoteProjectProvider {
+	private _remoteProject: RemoteProject | undefined = undefined
+
+	public setRemoteProject(remoteProject: RemoteProject) {
+		this._remoteProject = remoteProject
+	}
+
+	public get(): RemoteProject {
+		if (!this._remoteProject) {
+			throw new Error('Remote project not set')
+		}
+		return this._remoteProject
+	}
+}

package/src/lib/project/RemoteProjectResolver.ts

@@ -0,0 +1,30 @@
+import { parseDsn } from '../dsn'
+import { RemoteProject } from './RemoteProject'
+import { CliEnv } from '../env'
+
+export class RemoteProjectResolver {
+	constructor(
+		private readonly cliEnv: CliEnv,
+	) {
+	}
+
+	resolve(identifier?: string): RemoteProject | undefined {
+		let endpoint: string | undefined
+		let token: string | undefined
+		let project: string | undefined
+		if (identifier?.includes('://')) {
+			({ endpoint, project, token } = parseDsn(identifier))
+		} else if (this.cliEnv.dsn) {
+			({ endpoint, project, token } = parseDsn(this.cliEnv.dsn))
+		} else {
+			endpoint = this.cliEnv.apiUrl
+			token = this.cliEnv.apiToken
+			project = !identifier || identifier === '.' ? this.cliEnv.projectName : identifier
+		}
+		if (!project || !endpoint || !token) {
+			return undefined
+		}
+
+		return new RemoteProject(project, endpoint, token)
+	}
+}

package/src/lib/project/docs/.eslintrc.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+	rules: {
+		'react/no-unknown-property': 'off',
+	},
+}

package/src/lib/project/docs/components/EntityInfo.tsx

@@ -0,0 +1,85 @@
+import { Model, Schema } from '@contember/schema'
+import { ReferencesMap } from '../../../schema/collectReferences'
+import { formatEntityAnchor, formatFieldAnchor } from './utils'
+import { SinglePermission } from './SinglePermission'
+import { FieldType } from './FieldType'
+import { FieldPermissions } from './FieldPermissions'
+import { OnDelete } from './OnDelete'
+import { Fragment, h } from 'preact'
+
+interface EntityInfoProps {
+	entity: Model.Entity
+	schema: Schema
+	references: ReferencesMap
+}
+
+export const EntityInfo = ({ entity, schema, references }: EntityInfoProps) => (
+	<div class={'m-4 border border-gray-400 rounded-lg group'}
+		 id={formatEntityAnchor(entity.name)}>
+		<div class={'font-bold text-gray-900 py-2 px-4 border-b border-gray-400 group-target:bg-yellow-100 rounded-t-lg'}>
+			{entity.name}
+		</div>
+		<div class={'px-2 py-2 flex flex-wrap '}>
+			<div>
+				<table>
+					<thead>
+						<tr>
+							<th class={'text-left px-2 text-gray-500 font-normal w-[180px] max-w-[180px]'}>Name</th>
+							<th class={'text-left px-2 text-gray-500 font-normal w-[340px] max-w-[340px]'}>Type</th>
+							{Object.keys(schema.acl.roles).map(role => <th
+								key={role}
+								class={'text-left px-2 text-gray-500 font-normal w-[120px] max-w-[120px] text-xs truncate text-sm'}>{role}</th>)}
+						</tr>
+					</thead>
+					<tr>
+						<td></td>
+						<td></td>
+						{Object.entries(schema.acl.roles).map(([name, role]) => <td class={'px-2'} key={name}>
+							<SinglePermission value={'D'}
+											  predicate={role.entities[entity.name]?.operations.delete} />
+						</td>)}
+					</tr>
+					{Object.values(entity.fields).map(field => (
+						<tr class={'even:bg-gray-100 target:bg-yellow-100'}
+							id={formatFieldAnchor(entity.name, field.name)}
+							key={field.name}
+						>
+							<td class={'px-2 font-mono truncate  w-[180px] max-w-[180px]'} title={field.name}>
+								{field.name}
+							</td>
+							<td class={'text-gray-800 px-2 font-mono w-[420px] max-w-[420px]'}>
+								<FieldType field={field} />
+							</td>
+							{Object.entries(schema.acl.roles).map(([name, role]) => <td class={'px-2'} key={name}>
+								<FieldPermissions field={field.name}
+												  entityPermissions={role.entities[entity.name]} />
+							</td>)}
+						</tr>
+					))}
+
+				</table>
+			</div>
+			<div class={'px-2 py-2 w-1/2'}>
+				<h3 class={'text-lg text-gray-600'}>On delete behaviour:</h3>
+				<p class={'text-gray-500 text-sm'}>
+					(What happens when you attempt to delete entity {entity.name})</p>
+				<div class={'mt-2 text-sm '}>
+					<OnDelete references={references} entity={entity} />
+				</div>
+			</div>
+			{false && <div class={'px-2 py-2 w-1/2'}>
+				<h3 class={'text-lg text-gray-600'}>ACL predicates:</h3>
+				<div class={'mt-2 text-sm '}>
+					{Object.entries(schema.acl.roles).map(([roleName, role]) =>
+						Object.entries(role.entities[entity.name]?.predicates ?? {}).map(([predicateName, predicate]) => (
+							<Fragment key={roleName + '__' + predicateName}>
+								<h4>{roleName}: {predicateName}</h4>
+								<code>{JSON.stringify(predicate)}</code>
+							</Fragment>
+						)),
+					)}
+				</div>
+			</div>}
+		</div>
+	</div>
+)

package/src/lib/project/docs/components/OnDelete.tsx

@@ -0,0 +1,72 @@
+import { h, Fragment } from 'preact'
+import { Model } from '@contember/schema'
+import { ReferenceMapEntry, ReferencesMap } from '../../../schema/collectReferences'
+import { FieldLink } from './FieldLink'
+import { EntityLink } from './EntityLink'
+
+const sortReferences = (a: ReferenceMapEntry, b: ReferenceMapEntry) =>
+	a.owningRelation.joiningColumn.onDelete.localeCompare(b.owningRelation.joiningColumn.onDelete)
+	|| a.owningEntity.name.localeCompare(b.owningEntity.name)
+	|| a.owningRelation.name.localeCompare(b.owningRelation.name)
+
+export const OnDelete = ({ references, entity, visited = [] }: { references: ReferencesMap; entity: Model.Entity; visited?: Model.Entity[] }) => {
+	const referencedFrom = references[entity.name]
+	if (referencedFrom.length === 0) {
+		if (visited.length !== 0) {
+			return null
+		}
+		return (
+			<span class={'bg-green-200 text-gray-600 p-1 rounded'}>
+				This entity is not referenced from any other entity.
+			</span>
+		)
+	}
+
+	if (visited.includes(entity)) {
+		return (
+			<ul class={'ml-4'}>
+				<li class={'italic'}>(recursion)</li>
+			</ul>
+		)
+	}
+
+	return (
+		<ul class={visited.length > 0 ? 'ml-4' : ''}>
+			{referencedFrom
+				.sort(sortReferences)
+				.map(it => {
+					const inverseDescr = it.targetRelation
+						? <>see <FieldLink entity={entity.name} field={it.targetRelation.name} /></>
+						: 'no inverse side'
+					if (it.owningRelation.joiningColumn.onDelete === 'restrict') {
+						return (
+							<li key={it.owningEntity.name + '_' + it.owningRelation.name}>
+								<span class={'bg-black text-white px-1'}>Fails</span> when referenced from
+								{' '}<FieldLink entity={it.owningEntity.name} field={it.owningRelation.name} />
+								{' '}({inverseDescr})
+							</li>
+						)
+					}
+					if (it.owningRelation.joiningColumn.onDelete === 'set null') {
+						return (
+							<li key={it.owningEntity.name + '_' + it.owningRelation.name}>
+								<span class={'bg-blue-400 text-white px-1'}>Sets null</span> at
+								{' '}<FieldLink entity={it.owningEntity.name} field={it.owningRelation.name} />
+								{' '}({inverseDescr})
+							</li>
+						)
+					}
+					if (it.owningRelation.joiningColumn.onDelete === 'cascade') {
+						return (
+							<li key={it.owningEntity.name + '_' + it.owningRelation.name}>
+								<span class={'bg-red-400 text-white px-1'}>Deletes</span> <EntityLink entity={it.owningEntity.name} />
+								{' '}connected using
+								{' '}<FieldLink entity={it.owningEntity.name} field={it.owningRelation.name} noEntityLabel />
+								{' '}({inverseDescr})
+								<OnDelete entity={it.owningEntity} visited={[...visited, entity]} references={references} />
+							</li>
+						)
+					}
+				})}
+		</ul>)
+}

package/src/lib/project/docs/components/ProjectInfo.tsx

@@ -0,0 +1,48 @@
+import { Schema } from '@contember/schema'
+import { h } from 'preact'
+import { collectReferences } from '../../../schema/collectReferences'
+import { EntityLink } from './EntityLink'
+import { EntityInfo } from './EntityInfo'
+
+
+export const ProjectInfo = (props: { schema: Schema; projectName: string }) => {
+	const references = collectReferences(props.schema.model)
+
+	return (
+		<div class={'w-full'}>
+			<div class={'bg-gray-100 p-6 border-b border-gray-400'}>
+				<h1 class={'font-bold text-xl mb-1'}>{props.projectName}</h1>
+				<div class={'flex flex-column gap-4'}>
+					<div>
+						<h2 class={'font-semibold text-gray-500 mb-1'}>Entities</h2>
+						<ul class={'text-sm'}>
+							{Object.values(props.schema.model.entities).map(entity => (
+								<li key={entity.name}>
+									<EntityLink entity={entity.name} />
+								</li>
+							))}
+						</ul>
+					</div>
+					<div>
+						<h2 class={'font-semibold text-gray-500 mb-1'}>Enums</h2>
+						<ul class={'text-sm'}>
+							{Object.entries(props.schema.model.enums).map(([name, values]) => (
+								<li class={'mb-2'} key={name}>
+									{name} <br />
+									<span class={'text-gray-700 ml-4'}>
+										{values.join(', ')}
+									</span>
+								</li>
+							))}
+						</ul>
+					</div>
+				</div>
+
+
+			</div>
+			{Object.values(props.schema.model.entities).map(entity => (
+				<EntityInfo key={entity.name} entity={entity} schema={props.schema} references={references}/>
+			))}
+		</div>
+	)
+}

package/src/lib/project/docs/projectDescribe.tsx

@@ -0,0 +1,28 @@
+import { Schema } from '@contember/schema'
+import { h } from 'preact'
+import render from 'preact-render-to-string'
+import { ProjectInfo } from './components/ProjectInfo'
+import { readFile } from 'node:fs/promises'
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+export const renderProjectInfoHtml = async (schema: Schema, projectName: string) => {
+	const html = render(<ProjectInfo schema={schema} projectName={projectName} />)
+
+	const css = await readFile(dirname(fileURLToPath(import.meta.url)) + '/resources/out.css')
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<style>${css}</style>
+	<title>${projectName}</title>
+</head>
+<body>
+${html}
+</body>
+</html>
+`
+
+}
+