'use strict';

var SyntaxJSX = require('@babel/plugin-syntax-jsx');
var t = require('@babel/types');
var helperModuleImports = require('@babel/helper-module-imports');
var htmlEntities = require('html-entities');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);

// list of lowercase booleans
const booleans = [
"allowfullscreen",
"async",
"alpha", // HTMLInputElement
"autofocus", // HTMLElement prop
"autoplay",
"checked",
"controls",
"default",
"disabled",
"formnovalidate",
"hidden", // HTMLElement prop - not a boolean
"indeterminate",
"inert", // HTMLElement prop
"ismap",
"loop",
"multiple",
"muted",
"nomodule",
"novalidate",
"open",
"playsinline",
"readonly",
"required",
"reversed",
"seamless", // HTMLIframeElement - non-standard
"selected",

"adauctionheaders", // experimental
"browsingtopics", // experimental
"credentialless", // experimental
"defaultchecked",
"defaultmuted",
"defaultselected",
"defer",
"disablepictureinpicture",
"disableremoteplayback",
"preservespitch", // appears as camelCase property only (not as attribute)
"shadowrootclonable",
"shadowrootcustomelementregistry", // experimental - doesnt seem to have a prop yet
"shadowrootdelegatesfocus",
"shadowrootserializable", // experimental
"sharedstoragewritable" // experimental
];

const BooleanAttributes = /*#__PURE__*/new Set(booleans);

const Properties = /*#__PURE__*/new Set([
// locked to properties
"className",
"value",

// booleans with camelCase
"readOnly",
"noValidate",
"formNoValidate",
"isMap",
"noModule",
"playsInline",

"adAuctionHeaders", // experimental
"allowFullscreen",
"browsingTopics", // experimental
"defaultChecked",
"defaultMuted",
"defaultSelected",
"disablePictureInPicture",
"disableRemotePlayback",
"preservesPitch",
"shadowRootClonable",
"shadowRootCustomElementRegistry", // experimental
"shadowRootDelegatesFocus",
"shadowRootSerializable", // experimental
"sharedStorageWritable", // experimental

...booleans]);


const ChildProperties = /*#__PURE__*/new Set([
"innerHTML",
"textContent",
"innerText",
"children"]);


// React Compat
const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
  className: "class",
  htmlFor: "for"
});

const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
  // locked to properties
  class: "className",

  // booleans map
  novalidate: {
    $: "noValidate",
    FORM: 1
  },
  formnovalidate: {
    $: "formNoValidate",
    BUTTON: 1,
    INPUT: 1
  },
  ismap: {
    $: "isMap",
    IMG: 1
  },
  nomodule: {
    $: "noModule",
    SCRIPT: 1
  },
  playsinline: {
    $: "playsInline",
    VIDEO: 1
  },
  readonly: {
    $: "readOnly",
    INPUT: 1,
    TEXTAREA: 1
  },

  adauctionheaders: {
    $: "adAuctionHeaders",
    IFRAME: 1
  },
  allowfullscreen: {
    $: "allowFullscreen",
    IFRAME: 1
  },
  browsingtopics: {
    $: "browsingTopics",
    IMG: 1
  },
  defaultchecked: {
    $: "defaultChecked",
    INPUT: 1
  },
  defaultmuted: {
    $: "defaultMuted",
    AUDIO: 1,
    VIDEO: 1
  },
  defaultselected: {
    $: "defaultSelected",
    OPTION: 1
  },
  disablepictureinpicture: {
    $: "disablePictureInPicture",
    VIDEO: 1
  },
  disableremoteplayback: {
    $: "disableRemotePlayback",
    AUDIO: 1,
    VIDEO: 1
  },
  preservespitch: {
    $: "preservesPitch",
    AUDIO: 1,
    VIDEO: 1
  },
  shadowrootclonable: {
    $: "shadowRootClonable",
    TEMPLATE: 1
  },
  shadowrootdelegatesfocus: {
    $: "shadowRootDelegatesFocus",
    TEMPLATE: 1
  },
  shadowrootserializable: {
    $: "shadowRootSerializable",
    TEMPLATE: 1
  },
  sharedstoragewritable: {
    $: "sharedStorageWritable",
    IFRAME: 1,
    IMG: 1
  }
});

function getPropAlias(prop, tagName) {
  const a = PropAliases[prop];
  return typeof a === "object" ? a[tagName] ? a["$"] : undefined : a;
}

// list of Element events that will be delegated
const DelegatedEvents = /*#__PURE__*/new Set([
"beforeinput",
"click",
"dblclick",
"contextmenu",
"focusin",
"focusout",
"input",
"keydown",
"keyup",
"mousedown",
"mousemove",
"mouseout",
"mouseover",
"mouseup",
"pointerdown",
"pointermove",
"pointerout",
"pointerover",
"pointerup",
"touchend",
"touchmove",
"touchstart"]);


const SVGElements = /*#__PURE__*/new Set([
// "a",
"altGlyph",
"altGlyphDef",
"altGlyphItem",
"animate",
"animateColor",
"animateMotion",
"animateTransform",
"circle",
"clipPath",
"color-profile",
"cursor",
"defs",
"desc",
"ellipse",
"feBlend",
"feColorMatrix",
"feComponentTransfer",
"feComposite",
"feConvolveMatrix",
"feDiffuseLighting",
"feDisplacementMap",
"feDistantLight",
"feDropShadow",
"feFlood",
"feFuncA",
"feFuncB",
"feFuncG",
"feFuncR",
"feGaussianBlur",
"feImage",
"feMerge",
"feMergeNode",
"feMorphology",
"feOffset",
"fePointLight",
"feSpecularLighting",
"feSpotLight",
"feTile",
"feTurbulence",
"filter",
"font",
"font-face",
"font-face-format",
"font-face-name",
"font-face-src",
"font-face-uri",
"foreignObject",
"g",
"glyph",
"glyphRef",
"hkern",
"image",
"line",
"linearGradient",
"marker",
"mask",
"metadata",
"missing-glyph",
"mpath",
"path",
"pattern",
"polygon",
"polyline",
"radialGradient",
"rect",
// "script",
"set",
"stop",
// "style",
"svg",
"switch",
"symbol",
"text",
"textPath",
// "title",
"tref",
"tspan",
"use",
"view",
"vkern"]);


const SVGNamespace = {
  xlink: "http://www.w3.org/1999/xlink",
  xml: "http://www.w3.org/XML/1998/namespace"
};

var VoidElements = [
'area',
'base',
'br',
'col',
'embed',
'hr',
'img',
'input',
'keygen',
'link',
'menuitem',
'meta',
'param',
'source',
'track',
'wbr'];

const reservedNameSpaces = new Set([
"class",
"on",
"oncapture",
"style",
"use",
"prop",
"attr",
"bool"]);


const nonSpreadNameSpaces = new Set(["class", "style", "use", "prop", "attr", "bool"]);

function getConfig(path) {
  return path.hub.file.metadata.config;
}

const getRendererConfig = (path, renderer) => {
  const config = getConfig(path);
  return config?.renderers?.find((r) => r.name === renderer) ?? config;
};

function registerImportMethod(path, name, moduleName) {
  const imports =
  path.scope.getProgramParent().data.imports || (
  path.scope.getProgramParent().data.imports = new Map());
  moduleName = moduleName || getConfig(path).moduleName;
  if (!imports.has(`${moduleName}:${name}`)) {
    let id = helperModuleImports.addNamed(path, name, moduleName, {
      nameHint: `_$${name}`
    });
    imports.set(`${moduleName}:${name}`, id);
    return id;
  } else {
    let iden = imports.get(`${moduleName}:${name}`);
    // the cloning is required to play well with babel-preset-env which is
    // transpiling import as we add them and using the same identifier causes
    // problems with the multiple identifiers of the same thing
    return t__namespace.cloneNode(iden);
  }
}

function jsxElementNameToString(node) {
  if (t__namespace.isJSXMemberExpression(node)) {
    return `${jsxElementNameToString(node.object)}.${node.property.name}`;
  }
  if (t__namespace.isJSXIdentifier(node) || t__namespace.isIdentifier(node)) {
    return node.name;
  }
  return `${node.namespace.name}:${node.name.name}`;
}

function getTagName(tag) {
  const jsxName = tag.openingElement.name;
  return jsxElementNameToString(jsxName);
}

function isComponent(tagName) {
  return (
    tagName[0] && tagName[0].toLowerCase() !== tagName[0] ||
    tagName.includes(".") ||
    /[^a-zA-Z]/.test(tagName[0]));

}

function hasStaticMarker(object, path) {
  if (!object) return false;
  if (
  object.leadingComments &&
  object.leadingComments[0] &&
  object.leadingComments[0].value.trim() === getConfig(path).staticMarker)

  return true;
  if (object.expression) return hasStaticMarker(object.expression, path);
}

function isDynamic(path, { checkMember, checkTags, checkCallExpressions = true, native }) {
  const config = getConfig(path);
  if (config.generate === "ssr" && native) {
    checkMember = false;
    checkCallExpressions = false;
  }
  const expr = path.node;
  if (t__namespace.isFunction(expr)) return false;
  if (
  expr.leadingComments &&
  expr.leadingComments[0] &&
  expr.leadingComments[0].value.trim() === config.staticMarker)
  {
    return false;
  }

  if (
  checkCallExpressions && (
  t__namespace.isCallExpression(expr) ||
  t__namespace.isOptionalCallExpression(expr) ||
  t__namespace.isTaggedTemplateExpression(expr)))
  {
    return true;
  }

  if (checkMember && t__namespace.isMemberExpression(expr)) {
    // Do not assume property access on namespaced imports as dynamic.
    const object = path.get("object").node;

    if (
    t__namespace.isIdentifier(object) && (
    !expr.computed ||
    !isDynamic(path.get("property"), {
      checkMember,
      checkTags,
      checkCallExpressions,
      native
    })))
    {
      const binding = path.scope.getBinding(object.name);

      if (binding && binding.path.isImportNamespaceSpecifier()) {
        return false;
      }
    }

    return true;
  }

  if (
  checkMember && (
  t__namespace.isOptionalMemberExpression(expr) ||
  t__namespace.isSpreadElement(expr) ||
  t__namespace.isBinaryExpression(expr) && expr.operator === "in"))
  {
    return true;
  }

  if (checkTags && (t__namespace.isJSXElement(expr) || t__namespace.isJSXFragment(expr) && expr.children.length)) {
    return true;
  }

  let dynamic;
  path.traverse({
    Function(p) {
      if (t__namespace.isObjectMethod(p.node) && p.node.computed) {
        dynamic = isDynamic(p.get("key"), { checkMember, checkTags, checkCallExpressions, native });
      }
      p.skip();
    },
    CallExpression(p) {
      checkCallExpressions && (dynamic = true) && p.stop();
    },
    OptionalCallExpression(p) {
      checkCallExpressions && (dynamic = true) && p.stop();
    },
    MemberExpression(p) {
      checkMember && (dynamic = true) && p.stop();
    },
    OptionalMemberExpression(p) {
      checkMember && (dynamic = true) && p.stop();
    },
    SpreadElement(p) {
      checkMember && (dynamic = true) && p.stop();
    },
    BinaryExpression(p) {
      checkMember && p.node.operator === "in" && (dynamic = true) && p.stop();
    },
    JSXElement(p) {
      checkTags ? (dynamic = true) && p.stop() : p.skip();
    },
    JSXFragment(p) {
      checkTags && p.node.children.length ? (dynamic = true) && p.stop() : p.skip();
    }
  });
  return dynamic;
}

function getStaticExpression(path) {
  const node = path.node;
  let value, type;
  return (
    t__namespace.isJSXExpressionContainer(node) &&
    t__namespace.isJSXElement(path.parent) &&
    !isComponent(getTagName(path.parent)) &&
    !t__namespace.isSequenceExpression(node.expression) &&
    (value = path.get("expression").evaluate().value) !== undefined && (
    (type = typeof value) === "string" || type === "number") &&
    value);

}

// remove unnecessary JSX Text nodes
function filterChildren(children) {
  return children.filter(
  ({ node: child }) =>
  !(t__namespace.isJSXExpressionContainer(child) && t__namespace.isJSXEmptyExpression(child.expression)) && (
  !t__namespace.isJSXText(child) || !/^[\r\n]\s*$/.test(child.extra.raw)));

}

function checkLength(children) {
  let i = 0;
  children.forEach((path) => {
    const child = path.node;
    !(t__namespace.isJSXExpressionContainer(child) && t__namespace.isJSXEmptyExpression(child.expression)) && (
    !t__namespace.isJSXText(child) || !/^\s*$/.test(child.extra.raw) || /^ *$/.test(child.extra.raw)) &&
    i++;
  });
  return i > 1;
}

function trimWhitespace(text) {
  text = text.replace(/\r/g, "");
  if (/\n/g.test(text)) {
    text = text.
    split("\n").
    map((t, i) => i ? t.replace(/^\s*/g, "") : t).
    filter((s) => !/^\s*$/.test(s)).
    join(" ");
  }
  return text.replace(/\s+/g, " ");
}

function toEventName(name) {
  return name.slice(2).toLowerCase();
}

function toPropertyName(name) {
  return name.toLowerCase().replace(/-([a-z])/g, (_, w) => w.toUpperCase());
}

function wrappedByText(list, startIndex) {
  let index = startIndex,
    wrapped;
  while (--index >= 0) {
    const node = list[index];
    if (!node) continue;
    if (node.text) {
      wrapped = true;
      break;
    }
    if (node.id) return false;
  }
  if (!wrapped) return false;
  index = startIndex;
  while (++index < list.length) {
    const node = list[index];
    if (!node) continue;
    if (node.text) return true;
    if (node.id) return false;
  }
  return false;
}

function transformCondition(path, inline, deep) {
  const config = getConfig(path);
  const expr = path.node;
  const memo = registerImportMethod(path, config.memoWrapper);
  let dTest, cond, id;
  if (
  t__namespace.isConditionalExpression(expr) && (
  isDynamic(path.get("consequent"), {
    checkTags: true,
    checkMember: true
  }) ||
  isDynamic(path.get("alternate"), { checkTags: true, checkMember: true })))
  {
    dTest = isDynamic(path.get("test"), { checkMember: true });
    if (dTest) {
      cond = expr.test;
      if (!t__namespace.isBinaryExpression(cond))
      cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
      id = inline ?
      t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)]) :
      path.scope.generateUidIdentifier("_c$");
      expr.test = t__namespace.callExpression(id, []);
      if (t__namespace.isConditionalExpression(expr.consequent) || t__namespace.isLogicalExpression(expr.consequent)) {
        expr.consequent = transformCondition(path.get("consequent"), true, true);
      }
      if (t__namespace.isConditionalExpression(expr.alternate) || t__namespace.isLogicalExpression(expr.alternate)) {
        expr.alternate = transformCondition(path.get("alternate"), true, true);
      }
    }
  } else if (t__namespace.isLogicalExpression(expr)) {
    let nextPath = path;
    // handle top-level or, ie cond && <A/> || <B/>
    while (nextPath.node.operator !== "&&" && t__namespace.isLogicalExpression(nextPath.node.left)) {
      nextPath = nextPath.get("left");
    }
    nextPath.node.operator === "&&" &&
    isDynamic(nextPath.get("right"), { checkTags: true, checkMember: true }) && (
    dTest = isDynamic(nextPath.get("left"), {
      checkMember: true
    }));
    if (dTest) {
      cond = nextPath.node.left;
      if (!t__namespace.isBinaryExpression(cond))
      cond = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", cond, true), true);
      id = inline ?
      t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)]) :
      path.scope.generateUidIdentifier("_c$");
      nextPath.node.left = t__namespace.callExpression(id, []);
    }
  }
  if (dTest && !inline) {
    const statements = [
    t__namespace.variableDeclaration("var", [
    t__namespace.variableDeclarator(
    id,
    config.memoWrapper ?
    t__namespace.callExpression(memo, [t__namespace.arrowFunctionExpression([], cond)]) :
    t__namespace.arrowFunctionExpression([], cond))]),


    t__namespace.arrowFunctionExpression([], expr)];

    return deep ?
    t__namespace.callExpression(
    t__namespace.arrowFunctionExpression(
    [],
    t__namespace.blockStatement([statements[0], t__namespace.returnStatement(statements[1])])),

    []) :

    statements;
  }
  return deep ? expr : t__namespace.arrowFunctionExpression([], expr);
}

