@kuma-ui/compiler - npm Package Compare versions

Comparing version 1.0.8 to 1.1.0

dist/collector/collect.js

@@ -128,3 +128,3 @@ "use strict";
     if (import_ts_morph4.Node.isJsxAttribute(jsxAttribute)) {
-      const propName = jsxAttribute.getNameNode().getFullText();
+      const propName = jsxAttribute.getNameNode().getText();
       let propValue;
@@ -131,0 +131,0 @@ if (propName.trim().startsWith("_")) {

dist/collector/index.js

@@ -130,3 +130,3 @@ "use strict";
     if (import_ts_morph4.Node.isJsxAttribute(jsxAttribute)) {
-      const propName = jsxAttribute.getNameNode().getFullText();
+      const propName = jsxAttribute.getNameNode().getText();
       let propValue;
@@ -133,0 +133,0 @@ if (propName.trim().startsWith("_")) {

dist/compile.js

@@ -6,5 +6,5 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all2) => {
-  for (var name in all2)
-    __defProp(target, name, { get: all2[name], enumerable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
@@ -27,3 +27,3 @@ var __copyProps = (to, from, except, desc) => {
 module.exports = __toCommonJS(compile_exports);
-var import_ts_morph7 = require("ts-morph");
+var import_ts_morph8 = require("ts-morph");
 
@@ -133,3 +133,3 @@ // src/collector/collect.ts
     if (import_ts_morph4.Node.isJsxAttribute(jsxAttribute)) {
-      const propName = jsxAttribute.getNameNode().getFullText();
+      const propName = jsxAttribute.getNameNode().getText();
       let propValue;
@@ -170,49 +170,2 @@ if (propName.trim().startsWith("_")) {
 var import_sheet = require("@kuma-ui/sheet");
-
-// src/utils/stableStringify.ts
-function stableStringify(data) {
-  const seen = [];
-  return function stringify(node) {
-    if (node && node.toJSON && typeof node.toJSON === "function") {
-      node = node.toJSON();
-    }
-    if (node === void 0)
-      return;
-    if (typeof node == "number")
-      return isFinite(node) ? "" + node : "null";
-    if (typeof node !== "object")
-      return JSON.stringify(node);
-    let i, out;
-    if (Array.isArray(node)) {
-      out = "[";
-      for (i = 0; i < node.length; i++) {
-        if (i)
-          out += ",";
-        out += stringify(node[i]) || "null";
-      }
-      return out + "]";
-    }
-    if (node === null)
-      return "null";
-    if (seen.indexOf(node) !== -1) {
-      throw new TypeError("Converting circular structure to JSON");
-    }
-    const seenIndex = seen.push(node) - 1;
-    const keys = Object.keys(node).sort();
-    out = "";
-    for (i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      const value = stringify(node[key]);
-      if (!value)
-        continue;
-      if (out)
-        out += ",";
-      out += JSON.stringify(key) + ":" + value;
-    }
-    seen.splice(seenIndex, 1);
-    return "{" + out + "}";
-  }(data);
-}
-
-// src/extractor/extract.ts
 var extractProps = (componentName, jsx, propsMap) => {
@@ -223,24 +176,23 @@ const styledProps = {};
   const variant = import_sheet.theme.getVariants(componentName);
-  const componentVariantProps = {
+  const baseStyleProps = {
     ...variant?.baseStyle
   };
-  const defaultProps = (0, import_componentList.componentDefaultProps)(componentName);
+  const systemDefaultProps = (0, import_componentList.componentDefaultProps)(componentName);
+  const userDefaultProps = variant?.defaultProps;
   let isDefault = false;
   for (const [propName, propValue] of Object.entries({
-    ...defaultProps,
+    ...systemDefaultProps,
+    ...userDefaultProps,
     ...propsMap
   })) {
-    if ((0, import_system.isStyledProp)(propName.trim())) {
-      styledProps[propName.trim()] = propValue;
-    } else if ((0, import_system.isPseudoProps)(propName.trim())) {
-      pseudoProps[propName.trim()] = propValue;
-    } else if ((0, import_componentList.isComponentProps)(componentName)(propName.trim())) {
-      componentProps[propName.trim()] = propValue;
-    } else if (propName.trim() === "variant") {
-      Object.assign(
-        componentVariantProps,
-        variant?.variants?.[propValue]
-      );
+    if ((0, import_system.isStyledProp)(propName)) {
+      styledProps[propName] = propValue;
+    } else if ((0, import_system.isPseudoProps)(propName)) {
+      pseudoProps[propName] = propValue;
+    } else if ((0, import_componentList.isComponentProps)(componentName)(propName)) {
+      componentProps[propName] = propValue;
+    } else if (propName === "variant") {
+      Object.assign(baseStyleProps, variant?.variants?.[propValue]);
       jsx.getAttribute("variant")?.remove();
-    } else if (propName.trim() === "IS_KUMA_DEFAULT") {
+    } else if (propName === "IS_KUMA_DEFAULT") {
       isDefault = true;
@@ -254,5 +206,5 @@ }
   if (componentName === "Box" && isDefault) {
-    for (const prop in componentVariantProps) {
-      if (Object.hasOwn(componentVariantProps, prop)) {
-        delete componentVariantProps[prop];
+    for (const prop in baseStyleProps) {
+      if (Object.hasOwn(baseStyleProps, prop)) {
+        delete baseStyleProps[prop];
       }
@@ -262,3 +214,3 @@ }
   const combinedProps = {
-    ...componentVariantProps,
+    ...baseStyleProps,
     ...specificProps,
@@ -268,9 +220,5 @@ ...styledProps,
   };
-  const key = stableStringify(combinedProps);
-  let generatedStyle = styleCache[key];
-  if (!generatedStyle) {
-    generatedStyle = new import_system.StyleGenerator(combinedProps).getStyle();
-    styleCache[key] = generatedStyle;
-  }
-  const { className: generatedClassName, css } = generatedStyle;
+  const { className: generatedClassName, css } = new import_system.StyleGenerator(
+    combinedProps
+  ).getStyle();
   if (!generatedClassName)
@@ -313,12 +261,63 @@ return { css };
 };
-var styleCache = {};
 
 // src/compile.ts
+var import_componentList3 = require("@kuma-ui/core/components/componentList");
+
+// src/optimizer/optimize.ts
 var import_componentList2 = require("@kuma-ui/core/components/componentList");
+var import_ts_morph6 = require("ts-morph");
+var import_system2 = require("@kuma-ui/system");
+var optimize = (componentName, jsxElement, as) => {
+  const isOptimizable = jsxElement.getAttributes().every((attrLike) => {
+    if (import_ts_morph6.Node.isJsxSpreadAttribute(attrLike))
+      return false;
+    const attr = attrLike.asKindOrThrow(import_ts_morph6.SyntaxKind.JsxAttribute);
+    if (hasDynamicProp(attr.getNameNode().getText().trim(), !!as))
+      return false;
+    return true;
+  });
+  if (!isOptimizable)
+    return;
+  const rawHTMLTag = (() => {
+    const safeAs = typeof as === "string" ? as.replace(/['"`]/g, "") : as;
+    const tag = import_componentList2.defaultComponentTag[componentName];
+    if (safeAs) {
+      return safeAs;
+    } else {
+      if (typeof tag === "string")
+        return tag;
+      return "div";
+    }
+  })();
+  safeReplaceTagName(jsxElement, rawHTMLTag);
+};
+function hasDynamicProp(key, hasAs) {
+  return (0, import_system2.isStyledProp)(key) || (0, import_system2.isPseudoProps)(key) || key === "variant" || !hasAs && key === "as";
+}
+function safeReplaceTagName(jsxElement, newTagName) {
+  const originalComponent = jsxElement.getTagNameNode().getText();
+  try {
+    if (import_ts_morph6.Node.isJsxOpeningElement(jsxElement)) {
+      const jsxElementParent = jsxElement.getParentIfKind(
+        import_ts_morph6.SyntaxKind.JsxElement
+      );
+      if (jsxElementParent) {
+        jsxElementParent.getOpeningElement().getTagNameNode().replaceWithText(newTagName);
+        jsxElementParent.getClosingElement().getTagNameNode().replaceWithText(newTagName);
+      }
+    } else if (import_ts_morph6.Node.isJsxSelfClosingElement(jsxElement)) {
+      jsxElement.getTagNameNode().replaceWithText(newTagName);
+      jsxElement.getFirstDescendantByKind(import_ts_morph6.SyntaxKind.Identifier)?.replaceWithText(newTagName);
+    }
+    jsxElement.getAttribute("as")?.remove();
+    jsxElement.getAttribute("IS_KUMA_DEFAULT")?.remove();
+  } catch {
+  }
+}
 
 // src/processTaggedTemplateExpression.ts
-var import_ts_morph6 = require("ts-morph");
+var import_ts_morph7 = require("ts-morph");
 var import_sheet2 = require("@kuma-ui/sheet");
 var extractClassName = (templateLiteral) => {
-  if (import_ts_morph6.Node.isNoSubstitutionTemplateLiteral(templateLiteral)) {
+  if (import_ts_morph7.Node.isNoSubstitutionTemplateLiteral(templateLiteral)) {
     const cssString = templateLiteral.getLiteralText();
@@ -331,3 +330,3 @@ return cssString ? import_sheet2.sheet.parseCSS(cssString) : void 0;
   const tag = node.getTag();
-  if (import_ts_morph6.Node.isIdentifier(tag) && tag.getText() === bindings["css"]) {
+  if (import_ts_morph7.Node.isIdentifier(tag) && tag.getText() === bindings["css"]) {
     const className = extractClassName(node.getTemplate());
@@ -337,7 +336,7 @@ if (className) {
     }
-  } else if (import_ts_morph6.Node.isCallExpression(tag) && tag.getExpressionIfKind(import_ts_morph6.SyntaxKind.Identifier)?.getText() === bindings["styled"]) {
+  } else if (import_ts_morph7.Node.isCallExpression(tag) && tag.getExpressionIfKind(import_ts_morph7.SyntaxKind.Identifier)?.getText() === bindings["styled"]) {
     const className = extractClassName(node.getTemplate());
     if (className) {
       const componentArg = tag.getArguments()[0];
-      const component = import_ts_morph6.Node.isStringLiteral(componentArg) ? componentArg.getLiteralText() : "div";
+      const component = import_ts_morph7.Node.isStringLiteral(componentArg) ? componentArg.getLiteralText() : "div";
       node.replaceWithText(`props => {
@@ -354,3 +353,3 @@ const existingClassName = props.className || "";
 // src/compile.ts
-var project = new import_ts_morph7.Project({});
+var project = new import_ts_morph8.Project({});
 var compile = (code, id, bindings) => {
@@ -360,13 +359,13 @@ const css = [];
   source.forEachDescendant((node) => {
-    if (node.getKind() === import_ts_morph7.SyntaxKind.JsxElement || node.getKind() === import_ts_morph7.SyntaxKind.JsxSelfClosingElement) {
+    if (node.getKind() === import_ts_morph8.SyntaxKind.JsxElement || node.getKind() === import_ts_morph8.SyntaxKind.JsxSelfClosingElement) {
       let openingElement;
-      if (node.getKind() === import_ts_morph7.SyntaxKind.JsxElement) {
-        const jsxElement = node.asKindOrThrow(import_ts_morph7.SyntaxKind.JsxElement);
+      if (node.getKind() === import_ts_morph8.SyntaxKind.JsxElement) {
+        const jsxElement = node.asKindOrThrow(import_ts_morph8.SyntaxKind.JsxElement);
         openingElement = jsxElement.getOpeningElement();
       } else {
-        openingElement = node.asKindOrThrow(import_ts_morph7.SyntaxKind.JsxSelfClosingElement);
+        openingElement = node.asKindOrThrow(import_ts_morph8.SyntaxKind.JsxSelfClosingElement);
       }
       const jsxTagName = openingElement.getTagNameNode().getText();
       const originalComponentName = Object.keys(bindings).find(
-        (key) => bindings[key] === jsxTagName && Object.values(import_componentList2.componentList).some((c) => c === key)
+        (key) => bindings[key] === jsxTagName && Object.values(import_componentList3.componentList).some((c) => c === key)
       );
@@ -384,4 +383,9 @@ if (!originalComponentName)
         css.push(result.css);
+      optimize(
+        componentName,
+        openingElement,
+        extractedPropsMap["as"]
+      );
     }
-    if (import_ts_morph7.Node.isTaggedTemplateExpression(node)) {
+    if (import_ts_morph8.Node.isTaggedTemplateExpression(node)) {
       processTaggedTemplateExpression(node, bindings);
@@ -388,0 +392,0 @@ }

dist/extractor/extract.js

@@ -6,5 +6,5 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all2) => {
-  for (var name in all2)
-    __defProp(target, name, { get: all2[name], enumerable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
@@ -31,49 +31,2 @@ var __copyProps = (to, from, except, desc) => {
 var import_sheet = require("@kuma-ui/sheet");
-
-// src/utils/stableStringify.ts
-function stableStringify(data) {
-  const seen = [];
-  return function stringify(node) {
-    if (node && node.toJSON && typeof node.toJSON === "function") {
-      node = node.toJSON();
-    }
-    if (node === void 0)
-      return;
-    if (typeof node == "number")
-      return isFinite(node) ? "" + node : "null";
-    if (typeof node !== "object")
-      return JSON.stringify(node);
-    let i, out;
-    if (Array.isArray(node)) {
-      out = "[";
-      for (i = 0; i < node.length; i++) {
-        if (i)
-          out += ",";
-        out += stringify(node[i]) || "null";
-      }
-      return out + "]";
-    }
-    if (node === null)
-      return "null";
-    if (seen.indexOf(node) !== -1) {
-      throw new TypeError("Converting circular structure to JSON");
-    }
-    const seenIndex = seen.push(node) - 1;
-    const keys = Object.keys(node).sort();
-    out = "";
-    for (i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      const value = stringify(node[key]);
-      if (!value)
-        continue;
-      if (out)
-        out += ",";
-      out += JSON.stringify(key) + ":" + value;
-    }
-    seen.splice(seenIndex, 1);
-    return "{" + out + "}";
-  }(data);
-}
-
-// src/extractor/extract.ts
 var extractProps = (componentName, jsx, propsMap) => {
@@ -84,24 +37,23 @@ const styledProps = {};
   const variant = import_sheet.theme.getVariants(componentName);
-  const componentVariantProps = {
+  const baseStyleProps = {
     ...variant?.baseStyle
   };
-  const defaultProps = (0, import_componentList.componentDefaultProps)(componentName);
+  const systemDefaultProps = (0, import_componentList.componentDefaultProps)(componentName);
+  const userDefaultProps = variant?.defaultProps;
   let isDefault = false;
   for (const [propName, propValue] of Object.entries({
-    ...defaultProps,
+    ...systemDefaultProps,
+    ...userDefaultProps,
     ...propsMap
   })) {
-    if ((0, import_system.isStyledProp)(propName.trim())) {
-      styledProps[propName.trim()] = propValue;
-    } else if ((0, import_system.isPseudoProps)(propName.trim())) {
-      pseudoProps[propName.trim()] = propValue;
-    } else if ((0, import_componentList.isComponentProps)(componentName)(propName.trim())) {
-      componentProps[propName.trim()] = propValue;
-    } else if (propName.trim() === "variant") {
-      Object.assign(
-        componentVariantProps,
-        variant?.variants?.[propValue]
-      );
+    if ((0, import_system.isStyledProp)(propName)) {
+      styledProps[propName] = propValue;
+    } else if ((0, import_system.isPseudoProps)(propName)) {
+      pseudoProps[propName] = propValue;
+    } else if ((0, import_componentList.isComponentProps)(componentName)(propName)) {
+      componentProps[propName] = propValue;
+    } else if (propName === "variant") {
+      Object.assign(baseStyleProps, variant?.variants?.[propValue]);
       jsx.getAttribute("variant")?.remove();
-    } else if (propName.trim() === "IS_KUMA_DEFAULT") {
+    } else if (propName === "IS_KUMA_DEFAULT") {
       isDefault = true;
@@ -115,5 +67,5 @@ }
   if (componentName === "Box" && isDefault) {
-    for (const prop in componentVariantProps) {
-      if (Object.hasOwn(componentVariantProps, prop)) {
-        delete componentVariantProps[prop];
+    for (const prop in baseStyleProps) {
+      if (Object.hasOwn(baseStyleProps, prop)) {
+        delete baseStyleProps[prop];
       }
@@ -123,3 +75,3 @@ }
   const combinedProps = {
-    ...componentVariantProps,
+    ...baseStyleProps,
     ...specificProps,
@@ -129,9 +81,5 @@ ...styledProps,
   };
-  const key = stableStringify(combinedProps);
-  let generatedStyle = styleCache[key];
-  if (!generatedStyle) {
-    generatedStyle = new import_system.StyleGenerator(combinedProps).getStyle();
-    styleCache[key] = generatedStyle;
-  }
-  const { className: generatedClassName, css } = generatedStyle;
+  const { className: generatedClassName, css } = new import_system.StyleGenerator(
+    combinedProps
+  ).getStyle();
   if (!generatedClassName)
@@ -174,3 +122,2 @@ return { css };
 };
-var styleCache = {};
 // Annotate the CommonJS export names for ESM import in node:
@@ -177,0 +124,0 @@ 0 && (module.exports = {

dist/extractor/index.js

@@ -6,5 +6,5 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all2) => {
-  for (var name in all2)
-    __defProp(target, name, { get: all2[name], enumerable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
@@ -33,49 +33,2 @@ var __copyProps = (to, from, except, desc) => {
 var import_sheet = require("@kuma-ui/sheet");
-
-// src/utils/stableStringify.ts
-function stableStringify(data) {
-  const seen = [];
-  return function stringify(node) {
-    if (node && node.toJSON && typeof node.toJSON === "function") {
-      node = node.toJSON();
-    }
-    if (node === void 0)
-      return;
-    if (typeof node == "number")
-      return isFinite(node) ? "" + node : "null";
-    if (typeof node !== "object")
-      return JSON.stringify(node);
-    let i, out;
-    if (Array.isArray(node)) {
-      out = "[";
-      for (i = 0; i < node.length; i++) {
-        if (i)
-          out += ",";
-        out += stringify(node[i]) || "null";
-      }
-      return out + "]";
-    }
-    if (node === null)
-      return "null";
-    if (seen.indexOf(node) !== -1) {
-      throw new TypeError("Converting circular structure to JSON");
-    }
-    const seenIndex = seen.push(node) - 1;
-    const keys = Object.keys(node).sort();
-    out = "";
-    for (i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      const value = stringify(node[key]);
-      if (!value)
-        continue;
-      if (out)
-        out += ",";
-      out += JSON.stringify(key) + ":" + value;
-    }
-    seen.splice(seenIndex, 1);
-    return "{" + out + "}";
-  }(data);
-}
-
-// src/extractor/extract.ts
 var extractProps = (componentName, jsx, propsMap) => {
@@ -86,24 +39,23 @@ const styledProps = {};
   const variant = import_sheet.theme.getVariants(componentName);
-  const componentVariantProps = {
+  const baseStyleProps = {
     ...variant?.baseStyle
   };
-  const defaultProps = (0, import_componentList.componentDefaultProps)(componentName);
+  const systemDefaultProps = (0, import_componentList.componentDefaultProps)(componentName);
+  const userDefaultProps = variant?.defaultProps;
   let isDefault = false;
   for (const [propName, propValue] of Object.entries({
-    ...defaultProps,
+    ...systemDefaultProps,
+    ...userDefaultProps,
     ...propsMap
   })) {
-    if ((0, import_system.isStyledProp)(propName.trim())) {
-      styledProps[propName.trim()] = propValue;
-    } else if ((0, import_system.isPseudoProps)(propName.trim())) {
-      pseudoProps[propName.trim()] = propValue;
-    } else if ((0, import_componentList.isComponentProps)(componentName)(propName.trim())) {
-      componentProps[propName.trim()] = propValue;
-    } else if (propName.trim() === "variant") {
-      Object.assign(
-        componentVariantProps,
-        variant?.variants?.[propValue]
-      );
+    if ((0, import_system.isStyledProp)(propName)) {
+      styledProps[propName] = propValue;
+    } else if ((0, import_system.isPseudoProps)(propName)) {
+      pseudoProps[propName] = propValue;
+    } else if ((0, import_componentList.isComponentProps)(componentName)(propName)) {
+      componentProps[propName] = propValue;
+    } else if (propName === "variant") {
+      Object.assign(baseStyleProps, variant?.variants?.[propValue]);
       jsx.getAttribute("variant")?.remove();
-    } else if (propName.trim() === "IS_KUMA_DEFAULT") {
+    } else if (propName === "IS_KUMA_DEFAULT") {
       isDefault = true;
@@ -117,5 +69,5 @@ }
   if (componentName === "Box" && isDefault) {
-    for (const prop in componentVariantProps) {
-      if (Object.hasOwn(componentVariantProps, prop)) {
-        delete componentVariantProps[prop];
+    for (const prop in baseStyleProps) {
+      if (Object.hasOwn(baseStyleProps, prop)) {
+        delete baseStyleProps[prop];
       }
@@ -125,3 +77,3 @@ }
   const combinedProps = {
-    ...componentVariantProps,
+    ...baseStyleProps,
     ...specificProps,
@@ -131,9 +83,5 @@ ...styledProps,
   };
-  const key = stableStringify(combinedProps);
-  let generatedStyle = styleCache[key];
-  if (!generatedStyle) {
-    generatedStyle = new import_system.StyleGenerator(combinedProps).getStyle();
-    styleCache[key] = generatedStyle;
-  }
-  const { className: generatedClassName, css } = generatedStyle;
+  const { className: generatedClassName, css } = new import_system.StyleGenerator(
+    combinedProps
+  ).getStyle();
   if (!generatedClassName)
@@ -176,3 +124,2 @@ return { css };
 };
-var styleCache = {};
 // Annotate the CommonJS export names for ESM import in node:
@@ -179,0 +126,0 @@ 0 && (module.exports = {

dist/index.js

@@ -6,5 +6,5 @@ "use strict";
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all2) => {
-  for (var name in all2)
-    __defProp(target, name, { get: all2[name], enumerable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
@@ -29,3 +29,3 @@ var __copyProps = (to, from, except, desc) => {
 // src/compile.ts
-var import_ts_morph7 = require("ts-morph");
+var import_ts_morph8 = require("ts-morph");
 
@@ -135,3 +135,3 @@ // src/collector/collect.ts
     if (import_ts_morph4.Node.isJsxAttribute(jsxAttribute)) {
-      const propName = jsxAttribute.getNameNode().getFullText();
+      const propName = jsxAttribute.getNameNode().getText();
       let propValue;
@@ -172,49 +172,2 @@ if (propName.trim().startsWith("_")) {
 var import_sheet = require("@kuma-ui/sheet");
-
-// src/utils/stableStringify.ts
-function stableStringify(data) {
-  const seen = [];
-  return function stringify(node) {
-    if (node && node.toJSON && typeof node.toJSON === "function") {
-      node = node.toJSON();
-    }
-    if (node === void 0)
-      return;
-    if (typeof node == "number")
-      return isFinite(node) ? "" + node : "null";
-    if (typeof node !== "object")
-      return JSON.stringify(node);
-    let i, out;
-    if (Array.isArray(node)) {
-      out = "[";
-      for (i = 0; i < node.length; i++) {
-        if (i)
-          out += ",";
-        out += stringify(node[i]) || "null";
-      }
-      return out + "]";
-    }
-    if (node === null)
-      return "null";
-    if (seen.indexOf(node) !== -1) {
-      throw new TypeError("Converting circular structure to JSON");
-    }
-    const seenIndex = seen.push(node) - 1;
-    const keys = Object.keys(node).sort();
-    out = "";
-    for (i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      const value = stringify(node[key]);
-      if (!value)
-        continue;
-      if (out)
-        out += ",";
-      out += JSON.stringify(key) + ":" + value;
-    }
-    seen.splice(seenIndex, 1);
-    return "{" + out + "}";
-  }(data);
-}
-
-// src/extractor/extract.ts
 var extractProps = (componentName, jsx, propsMap) => {
@@ -225,24 +178,23 @@ const styledProps = {};
   const variant = import_sheet.theme.getVariants(componentName);
-  const componentVariantProps = {
+  const baseStyleProps = {
     ...variant?.baseStyle
   };
-  const defaultProps = (0, import_componentList.componentDefaultProps)(componentName);
+  const systemDefaultProps = (0, import_componentList.componentDefaultProps)(componentName);
+  const userDefaultProps = variant?.defaultProps;
   let isDefault = false;
   for (const [propName, propValue] of Object.entries({
-    ...defaultProps,
+    ...systemDefaultProps,
+    ...userDefaultProps,
     ...propsMap
   })) {
-    if ((0, import_system.isStyledProp)(propName.trim())) {
-      styledProps[propName.trim()] = propValue;
-    } else if ((0, import_system.isPseudoProps)(propName.trim())) {
-      pseudoProps[propName.trim()] = propValue;
-    } else if ((0, import_componentList.isComponentProps)(componentName)(propName.trim())) {
-      componentProps[propName.trim()] = propValue;
-    } else if (propName.trim() === "variant") {
-      Object.assign(
-        componentVariantProps,
-        variant?.variants?.[propValue]
-      );
+    if ((0, import_system.isStyledProp)(propName)) {
+      styledProps[propName] = propValue;
+    } else if ((0, import_system.isPseudoProps)(propName)) {
+      pseudoProps[propName] = propValue;
+    } else if ((0, import_componentList.isComponentProps)(componentName)(propName)) {
+      componentProps[propName] = propValue;
+    } else if (propName === "variant") {
+      Object.assign(baseStyleProps, variant?.variants?.[propValue]);
       jsx.getAttribute("variant")?.remove();
-    } else if (propName.trim() === "IS_KUMA_DEFAULT") {
+    } else if (propName === "IS_KUMA_DEFAULT") {
       isDefault = true;
@@ -256,5 +208,5 @@ }
   if (componentName === "Box" && isDefault) {
-    for (const prop in componentVariantProps) {
-      if (Object.hasOwn(componentVariantProps, prop)) {
-        delete componentVariantProps[prop];
+    for (const prop in baseStyleProps) {
+      if (Object.hasOwn(baseStyleProps, prop)) {
+        delete baseStyleProps[prop];
       }
@@ -264,3 +216,3 @@ }
   const combinedProps = {
-    ...componentVariantProps,
+    ...baseStyleProps,
     ...specificProps,
@@ -270,9 +222,5 @@ ...styledProps,
   };
-  const key = stableStringify(combinedProps);
-  let generatedStyle = styleCache[key];
-  if (!generatedStyle) {
-    generatedStyle = new import_system.StyleGenerator(combinedProps).getStyle();
-    styleCache[key] = generatedStyle;
-  }
-  const { className: generatedClassName, css } = generatedStyle;
+  const { className: generatedClassName, css } = new import_system.StyleGenerator(
+    combinedProps
+  ).getStyle();
   if (!generatedClassName)
@@ -315,12 +263,63 @@ return { css };
 };
-var styleCache = {};
 
 // src/compile.ts
+var import_componentList3 = require("@kuma-ui/core/components/componentList");
+
+// src/optimizer/optimize.ts
 var import_componentList2 = require("@kuma-ui/core/components/componentList");
+var import_ts_morph6 = require("ts-morph");
+var import_system2 = require("@kuma-ui/system");
+var optimize = (componentName, jsxElement, as) => {
+  const isOptimizable = jsxElement.getAttributes().every((attrLike) => {
+    if (import_ts_morph6.Node.isJsxSpreadAttribute(attrLike))
+      return false;
+    const attr = attrLike.asKindOrThrow(import_ts_morph6.SyntaxKind.JsxAttribute);
+    if (hasDynamicProp(attr.getNameNode().getText().trim(), !!as))
+      return false;
+    return true;
+  });
+  if (!isOptimizable)
+    return;
+  const rawHTMLTag = (() => {
+    const safeAs = typeof as === "string" ? as.replace(/['"`]/g, "") : as;
+    const tag = import_componentList2.defaultComponentTag[componentName];
+    if (safeAs) {
+      return safeAs;
+    } else {
+      if (typeof tag === "string")
+        return tag;
+      return "div";
+    }
+  })();
+  safeReplaceTagName(jsxElement, rawHTMLTag);
+};
+function hasDynamicProp(key, hasAs) {
+  return (0, import_system2.isStyledProp)(key) || (0, import_system2.isPseudoProps)(key) || key === "variant" || !hasAs && key === "as";
+}
+function safeReplaceTagName(jsxElement, newTagName) {
+  const originalComponent = jsxElement.getTagNameNode().getText();
+  try {
+    if (import_ts_morph6.Node.isJsxOpeningElement(jsxElement)) {
+      const jsxElementParent = jsxElement.getParentIfKind(
+        import_ts_morph6.SyntaxKind.JsxElement
+      );
+      if (jsxElementParent) {
+        jsxElementParent.getOpeningElement().getTagNameNode().replaceWithText(newTagName);
+        jsxElementParent.getClosingElement().getTagNameNode().replaceWithText(newTagName);
+      }
+    } else if (import_ts_morph6.Node.isJsxSelfClosingElement(jsxElement)) {
+      jsxElement.getTagNameNode().replaceWithText(newTagName);
+      jsxElement.getFirstDescendantByKind(import_ts_morph6.SyntaxKind.Identifier)?.replaceWithText(newTagName);
+    }
+    jsxElement.getAttribute("as")?.remove();
+    jsxElement.getAttribute("IS_KUMA_DEFAULT")?.remove();
+  } catch {
+  }
+}
 
 // src/processTaggedTemplateExpression.ts
-var import_ts_morph6 = require("ts-morph");
+var import_ts_morph7 = require("ts-morph");
 var import_sheet2 = require("@kuma-ui/sheet");
 var extractClassName = (templateLiteral) => {
-  if (import_ts_morph6.Node.isNoSubstitutionTemplateLiteral(templateLiteral)) {
+  if (import_ts_morph7.Node.isNoSubstitutionTemplateLiteral(templateLiteral)) {
     const cssString = templateLiteral.getLiteralText();
@@ -333,3 +332,3 @@ return cssString ? import_sheet2.sheet.parseCSS(cssString) : void 0;
   const tag = node.getTag();
-  if (import_ts_morph6.Node.isIdentifier(tag) && tag.getText() === bindings["css"]) {
+  if (import_ts_morph7.Node.isIdentifier(tag) && tag.getText() === bindings["css"]) {
     const className = extractClassName(node.getTemplate());
@@ -339,7 +338,7 @@ if (className) {
     }
-  } else if (import_ts_morph6.Node.isCallExpression(tag) && tag.getExpressionIfKind(import_ts_morph6.SyntaxKind.Identifier)?.getText() === bindings["styled"]) {
+  } else if (import_ts_morph7.Node.isCallExpression(tag) && tag.getExpressionIfKind(import_ts_morph7.SyntaxKind.Identifier)?.getText() === bindings["styled"]) {
     const className = extractClassName(node.getTemplate());
     if (className) {
       const componentArg = tag.getArguments()[0];
-      const component = import_ts_morph6.Node.isStringLiteral(componentArg) ? componentArg.getLiteralText() : "div";
+      const component = import_ts_morph7.Node.isStringLiteral(componentArg) ? componentArg.getLiteralText() : "div";
       node.replaceWithText(`props => {
@@ -356,3 +355,3 @@ const existingClassName = props.className || "";
 // src/compile.ts
-var project = new import_ts_morph7.Project({});
+var project = new import_ts_morph8.Project({});
 var compile = (code, id, bindings) => {
@@ -362,13 +361,13 @@ const css = [];
   source.forEachDescendant((node) => {
-    if (node.getKind() === import_ts_morph7.SyntaxKind.JsxElement || node.getKind() === import_ts_morph7.SyntaxKind.JsxSelfClosingElement) {
+    if (node.getKind() === import_ts_morph8.SyntaxKind.JsxElement || node.getKind() === import_ts_morph8.SyntaxKind.JsxSelfClosingElement) {
       let openingElement;
-      if (node.getKind() === import_ts_morph7.SyntaxKind.JsxElement) {
-        const jsxElement = node.asKindOrThrow(import_ts_morph7.SyntaxKind.JsxElement);
+      if (node.getKind() === import_ts_morph8.SyntaxKind.JsxElement) {
+        const jsxElement = node.asKindOrThrow(import_ts_morph8.SyntaxKind.JsxElement);
         openingElement = jsxElement.getOpeningElement();
       } else {
-        openingElement = node.asKindOrThrow(import_ts_morph7.SyntaxKind.JsxSelfClosingElement);
+        openingElement = node.asKindOrThrow(import_ts_morph8.SyntaxKind.JsxSelfClosingElement);
       }
       const jsxTagName = openingElement.getTagNameNode().getText();
       const originalComponentName = Object.keys(bindings).find(
-        (key) => bindings[key] === jsxTagName && Object.values(import_componentList2.componentList).some((c) => c === key)
+        (key) => bindings[key] === jsxTagName && Object.values(import_componentList3.componentList).some((c) => c === key)
       );
@@ -386,4 +385,9 @@ if (!originalComponentName)
         css.push(result.css);
+      optimize(
+        componentName,
+        openingElement,
+        extractedPropsMap["as"]
+      );
     }
-    if (import_ts_morph7.Node.isTaggedTemplateExpression(node)) {
+    if (import_ts_morph8.Node.isTaggedTemplateExpression(node)) {
       processTaggedTemplateExpression(node, bindings);
@@ -390,0 +394,0 @@ }

package.json

 {
   "name": "@kuma-ui/compiler",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -34,5 +34,5 @@ "repository": {
     "ts-pattern": "^5.0.1",
-    "@kuma-ui/core": "^1.3.0",
-    "@kuma-ui/sheet": "^1.2.0",
-    "@kuma-ui/system": "^1.4.0"
+    "@kuma-ui/core": "^1.4.0",
+    "@kuma-ui/sheet": "^1.3.0",
+    "@kuma-ui/system": "^1.5.0"
   },
@@ -42,5 +42,12 @@ "publishConfig": {
   },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@vitest/coverage-c8": "0.31.4",
+    "react": "^18.2.0",
+    "vitest": "0.31.4"
+  },
   "scripts": {
     "build": "tsup --config ../../tsup.config.ts",
     "typecheck": "tsc --noEmit --composite false",
+    "test": "vitest --config ./vitest.config.ts",
     "lint": "eslint './src/**/*.{js,ts,jsx,tsx}' --report-unused-disable-directives --max-warnings 0",
@@ -47,0 +54,0 @@ "lint:fix": "eslint --fix './src/**/*.{js,ts,jsx,tsx}' --report-unused-disable-directives --max-warnings 0"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

89240

decreased by-0.25%

Dev dependency count

4

increased byInfinity%

Lines of code

2229

decreased by-3.67%

Dependency changes

• Updated@kuma-ui/core@^1.4.0

• Updated@kuma-ui/sheet@^1.3.0

• Updated@kuma-ui/system@^1.5.0