chore(button): minification tricks

packages/core/src/components/button/button.tsx

@@ -161,12 +161,60 @@ export class Button {
    */
   @Prop() color: string;
 
+  render() {
+    const buttonType = this.buttonType;
+    const mode = this.mode;
+
+    const size =
+      (this.large ? 'large' : null) ||
+      (this.small ? 'small' : null) ||
+      (this.default ? 'default' : null);
+
+    const shape = (this.round ? 'round' : null);
+
+    const display =
+      (this.block ? 'block' : null) ||
+      (this.full ? 'full' : null);
+
+    const decorator = (this.strong ? 'strong' : null);
+
+    const buttonClasses: CssClassMap = []
+      .concat(
+        getButtonClassList(buttonType, mode),
+        getClassList(buttonType, shape, mode),
+        getClassList(buttonType, display, mode),
+        getClassList(buttonType, size, mode),
+        getClassList(buttonType, decorator, mode),
+        getStyleClassList(mode, this.color, buttonType, this.outline, this.clear, this.solid),
+        getItemClassList(this.itemButton, size),
+        getElementClassList(this.el.classList)
+      )
+      .reduce((prevValue, cssClass) => {
+        prevValue[cssClass] = true;
+        return prevValue;
+      }, {});
+
+    const TagType = this.href ? 'a' : 'button';
+
+    return (
+      <TagType class={buttonClasses} disabled={this.disabled}>
+        <span class='button-inner'>
+          <slot name='icon-only'></slot>
+          <slot name='start'></slot>
+          <slot></slot>
+          <slot name='end'></slot>
+        </span>
+        <div class='button-effect'></div>
+      </TagType>
+    );
+  }
+}
+
 /**
-   * @hidden
  * Get the classes based on the button type
  * e.g. alert-button, action-sheet-button
  */
-  private getButtonClassList(buttonType: string, mode: string): string[] {
+function getButtonClassList(buttonType: string, mode: string): string[] {
   if (!buttonType) {
     return [];
   }
@@ -178,11 +226,10 @@ export class Button {
 
 
 /**
-   * @hidden
  * Get the classes based on the type
  * e.g. block, full, round, large
  */
-  private getClassList(buttonType: string, type: string, mode: string): string[] {
+function getClassList(buttonType: string, type: string, mode: string): string[] {
   if (!type) {
     return [];
   }
@@ -194,11 +241,11 @@ export class Button {
 }
 
 /**
-   * @hidden
  * Get the classes for the color
  */
-  private getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
+function getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
   style = (buttonType !== 'bar-button' && style === 'solid') ? 'default' : style;
+
   let className =
     buttonType +
     ((style && style !== 'default') ?
@@ -222,90 +269,37 @@ export class Button {
 }
 
 /**
-   * @hidden
  * Get the classes for the style
  * e.g. outline, clear, solid
  */
-  private getStyleClassList(buttonType: string): string[] {
+function getStyleClassList(mode: string, color: string, buttonType: string, outline: boolean, clear: boolean, solid: boolean): string[] {
   let classList = [].concat(
-      this.outline ? this.getColorClassList(this.color, buttonType, 'outline', this.mode) : [],
+    outline ? getColorClassList(color, buttonType, 'outline', mode) : [],
-      this.clear ? this.getColorClassList(this.color, buttonType, 'clear', this.mode) : [],
+    clear ? getColorClassList(color, buttonType, 'clear', mode) : [],
-      this.solid ? this.getColorClassList(this.color, buttonType, 'solid', this.mode) : []
+    solid ? getColorClassList(color, buttonType, 'solid', mode) : []
   );
 
   if (classList.length === 0) {
-      classList = this.getColorClassList(this.color, buttonType, 'default', this.mode);
+    classList = getColorClassList(color, buttonType, 'default', mode);
   }
 
   return classList;
 }
 
 /**
-   * @hidden
  * Get the item classes for the button
  */
-  private getItemClassList(size: string) {
+function getItemClassList(itemButton: boolean, size: string) {
-    let classList = [].concat(
+  return itemButton && !size ? ['item-button'] : [];
-      this.itemButton && !size ? 'item-button' : []
-    );
-
-    return classList;
 }
 
 /**
-   * @hidden
  * Get the element classes to add to the child element
  */
-  private getElementClassList() {
+function getElementClassList(elmClassList: DOMTokenList) {
-    let classList = [].concat(
+  const classList: string[] = [];
-      this.el.className.length ? this.el.className.split(' ') : []
+  for (var i = 0; i < elmClassList.length; i++) {
-    );
+    classList.push(elmClassList.item(i));
-
+  }
   return classList;
 }
-
-  render() {
-    const size =
-      (this.large ? 'large' : null) ||
-      (this.small ? 'small' : null) ||
-      (this.default ? 'default' : null);
-
-    const shape = (this.round ? 'round' : null);
-
-    const display =
-      (this.block ? 'block' : null) ||
-      (this.full ? 'full' : null);
-
-    const decorator = (this.strong ? 'strong' : null);
-
-    const buttonClasses: CssClassMap = []
-      .concat(
-        this.getButtonClassList(this.buttonType, this.mode),
-        this.getClassList(this.buttonType, shape, this.mode),
-        this.getClassList(this.buttonType, display, this.mode),
-        this.getClassList(this.buttonType, size, this.mode),
-        this.getClassList(this.buttonType, decorator, this.mode),
-        this.getStyleClassList(this.buttonType),
-        this.getItemClassList(size),
-        this.getElementClassList()
-      )
-      .reduce((prevValue, cssClass) => {
-        prevValue[cssClass] = true;
-        return prevValue;
-      }, {});
-
-    const TagType = this.href ? 'a' : 'button';
-
-    return (
-      <TagType class={buttonClasses} disabled={this.disabled}>
-        <span class='button-inner'>
-          <slot name='icon-only'></slot>
-          <slot name='start'></slot>
-          <slot></slot>
-          <slot name='end'></slot>
-        </span>
-        <div class='button-effect'></div>
-      </TagType>
-    );
-  }
-}