function escapeHTML(s, attr) {
  if (typeof s !== "string") return s;
  const delim = attr ? '"' : "<";
  const escDelim = attr ? "&quot;" : "&lt;";
  let iDelim = s.indexOf(delim);
  let iAmp = s.indexOf("&");

  if (iDelim < 0 && iAmp < 0) return s;

  let left = 0,
    out = "";

  while (iDelim >= 0 && iAmp >= 0) {
    if (iDelim < iAmp) {
      if (left < iDelim) out += s.substring(left, iDelim);
      out += escDelim;
      left = iDelim + 1;
      iDelim = s.indexOf(delim, left);
    } else {
      if (left < iAmp) out += s.substring(left, iAmp);
      out += "&amp;";
      left = iAmp + 1;
      iAmp = s.indexOf("&", left);
    }
  }

  if (iDelim >= 0) {
    do {
      if (left < iDelim) out += s.substring(left, iDelim);
      out += escDelim;
      left = iDelim + 1;
      iDelim = s.indexOf(delim, left);
    } while (iDelim >= 0);
  } else {
    while (iAmp >= 0) {
      if (left < iAmp) out += s.substring(left, iAmp);
      out += "&amp;";
      left = iAmp + 1;
      iAmp = s.indexOf("&", left);
    }
  }

  return left < s.length ? out + s.substring(left) : out;
}

function convertJSXIdentifier(node) {
  if (t__namespace.isJSXIdentifier(node)) {
    if (t__namespace.isValidIdentifier(node.name)) {
      node.type = "Identifier";
    } else {
      return t__namespace.stringLiteral(node.name);
    }
  } else if (t__namespace.isJSXMemberExpression(node)) {
    return t__namespace.memberExpression(
    convertJSXIdentifier(node.object),
    convertJSXIdentifier(node.property));

  } else if (t__namespace.isJSXNamespacedName(node)) {
    return t__namespace.stringLiteral(`${node.namespace.name}:${node.name.name}`);
  }

  return node;
}

function canNativeSpread(key, { checkNameSpaces } = {}) {
  if (checkNameSpaces && key.includes(":") && nonSpreadNameSpaces.has(key.split(":")[0]))
  return false;
  // TODO: figure out how to detect definitely function ref
  if (key === "ref") return false;
  return true;
}

const chars = "etaoinshrdlucwmfygpbTAOISWCBvkxjqzPHFMDRELNGUKVYJQZX_$";
const base = chars.length;

function getNumberedId(num) {
  let out = "";

  do {
    const digit = num % base;

    num = Math.floor(num / base);
    out = chars[digit] + out;
  } while (num !== 0);

  return out;
}

