babel-plugin-transform-solid-jsx 4.0.0-beta.84

package/dist/index.js

@@ -0,0 +1,3457 @@
+'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);
+
+const reservedNameSpaces = new Set(['class', 'on', 'oncapture', 'style', 'use', 'prop', 'attr']);
+
+const nonSpreadNameSpaces = new Set(['class', 'style', 'use', 'prop', 'attr']);
+
+function getConfig(path) {
+  return path.hub.file.metadata.config
+}
+
+function getTaroComponentsMap(path) {
+  return path.hub.file.metadata.taroComponentsMap || new Map()
+}
+
+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}`)) {
+    const id = helperModuleImports.addNamed(path, name, moduleName, {
+      nameHint: `_$${name}`,
+    });
+    imports.set(`${moduleName}:${name}`, id);
+    return id
+  } else {
+    const 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 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) {
+    expr.leadingComments.shift();
+    return false
+  }
+
+  if (checkCallExpressions && (t__namespace.isCallExpression(expr) || t__namespace.isOptionalCallExpression(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;
+  let 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,
+    }) ||
+      isDynamic(path.get('alternate'), { checkTags: 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'), inline, true);
+      }
+      if (t__namespace.isConditionalExpression(expr.alternate) || t__namespace.isLogicalExpression(expr.alternate)) {
+        expr.alternate = transformCondition(path.get('alternate'), inline, 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 }) &&
+      (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;
+  let 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
+}
+
+const templateEscapes = new Map([
+  ['{', '\\{'],
+  ['`', '\\`'],
+  ['\\', '\\\\'],
+  ['\n', '\\n'],
+  ['\t', '\\t'],
+  ['\b', '\\b'],
+  ['\f', '\\f'],
+  ['\v', '\\v'],
+  ['\r', '\\r'],
+  ['\u2028', '\\u2028'],
+  ['\u2029', '\\u2029'],
+]);
+
+function escapeStringForTemplate(str) {
+  return str.replace(/[{\\`\n\t\b\f\v\r\u2028\u2029]/g, (ch) => templateEscapes.get(ch))
+}
+
+function convertCamelToKebabCase(camelCaseStr) {
+  return camelCaseStr.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function isTaroComponent(packageName) {
+  return packageName === '@tarojs/components'
+}
+
+const booleans = [
+  'allowfullscreen',
+  'async',
+  'autofocus',
+  'autoplay',
+  'checked',
+  'controls',
+  'default',
+  'disabled',
+  'formnovalidate',
+  'hidden',
+  'indeterminate',
+  'inert',
+  'ismap',
+  'loop',
+  'multiple',
+  'muted',
+  'nomodule',
+  'novalidate',
+  'open',
+  'playsinline',
+  'readonly',
+  'required',
+  'reversed',
+  'seamless',
+  'selected',
+];
+
+const BooleanAttributes = /* #__PURE__ */ new Set(booleans);
+
+const Properties = /* #__PURE__ */ new Set([
+  'className',
+  'value',
+  'readOnly',
+  'formNoValidate',
+  'isMap',
+  'noModule',
+  'playsInline',
+  ...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), {
+  class: 'className',
+  formnovalidate: {
+    $: 'formNoValidate',
+    BUTTON: 1,
+    INPUT: 1,
+  },
+  ismap: {
+    $: 'isMap',
+    IMG: 1,
+  },
+  nomodule: {
+    $: 'noModule',
+    SCRIPT: 1,
+  },
+  playsinline: {
+    $: 'playsInline',
+    VIDEO: 1,
+  },
+  readonly: {
+    $: 'readOnly',
+    INPUT: 1,
+    TEXTAREA: 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'
+];
+
+function createTemplate$2(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,
+      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$1(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$3(path, info) {
+  const config = getConfig(path);
+  // contains spread attributes
+  if (path.node.openingElement.attributes.some((a) => t__namespace.isJSXSpreadAttribute(a))) {
+    return createElement(path, { ...info, ...config })
+  }
+
+  const tagName = getTagName(path.node);
+  const voidTag = VoidElements.indexOf(tagName) > -1;
+  const results = {
+    template: [`<${tagName}`],
+    templateValues: [],
+    declarations: [],
+    exprs: [],
+    dynamics: [],
+    tagName,
+    wontEscape: path.node.wontEscape,
+    renderer: 'ssr',
+  };
+  if (tagName === 'script' || tagName === 'style') path.doNotEscape = true;
+
+  if (info.topLevel && config.hydratable) {
+    if (tagName === 'head') {
+      registerImportMethod(path, 'NoHydration');
+      registerImportMethod(path, 'createComponent');
+      const child = transformElement$3(path, { ...info, topLevel: false });
+      results.template = '';
+      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$2(path, child))])
+            ),
+          ]),
+        ])
+      );
+      return results
+    }
+    results.template.push('');
+    results.templateValues.push(t__namespace.callExpression(registerImportMethod(path, 'ssrHydrationKey'), []));
+  }
+  transformAttributes$2(path, results, { ...config, ...info });
+  appendToTemplate(results.template, '>');
+  if (!voidTag) {
+    transformChildren$2(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$2(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];
+  }
+
+  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)) {
+    expression.right = escapeExpression(path, expression.right, attr, escapeLiterals);
+    if (expression.operator !== '&&') {
+      expression.left = escapeExpression(path, expression.left, 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');
+  const styleAttributes = attributes.filter(
+    (a) => t__namespace.isJSXNamespacedName(a.node.name) && a.node.name.namespace.name === 'style'
+  );
+  const 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;
+    const values = [];
+    const quasis = [t__namespace.templateElement({ raw: '' })];
+    for (let i = 0; i < classAttributes.length; i++) {
+      const attr = classAttributes[i].node;
+      const 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$2(path, results, info) {
+  const tagName = getTagName(path.node);
+  const isSVG = SVGElements.has(tagName);
+  const hasChildren = path.node.children.length > 0;
+  const attributes = normalizeAttributes(path);
+  let children;
+
+  attributes.forEach((attribute) => {
+    const node = attribute.node;
+
+    let value = node.value;
+    let key = t__namespace.isJSXNamespacedName(node.name) ? `${node.name.namespace.name}:${node.name.name.name}` : node.name.name;
+    const 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 false
+      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 (BooleanAttributes.has(key)) {
+          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))
+          ) {
+            const props = value.expression.properties.map((p, i) =>
+              t__namespace.binaryExpression(
+                '+',
+                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 = [];
+            const 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$2(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(text);
+        if (key === 'style') {
+          text = text.replace(/; /g, ';').replace(/: /g, ':');
+        }
+      }
+      appendToTemplate(results.template, `="${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$2(path, results, { hydratable }) {
+  const doNotEscape = path.doNotEscape;
+  const filteredChildren = filterChildren(path.get('children'));
+  const multi = checkLength(filteredChildren);
+  const 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$2(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);
+  const config = getConfig(path);
+  const attributes = normalizeAttributes(path);
+
+  const filteredChildren = filterChildren(path.get('children'));
+  const multi = checkLength(filteredChildren);
+  const markers = hydratable && multi;
+  const 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 && !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 = [];
+    let dynamicSpread = false;
+    const 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);
+        const id = convertJSXIdentifier(node.name);
+        const 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,
+            })
+          ) {
+            const 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$2(path) {
+  let tagName = getTagName(path.node);
+  const config = getConfig(path);
+  if (config.uniqueTransform) {
+    const taroComponent = getTaroComponentsMap(path).get(tagName);
+    if (taroComponent) {
+      tagName = convertCamelToKebabCase(taroComponent);
+    }
+  }
+  const 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$1(path, results);
+  transformChildren$1(path, results);
+
+  return results
+}
+
+function transformAttributes$1(path, results) {
+  let children, spreadExpr;
+  let attributes = path.get('openingElement').get('attributes');
+  const elem = results.id;
+  const hasChildren = path.node.children.length > 0;
+  const config = getConfig(path);
+
+  // preprocess spreads
+  if (attributes.some((attribute) => t__namespace.isJSXSpreadAttribute(attribute.node))) {
+    [attributes, spreadExpr] = processSpreads$1(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;
+      const key = t__namespace.isJSXNamespacedName(node.name)
+        ? `${node.name.namespace.name}:${node.name.name.name}`
+        : node.name.name;
+      const 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;
+          }
+          if (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 (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 if (t__namespace.isCallExpression(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.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$1(attribute, elem, key, value.expression)));
+        }
+      } else {
+        results.exprs.push(t__namespace.expressionStatement(setAttr$1(attribute, elem, key, value)));
+      }
+    });
+  if (spreadExpr) results.exprs.push(spreadExpr);
+  if (!hasChildren && children) {
+    path.node.children.push(children);
+  }
+}
+
+function setAttr$1(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$1(path, results) {
+  const filteredChildren = filterChildren(path.get('children'));
+  const multi = checkLength(filteredChildren);
+  const 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;
+    } 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) {
+      const insertNode = registerImportMethod(path, 'insertNode', getRendererConfig(path, 'universal').moduleName);
+      let insert = child.id;
+      if (child.text) {
+        const 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) {
+      const 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$1(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$1(children, index) {
+  return children[index + 1] && (children[index + 1].id || nextChild$1(children, index + 1))
+}
+
+function processSpreads$1(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);
+        const 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$1(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$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 wrapDynamics$1(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$1(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$1(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 = [];
+  const config = getConfig(path);
+  const tagId = convertComponentIdentifier(path.node.openingElement.name);
+  let props = [];
+  let runningObject = [];
+  let dynamicSpread = false;
+  const 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);
+        const id = convertJSXIdentifier(node.name);
+        const 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;
+            const isFunction =
+              t__namespace.isIdentifier(value.expression) &&
+              (binding = path.scope.getBinding(value.expression.name)) &&
+              binding.kind === 'const';
+            if (!isFunction && 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 (isFunction || 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)) {
+              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;
+  const 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);
+  const 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) {
+  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)));
+}
+
+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) {
+      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$1(config, path, info)
+  } else if (t__namespace.isJSXFragment(node)) {
+    const 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.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
+  }
+
+  if (result.renderer === 'ssr' || config.generate === 'ssr') {
+    return createTemplate$2
+  }
+
+  return createTemplate$1
+}
+
+function transformElement$1(config, path, info = {}) {
+  const node = path.node;
+  let tagName = getTagName(node);
+  if (config.uniqueTransform) {
+    const taroComponent = getTaroComponentsMap(path).get(tagName);
+    if (taroComponent) {
+      tagName = convertCamelToKebabCase(taroComponent);
+    }
+  }
+  // <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(path, info)
+  }
+
+  if (getConfig(path).generate === 'ssr') {
+    return transformElement$3(path, info)
+  }
+
+  return transformElement$2(path)
+}
+
+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',
+  'template',
+  'fieldset',
+];
+
+function transformElement(path, info) {
+  const tagName = getTagName(path.node);
+  const config = getConfig(path);
+  const wrapSVG = info.topLevel && tagName !== 'svg' && SVGElements.has(tagName);
+  const voidTag = VoidElements.indexOf(tagName) > -1;
+  const isCustomElement = tagName.indexOf('-') > -1;
+  const results = {
+    template: `<${tagName}`,
+    declarations: [],
+    exprs: [],
+    dynamics: [],
+    postExprs: [],
+    isSVG: wrapSVG,
+    hasCustomElement: isCustomElement,
+    tagName,
+    renderer: 'dom',
+    skipTemplate: false,
+  };
+  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;
+  if (!info.skipId) results.id = path.scope.generateUidIdentifier('el$');
+  transformAttributes(path, results);
+  if (config.contextToCustomElements && (tagName === 'slot' || isCustomElement)) {
+    contextToCustomElement(path, results);
+  }
+  results.template += '>';
+  if (!voidTag) {
+    // always close tags can still be skipped if they have no closing parents and are the last element
+    const toBeClosed =
+      !info.lastElement || (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;
+    transformChildren(path, results, config);
+    if (toBeClosed) results.template += `</${tagName}>`;
+  }
+  if (info.topLevel && config.hydratable && results.hasHydratableEvent) {
+    const runHydrationEvents = registerImportMethod(
+      path,
+      'runHydrationEvents',
+      getRendererConfig(path, 'dom').moduleName
+    );
+    results.postExprs.push(t__namespace.expressionStatement(t__namespace.callExpression(runHydrationEvents, [])));
+  }
+  if (wrapSVG) results.template += '</svg>';
+  return results
+}
+
+function setAttr(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];
+  }
+
+  // TODO: consider moving to a helper
+  if (namespace === 'style') {
+    if (t__namespace.isStringLiteral(value)) {
+      return t__namespace.callExpression(
+        t__namespace.memberExpression(t__namespace.memberExpression(elem, t__namespace.identifier('style')), t__namespace.identifier('setProperty')),
+        [t__namespace.stringLiteral(name), value]
+      )
+    }
+    if (t__namespace.isNullLiteral(value) || t__namespace.isIdentifier(value, { name: 'undefined' })) {
+      return t__namespace.callExpression(
+        t__namespace.memberExpression(t__namespace.memberExpression(elem, t__namespace.identifier('style')), t__namespace.identifier('removeProperty')),
+        [t__namespace.stringLiteral(name)]
+      )
+    }
+    return t__namespace.conditionalExpression(
+      t__namespace.binaryExpression('!=', value, t__namespace.nullLiteral()),
+      t__namespace.callExpression(
+        t__namespace.memberExpression(t__namespace.memberExpression(elem, t__namespace.identifier('style')), t__namespace.identifier('setProperty')),
+        [t__namespace.stringLiteral(name), prevId || value]
+      ),
+      t__namespace.callExpression(
+        t__namespace.memberExpression(t__namespace.memberExpression(elem, t__namespace.identifier('style')), t__namespace.identifier('removeProperty')),
+        [t__namespace.stringLiteral(name)]
+      )
+    )
+  }
+
+  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)
+  }
+
+  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(name), value])
+    }
+    return t__namespace.assignmentExpression('=', t__namespace.memberExpression(elem, t__namespace.identifier(alias || name)), value)
+  }
+
+  const 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(path, results) {
+  const elem = results.id;
+  let hasHydratableEvent = false;
+  let children;
+  let spreadExpr;
+  let attributes = path.get('openingElement').get('attributes');
+  const tagName = getTagName(path.node);
+  const isSVG = SVGElements.has(tagName);
+  const isCE = tagName.includes('-');
+  const hasChildren = path.node.children.length > 0;
+  const config = getConfig(path);
+
+  // preprocess spreads
+  if (attributes.some((attribute) => t__namespace.isJSXSpreadAttribute(attribute.node))) {
+    [attributes, spreadExpr] = processSpreads(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;
+  }
+
+  // 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;
+    const 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;
+    const leading = classListAttribute.node.value.expression.leadingComments;
+    const 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;
+    const values = [];
+    const quasis = [t__namespace.templateElement({ raw: '' })];
+    for (let i = 0; i < classAttributes.length; i++) {
+      const attr = classAttributes[i].node;
+      const 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;
+
+  path
+    .get('openingElement')
+    .get('attributes')
+    .forEach((attribute) => {
+      const node = attribute.node;
+      let value = node.value;
+      let key = t__namespace.isJSXNamespacedName(node.name) ? `${node.name.namespace.name}:${node.name.name.name}` : node.name.name;
+      const 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;
+          const isFunction =
+            t__namespace.isIdentifier(value.expression) &&
+            (binding = path.scope.getBinding(value.expression.name)) &&
+            binding.kind === 'const';
+          if (!isFunction && 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 (isFunction || 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 if (t__namespace.isCallExpression(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.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:') || key.startsWith('oncapture:')) {
+            const listenerOptions = [t__namespace.stringLiteral(key.split(':')[1]), value.expression];
+            results.exprs.push(
+              t__namespace.expressionStatement(
+                t__namespace.callExpression(
+                  t__namespace.memberExpression(elem, t__namespace.identifier('addEventListener')),
+                  key.startsWith('oncapture:') ? listenerOptions.concat(t__namespace.booleanLiteral(true)) : listenerOptions
+                )
+              )
+            );
+          } 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))
+        ) {
+          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(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 {
+          results.exprs.push(
+            t__namespace.expressionStatement(setAttr(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;
+        key = Aliases[key] || key;
+        if (value && ChildProperties.has(key)) {
+          results.exprs.push(t__namespace.expressionStatement(setAttr(attribute, elem, key, value, { isSVG, isCE, tagName })));
+        } else {
+          !isSVG && (key = key.toLowerCase());
+          results.template += `${needsSpacing ? ' ' : ''}${key}`;
+          if (!value) {
+            needsSpacing = true;
+            return
+          }
+
+          let text = value.value;
+          let needsQuoting = false;
+
+          if (key === 'style' || key === 'class') {
+            text = trimWhitespace(text);
+            if (key === 'style') {
+              text = text.replace(/; /g, ';').replace(/: /g, ':');
+            }
+          }
+
+          if (!text.length) {
+            needsSpacing = false;
+            results.template += `=""`;
+            return
+          }
+
+          for (let i = 0, len = text.length; i < len; i++) {
+            const 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)}`;
+          }
+        }
+      }
+    });
+  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;
+  let 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(path, results, config) {
+  let tempPath = results.id && results.id.name;
+  const tagName = getTagName(path.node);
+  let nextPlaceholder;
+  let i = 0;
+  const filteredChildren = filterChildren(path.get('children'));
+  const lastElement = findLastElement(filteredChildren, config.hydratable);
+  const 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;
+    } 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;
+    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);
+      results.postExprs.push(...child.postExprs);
+      results.hasHydratableEvent = results.hasHydratableEvent || child.hasHydratableEvent;
+      results.hasCustomElement = results.hasCustomElement || child.hasCustomElement;
+      tempPath = child.id.name;
+      nextPlaceholder = null;
+      i++;
+    } else if (child.exprs.length) {
+      const insert = registerImportMethod(path, 'insert', getRendererConfig(path, 'dom').moduleName);
+      const multi = checkLength(filteredChildren);
+      const 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(childNodes, index) || t__namespace.nullLiteral()])
+          )
+        );
+      } else {
+        results.exprs.push(t__namespace.expressionStatement(t__namespace.callExpression(insert, [results.id, child.exprs[0]])));
+      }
+    } else nextPlaceholder = null;
+  });
+}
+
+function createPlaceholder(path, results, tempPath, i, char) {
+  const exprId = path.scope.generateUidIdentifier('el$');
+  const config = getConfig(path);
+  let contentId;
+  results.template += `<!${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(children, index) {
+  return children[index + 1] && (children[index + 1].id || nextChild(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)) 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') ||
+            (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(path, attributes, { elem, isSVG, 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);
+        const 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(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(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(path, templates) {
+  const declarators = templates.map(template => {
+    const tmpl = {
+      cooked: template.template,
+      raw: escapeStringForTemplate(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 || template.isCE
+              ? [t__namespace.booleanLiteral(template.isCE), t__namespace.booleanLiteral(template.isSVG)]
+              : []
+          )
+        ),
+        '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,
+          isSVG: results.isSVG,
+          isCE: results.hasCustomElement,
+          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(path, dynamics) {
+  if (!dynamics.length) return
+  const config = getConfig(path);
+
+  const effectWrapperId = registerImportMethod(path, config.effectWrapper);
+
+  if (dynamics.length === 1) {
+    const prevValue =
+      dynamics[0].key === 'classList' || dynamics[0].key === 'style'
+        ? t__namespace.identifier('_$p')
+        : undefined;
+    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(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(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(
+              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'))),
+      ),
+    ]),
+  )
+}
+
+// add to the top/bottom of the module.
+var postprocess = (path) => {
+  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) {
+    const domTemplates = path.scope.data.templates.filter((temp) => temp.renderer === 'dom');
+    const ssrTemplates = path.scope.data.templates.filter((temp) => temp.renderer === 'ssr');
+    domTemplates.length > 0 && appendTemplates(path, domTemplates);
+    ssrTemplates.length > 0 && appendTemplates$1(path, ssrTemplates);
+  }
+
+  const taroComponentsMap = getTaroComponentsMap(path);
+  taroComponentsMap.clear();
+};
+
+var config = {
+  moduleName: 'dom',
+  generate: 'dom',
+  hydratable: false,
+  delegateEvents: true,
+  delegatedEvents: [],
+  builtIns: [],
+  requireImportSource: false,
+  wrapConditionals: true,
+  omitNestedClosingTags: false,
+  contextToCustomElements: false,
+  staticMarker: '@once',
+  effectWrapper: 'effect',
+  memoWrapper: 'memo',
+  validate: true
+};
+
+const { isValidHTMLNesting } = require('validate-html-nesting');
+
+// From https://github.com/MananTank/babel-plugin-validate-jsx-nesting/blob/main/src/index.js
+const JSXValidator = {
+  JSXElement(path) {
+    const elName = path.node.openingElement.name;
+    const parent = path.parent;
+    if (!t__namespace.isJSXElement(parent) || !t__namespace.isJSXIdentifier(elName)) return
+    const elTagName = elName.name;
+    if (isComponent(elTagName)) return
+    const parentElName = parent.openingElement.name;
+    if (!t__namespace.isJSXIdentifier(parentElName)) return
+    const parentElTagName = parentElName.name;
+    if (!isComponent(parentElTagName)) {
+      if (!isValidHTMLNesting(parentElTagName, elTagName)) {
+        throw path.buildCodeFrameError(`Invalid JSX: <${elTagName}> cannot be child of <${parentElTagName}>`)
+      }
+    }
+  },
+};
+
+var preprocess = (path, { opts }) => {
+  const merged = (path.hub.file.metadata.config = Object.assign({}, config, opts));
+  const taroComponentsMap = (path.hub.file.metadata.taroComponentsMap ||= new Map());
+  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 index = comment.value.indexOf('@jsxImportSource');
+      if (index > -1 && comment.value.slice(index).includes(lib)) {
+        process = true;
+        break
+      }
+    }
+    if (!process) {
+      path.skip();
+      return
+    }
+  }
+  for (const stmt of path.get('body')) {
+    if (t__namespace.isImportDeclaration(stmt.node)) {
+      if (isTaroComponent(stmt.node.source.value)) {
+        stmt.node.specifiers.forEach((specifier) => {
+          // 包体导出的变量名
+          const importedName = specifier.imported.name;
+          // 当前使用的变量名 防止别名
+          // import { Button as MyButton } from '@tarojs/components'
+          const localName = specifier.local.name;
+          taroComponentsMap.set(localName, importedName);
+        });
+      }
+    }
+  }
+  if (merged.validate) path.traverse(JSXValidator);
+};
+
+var index = () => {
+  return {
+    name: 'JSX DOM Expressions',
+    inherits: SyntaxJSX.default,
+    visitor: {
+      JSXElement: transformJSX,
+      JSXFragment: transformJSX,
+      Program: {
+        enter: preprocess,
+        exit: postprocess
+      }
+    }
+  }
+};
+
+module.exports = index;