@vobs/compiler 1.2.2 → 1.3.1

package/dist/index.js

@@ -58,7 +58,8 @@ function compileWithSourceMap(code, options = {}) {
     sourceLocation: options.sourceLocation ?? true,
     stateAliases: collectStateAliases(sourceFile),
     localBindings: collectLocallyDeclaredNames(sourceFile),
-    diagnostics: []
+    diagnostics: [],
+    hmrModuleId: options.hmrModuleId ?? null
   };
   const cleanFilename = filename.split(/[?#]/u, 1)[0] || filename;
   const diagnostics = ts.transpileModule(code, {
@@ -84,14 +85,15 @@ function compileWithSourceMap(code, options = {}) {
   }
   for (const plugin of plugins) sourceFile = transformPluginNodes(sourceFile, plugin, context);
   const statements = sourceFile.statements.map(
-    (statement) => ts.isImportDeclaration(statement) ? rebuildImport(state, statement) : transformStatement(state, statement)
+    (statement) => ts.isImportDeclaration(statement) ? rebuildImport(state, statement) : transformStatement(state, statement, true)
   );
   const templateDeclarations = createTemplateDeclarations(state);
-  const resultFile = ts.factory.updateSourceFile(sourceFile, [
+  let resultFile = ts.factory.updateSourceFile(sourceFile, [
     ...createRuntimeImports(state),
     ...templateDeclarations,
     ...statements
   ]);
+  resultFile = transformResidualJsx(state, resultFile);
   const generated = ts.createPrinter().printFile(resultFile);
   return {
     code: generated,
@@ -373,7 +375,7 @@ function rebuildImport(state, node) {
   ), node);
 }
 __name(rebuildImport, "rebuildImport");
-function transformStatement(state, node) {
+function transformStatement(state, node, moduleScope = false) {
   if (ts.isFunctionDeclaration(node) && node.body) {
     return tagStatement(state, ts.factory.updateFunctionDeclaration(
       node,
@@ -386,7 +388,7 @@ function transformStatement(state, node) {
       transformBlock(state, node.body)
     ), node);
   }
-  if (ts.isVariableStatement(node)) return transformVariableStatement(state, node);
+  if (ts.isVariableStatement(node)) return transformVariableStatement(state, node, moduleScope);
   if (ts.isExportAssignment(node) && containsJsx(node.expression)) {
     return tagStatement(state, ts.factory.updateExportAssignment(node, node.modifiers, transformEmbeddedExpression(state, node.expression)), node);
   }
@@ -399,7 +401,7 @@ function transformStatement(state, node) {
   return node;
 }
 __name(transformStatement, "transformStatement");
-function transformVariableStatement(state, node) {
+function transformVariableStatement(state, node, moduleScope = false) {
   let changed = false;
   const declarations = node.declarationList.declarations.map((declaration) => {
     const initializer = declaration.initializer;
@@ -407,6 +409,8 @@ function transformVariableStatement(state, node) {
     let nextInitializer = inferStateDebugName(state, declaration, initializer) ?? initializer;
     if (containsJsx(nextInitializer)) {
       nextInitializer = transformEmbeddedExpression(state, nextInitializer);
+    } else if (moduleScope && state.hmrModuleId !== null) {
+      nextInitializer = wrapStateWithHmrRef(state, declaration, nextInitializer) ?? nextInitializer;
     }
     if (nextInitializer === initializer) return declaration;
     changed = true;
@@ -444,6 +448,29 @@ function inferStateDebugName(state, declaration, initializer) {
   ]);
 }
 __name(inferStateDebugName, "inferStateDebugName");
+function wrapStateWithHmrRef(state, declaration, initializer) {
+  let call = initializer;
+  while (ts.isParenthesizedExpression(call) || ts.isAsExpression(call) || ts.isTypeAssertionExpression(call) || ts.isSatisfiesExpression(call)) {
+    call = call.expression;
+  }
+  if (!ts.isCallExpression(call)) return void 0;
+  const callee = call.expression;
+  if (!ts.isIdentifier(callee) || !state.stateAliases.has(callee.text)) return void 0;
+  if (state.localBindings.has(callee.text)) return void 0;
+  if (!ts.isIdentifier(declaration.name)) return void 0;
+  return ts.factory.createCallExpression(helperRef(state, "hmrStateRef"), void 0, [
+    ts.factory.createStringLiteral(`${state.hmrModuleId}#${declaration.name.text}`),
+    ts.factory.createArrowFunction(
+      void 0,
+      void 0,
+      [],
+      void 0,
+      ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
+      initializer
+    )
+  ]);
+}
+__name(wrapStateWithHmrRef, "wrapStateWithHmrRef");
 function containsJsx(expression) {
   let found = false;
   const visit = /* @__PURE__ */ __name((node) => {
@@ -704,6 +731,27 @@ function transformEmbeddedExpression(state, expression) {
   }
 }
 __name(transformEmbeddedExpression, "transformEmbeddedExpression");
+function transformResidualJsx(state, sourceFile) {
+  if (!containsJsx(sourceFile)) return sourceFile;
+  const result = ts.transform(sourceFile, [(context) => (root) => {
+    const visit = /* @__PURE__ */ __name((node) => {
+      if (ts.isReturnStatement(node) && node.expression && containsJsx(node.expression)) {
+        return ts.factory.updateReturnStatement(node, transformEmbeddedExpression(state, node.expression));
+      }
+      if (isJsxExpression(node)) {
+        return transformJsxExpression(state, node);
+      }
+      return ts.visitEachChild(node, visit, context);
+    }, "visit");
+    return ts.visitNode(root, visit);
+  }]);
+  try {
+    return result.transformed[0];
+  } finally {
+    result.dispose();
+  }
+}
+__name(transformResidualJsx, "transformResidualJsx");
 function isStaticElement(tagName, attributes, children) {
   if (!ts.isIdentifier(tagName) || !/^[a-z]/.test(tagName.text)) return false;
   for (const attribute of attributes.properties) {
@@ -956,36 +1004,52 @@ function createSourceLocation(node) {
 }
 __name(createSourceLocation, "createSourceLocation");
 function transformDynamicExpression(state, expression) {
+  const converted = convertDynamicNodeExpression(state, expression);
+  return converted ? createGetter(converted) : null;
+}
+__name(transformDynamicExpression, "transformDynamicExpression");
+function convertDynamicNodeExpression(state, expression) {
   if (ts.isBinaryExpression(expression) && expression.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
     const right = unwrapExpression(expression.right);
-    if (!isJsxExpression(right)) return null;
-    return createGetter(ts.factory.createConditionalExpression(
-      expression.left,
-      ts.factory.createToken(ts.SyntaxKind.QuestionToken),
-      transformJsxExpression(state, right),
-      ts.factory.createToken(ts.SyntaxKind.ColonToken),
-      ts.factory.createNull()
-    ));
+    if (isJsxExpression(right)) {
+      return createNodeConditional(expression.left, transformJsxExpression(state, right), null);
+    }
+    const convertedRight = convertDynamicNodeExpression(state, right);
+    if (convertedRight) return createNodeConditional(expression.left, convertedRight, null);
+    return null;
   }
   if (ts.isConditionalExpression(expression)) {
     const whenTrue = transformDynamicBranch(state, expression.whenTrue);
     const whenFalse = transformDynamicBranch(state, expression.whenFalse);
     if (!whenTrue && !whenFalse) return null;
-    return createGetter(ts.factory.createConditionalExpression(
+    return ts.factory.createConditionalExpression(
       expression.condition,
       ts.factory.createToken(ts.SyntaxKind.QuestionToken),
       whenTrue ?? ts.factory.createNull(),
       ts.factory.createToken(ts.SyntaxKind.ColonToken),
       whenFalse ?? ts.factory.createNull()
-    ));
+    );
   }
   return null;
 }
-__name(transformDynamicExpression, "transformDynamicExpression");
+__name(convertDynamicNodeExpression, "convertDynamicNodeExpression");
+function createNodeConditional(condition, whenTrue, whenFalse) {
+  return ts.factory.createConditionalExpression(
+    condition,
+    ts.factory.createToken(ts.SyntaxKind.QuestionToken),
+    whenTrue,
+    ts.factory.createToken(ts.SyntaxKind.ColonToken),
+    whenFalse ?? ts.factory.createNull()
+  );
+}
+__name(createNodeConditional, "createNodeConditional");
 function transformDynamicBranch(state, expression) {
   const branch = unwrapExpression(expression);
   if (isJsxExpression(branch)) return transformJsxExpression(state, branch);
   if (branch.kind === ts.SyntaxKind.NullKeyword || branch.kind === ts.SyntaxKind.FalseKeyword) return branch;
+  if (ts.isConditionalExpression(branch) || ts.isBinaryExpression(branch) && branch.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
+    return convertDynamicNodeExpression(state, branch);
+  }
   return null;
 }
 __name(transformDynamicBranch, "transformDynamicBranch");