@casual-simulation/aux-runtime 3.2.17 → 3.2.18-alpha.8349491134

package/runtime/Transpiler.js

@@ -1,11 +1,11 @@
 import * as Acorn from 'acorn';
-import AcornJSX from 'acorn-jsx';
 import { generate, GENERATOR } from 'astring';
 import LRUCache from 'lru-cache';
-import { traverse } from 'estraverse';
+import { traverse, VisitorKeys } from 'estraverse';
 import { createAbsolutePositionFromRelativePosition, createRelativePositionFromTypeIndex, getItem, Doc, } from 'yjs';
 import { createAbsolutePositionFromStateVector, createRelativePositionFromStateVector, getClock, } from '@casual-simulation/aux-common/yjs/YjsHelpers';
 import { calculateIndexFromLocation, calculateLocationFromIndex, } from './TranspilerUtils';
+import { tsPlugin } from 'acorn-typescript';
 /**
  * The symbol that is used in script dependencies to represent any argument.
  */
@@ -17,6 +17,87 @@ const exJsGenerator = Object.assign({}, GENERATOR, {
         state.write(')');
     },
 });
+const TypeScriptVisistorKeys = {
+    TSTypeParameterDeclaration: [],
+    TSCallSignatureDeclaration: [],
+    TSConstructSignatureDeclaration: [],
+    TSInterfaceDeclaration: [],
+    TSModuleDeclaration: [],
+    TSEnumDeclaration: [],
+    TSTypeAliasDeclaration: [],
+    TSDeclareFunction: [],
+    TSExternalModuleReference: [],
+    TSQualifiedName: [],
+    TSEnumMember: [],
+    TSModuleBlock: [],
+    TSTypePredicate: [],
+    TSThisType: [],
+    TSTypeAnnotation: [],
+    TSLiteralType: [],
+    TSVoidKeyword: [],
+    TSNeverKeyword: [],
+    TSNumberKeyword: [],
+    TSAnyKeyword: [],
+    TSBooleanKeyword: [],
+    TSBigIntKeyword: [],
+    TSObjectKeyword: [],
+    TSStringKeyword: [],
+    TSSymbolKeyword: [],
+    TSUndefinedKeyword: [],
+    TSUnknownKeyword: [],
+    TSFunctionType: [],
+    TSConstructorType: [],
+    TSUnionType: [],
+    TSIntersectionType: [],
+    TSInferType: [],
+    TSImportType: [],
+    TSTypeQuery: [],
+    TSTypeParameter: [],
+    TSMappedType: [],
+    TSTypeLiteral: [],
+    TSTupleType: [],
+    TSNamedTupleMember: [],
+    TSRestType: [],
+    TSOptionalType: [],
+    TSTypeReference: [],
+    TSParenthesizedType: [],
+    TSArrayType: [],
+    TSIndexedAccessType: [],
+    TSConditionalType: [],
+    TSIndexSignature: [],
+    TSTypeParameterInstantiation: [],
+    TSExpressionWithTypeArguments: [],
+    TSInterfaceBody: [],
+    TSIntrinsicKeyword: [],
+    TSImportEqualsDeclaration: [],
+    TSNonNullExpression: [],
+    TSTypeOperator: [],
+    TSMethodSignature: [],
+    TSPropertySignature: [],
+    TSAsExpression: [],
+    ClassDeclaration: [
+        ...VisitorKeys.ClassDeclaration,
+        'implements',
+        'typeParameters',
+    ],
+    ClassExpression: [
+        ...VisitorKeys.ClassExpression,
+        'implements',
+        'typeParameters',
+    ],
+    VariableDeclarator: [...VisitorKeys.VariableDeclarator, 'typeAnnotation'],
+    FunctionDeclaration: [
+        ...VisitorKeys.FunctionDeclaration,
+        'returnType',
+        'typeParameters',
+    ],
+    FunctionExpression: [
+        ...VisitorKeys.FunctionExpression,
+        'returnType',
+        'typeParameters',
+    ],
+    Identifier: [...VisitorKeys.Identifier, 'typeAnnotation'],
+};
 /**
  * The list of macros that the sandbox uses on the input code before transpiling it.
  */
@@ -25,14 +106,6 @@ const MACROS = [
         test: /^(?:\🧬)/g,
         replacement: (val) => '',
     },
