remove babel dep

Author: avivkeller

package-lock.json

@@ -40,8 +40,6 @@
   },
   "dependencies": {
     "@actions/core": "^1.11.1",
-    "@babel/generator": "^7.27.5",
-    "@babel/types": "^7.27.7",
     "@clack/prompts": "^0.11.0",
     "@heroicons/react": "^2.2.0",
     "@minify-html/node": "^0.16.4",
@@ -56,7 +54,7 @@
     "dedent": "^1.6.0",
     "esbuild": "^0.25.5",
     "esbuild-style-plugin": "^1.6.3",
-    "estree-to-babel": "^11.0.3",
+    "estree-util-to-js": "^2.0.0",
     "estree-util-value-to-estree": "^3.4.0",
     "estree-util-visit": "^2.0.0",
     "github-slugger": "^2.0.0",

package.json

@@ -1,42 +1,28 @@
-import { generate } from '@babel/generator';
-import * as t from '@babel/types';
-
 import { JSX_IMPORTS } from '../constants.mjs';
 
 /**
- * Creates an import declaration AST node
+ * Creates an import statement as a string
  * @param {string|null} importName - The import identifier name, or null for side-effect imports
  * @param {string} source - The module path to import from
  * @param {boolean} [useDefault=true] - Whether to use a default import or a named import
+ * @returns {string} The import statement
  */
 export const createImportDeclaration = (
   importName,
   source,
   useDefault = true
 ) => {
-  const specifiers = importName
-    ? [
-        useDefault
-          ? t.importDefaultSpecifier(t.identifier(importName))
-          : t.importSpecifier(
-              t.identifier(importName),
-              t.identifier(importName)
-            ),
-      ]
-    : [];
-
-  return t.importDeclaration(specifiers, t.stringLiteral(source));
+  if (!importName) {
+    return `import "${source}";`;
+  }
+  if (useDefault) {
+    return `import ${importName} from "${source}";`;
+  }
+  return `import { ${importName} } from "${source}";`;
 };
 
 /**
- * Generates code from an AST
- * @param {import('@babel/types').Node} ast - The AST node to generate code from
- * @returns {string} The generated code
- */
-const generateCode = ast => generate(ast).code;
-
-/**
- * Creates an AST builder with configuration for React SSR/hydration using Preact
+ * Creates a code builder with configuration for React SSR/hydration using Preact
  */
 export default () => {
   // Create base imports from JSX_IMPORTS configuration
@@ -48,66 +34,35 @@ export default () => {
 
   /**
    * Generates code that hydrates a server-rendered React component on the client
-   * @param {import('@babel/types').Expression} component - The React component AST node to hydrate
+   * @param {string} componentCode - The React component code as a string to hydrate
    * @returns {string} The generated client-side hydration code
    */
-  const buildClientProgram = component => {
-    const program = t.program([
+  const buildClientProgram = (componentCode) => {
+    return [
       ...baseImports,
-      createImportDeclaration(
-        null,
-        // Relative to ESBUILD_RESOLVE_DIR
-        './index.css'
-      ),
+      createImportDeclaration(null, './index.css'),
       createImportDeclaration('hydrate', 'preact', false),
-
-      // hydrate(component, document.getElementById("root"));
-      t.expressionStatement(
-        t.callExpression(t.identifier('hydrate'), [
-          component,
-          t.callExpression(
-            t.memberExpression(
-              t.identifier('document'),
-              t.identifier('getElementById')
-            ),
-            [t.stringLiteral('root')]
-          ),
-        ])
-      ),
-    ]);
-
-    return generateCode(program);
+      '',
+      `hydrate(${componentCode}, document.getElementById("root"));`,
+    ].join('\n');
   };
 
   /**
    * Generates code that renders a React component to string on the server
-   * @param {import('@babel/types').Expression} component - The React component AST node to render
+   * @param {string} componentCode - The React component code as a string to render
    * @returns {string} The generated server-side rendering code
    */
-  const buildServerProgram = component => {
-    const program = t.program([
+  const buildServerProgram = (componentCode) => {
+    return [
       ...baseImports,
-      createImportDeclaration(
-        'renderToStringAsync',
-        'preact-render-to-string',
-        false
-      ),
-
-      // code = renderToStringAsync(component);
-      t.expressionStatement(
-        t.assignmentExpression(
-          '=',
-          t.identifier('code'),
-          t.callExpression(t.identifier('renderToStringAsync'), [component])
-        )
-      ),
-    ]);
-
-    return generateCode(program);
+      createImportDeclaration('renderToStringAsync', 'preact-render-to-string', false),
+      '',
+      `const code = renderToStringAsync(${componentCode});`,
+    ].join('\n');
   };
 
   return {
     buildClientProgram,
     buildServerProgram,
   };
-};
+};

src/generators/web/build/__tests__/generate.test.mjs

@@ -3,7 +3,7 @@ import { createRequire } from 'node:module';
 import { join } from 'node:path';
 
 import HTMLMinifier from '@minify-html/node';
-import { estreeToBabel } from 'estree-to-babel';
+import { jsx, toJs } from 'estree-util-to-js'
 import Mustache from 'mustache';
 
 import bundleCode from './build/bundle.mjs';
@@ -43,15 +43,15 @@ export async function processEntry(
   require,
   output
 ) {
-  // Convert JSX AST to Babel AST
-  const { program } = estreeToBabel(entry);
+
+  const { value: code } = toJs(entry, { handlers: jsx });
 
   // Generate and execute server-side code for SSR
-  const serverCode = buildServerProgram(program);
+  const serverCode = buildServerProgram(code);
   const dehydrated = await executeServerCode(serverCode, require);
 
   // Generate and bundle client-side code
-  const clientCode = buildClientProgram(program);
+  const clientCode = buildClientProgram(code);
   const clientBundle = await bundleCode(clientCode);
 
   // Render the final HTML using the template
@@ -63,8 +63,7 @@ export async function processEntry(
         dehydrated,
         javascript: clientBundle.js,
       })
-    ),
-    {}
+    )
   );
 
   // Write HTML file if output directory is specified