solid-refresh 0.6.3 → 0.7.0

package/dist/babel.mjs

@@ -1,7 +1,7 @@
 import path from 'path';
 import * as t from '@babel/types';
+import { addNamed, addDefault } from '@babel/helper-module-imports';
 import _generator from '@babel/generator';
-import { addNamed } from '@babel/helper-module-imports';
 
 /**
  * Copyright (c) 2019 Jason Dent
@@ -190,79 +190,244 @@ function xxHash32(buffer, seed = 0) {
     return acc < 0 ? acc + 4294967296 : acc;
 }
 
-// https://github.com/babel/babel/issues/15269
-let generator;
-if (typeof _generator !== 'function') {
-    generator = _generator.default;
-}
-else {
-    generator = _generator;
-}
-const CWD = process.cwd();
-function getFile(filename) {
-    return path.relative(CWD, filename);
-}
 // This is just a Pascal heuristic
 // we only assume a function is a component
 // if the first character is in uppercase
 function isComponentishName(name) {
     return name[0] >= 'A' && name[0] <= 'Z';
 }
-function isESMHMR(bundler) {
-    // The currently known ESM HMR implementations
-    // esm - the original ESM HMR Spec
-    // vite - Vite's implementation
-    return bundler === 'esm' || bundler === 'vite';
+function getImportSpecifierName(specifier) {
+    if (t.isIdentifier(specifier.imported)) {
+        return specifier.imported.name;
+    }
+    return specifier.imported.value;
 }
-// Source of solid-refresh (for import)
-const SOLID_REFRESH_MODULE = 'solid-refresh';
-// Exported names from solid-refresh that will be imported
-const IMPORTS = {
-    registry: '$$registry',
-    refresh: '$$refresh',
-    component: '$$component',
-    context: '$$context',
-    decline: '$$decline',
-};
-function getSolidRefreshIdentifier(state, path, name) {
-    const target = `${name}`;
-    const current = state.hooks.get(target);
-    if (current) {
-        return current;
+
+function registerImportSpecifier(state, id, specifier) {
+    if (t.isImportDefaultSpecifier(specifier)) {
+        if (id.definition.kind === 'default') {
+            state.registrations.identifiers.set(specifier.local, id);
+        }
+        return;
+    }
+    if (t.isImportSpecifier(specifier)) {
+        if ((id.definition.kind === 'named' &&
+            getImportSpecifierName(specifier) === id.definition.name) ||
+            (id.definition.kind === 'default' &&
+                getImportSpecifierName(specifier) === 'default')) {
+            state.registrations.identifiers.set(specifier.local, id);
+        }
+        return;
+    }
+    let current = state.registrations.namespaces.get(specifier.local);
+    if (!current) {
+        current = [];
+    }
+    current.push(id);
+    state.registrations.namespaces.set(specifier.local, current);
+}
+function registerImportSpecifiers(state, path, definitions) {
+    for (let i = 0, len = definitions.length; i < len; i++) {
+        const id = definitions[i];
+        if (path.node.source.value === id.definition.source) {
+            for (let k = 0, klen = path.node.specifiers.length; k < klen; k++) {
+                registerImportSpecifier(state, id, path.node.specifiers[k]);
+            }
+        }
     }
-    const newID = addNamed(path, name, SOLID_REFRESH_MODULE);
-    state.hooks.set(target, newID);
-    return newID;
 }
+
 function getHotIdentifier(state) {
-    const bundler = state.opts.bundler;
-    // vite/esm uses `import.meta.hot`
-    if (isESMHMR(bundler)) {
-        return t.memberExpression(t.memberExpression(t.identifier('import'), t.identifier('meta')), t.identifier('hot'));
+    switch (state.bundler) {
+        // vite/esm uses `import.meta.hot`
+        case 'esm':
+        case 'vite':
+            return t.memberExpression(t.memberExpression(t.identifier('import'), t.identifier('meta')), t.identifier('hot'));
+        // webpack 5 uses `import.meta.webpackHot`
+        // rspack does as well
+        case 'webpack5':
+        case 'rspack-esm':
+            return t.memberExpression(t.memberExpression(t.identifier('import'), t.identifier('meta')), t.identifier('webpackHot'));
+        default:
+            // `module.hot` is the default.
+            return t.memberExpression(t.identifier('module'), t.identifier('hot'));
     }
-    // webpack 5 uses `import.meta.webpackHot`
-    // rspack does as well
-    if (bundler === 'webpack5' || bundler === 'rspack-esm') {
-        return t.memberExpression(t.memberExpression(t.identifier('import'), t.identifier('meta')), t.identifier('webpackHot'));
+}
+
+function getImportIdentifier(state, path, registration) {
+    const name = registration.kind === 'named' ? registration.name : 'default';
+    const target = `${registration.source}[${name}]`;
+    const current = state.imports.get(target);
+    if (current) {
+        return current;
     }
-    // `module.hot` is the default.
-    return t.memberExpression(t.identifier('module'), t.identifier('hot'));
+    const newID = registration.kind === 'named'
+        ? addNamed(path, registration.name, registration.source)
+        : addDefault(path, registration.source);
+    state.imports.set(target, newID);
+    return newID;
 }
-function generateViteRequirement(state, statements, pathToHot) {
-    if (state.opts.bundler === 'vite') {
+
+// Source of solid-refresh (for import)
+const SOLID_REFRESH_MODULE = 'solid-refresh';
+// Exported names from solid-refresh that will be imported
+const IMPORT_REGISTRY = {
+    kind: 'named',
+    name: '$$registry',
+    source: SOLID_REFRESH_MODULE,
+};
+const IMPORT_REFRESH = {
+    kind: 'named',
+    name: '$$refresh',
+    source: SOLID_REFRESH_MODULE,
+};
+const IMPORT_COMPONENT = {
+    kind: 'named',
+    name: '$$component',
+    source: SOLID_REFRESH_MODULE,
+};
+const IMPORT_CONTEXT = {
+    kind: 'named',
+    name: '$$context',
+    source: SOLID_REFRESH_MODULE,
+};
+const IMPORT_DECLINE = {
+    kind: 'named',
+    name: '$$decline',
+    source: SOLID_REFRESH_MODULE,
+};
+const IMPORT_SPECIFIERS = [
+    {
+        type: 'render',
+        definition: { name: 'render', kind: 'named', source: 'solid-js/web' },
+    },
+    {
+        type: 'render',
+        definition: { name: 'hydrate', kind: 'named', source: 'solid-js/web' },
+    },
+    {
+        type: 'createContext',
+        definition: {
+            name: 'createContext',
+            kind: 'named',
+            source: 'solid-js',
+        },
+    },
+    {
+        type: 'createContext',
+        definition: {
+            name: 'createContext',
+            kind: 'named',
+            source: 'solid-js/web',
+        },
+    },
+];
+
+function generateViteHMRRequirement(state, statements, pathToHot) {
+    if (state.bundler === 'vite') {
         // Vite requires that the owner module has an `import.meta.hot.accept()` call
         statements.push(t.expressionStatement(t.callExpression(t.memberExpression(pathToHot, t.identifier('accept')), [])));
     }
 }
+
 function getHMRDeclineCall(state, path) {
-    var _a;
     const pathToHot = getHotIdentifier(state);
     const statements = [
-        t.expressionStatement(t.callExpression(getSolidRefreshIdentifier(state, path, IMPORTS.decline), [t.stringLiteral((_a = state.opts.bundler) !== null && _a !== void 0 ? _a : 'standard'), pathToHot])),
+        t.expressionStatement(t.callExpression(getImportIdentifier(state, path, IMPORT_DECLINE), [
+            t.stringLiteral(state.bundler),
+            pathToHot,
+        ])),
     ];
-    generateViteRequirement(state, statements, pathToHot);
+    generateViteHMRRequirement(state, statements, pathToHot);
     return t.ifStatement(pathToHot, t.blockStatement(statements));
 }
+
+function isPathValid(path, key) {
+    return key(path.node);
+}
+function isNestedExpression(node) {
+    switch (node.type) {
+        case 'ParenthesizedExpression':
+        case 'TypeCastExpression':
+        case 'TSAsExpression':
+        case 'TSSatisfiesExpression':
+        case 'TSNonNullExpression':
+        case 'TSTypeAssertion':
+        case 'TSInstantiationExpression':
+            return true;
+        default:
+            return false;
+    }
+}
+function unwrapNode(node, key) {
+    if (key(node)) {
+        return node;
+    }
+    if (isNestedExpression(node)) {
+        return unwrapNode(node.expression, key);
+    }
+    return undefined;
+}
+
+function isIdentifierValidCallee(state, path, callee, target) {
+    const binding = path.scope.getBindingIdentifier(callee.name);
+    if (binding) {
+        const result = state.registrations.identifiers.get(binding);
+        if (result && result.type === target) {
+            return true;
+        }
+    }
+    return false;
+}
+function isPropertyValidCallee(result, target, propName) {
+    for (let i = 0, len = result.length; i < len; i++) {
+        const registration = result[i];
+        if (registration.type === target) {
+            if (registration.definition.kind === 'named') {
+                if (registration.definition.name === propName) {
+                    return true;
+                }
+            }
+            else if (propName === 'default') {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function isMemberExpressionValidCallee(state, path, member, target) {
+    if (!t.isIdentifier(member.property)) {
+        return false;
+    }
+    const trueObject = unwrapNode(member.object, t.isIdentifier);
+    if (!trueObject) {
+        return false;
+    }
+    const binding = path.scope.getBindingIdentifier(trueObject.name);
+    if (!binding) {
+        return false;
+    }
+    const result = state.registrations.namespaces.get(binding);
+    if (!result) {
+        return false;
+    }
+    return isPropertyValidCallee(result, target, member.property.name);
+}
+function isValidCallee(state, path, { callee }, target) {
+    if (t.isV8IntrinsicIdentifier(callee)) {
+        return false;
+    }
+    const trueCallee = unwrapNode(callee, t.isIdentifier);
+    if (trueCallee) {
+        return isIdentifierValidCallee(state, path, trueCallee, target);
+    }
+    const trueMember = unwrapNode(callee, t.isMemberExpression);
+    if (trueMember && !trueMember.computed) {
+        return isMemberExpressionValidCallee(state, path, trueMember, target);
+    }
+    return false;
+}
+
 function getStatementPath(path) {
     if (t.isStatement(path.node)) {
         return path;
@@ -272,40 +437,46 @@ function getStatementPath(path) {
     }
     return null;
 }
+
+function getRootStatementPath(path) {
+    let current = path.parentPath;
+    while (current) {
+        const next = current.parentPath;
+        if (next && t.isProgram(next.node)) {
+            return current;
+        }
+        current = next;
+    }
+    return path;
+}
+
 const REGISTRY = 'REGISTRY';
 function createRegistry(state, path) {
-    var _a;
-    const current = state.hooks.get(REGISTRY);
+    const current = state.imports.get(REGISTRY);
     if (current) {
         return current;
     }
-    const program = path.scope.getProgramParent();
-    const identifier = program.generateUidIdentifier(REGISTRY);
-    program.push({
-        id: identifier,
-        kind: 'const',
-        init: t.callExpression(getSolidRefreshIdentifier(state, path, IMPORTS.registry), []),
-    });
+    const root = getRootStatementPath(path);
+    const identifier = path.scope.generateUidIdentifier(REGISTRY);
+    root.insertBefore(t.variableDeclaration('const', [
+        t.variableDeclarator(identifier, t.callExpression(getImportIdentifier(state, path, IMPORT_REGISTRY), [])),
+    ]));
     const pathToHot = getHotIdentifier(state);
     const statements = [
-        t.expressionStatement(t.callExpression(getSolidRefreshIdentifier(state, path, IMPORTS.refresh), [
-            t.stringLiteral((_a = state.opts.bundler) !== null && _a !== void 0 ? _a : 'standard'),
+        t.expressionStatement(t.callExpression(getImportIdentifier(state, path, IMPORT_REFRESH), [
+            t.stringLiteral(state.bundler),
             pathToHot,
             identifier,
         ])),
     ];
-    generateViteRequirement(state, statements, pathToHot);
-    program.path.pushContainer('body', [
+    generateViteHMRRequirement(state, statements, pathToHot);
+    path.scope.getProgramParent().path.pushContainer('body', [
         t.ifStatement(pathToHot, t.blockStatement(statements)),
     ]);
-    state.hooks.set(REGISTRY, identifier);
+    state.imports.set(REGISTRY, identifier);
     return identifier;
 }
-function createSignatureValue(node) {
-    const code = generator(node);
-    const result = xxHash32(code.code).toString(16);
-    return result;
-}
+
 function isForeignBinding(source, current, name) {
     if (source === current) {
         return true;
@@ -328,13 +499,15 @@ function isInTypescript(path) {
     }
     return false;
 }
-function getBindings(path) {
+function getForeignBindings(path) {
     const identifiers = new Set();
     path.traverse({
         ReferencedIdentifier(p) {
             // Check identifiers that aren't in a TS expression
             if (!isInTypescript(p) && isForeignBinding(path, p, p.node.name)) {
-                identifiers.add(p.node.name);
+                if (p.isIdentifier() || p.parentPath.isJSXMemberExpression()) {
+                    identifiers.add(p.node.name);
+                }
             }
         },
     });
@@ -344,149 +517,266 @@ function getBindings(path) {
     }
     return collected;
 }
-const IMPORT_IDENTITIES = [
-    {
-        type: 'createContext',
-        name: 'createContext',
-        kind: 'named',
-        source: 'solid-js',
-    },
-    {
-        type: 'createContext',
-        name: 'createContext',
-        kind: 'named',
-        source: 'solid-js/web',
-    },
-    { type: 'render', name: 'render', kind: 'named', source: 'solid-js/web' },
-    { type: 'render', name: 'hydrate', kind: 'named', source: 'solid-js/web' },
-];
-function getImportSpecifierName(specifier) {
-    switch (specifier.imported.type) {
-        case 'Identifier':
-            return specifier.imported.name;
-        case 'StringLiteral':
-            return specifier.imported.value;
-    }
-}
-function registerImportSpecifier(state, id, specifier) {
-    switch (specifier.type) {
-        case 'ImportDefaultSpecifier': {
-            if (id.kind === 'default') {
-                state.registrations.identifiers.set(specifier.local, id);
+
+function getDescriptiveName(path, defaultName) {
+    let current = path;
+    while (current) {
+        switch (current.node.type) {
+            case 'FunctionDeclaration':
+            case 'FunctionExpression': {
+                if (current.node.id) {
+                    return current.node.id.name;
+                }
+                break;
             }
-            break;
-        }
-        case 'ImportSpecifier': {
-            if ((id.kind === 'named' &&
-                getImportSpecifierName(specifier) === id.name) ||
-                (id.kind === 'default' &&
-                    getImportSpecifierName(specifier) === 'default')) {
-                state.registrations.identifiers.set(specifier.local, id);
+            case 'VariableDeclarator': {
+                if (current.node.id.type === 'Identifier') {
+                    return current.node.id.name;
+                }
+                break;
             }
-            break;
-        }
-        case 'ImportNamespaceSpecifier': {
-            let current = state.registrations.namespaces.get(specifier.local);
-            if (!current) {
-                current = [];
+            case 'ClassPrivateMethod':
+            case 'ClassMethod':
+            case 'ObjectMethod': {
+                switch (current.node.key.type) {
+                    case 'Identifier':
+                        return current.node.key.name;
+                    case 'PrivateName':
+                        return current.node.key.id.name;
+                }
+                break;
             }
-            current.push(id);
-            state.registrations.namespaces.set(specifier.local, current);
-            break;
         }
+        current = current.parentPath;
     }
+    return defaultName;
+}
+
+function generateUniqueName(path, name) {
+    let uid;
+    let i = 1;
+    do {
+        uid = name + '_' + i;
+        i++;
+    } while (path.scope.hasLabel(uid) ||
+        path.scope.hasBinding(uid) ||
+        path.scope.hasGlobal(uid) ||
+        path.scope.hasReference(uid));
+    const program = path.scope.getProgramParent();
+    program.references[uid] = true;
+    program.uids[uid] = true;
+    return t.identifier(uid);
 }
-function registerImportSpecifiers(state, p) {
-    for (let i = 0, len = state.imports.length; i < len; i++) {
-        const id = state.imports[i];
-        if (p.node.source.value === id.source) {
-            for (let k = 0, klen = p.node.specifiers.length; k < klen; k++) {
-                registerImportSpecifier(state, id, p.node.specifiers[k]);
+
+const REFRESH_JSX_SKIP = /^\s*@refresh jsx-skip\s*$/;
+function shouldSkipJSX(node) {
+    // Node without leading comments shouldn't be skipped
+    if (node.leadingComments) {
+        for (let i = 0, len = node.leadingComments.length; i < len; i++) {
+            if (REFRESH_JSX_SKIP.test(node.leadingComments[i].value)) {
+                return true;
             }
         }
     }
+    return false;
 }
-function captureIdentifiers(state, path) {
-    path.traverse({
-        ImportDeclaration(p) {
-            if (p.node.importKind === 'value') {
-                registerImportSpecifiers(state, p);
+function skippableJSX(node) {
+    return t.addComment(node, 'leading', '@refresh jsx-skip');
+}
+function pushAttribute(state, replacement) {
+    const key = 'v' + state.attributes.length;
+    state.attributes.push(t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(replacement)));
+    return key;
+}
+function pushAttributeAndReplace(state, target, replacement) {
+    const key = pushAttribute(state, replacement);
+    target.replaceWith(t.memberExpression(state.props, t.identifier(key)));
+}
+function extractJSXExpressionFromNormalAttribute(state, attr) {
+    const value = attr.get('value');
+    if (isPathValid(value, t.isJSXElement) ||
+        isPathValid(value, t.isJSXFragment)) {
+        value.replaceWith(t.jsxExpressionContainer(value.node));
+    }
+    if (isPathValid(value, t.isJSXExpressionContainer)) {
+        extractJSXExpressionsFromJSXExpressionContainer(state, value);
+    }
+}
+function extractJSXExpressionFromRef(state, attr) {
+    const value = attr.get('value');
+    if (isPathValid(value, t.isJSXExpressionContainer)) {
+        const expr = value.get('expression');
+        if (isPathValid(expr, t.isExpression)) {
+            const unwrappedIdentifier = unwrapNode(expr.node, t.isIdentifier);
+            let replacement;
+            if (unwrappedIdentifier) {
+                const arg = expr.scope.generateUidIdentifier('arg');
+                replacement = t.arrowFunctionExpression([arg], t.blockStatement([
+                    t.ifStatement(t.binaryExpression('===', t.unaryExpression('typeof', unwrappedIdentifier), t.stringLiteral('function')), t.blockStatement([
+                        t.expressionStatement(t.callExpression(unwrappedIdentifier, [arg])),
+                    ]), t.blockStatement([
+                        t.expressionStatement(t.assignmentExpression('=', unwrappedIdentifier, arg)),
+                    ])),
+                ]));
             }
-        },
-    });
+            else {
+                replacement = expr.node;
+            }
+            pushAttributeAndReplace(state, expr, replacement);
+        }
+    }
 }
-function unwrapExpression(node, key) {
-    switch (node.type) {
-        case 'ParenthesizedExpression':
-        case 'TypeCastExpression':
-        case 'TSAsExpression':
-        case 'TSSatisfiesExpression':
-        case 'TSNonNullExpression':
-        case 'TSInstantiationExpression':
-        case 'TSTypeAssertion':
-            return unwrapExpression(node.expression, key);
-        default:
-            return key(node) ? node : undefined;
+function extractJSXExpressionFromUseDirective(state, id, attr) {
+    const value = attr.get('value');
+    if (isPathValid(value, t.isJSXExpressionContainer)) {
+        extractJSXExpressionsFromJSXExpressionContainer(state, value);
     }
+    const key = pushAttribute(state, t.identifier(id.name));
+    state.vars.push(t.variableDeclarator(t.identifier(id.name), t.memberExpression(state.props, t.identifier(key))));
 }
-function isIdentifierValidCallee(state, path, callee, target) {
-    const binding = path.scope.getBindingIdentifier(callee.name);
-    if (binding) {
-        const result = state.registrations.identifiers.get(binding);
-        if (result && result.type === target) {
-            return true;
+function extractJSXExpressionFromAttribute(state, attr) {
+    const key = attr.get('name');
+    if (isPathValid(key, t.isJSXIdentifier)) {
+        if (key.node.name === 'ref') {
+            extractJSXExpressionFromRef(state, attr);
+        }
+        else {
+            extractJSXExpressionFromNormalAttribute(state, attr);
+        }
+    }
+    else if (isPathValid(key, t.isJSXNamespacedName)) {
+        if (key.node.namespace.name === 'use') {
+            extractJSXExpressionFromUseDirective(state, key.node.name, attr);
+        }
+        else {
+            extractJSXExpressionFromNormalAttribute(state, attr);
         }
     }
-    return false;
 }
-function isPropertyValidCallee(result, target, propName) {
-    for (let i = 0, len = result.length; i < len; i++) {
-        const registration = result[i];
-        if (registration.type === target) {
-            if (registration.kind === 'default') {
-                if (propName === 'default') {
-                    return true;
-                }
-            }
-            else if (registration.kind === 'named' &&
-                registration.name === propName) {
-                return true;
-            }
+function extractJSXExpressionsFromAttributes(state, path) {
+    const openingElement = path.get('openingElement');
+    const attrs = openingElement.get('attributes');
+    for (let i = 0, len = attrs.length; i < len; i++) {
+        const attr = attrs[i];
+        if (isPathValid(attr, t.isJSXAttribute)) {
+            extractJSXExpressionFromAttribute(state, attr);
+        }
+        if (isPathValid(attr, t.isJSXSpreadAttribute)) {
+            const arg = attr.get('argument');
+            pushAttributeAndReplace(state, arg, arg.node);
         }
     }
-    return false;
 }
-function isMemberExpressionValidCallee(state, path, member, target) {
-    if (!t.isIdentifier(member.property)) {
-        return false;
+function convertJSXOpeningToExpression(node) {
+    if (t.isJSXIdentifier(node)) {
+        return t.identifier(node.name);
+    }
+    return t.memberExpression(convertJSXOpeningToExpression(node.object), convertJSXOpeningToExpression(node.property));
+}
+function extractJSXExpressionsFromJSXElement(state, path) {
+    const openingElement = path.get('openingElement');
+    const openingName = openingElement.get('name');
+    if ((isPathValid(openingName, t.isJSXIdentifier) &&
+        /^[A-Z_]/.test(openingName.node.name)) ||
+        isPathValid(openingName, t.isJSXMemberExpression)) {
+        const key = pushAttribute(state, convertJSXOpeningToExpression(openingName.node));
+        const replacement = t.jsxMemberExpression(t.jsxIdentifier(state.props.name), t.jsxIdentifier(key));
+        openingName.replaceWith(replacement);
+        const closingElement = path.get('closingElement');
+        if (isPathValid(closingElement, t.isJSXClosingElement)) {
+            closingElement.get('name').replaceWith(replacement);
+        }
     }
-    const trueObject = unwrapExpression(member.object, t.isIdentifier);
-    if (!trueObject) {
-        return false;
+    extractJSXExpressionsFromAttributes(state, path);
+}
+function extractJSXExpressionsFromJSXExpressionContainer(state, child) {
+    const expr = child.get('expression');
+    if (isPathValid(expr, t.isExpression)) {
+        pushAttributeAndReplace(state, expr, expr.node);
     }
-    const binding = path.scope.getBindingIdentifier(trueObject.name);
-    if (!binding) {
-        return false;
+}
+function extractJSXExpressionsFromJSXSpreadChild(state, child) {
+    const arg = child.get('expression');
+    pushAttributeAndReplace(state, arg, arg.node);
+}
+function extractJSXExpressions(state, path) {
+    if (isPathValid(path, t.isJSXElement)) {
+        extractJSXExpressionsFromJSXElement(state, path);
     }
-    const result = state.registrations.namespaces.get(binding);
-    if (!result) {
-        return false;
+    const children = path.get('children');
+    for (let i = 0, len = children.length; i < len; i++) {
+        const child = children[i];
+        if (isPathValid(child, t.isJSXElement) ||
+            isPathValid(child, t.isJSXFragment)) {
+            extractJSXExpressions(state, child);
+        }
+        else if (isPathValid(child, t.isJSXExpressionContainer)) {
+            extractJSXExpressionsFromJSXExpressionContainer(state, child);
+        }
+        else if (isPathValid(child, t.isJSXSpreadChild)) {
+            extractJSXExpressionsFromJSXSpreadChild(state, child);
+        }
     }
-    return isPropertyValidCallee(result, target, member.property.name);
 }
-function isValidCallee(state, path, { callee }, target) {
-    if (t.isV8IntrinsicIdentifier(callee)) {
-        return false;
+function transformJSX(path) {
+    if (shouldSkipJSX(path.node)) {
+        return;
     }
-    const trueCallee = unwrapExpression(callee, t.isIdentifier);
-    if (trueCallee) {
-        return isIdentifierValidCallee(state, path, trueCallee, target);
+    const state = {
+        props: path.scope.generateUidIdentifier('props'),
+        attributes: [],
+        vars: [],
+    };
+    extractJSXExpressions(state, path);
+    const descriptiveName = getDescriptiveName(path, 'template');
+    const id = generateUniqueName(path, isComponentishName(descriptiveName)
+        ? descriptiveName
+        : 'JSX_' + descriptiveName);
+    const rootPath = getRootStatementPath(path);
+    let template = skippableJSX(t.cloneNode(path.node));
+    if (state.vars.length) {
+        template = t.blockStatement([
+            t.variableDeclaration('const', state.vars),
+            t.returnStatement(template),
+        ]);
     }
-    const trueMember = unwrapExpression(callee, t.isMemberExpression);
-    if (trueMember && !trueMember.computed) {
-        return isMemberExpressionValidCallee(state, path, trueMember, target);
+    const templateComp = t.arrowFunctionExpression([state.props], template);
+    if (path.node.loc) {
+        templateComp.loc = path.node.loc;
     }
-    return false;
+    rootPath.insertBefore(t.variableDeclaration('const', [t.variableDeclarator(id, templateComp)]));
+    path.replaceWith(skippableJSX(t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier(id.name), [...state.attributes], true), t.jsxClosingElement(t.jsxIdentifier(id.name)), [], true)));
+}
+
+// https://github.com/babel/babel/issues/15269
+let generator;
+if (typeof _generator !== 'function') {
+    generator = _generator.default;
+}
+else {
+    generator = _generator;
+}
+function generateCode(node) {
+    return generator(node).code;
+}
+
+const CWD = process.cwd();
+function getFile(filename) {
+    return path.relative(CWD, filename);
+}
+function createSignatureValue(node) {
+    const code = generateCode(node);
+    const result = xxHash32(code).toString(16);
+    return result;
+}
+function captureIdentifiers(state, path) {
+    path.traverse({
+        ImportDeclaration(p) {
+            if (p.node.importKind === 'value') {
+                registerImportSpecifiers(state, p, state.specifiers);
+            }
+        },
+    });
 }
 function checkValidRenderCall(path) {
     let currentPath = path.parentPath;
@@ -504,7 +794,7 @@ function checkValidRenderCall(path) {
 function fixRenderCalls(state, path) {
     path.traverse({
         ExpressionStatement(p) {
-            const trueCallExpr = unwrapExpression(p.node.expression, t.isCallExpression);
+            const trueCallExpr = unwrapNode(p.node.expression, t.isCallExpression);
             if (trueCallExpr &&
                 checkValidRenderCall(p) &&
                 isValidCallee(state, p, trueCallExpr, 'render')) {
@@ -525,7 +815,7 @@ function wrapComponent(state, path, identifier, component, original = component)
     if (statementPath) {
         const registry = createRegistry(state, statementPath);
         const hotName = t.stringLiteral(identifier.name);
-        const componentCall = getSolidRefreshIdentifier(state, statementPath, IMPORTS.component);
+        const componentCall = getImportIdentifier(state, statementPath, IMPORT_COMPONENT);
         const properties = [];
         if (state.filename && original.loc) {
             const filePath = getFile(state.filename);
@@ -533,7 +823,7 @@ function wrapComponent(state, path, identifier, component, original = component)
         }
         if (state.granular) {
             properties.push(t.objectProperty(t.identifier('signature'), t.stringLiteral(createSignatureValue(component))));
-            const dependencies = getBindings(path);
+            const dependencies = getForeignBindings(path);
             if (dependencies.length) {
                 const dependencyKeys = [];
                 let id;
@@ -543,18 +833,12 @@ function wrapComponent(state, path, identifier, component, original = component)
                 }
                 properties.push(t.objectProperty(t.identifier('dependencies'), t.arrowFunctionExpression([], t.objectExpression(dependencyKeys))));
             }
-            return t.callExpression(componentCall, [
-                registry,
-                hotName,
-                component,
-                t.objectExpression(properties),
-            ]);
         }
         return t.callExpression(componentCall, [
             registry,
             hotName,
             component,
-            ...(properties.length ? [t.objectExpression(properties)] : []),
+            t.objectExpression(properties),
         ]);
     }
     return component;
@@ -564,21 +848,15 @@ function wrapContext(state, path, identifier, context) {
     if (statementPath) {
         const registry = createRegistry(state, statementPath);
         const hotName = t.stringLiteral(identifier.name);
-        const contextCall = getSolidRefreshIdentifier(state, statementPath, IMPORTS.context);
+        const contextCall = getImportIdentifier(state, statementPath, IMPORT_CONTEXT);
         return t.callExpression(contextCall, [registry, hotName, context]);
     }
     return context;
 }
-function setupProgram(state, path) {
-    var _a;
+function setupProgram(state, path, comments) {
     let shouldSkip = false;
-    const comments = state.file.ast.comments;
     if (comments) {
         for (const { value: comment } of comments) {
-            if (/^\s*@refresh granular\s*$/.test(comment)) {
-                state.granular = true;
-                break;
-            }
             if (/^\s*@refresh skip\s*$/.test(comment)) {
                 state.processed = true;
                 shouldSkip = true;
@@ -592,39 +870,20 @@ function setupProgram(state, path) {
         }
     }
     captureIdentifiers(state, path);
-    if (!shouldSkip && ((_a = state.opts.fixRender) !== null && _a !== void 0 ? _a : true)) {
+    if (!shouldSkip && state.fixRender) {
         fixRenderCalls(state, path);
     }
 }
-function transformExportNamedDeclaration(state, path) {
-    if (state.processed) {
-        return;
-    }
-    const decl = path.node.declaration;
-    // Check if declaration is FunctionDeclaration
-    if (t.isFunctionDeclaration(decl) &&
-        !(decl.generator || decl.async) &&
-        // Might be component-like, but the only valid components
-        // have zero or one parameter
-        decl.params.length < 2) {
-        // Check if the declaration has an identifier, and then check
-        // if the name is component-ish
-        if (decl.id && isComponentishName(decl.id.name)) {
-            path.node.declaration = t.variableDeclaration('const', [
-                t.variableDeclarator(decl.id, wrapComponent(state, path, decl.id, t.functionExpression(decl.id, decl.params, decl.body), decl)),
-            ]);
-        }
-    }
-}
 function isStatementTopLevel(path) {
+    let blockParent = path.scope.getBlockParent();
     const programParent = path.scope.getProgramParent();
-    const blockParent = path.scope.getBlockParent();
+    // a FunctionDeclaration binding refers to itself as the block parent
+    if (blockParent.path === path) {
+        blockParent = blockParent.parent;
+    }
     return programParent === blockParent;
 }
 function transformVariableDeclarator(state, path) {
-    if (state.processed) {
-        return;
-    }
     if (path.parentPath.isVariableDeclaration() &&
         !isStatementTopLevel(path.parentPath)) {
         return;
@@ -635,8 +894,8 @@ function transformVariableDeclarator(state, path) {
         return;
     }
     if (isComponentishName(identifier.name)) {
-        const trueFuncExpr = unwrapExpression(init, t.isFunctionExpression) ||
-            unwrapExpression(init, t.isArrowFunctionExpression);
+        const trueFuncExpr = unwrapNode(init, t.isFunctionExpression) ||
+            unwrapNode(init, t.isArrowFunctionExpression);
         // Check for valid FunctionExpression or ArrowFunctionExpression
         if (trueFuncExpr &&
             // Must not be async or generator
@@ -648,73 +907,111 @@ function transformVariableDeclarator(state, path) {
         }
     }
     // For `createContext` calls
-    const trueCallExpr = unwrapExpression(init, t.isCallExpression);
+    const trueCallExpr = unwrapNode(init, t.isCallExpression);
     if (trueCallExpr &&
         isValidCallee(state, path, trueCallExpr, 'createContext')) {
         path.node.init = wrapContext(state, path, identifier, trueCallExpr);
     }
+    path.skip();
+}
+function transformFunctionDeclaration(state, path) {
+    if (isStatementTopLevel(path)) {
+        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) {
+            path.replaceWith(t.variableDeclaration('const', [
+                t.variableDeclarator(decl.id, wrapComponent(state, path, decl.id, t.functionExpression(decl.id, decl.params, decl.body), decl)),
+            ]));
+            path.skip();
+        }
+    }
+}
+function bubbleFunctionDeclaration(program, path) {
+    if (isStatementTopLevel(path)) {
+        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 first = program.get('body')[0];
+            const [tmp] = first.insertBefore(decl);
+            tmp.skip();
+            if (path.parentPath.isExportNamedDeclaration()) {
+                path.parentPath.replaceWith(t.exportNamedDeclaration(undefined, [
+                    t.exportSpecifier(decl.id, decl.id),
+                ]));
+            }
+            else if (path.parentPath.isExportDefaultDeclaration()) {
+                path.replaceWith(decl.id);
+            }
+            else {
+                path.remove();
+            }
+        }
+    }
 }
 function solidRefreshPlugin() {
     return {
-        name: 'Solid Refresh',
-        pre() {
-            this.hooks = new Map();
-            this.processed = false;
-            this.granular = false;
-            this.registrations = {
-                identifiers: new Map(),
-                namespaces: new Map(),
-            };
-            this.imports = [...IMPORT_IDENTITIES, ...(this.opts.imports || [])];
-        },
+        name: 'solid-refresh',
         visitor: {
-            Program(programPath, state) {
-                setupProgram(state, programPath);
+            Program(programPath, context) {
+                var _a, _b;
+                const state = {
+                    granular: (_a = context.opts.granular) !== null && _a !== void 0 ? _a : true,
+                    opts: context.opts,
+                    specifiers: [...IMPORT_SPECIFIERS],
+                    imports: new Map(),
+                    registrations: {
+                        identifiers: new Map(),
+                        namespaces: new Map(),
+                    },
+                    processed: false,
+                    filename: context.filename,
+                    bundler: context.opts.bundler || 'standard',
+                    fixRender: (_b = context.opts.fixRender) !== null && _b !== void 0 ? _b : true,
+                };
+                setupProgram(state, programPath, context.file.ast.comments);
+                if (state.processed) {
+                    return;
+                }
                 programPath.traverse({
-                    ExportNamedDeclaration(path) {
-                        transformExportNamedDeclaration(state, path);
+                    FunctionDeclaration(path) {
+                        bubbleFunctionDeclaration(programPath, path);
                     },
+                });
+                programPath.scope.crawl();
+                programPath.traverse({
+                    JSXElement(path) {
+                        transformJSX(path);
+                    },
+                    JSXFragment(path) {
+                        transformJSX(path);
+                    },
+                });
+                programPath.scope.crawl();
+                programPath.traverse({
                     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;
-                                    const first = parent.get('body')[0];
-                                    first.insertBefore(newDecl);
-                                    path.replaceWith(decl.id);
-                                }
-                                else {
-                                    const parent = path.parentPath;
-                                    const first = parent.get('body')[0];
-                                    first.insertBefore(newDecl);
-                                    path.remove();
-                                }
-                            }
-                        }
+                        transformFunctionDeclaration(state, path);
                     },
                 });
+                programPath.scope.crawl();
             },
         },
     };