function escapeStringForTemplate(str) {
  return str.replace(/[{\\`\n\t\b\f\v\r\u2028\u2029]/g, (ch) => templateEscapes.get(ch));
}

const templateEscapes = new Map([
["{", "\\{"],
["`", "\\`"],
["\\", "\\\\"],
["\n", "\\n"],
["\t", "\\t"],
["\b", "\\b"],
["\f", "\\f"],
["\v", "\\v"],
["\r", "\\r"],
["\u2028", "\\u2028"],
["\u2029", "\\u2029"]]);


function evaluateAndInline(value, valueNode) {
  if (t__namespace.isJSXExpressionContainer(value)) {
    evaluateAndInline(value.expression, valueNode.get("expression"));
  } else if (t__namespace.isObjectProperty(value)) {
    evaluateAndInline(value.value, valueNode.get("value"));
  } else if (
  t__namespace.isStringLiteral(value) ||
  t__namespace.isNumericLiteral(value) ||
  t__namespace.isBooleanLiteral(value) ||
  t__namespace.isNullLiteral(value))
  ; else if (t__namespace.isObjectExpression(value)) {const properties = value.properties;
    const propertiesNode = valueNode.get("properties");
    for (let i = 0; i < properties.length; i++) {
      evaluateAndInline(properties[i], propertiesNode[i]);
    }
  } else {
    const r = valueNode.evaluate();
    if (r.confident) {
      if (typeof r.value === "string") {
        valueNode.replaceWith(t__namespace.stringLiteral(r.value));
      } else if (typeof r.value === "number") {
        valueNode.replaceWith(t__namespace.numericLiteral(r.value));
      } else if (typeof r.value === "boolean") {
        valueNode.replaceWith(t__namespace.booleanLiteral(r.value));
      }
    }
  }
}

const InlineElements = [
"a",
"abbr",
"acronym",
"b",
"bdi",
"bdo",
"big",
"br",
"button",
"canvas",
"cite",
"code",
"data",
"datalist",
"del",
"dfn",
"em",
"embed",
"i",
"iframe",
"img",
"input",
"ins",
"kbd",
"label",
"map",
"mark",
"meter",
"noscript",
"object",
"output",
"picture",
"progress",
"q",
"ruby",
"s",
"samp",
"script",
"select",
"slot",
"small",
"span",
"strong",
"sub",
"sup",
"svg",
"template",
"textarea",
"time",
"u",
"tt",
"var",
"video"];


const BlockElements = [
"address",
"article",
"aside",
"blockquote",
"dd",
"details",
"dialog",
"div",
"dl",
"dt",
"fieldset",
"figcaption",
"figure",
"footer",
"form",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"header",
"hgroup",
"hr",
"li",
"main",
"menu",
"nav",
"ol",
"p",
"pre",
"section",
"table",
"ul"];

const alwaysClose = [
"title",
"style",
"a",
"strong",
"small",
"b",
"u",
"i",
"em",
"s",
"code",
"object",
"table",
"button",
"textarea",
"select",
"iframe",
"script",
"noscript",
"template",
"fieldset"];


function transformElement$3(path, info) {
  path.
  get("openingElement").
  get("attributes").
  forEach((attr) => {
    evaluateAndInline(attr.node.value, attr.get("value"));
  });

  let tagName = getTagName(path.node),
    config = getConfig(path),
    wrapSVG = info.topLevel && tagName != "svg" && SVGElements.has(tagName),
    voidTag = VoidElements.indexOf(tagName) > -1,
    isCustomElement =
    tagName.indexOf("-") > -1 ||
    path.
    get("openingElement").
    get("attributes").
    some((a) => a.node?.name?.name === "is" || a.name?.name === "is"),
    isImportNode =
    (tagName === "img" || tagName === "iframe") &&
    path.
    get("openingElement").
    get("attributes").
    some((a) => a.node.name?.name === "loading"),
    results = {
      template: `<${tagName}`,
      templateWithClosingTags: `<${tagName}`,
      declarations: [],
      exprs: [],
      dynamics: [],
      postExprs: [],
      isSVG: wrapSVG,
      hasCustomElement: isCustomElement,
      isImportNode,
      tagName,
      renderer: "dom",
      skipTemplate: false
    };

  if (!config.inlineStyles) {
    path.
    get("openingElement").
    get("attributes").
    forEach((a) => {
      if (a.node.name?.name === "style") {
        let value = a.node.value.expression ? a.node.value.expression : a.node.value;
        if (t__namespace.isStringLiteral(value)) {
          // jsx attribute value is a sting that may takes more than one line
          value = t__namespace.templateLiteral(
          [t__namespace.templateElement({ raw: value.value, cooked: value.value })],
          []);

        }
        a.get("value").replaceWith(
        t__namespace.jSXExpressionContainer(t__namespace.callExpression(t__namespace.arrowFunctionExpression([], value), [])));

      }
    });
  }

  path.
  get("openingElement").
  get("attributes").
  some((a) => {
    if (a.node.name?.name === "data-hk") {
      a.remove();
      let filename = "";
      try {
        filename = path.scope.getProgramParent().path.hub.file.opts.filename;
      } catch (e) {}

      console.log(
      "\n" +
      path.
      buildCodeFrameError(
      `"data-hk" attribute found in template, which could potentially cause hydration miss-matches. Usually happens when copying and pasting Solid SSRed code into JSX. Please remove the attribute from the JSX. \n\n${filename}\n`).

      toString());

    }
  });
  if (config.hydratable && (tagName === "html" || tagName === "head" || tagName === "body")) {
    results.skipTemplate = true;
    if (tagName === "head" && info.topLevel) {
      const createComponent = registerImportMethod(
      path,
      "createComponent",
      getRendererConfig(path, "dom").moduleName);

      const NoHydration = registerImportMethod(
      path,
      "NoHydration",
      getRendererConfig(path, "dom").moduleName);

      results.exprs.push(
      t__namespace.expressionStatement(
      t__namespace.callExpression(createComponent, [NoHydration, t__namespace.objectExpression([])])));


      return results;
    }
  }
  if (wrapSVG) {
    results.template = "<svg>" + results.template;
    results.templateWithClosingTags = "<svg>" + results.templateWithClosingTags;
  }
  if (!info.skipId) {
    results.id = path.scope.generateUidIdentifier("el$");
  }
  transformAttributes$2(path, results);
  if (config.contextToCustomElements && (tagName === "slot" || isCustomElement)) {
    contextToCustomElement(path, results);
  }
  results.template += ">";
  results.templateWithClosingTags += ">";
  if (!voidTag) {
    // always close tags can still be skipped if they have no closing parents and are the last element
    const toBeClosed =
    !info.lastElement ||
    !config.omitLastClosingTag ||
    info.toBeClosed && (!config.omitNestedClosingTags || info.toBeClosed.has(tagName));
    if (toBeClosed) {
      results.toBeClosed = new Set(info.toBeClosed || alwaysClose);
      results.toBeClosed.add(tagName);
      if (InlineElements.includes(tagName)) BlockElements.forEach((i) => results.toBeClosed.add(i));
    } else results.toBeClosed = info.toBeClosed;
    if (tagName !== "noscript") transformChildren$2(path, results, config);
    if (toBeClosed) results.template += `</${tagName}>`;
    results.templateWithClosingTags += `</${tagName}>`;
  }
  if (info.topLevel && config.hydratable && results.hasHydratableEvent) {
    let runHydrationEvents = registerImportMethod(
    path,
    "runHydrationEvents",
    getRendererConfig(path, "dom").moduleName);

    results.postExprs.push(t__namespace.expressionStatement(t__namespace.callExpression(runHydrationEvents, [])));
  }
  if (wrapSVG) {
    results.template += "</svg>";
    results.templateWithClosingTags += "</svg>";
  }
  return results;
}

function setAttr$2(path, elem, name, value, { isSVG, dynamic, prevId, isCE, tagName }) {
  // pull out namespace
  const config = getConfig(path);
  let parts, namespace;
  if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
    name = parts[1];
    namespace = parts[0];
  }

  if (namespace === "style") {
    const setStyleProperty = registerImportMethod(
    path,
    "setStyleProperty",
    getRendererConfig(path, "dom").moduleName);


    return t__namespace.callExpression(setStyleProperty, [
    elem,
    t__namespace.stringLiteral(name),
    t__namespace.isAssignmentExpression(value) && t__namespace.isIdentifier(value.left) ? value.right : value]);

  }

  if (namespace === "class") {
    return t__namespace.callExpression(
    t__namespace.memberExpression(
    t__namespace.memberExpression(elem, t__namespace.identifier("classList")),
    t__namespace.identifier("toggle")),

    [
    t__namespace.stringLiteral(name),
    dynamic ? value : t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", value))]);


  }

  if (name === "style") {
    return t__namespace.callExpression(
    registerImportMethod(path, "style", getRendererConfig(path, "dom").moduleName),
    prevId ? [elem, value, prevId] : [elem, value]);

  }

  if (!isSVG && name === "class") {
    return t__namespace.callExpression(
    registerImportMethod(path, "className", getRendererConfig(path, "dom").moduleName),
    [elem, value]);

  }

  if (name === "classList") {
    return t__namespace.callExpression(
    registerImportMethod(path, "classList", getRendererConfig(path, "dom").moduleName),
    prevId ? [elem, value, prevId] : [elem, value]);

  }

  if (dynamic && name === "textContent") {
    if (config.hydratable) {
      return t__namespace.callExpression(registerImportMethod(path, "setProperty"), [
      elem,
      t__namespace.stringLiteral("data"),
      value]);

    }
    return t__namespace.assignmentExpression("=", t__namespace.memberExpression(elem, t__namespace.identifier("data")), value);
  }

  if (namespace === "bool") {
    return t__namespace.callExpression(
    registerImportMethod(path, "setBoolAttribute", getRendererConfig(path, "dom").moduleName),
    [elem, t__namespace.stringLiteral(name), value]);

  }

  const isChildProp = ChildProperties.has(name);
  const isProp = Properties.has(name);
  const alias = getPropAlias(name, tagName.toUpperCase());
  if (namespace !== "attr" && (isChildProp || !isSVG && isProp || isCE || namespace === "prop")) {
    if (isCE && !isChildProp && !isProp && namespace !== "prop") name = toPropertyName(name);
    if (config.hydratable && namespace !== "prop") {
      return t__namespace.callExpression(registerImportMethod(path, "setProperty"), [
      elem,
      t__namespace.stringLiteral(alias || name),
      value]);

    }
    return t__namespace.assignmentExpression(
    "=",
    t__namespace.memberExpression(elem, t__namespace.identifier(alias || name)),
    value);

  }

  let isNameSpaced = name.indexOf(":") > -1;
  name = Aliases[name] || name;
  !isSVG && (name = name.toLowerCase());
  const ns = isNameSpaced && SVGNamespace[name.split(":")[0]];
  if (ns) {
    return t__namespace.callExpression(
    registerImportMethod(path, "setAttributeNS", getRendererConfig(path, "dom").moduleName),
    [elem, t__namespace.stringLiteral(ns), t__namespace.stringLiteral(name), value]);

  } else {
    return t__namespace.callExpression(
    registerImportMethod(path, "setAttribute", getRendererConfig(path, "dom").moduleName),
    [elem, t__namespace.stringLiteral(name), value]);

  }
}

function detectResolvableEventHandler(attribute, handler) {
  while (t__namespace.isIdentifier(handler)) {
    const lookup = attribute.scope.getBinding(handler.name);
    if (lookup) {
      if (t__namespace.isVariableDeclarator(lookup.path.node)) {
        handler = lookup.path.node.init;
      } else if (t__namespace.isFunctionDeclaration(lookup.path.node)) {
        return true;
      } else return false;
    } else return false;
  }
  return t__namespace.isFunction(handler);
}

function transformAttributes$2(path, results) {
  let elem = results.id,
    hasHydratableEvent = false,
    children,
    spreadExpr,
    attributes = path.get("openingElement").get("attributes");
  const tagName = getTagName(path.node),
    isSVG = SVGElements.has(tagName),
    isCE = tagName.includes("-") || attributes.some((a) => a.node.name?.name === "is"),
    hasChildren = path.node.children.length > 0,
    config = getConfig(path);

  // preprocess spreads
  if (attributes.some((attribute) => t__namespace.isJSXSpreadAttribute(attribute.node))) {
    [attributes, spreadExpr] = processSpreads$1(path, attributes, {
      elem,
      isSVG,
      hasChildren,
      wrapConditionals: config.wrapConditionals
    });
    path.get("openingElement").set(
    "attributes",
    attributes.map((a) => a.node));

    //NOTE: can't be checked at compile time so add to compiled output
    hasHydratableEvent = true;
  }

  /**
   * Inline styles
   *
   * 1. When string
   * 2. When is an object, the key is a string, and value is string/numeric
   * 3. Remove properties from object when value is undefined/null
   * 4. When `value.evaluate().confident`
   *
   * Also, when `key` is computed value is also `value.evaluate().confident`
   */

  attributes = path.get("openingElement").get("attributes");

  const styleAttributes = attributes.filter((a) => a.node.name && a.node.name.name === "style");
  if (styleAttributes.length > 0) {
    let inlinedStyle = "";

    for (let i = 0; i < styleAttributes.length; i++) {
      const attr = styleAttributes[i];

      let value = attr.node.value;
      const node = attr.get("value");
      if (t__namespace.isJSXExpressionContainer(value)) {
        value = value.expression;
      }

      if (t__namespace.isStringLiteral(value)) {
        inlinedStyle += `${value.value.replace(/;$/, "")};`;
        attr.remove();
      } else if (t__namespace.isObjectExpression(value)) {
        const properties = value.properties;
        const propertiesNode = node.get("expression").get("properties");
        const toRemoveProperty = [];
        for (let i = 0; i < properties.length; i++) {
          const property = properties[i];

          if (property.computed) {
            /* { [computed]: `${1+1}px` } => { [computed]: `2px` } */
            const r = propertiesNode[i].get("value").evaluate();
            if (r.confident && (typeof r.value === "string" || typeof r.value === "number")) {
              property.value = t__namespace.inherits(t__namespace.stringLiteral(`${r.value}`), property.value);
            }
            // computed cannot be inlined - maybe can be evaluated but this is pretty rare
            continue;
          }

          if (t__namespace.isObjectProperty(property)) {
            const key = t__namespace.isIdentifier(property.key) ? property.key.name : property.key.value;
            if (t__namespace.isStringLiteral(property.value) || t__namespace.isNumericLiteral(property.value)) {
              inlinedStyle += `${key}:${property.value.value};`;
              toRemoveProperty.push(property);
            } else if (
            t__namespace.isIdentifier(property.value) && property.value.name === "undefined" ||
            t__namespace.isNullLiteral(property.value))
            {
              toRemoveProperty.push(property);
            } else {
              const r = propertiesNode[i].get("value").evaluate();
              if (r.confident && (typeof r.value === "string" || typeof r.value === "number")) {
                inlinedStyle += `${key}:${r.value};`;
                toRemoveProperty.push(property);
              }
            }
          }
        }
        for (const remove of toRemoveProperty) {
          value.properties.splice(value.properties.indexOf(remove), 1);
        }
        if (value.properties.length === 0) {
          attr.remove();
        }
      }
    }

    if (inlinedStyle !== "") {
      const styleAttribute = t__namespace.jsxAttribute(
      t__namespace.jsxIdentifier("style"),
      t__namespace.stringLiteral(inlinedStyle.replace(/;$/, "")));

      path.get("openingElement").node.attributes.push(styleAttribute);
    }
  }

  // preprocess styles
  const styleAttribute = path.
  get("openingElement").
  get("attributes").
  find(
  (a) =>
  a.node.name &&
  a.node.name.name === "style" &&
  t__namespace.isJSXExpressionContainer(a.node.value) &&
  t__namespace.isObjectExpression(a.node.value.expression) &&
  !a.node.value.expression.properties.some((p) => t__namespace.isSpreadElement(p)));

  if (styleAttribute) {
    let i = 0,
      leading = styleAttribute.node.value.expression.leadingComments;
    styleAttribute.node.value.expression.properties.slice().forEach((p, index) => {
      if (!p.computed) {
        if (leading) p.value.leadingComments = leading;
        path.
        get("openingElement").
        node.attributes.splice(
        styleAttribute.key + ++i,
        0,
        t__namespace.jsxAttribute(
        t__namespace.jsxNamespacedName(
        t__namespace.jsxIdentifier("style"),
        t__namespace.jsxIdentifier(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)),

        t__namespace.jsxExpressionContainer(p.value)));


        styleAttribute.node.value.expression.properties.splice(index - i - 1, 1);
      }
    });
    if (!styleAttribute.node.value.expression.properties.length)
    path.get("openingElement").node.attributes.splice(styleAttribute.key, 1);
  }

  // preprocess classList
  attributes = path.get("openingElement").get("attributes");
  const classListAttribute = attributes.find(
  (a) =>
  a.node.name &&
  a.node.name.name === "classList" &&
  t__namespace.isJSXExpressionContainer(a.node.value) &&
  t__namespace.isObjectExpression(a.node.value.expression) &&
  !a.node.value.expression.properties.some(
  (p) =>
  t__namespace.isSpreadElement(p) ||
  p.computed ||
  t__namespace.isStringLiteral(p.key) && (p.key.value.includes(" ") || p.key.value.includes(":"))));


  if (classListAttribute) {
    let i = 0,
      leading = classListAttribute.node.value.expression.leadingComments,
      classListProperties = classListAttribute.get("value").get("expression").get("properties");
    classListProperties.slice().forEach((propPath, index) => {
      const p = propPath.node;
      const { confident, value: computed } = propPath.get("value").evaluate();
      if (leading) p.value.leadingComments = leading;
      if (!confident) {
        path.
        get("openingElement").
        node.attributes.splice(
        classListAttribute.key + ++i,
        0,
        t__namespace.jsxAttribute(
        t__namespace.jsxNamespacedName(
        t__namespace.jsxIdentifier("class"),
        t__namespace.jsxIdentifier(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)),

        t__namespace.jsxExpressionContainer(p.value)));


      } else if (computed) {
        path.
        get("openingElement").
        node.attributes.splice(
        classListAttribute.key + ++i,
        0,
        t__namespace.jsxAttribute(
        t__namespace.jsxIdentifier("class"),
        t__namespace.stringLiteral(t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value)));


      }
      classListProperties.splice(index - i - 1, 1);
    });
    if (!classListProperties.length)
    path.get("openingElement").node.attributes.splice(classListAttribute.key, 1);
  }

  // combine class properties
  attributes = path.get("openingElement").get("attributes");
  const classAttributes = attributes.filter(
  (a) => a.node.name && (a.node.name.name === "class" || a.node.name.name === "className"));

  if (classAttributes.length > 1) {
    const first = classAttributes[0].node,
      values = [],
      quasis = [t__namespace.templateElement({ raw: "" })];
    for (let i = 0; i < classAttributes.length; i++) {
      const attr = classAttributes[i].node,
        isLast = i === classAttributes.length - 1;
      if (!t__namespace.isJSXExpressionContainer(attr.value)) {
        const prev = quasis.pop();
        quasis.push(
        t__namespace.templateElement({
          raw: (prev ? prev.value.raw : "") + `${attr.value.value}` + (isLast ? "" : " ")
        }));

      } else {
        values.push(t__namespace.logicalExpression("||", attr.value.expression, t__namespace.stringLiteral("")));
        quasis.push(t__namespace.templateElement({ raw: isLast ? "" : " " }));
      }
      i && attributes.splice(attributes.indexOf(classAttributes[i]), 1);
    }
    if (values.length) first.value = t__namespace.jsxExpressionContainer(t__namespace.templateLiteral(quasis, values));else
    first.value = t__namespace.stringLiteral(quasis[0].value.raw);
  }
  path.get("openingElement").set(
  "attributes",
  attributes.map((a) => a.node));


  let needsSpacing = true;

  // scoped because of `needsSpacing`
  function inlineAttributeOnTemplate(isSVG, key, results, value) {
    !isSVG && (key = key.toLowerCase());
    results.template += `${needsSpacing ? " " : ""}${key}`;

    if (!value) {
      needsSpacing = true;
      return;
    }

    let text = value.value;
    if (typeof text === "number") text = String(text);
    let needsQuoting = !config.omitQuotes;

    if (key === "style" || key === "class") {
      text = trimWhitespace(text);
      if (key === "style") {
        text = text.replace(/; /g, ";").replace(/: /g, ":");
      }
    }

    if (!text.length) {
      needsSpacing = true;
      results.template += ``;
      return;
    }

    for (let i = 0, len = text.length; i < len; i++) {
      let char = text[i];

      if (
      char === "'" ||
      char === '"' ||
      char === " " ||
      char === "\t" ||
      char === "\n" ||
      char === "\r" ||
      char === "`" ||
      char === "=" ||
      char === "<" ||
      char === ">")
      {
        needsQuoting = true;
      }
    }

    if (needsQuoting) {
      needsSpacing = false;
      results.template += `="${escapeHTML(text, true)}"`;
    } else {
      needsSpacing = true;
      results.template += `=${escapeHTML(text, true)}`;
    }
  }

  path.
  get("openingElement").
  get("attributes").
  forEach((attribute) => {
    const node = attribute.node;
    let value = node.value,
      key = t__namespace.isJSXNamespacedName(node.name) ?
      `${node.name.namespace.name}:${node.name.name.name}` :
      node.name.name,
      reservedNameSpace =
      t__namespace.isJSXNamespacedName(node.name) && reservedNameSpaces.has(node.name.namespace.name);
    if (t__namespace.isJSXExpressionContainer(value) && !key.startsWith("use:")) {
      const evaluated = attribute.get("value").get("expression").evaluate().value;
      let type;
      if (
      evaluated !== undefined && (
      (type = typeof evaluated) === "string" || type === "number"))
      {
        if (type === "number" && (Properties.has(key) || key.startsWith("prop:"))) {
          value = t__namespace.jsxExpressionContainer(t__namespace.numericLiteral(evaluated));
        } else value = t__namespace.stringLiteral(String(evaluated));
      }
    }
    if (
    t__namespace.isJSXNamespacedName(node.name) &&
    reservedNameSpace &&
    !t__namespace.isJSXExpressionContainer(value))
    {
      node.value = value = t__namespace.jsxExpressionContainer(value || t__namespace.jsxEmptyExpression());
    }
    if (
    t__namespace.isJSXExpressionContainer(value) && (
    reservedNameSpace ||
    !(t__namespace.isStringLiteral(value.expression) || t__namespace.isNumericLiteral(value.expression))))
    {
      if (key === "ref") {
        // Normalize expressions for non-null and type-as
        while (
        t__namespace.isTSNonNullExpression(value.expression) ||
        t__namespace.isTSAsExpression(value.expression))
        {
          value.expression = value.expression.expression;
        }
        let binding,
          isConstant =
          t__namespace.isIdentifier(value.expression) && (
          binding = path.scope.getBinding(value.expression.name)) && (
          binding.kind === "const" || binding.kind === "module");
        if (!isConstant && t__namespace.isLVal(value.expression)) {
          const refIdentifier = path.scope.generateUidIdentifier("_ref$");
          results.exprs.unshift(
          t__namespace.variableDeclaration("var", [t__namespace.variableDeclarator(refIdentifier, value.expression)]),
          t__namespace.expressionStatement(
          t__namespace.conditionalExpression(
          t__namespace.binaryExpression(
          "===",
          t__namespace.unaryExpression("typeof", refIdentifier),
          t__namespace.stringLiteral("function")),

          t__namespace.callExpression(
          registerImportMethod(path, "use", getRendererConfig(path, "dom").moduleName),
          [refIdentifier, elem]),

          t__namespace.assignmentExpression("=", value.expression, elem))));



        } else if (isConstant || t__namespace.isFunction(value.expression)) {
          results.exprs.unshift(
          t__namespace.expressionStatement(
          t__namespace.callExpression(
          registerImportMethod(path, "use", getRendererConfig(path, "dom").moduleName),
          [value.expression, elem])));



        } else {
          const refIdentifier = path.scope.generateUidIdentifier("_ref$");
          results.exprs.unshift(
          t__namespace.variableDeclaration("var", [t__namespace.variableDeclarator(refIdentifier, value.expression)]),
          t__namespace.expressionStatement(
          t__namespace.logicalExpression(
          "&&",
          t__namespace.binaryExpression(
          "===",
          t__namespace.unaryExpression("typeof", refIdentifier),
          t__namespace.stringLiteral("function")),

          t__namespace.callExpression(
          registerImportMethod(path, "use", getRendererConfig(path, "dom").moduleName),
          [refIdentifier, elem]))));




        }
      } else if (key.startsWith("use:")) {
        // Some trick to treat JSXIdentifier as Identifier
        node.name.name.type = "Identifier";
        results.exprs.unshift(
        t__namespace.expressionStatement(
        t__namespace.callExpression(
        registerImportMethod(path, "use", getRendererConfig(path, "dom").moduleName),
        [
        node.name.name,
        elem,
        t__namespace.arrowFunctionExpression(
        [],
        t__namespace.isJSXEmptyExpression(value.expression) ?
        t__namespace.booleanLiteral(true) :
        value.expression)])));





      } else if (key === "children") {
        children = value;
      } else if (key.startsWith("on")) {
        const ev = toEventName(key);
        if (key.startsWith("on:")) {
          const args = [elem, t__namespace.stringLiteral(key.split(":")[1]), value.expression];

          results.exprs.unshift(
          t__namespace.expressionStatement(
          t__namespace.callExpression(
          registerImportMethod(
          path,
          "addEventListener",
          getRendererConfig(path, "dom").moduleName),

          args)));



        } else if (key.startsWith("oncapture:")) {
          // deprecated see above condition
          const args = [
          t__namespace.stringLiteral(key.split(":")[1]),
          value.expression,
          t__namespace.booleanLiteral(true)];

          results.exprs.push(
          t__namespace.expressionStatement(
          t__namespace.callExpression(t__namespace.memberExpression(elem, t__namespace.identifier("addEventListener")), args)));


        } else if (
        config.delegateEvents && (
        DelegatedEvents.has(ev) || config.delegatedEvents.indexOf(ev) !== -1))
        {
          // can only hydrate delegated events
          hasHydratableEvent = true;
          const events =
          attribute.scope.getProgramParent().data.events || (
          attribute.scope.getProgramParent().data.events = new Set());
          events.add(ev);
          let handler = value.expression;
          const resolveable = detectResolvableEventHandler(attribute, handler);
          if (t__namespace.isArrayExpression(handler)) {
            if (handler.elements.length > 1) {
              results.exprs.unshift(
              t__namespace.expressionStatement(
              t__namespace.assignmentExpression(
              "=",
              t__namespace.memberExpression(elem, t__namespace.identifier(`$$${ev}Data`)),
              handler.elements[1])));



            }
            handler = handler.elements[0];
            results.exprs.unshift(
            t__namespace.expressionStatement(
            t__namespace.assignmentExpression(
            "=",
            t__namespace.memberExpression(elem, t__namespace.identifier(`$$${ev}`)),
            handler)));



          } else if (t__namespace.isFunction(handler) || resolveable) {
            results.exprs.unshift(
            t__namespace.expressionStatement(
            t__namespace.assignmentExpression(
            "=",
            t__namespace.memberExpression(elem, t__namespace.identifier(`$$${ev}`)),
            handler)));



          } else {
            results.exprs.unshift(
            t__namespace.expressionStatement(
            t__namespace.callExpression(
            registerImportMethod(
            path,
            "addEventListener",
            getRendererConfig(path, "dom").moduleName),

            [elem, t__namespace.stringLiteral(ev), handler, t__namespace.booleanLiteral(true)])));



          }
        } else {
          let handler = value.expression;
          const resolveable = detectResolvableEventHandler(attribute, handler);
          if (t__namespace.isArrayExpression(handler)) {
            if (handler.elements.length > 1) {
              handler = t__namespace.arrowFunctionExpression(
              [t__namespace.identifier("e")],
              t__namespace.callExpression(handler.elements[0], [handler.elements[1], t__namespace.identifier("e")]));

            } else handler = handler.elements[0];
            results.exprs.unshift(
            t__namespace.expressionStatement(
            t__namespace.callExpression(t__namespace.memberExpression(elem, t__namespace.identifier("addEventListener")), [
            t__namespace.stringLiteral(ev),
            handler])));



          } else if (t__namespace.isFunction(handler) || resolveable) {
            results.exprs.unshift(
            t__namespace.expressionStatement(
            t__namespace.callExpression(t__namespace.memberExpression(elem, t__namespace.identifier("addEventListener")), [
            t__namespace.stringLiteral(ev),
            handler])));



          } else {
            results.exprs.unshift(
            t__namespace.expressionStatement(
            t__namespace.callExpression(
            registerImportMethod(
            path,
            "addEventListener",
            getRendererConfig(path, "dom").moduleName),

            [elem, t__namespace.stringLiteral(ev), handler])));



          }
        }
      } else if (
      config.effectWrapper && (
      isDynamic(attribute.get("value").get("expression"), {
        checkMember: true
      }) ||
      (key === "classList" || key === "style") &&
      !attribute.get("value").get("expression").evaluate().confident &&
      !hasStaticMarker(value, path)))
      {
        /*
          Following code doesn't repect static marker `@once`.
          https://github.com/ryansolid/dom-expressions/pull/438
          ||
          (
              (
                  key === "classList" || key === "style") &&
                  !attribute.get("value").get("expression").evaluate().confident
              )
          )
         */

        let nextElem = elem;
        if (key === "value" || key === "checked") {
          const effectWrapperId = registerImportMethod(path, config.effectWrapper);
          results.postExprs.push(
          t__namespace.expressionStatement(
          t__namespace.callExpression(effectWrapperId, [
          t__namespace.arrowFunctionExpression(
          [],
          setAttr$2(path, elem, key, value.expression, {
            tagName,
            isSVG,
            isCE
          }))])));




          return;
        }
        if (key === "textContent") {
          nextElem = attribute.scope.generateUidIdentifier("el$");
          children = t__namespace.jsxText(" ");
          children.extra = { raw: " ", rawValue: " " };
          results.declarations.push(
          t__namespace.variableDeclarator(nextElem, t__namespace.memberExpression(elem, t__namespace.identifier("firstChild"))));

        }
        results.dynamics.push({
          elem: nextElem,
          key,
          value: value.expression,
          isSVG,
          isCE,
          tagName
        });
      } else if (key.slice(0, 5) === "attr:") {
        if (t__namespace.isJSXExpressionContainer(value)) value = value.expression;

        if (t__namespace.isStringLiteral(value) || t__namespace.isNumericLiteral(value)) {
          // inlined  "attr:"
          inlineAttributeOnTemplate(isSVG, key.slice(5), results, value);
        } else {
          // dynamic "attr:"
          results.exprs.push(
          t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value, { isSVG, isCE, tagName })));

        }
      } else if (key.slice(0, 5) === "bool:") {
        // inline it on the template when possible
        let content = value;

        if (t__namespace.isJSXExpressionContainer(content)) content = content.expression;

        function addBoolAttribute() {
          results.template += `${needsSpacing ? " " : ""}${key.slice(5)}`;
          needsSpacing = true;
        }

        switch (content.type) {
          case "StringLiteral":{
              if (content.value.length && content.value !== "0") {
                addBoolAttribute();
              }
              return;
            }
          case "NullLiteral":{
              return;
            }
          case "BooleanLiteral":{
              if (content.value) {
                addBoolAttribute();
              }
              return;
            }
          case "Identifier":{
              if (content.name === "undefined") {
                return;
              }
              break;
            }}


        // when not possible to inline it in the template
        results.exprs.push(
        t__namespace.expressionStatement(
        setAttr$2(
        attribute,
        elem,
        key,
        t__namespace.isJSXExpressionContainer(value) ? value.expression : value,
        { isSVG, isCE, tagName })));



      } else {
        results.exprs.push(
        t__namespace.expressionStatement(
        setAttr$2(attribute, elem, key, value.expression, { isSVG, isCE, tagName })));


      }
    } else {
      if (config.hydratable && key === "$ServerOnly") {
        results.skipTemplate = true;
        return;
      }
      if (t__namespace.isJSXExpressionContainer(value)) value = value.expression;

      // properties
      key = Aliases[key] || key;
      if (value && ChildProperties.has(key)) {
        results.exprs.push(
        t__namespace.expressionStatement(setAttr$2(attribute, elem, key, value, { isSVG, isCE, tagName })));

      } else {
        inlineAttributeOnTemplate(isSVG, key, results, value);
      }
    }
  });
  if (!hasChildren && children) {
    path.node.children.push(children);
  }
  if (spreadExpr) results.exprs.push(spreadExpr);

  results.hasHydratableEvent = results.hasHydratableEvent || hasHydratableEvent;
}

