FEAT: Usage comment prefix (#36)

* Added usage comment functionality to core package

* Added usage comment to the generated code

* docs(changeset): Added usage comment prefix

* Updated changeset workflow

* Added ignore paths

* Updated ignore glob

* Removed test commands from figma package

* Disabled fail on error

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": []
+  "ignore": ["figma-to-swiftui", "tsconfig", "nextjs"]
 }

.changeset/rotten-trains-greet.md

@@ -0,0 +1,6 @@
+---
+"svg-to-swiftui-core": patch
+"figma-to-swiftui": patch
+---
+
+Added usage comment prefix

.github/workflows/codecov.yml

@@ -31,5 +31,5 @@ jobs:
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           name: codecov-umbrella
-          fail_ci_if_error: true
+          fail_ci_if_error: false
           verbose: true

packages/figma-to-swiftui/README.md

@@ -0,0 +1,26 @@
+# Figma to SwiftUI Converter
+
+## Overview
+
+This plugin lets you export paths from Figma to SwiftUI Shape structure.
+
+## How to use
+
+- Select the vector object that you want to convert.
+- Make sure you **select the specific vector path** that you want to convert.
+- Open Figma DEV mode.
+- Select SwiftUI Code Generator from the language export options.
+- Copy code and paste it into your SwiftUI project!
+
+## Links
+
+- Visit Web App version of this converter [here](https://dub.sh/svg-to-swiftui).
+- Need help with developing your designs? Visit my development agency [Quassum](https://dub.sh/quassum)!
+- Made by [Antoni](https://dub.sh/antoni)
+
+## Community
+
+Wanna suggest some changes or just to say hi? Join our community here:
+
+- [Github Discussions](https://github.com/quassum/SVG-to-SwiftUI/discussions)
+- [Quassum Discord](https://discord.gg/VzpZ7np622)

packages/figma-to-swiftui/package.json

@@ -5,8 +5,6 @@
   "scripts": {
     "build": "tsup src/index.ts --format iife --target es5",
     "clean": "rimraf dist",
-    "test": "jest",
-    "coverage": "jest --ci --coverage",
     "lint": "eslint ./src/**/*",
     "lint:fix": "eslint ./src/**/* --fix",
     "format": "prettier --write ./src --loglevel error"

packages/figma-to-swiftui/src/index.ts

@@ -29,6 +29,7 @@ if (figma.editorType === "dev" && figma.mode === "codegen") {
 
     const swiftUI = convert(SVG_TEMPLATE, {
       structName: node.name.replace(/\s/g, ""),
+      usageCommentPrefix: true,
     });
 
     return [

packages/svg-to-swiftui-core/src/index.ts

@@ -1,12 +1,16 @@
-import { ElementNode, parse } from "svg-parser";
-import { generateSwiftUIShape } from "./stubs";
-import { SwiftUIGeneratorConfig, TranspilerOptions } from "./types";
+import {ElementNode, parse} from 'svg-parser';
+import {SwiftUIGeneratorConfig, TranspilerOptions} from './types';
 
-import { handleElement } from "./elementHandlers";
-import { extractSVGProperties, getSVGElement } from "./utils";
-import { DEFAULT_CONFIG } from "./constants";
+import {handleElement} from './elementHandlers';
+import {extractSVGProperties, getSVGElement} from './utils';
+import {DEFAULT_CONFIG} from './constants';
+import {
+  createFunctionTemplate,
+  createStructTemplate,
+  createUsageCommentTemplate,
+} from './templates';
 
-export * from "./types";
+export * from './types';
 
 /**
  * This function converts SVG string into SwiftUI
@@ -15,18 +19,18 @@ export * from "./types";
  * @param config Optional configuration object.
  */
 export function convert(
-	rawSVGString: string,
-	config?: SwiftUIGeneratorConfig,
+  rawSVGString: string,
+  config?: SwiftUIGeneratorConfig
 ): string {
-	const AST = parse(rawSVGString);
-	const svgElement = getSVGElement(AST);
-	if (svgElement) {
-		return swiftUIGenerator(svgElement, config);
-	} else {
-		throw new Error(
-			"Could not find SVG element, please provide full SVG source!",
-		);
-	}
+  const AST = parse(rawSVGString);
+  const svgElement = getSVGElement(AST);
+  if (svgElement) {
+    return swiftUIGenerator(svgElement, config);
+  } else {
+    throw new Error(
+      'Could not find SVG element, please provide full SVG source!'
+    );
+  }
 }
 
 /**
@@ -35,29 +39,56 @@ export function convert(
  * @param config Optional configuration object.
  */
 function swiftUIGenerator(
-	svgElement: ElementNode,
-	config?: SwiftUIGeneratorConfig,
+  svgElement: ElementNode,
+  config?: SwiftUIGeneratorConfig
 ): string {
-	const svgProperties = extractSVGProperties(svgElement);
-
-	// The initial options passed to the first element.
-	const rootTranspilerOptions: TranspilerOptions = {
-		...svgProperties,
-		precision: config?.precision || 10,
-		lastPathId: 0,
-		indentationSize: config?.indentationSize || 4,
-		currentIndentationLevel: 0,
-		parentStyle: {},
-	};
-
-	// Generate SwiftUI Shape body.
-	const generatedBody = handleElement(svgElement, rootTranspilerOptions);
-
-	// Inject generated body into the Shape struct template.
-	const fullSwiftUIShape = generateSwiftUIShape(generatedBody, {
-		...DEFAULT_CONFIG,
-		...config,
-	});
-
-	return fullSwiftUIShape;
+  const svgProperties = extractSVGProperties(svgElement);
+
+  // The initial options passed to the first element.
+  const rootTranspilerOptions: TranspilerOptions = {
+    ...svgProperties,
+    precision: config?.precision || 10,
+    lastPathId: 0,
+    indentationSize: config?.indentationSize || 4,
+    currentIndentationLevel: 0,
+    parentStyle: {},
+  };
+
+  const configWithDefaults = {
+    ...DEFAULT_CONFIG,
+    ...config,
+  };
+
+  // Generate SwiftUI Shape body.
+  const generatedBody = handleElement(svgElement, rootTranspilerOptions);
+
+  const fullSwiftUIShape = createStructTemplate({
+    name: configWithDefaults.structName!,
+    indent: configWithDefaults.indentationSize,
+    returnType: 'Shape',
+    body: createFunctionTemplate({
+      name: 'path',
+      parameters: [['in rect', 'CGRect']],
+      returnType: 'Path',
+      indent: configWithDefaults.indentationSize,
+      body: [
+        'var path = Path()',
+        'let width = rect.size.width',
+        'let height = rect.size.height',
+        ...generatedBody,
+        'return path',
+      ],
+    }),
+  });
+
+  if (config?.usageCommentPrefix) {
+    const usageComment = createUsageCommentTemplate({
+      config,
+      viewBox: svgProperties.viewBox,
+    });
+
+    return [...usageComment, '', ...fullSwiftUIShape].join('\n');
+  }
+
+  return fullSwiftUIShape.join('\n');
 }

packages/svg-to-swiftui-core/src/templates.ts

@@ -0,0 +1,63 @@
+import {SwiftUIGeneratorConfig, ViewBoxData} from './types';
+
+export const createUsageCommentTemplate = ({
+  config,
+  viewBox,
+}: {
+  config: SwiftUIGeneratorConfig;
+  viewBox: ViewBoxData;
+}) => [
+  '// To use this shape, just add it to your SwiftUI View:',
+  `// ${config.structName}().fill().frame(width: ${viewBox.width}, height: ${viewBox.height})`,
+];
+
+type ParameterName = string;
+type ParameterType = string;
+
+const indentStrings = ({indent, body}: {indent: number; body: string[]}) => {
+  return body.map(row => `${new Array(indent).fill(' ').join('')}${row}`);
+};
+
+const parametersToStrings = (parameters: [ParameterName, ParameterType][]) => {
+  return parameters.map(([name, type]) => `${name}: ${type}`).join(', ');
+};
+
+export const createFunctionTemplate = ({
+  name,
+  parameters,
+  returnType,
+  body,
+  indent = 4,
+}: {
+  name: string;
+  parameters: [ParameterName, ParameterType][];
+  returnType: string;
+  body: string[];
+  indent?: number;
+}) => {
+  const parametersString = parametersToStrings(parameters);
+
+  return [
+    `func ${name}(${parametersString}) -> ${returnType} {`,
+    ...indentStrings({body, indent}),
+    `}`,
+  ];
+};
+
+export const createStructTemplate = ({
+  name,
+  returnType,
+  body,
+  indent = 4,
+}: {
+  name: string;
+  returnType: string;
+  body: string[];
+  indent?: number;
+}) => {
+  return [
+    `struct ${name}: ${returnType} {`,
+    ...indentStrings({body, indent}),
+    `}`,
+  ];
+};

packages/svg-to-swiftui-core/src/tests/index.test.ts

@@ -13,10 +13,13 @@ test('conversion-1', () => {
 test('convert-circle', () => {
   const rawSVG = loadContentFile('circle.svg');
   const expectedResult = loadContentFile('circle.swift');
+
   const result = convert(rawSVG, {
     precision: 2,
     structName: 'CircleShape',
   });
+  console.log('expectedResult', expectedResult);
+  console.log('result', result);
   expect(result).toBe(expectedResult);
 });
 

packages/svg-to-swiftui-core/src/types.ts

@@ -2,6 +2,7 @@ export interface SwiftUIGeneratorConfig {
   structName?: string;
   precision?: number;
   indentationSize?: number;
+  usageCommentPrefix?: boolean;
 }
 
 export interface TranspilerOptions {