diff --git a/changelog.md b/changelog.md index 4090555..8f2bd7e 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,13 @@ # Changelog +## 2025-01-20 - 1.4.0 - feat(dees-terminal) +Enhanced the dees-terminal component to support environment variable settings and improved setup command execution. + +- Added environment property to pass custom environment variables. +- Introduced webcontainerDeferred to handle the promise for web container creation. +- Enhanced demo to illustrate environment variable usage. +- Improved async interaction with the terminal for setting environment variables and executing setup commands. + ## 2025-01-15 - 1.3.4 - fix(chart) Fix chart rendering and appearance issues in the DeesChartArea component. diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 3aee9d2..f1230b8 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@design.estate/dees-catalog', - version: '1.3.4', + version: '1.4.0', description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.' } diff --git a/ts_web/elements/dees-terminal.ts b/ts_web/elements/dees-terminal.ts index 57bec7e..a23795c 100644 --- a/ts_web/elements/dees-terminal.ts +++ b/ts_web/elements/dees-terminal.ts @@ -22,13 +22,25 @@ declare global { @customElement('dees-terminal') export class DeesTerminal extends DeesElement { - public static demo = () => html` `; + public static demo = () => html` `; // INSTANCE private resizeObserver: ResizeObserver; @property() - public setupCommand = `pnpm install @git.zone/tsbuild && clear && echo 'welcome'`; + public setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`; + + @property() + environment: {[key: string]: string} = {}; + + // exposing webcontainer + private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred(); + public webcontainerPromise = this.webcontainerDeferred.promise; constructor() { super(); @@ -282,8 +294,15 @@ export class DeesTerminal extends DeesElement { input.write(data); }); await this.waitForPrompt(term, '~/'); + // lets set the environment variables + await this.setEnvironmentVariables(this.environment, webcontainerInstance); + input.write(`source source.env\n`); + await this.waitForPrompt(term, '~/'); + // lets run the setup command input.write(this.setupCommand); - input.write(`\n`); + await this.waitForPrompt(term, '~/'); + input.write(`clear && echo 'welcome'\n`); + this.webcontainerDeferred.resolve(webcontainerInstance); } async connectedCallback(): Promise { @@ -300,14 +319,16 @@ export class DeesTerminal extends DeesElement { this.fitAddon.fit(); } - private async waitForPrompt(term: Terminal, prompt: string): Promise { + public async waitForPrompt(term: Terminal, prompt: string): Promise { return new Promise((resolve) => { const checkPrompt = () => { const lines = term.buffer.active; for (let i = 0; i < lines.length; i++) { const line = lines.getLine(i); if (line && line.translateToString().includes(prompt)) { - resolve(); + setTimeout(() => { + resolve(); + }, 100); return; } } @@ -317,4 +338,18 @@ export class DeesTerminal extends DeesElement { checkPrompt(); }); } + + public async setEnvironmentVariables(envArg: {[key: string]: string}, webcontainerInstanceArg?: webcontainer.WebContainer) { + const webcontainerInstance = webcontainerInstanceArg ||await this.webcontainerPromise; + let envFile = `` + for (const key in envArg) { + envFile += `export ${key}="${envArg[key]}"\n`; + } + + await webcontainerInstance.mount({'source.env': { + file: { + contents: envFile, + } + }}); + } }