function findLastElement(children, hydratable) {
  let lastElement = -1,
    tagName;
  for (let i = children.length - 1; i >= 0; i--) {
    const node = children[i].node;
    if (
    hydratable ||
    t__namespace.isJSXText(node) ||
    getStaticExpression(children[i]) !== false ||
    t__namespace.isJSXElement(node) && (tagName = getTagName(node)) && !isComponent(tagName))
    {
      lastElement = i;
      break;
    }
  }
  return lastElement;
}

function transformChildren$2(path, results, config) {
  let tempPath = results.id && results.id.name,
    tagName = getTagName(path.node),
    nextPlaceholder,
    childPostExprs = [],
    i = 0;
  const filteredChildren = filterChildren(path.get("children")),
    lastElement = findLastElement(filteredChildren, config.hydratable),
    childNodes = filteredChildren.reduce((memo, child, index) => {
      if (child.isJSXFragment()) {
        throw new Error(
        `Fragments can only be used top level in JSX. Not used under a <${tagName}>.`);

      }
      const transformed = transformNode(child, {
        toBeClosed: results.toBeClosed,
        lastElement: index === lastElement,
        skipId: !results.id || !detectExpressions(filteredChildren, index, config)
      });
      if (!transformed) return memo;
      const i = memo.length;
      if (transformed.text && i && memo[i - 1].text) {
        memo[i - 1].template += transformed.template;
        memo[i - 1].templateWithClosingTags +=
        transformed.templateWithClosingTags || transformed.template;
      } else memo.push(transformed);
      return memo;
    }, []);

  childNodes.forEach((child, index) => {
    if (!child) return;
    if (child.tagName && child.renderer !== "dom") {
      throw new Error(`<${child.tagName}> is not supported in <${tagName}>.
      Wrap the usage with a component that would render this element, eg. Canvas`);
    }

    results.template += child.template;
    results.templateWithClosingTags += child.templateWithClosingTags || child.template;
    results.isImportNode = results.isImportNode || child.isImportNode;

    if (child.id) {
      if (child.tagName === "head") {
        if (config.hydratable) {
          const createComponent = registerImportMethod(
          path,
          "createComponent",
          getRendererConfig(path, "dom").moduleName);

          const NoHydration = registerImportMethod(
          path,
          "NoHydration",
          getRendererConfig(path, "dom").moduleName);

          results.exprs.push(
          t__namespace.expressionStatement(
          t__namespace.callExpression(createComponent, [NoHydration, t__namespace.objectExpression([])])));


        }
        return;
      }

      let getNextMatch;
      if (config.hydratable && tagName === "html") {
        getNextMatch = registerImportMethod(
        path,
        "getNextMatch",
        getRendererConfig(path, "dom").moduleName);

      }
      const walk = t__namespace.memberExpression(
      t__namespace.identifier(tempPath),
      t__namespace.identifier(i === 0 ? "firstChild" : "nextSibling"));

      results.declarations.push(
      t__namespace.variableDeclarator(
      child.id,
      config.hydratable && tagName === "html" ?
      t__namespace.callExpression(getNextMatch, [walk, t__namespace.stringLiteral(child.tagName)]) :
      walk));


      results.declarations.push(...child.declarations);
      results.exprs.push(...child.exprs);
      results.dynamics.push(...child.dynamics);
      childPostExprs.push(...child.postExprs);
      results.hasHydratableEvent = results.hasHydratableEvent || child.hasHydratableEvent;
      results.hasCustomElement = results.hasCustomElement || child.hasCustomElement;
      results.isImportNode = results.isImportNode || child.isImportNode;
      tempPath = child.id.name;
      nextPlaceholder = null;
      i++;
    } else if (child.exprs.length) {
      let insert = registerImportMethod(path, "insert", getRendererConfig(path, "dom").moduleName);
      const multi = checkLength(filteredChildren),
        markers = config.hydratable && multi;
      // boxed by textNodes
      if (markers || wrappedByText(childNodes, index)) {
        let exprId, contentId;
        if (markers) tempPath = createPlaceholder(path, results, tempPath, i++, "$")[0].name;
        if (nextPlaceholder) {
          exprId = nextPlaceholder;
        } else {
          [exprId, contentId] = createPlaceholder(path, results, tempPath, i++, markers ? "/" : "");
        }
        if (!markers) nextPlaceholder = exprId;
        results.exprs.push(
        t__namespace.expressionStatement(
        t__namespace.callExpression(
        insert,
        contentId ?
        [results.id, child.exprs[0], exprId, contentId] :
        [results.id, child.exprs[0], exprId])));



        tempPath = exprId.name;
      } else if (multi) {
        results.exprs.push(
        t__namespace.expressionStatement(
        t__namespace.callExpression(insert, [
        results.id,
        child.exprs[0],
        nextChild$1(childNodes, index) || t__namespace.nullLiteral()])));



      } else {
        results.exprs.push(
        t__namespace.expressionStatement(t__namespace.callExpression(insert, [results.id, child.exprs[0]])));

      }
    } else nextPlaceholder = null;
  });
  results.postExprs.unshift(...childPostExprs);
}

function createPlaceholder(path, results, tempPath, i, char) {
  const exprId = path.scope.generateUidIdentifier("el$"),
    config = getConfig(path);
  let contentId;
  results.template += `<!${char}>`;
  results.templateWithClosingTags += `<!${char}>`;
  if (config.hydratable && char === "/") {
    contentId = path.scope.generateUidIdentifier("co$");
    results.declarations.push(
    t__namespace.variableDeclarator(
    t__namespace.arrayPattern([exprId, contentId]),
    t__namespace.callExpression(
    registerImportMethod(path, "getNextMarker", getRendererConfig(path, "dom").moduleName),
    [t__namespace.memberExpression(t__namespace.identifier(tempPath), t__namespace.identifier("nextSibling"))])));



  } else
  results.declarations.push(
  t__namespace.variableDeclarator(
  exprId,
  t__namespace.memberExpression(
  t__namespace.identifier(tempPath),
  t__namespace.identifier(i === 0 ? "firstChild" : "nextSibling"))));



  return [exprId, contentId];
}

function nextChild$1(children, index) {
  return children[index + 1] && (children[index + 1].id || nextChild$1(children, index + 1));
}

// reduce unnecessary refs
function detectExpressions(children, index, config) {
  if (children[index - 1]) {
    const node = children[index - 1].node;
    if (
    t__namespace.isJSXExpressionContainer(node) &&
    !t__namespace.isJSXEmptyExpression(node.expression) &&
    getStaticExpression(children[index - 1]) === false)

    return true;
    let tagName;
    if (t__namespace.isJSXElement(node) && (tagName = getTagName(node)) && isComponent(tagName)) return true;
  }
  for (let i = index; i < children.length; i++) {
    const child = children[i].node;
    if (t__namespace.isJSXExpressionContainer(child)) {
      if (!t__namespace.isJSXEmptyExpression(child.expression) && getStaticExpression(children[i]) === false)
      return true;
    } else if (t__namespace.isJSXElement(child)) {
      const tagName = getTagName(child);
      if (isComponent(tagName)) return true;
      if (
      config.contextToCustomElements && (
      tagName === "slot" ||
      tagName.indexOf("-") > -1 ||
      child.openingElement.attributes.some((a) => a.name?.name === "is")))

      return true;
      if (
      child.openingElement.attributes.some(
      (attr) =>
      t__namespace.isJSXSpreadAttribute(attr) ||
      ["textContent", "innerHTML", "innerText"].includes(attr.name.name) ||
      attr.name.namespace && (
      attr.name.namespace.name === "use" || attr.name.namespace.name === "prop") ||
      t__namespace.isJSXExpressionContainer(attr.value) &&
      !(
      t__namespace.isStringLiteral(attr.value.expression) ||
      t__namespace.isNumericLiteral(attr.value.expression))))



      return true;
      const nextChildren = filterChildren(children[i].get("children"));
      if (nextChildren.length) if (detectExpressions(nextChildren, 0, config)) return true;
    }
  }
}

function contextToCustomElement(path, results) {
  results.exprs.push(
  t__namespace.expressionStatement(
  t__namespace.assignmentExpression(
  "=",
  t__namespace.memberExpression(results.id, t__namespace.identifier("_$owner")),
  t__namespace.callExpression(
  registerImportMethod(path, "getOwner", getRendererConfig(path, "dom").moduleName),
  []))));




}

function processSpreads$1(path, attributes, { elem, isSVG, hasChildren, wrapConditionals }) {
  const config = getConfig(path);
  // TODO: skip but collect the names of any properties after the last spread to not overwrite them
  const filteredAttributes = [];
  const spreadArgs = [];
  let runningObject = [];
  let dynamicSpread = false;
  let firstSpread = false;
  attributes.forEach((attribute) => {
    const node = attribute.node;
    const key =
    !t__namespace.isJSXSpreadAttribute(node) && (
    t__namespace.isJSXNamespacedName(node.name) ?
    `${node.name.namespace.name}:${node.name.name.name}` :
    node.name.name);
    if (t__namespace.isJSXSpreadAttribute(node)) {
      const isStatic =
      node.innerComments &&
      node.innerComments[0] &&
      node.innerComments[0].value.trim() === config.staticMarker;

      firstSpread = true;
      if (runningObject.length) {
        spreadArgs.push(t__namespace.objectExpression(runningObject));
        runningObject = [];
      }

      const s =
      isDynamic(attribute.get("argument"), {
        checkMember: true
      }) && (dynamicSpread = true) ?
      t__namespace.isCallExpression(node.argument) &&
      !node.argument.arguments.length &&
      !t__namespace.isCallExpression(node.argument.callee) &&
      !t__namespace.isMemberExpression(node.argument.callee) ?
      node.argument.callee :
      t__namespace.arrowFunctionExpression([], node.argument) :
      node.argument;

      spreadArgs.push(isStatic ? t__namespace.objectExpression([t__namespace.spreadElement(s)]) : s);
    } else if (
    (firstSpread ||
    t__namespace.isJSXExpressionContainer(node.value) &&
    isDynamic(attribute.get("value").get("expression"), { checkMember: true })) &&
    canNativeSpread(key, { checkNameSpaces: true }))
    {
      const isContainer = t__namespace.isJSXExpressionContainer(node.value);
      const dynamic =
      isContainer && isDynamic(attribute.get("value").get("expression"), { checkMember: true });
      if (dynamic) {
        const id = convertJSXIdentifier(node.name);
        let expr =
        wrapConditionals && (
        t__namespace.isLogicalExpression(node.value.expression) ||
        t__namespace.isConditionalExpression(node.value.expression)) ?
        transformCondition(attribute.get("value").get("expression"), true) :
        t__namespace.arrowFunctionExpression([], node.value.expression);
        runningObject.push(
        t__namespace.objectMethod(
        "get",
        id,
        [],
        t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
        !t__namespace.isValidIdentifier(key)));


      } else {
        runningObject.push(
        t__namespace.objectProperty(
        t__namespace.stringLiteral(key),
        isContainer ?
        node.value.expression :
        node.value || (Properties.has(key) ? t__namespace.booleanLiteral(true) : t__namespace.stringLiteral(""))));


      }
    } else filteredAttributes.push(attribute);
  });

  if (runningObject.length) {
    spreadArgs.push(t__namespace.objectExpression(runningObject));
  }

  const props =
  spreadArgs.length === 1 && !dynamicSpread ?
  spreadArgs[0] :
  t__namespace.callExpression(registerImportMethod(path, "mergeProps"), spreadArgs);

  return [
  filteredAttributes,
  t__namespace.expressionStatement(
  t__namespace.callExpression(
  registerImportMethod(path, "spread", getRendererConfig(path, "dom").moduleName),
  [elem, props, t__namespace.booleanLiteral(isSVG), t__namespace.booleanLiteral(hasChildren)]))];



}

function createTemplate$2(path, result, wrap) {
  const config = getConfig(path);
  if (result.id) {
    registerTemplate(path, result);
    if (
    !(result.exprs.length || result.dynamics.length || result.postExprs.length) &&
    result.decl.declarations.length === 1)
    {
      return result.decl.declarations[0].init;
    } else {
      return t__namespace.callExpression(
      t__namespace.arrowFunctionExpression(
      [],
      t__namespace.blockStatement([
      result.decl,
      ...result.exprs.concat(
      wrapDynamics$1(path, result.dynamics) || [],
      result.postExprs || []),

      t__namespace.returnStatement(result.id)])),


      []);

    }
  }
  if (wrap && result.dynamic && config.memoWrapper) {
    return t__namespace.callExpression(registerImportMethod(path, config.memoWrapper), [result.exprs[0]]);
  }
  return result.exprs[0];
}

function appendTemplates$1(path, templates) {
  const declarators = templates.map((template) => {
    const tmpl = {
      cooked: template.template,
      raw: escapeStringForTemplate(template.template)
    };

    const shouldUseImportNode = template.isCE || template.isImportNode;
    const isMathML =
    /^<(math|annotation|annotation-xml|maction|math|merror|mfrac|mi|mmultiscripts|mn|mo|mover|mpadded|mphantom|mprescripts|mroot|mrow|ms|mspace|msqrt|mstyle|msub|msubsup|msup|mtable|mtd|mtext|mtr|munder|munderover|semantics|menclose|mfenced)(\s|>)/.test(
    template.template);


    return t__namespace.variableDeclarator(
    template.id,
    t__namespace.addComment(
    t__namespace.callExpression(
    registerImportMethod(path, "template", getRendererConfig(path, "dom").moduleName),
    [t__namespace.templateLiteral([t__namespace.templateElement(tmpl, true)], [])].concat(
    template.isSVG || shouldUseImportNode || isMathML ?
    [
    t__namespace.booleanLiteral(!!shouldUseImportNode),
    t__namespace.booleanLiteral(template.isSVG),
    t__namespace.booleanLiteral(isMathML)] :

    [])),


    "leading",
    "#__PURE__"));


  });
  path.node.body.unshift(t__namespace.variableDeclaration("var", declarators));
}