-    {
-        test: /(?:[“”])/g,
-        replacement: (val) => '"',
-    },
-    {
-        test: /(?:[‘’])/g,
-        replacement: (val) => "'",
-    },
 ];
 /**
  * Replaces macros in the given text.
@@ -61,14 +134,31 @@ export class Transpiler {
         this._forceSync = value;
     }
     constructor(options) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f;
         this._cache = new LRUCache({
             max: 1000,
         });
-        this._parser = Acorn.Parser.extend(AcornJSX());
+        this._parser = Acorn.Parser.extend(tsPlugin());
+        this._parser.prototype.parseReturnStatement = function (node) {
+            this.next();
+            // In `return` (and `break`/`continue`), the keywords with
+            // optional arguments, we eagerly look for a semicolon or the
+            // possibility to insert one.
+            if (this.eat(Acorn.tokTypes.semi) || this.insertSemicolon()) {
+                node.argument = null;
+            }
+            else {
+                node.argument = this.parseExpression();
+                this.semicolon();
+            }
+            return this.finishNode(node, 'ReturnStatement');
+        };
         this._jsxFactory = (_a = options === null || options === void 0 ? void 0 : options.jsxFactory) !== null && _a !== void 0 ? _a : 'h';
         this._jsxFragment = (_b = options === null || options === void 0 ? void 0 : options.jsxFragment) !== null && _b !== void 0 ? _b : 'Fragment';
-        this._forceSync = (_c = options === null || options === void 0 ? void 0 : options.forceSync) !== null && _c !== void 0 ? _c : false;
+        this._importFactory = (_c = options === null || options === void 0 ? void 0 : options.importFactory) !== null && _c !== void 0 ? _c : 'importModule';
+        this._importMetaFactory = (_d = options === null || options === void 0 ? void 0 : options.importMetaFactory) !== null && _d !== void 0 ? _d : 'importMeta';
+        this._exportFactory = (_e = options === null || options === void 0 ? void 0 : options.exportFactory) !== null && _e !== void 0 ? _e : 'exports';
+        this._forceSync = (_f = options === null || options === void 0 ? void 0 : options.forceSync) !== null && _f !== void 0 ? _f : false;
     }
     parse(code) {
         const macroed = replaceMacros(code);
@@ -108,15 +198,17 @@ export class Transpiler {
         doc.clientID = 0;
         const text = doc.getText();
         text.insert(0, code);
-        this._replace(node, doc, text);
+        let metadata = {
+            doc,
+            text,
+            isModule: false,
+        };
+        this._replace(node, doc, text, metadata);
         const finalCode = text.toString();
         const result = {
             code: finalCode,
             original: macroed,
-            metadata: {
-                doc,
-                text,
-            },
+            metadata,
         };
         this._cache.set(code, result);
         return result;
@@ -127,8 +219,9 @@ export class Transpiler {
      */
     _parse(code) {
         const node = this._parser.parse(code, {
-            ecmaVersion: 11,
+            ecmaVersion: 14,
             locations: true,
+            sourceType: 'module',
         });
         return node;
     }
@@ -166,13 +259,34 @@ export class Transpiler {
             generator: exJsGenerator,
         });
     }
