design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(workspace): rename editor components to workspace group and move terminal & TypeScript intellisense into workspace

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-31 12:37:14 +00:00
parent 08b302bd46
commit 15bca09086
29 changed files with 517 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
changelog.md
View File

@@ -1,5 +1,14 @@
# Changelog
## 2025-12-31 - 3.20.0 - feat(workspace)
rename editor components to workspace group and move terminal & TypeScript intellisense into workspace
- Renamed components and modules from 00group-editor/dees-editor-* to 00group-workspace/dees-workspace-* (e.g. dees-editor-monaco -> dees-workspace-monaco).
- Moved terminal implementation from dees-terminal to dees-workspace-terminal and updated related imports/usages.
- Moved TypeScript intellisense manager into 00group-workspace and updated paths.
- Updated ts_web elements index to export 00group-workspace instead of 00group-editor and adjusted internal imports accordingly.
- Updated scripts/update-monaco-version.cjs to write MONACO_VERSION into the new workspace path and updated log tags.
## 2025-12-31 - 3.19.1 - fix(intellisense)
Debounce TypeScript/JavaScript IntelliSense processing and cache missing packages to reduce work and noisy logs

10
scripts/update-monaco-version.cjs
View File

@@ -11,7 +11,7 @@ function resolveMonacoPackageJson() {
});
return resolvedPath;
} catch (error) {
console.error('[dees-editor] Unable to resolve monaco-editor/package.json');
console.error('[dees-workspace] Unable to resolve monaco-editor/package.json');
throw error;
}
}
@@ -20,25 +20,25 @@ function getMonacoVersion() {
const monacoPackagePath = resolveMonacoPackageJson();
const monacoPackage = require(monacoPackagePath);
if (!monacoPackage.version) {
throw new Error('[dees-editor] monaco-editor/package.json does not expose a version field');
throw new Error('[dees-workspace] monaco-editor/package.json does not expose a version field');
}
return monacoPackage.version;
}
function writeVersionModule(version) {
const targetDir = path.join(projectRoot, 'ts_web', 'elements', '00group-editor', 'dees-editor-monaco');
const targetDir = path.join(projectRoot, 'ts_web', 'elements', '00group-workspace', 'dees-workspace-monaco');
fs.mkdirSync(targetDir, { recursive: true });
const targetFile = path.join(targetDir, 'version.ts');
const fileContent = `// Auto-generated by scripts/update-monaco-version.cjs\nexport const MONACO_VERSION = '${version}';\n`;
fs.writeFileSync(targetFile, fileContent, 'utf8');
console.log(`[dees-editor] Wrote ${path.relative(projectRoot, targetFile)} with monaco-editor@${version}`);
console.log(`[dees-workspace] Wrote ${path.relative(projectRoot, targetFile)} with monaco-editor@${version}`);
}
try {
const version = getMonacoVersion();
writeVersionModule(version);
} catch (error) {
console.error('[dees-editor] Failed to update Monaco version module.');
console.error('[dees-workspace] Failed to update Monaco version module.');
console.error(error instanceof Error ? error.message : error);
process.exitCode = 1;
}

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
version: '3.19.1',
version: '3.20.0',
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}

1
ts_web/elements/00group-editor/dees-editor-filetree/index.ts
View File

@@ -1 +0,0 @@
export * from './dees-editor-filetree.js';

1
ts_web/elements/00group-editor/dees-editor-markdown/index.ts
View File

@@ -1 +0,0 @@
export * from './dees-editor-markdown.js';

1
ts_web/elements/00group-editor/dees-editor-markdownoutlet/index.ts
View File

@@ -1 +0,0 @@
export * from './dees-editor-markdownoutlet.js';

1
ts_web/elements/00group-editor/dees-editor-monaco/index.ts
View File

@@ -1 +0,0 @@
export * from './dees-editor-monaco.js';

6
ts_web/elements/00group-editor/index.ts
View File

@@ -1,6 +0,0 @@
// Editor Components
export * from './dees-editor-monaco/index.js';
export * from './dees-editor-filetree/index.js';
export * from './dees-editor-workspace/index.js';
export * from './dees-editor-markdown/index.js';
export * from './dees-editor-markdownoutlet/index.js';