function registerTemplate(path, results) {
  const { hydratable } = getConfig(path);
  let decl;
  if (results.template.length) {
    let templateDef, templateId;
    if (!results.skipTemplate) {
      const templates =
      path.scope.getProgramParent().data.templates || (
      path.scope.getProgramParent().data.templates = []);
      if (templateDef = templates.find((t) => t.template === results.template)) {
        templateId = templateDef.id;
      } else {
        templateId = path.scope.generateUidIdentifier("tmpl$");
        templates.push({
          id: templateId,
          template: results.template,
          templateWithClosingTags: results.templateWithClosingTags,
          isSVG: results.isSVG,
          isCE: results.hasCustomElement,
          isImportNode: results.isImportNode,
          renderer: "dom"
        });
      }
    }
    decl = t__namespace.variableDeclarator(
    results.id,
    hydratable ?
    t__namespace.callExpression(
    registerImportMethod(path, "getNextElement", getRendererConfig(path, "dom").moduleName),
    templateId ? [templateId] : []) :

    t__namespace.callExpression(templateId, []));

  }
  results.declarations.unshift(decl);
  results.decl = t__namespace.variableDeclaration("var", results.declarations);
}

function wrapDynamics$1(path, dynamics) {
  if (!dynamics.length) return;
  const config = getConfig(path);

  const effectWrapperId = registerImportMethod(path, config.effectWrapper);

  if (dynamics.length === 1) {
    let dynamicStyle;
    const prevValue =
    dynamics[0].key === "classList" ||
    dynamics[0].key === "style" || (
    dynamicStyle = dynamics[0].key.startsWith("style:")) ?
    t__namespace.identifier("_$p") :
    undefined;
    if (dynamicStyle) {
      dynamics[0].value = t__namespace.assignmentExpression("=", prevValue, dynamics[0].value);
    } else if (
    dynamics[0].key.startsWith("class:") &&
    !t__namespace.isBooleanLiteral(dynamics[0].value) &&
    !t__namespace.isUnaryExpression(dynamics[0].value))
    {
      dynamics[0].value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", dynamics[0].value));
    }

    return t__namespace.expressionStatement(
    t__namespace.callExpression(effectWrapperId, [
    t__namespace.arrowFunctionExpression(
    prevValue ? [prevValue] : [],
    setAttr$2(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
      isSVG: dynamics[0].isSVG,
      isCE: dynamics[0].isCE,
      tagName: dynamics[0].tagName,
      dynamic: true,
      prevId: prevValue
    }))]));



  }

  const prevId = t__namespace.identifier("_p$");

  /** @type {t.VariableDeclarator[]} */
  const declarations = [];
  /** @type {t.ExpressionStatement[]} */
  const statements = [];
  /** @type {t.Identifier[]} */
  const properties = [];

  dynamics.forEach(({ elem, key, value, isSVG, isCE, tagName }, index) => {
    const varIdent = path.scope.generateUidIdentifier("v$");

    const propIdent = t__namespace.identifier(getNumberedId(index));
    const propMember = t__namespace.memberExpression(prevId, propIdent);

    if (key.startsWith("class:") && !t__namespace.isBooleanLiteral(value) && !t__namespace.isUnaryExpression(value)) {
      value = t__namespace.unaryExpression("!", t__namespace.unaryExpression("!", value));
    }

    properties.push(propIdent);
    declarations.push(t__namespace.variableDeclarator(varIdent, value));

    if (key === "classList" || key === "style") {
      statements.push(
      t__namespace.expressionStatement(
      t__namespace.assignmentExpression(
      "=",
      propMember,
      setAttr$2(path, elem, key, varIdent, {
        isSVG,
        isCE,
        tagName,
        dynamic: true,
        prevId: propMember
      }))));



    } else {
      const prev = key.startsWith("style:") ? varIdent : undefined;
      statements.push(
      t__namespace.expressionStatement(
      t__namespace.logicalExpression(
      "&&",
      t__namespace.binaryExpression("!==", varIdent, propMember),
      setAttr$2(path, elem, key, t__namespace.assignmentExpression("=", propMember, varIdent), {
        isSVG,
        isCE,
        tagName,
        dynamic: true,
        prevId: prev
      }))));



    }
  });

  return t__namespace.expressionStatement(
  t__namespace.callExpression(effectWrapperId, [
  t__namespace.arrowFunctionExpression(
  [prevId],
  t__namespace.blockStatement([
  t__namespace.variableDeclaration("var", declarations),
  ...statements,
  t__namespace.returnStatement(prevId)])),


  t__namespace.objectExpression(properties.map((id) => t__namespace.objectProperty(id, t__namespace.identifier("undefined"))))]));


}

function createTemplate$1(path, result) {
  if (!result.template) {
    return result.exprs[0];
  }

  let template, id;

  if (!Array.isArray(result.template)) {
    template = t__namespace.stringLiteral(result.template);
  } else if (result.template.length === 1) {
    template = t__namespace.stringLiteral(result.template[0]);
  } else {
    const strings = result.template.map((tmpl) => t__namespace.stringLiteral(tmpl));
    template = t__namespace.arrayExpression(strings);
  }

  const templates =
  path.scope.getProgramParent().data.templates || (
  path.scope.getProgramParent().data.templates = []);
  const found = templates.find((tmp) => {
    if (t__namespace.isArrayExpression(tmp.template) && t__namespace.isArrayExpression(template)) {
      return tmp.template.elements.every(
      (el, i) => template.elements[i] && el.value === template.elements[i].value);

    }
    return tmp.template.value === template.value;
  });
  if (!found) {
    id = path.scope.generateUidIdentifier("tmpl$");
    templates.push({
      id,
      template,
      templateWithClosingTags: template,
      renderer: "ssr"
    });
  } else id = found.id;

  if (result.wontEscape) {
    if (!Array.isArray(result.template) || result.template.length === 1) return id;else
    if (
    Array.isArray(result.template) &&
    result.template.length === 2 &&
    result.templateValues[0].type === "CallExpression" &&
    result.templateValues[0].callee.name === "_$ssrHydrationKey")
    {
      // remove unnecessary ssr call when only hydration key is used
      return t__namespace.binaryExpression(
      "+",
      t__namespace.binaryExpression(
      "+",
      t__namespace.memberExpression(id, t__namespace.numericLiteral(0), true),
      result.templateValues[0]),

      t__namespace.memberExpression(id, t__namespace.numericLiteral(1), true));

    }
  }
  return t__namespace.callExpression(
  registerImportMethod(path, "ssr"),
  Array.isArray(result.template) && result.template.length > 1 ?
  [id, ...result.templateValues] :
  [id]);

}

function appendTemplates(path, templates) {
  const declarators = templates.map((template) => {
    return t__namespace.variableDeclarator(template.id, template.template);
  });
  path.node.body.unshift(t__namespace.variableDeclaration("var", declarators));
}

function appendToTemplate(template, value) {
  let array;
  if (Array.isArray(value)) {
    [value, ...array] = value;
  }
  template[template.length - 1] += value;
  if (array && array.length) template.push.apply(template, array);
}

function transformElement$2(path, info) {
  path.
  get("openingElement").
  get("attributes").
  forEach((attr) => {
    evaluateAndInline(attr.node.value, attr.get("value"));
  });

  const config = getConfig(path);
  const tagName = getTagName(path.node);
  if (tagName === "script" || tagName === "style") path.doNotEscape = true;

  // contains spread attributes
  if (path.node.openingElement.attributes.some((a) => t__namespace.isJSXSpreadAttribute(a)))
  return createElement(path, { ...info, ...config });

  const voidTag = VoidElements.indexOf(tagName) > -1,
    results = {
      template: [`<${tagName}`],
      templateValues: [],
      declarations: [],
      exprs: [],
      dynamics: [],
      tagName,
      wontEscape: path.node.wontEscape,
      renderer: "ssr"
    };

  if (info.topLevel && config.hydratable) {
    if (tagName === "head") {
      registerImportMethod(path, "NoHydration");
      registerImportMethod(path, "createComponent");
      const child = transformElement$2(path, { ...info, topLevel: false });
      results.template = "";
      results.templateWithClosingTags = "";
      results.exprs.push(
      t__namespace.callExpression(t__namespace.identifier("_$createComponent"), [
      t__namespace.identifier("_$NoHydration"),
      t__namespace.objectExpression([
      t__namespace.objectMethod(
      "get",
      t__namespace.identifier("children"),
      [],
      t__namespace.blockStatement([t__namespace.returnStatement(createTemplate$1(path, child))]))])]));




      return results;
    }
    results.template.push("");
    results.templateValues.push(
    t__namespace.callExpression(registerImportMethod(path, "ssrHydrationKey"), []));

  }
  transformAttributes$1(path, results, { ...config, ...info });
  appendToTemplate(results.template, ">");
  if (!voidTag) {
    transformChildren$1(path, results, { ...config, ...info });
    appendToTemplate(results.template, `</${tagName}>`);
  }
  return results;
}

function toAttribute(key, isSVG) {
  key = Aliases[key] || key;
  !isSVG && (key = key.toLowerCase());
  return key;
}

function setAttr$1(attribute, results, name, value, isSVG) {
  // strip out namespaces for now, everything at this point is an attribute
  let parts;
  if ((parts = name.split(":")) && parts[1] && reservedNameSpaces.has(parts[0])) {
    name = parts[1];
    parts[0];
  }

  name = toAttribute(name, isSVG);
  const attr = t__namespace.callExpression(registerImportMethod(attribute, "ssrAttribute"), [
  t__namespace.stringLiteral(name),
  value,
  t__namespace.booleanLiteral(false)]);

  if (results.template[results.template.length - 1].length) {
    results.template.push("");
    results.templateValues.push(attr);
  } else {
    const last = results.templateValues.length - 1;
    results.templateValues[last] = t__namespace.binaryExpression("+", results.templateValues[last], attr);
  }
}

function escapeExpression(path, expression, attr, escapeLiterals) {
  if (
  t__namespace.isStringLiteral(expression) ||
  t__namespace.isNumericLiteral(expression) ||
  t__namespace.isTemplateLiteral(expression) && expression.expressions.length === 0)
  {
    if (escapeLiterals) {
      if (t__namespace.isStringLiteral(expression)) return t__namespace.stringLiteral(escapeHTML(expression.value, attr));else
      if (t__namespace.isTemplateLiteral(expression))
      return t__namespace.stringLiteral(escapeHTML(expression.quasis[0].value.raw, attr));
    }
    return expression;
  } else if (t__namespace.isFunction(expression)) {
    if (t__namespace.isBlockStatement(expression.body)) {
      expression.body.body = expression.body.body.map((e) => {
        if (t__namespace.isReturnStatement(e))
        e.argument = escapeExpression(path, e.argument, attr, escapeLiterals);
        return e;
      });
    } else expression.body = escapeExpression(path, expression.body, attr, escapeLiterals);
    return expression;
  } else if (t__namespace.isTemplateLiteral(expression)) {
    expression.expressions = expression.expressions.map((e) =>
    escapeExpression(path, e, attr, escapeLiterals));

    return expression;
  } else if (t__namespace.isUnaryExpression(expression)) {
    return expression;
  } else if (t__namespace.isBinaryExpression(expression)) {
    expression.left = escapeExpression(path, expression.left, attr, escapeLiterals);
    expression.right = escapeExpression(path, expression.right, attr, escapeLiterals);
    return expression;
  } else if (t__namespace.isConditionalExpression(expression)) {
    expression.consequent = escapeExpression(path, expression.consequent, attr, escapeLiterals);
    expression.alternate = escapeExpression(path, expression.alternate, attr, escapeLiterals);
    return expression;
  } else if (t__namespace.isLogicalExpression(expression)) {
    // Preserve the old short-circuit shape for && while still escaping the
    // selected result of || and ?? as a whole.
    if (expression.operator === "&&") {
      expression.right = escapeExpression(path, expression.right, attr, escapeLiterals);
      return expression;
    }
  } else if (t__namespace.isCallExpression(expression) && t__namespace.isFunction(expression.callee)) {
    if (t__namespace.isBlockStatement(expression.callee.body)) {
      expression.callee.body.body = expression.callee.body.body.map((e) => {
        if (t__namespace.isReturnStatement(e))
        e.argument = escapeExpression(path, e.argument, attr, escapeLiterals);
        return e;
      });
    } else
    expression.callee.body = escapeExpression(path, expression.callee.body, attr, escapeLiterals);
    return expression;
  } else if (t__namespace.isJSXElement(expression) && !isComponent(getTagName(expression))) {
    expression.wontEscape = true;
    return expression;
  }

  return t__namespace.callExpression(
  registerImportMethod(path, "escape"),
  [expression].concat(attr ? [t__namespace.booleanLiteral(true)] : []));

}

function transformToObject(attrName, attributes, selectedAttributes) {
  const properties = [];
  const existingAttribute = attributes.find((a) => a.node.name.name === attrName);
  for (let i = 0; i < selectedAttributes.length; i++) {
    const attr = selectedAttributes[i].node;
    const computed = !t__namespace.isValidIdentifier(attr.name.name.name);
    if (!computed) {
      attr.name.name.type = "Identifier";
    }
    properties.push(
    t__namespace.objectProperty(
    computed ? t__namespace.stringLiteral(attr.name.name.name) : attr.name.name,
    t__namespace.isJSXExpressionContainer(attr.value) ? attr.value.expression : attr.value));


    (existingAttribute || i) && attributes.splice(selectedAttributes[i].key, 1);
  }
  if (
  existingAttribute &&
  t__namespace.isJSXExpressionContainer(existingAttribute.node.value) &&
  t__namespace.isObjectExpression(existingAttribute.node.value.expression))
  {
    existingAttribute.node.value.expression.properties.push(...properties);
  } else {
    selectedAttributes[0].node = t__namespace.jsxAttribute(
    t__namespace.jsxIdentifier(attrName),
    t__namespace.jsxExpressionContainer(t__namespace.objectExpression(properties)));

  }
}

function normalizeAttributes(path) {
  const attributes = path.get("openingElement").get("attributes"),
    styleAttributes = attributes.filter(
    (a) => t__namespace.isJSXNamespacedName(a.node.name) && a.node.name.namespace.name === "style"),

    classNamespaceAttributes = attributes.filter(
    (a) => t__namespace.isJSXNamespacedName(a.node.name) && a.node.name.namespace.name === "class");

  if (classNamespaceAttributes.length)
  transformToObject("classList", attributes, classNamespaceAttributes);
  const classAttributes = attributes.filter(
  (a) =>
  a.node.name && (
  a.node.name.name === "class" ||
  a.node.name.name === "className" ||
  a.node.name.name === "classList"));

  // combine class propertoes
  if (classAttributes.length > 1) {
    const first = classAttributes[0].node,
      values = [],
      quasis = [t__namespace.templateElement({ raw: "" })];
    for (let i = 0; i < classAttributes.length; i++) {
      const attr = classAttributes[i].node,
        isLast = i === classAttributes.length - 1;
      if (!t__namespace.isJSXExpressionContainer(attr.value)) {
        const prev = quasis.pop();
        quasis.push(
        t__namespace.templateElement({
          raw: (prev ? prev.value.raw : "") + `${attr.value.value}` + (isLast ? "" : " ")
        }));

      } else {
        let expr = attr.value.expression;
        if (attr.name.name === "classList") {
          if (t__namespace.isObjectExpression(expr) && !expr.properties.some((p) => t__namespace.isSpreadElement(p))) {
            transformClasslistObject(path, expr, values, quasis);
            if (!isLast) quasis[quasis.length - 1].value.raw += " ";
            i && attributes.splice(attributes.indexOf(classAttributes[i]), 1);
            continue;
          }
          expr = t__namespace.callExpression(registerImportMethod(path, "ssrClassList"), [expr]);
        }
        values.push(t__namespace.logicalExpression("||", expr, t__namespace.stringLiteral("")));
        quasis.push(t__namespace.templateElement({ raw: isLast ? "" : " " }));
      }
      i && attributes.splice(attributes.indexOf(classAttributes[i]), 1);
    }
    first.name = t__namespace.jsxIdentifier("class");
    first.value = t__namespace.jsxExpressionContainer(t__namespace.templateLiteral(quasis, values));
  }
  if (styleAttributes.length) transformToObject("style", attributes, styleAttributes);
  return attributes;
}