-    _replace(node, doc, text) {
+    _replace(node, doc, text, metadata) {
         if (!node) {
             return;
         }
         traverse(node, {
             enter: ((n, parent) => {
-                if (n.type === 'WhileStatement') {
+                var _a;
+                if (n.type === 'ImportDeclaration') {
+                    this._replaceImportDeclaration(n, parent, doc, text, metadata);
+                }
+                else if (n.type === 'ImportExpression') {
+                    this._replaceImportExpression(n, parent, doc, text, metadata);
+                }
+                else if (n.type === 'ExportNamedDeclaration') {
+                    this._replaceExportNamedDeclaration(n, parent, doc, text, metadata);
+                }
+                else if (n.type === 'ExportDefaultDeclaration') {
+                    this._replaceExportDefaultDeclaration(n, parent, doc, text, metadata);
+                }
+                else if (n.type === 'ExportAllDeclaration') {
+                    this._replaceExportAllDeclaration(n, parent, doc, text, metadata);
+                }
+                else if (n.type === 'MetaProperty' &&
+                    n.meta.name === 'import' &&
+                    n.property.name === 'meta') {
+                    this._replaceImportMeta(n, parent, doc, text, metadata);
+                }
+                else if (n.type === 'WhileStatement') {
                     this._replaceWhileStatement(n, doc, text);
                 }
                 else if (n.type === 'DoWhileStatement') {
@@ -188,7 +302,7 @@ export class Transpiler {
                     this._replaceForOfStatement(n, doc, text);
                 }
                 else if (n.type === 'JSXElement') {
-                    this._replaceJSXElement(n, doc, text);
+                    this._replaceJSXElement(n, doc, text, metadata);
                 }
                 else if (n.type === 'JSXText') {
                     this._replaceJSXText(n, doc, text);
@@ -197,7 +311,7 @@ export class Transpiler {
                     this._replaceJSXExpressionContainer(n, doc, text);
                 }
                 else if (n.type === 'JSXFragment') {
-                    this._replaceJSXFragment(n, doc, text);
+                    this._replaceJSXFragment(n, doc, text, metadata);
                 }
                 else if (n.type === 'JSXEmptyExpression') {
                     this._replaceJSXEmptyExpression(n, doc, text);
@@ -225,18 +339,264 @@ export class Transpiler {
                 else if (this._forceSync && n.type === 'AwaitExpression') {
                     this._replaceAwaitExpression(n, doc, text);
                 }
+                else if (n.type === 'ClassDeclaration' ||
+                    n.type === 'ClassExpression') {
+                    if (((_a = n.implements) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                        this._removeClassImplements(n, doc, text);
+                    }
+                    if (n.abstract === true) {
+                        this._removeClassAbstract(n, doc, text);
+                    }
+                }
+                else if (n.type === 'TSAsExpression') {
+                    this._removeAsExpression(n, doc, text);
+                }
+                else if (n.type === 'Identifier' && n.optional === true) {
+                    this._removeOptionalFromIdentifier(n, doc, text);
+                }
+                else if (n.type.startsWith('TS')) {
+                    this._removeNodeOrReplaceWithUndefined(n, doc, text);
+                }
             }),
-            keys: {
-                JSXElement: [],
-                JSXFragment: [],
-                JSXOpeningElement: [],
-                JSXClosingElement: [],
-                JSXText: [],
-                JSXExpressionContainer: ['expression'],
-                JSXEmptyExpression: [],
-            },
+            keys: Object.assign({ JSXElement: [], JSXFragment: [], JSXOpeningElement: [], JSXClosingElement: [], JSXText: [], JSXExpressionContainer: ['expression'], JSXEmptyExpression: [] }, TypeScriptVisistorKeys),
         });
     }
+    _replaceImportDeclaration(node, parent, doc, text, metadata) {
+        metadata.isModule = true;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const statementEnd = createRelativePositionFromStateVector(text, version, node.source.end, 1, true);
+        const sourceStart = createRelativePositionFromStateVector(text, version, node.source.start, -1, true);
+        const sourceEnd = createRelativePositionFromStateVector(text, version, node.source.end, 1, true);
+        let currentIndex = absoluteStart.index;
+        let importCall = node.specifiers.length > 0 ? `const ` : '';
+        const namespaceImport = node.specifiers.find((s) => s.type === 'ImportNamespaceSpecifier');
+        const defaultImport = node.specifiers.find((s) => s.type === 'ImportDefaultSpecifier');
+        if (namespaceImport) {
+            importCall += `${namespaceImport.local.name} = `;
+        }
+        else {
+            let addedBraces = false;
+            for (let specifier of node.specifiers) {
+                if (specifier.type === 'ImportSpecifier') {
+                    if (!addedBraces) {
+                        addedBraces = true;
+                        importCall += `{ `;
+                    }
+                    if (specifier.local === specifier.imported) {
+                        importCall += `${specifier.local.name}, `;
+                    }
+                    else {
+                        importCall += `${specifier.imported.name}: ${specifier.local.name}, `;
+                    }
+                }
+                else if (specifier.type === 'ImportDefaultSpecifier') {
+                    if (!addedBraces) {
+                        addedBraces = true;
+                        importCall += `{ `;
+                    }
+                    importCall += `default: ${specifier.local.name}, `;
+                }
+            }
+            if (addedBraces) {
+                importCall += `}`;
+            }
+            if (node.specifiers.length > 0) {
+                importCall += ` = `;
+            }
+        }
+        if (node.importKind === 'type') {
+            importCall += `{}`;
+        }
+        else {
+            importCall += `await ${this._importFactory}(`;
+        }
+        text.insert(currentIndex, importCall);
+        currentIndex += importCall.length;
+        if (node.importKind !== 'type') {
+            const absoluteSourceEnd = createAbsolutePositionFromRelativePosition(sourceEnd, doc);
+            text.insert(absoluteSourceEnd.index, `, ${this._importMetaFactory})`);
+            if (namespaceImport && defaultImport) {
+                const absoluteEnd = createAbsolutePositionFromRelativePosition(statementEnd, doc);
+                let defaultImportSource = `\nconst { default: ${defaultImport.local.name} } = ${namespaceImport.local.name};`;
+                text.insert(absoluteEnd.index + 1, defaultImportSource);
+            }
+            const absoluteSourceStart = createAbsolutePositionFromRelativePosition(sourceStart, doc);
+            text.delete(currentIndex, absoluteSourceStart.index - currentIndex);
+        }
+        else {
+            const absoluteSourceEnd = createAbsolutePositionFromRelativePosition(sourceEnd, doc);
+            text.delete(currentIndex, absoluteSourceEnd.index - currentIndex);
+        }
+    }
+    _replaceImportExpression(node, parent, doc, text, metadata) {
+        metadata.isModule = true;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const sourceStart = createRelativePositionFromStateVector(text, version, node.source.start, -1, true);
+        const sourceEnd = createRelativePositionFromStateVector(text, version, node.source.end, 1, true);
+        let currentIndex = absoluteStart.index;
+        let importCall = `${this._importFactory}(`;
+        text.insert(currentIndex, importCall);
+        currentIndex += importCall.length;
+        const absoluteSourceEnd = createAbsolutePositionFromRelativePosition(sourceEnd, doc);
+        text.insert(absoluteSourceEnd.index, `, ${this._importMetaFactory}`);
+        const absoluteSourceStart = createAbsolutePositionFromRelativePosition(sourceStart, doc);
+        text.delete(currentIndex, absoluteSourceStart.index - currentIndex);
+    }
+    _replaceImportMeta(node, parent, doc, text, metadata) {
+        metadata.isModule = true;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const absoluteEnd = createAbsolutePositionFromStateVector(doc, text, version, node.end, 1, true);
+        text.insert(absoluteEnd.index, `${this._importMetaFactory}`);
+        text.delete(absoluteStart.index, absoluteEnd.index - absoluteStart.index);
+    }
+    _replaceExportNamedDeclaration(node, parent, doc, text, metadata) {
+        if (node.declaration) {
+            this._replaceExportVariableDeclaration(node, parent, doc, text, metadata);
+        }
+        else if (node.source) {
+            this._replaceExportFromSourceDeclaration(node, parent, doc, text, metadata);
+        }
+        else {
+            this._replaceExportSpecifiersDeclaration(node, parent, doc, text, metadata);
+        }
+    }
+    _replaceExportVariableDeclaration(node, parent, doc, text, metadata) {
+        metadata.isModule = true;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const declarationStart = createAbsolutePositionFromStateVector(doc, text, version, node.declaration.start, undefined, true);
+        const declarationEnd = createRelativePositionFromStateVector(text, version, node.declaration.end, -1, true);
+        text.delete(absoluteStart.index, declarationStart.index - absoluteStart.index);
+        const absoluteDeclarationEnd = createAbsolutePositionFromRelativePosition(declarationEnd, doc);
+        let exportCall = `\nawait ${this._exportFactory}({ `;
+        if (node.declaration.type === 'VariableDeclaration') {
+            for (let declaration of node.declaration.declarations) {
+                exportCall += `${declaration.id.name}, `;
+            }
+        }
+        else {
+            exportCall += `${node.declaration.id.name}, `;
+        }
+        exportCall += `});`;
+        text.insert(absoluteDeclarationEnd.index + 1, exportCall);
+    }
+    _replaceExportSpecifiersDeclaration(node, parent, doc, text, metadata) {
+        metadata.isModule = true;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const relativeEnd = createRelativePositionFromStateVector(text, version, node.end, -1, true);
+        if (node.specifiers.length > 0) {
+            let exportCall = `await ${this._exportFactory}({ `;
+            for (let specifier of node.specifiers) {
+                if (specifier.local === specifier.exported) {
+                    exportCall += `${specifier.local.name}, `;
+                }
+                else {
+                    exportCall += `${specifier.exported.name}: ${specifier.local.name}, `;
+                }
+            }
+            exportCall += `});`;
+            let currentIndex = absoluteStart.index;
+            text.insert(currentIndex, exportCall);
+            currentIndex += exportCall.length;
+            const absoluteEnd = createAbsolutePositionFromRelativePosition(relativeEnd, doc);
+            text.delete(currentIndex, absoluteEnd.index);
+        }
+        else {
+            let exportCall = `await ${this._exportFactory}({});`;
+            let currentIndex = absoluteStart.index;
+            text.insert(currentIndex, exportCall);
+            currentIndex += exportCall.length;
+            const absoluteEnd = createAbsolutePositionFromRelativePosition(relativeEnd, doc);
+            text.delete(currentIndex, absoluteEnd.index);
+        }
+    }
+    _replaceExportFromSourceDeclaration(node, parent, doc, text, metadata) {
+        metadata.isModule = true;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const relativeSourceStart = createRelativePositionFromStateVector(text, version, node.source.start, -1, true);
+        const relativeSourceEnd = createRelativePositionFromStateVector(text, version, node.source.end, -1, true);
+        const relativeEnd = createRelativePositionFromStateVector(text, version, node.end, -1, true);
+        if (node.specifiers.length > 0) {
+            let exportCall = `await ${this._exportFactory}(`;
+            let specifiers = ', [';
+            for (let specifier of node.specifiers) {
+                if (specifier.local === specifier.exported) {
+                    specifiers += `'${specifier.local.name}', `;
+                }
+                else {
+                    specifiers += `['${specifier.local.name}', '${specifier.exported.name}'], `;
+                }
+            }
+            specifiers += ']);';
+            let currentIndex = absoluteStart.index;
+            text.insert(currentIndex, exportCall);
+            currentIndex += exportCall.length;
+            const sourceEnd = createAbsolutePositionFromRelativePosition(relativeSourceEnd, doc);
+            text.insert(sourceEnd.index, specifiers);
+            const sourceStart = createAbsolutePositionFromRelativePosition(relativeSourceStart, doc);
+            text.delete(currentIndex, sourceStart.index - currentIndex);
+            const absoluteEnd = createAbsolutePositionFromRelativePosition(relativeEnd, doc);
+            const finalSourceEnd = createAbsolutePositionFromRelativePosition(relativeSourceEnd, doc);
+            text.delete(absoluteEnd.index - 1, absoluteEnd.index - finalSourceEnd.index);
+        }
+        else {
+            let exportCall = `await ${this._exportFactory}({});`;
+            let currentIndex = absoluteStart.index;
+            text.insert(currentIndex, exportCall);
+            currentIndex += exportCall.length;
+            const absoluteEnd = createAbsolutePositionFromRelativePosition(relativeEnd, doc);
+            text.delete(currentIndex, absoluteEnd.index);
+        }
+    }
+    _replaceExportDefaultDeclaration(node, parent, doc, text, metadata) {
+        metadata.isModule = true;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const declarationStart = createRelativePositionFromStateVector(text, version, node.declaration.start, -1, true);
+        const declarationEnd = createRelativePositionFromStateVector(text, version, node.declaration.end, -1, true);
+        const relativeEnd = createRelativePositionFromStateVector(text, version, node.end, -1, true);
+        let exportCall = `await ${this._exportFactory}({ default: `;
+        let currentIndex = absoluteStart.index;
+        text.insert(currentIndex, exportCall);
+        currentIndex += exportCall.length;
+        const absoluteDeclarationStart = createAbsolutePositionFromRelativePosition(declarationStart, doc);
+        text.delete(currentIndex, absoluteDeclarationStart.index - currentIndex);
+        const absoluteDeclarationEnd = createAbsolutePositionFromRelativePosition(declarationEnd, doc);
+        text.insert(absoluteDeclarationEnd.index, ' });');
+        const absoulteEnd = createAbsolutePositionFromRelativePosition(relativeEnd, doc);
+        text.delete(absoulteEnd.index - 1, 1);
+    }
+    _replaceExportAllDeclaration(node, parent, doc, text, metadata) {
+        metadata.isModule = true;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const sourceStart = createRelativePositionFromStateVector(text, version, node.source.start, -1, true);
+        const sourceEnd = createRelativePositionFromStateVector(text, version, node.source.end, -1, true);
+        const relativeEnd = createRelativePositionFromStateVector(text, version, node.end, -1, true);
+        let exportCall = `await ${this._exportFactory}(`;
+        let currentIndex = absoluteStart.index;
+        text.insert(currentIndex, exportCall);
+        currentIndex += exportCall.length;
+        const absolutesourceStart = createAbsolutePositionFromRelativePosition(sourceStart, doc);
+        text.delete(currentIndex, absolutesourceStart.index - currentIndex);
+        const absoluteSourceEnd = createAbsolutePositionFromRelativePosition(sourceEnd, doc);
+        text.insert(absoluteSourceEnd.index, ');');
+        const absoulteEnd = createAbsolutePositionFromRelativePosition(relativeEnd, doc);
+        text.delete(absoulteEnd.index - 1, 1);
+    }
     _replaceWhileStatement(node, doc, text) {
         this._insertEnergyCheckIntoStatement(doc, text, node.body);
     }
@@ -252,12 +612,71 @@ export class Transpiler {
     _replaceForOfStatement(node, doc, text) {
         this._insertEnergyCheckIntoStatement(doc, text, node.body);
     }
-    _replaceJSXElement(node, doc, text) {
-        this._insertJSXFactoryCall(node, node.openingElement, node.closingElement, doc, text);
+    _removeClassImplements(node, doc, text) {
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const firstImplemented = node.implements[0];
+        const lastImplemented = node.implements[node.implements.length - 1];
+        const implementedStart = createAbsolutePositionFromStateVector(doc, text, version, firstImplemented.start - 'implements '.length, undefined, true);
+        const implementedEnd = createAbsolutePositionFromStateVector(doc, text, version, lastImplemented.end, -1, true);
+        text.delete(implementedStart.index, implementedEnd.index - implementedStart.index);
+    }
+    _removeClassAbstract(node, doc, text) {
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const abstractStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const abstractEnd = createAbsolutePositionFromStateVector(doc, text, version, node.start + 'abstract '.length, -1, true);
+        text.delete(abstractStart.index, abstractEnd.index - abstractStart.index);
+    }
+    _removeAsExpression(node, doc, text) {
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const expressionEnd = createAbsolutePositionFromStateVector(doc, text, version, node.expression.end, -1, true);
+        const absoluteEnd = createAbsolutePositionFromStateVector(doc, text, version, node.end, -1, true);
+        text.delete(expressionEnd.index, absoluteEnd.index - expressionEnd.index);
+    }
+    _removeNodeOrReplaceWithUndefined(node, doc, text) {
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        if (node.type === 'TSInterfaceDeclaration' ||
+            node.type === 'TSCallSignatureDeclaration' ||
+            node.type === 'TSEnumDeclaration' ||
+            node.type === 'TSTypeAliasDeclaration') {
+            // replace with const Identifier = void 0; instead of deleting
+            // This is because these declarations might be referenced in a later export {} declaration,
+            // so we need to keep the identifier around.
+            // In the future, we might optimize this to also delete TypeScript-sepecific declarations from those exports.
+            const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+            const identifierStart = createRelativePositionFromStateVector(text, version, node.id.start, undefined, true);
+            const identifierEnd = createRelativePositionFromStateVector(text, version, node.id.end, -1, true);
+            const end = createRelativePositionFromStateVector(text, version, node.end, -1, true);
+            const absoluteIdentifierStart = createAbsolutePositionFromRelativePosition(identifierStart, doc);
+            text.insert(absoluteIdentifierStart.index, 'const ');
+            text.delete(absoluteStart.index, absoluteIdentifierStart.index - absoluteStart.index);
+            const absoluteIdentifierEnd = createAbsolutePositionFromRelativePosition(identifierEnd, doc);
+            let str = ` = void 0;`;
+            text.insert(absoluteIdentifierEnd.index, str);
+            const absoluteEnd = createAbsolutePositionFromRelativePosition(end, doc);
+            text.delete(absoluteIdentifierEnd.index + str.length, absoluteEnd.index - absoluteIdentifierEnd.index - str.length);
+            return;
+        }
+        const absoluteStart = createAbsolutePositionFromStateVector(doc, text, version, node.start, undefined, true);
+        const absoluteEnd = createAbsolutePositionFromStateVector(doc, text, version, node.end, -1, true);
+        text.delete(absoluteStart.index, absoluteEnd.index - absoluteStart.index);
+    }
+    _removeOptionalFromIdentifier(node, doc, text) {
+        var _a, _b;
+        doc.clientID += 1;
+        const version = { '0': getClock(doc, 0) };
+        const absoluteEnd = createAbsolutePositionFromStateVector(doc, text, version, (_b = (_a = node.typeAnnotation) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : node.end, -1, true);
+        text.delete(absoluteEnd.index - 1, 1);
+    }
+    _replaceJSXElement(node, doc, text, metadata) {
+        this._insertJSXFactoryCall(node, node.openingElement, node.closingElement, doc, text, metadata);
         this._removeTag(node, node.openingElement, node.closingElement, doc, text);
     }
-    _replaceJSXFragment(node, doc, text) {
-        this._insertJSXFactoryCall(node, node.openingFragment, node.closingFragment, doc, text);
+    _replaceJSXFragment(node, doc, text, metadata) {
+        this._insertJSXFactoryCall(node, node.openingFragment, node.closingFragment, doc, text, metadata);
         this._removeTag(node, node.openingFragment, node.closingFragment, doc, text);
     }
     _replaceJSXEmptyExpression(node, doc, text) {
@@ -273,7 +692,7 @@ export class Transpiler {
         text.delete(absoluteValueStartBegin.index, length);
         text.insert(absoluteValueEndEnd.index, "''");
     }
-    _insertJSXFactoryCall(node, openElement, closeElement, doc, text) {
+    _insertJSXFactoryCall(node, openElement, closeElement, doc, text, metadata) {
         doc.clientID += 1;
         const version = { '0': getClock(doc, 0) };
         const openingFunctionCall = `${this._jsxFactory}(`;
@@ -319,18 +738,18 @@ export class Transpiler {
             currentIndex += nodeName.length;
         }
         if (openElement.attributes.length > 0) {
-            this._replaceJSXElementAttributes(node, openElement, openElement.attributes, doc, text);
+            this._replaceJSXElementAttributes(node, openElement, openElement.attributes, doc, text, metadata);
         }
         else {
             const props = `null,`;
             text.insert(currentIndex, props);
         }
-        this._replaceJSXElementChildren(node, node.children, doc, text);
+        this._replaceJSXElementChildren(node, node.children, doc, text, metadata);
         const absoluteEnd = createAbsolutePositionFromRelativePosition(end, doc);
         doc.clientID += 1;
         text.insert(absoluteEnd.index, ')');
     }
-    _replaceJSXElementAttributes(node, openElement, attributes, doc, text) {
+    _replaceJSXElementAttributes(node, openElement, attributes, doc, text, metadata) {
         var _a, _b;
         // doc.clientID += 1;
         const version = { '0': getClock(doc, 0) };
@@ -363,10 +782,10 @@ export class Transpiler {
             text.insert(pos.index, val);
             index++;
             if (attr.type === 'JSXSpreadAttribute') {
-                this._replace(attr.argument, doc, text);
+                this._replace(attr.argument, doc, text, metadata);
             }
             else {
-                this._replace(attr.value, doc, text);
+                this._replace(attr.value, doc, text, metadata);
             }
         }
         const startAbsolute = createAbsolutePositionFromRelativePosition(start, doc);
@@ -374,11 +793,11 @@ export class Transpiler {
         const endAbsolute = createAbsolutePositionFromRelativePosition(end, doc);
         text.insert(endAbsolute.index, '},');
     }
-    _replaceJSXElementChildren(node, children, doc, text) {
+    _replaceJSXElementChildren(node, children, doc, text, metadata) {
         const version = { '0': getClock(doc, 0) };
         for (let child of children) {
             const pos = createRelativePositionFromStateVector(text, version, child.end, undefined, true);
-            this._replace(child, doc, text);
+            this._replace(child, doc, text, metadata);
             doc.clientID += 1;
             const absoluteEnd = createAbsolutePositionFromRelativePosition(pos, doc);
             text.insert(absoluteEnd.index, ',');