Layer names (#142)

* Added a note about debug mode

* Update README.md

Added image of debug mode

* refacotred layerName into showLayerNames globally

* Layer Names are now an attribute called data-layer rather than a class name. Refactored build() in builder classes slightly

* Added layer name to data-layer and kept class layer name too

Author: mimshwright

apps/plugin/plugin-src/code.ts

@@ -19,7 +19,7 @@ const defaultPluginSettings: PluginSettings = {
   framework: "HTML",
   jsx: false,
   optimizeLayout: true,
-  layerName: false,
+  showLayerNames: false,
   inlineStyle: true,
   responsiveRoot: false,
   flutterGenerationMode: "snippet",

packages/backend/src/code.ts

@@ -15,7 +15,7 @@ export type PluginSettings = {
   jsx: boolean;
   inlineStyle: boolean;
   optimizeLayout: boolean;
-  layerName: boolean;
+  showLayerNames: boolean;
   responsiveRoot: boolean;
   flutterGenerationMode: string;
   swiftUIGenerationMode: string;

packages/backend/src/common/commonFormatAttributes.ts

@@ -0,0 +1,27 @@
+import { stringToClassName as stringToClassName } from "./numToAutoFixed";
+
+export const getClassLabel = (isJSX: boolean = false) =>
+  isJSX ? "className" : "class";
+
+export const joinStyles = (styles: string[], isJSX: boolean) =>
+  styles.map((s) => s.trim()).join(isJSX ? ", " : "; ");
+
+export const formatStyleAttribute = (
+  styles: string[],
+  isJSX: boolean,
+): string => {
+  const trimmedStyles = joinStyles(styles, isJSX);
+
+  if (trimmedStyles === "") return "";
+
+  return ` style=${isJSX ? `{{${trimmedStyles}}}` : `"${trimmedStyles}"`}`;
+};
+
+export const formatLayerNameAttribute = (name: string) =>
+  name === "" ? "" : ` data-layer="${name}"`;
+
+export const formatClassAttribute = (
+  classes: string[],
+  isJSX: boolean,
+): string =>
+  classes.length === 0 ? "" : ` ${getClassLabel(isJSX)}="${classes.join(" ")}"`;

packages/backend/src/common/numToAutoFixed.ts

@@ -86,7 +86,7 @@ function escapeRegExp(string: string) {
 export const replaceAllUtil = (str: string, find: string, replace: string) =>
   str.replace(new RegExp(escapeRegExp(find), "g"), replace);
 
-export function className(name: string): string {
+export function stringToClassName(name: string): string {
   const words = name.split(/[^a-zA-Z0-9]+/);
   const camelCaseWords = words.map((word, index) => {
     if (index === 0) {

packages/backend/src/flutter/flutterMain.ts

@@ -1,4 +1,7 @@
-import { className, generateWidgetCode } from "../common/numToAutoFixed";
+import {
+  stringToClassName,
+  generateWidgetCode,
+} from "../common/numToAutoFixed";
 import { retrieveTopFill } from "../common/retrieveFill";
 import { FlutterDefaultBuilder } from "./flutterDefaultBuilder";
 import { FlutterTextBuilder } from "./flutterTextBuilder";
@@ -67,10 +70,10 @@ export const flutterMain = (
       return result;
     case "stateless":
       result = generateWidgetCode("Column", { children: [result] });
-      return getStatelessTemplate(className(sceneNode[0].name), result);
+      return getStatelessTemplate(stringToClassName(sceneNode[0].name), result);
     case "fullApp":
       result = generateWidgetCode("Column", { children: [result] });
-      return getFullAppTemplate(className(sceneNode[0].name), result);
+      return getFullAppTemplate(stringToClassName(sceneNode[0].name), result);
   }
 
   return result;

packages/backend/src/html/htmlDefaultBuilder.ts

@@ -7,7 +7,6 @@ import {
   htmlBlendMode,
 } from "./builderImpl/htmlBlend";
 import {
-  htmlColor,
   htmlColorFromFills,
   htmlGradientFromFills,
 } from "./builderImpl/htmlColor";
@@ -18,22 +17,25 @@ import {
   commonIsAbsolutePosition,
   getCommonPositionValue,
 } from "../common/commonPosition";
-import { className, sliceNum } from "../common/numToAutoFixed";
+import { sliceNum, stringToClassName } from "../common/numToAutoFixed";
 import { commonStroke } from "../common/commonStroke";
+import {
+  formatClassAttribute,
+  formatLayerNameAttribute,
+  formatStyleAttribute,
+} from "../common/commonFormatAttributes";
 
 export class HtmlDefaultBuilder {
   styles: Array<string>;
   isJSX: boolean;
   visible: boolean;
-  name: string = "";
+  name: string;
 
-  constructor(node: SceneNode, showLayerName: boolean, optIsJSX: boolean) {
+  constructor(node: SceneNode, showLayerNames: boolean, optIsJSX: boolean) {
     this.isJSX = optIsJSX;
     this.styles = [];
     this.visible = node.visible;
-    if (showLayerName) {
-      this.name = className(node.name);
-    }
+    this.name = showLayerNames ? node.name : "";
   }
 
   commonPositionStyles(
@@ -287,20 +289,14 @@ export class HtmlDefaultBuilder {
   build(additionalStyle: Array<string> = []): string {
     this.addStyles(...additionalStyle);
 
-    const formattedStyles = this.styles.map((s) => s.trim());
-    let formattedStyle = "";
-    if (this.styles.length > 0) {
-      if (this.isJSX) {
-        formattedStyle = ` style={{${formattedStyles.join(", ")}}}`;
-      } else {
-        formattedStyle = ` style="${formattedStyles.join("; ")}"`;
-      }
-    }
-    if (this.name.length > 0) {
-      const classOrClassName = this.isJSX ? "className" : "class";
-      return ` ${classOrClassName}="${this.name}"${formattedStyle}`;
-    } else {
-      return formattedStyle;
-    }
+    const layerNameAttribute = formatLayerNameAttribute(this.name);
+    const layerNameClass = stringToClassName(this.name);
+    const classAttribute = formatClassAttribute(
+      layerNameClass === "" ? [] : [layerNameClass],
+      this.isJSX,
+    );
+    const styleAttribute = formatStyleAttribute(this.styles, this.isJSX);
+
+    return `${layerNameAttribute}${classAttribute}${styleAttribute}`;
   }
 }

packages/backend/src/html/htmlMain.ts

@@ -7,7 +7,7 @@ import { htmlAutoLayoutProps } from "./builderImpl/htmlAutoLayout";
 import { formatWithJSX } from "../common/parseJSX";
 import { commonSortChildrenWhenInferredAutoLayout } from "../common/commonChildrenOrder";
 
-let showLayerName = false;
+let showLayerNames = false;
 
 const selfClosingTags = ["img"];
 
@@ -21,7 +21,7 @@ export const htmlMain = (
   settings: PluginSettings,
   isPreview: boolean = false,
 ): string => {
-  showLayerName = settings.layerName;
+  showLayerNames = settings.showLayerNames;
   isPreviewGlobal = isPreview;
   previousExecutionCache = [];
   localSettings = settings;
@@ -95,7 +95,7 @@ const htmlGroup = (node: GroupNode, isJsx: boolean = false): string => {
   // this needs to be called after CustomNode because widthHeight depends on it
   const builder = new HtmlDefaultBuilder(
     node,
-    showLayerName,
+    showLayerNames,
     isJsx,
   ).commonPositionStyles(node, localSettings.optimizeLayout);
 
@@ -112,7 +112,7 @@ const htmlGroup = (node: GroupNode, isJsx: boolean = false): string => {
 
 // this was split from htmlText to help the UI part, where the style is needed (without <p></p>).
 export const htmlText = (node: TextNode, isJsx: boolean): string => {
-  let layoutBuilder = new HtmlTextBuilder(node, showLayerName, isJsx)
+  let layoutBuilder = new HtmlTextBuilder(node, showLayerNames, isJsx)
     .commonPositionStyles(node, localSettings.optimizeLayout)
     .textAlign(node);
 
@@ -168,7 +168,7 @@ export const htmlAsset = (node: SceneNode, isJsx: boolean = false): string => {
     return "";
   }
 
-  const builder = new HtmlDefaultBuilder(node, showLayerName, isJsx)
+  const builder = new HtmlDefaultBuilder(node, showLayerNames, isJsx)
     .commonPositionStyles(node, localSettings.optimizeLayout)
     .commonShapeStyles(node);
 
@@ -208,7 +208,7 @@ export const htmlContainer = (
     return children;
   }
 
-  const builder = new HtmlDefaultBuilder(node, showLayerName, isJsx)
+  const builder = new HtmlDefaultBuilder(node, showLayerNames, isJsx)
     .commonPositionStyles(node, localSettings.optimizeLayout)
     .commonShapeStyles(node);
 
@@ -253,7 +253,7 @@ export const htmlSection = (
   isJsx: boolean = false,
 ): string => {
   const childrenStr = htmlWidgetGenerator(node.children, isJsx);
-  const builder = new HtmlDefaultBuilder(node, showLayerName, isJsx)
+  const builder = new HtmlDefaultBuilder(node, showLayerNames, isJsx)
     .size(node, localSettings.optimizeLayout)
     .position(node, localSettings.optimizeLayout)
     .applyFillsToStyle(node.fills, "background");
@@ -266,7 +266,7 @@ export const htmlSection = (
 };
 
 export const htmlLine = (node: LineNode, isJsx: boolean): string => {
-  const builder = new HtmlDefaultBuilder(node, showLayerName, isJsx)
+  const builder = new HtmlDefaultBuilder(node, showLayerNames, isJsx)
     .commonPositionStyles(node, localSettings.optimizeLayout)
     .commonShapeStyles(node);
 

packages/backend/src/html/htmlTextBuilder.ts

@@ -8,8 +8,8 @@ import {
 } from "../common/commonTextHeightSpacing";
 
 export class HtmlTextBuilder extends HtmlDefaultBuilder {
-  constructor(node: TextNode, showLayerName: boolean, optIsJSX: boolean) {
-    super(node, showLayerName, optIsJSX);
+  constructor(node: TextNode, showLayerNames: boolean, optIsJSX: boolean) {
+    super(node, showLayerNames, optIsJSX);
   }
 
   getTextSegments(id: string): { style: string; text: string }[] {

packages/backend/src/swiftui/swiftuiMain.ts

@@ -1,5 +1,5 @@
 import { indentString } from "../common/indentString";
-import { className, sliceNum } from "../common/numToAutoFixed";
+import { stringToClassName, sliceNum } from "../common/numToAutoFixed";
 import { SwiftuiTextBuilder } from "./swiftuiTextBuilder";
 import { SwiftuiDefaultBuilder } from "./swiftuiDefaultBuilder";
 import { PluginSettings } from "../code";
@@ -43,10 +43,10 @@ export const swiftuiMain = (
       return result;
     case "struct":
       // result = generateWidgetCode("Column", { children: [result] });
-      return getStructTemplate(className(sceneNode[0].name), result);
+      return getStructTemplate(stringToClassName(sceneNode[0].name), result);
     case "preview":
       // result = generateWidgetCode("Column", { children: [result] });
-      return getPreviewTemplate(className(sceneNode[0].name), result);
+      return getPreviewTemplate(stringToClassName(sceneNode[0].name), result);
   }
 
   // remove the initial \n that is made in Container.

packages/backend/src/tailwind/tailwindDefaultBuilder.ts

@@ -1,4 +1,4 @@
-import { className, sliceNum } from "./../common/numToAutoFixed";
+import { stringToClassName, sliceNum } from "./../common/numToAutoFixed";
 import { tailwindShadow } from "./builderImpl/tailwindShadow";
 import {
   tailwindVisibility,
@@ -21,28 +21,41 @@ import {
   getCommonPositionValue,
 } from "../common/commonPosition";
 import { pxToBlur } from "./conversionTables";
+import {
+  getClassLabel,
+  formatStyleAttribute,
+} from "../common/commonFormatAttributes";
+
+const isNotEmpty = (s: string) => s !== "";
+const dropEmptyStrings = (strings: string[]) => strings.filter(isNotEmpty);
 
 export class TailwindDefaultBuilder {
   attributes: string[] = [];
   style: string;
   styleSeparator: string = "";
   isJSX: boolean;
   visible: boolean;
-  name: string = "";
+  name: string;
 
-  constructor(node: SceneNode, showLayerName: boolean, optIsJSX: boolean) {
+  constructor(node: SceneNode, showLayerNames: boolean, optIsJSX: boolean) {
     this.isJSX = optIsJSX;
     this.styleSeparator = this.isJSX ? "," : ";";
     this.style = "";
     this.visible = node.visible;
+    this.name = showLayerNames ? node.name : "";
 
-    if (showLayerName) {
+    /*
+    if (showLayerNames) {
       this.attributes.push(className(node.name));
     }
+    */
   }
 
   addAttributes = (...newStyles: string[]) => {
-    this.attributes.push(...newStyles.filter((style) => style !== ""));
+    this.attributes.push(...dropEmptyStrings(newStyles));
+  };
+  prependAttributes = (...newStyles: string[]) => {
+    this.attributes.unshift(...dropEmptyStrings(newStyles));
   };
 
   blend(
@@ -224,21 +237,21 @@ export class TailwindDefaultBuilder {
   }
 
   build(additionalAttr = ""): string {
-    // this.attributes.unshift(this.name + additionalAttr);
     this.addAttributes(additionalAttr);
 
-    if (this.style.length > 0) {
-      this.style = ` style="${this.style}"`;
-    }
-    if (!this.attributes.length && !this.style) {
-      return "";
-    }
-    const classOrClassName = this.isJSX ? "className" : "class";
-    if (this.attributes.length === 0) {
-      return "";
+    if (this.name !== "") {
+      this.prependAttributes(stringToClassName(this.name));
     }
+    const layerName = this.name ? ` data-layer="${this.name}"` : "";
+
+    const classLabel = getClassLabel(this.isJSX);
+    const classNames =
+      this.attributes.length > 0
+        ? ` ${classLabel}="${this.attributes.join(" ")}"`
+        : "";
+    const styles = this.style.length > 0 ? ` style="${this.style}"` : "";
 
-    return ` ${classOrClassName}="${this.attributes.join(" ")}"${this.style}`;
+    return `${layerName}${classNames}${styles}`;
   }
 
   reset(): void {