function transformAttributes$1(path, results, info) {
  const tagName = getTagName(path.node),
    isSVG = SVGElements.has(tagName),
    hasChildren = path.node.children.length > 0,
    attributes = normalizeAttributes(path);
  let children;

  attributes.forEach((attribute) => {
    const node = attribute.node;

    let value = node.value,
      key = t__namespace.isJSXNamespacedName(node.name) ?
      `${node.name.namespace.name}:${node.name.name.name}` :
      node.name.name,
      reservedNameSpace =
      t__namespace.isJSXNamespacedName(node.name) && reservedNameSpaces.has(node.name.namespace.name);
    if (
    (t__namespace.isJSXNamespacedName(node.name) && reservedNameSpace || ChildProperties.has(key)) &&
    !t__namespace.isJSXExpressionContainer(value))
    {
      node.value = value = t__namespace.jsxExpressionContainer(value || t__namespace.jsxEmptyExpression());
    }

    if (
    t__namespace.isJSXExpressionContainer(value) && (
    reservedNameSpace ||
    ChildProperties.has(key) ||
    !(
    t__namespace.isStringLiteral(value.expression) ||
    t__namespace.isNumericLiteral(value.expression) ||
    t__namespace.isBooleanLiteral(value.expression))))

    {
      if (
      key === "ref" ||
      key.startsWith("use:") ||
      key.startsWith("prop:") ||
      key.startsWith("on"))

      return;else
      if (ChildProperties.has(key)) {
        if (info.hydratable && key === "textContent" && value && value.expression) {
          value.expression = t__namespace.logicalExpression("||", value.expression, t__namespace.stringLiteral(" "));
        }
        if (key === "innerHTML") path.doNotEscape = true;
        children = value;
      } else {
        let doEscape = true;

        if (key.startsWith("attr:")) key = key.replace("attr:", "");
        if (BooleanAttributes.has(key) || key.startsWith("bool:")) {
          key = key.replace("bool:", "");
          results.template.push("");
          const fn = t__namespace.callExpression(registerImportMethod(attribute, "ssrAttribute"), [
          t__namespace.stringLiteral(key),
          value.expression,
          t__namespace.booleanLiteral(true)]);

          results.templateValues.push(fn);
          return;
        }
        if (key === "style") {
          if (
          t__namespace.isJSXExpressionContainer(value) &&
          t__namespace.isObjectExpression(value.expression) &&
          !value.expression.properties.some((p) => t__namespace.isSpreadElement(p)))
          {
            if (value.expression.properties.length === 0) {
              return;
            }
            const props = value.expression.properties.map((p, i) => {
              if (p.computed) {
                return t__namespace.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
                t__namespace.binaryExpression("+", p.key, t__namespace.stringLiteral(":")),
                escapeExpression(path, p.value, true, true)]);

              }
              return t__namespace.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
              t__namespace.stringLiteral(
              (i ? ";" : "") + (t__namespace.isIdentifier(p.key) ? p.key.name : p.key.value) + ":"),

              escapeExpression(path, p.value, true, true)]);

            });

            let res = props[0];
            for (let i = 1; i < props.length; i++) {
              res = t__namespace.binaryExpression("+", res, props[i]);
            }
            value.expression = res;
          } else {
            value.expression = t__namespace.callExpression(registerImportMethod(path, "ssrStyle"), [
            value.expression]);

          }
          doEscape = false;
        }
        if (key === "classList") {
          if (
          t__namespace.isObjectExpression(value.expression) &&
          !value.expression.properties.some((p) => t__namespace.isSpreadElement(p)))
          {
            const values = [],
              quasis = [t__namespace.templateElement({ raw: "" })];
            transformClasslistObject(path, value.expression, values, quasis);
            if (!values.length) value.expression = t__namespace.stringLiteral(quasis[0].value.raw);else
            if (values.length === 1 && !quasis[0].value.raw && !quasis[1].value.raw) {
              value.expression = values[0];
            } else value.expression = t__namespace.templateLiteral(quasis, values);
          } else {
            value.expression = t__namespace.callExpression(registerImportMethod(path, "ssrClassList"), [
            value.expression]);

          }
          key = "class";
          doEscape = false;
        }
        if (doEscape) value.expression = escapeExpression(path, value.expression, true);

        if (!doEscape || t__namespace.isLiteral(value.expression)) {
          key = toAttribute(key, isSVG);
          appendToTemplate(results.template, ` ${key}="`);
          results.template.push(`"`);
          results.templateValues.push(value.expression);
        } else setAttr$1(attribute, results, key, value.expression, isSVG);
      }
    } else {
      if (key === "$ServerOnly") return;
      if (t__namespace.isJSXExpressionContainer(value)) value = value.expression;
      key = toAttribute(key, isSVG);
      const isBoolean = BooleanAttributes.has(key);
      if (isBoolean && value && value.value !== "" && !value.value) return;
      appendToTemplate(results.template, ` ${key}`);
      if (!value) return;
      let text = isBoolean ? "" : value.value;
      if (key === "style" || key === "class") {
        text = trimWhitespace(String(text));
        if (key === "style") {
          text = text.replace(/; /g, ";").replace(/: /g, ":");
        }
      }

      appendToTemplate(
      results.template,
      // `String(text)` is needed, as text.length will mess up `attr=10>` becomes `attr>` without it
      String(text) === "" ? `` : `="${escapeHTML(text, true)}"`);

    }
  });
  if (!hasChildren && children) {
    path.node.children.push(children);
  }
}

function transformClasslistObject(path, expr, values, quasis) {
  expr.properties.forEach((prop, i) => {
    const isLast = expr.properties.length - 1 === i;
    let key = prop.key;
    if (t__namespace.isIdentifier(prop.key) && !prop.computed) key = t__namespace.stringLiteral(key.name);else
    if (prop.computed) {
      key = t__namespace.callExpression(registerImportMethod(path, "escape"), [
      prop.key,
      t__namespace.booleanLiteral(true)]);

    } else key = t__namespace.stringLiteral(escapeHTML(prop.key.value));
    if (t__namespace.isBooleanLiteral(prop.value)) {
      if (prop.value.value === true) {
        if (!prop.computed) {
          const prev = quasis.pop();
          quasis.push(
          t__namespace.templateElement({
            raw:
            (prev ? prev.value.raw : "") + (i ? " " : "") + `${key.value}` + (isLast ? "" : " ")
          }));

        } else {
          values.push(key);
          quasis.push(t__namespace.templateElement({ raw: isLast ? "" : " " }));
        }
      }
    } else {
      values.push(t__namespace.conditionalExpression(prop.value, key, t__namespace.stringLiteral("")));
      quasis.push(t__namespace.templateElement({ raw: isLast ? "" : " " }));
    }
  });
}

function transformChildren$1(path, results, { hydratable }) {
  const doNotEscape = path.doNotEscape;
  const filteredChildren = filterChildren(path.get("children"));
  const multi = checkLength(filteredChildren),
    markers = hydratable && multi;
  filteredChildren.forEach((node) => {
    if (t__namespace.isJSXElement(node.node) && getTagName(node.node) === "head") {
      const child = transformNode(node, { doNotEscape, hydratable: false });
      registerImportMethod(path, "NoHydration");
      registerImportMethod(path, "createComponent");
      results.template.push("");
      results.templateValues.push(
      t__namespace.callExpression(t__namespace.identifier("_$createComponent"), [
      t__namespace.identifier("_$NoHydration"),
      t__namespace.objectExpression([
      t__namespace.objectMethod(
      "get",
      t__namespace.identifier("children"),
      [],
      t__namespace.blockStatement([t__namespace.returnStatement(createTemplate$1(path, child))]))])]));




      return;
    }
    const child = transformNode(node, { doNotEscape });
    if (!child) return;
    appendToTemplate(results.template, child.template);
    results.templateValues.push.apply(results.templateValues, child.templateValues || []);
    if (child.exprs.length) {
      if (!doNotEscape && !child.spreadElement)
      child.exprs[0] = escapeExpression(path, child.exprs[0]);

      // boxed by textNodes
      if (markers && !child.spreadElement) {
        appendToTemplate(results.template, `<!--$-->`);
        results.template.push("");
        results.templateValues.push(child.exprs[0]);
        appendToTemplate(results.template, `<!--/-->`);
      } else {
        results.template.push("");
        results.templateValues.push(child.exprs[0]);
      }
    }
  });
}

function createElement(path, { topLevel, hydratable }) {
  const tagName = getTagName(path.node),
    config = getConfig(path),
    attributes = normalizeAttributes(path),
    doNotEscape = path.doNotEscape;

  const filteredChildren = filterChildren(path.get("children")),
    multi = checkLength(filteredChildren),
    markers = hydratable && multi,
    childNodes = filteredChildren.reduce((memo, path) => {
      if (t__namespace.isJSXText(path.node)) {
        const v = htmlEntities.decode(trimWhitespace(path.node.extra.raw));
        if (v.length) memo.push(t__namespace.stringLiteral(v));
      } else {
        const child = transformNode(path);
        if (markers && child.exprs.length && !child.spreadElement)
        memo.push(t__namespace.stringLiteral("<!--$-->"));
        if (child.exprs.length && !doNotEscape && !child.spreadElement)
        child.exprs[0] = escapeExpression(path, child.exprs[0]);
        memo.push(getCreateTemplate(config, path, child)(path, child, true));
        if (markers && child.exprs.length && !child.spreadElement)
        memo.push(t__namespace.stringLiteral("<!--/-->"));
      }
      return memo;
    }, []);

  let props;
  if (attributes.length === 1) {
    props = [attributes[0].node.argument];
  } else {
    props = [];
    let runningObject = [],
      dynamicSpread = false,
      hasChildren = path.node.children.length > 0;

    attributes.forEach((attribute) => {
      const node = attribute.node;
      if (t__namespace.isJSXSpreadAttribute(node)) {
        if (runningObject.length) {
          props.push(t__namespace.objectExpression(runningObject));
          runningObject = [];
        }
        props.push(
        isDynamic(attribute.get("argument"), {
          checkMember: true
        }) && (dynamicSpread = true) ?
        t__namespace.isCallExpression(node.argument) &&
        !node.argument.arguments.length &&
        !t__namespace.isCallExpression(node.argument.callee) &&
        !t__namespace.isMemberExpression(node.argument.callee) ?
        node.argument.callee :
        t__namespace.arrowFunctionExpression([], node.argument) :
        node.argument);

      } else {
        const value = node.value || t__namespace.booleanLiteral(true),
          id = convertJSXIdentifier(node.name),
          key = t__namespace.isJSXNamespacedName(node.name) ?
          `${node.name.namespace.name}:${node.name.name.name}` :
          node.name.name;

        if (hasChildren && key === "children") return;
        if (
        key === "ref" ||
        key.startsWith("use:") ||
        key.startsWith("prop:") ||
        key.startsWith("on"))

        return;
        if (t__namespace.isJSXExpressionContainer(value)) {
          if (
          isDynamic(attribute.get("value").get("expression"), {
            checkMember: true,
            checkTags: true
          }))
          {
            let expr = t__namespace.arrowFunctionExpression([], value.expression);
            runningObject.push(
            t__namespace.objectMethod(
            "get",
            id,
            [],
            t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
            !t__namespace.isValidIdentifier(key)));


          } else runningObject.push(t__namespace.objectProperty(id, value.expression));} else
        runningObject.push(t__namespace.objectProperty(id, value));
      }
    });

    if (runningObject.length || !props.length) props.push(t__namespace.objectExpression(runningObject));

    if (props.length > 1 || dynamicSpread) {
      props = [t__namespace.callExpression(registerImportMethod(path, "mergeProps"), props)];
    }
  }

  const exprs = [
  t__namespace.callExpression(registerImportMethod(path, "ssrElement"), [
  t__namespace.stringLiteral(tagName),
  props[0],
  childNodes.length ?
  hydratable ?
  t__namespace.arrowFunctionExpression(
  [],
  childNodes.length === 1 ? childNodes[0] : t__namespace.arrayExpression(childNodes)) :

  childNodes.length === 1 ?
  childNodes[0] :
  t__namespace.arrayExpression(childNodes) :
  t__namespace.identifier("undefined"),
  t__namespace.booleanLiteral(Boolean(topLevel && config.hydratable))])];


  return { exprs, template: "", spreadElement: true };
}

function transformElement$1(path, info) {
  path.
  get("openingElement").
  get("attributes").
  forEach((attr) => {
    evaluateAndInline(attr.node.value, attr.get("value"));
  });

  let tagName = getTagName(path.node),
    results = {
      id: path.scope.generateUidIdentifier("el$"),
      declarations: [],
      exprs: [],
      dynamics: [],
      postExprs: [],
      tagName,
      renderer: "universal"
    };

  results.declarations.push(
  t__namespace.variableDeclarator(
  results.id,
  t__namespace.callExpression(
  registerImportMethod(
  path,
  "createElement",
  getRendererConfig(path, "universal").moduleName),

  [t__namespace.stringLiteral(tagName)])));




  transformAttributes(path, results);
  transformChildren(path, results);

  return results;
}

function transformAttributes(path, results) {
  let children, spreadExpr;
  let attributes = path.get("openingElement").get("attributes");
  const elem = results.id,
    hasChildren = path.node.children.length > 0,
    config = getConfig(path);

  // preprocess spreads
  if (attributes.some((attribute) => t__namespace.isJSXSpreadAttribute(attribute.node))) {
    [attributes, spreadExpr] = processSpreads(path, attributes, {
      elem,
      hasChildren,
      wrapConditionals: config.wrapConditionals
    });
    path.get("openingElement").set(
    "attributes",
    attributes.map((a) => a.node));

  }

  path.
  get("openingElement").
  get("attributes").
  forEach((attribute) => {
    const node = attribute.node;

    let value = node.value,
      key = t__namespace.isJSXNamespacedName(node.name) ?
      `${node.name.namespace.name}:${node.name.name.name}` :
      node.name.name,
      reservedNameSpace = t__namespace.isJSXNamespacedName(node.name) && node.name.namespace.name === "use";
    if (
    t__namespace.isJSXNamespacedName(node.name) &&
    reservedNameSpace &&
    !t__namespace.isJSXExpressionContainer(value))
    {
      node.value = value = t__namespace.jsxExpressionContainer(value || t__namespace.jsxEmptyExpression());
    }
    if (t__namespace.isJSXExpressionContainer(value)) {
      if (key === "ref") {
        // Normalize expressions for non-null and type-as
        while (
        t__namespace.isTSNonNullExpression(value.expression) ||
        t__namespace.isTSAsExpression(value.expression))
        {
          value.expression = value.expression.expression;
        }
        let binding,
          isConstant =
          t__namespace.isIdentifier(value.expression) && (
          binding = path.scope.getBinding(value.expression.name)) && (
          binding.kind === "const" || binding.kind === "module");
        if (!isConstant && t__namespace.isLVal(value.expression)) {
          const refIdentifier = path.scope.generateUidIdentifier("_ref$");
          results.exprs.unshift(
          t__namespace.variableDeclaration("var", [t__namespace.variableDeclarator(refIdentifier, value.expression)]),
          t__namespace.expressionStatement(
          t__namespace.conditionalExpression(
          t__namespace.binaryExpression(
          "===",
          t__namespace.unaryExpression("typeof", refIdentifier),
          t__namespace.stringLiteral("function")),

          t__namespace.callExpression(
          registerImportMethod(
          path,
          "use",
          getRendererConfig(path, "universal").moduleName),

          [refIdentifier, elem]),

          t__namespace.assignmentExpression("=", value.expression, elem))));



        } else if (isConstant || t__namespace.isFunction(value.expression)) {
          results.exprs.unshift(
          t__namespace.expressionStatement(
          t__namespace.callExpression(
          registerImportMethod(
          path,
          "use",
          getRendererConfig(path, "universal").moduleName),

          [value.expression, elem])));



        } else {
          const refIdentifier = path.scope.generateUidIdentifier("_ref$");
          results.exprs.unshift(
          t__namespace.variableDeclaration("var", [t__namespace.variableDeclarator(refIdentifier, value.expression)]),
          t__namespace.expressionStatement(
          t__namespace.logicalExpression(
          "&&",
          t__namespace.binaryExpression(
          "===",
          t__namespace.unaryExpression("typeof", refIdentifier),
          t__namespace.stringLiteral("function")),

          t__namespace.callExpression(
          registerImportMethod(
          path,
          "use",
          getRendererConfig(path, "universal").moduleName),

          [refIdentifier, elem]))));




        }
      } else if (key.startsWith("use:")) {
        // Some trick to treat JSXIdentifier as Identifier
        node.name.name.type = "Identifier";
        results.exprs.unshift(
        t__namespace.expressionStatement(
        t__namespace.callExpression(
        registerImportMethod(path, "use", getRendererConfig(path, "universal").moduleName),
        [
        node.name.name,
        elem,
        t__namespace.arrowFunctionExpression(
        [],
        t__namespace.isJSXEmptyExpression(value.expression) ?
        t__namespace.booleanLiteral(true) :
        value.expression)])));





      } else if (key === "children") {
        children = value;
      } else if (
      config.effectWrapper &&
      isDynamic(attribute.get("value").get("expression"), {
        checkMember: true
      }))
      {
        results.dynamics.push({ elem, key, value: value.expression });
      } else {
        results.exprs.push(
        t__namespace.expressionStatement(setAttr(attribute, elem, key, value.expression)));

      }
    } else {
      results.exprs.push(t__namespace.expressionStatement(setAttr(attribute, elem, key, value)));
    }
  });
  if (spreadExpr) results.exprs.push(spreadExpr);
  if (!hasChildren && children) {
    path.node.children.push(children);
  }
}

