Fix compilation (#52)

* Update biome.json

* Add `babel-preset-solid` for testing

* Fix `solid-refresh` to transform ahead of the preset

* Update index.ts

* Fix dependencies for `granular` mode

* Fix testing

Author: lxsmnsyc

biome.json

@@ -116,7 +116,7 @@
         "noArguments": "error",
         "noCommaOperator": "off",
         "noDefaultExport": "off",
-        "noImplicitBoolean": "error",
+        "noImplicitBoolean": "off",
         "noInferrableTypes": "error",
         "noNamespace": "error",
         "noNegationElse": "error",

package.json

@@ -29,14 +29,20 @@
   },
   "typesVersions": {
     "*": {
-      "babel": ["./dist/src/babel/index.d.ts"]
+      "babel": [
+        "./dist/src/babel/index.d.ts"
+      ]
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
-  "contributors": ["Alexis Munsayac"],
+  "contributors": [
+    "Alexis Munsayac"
+  ],
   "sideEffects": false,
   "scripts": {
     "build": "rollup -c",
@@ -54,6 +60,7 @@
     "@types/babel__helper-module-imports": "^7.18.3",
     "@types/babel__traverse": "^7.20.4",
     "@types/node": "^20.10.5",
+    "babel-preset-solid": "^1.8.9",
     "rollup": "^4.9.1",
     "solid-js": "^1.8.7",
     "tslib": "^2.6.2",

pnpm-lock.yaml

@@ -541,7 +541,7 @@ function wrapComponent(
         properties.push(
           t.objectProperty(
             t.identifier('dependencies'),
-            t.objectExpression(dependencyKeys),
+            t.arrowFunctionExpression([], t.objectExpression(dependencyKeys)),
           ),
         );
       }
@@ -587,8 +587,7 @@ function setupProgram(state: State, path: babel.NodePath<t.Program>): void {
   let shouldSkip = false;
   const comments = state.file.ast.comments;
   if (comments) {
-    for (let i = 0; i < comments.length; i++) {
-      const comment = comments[i].value;
+    for (const { value: comment } of comments) {
       if (/^\s*@refresh granular\s*$/.test(comment)) {
         state.granular = true;
         break;
@@ -712,59 +711,62 @@ export default function solidRefreshPlugin(): babel.PluginObj<State> {
       this.imports = [...IMPORT_IDENTITIES, ...(this.opts.imports || [])];
     },
     visitor: {
-      Program(path, state) {
-        setupProgram(state, path);
-      },
-      ExportNamedDeclaration(path, state) {
-        transformExportNamedDeclaration(state, path);
-      },
-      VariableDeclarator(path, state) {
-        transformVariableDeclarator(state, path);
-      },
-      FunctionDeclaration(path, state) {
-        if (state.processed) {
-          return;
-        }
-        if (
-          path.parentPath.isProgram() ||
-          path.parentPath.isExportDefaultDeclaration()
-        ) {
-          const decl = path.node;
-          // Check if declaration is FunctionDeclaration
-          if (
-            // Check if the declaration has an identifier, and then check
-            decl.id &&
-            // if the name is component-ish
-            isComponentishName(decl.id.name) &&
-            !(decl.generator || decl.async) &&
-            // Might be component-like, but the only valid components
-            // have zero or one parameter
-            decl.params.length < 2
-          ) {
-            const replacement = wrapComponent(
-              state,
-              path,
-              decl.id,
-              t.functionExpression(decl.id, decl.params, decl.body),
-              decl,
-            );
-            const newDecl = t.variableDeclaration('var', [
-              t.variableDeclarator(decl.id, replacement),
-            ]);
-            if (path.parentPath.isExportDefaultDeclaration()) {
-              const parent = path.parentPath
-                .parentPath as babel.NodePath<t.Program>;
-              const first = parent.get('body')[0];
-              first.insertBefore(newDecl);
-              path.replaceWith(decl.id);
-            } else {
-              const parent = path.parentPath as babel.NodePath<t.Program>;
-              const first = parent.get('body')[0];
-              first.insertBefore(newDecl);
-              path.remove();
+      Program(programPath, state) {
+        setupProgram(state, programPath);
+
+        programPath.traverse({
+          ExportNamedDeclaration(path) {
+            transformExportNamedDeclaration(state, path);
+          },
+          VariableDeclarator(path) {
+            transformVariableDeclarator(state, path);
+          },
+          FunctionDeclaration(path) {
+            if (state.processed) {
+              return;
             }
-          }
-        }
+            if (
+              path.parentPath.isProgram() ||
+              path.parentPath.isExportDefaultDeclaration()
+            ) {
+              const decl = path.node;
+              // Check if declaration is FunctionDeclaration
+              if (
+                // Check if the declaration has an identifier, and then check
+                decl.id &&
+                // if the name is component-ish
+                isComponentishName(decl.id.name) &&
+                !(decl.generator || decl.async) &&
+                // Might be component-like, but the only valid components
+                // have zero or one parameter
+                decl.params.length < 2
+              ) {
+                const replacement = wrapComponent(
+                  state,
+                  path,
+                  decl.id,
+                  t.functionExpression(decl.id, decl.params, decl.body),
+                  decl,
+                );
+                const newDecl = t.variableDeclaration('var', [
+                  t.variableDeclarator(decl.id, replacement),
+                ]);
+                if (path.parentPath.isExportDefaultDeclaration()) {
+                  const parent = path.parentPath
+                    .parentPath as babel.NodePath<t.Program>;
+                  const first = parent.get('body')[0];
+                  first.insertBefore(newDecl);
+                  path.replaceWith(decl.id);
+                } else {
+                  const parent = path.parentPath as babel.NodePath<t.Program>;
+                  const first = parent.get('body')[0];
+                  first.insertBefore(newDecl);
+                  path.remove();
+                }
+              }
+            }
+          },
+        });
       },
     },
   };

src/babel/index.ts

@@ -10,7 +10,7 @@ interface ComponentOptions {
   // generated from the component's JS string
   signature?: string;
   // An array of foreign bindings (values that aren't locally declared in the component)
-  dependencies?: Record<string, any>;
+  dependencies?: () => Record<string, any>;
 }
 
 // The registration data for the components
@@ -88,12 +88,14 @@ function patchComponent<P>(
   // Check if incoming module has signature
   if (newData.signature) {
     // Compare signatures
+    const oldDeps = oldData.dependencies?.();
+    const newDeps = newData.dependencies?.();
     if (
       newData.signature !== oldData.signature ||
-      isListUpdated(newData.dependencies, oldData.dependencies)
+      isListUpdated(newDeps, oldDeps)
     ) {
       // Replace signatures and dependencies
-      oldData.dependencies = newData.dependencies;
+      oldData.dependencies = newDeps ? () => newDeps : undefined;
       oldData.signature = newData.signature;
       // Remount
       oldData.update(() => newData.component);