24
ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
View File

@@ -12,8 +12,8 @@ import { themeDefaultStyles } from '../../00theme.js';
import { DeesModal } from '../../dees-modal/dees-modal.js';
import '../../dees-icon/dees-icon.js';
import '../../dees-label/dees-label.js';
import '../../00group-editor/dees-editor-monaco/dees-editor-monaco.js';
import { DeesEditorMonaco } from '../../00group-editor/dees-editor-monaco/dees-editor-monaco.js';
import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
declare global {
interface HTMLElementTagNameMap {
@@ -77,7 +77,7 @@ export class DeesInputCode extends DeesInputBase<string> {
@state()
accessor copySuccess: boolean = false;
private editorElement: DeesEditorMonaco | null = null;
private editorElement: DeesWorkspaceMonaco | null = null;
public static styles = [
themeDefaultStyles,
@@ -207,7 +207,7 @@ export class DeesInputCode extends DeesInputBase<string> {
position: relative;
}
dees-editor-monaco {
dees-workspace-monaco {
display: block;
}
@@ -295,12 +295,12 @@ export class DeesInputCode extends DeesInputBase<string> {
</div>
</div>
<div class="editor-wrapper">
<dees-editor-monaco
<dees-workspace-monaco
.content=${this.value}
.language=${this.language}
.wordWrap=${this.wordWrap}
@content-change=${this.handleContentChange}
></dees-editor-monaco>
></dees-workspace-monaco>
</div>
</div>
</div>
@@ -308,7 +308,7 @@ export class DeesInputCode extends DeesInputBase<string> {
}
async firstUpdated() {
this.editorElement = this.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
this.editorElement = this.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
if (this.editorElement) {
// Subscribe to content changes from the editor
this.editorElement.contentSubject.subscribe((newContent: string) => {
@@ -386,7 +386,7 @@ export class DeesInputCode extends DeesInputBase<string> {
public async openFullscreen() {
const currentValue = this.value;
let modalEditorElement: DeesEditorMonaco | null = null;
let modalEditorElement: DeesWorkspaceMonaco | null = null;
// Modal-specific state
let modalLanguage = this.language;
@@ -579,11 +579,11 @@ export class DeesInputCode extends DeesInputBase<string> {
</div>
</div>
<div class="modal-editor-wrapper">
<dees-editor-monaco
<dees-workspace-monaco
.content=${currentValue}
.language=${modalLanguage}
.wordWrap=${modalWordWrap}
></dees-editor-monaco>
></dees-workspace-monaco>
</div>
`,
menuOptions: [
@@ -597,7 +597,7 @@ export class DeesInputCode extends DeesInputBase<string> {
name: 'Save & Close',
action: async (modalRef) => {
// Get the editor content from the modal
modalEditorElement = modalRef.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
modalEditorElement = modalRef.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
if (modalEditorElement) {
const editor = await modalEditorElement.editorDeferred.promise;
const newValue = editor.getValue();
@@ -611,7 +611,7 @@ export class DeesInputCode extends DeesInputBase<string> {
// Wait for modal to render
await new Promise(resolve => setTimeout(resolve, 100));
modalEditorElement = modal.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
modalEditorElement = modal.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
// Wire up toolbar event handlers
const toolbar = modal.shadowRoot?.querySelector('.modal-toolbar');

10
ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
View File

@@ -14,7 +14,7 @@ import {
domtools,
} from '@design.estate/dees-element';
import '../../dees-icon/dees-icon.js';
import type { DeesTerminal } from '../../dees-terminal/dees-terminal.js';
import type { DeesWorkspaceTerminal } from '../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
@@ -393,7 +393,7 @@ export class DeesSimpleAppDash extends DeesElement {
}
}
public currentTerminal: DeesTerminal;
public currentTerminal: DeesWorkspaceTerminal;
public async launchTerminal() {
const domtools = await this.domtoolsPromise;
if (this.currentTerminal) {
@@ -401,10 +401,10 @@ export class DeesSimpleAppDash extends DeesElement {
await this.closeTerminal();
return;
}
const maincontainer = this.shadowRoot.querySelector('.maincontainer');
const { DeesTerminal } = await import('../../dees-terminal/dees-terminal.js');
const terminal = new DeesTerminal();
const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
const terminal = new DeesWorkspaceTerminal();
terminal.setupCommand = this.terminalSetupCommand;
this.currentTerminal = terminal;
maincontainer.appendChild(terminal);

8
ts_web/elements/00group-editor/dees-editor-filetree/dees-editor-filetree.ts → ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts
View File

@@ -20,7 +20,7 @@ import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-te
declare global {
interface HTMLElementTagNameMap {
'dees-editor-filetree': DeesEditorFiletree;
'dees-workspace-filetree': DeesWorkspaceFiletree;
}
}
@@ -30,11 +30,11 @@ interface ITreeNode extends IFileEntry {
level: number;
}
@customElement('dees-editor-filetree')
export class DeesEditorFiletree extends DeesElement {
@customElement('dees-workspace-filetree')
export class DeesWorkspaceFiletree extends DeesElement {
public static demo = () => html`
<div style="width: 300px; height: 400px; position: relative;">
<dees-editor-filetree></dees-editor-filetree>
<dees-workspace-filetree></dees-workspace-filetree>
</div>
`;

1
ts_web/elements/00group-workspace/dees-workspace-filetree/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-workspace-filetree.js';

20
ts_web/elements/00group-editor/dees-editor-markdown/dees-editor-markdown.ts → ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts
View File

@@ -9,19 +9,19 @@ import {
domtools
} from '@design.estate/dees-element';
import { themeDefaultStyles } from '../../00theme.js';
import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-monaco.js';
const deferred = domtools.plugins.smartpromise.defer();
declare global {
interface HTMLElementTagNameMap {
'dees-editormarkdown': DeesEditorMarkdown;
'dees-workspace-markdown': DeesWorkspaceMarkdown;
}
}
@customElement('dees-editormarkdown')
export class DeesEditorMarkdown extends DeesElement {
public static demo = () => html`<dees-editormarkdown></dees-editormarkdown>`;
@customElement('dees-workspace-markdown')
export class DeesWorkspaceMarkdown extends DeesElement {
public static demo = () => html`<dees-workspace-markdown></dees-workspace-markdown>`;
public static styles = [
themeDefaultStyles,
@@ -52,7 +52,7 @@ export class DeesEditorMarkdown extends DeesElement {
return html`
<div class="gridcontainer">
<div class="editorContainer">
<dees-editor-monaco
<dees-workspace-monaco
.language=${'markdown'}
.content=${`# a test content
@@ -76,10 +76,10 @@ const hello = 'yes'
\`\`\`
`}
wordWrap="bounded"
></dees-editor-monaco>
></dees-workspace-monaco>
</div>
<div class="outletContainer">
<dees-editormarkdownoutlet></dees-editormarkdownoutlet>
<dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>
</div>
</div>
`;
@@ -87,10 +87,10 @@ const hello = 'yes'
public async firstUpdated(_changedPropertiesArg) {
await super.firstUpdated(_changedPropertiesArg);
const editor = this.shadowRoot.querySelector('dees-editor-monaco') as DeesEditorMonaco;
const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
// lets care about wiring the markdown stuff.
const markdownOutlet = this.shadowRoot.querySelector('dees-editormarkdownoutlet');
const markdownOutlet = this.shadowRoot.querySelector('dees-workspace-markdownoutlet');
const smartmarkdownInstance = new domtools.plugins.smartmarkdown.SmartMarkdown();
const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...')
editor.contentSubject.subscribe(async contentArg => {

1
ts_web/elements/00group-workspace/dees-workspace-markdown/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-workspace-markdown.js';

8
ts_web/elements/00group-editor/dees-editor-markdownoutlet/dees-editor-markdownoutlet.ts → ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts
View File

@@ -2,14 +2,14 @@ import { customElement, DeesElement, html, type TemplateResult } from '@design.e
declare global {
interface HTMLElementTagNameMap {
'dees-editormarkdownoutlet': DeesEditorMarkdownOutlet;
'dees-workspace-markdownoutlet': DeesWorkspaceMarkdownoutlet;
}
}
@customElement('dees-editormarkdownoutlet')
export class DeesEditorMarkdownOutlet extends DeesElement {
@customElement('dees-workspace-markdownoutlet')
export class DeesWorkspaceMarkdownoutlet extends DeesElement {
// DEMO
public static demo = () => html`<dees-editormarkdownoutlet></dees-editormarkdownoutlet>`;
public static demo = () => html`<dees-workspace-markdownoutlet></dees-workspace-markdownoutlet>`;
// INSTANCE
private outlet: HTMLElement;

1
ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-workspace-markdownoutlet.js';

16
ts_web/elements/00group-editor/dees-editor-monaco/dees-editor-monaco.ts → ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts
View File

@@ -15,14 +15,14 @@ import type * as monaco from 'monaco-editor';
declare global {
interface HTMLElementTagNameMap {
'dees-editor-monaco': DeesEditorMonaco;
'dees-workspace-monaco': DeesWorkspaceMonaco;
}
}
@customElement('dees-editor-monaco')
export class DeesEditorMonaco extends DeesElement {
@customElement('dees-workspace-monaco')
export class DeesWorkspaceMonaco extends DeesElement {
// DEMO
public static demo = () => html`<dees-editor-monaco></dees-editor-monaco>`;
public static demo = () => html`<dees-workspace-monaco></dees-workspace-monaco>`;
// STATIC
public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
@@ -98,17 +98,17 @@ export class DeesEditorMonaco extends DeesElement {
const container = this.shadowRoot.getElementById('container');
const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
if (!DeesEditorMonaco.monacoDeferred) {
DeesEditorMonaco.monacoDeferred = domtools.plugins.smartpromise.defer();
if (!DeesWorkspaceMonaco.monacoDeferred) {
DeesWorkspaceMonaco.monacoDeferred = domtools.plugins.smartpromise.defer();
const scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
const script = document.createElement('script');
script.src = scriptUrl;
script.onload = () => {
DeesEditorMonaco.monacoDeferred.resolve();
DeesWorkspaceMonaco.monacoDeferred.resolve();
};
document.head.appendChild(script);
}
await DeesEditorMonaco.monacoDeferred.promise;
await DeesWorkspaceMonaco.monacoDeferred.promise;
(window as any).require.config({
paths: { vs: `${monacoCdnBase}/min/vs` },

1
ts_web/elements/00group-workspace/dees-workspace-monaco/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-workspace-monaco.js';

0
ts_web/elements/00group-editor/dees-editor-monaco/version.ts → ts_web/elements/00group-workspace/dees-workspace-monaco/version.ts
View File

361
ts_web/elements/00group-workspace/dees-workspace-terminal-preview/dees-workspace-terminal-preview.ts Normal file
View File

@@ -0,0 +1,361 @@
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
css,
cssManager,
} from '@design.estate/dees-element';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { themeDefaultStyles } from '../../00theme.js';
declare global {
interface HTMLElementTagNameMap {
'dees-workspace-terminal-preview': DeesWorkspaceTerminalPreview;
}
}
/**
* A read-only terminal preview component using xterm.js for rendering.
* Used during workspace initialization to show onInit command progress.
*/
@customElement('dees-workspace-terminal-preview')
export class DeesWorkspaceTerminalPreview extends DeesElement {
public static demo = () => html`
<dees-workspace-terminal-preview
.command=${'pnpm install'}
.lines=${[
'Packages: +42',
'Progress: resolved 142, reused 140, downloaded 2, added 42, done',
'',
'dependencies:',
'+ @push.rocks/smartpromise 4.2.3',
'+ typescript 5.3.3',
'',
'Done in 2.3s'
]}
></dees-workspace-terminal-preview>
`;
/**
* The command being displayed (shown in header)
*/
@property({ type: String })
accessor command: string = '';
/**
* Output lines to display
*/
@property({ type: Array })
accessor lines: string[] = [];
private terminal: Terminal | null = null;
private fitAddon: FitAddon | null = null;
private lastLineCount: number = 0;
private resizeObserver: ResizeObserver | null = null;
public static styles = [
themeDefaultStyles,
cssManager.defaultStyles,
css`
:host {
display: block;
height: 200px;
}
.terminal-preview {
height: 100%;
border-radius: 8px;
overflow: hidden;
background: #000000;
border: 1px solid hsl(0 0% 20%);
display: flex;
flex-direction: column;
}
.terminal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: hsl(0 0% 10%);
font-size: 12px;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
color: hsl(0 0% 60%);
border-bottom: 1px solid hsl(0 0% 20%);
flex-shrink: 0;
}
.terminal-header-icon {
color: hsl(0 0% 50%);
}
.terminal-header-command {
color: hsl(0 0% 80%);
font-weight: 500;
}
.terminal-container {
flex: 1;
position: relative;
padding: 8px;
}
#xterm-container {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
}
/* xterm.js styles */
.xterm {
font-feature-settings: 'liga' 0;
position: relative;
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.xterm.focus,
.xterm:focus {
outline: none;
}
.xterm .xterm-helpers {
position: absolute;
top: 0;
z-index: 5;
}
.xterm .xterm-helper-textarea {
padding: 0;
border: 0;
margin: 0;
position: absolute;
opacity: 0;
left: -9999em;
top: 0;
width: 0;
height: 0;
z-index: -5;
white-space: nowrap;
overflow: hidden;
resize: none;
}
.xterm .composition-view {
background: #000000;
color: #fff;
display: none;
position: absolute;
white-space: nowrap;
z-index: 1;
}
.xterm .composition-view.active {
display: block;
}
.xterm .xterm-viewport {
background-color: #000000;
overflow-y: scroll;
cursor: default;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.xterm .xterm-screen {
position: relative;
}
.xterm .xterm-screen canvas {
position: absolute;
left: 0;
top: 0;
}
.xterm .xterm-scroll-area {
visibility: hidden;
}
.xterm-char-measure-element {
display: inline-block;
visibility: hidden;
position: absolute;
top: 0;
left: -9999em;
line-height: normal;
}
.xterm {
cursor: text;
}
.xterm.enable-mouse-events {
cursor: default;
}
.xterm.xterm-cursor-pointer {
cursor: pointer;
}
.xterm.column-select.focus {
cursor: crosshair;
}
.xterm .xterm-accessibility,
.xterm .xterm-message {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 10;
color: transparent;
}
.xterm .live-region {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.xterm-dim {
opacity: 0.5;
}
.xterm-underline {
text-decoration: underline;
}
/* Custom scrollbar for xterm viewport */
.xterm .xterm-viewport::-webkit-scrollbar {
width: 8px;
}
.xterm .xterm-viewport::-webkit-scrollbar-track {
background: hsl(0 0% 8%);
}
.xterm .xterm-viewport::-webkit-scrollbar-thumb {
background: hsl(0 0% 25%);
border-radius: 4px;
}
.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
background: hsl(0 0% 35%);
}
`,
];
public render(): TemplateResult {
return html`
<div class="terminal-preview">
<div class="terminal-header">
<span class="terminal-header-icon">$</span>
<span class="terminal-header-command">${this.command || 'Waiting...'}</span>
</div>
<div class="terminal-container">
<div id="xterm-container"></div>
</div>
</div>
`;
}
public async firstUpdated(
_changedProperties: Map<string | number | symbol, unknown>
): Promise<void> {
super.firstUpdated(_changedProperties);
const container = this.shadowRoot?.getElementById('xterm-container');
if (!container) return;
// Create xterm terminal in read-only mode
this.terminal = new Terminal({
convertEol: true,
cursorBlink: false,
disableStdin: true,
fontSize: 12,
fontFamily: "'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace",
theme: {
background: '#000000',
foreground: '#cccccc',
},
scrollback: 1000,
});
this.fitAddon = new FitAddon();
this.terminal.loadAddon(this.fitAddon);
this.terminal.open(container);
this.fitAddon.fit();
// Set up resize observer to refit terminal
this.resizeObserver = new ResizeObserver(() => {
if (this.fitAddon) {
this.fitAddon.fit();
}
});
this.resizeObserver.observe(container);
// Write any existing lines
this.writeNewLines();
}
public async updated(changedProperties: Map<string, any>) {
super.updated(changedProperties);
if (changedProperties.has('lines')) {
this.writeNewLines();
}
}
private writeNewLines() {
if (!this.terminal) return;
// Write only new lines since last update
const newLines = this.lines.slice(this.lastLineCount);
for (const line of newLines) {
this.terminal.writeln(line);
}
this.lastLineCount = this.lines.length;
}
public async disconnectedCallback(): Promise<void> {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
this.resizeObserver = null;
}
if (this.terminal) {
this.terminal.dispose();
this.terminal = null;
}
await super.disconnectedCallback();
}
/**
* Add a new line to the output
*/
public addLine(line: string) {
this.lines = [...this.lines, line];
}
/**
* Clear all output lines
*/
public clear() {
this.lines = [];
this.lastLineCount = 0;
if (this.terminal) {
this.terminal.clear();
}
}
}

1
ts_web/elements/00group-workspace/dees-workspace-terminal-preview/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-workspace-terminal-preview.js';

14
ts_web/elements/dees-terminal/dees-terminal.ts → ts_web/elements/00group-workspace/dees-workspace-terminal/dees-workspace-terminal.ts
View File

@@ -11,21 +11,21 @@ import * as domtools from '@design.estate/dees-domtools';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { themeDefaultStyles } from '../00theme.js';
import type { IExecutionEnvironment } from '../00group-runtime/index.js';
import { WebContainerEnvironment } from '../00group-runtime/index.js';
import { themeDefaultStyles } from '../../00theme.js';
import type { IExecutionEnvironment } from '../../00group-runtime/index.js';
import { WebContainerEnvironment } from '../../00group-runtime/index.js';
declare global {
interface HTMLElementTagNameMap {
'dees-terminal': DeesTerminal;
'dees-workspace-terminal': DeesWorkspaceTerminal;
}
}
@customElement('dees-terminal')
export class DeesTerminal extends DeesElement {
@customElement('dees-workspace-terminal')
export class DeesWorkspaceTerminal extends DeesElement {
public static demo = () => {
const env = new WebContainerEnvironment();
return html`<dees-terminal .executionEnvironment=${env}></dees-terminal>`;
return html`<dees-workspace-terminal .executionEnvironment=${env}></dees-workspace-terminal>`;
};
// INSTANCE

1
ts_web/elements/00group-workspace/dees-workspace-terminal/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './dees-workspace-terminal.js';

95
ts_web/elements/00group-editor/dees-editor-workspace/dees-editor-workspace.ts → ts_web/elements/00group-workspace/dees-workspace/dees-workspace.ts
View File

@@ -13,18 +13,19 @@ import { themeDefaultStyles } from '../../00theme.js';
import type { IExecutionEnvironment, IFileWatcher } from '../../00group-runtime/index.js';
import { WebContainerEnvironment } from '../../00group-runtime/index.js';
import type { FileSystemTree } from '@webcontainer/api';
import '../dees-editor-monaco/dees-editor-monaco.js';
import '../dees-editor-filetree/dees-editor-filetree.js';
import { DeesEditorFiletree } from '../dees-editor-filetree/dees-editor-filetree.js';
import '../../dees-terminal/dees-terminal.js';
import '../dees-workspace-monaco/dees-workspace-monaco.js';
import '../dees-workspace-filetree/dees-workspace-filetree.js';
import { DeesWorkspaceFiletree } from '../dees-workspace-filetree/dees-workspace-filetree.js';
import '../dees-workspace-terminal/dees-workspace-terminal.js';
import '../dees-workspace-terminal-preview/dees-workspace-terminal-preview.js';
import '../../dees-icon/dees-icon.js';
import { DeesEditorMonaco } from '../dees-editor-monaco/dees-editor-monaco.js';
import { DeesWorkspaceMonaco } from '../dees-workspace-monaco/dees-workspace-monaco.js';
import { TypeScriptIntelliSenseManager } from './typescript-intellisense.js';
import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
declare global {
interface HTMLElementTagNameMap {
'dees-editor-workspace': DeesEditorWorkspace;
'dees-workspace': DeesWorkspace;
}
}
@@ -35,8 +36,8 @@ interface IOpenFile {
modified: boolean;
}
@customElement('dees-editor-workspace')
export class DeesEditorWorkspace extends DeesElement {
@customElement('dees-workspace')
export class DeesWorkspace extends DeesElement {
public static demo = () => {
const env = new WebContainerEnvironment();
@@ -175,10 +176,10 @@ testSmartPromise();
return html`
<div style="width: 100%; height: 600px; position: relative;">
<dees-editor-workspace
<dees-workspace
.executionEnvironment=${env}
.initializationPromise=${mountPromise}
></dees-editor-workspace>
></dees-workspace>
</div>
`;
};
@@ -232,7 +233,7 @@ testSmartPromise();
resource: { path: string };
}> = [];
private editorElement: DeesEditorMonaco | null = null;
private editorElement: DeesWorkspaceMonaco | null = null;
private initializationStarted: boolean = false;
private intelliSenseManager: TypeScriptIntelliSenseManager | null = null;
private intelliSenseInitialized: boolean = false;
@@ -247,6 +248,13 @@ testSmartPromise();
accessor autoSave: boolean = false;
private autoSaveInterval: ReturnType<typeof setInterval> | null = null;
// Init terminal preview state
@state()
accessor initCommand: string = '';
@state()
accessor initOutput: string[] = [];
// Keyboard shortcut handler (bound for proper cleanup)
private keydownHandler = (e: KeyboardEvent) => {
// Cmd+S (Mac) or Ctrl+S (Windows/Linux) - Save
@@ -630,6 +638,11 @@ testSmartPromise();
opacity: 0.5;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.initializing {
display: flex;
flex-direction: column;
@@ -641,7 +654,17 @@ testSmartPromise();
gap: 12px;
}
dees-editor-filetree {
.initializing dees-icon {
animation: spin 1s linear infinite;
}
.initializing dees-workspace-terminal-preview {
margin-top: 24px;
width: 80%;
max-width: 600px;
}
dees-workspace-filetree {
position: absolute;
top: 0;
left: 0;
@@ -649,7 +672,7 @@ testSmartPromise();
bottom: 0;
}
dees-editor-monaco {
dees-workspace-monaco {
position: absolute;
top: 0;
left: 0;
@@ -657,7 +680,7 @@ testSmartPromise();
bottom: 0;
}
dees-terminal {
dees-workspace-terminal {
position: absolute;
top: 0;
left: 0;
@@ -679,6 +702,12 @@ testSmartPromise();
<div class="initializing">
<dees-icon .icon=${'lucide:loader2'} iconSize="32"></dees-icon>
<span>Initializing workspace...</span>
${this.initCommand ? html`
<dees-workspace-terminal-preview
.command=${this.initCommand}
.lines=${this.initOutput}
></dees-workspace-terminal-preview>
` : ''}
</div>
`;
}
@@ -690,11 +719,11 @@ testSmartPromise();
class="filetree-panel ${this.isFileTreeCollapsed ? 'collapsed' : ''}"
style="width: ${this.isFileTreeCollapsed ? 0 : this.fileTreeWidth}px"
>
<dees-editor-filetree
<dees-workspace-filetree
.executionEnvironment=${this.executionEnvironment}
.selectedPath=${this.activeFilePath}
@file-select=${this.handleFileSelect}
></dees-editor-filetree>
></dees-workspace-filetree>
</div>
` : ''}
@@ -725,12 +754,12 @@ testSmartPromise();
<span>Select a file to edit</span>
</div>
` : html`
<dees-editor-monaco
<dees-workspace-monaco
.filePath=${this.activeFilePath}
.content=${this.getActiveFileContent()}
.language=${this.getLanguageFromPath(this.activeFilePath)}
@content-change=${this.handleContentChange}
></dees-editor-monaco>
></dees-workspace-monaco>
`}
</div>
</div>
@@ -770,10 +799,10 @@ testSmartPromise();
</div>
</div>
<div class="terminal-content" style="display: ${this.activeBottomPanel === 'terminal' ? 'block' : 'none'}">
<dees-terminal
<dees-workspace-terminal
.executionEnvironment=${this.executionEnvironment}
.setupCommand=${''}
></dees-terminal>
></dees-workspace-terminal>
</div>
<div class="problems-content" style="display: ${this.activeBottomPanel === 'problems' ? 'block' : 'none'}">
${this.renderProblemsPanel()}
@@ -856,12 +885,36 @@ testSmartPromise();
if (onInit && typeof onInit === 'string') {
console.log('Executing onInit command:', onInit);
// Set command for terminal preview display
this.initCommand = onInit;
this.initOutput = [];
// Parse command and args
const [cmd, ...args] = onInit.split(' ');
const process = await this.executionEnvironment.spawn(cmd, args);
// Capture stdout/stderr for terminal preview
process.output.pipeTo(
new WritableStream({
write: (data) => {
// Split data into lines and append
const lines = data.split('\n');
for (const line of lines) {
if (line) {
this.initOutput = [...this.initOutput, line];
}
}
},
})
);
// Wait for completion
const exitCode = await process.exit;
console.log('onInit command completed with exit code:', exitCode);
// Add completion message
this.initOutput = [...this.initOutput, '', `Command completed with exit code: ${exitCode}`];
}
}
} catch (error) {
@@ -1212,7 +1265,7 @@ testSmartPromise();
// Wait for editor to be ready, then navigate to the line
await this.updateComplete;
const editorElement = this.shadowRoot?.querySelector('dees-editor-monaco') as DeesEditorMonaco;
const editorElement = this.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
if (editorElement) {
const editor = await editorElement.editorDeferred.promise;
editor.revealLineInCenter(marker.startLineNumber);

2
ts_web/elements/00group-editor/dees-editor-workspace/index.ts → ts_web/elements/00group-workspace/dees-workspace/index.ts
View File

@@ -1,2 +1,2 @@
export * from './dees-editor-workspace.js';
export * from './dees-workspace.js';
export * from './typescript-intellisense.js';

0
ts_web/elements/00group-editor/dees-editor-workspace/typescript-intellisense.ts → ts_web/elements/00group-workspace/dees-workspace/typescript-intellisense.ts
View File

8
ts_web/elements/00group-workspace/index.ts Normal file
View File

@@ -0,0 +1,8 @@
// Workspace Components
export * from './dees-workspace/index.js';
export * from './dees-workspace-monaco/index.js';
export * from './dees-workspace-filetree/index.js';
export * from './dees-workspace-terminal/index.js';
export * from './dees-workspace-terminal-preview/index.js';
export * from './dees-workspace-markdown/index.js';
export * from './dees-workspace-markdownoutlet/index.js';

1
ts_web/elements/dees-terminal/index.ts
View File

@@ -1 +0,0 @@
export * from './dees-terminal.js';

4
ts_web/elements/index.ts
View File

@@ -6,7 +6,7 @@ export * from './00group-appui/index.js';
export * from './00group-button/index.js';
export * from './00group-chart/index.js';
export * from './00group-dataview/index.js';
export * from './00group-editor/index.js';
export * from './00group-workspace/index.js';
export * from './00group-form/index.js';
export * from './00group-input/index.js';
export * from './00group-pdf/index.js';
@@ -34,7 +34,7 @@ export * from './dees-spinner/index.js';
export * from './dees-statsgrid/index.js';
export * from './dees-stepper/index.js';
export * from './dees-table/index.js';
export * from './dees-terminal/index.js';
// dees-terminal is now part of 00group-workspace as dees-workspace-terminal
export * from './dees-toast/index.js';
export * from './dees-updater/index.js';
export * from './dees-windowcontrols/index.js';