function setAttr(path, elem, name, value, { prevId } = {}) {
  if (!value) value = t__namespace.booleanLiteral(true);
  return t__namespace.callExpression(
  registerImportMethod(path, "setProp", getRendererConfig(path, "universal").moduleName),
  prevId ? [elem, t__namespace.stringLiteral(name), value, prevId] : [elem, t__namespace.stringLiteral(name), value]);

}

function transformChildren(path, results) {
  const filteredChildren = filterChildren(path.get("children")),
    multi = checkLength(filteredChildren),
    childNodes = filteredChildren.map(transformNode).reduce((memo, child) => {
      if (!child) return memo;
      const i = memo.length;
      if (child.text && i && memo[i - 1].text) {
        memo[i - 1].template += child.template;
        memo[i - 1].templateWithClosingTags += child.templateWithClosingTags || child.template;
      } else memo.push(child);
      return memo;
    }, []);

  const appends = [];
  childNodes.forEach((child, index) => {
    if (!child) return;
    if (child.tagName && child.renderer !== "universal") {
      throw new Error(`<${child.tagName}> is not supported in <${getTagName(path.node)}>.
        Wrap the usage with a component that would render this element, eg. Canvas`);
    }
    if (child.id) {
      let insertNode = registerImportMethod(
      path,
      "insertNode",
      getRendererConfig(path, "universal").moduleName);

      let insert = child.id;
      if (child.text) {
        let createTextNode = registerImportMethod(
        path,
        "createTextNode",
        getRendererConfig(path, "universal").moduleName);

        if (multi) {
          results.declarations.push(
          t__namespace.variableDeclarator(
          child.id,
          t__namespace.callExpression(createTextNode, [
          t__namespace.templateLiteral(
          [t__namespace.templateElement({ raw: escapeStringForTemplate(child.template) })],
          [])])));




        } else
        insert = t__namespace.callExpression(createTextNode, [
        t__namespace.templateLiteral(
        [t__namespace.templateElement({ raw: escapeStringForTemplate(child.template) })],
        [])]);


      }
      appends.push(t__namespace.expressionStatement(t__namespace.callExpression(insertNode, [results.id, insert])));
      results.declarations.push(...child.declarations);
      results.exprs.push(...child.exprs);
      results.dynamics.push(...child.dynamics);
    } else if (child.exprs.length) {
      let insert = registerImportMethod(
      path,
      "insert",
      getRendererConfig(path, "universal").moduleName);

      if (multi) {
        results.exprs.push(
        t__namespace.expressionStatement(
        t__namespace.callExpression(insert, [
        results.id,
        child.exprs[0],
        nextChild(childNodes, index) || t__namespace.nullLiteral()])));



      } else {
        results.exprs.push(
        t__namespace.expressionStatement(t__namespace.callExpression(insert, [results.id, child.exprs[0]])));

      }
    }
  });
  results.exprs.unshift(...appends);
}

function nextChild(children, index) {
  return children[index + 1] && (children[index + 1].id || nextChild(children, index + 1));
}

function processSpreads(path, attributes, { elem, hasChildren, wrapConditionals }) {
  // TODO: skip but collect the names of any properties after the last spread to not overwrite them
  const filteredAttributes = [];
  const spreadArgs = [];
  let runningObject = [];
  let dynamicSpread = false;
  let firstSpread = false;
  attributes.forEach((attribute) => {
    const node = attribute.node;
    const key =
    !t__namespace.isJSXSpreadAttribute(node) && (
    t__namespace.isJSXNamespacedName(node.name) ?
    `${node.name.namespace.name}:${node.name.name.name}` :
    node.name.name);
    if (t__namespace.isJSXSpreadAttribute(node)) {
      firstSpread = true;
      if (runningObject.length) {
        spreadArgs.push(t__namespace.objectExpression(runningObject));
        runningObject = [];
      }
      spreadArgs.push(
      isDynamic(attribute.get("argument"), {
        checkMember: true
      }) && (dynamicSpread = true) ?
      t__namespace.isCallExpression(node.argument) &&
      !node.argument.arguments.length &&
      !t__namespace.isCallExpression(node.argument.callee) &&
      !t__namespace.isMemberExpression(node.argument.callee) ?
      node.argument.callee :
      t__namespace.arrowFunctionExpression([], node.argument) :
      node.argument);

    } else if (
    (firstSpread ||
    t__namespace.isJSXExpressionContainer(node.value) &&
    isDynamic(attribute.get("value").get("expression"), { checkMember: true })) &&
    canNativeSpread(key, { checkNameSpaces: true }))
    {
      const isContainer = t__namespace.isJSXExpressionContainer(node.value);
      const dynamic =
      isContainer && isDynamic(attribute.get("value").get("expression"), { checkMember: true });
      if (dynamic) {
        const id = convertJSXIdentifier(node.name);
        let expr =
        wrapConditionals && (
        t__namespace.isLogicalExpression(node.value.expression) ||
        t__namespace.isConditionalExpression(node.value.expression)) ?
        transformCondition(attribute.get("value").get("expression"), true) :
        t__namespace.arrowFunctionExpression([], node.value.expression);
        runningObject.push(
        t__namespace.objectMethod(
        "get",
        id,
        [],
        t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
        !t__namespace.isValidIdentifier(key)));


      } else {
        runningObject.push(
        t__namespace.objectProperty(
        t__namespace.stringLiteral(key),
        isContainer ? node.value.expression : node.value || t__namespace.booleanLiteral(true)));


      }
    } else filteredAttributes.push(attribute);
  });

  if (runningObject.length) {
    spreadArgs.push(t__namespace.objectExpression(runningObject));
  }

  const props =
  spreadArgs.length === 1 && !dynamicSpread ?
  spreadArgs[0] :
  t__namespace.callExpression(registerImportMethod(path, "mergeProps"), spreadArgs);

  return [
  filteredAttributes,
  t__namespace.expressionStatement(
  t__namespace.callExpression(
  registerImportMethod(path, "spread", getRendererConfig(path, "universal").moduleName),
  [elem, props, t__namespace.booleanLiteral(hasChildren)]))];



}

function createTemplate(path, result, wrap) {
  const config = getConfig(path);
  if (result.id) {
    result.decl = t__namespace.variableDeclaration("var", result.declarations);
    if (
    !(result.exprs.length || result.dynamics.length || result.postExprs.length) &&
    result.decl.declarations.length === 1)
    {
      return result.decl.declarations[0].init;
    } else {
      return t__namespace.callExpression(
      t__namespace.arrowFunctionExpression(
      [],
      t__namespace.blockStatement([
      result.decl,
      ...result.exprs.concat(
      wrapDynamics(path, result.dynamics) || [],
      result.postExprs || []),

      t__namespace.returnStatement(result.id)])),


      []);

    }
  }
  if (wrap && result.dynamic && config.memoWrapper) {
    return t__namespace.callExpression(registerImportMethod(path, config.memoWrapper), [result.exprs[0]]);
  }
  return result.exprs[0];
}

function wrapDynamics(path, dynamics) {
  if (!dynamics.length) return;
  const config = getConfig(path);

  const effectWrapperId = registerImportMethod(path, config.effectWrapper);

  if (dynamics.length === 1) {
    const prevValue = t__namespace.identifier("_$p");

    return t__namespace.expressionStatement(
    t__namespace.callExpression(effectWrapperId, [
    t__namespace.arrowFunctionExpression(
    [prevValue],
    setAttr(path, dynamics[0].elem, dynamics[0].key, dynamics[0].value, {
      dynamic: true,
      prevId: prevValue
    }))]));



  }

  const prevId = t__namespace.identifier("_p$");

  /** @type {t.VariableDeclarator[]} */
  const declarations = [];
  /** @type {t.ExpressionStatement[]} */
  const statements = [];
  /** @type {t.Identifier[]} */
  const properties = [];

  dynamics.forEach(({ elem, key, value }, index) => {
    const varIdent = path.scope.generateUidIdentifier("v$");

    const propIdent = t__namespace.identifier(getNumberedId(index));
    const propMember = t__namespace.memberExpression(prevId, propIdent);

    properties.push(propIdent);
    declarations.push(t__namespace.variableDeclarator(varIdent, value));

    statements.push(
    t__namespace.expressionStatement(
    t__namespace.logicalExpression(
    "&&",
    t__namespace.binaryExpression("!==", varIdent, propMember),
    t__namespace.assignmentExpression(
    "=",
    propMember,
    setAttr(path, elem, key, varIdent, { dynamic: true, prevId: propMember })))));




  });

  return t__namespace.expressionStatement(
  t__namespace.callExpression(effectWrapperId, [
  t__namespace.arrowFunctionExpression(
  [prevId],
  t__namespace.blockStatement([
  t__namespace.variableDeclaration("var", declarations),
  ...statements,
  t__namespace.returnStatement(prevId)])),


  t__namespace.objectExpression(
  properties.map((id) => t__namespace.objectProperty(id, t__namespace.identifier("undefined"))))]));



}

function convertComponentIdentifier(node) {
  if (t__namespace.isJSXIdentifier(node)) {
    if (node.name === "this") return t__namespace.thisExpression();
    if (t__namespace.isValidIdentifier(node.name)) node.type = "Identifier";else
    return t__namespace.stringLiteral(node.name);
  } else if (t__namespace.isJSXMemberExpression(node)) {
    const prop = convertComponentIdentifier(node.property);
    const computed = t__namespace.isStringLiteral(prop);
    return t__namespace.memberExpression(convertComponentIdentifier(node.object), prop, computed);
  }

  return node;
}

function transformComponent(path) {
  let exprs = [],
    config = getConfig(path),
    tagId = convertComponentIdentifier(path.node.openingElement.name),
    props = [],
    runningObject = [],
    dynamicSpread = false,
    hasChildren = path.node.children.length > 0;

  if (config.builtIns.indexOf(tagId.name) > -1 && !path.scope.hasBinding(tagId.name)) {
    const newTagId = registerImportMethod(path, tagId.name);
    tagId.name = newTagId.name;
  }

  path.
  get("openingElement").
  get("attributes").
  forEach((attribute) => {
    const node = attribute.node;
    if (t__namespace.isJSXSpreadAttribute(node)) {
      if (runningObject.length) {
        props.push(t__namespace.objectExpression(runningObject));
        runningObject = [];
      }
      props.push(
      isDynamic(attribute.get("argument"), {
        checkMember: true
      }) && (dynamicSpread = true) ?
      t__namespace.isCallExpression(node.argument) &&
      !node.argument.arguments.length &&
      !t__namespace.isCallExpression(node.argument.callee) &&
      !t__namespace.isMemberExpression(node.argument.callee) ?
      node.argument.callee :
      t__namespace.arrowFunctionExpression([], node.argument) :
      node.argument);

    } else {
      // handle weird babel bug around HTML entities
      const value =
        (t__namespace.isStringLiteral(node.value) ? t__namespace.stringLiteral(node.value.value) : node.value) ||
        t__namespace.booleanLiteral(true),
        id = convertJSXIdentifier(node.name),
        key = id.name;
      if (hasChildren && key === "children") return;
      if (t__namespace.isJSXExpressionContainer(value)) {
        if (key === "ref") {
          if (config.generate === "ssr") return;
          // Normalize expressions for non-null and type-as
          while (
          t__namespace.isTSNonNullExpression(value.expression) ||
          t__namespace.isTSAsExpression(value.expression) ||
          t__namespace.isTSSatisfiesExpression(value.expression))
          {
            value.expression = value.expression.expression;
          }
          let binding,
            isConstant =
            t__namespace.isIdentifier(value.expression) && (
            binding = path.scope.getBinding(value.expression.name)) && (
            binding.kind === "const" || binding.kind === "module");
          if (!isConstant && t__namespace.isLVal(value.expression)) {
            const refIdentifier = path.scope.generateUidIdentifier("_ref$");
            runningObject.push(
            t__namespace.objectMethod(
            "method",
            t__namespace.identifier("ref"),
            [t__namespace.identifier("r$")],
            t__namespace.blockStatement([
            t__namespace.variableDeclaration("var", [
            t__namespace.variableDeclarator(refIdentifier, value.expression)]),

            t__namespace.expressionStatement(
            t__namespace.conditionalExpression(
            t__namespace.binaryExpression(
            "===",
            t__namespace.unaryExpression("typeof", refIdentifier),
            t__namespace.stringLiteral("function")),

            t__namespace.callExpression(refIdentifier, [t__namespace.identifier("r$")]),
            t__namespace.assignmentExpression("=", value.expression, t__namespace.identifier("r$"))))])));





          } else if (!isConstant && t__namespace.isOptionalMemberExpression(value.expression)) {
            const refIdentifier = path.scope.generateUidIdentifier("_ref$");
            runningObject.push(
            t__namespace.objectMethod(
            "method",
            t__namespace.identifier("ref"),
            [t__namespace.identifier("r$")],
            t__namespace.blockStatement([
            t__namespace.variableDeclaration("var", [
            t__namespace.variableDeclarator(refIdentifier, value.expression)]),


            t__namespace.expressionStatement(
            t__namespace.conditionalExpression(
            t__namespace.binaryExpression(
            "===",
            t__namespace.unaryExpression("typeof", refIdentifier),
            t__namespace.stringLiteral("function")),

            t__namespace.callExpression(refIdentifier, [t__namespace.identifier("r$")]),
            t__namespace.logicalExpression(
            "&&",
            t__namespace.unaryExpression(
            "!",
            t__namespace.unaryExpression("!", t__namespace.identifier(value.expression.object.name))),

            t__namespace.assignmentExpression(
            "=",
            t__namespace.memberExpression(
            t__namespace.identifier(value.expression.object.name),
            t__namespace.identifier(value.expression.property.name)),

            t__namespace.identifier("r$")))))])));







          } else if (isConstant || t__namespace.isFunction(value.expression)) {
            runningObject.push(t__namespace.objectProperty(t__namespace.identifier("ref"), value.expression));
          } else if (t__namespace.isCallExpression(value.expression)) {
            const refIdentifier = path.scope.generateUidIdentifier("_ref$");
            runningObject.push(
            t__namespace.objectMethod(
            "method",
            t__namespace.identifier("ref"),
            [t__namespace.identifier("r$")],
            t__namespace.blockStatement([
            t__namespace.variableDeclaration("var", [
            t__namespace.variableDeclarator(refIdentifier, value.expression)]),

            t__namespace.expressionStatement(
            t__namespace.logicalExpression(
            "&&",
            t__namespace.binaryExpression(
            "===",
            t__namespace.unaryExpression("typeof", refIdentifier),
            t__namespace.stringLiteral("function")),

            t__namespace.callExpression(refIdentifier, [t__namespace.identifier("r$")])))])));





          }
        } else if (
        isDynamic(attribute.get("value").get("expression"), {
          checkMember: true,
          checkTags: true
        }))
        {
          if (
          config.wrapConditionals &&
          config.generate !== "ssr" && (
          t__namespace.isLogicalExpression(value.expression) ||
          t__namespace.isConditionalExpression(value.expression)))
          {
            const expr = transformCondition(attribute.get("value").get("expression"), true);

            runningObject.push(
            t__namespace.objectMethod(
            "get",
            id,
            [],
            t__namespace.blockStatement([t__namespace.returnStatement(expr.body)]),
            !t__namespace.isValidIdentifier(key)));


          } else if (
          t__namespace.isCallExpression(value.expression) &&
          t__namespace.isArrowFunctionExpression(value.expression.callee) &&
          value.expression.callee.params.length === 0)
          {
            const callee = value.expression.callee;
            const body = t__namespace.isBlockStatement(callee.body) ?
            callee.body :
            t__namespace.blockStatement([t__namespace.returnStatement(callee.body)]);

            runningObject.push(t__namespace.objectMethod("get", id, [], body, !t__namespace.isValidIdentifier(key)));
          } else {
            runningObject.push(
            t__namespace.objectMethod(
            "get",
            id,
            [],
            t__namespace.blockStatement([t__namespace.returnStatement(value.expression)]),
            !t__namespace.isValidIdentifier(key)));


          }
        } else runningObject.push(t__namespace.objectProperty(id, value.expression));} else
      runningObject.push(t__namespace.objectProperty(id, value));
    }
  });

  const childResult = transformComponentChildren(path.get("children"), config);
  if (childResult && childResult[0]) {
    if (childResult[1]) {
      const body =
      t__namespace.isCallExpression(childResult[0]) && t__namespace.isFunction(childResult[0].arguments[0]) ?
      childResult[0].arguments[0].body :
      childResult[0].body ?
      childResult[0].body :
      childResult[0];
      runningObject.push(
      t__namespace.objectMethod(
      "get",
      t__namespace.identifier("children"),
      [],
      t__namespace.isExpression(body) ? t__namespace.blockStatement([t__namespace.returnStatement(body)]) : body));


    } else runningObject.push(t__namespace.objectProperty(t__namespace.identifier("children"), childResult[0]));
  }
  if (runningObject.length || !props.length) props.push(t__namespace.objectExpression(runningObject));

  if (props.length > 1 || dynamicSpread) {
    props = [t__namespace.callExpression(registerImportMethod(path, "mergeProps"), props)];
  }
  const componentArgs = [tagId, props[0]];
  exprs.push(t__namespace.callExpression(registerImportMethod(path, "createComponent"), componentArgs));

  // handle hoisting conditionals
  if (exprs.length > 1) {
    const ret = exprs.pop();
    exprs = [
    t__namespace.callExpression(
    t__namespace.arrowFunctionExpression([], t__namespace.blockStatement([...exprs, t__namespace.returnStatement(ret)])),
    [])];


  }
  return { exprs, template: "", component: true };
}

