added experimental dependency resolving for ts

Mudloop · Nov 8, 2024 · 5236f76 · 5236f76
1 parent bde9a2e
commit 5236f76
Show file tree

Hide file tree

Showing 9 changed files with 166 additions and 136 deletions.
diff --git a/docs/bundle/js/index.js b/docs/bundle/js/index.js
diff --git a/docs/bundle/js/index.js.map b/docs/bundle/js/index.js.map
diff --git a/docs/service.worker.js b/docs/service.worker.js
diff --git a/docs/services/ts.service.js b/docs/services/ts.service.js
diff --git a/playground/src/components/FlexSplitter.ts b/playground/src/components/FlexSplitter.ts
@@ -1,7 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 @customElement('flex-splitter') export class FlexSplitter extends LitElement {
-	@property({ type: 'string', attribute: true }) attach?: 'prev' | 'next' = 'prev';
+	@property({ type: String, attribute: true }) attach?: 'prev' | 'next' = 'prev';
 	static styles = css`
 		:host { display: block; padding: 1px; background-color: #666; }
 		dialog, dialog::backdrop { opacity: 0; }

diff --git a/playground/src/components/MonacoEditor.ts b/playground/src/components/MonacoEditor.ts
@@ -4,7 +4,6 @@ import monaco from '@cmajor-playground/bunaco';
 import monacoCSS from "@cmajor-playground/bunaco/dist/monaco.css" with { type: 'text' };
 import { unsafeHTML } from "lit/directives/unsafe-html";
 import { FileEditorBase } from "./FileEditorBase";
-// monaco.languages.typescript.typescriptDefaults.addExtraLib()
 @customElement("cmaj-monaco-editor") export class MonacoEditor extends FileEditorBase {
 	static getLanguage = (extension?: string) => (monaco.languages.getLanguages().find(lang => lang.extensions?.includes('.' + extension) || lang.extensions?.includes(extension!)))?.id
 	static styles = css`
@@ -52,14 +51,14 @@ import { FileEditorBase } from "./FileEditorBase";
 			insertSpaces: false,
 			useTabStops: true
 		});
-		
+
 
 		this.monaco.onDidChangeModelContent(() => this.setEditorContent(this.monaco!.getValue()));
 		this.observer = new ResizeObserver(() => this.checkSize());
 		this.observer.observe(editorContainer);
 		window.addEventListener('resize', () => this.checkSize());
 		this.checkSize();
-		
+
 	}
 
 	private checkSize(): void {

diff --git a/playground/src/service-worker/temp/ts.service.js b/playground/src/service-worker/temp/ts.service.js
diff --git a/playground/src/service-worker/ts.service.ts b/playground/src/service-worker/ts.service.ts
@@ -1,13 +1,48 @@
-import ts, { TranspileOptions } from 'typescript';
+import ts, { CustomTransformerFactory, ModuleResolutionKind, SourceFile, TransformationContext, Transformer, TransformerFactory, TranspileOptions } from 'typescript';
+console.log('creating ts service');
 // @ts-ignore
 return class {
+	static transformer: TransformerFactory<SourceFile> | CustomTransformerFactory;
 	static compileTypeScript(code: string, options?: TranspileOptions) {
 		options ??= {};
 		options.compilerOptions ??= {
 			module: ts.ModuleKind.Preserve,
 			target: ts.ScriptTarget.ESNext,
 			experimentalDecorators: true,
+			moduleResolution: ModuleResolutionKind.Classic
 		};
-		return ts.transpileModule(code, options).outputText;
+		this.transformer = <T extends ts.Node>(context: TransformationContext) => {
+			return (node: T) => {
+				function visit(node: ts.Node): ts.Node {
+					// Check if the node is an import declaration
+					if (ts.isImportDeclaration(node)) {
+						const importPath = node.moduleSpecifier.getText().slice(1, -1); // Remove quotes around the path
+						console.log('visiting', importPath, !importPath.startsWith("/") && !importPath.startsWith(".") && !importPath.startsWith('http:') && !importPath.startsWith('https:'));
+						// Only transform if the path does not contain '/', '.', or a protocol
+						if (!importPath.startsWith("/") && !importPath.startsWith(".") && !importPath.startsWith('http:') && !importPath.startsWith('https:')) {
+
+							// Replace the import path with "https://esm.sh/..."
+							const newImportPath = ts.factory.createStringLiteral(`https://esm.sh/${importPath}`);
+							console.log(newImportPath);
+							return ts.factory.updateImportDeclaration(
+								node,
+								node.modifiers,
+								node.importClause,
+								newImportPath,
+								node.attributes
+							);
+						}
+					}
+					return node;
+				}
+				return ts.visitEachChild(node, visit, context);
+			}
+		}
+
+		const result = ts.transpileModule(code, {
+			...options,
+			transformers: { before: [this.transformer] }
+		}).outputText;
+		return result;
 	}
 }
diff --git a/playground/src/state/Project.ts b/playground/src/state/Project.ts
@@ -21,15 +21,12 @@ export class Project {
 	}
 	constructor(public info: ProjectInfo, public volume: Volume) {
 		this.fs = new MagicFS(volume);
-		console.log('Project', info);
 		volume.watch(async (details) => {
-			console.log('watcher', details);
 			for (let detail of details.operations) {
 				if (detail.type == 'volumeRemoved') document.location = document.location;
 				if (detail.type == 'versionChanged') this.info.version = detail.version!;
 				if (detail.type == 'unlink') this.closeFile(detail.id);
 			}
-			console.log(this.info.version);
 			this.onFilesChange.trigger();
 		});
 		this.buildManager = new BuildManager(this, App.builders);
@@ -76,7 +73,6 @@ export class Project {
 	}
 	private createEditor = (file: MagicFile) => {
 		const ret = isBinary(mtype(file.path)) ? new FileViewer(file) : new MonacoEditor(file);
-		console.log(file.path, mtype(file.path), isBinary(mtype(file.path)));
 		ret.changeTrigger.add(() => this.onChange.trigger());
 		return ret;
 	}