function transformComponentChildren(children, config) {
  const filteredChildren = filterChildren(children);
  if (!filteredChildren.length) return;
  let dynamic = false;
  let pathNodes = [];

  let transformedChildren = filteredChildren.reduce((memo, path) => {
    if (t__namespace.isJSXText(path.node)) {
      const v = htmlEntities.decode(trimWhitespace(path.node.extra.raw));
      if (v.length) {
        pathNodes.push(path.node);
        memo.push(t__namespace.stringLiteral(v));
      }
    } else {
      const child = transformNode(path, {
        topLevel: true,
        componentChild: true,
        lastElement: true
      });
      dynamic = dynamic || child.dynamic;
      if (
      config.generate === "ssr" &&
      filteredChildren.length > 1 &&
      child.dynamic &&
      t__namespace.isFunction(child.exprs[0]))
      {
        child.exprs[0] = child.exprs[0].body;
      }
      pathNodes.push(path.node);
      memo.push(getCreateTemplate(config, path, child)(path, child, filteredChildren.length > 1));
    }
    return memo;
  }, []);

  if (transformedChildren.length === 1) {
    transformedChildren = transformedChildren[0];
    if (
    !t__namespace.isJSXExpressionContainer(pathNodes[0]) &&
    !t__namespace.isJSXSpreadChild(pathNodes[0]) &&
    !t__namespace.isJSXText(pathNodes[0]))
    {
      transformedChildren =
      t__namespace.isCallExpression(transformedChildren) &&
      !transformedChildren.arguments.length &&
      !t__namespace.isIdentifier(transformedChildren.callee) ?
      transformedChildren.callee :
      t__namespace.arrowFunctionExpression([], transformedChildren);
      dynamic = true;
    }
  } else {
    transformedChildren = t__namespace.arrowFunctionExpression([], t__namespace.arrayExpression(transformedChildren));
    dynamic = true;
  }
  return [transformedChildren, dynamic];
}

function transformFragmentChildren(children, results, config) {
  const filteredChildren = filterChildren(children),
    childNodes = filteredChildren.reduce((memo, path) => {
      if (t__namespace.isJSXText(path.node)) {
        const v = htmlEntities.decode(trimWhitespace(path.node.extra.raw));
        if (v.length) memo.push(t__namespace.stringLiteral(v));
      } else {
        const child = transformNode(path, { topLevel: true, fragmentChild: true, lastElement: true });
        memo.push(getCreateTemplate(config, path, child)(path, child, true));
      }
      return memo;
    }, []);
  results.exprs.push(childNodes.length === 1 ? childNodes[0] : t__namespace.arrayExpression(childNodes));
}

function transformJSX(path, state) {
  if (state.skip) return;

  const config = getConfig(path);

  const replace = transformThis(path);
  const result = transformNode(
  path,
  t__namespace.isJSXFragment(path.node) ?
  {} :
  {
    topLevel: true,
    lastElement: true
  });


  const template = getCreateTemplate(config, path, result);

  path.replaceWith(replace(template(path, result, false)));

  path.traverse({
    enter(path) {
      if (
      path.node.leadingComments &&
      path.node.leadingComments[0] &&
      path.node.leadingComments[0].value.trim() === config.staticMarker)
      {
        path.node.leadingComments.shift();
      }
    }
  });
}

function getTargetFunctionParent(path, parent) {
  let current = path.scope.getFunctionParent();
  while (current !== parent && current.path.isArrowFunctionExpression()) {
    current = current.path.parentPath.scope.getFunctionParent();
  }
  return current;
}

function transformThis(path) {
  const parent = path.scope.getFunctionParent();
  let thisId;
  path.traverse({
    ThisExpression(path) {
      const current = getTargetFunctionParent(path, parent);
      if (current === parent) {
        thisId || (thisId = path.scope.generateUidIdentifier("self$"));
        path.replaceWith(thisId);
      }
    },
    JSXElement(path) {
      let source = path.get("openingElement").get("name");
      while (source.isJSXMemberExpression()) {
        source = source.get("object");
      }
      if (source.isJSXIdentifier() && source.node.name === "this") {
        const current = getTargetFunctionParent(path, parent);
        if (current === parent) {
          thisId || (thisId = path.scope.generateUidIdentifier("self$"));
          source.replaceWith(t__namespace.jsxIdentifier(thisId.name));

          if (path.node.closingElement) {
            path.node.closingElement.name = path.node.openingElement.name;
          }
        }
      }
    }
  });
  return (node) => {
    if (thisId) {
      if (!parent || parent.block.type === "ClassMethod") {
        const decl = t__namespace.variableDeclaration("const", [
        t__namespace.variableDeclarator(thisId, t__namespace.thisExpression())]);

        if (parent) {
          const stmt = path.getStatementParent();
          stmt.insertBefore(decl);
        } else {
          return t__namespace.callExpression(
          t__namespace.arrowFunctionExpression([], t__namespace.blockStatement([decl, t__namespace.returnStatement(node)])),
          []);

        }
      } else {
        parent.push({
          id: thisId,
          init: t__namespace.thisExpression(),
          kind: "const"
        });
      }
    }
    return node;
  };
}

function transformNode(path, info = {}) {
  const config = getConfig(path);
  const node = path.node;
  let staticValue;
  if (t__namespace.isJSXElement(node)) {
    return transformElement(config, path, info);
  } else if (t__namespace.isJSXFragment(node)) {
    let results = { template: "", declarations: [], exprs: [], dynamics: [] };
    // <><div /><Component /></>
    transformFragmentChildren(path.get("children"), results, config);
    return results;
  } else if (t__namespace.isJSXText(node) || (staticValue = getStaticExpression(path)) !== false) {
    const text =
    staticValue !== undefined ?
    info.doNotEscape ?
    staticValue.toString() :
    escapeHTML(staticValue.toString()) :
    trimWhitespace(node.extra.raw);
    if (!text.length) return null;
    const results = {
      template: text,
      declarations: [],
      exprs: [],
      dynamics: [],
      postExprs: [],
      text: true
    };
    if (!info.skipId && config.generate !== "ssr")
    results.id = path.scope.generateUidIdentifier("el$");
    return results;
  } else if (t__namespace.isJSXExpressionContainer(node)) {
    if (t__namespace.isJSXEmptyExpression(node.expression)) return null;
    if (
    !isDynamic(path.get("expression"), {
      checkMember: true,
      checkTags: !!info.componentChild,
      native: !info.componentChild
    }))
    {
      return { exprs: [node.expression], template: "" };
    }
    const expr =
    config.wrapConditionals &&
    config.generate !== "ssr" && (
    t__namespace.isLogicalExpression(node.expression) || t__namespace.isConditionalExpression(node.expression)) ?
    transformCondition(path.get("expression"), info.componentChild || info.fragmentChild) :
    !info.componentChild && (
    config.generate !== "ssr" || info.fragmentChild) &&
    t__namespace.isCallExpression(node.expression) &&
    !t__namespace.isCallExpression(node.expression.callee) &&
    !t__namespace.isMemberExpression(node.expression.callee) &&
    node.expression.arguments.length === 0 ?
    node.expression.callee :
    t__namespace.arrowFunctionExpression([], node.expression);
    return {
      exprs:
      expr.length > 1 ?
      [
      t__namespace.callExpression(
      t__namespace.arrowFunctionExpression(
      [],
      t__namespace.blockStatement([expr[0], t__namespace.returnStatement(expr[1])])),

      [])] :


      [expr],
      template: "",
      dynamic: true
    };
  } else if (t__namespace.isJSXSpreadChild(node)) {
    if (
    !isDynamic(path.get("expression"), {
      checkMember: true,
      native: !info.componentChild
    }))

    return { exprs: [node.expression], template: "" };
    const expr = t__namespace.arrowFunctionExpression([], node.expression);
    return {
      exprs: [expr],
      template: "",
      dynamic: true
    };
  }
}

function getCreateTemplate(config, path, result) {
  if (result.tagName && result.renderer === "dom" || config.generate === "dom") {
    return createTemplate$2;
  }

  if (result.renderer === "ssr" || config.generate === "ssr") {
    return createTemplate$1;
  }

  return createTemplate;
}

function transformElement(config, path, info = {}) {
  const node = path.node;
  let tagName = getTagName(node);
  // <Component ...></Component>
  if (isComponent(tagName)) return transformComponent(path);

  // <div ...></div>
  // const element = getTransformElemet(config, path, tagName);

  const tagRenderer = (config.renderers ?? []).find((renderer) =>
  renderer.elements.includes(tagName));


  if (tagRenderer?.name === "dom" || getConfig(path).generate === "dom") {
    return transformElement$3(path, info);
  }

  if (getConfig(path).generate === "ssr") {
    return transformElement$2(path, info);
  }

  return transformElement$1(path);
}

// import parse5 from "parse5";
const parse5 = require("parse5");

/** `bodyElement` will be used as a `context` (The place where we run `innerHTML`) */
const bodyElement = parse5.parse(
`<!DOCTYPE html><html><head></head><body></body></html>`
// @ts-ignore
).childNodes[1].childNodes[1];

function innerHTML(htmlFragment) {
  /** `htmlFragment` will be parsed as if it was set to the `bodyElement`'s `innerHTML` property. */
  const parsedFragment = parse5.parseFragment(bodyElement, htmlFragment);

  /** `serialize` returns back a string from the parsed nodes */
  return parse5.serialize(parsedFragment);
}

/**
 * Returns an object with information when the markup is invalid
 *
 * @param {string} html - The html string to validate
 * @returns {{
 *   html: string; // html stripped of attributives and content
 *   browser: string; // what the browser returned from evaluating `html`
 * } | null}
 */
function isInvalidMarkup(html) {
  html = html

  // normalize dom-expressions comments, so comments location are also validated
  .replaceAll("<!>", "<!---->").
  replaceAll("<!$>", "<!--$-->").
  replaceAll("<!/>", "<!--/-->")

  // replace text nodes
  // text nodes are problematic, think "doesn't" vs "doesn&#39;t"
  // we can detect if text nodes were moved by the browser when the `#text` moves

  // replace text nodes that isnt in between tags by `#text`
  .replace(/^[^<]+/, "#text").
  replace(/[^>]+$/, "#text")
  // replace text nodes in between tags by `#text`
  .replace(/>[^<]+</gi, ">#text<")

  // remove attributes (the lack of quotes will make it mismatch)
  // attributes are not longer added to `templateWithClosingTags`
  // https://github.com/solidjs/solid/issues/2338
  // .replace(/<([a-z0-9-:]+)\s+[^>]+>/gi, "<$1>")

  // fix escaping, so doesnt mess up the validation
  // `&lt;script>a();&lt;/script>` -> `&lt;script&gt;a();&lt;/script&gt;`
  .replace(/&lt;([^>]+)>/gi, "&lt;$1&gt;");

  // edge cases (safe to assume they will use the partial in the right place)

  // table cells
  if (/^<(td|th)>/.test(html)) {
    html = `<table><tbody><tr>${html}</tr></tbody></table>`;
  }

  // table rows
  if (/^<tr>/.test(html)) {
    html = `<table><tbody>${html}</tbody></table>`;
  }

  // table misc
  if (/^<col>/.test(html)) {
    html = `<table><colgroup>${html}</colgroup></table>`;
  }

  // table components
  if (/^<(thead|tbody|tfoot|colgroup|caption)>/.test(html)) {
    html = `<table>${html}</table>`;
  }

  // skip when equal to:
  switch (html) {
    // empty table components
    case "<table></table>":
    case "<table><thead></thead></table>":
    case "<table><tbody></tbody></table>":
    case "<table><thead></thead><tbody></tbody></table>":{
        return;
      }}


  /** Parse HTML. `browser` is a string with the supposed resulting html of a real `innerHTML` call */
  const browser = innerHTML(html);

  if (html.toLowerCase() !== browser.toLowerCase()) {
    return {
      html,
      browser
    };
  }
}

// add to the top/bottom of the module.
var postprocess = ((path, state) => {
  if (state.skip) return;

  if (path.scope.data.events) {
    path.node.body.push(
    t__namespace.expressionStatement(
    t__namespace.callExpression(
    registerImportMethod(path, "delegateEvents", getRendererConfig(path, "dom").moduleName),
    [t__namespace.arrayExpression(Array.from(path.scope.data.events).map((e) => t__namespace.stringLiteral(e)))])));



  }
  if (path.scope.data.templates?.length) {
    if (path.hub.file.metadata.config.validate) {
      for (const template of path.scope.data.templates) {
        const html = template.templateWithClosingTags;
        // not sure when/why this is not a string
        if (typeof html === "string") {
          const result = isInvalidMarkup(html);
          if (result) {
            const message =
            "\nThe HTML provided is malformed and will yield unexpected output when evaluated by a browser.\n";
            console.warn(message);
            console.warn("User HTML:\n", result.html);
            console.warn("Browser HTML:\n", result.browser);
            console.warn("Original HTML:\n", html);
            // throw path.buildCodeFrameError();
          }
        }
      }
    }
    let domTemplates = path.scope.data.templates.filter((temp) => temp.renderer === "dom");
    let ssrTemplates = path.scope.data.templates.filter((temp) => temp.renderer === "ssr");
    domTemplates.length > 0 && appendTemplates$1(path, domTemplates);
    ssrTemplates.length > 0 && appendTemplates(path, ssrTemplates);
  }
});

var config = {
  moduleName: "dom",
  generate: "dom",
  hydratable: false,
  delegateEvents: true,
  delegatedEvents: [],
  builtIns: [],
  requireImportSource: false,
  wrapConditionals: true,
  omitNestedClosingTags: false,
  omitLastClosingTag: true,
  omitQuotes: true,
  contextToCustomElements: false,
  staticMarker: "@once",
  effectWrapper: "effect",
  memoWrapper: "memo",
  validate: true,
  inlineStyles: true
};

var preprocess = ((path, state) => {
  const merged = path.hub.file.metadata.config = Object.assign({}, config, state.opts);
  const lib = merged.requireImportSource;
  if (lib) {
    const comments = path.hub.file.ast.comments;
    let process = false;
    for (let i = 0; i < comments.length; i++) {
      const comment = comments[i];
      const pieces = comment.value.split("@jsxImportSource");
      if (pieces.length === 2 && pieces[1].trim() === lib) {
        process = true;
        break;
      }
    }
    if (!process) {
      state.skip = true;
      return;
    }
  }
});

var index = (() =>



{
  return {
    name: "JSX DOM Expressions",
    inherits: SyntaxJSX.default,
    visitor: {
      JSXElement: transformJSX,
      JSXFragment: transformJSX,
      Program: {
        enter: preprocess,
        exit: postprocess
      }
    }
  };
});

module.exports = index;