Code Connect v1.1.0

Author: figma-bot

.gitignore

@@ -11,3 +11,4 @@ bundle/
 .swiftpm/
 bundle-cli
 webpack-dist
+bundle-npm

CHANGELOG.md

@@ -1,3 +1,30 @@
+# Code Connect v1.1.0 (10th September 2024)
+
+## Features
+
+### HTML
+- Added support for documenting HTML-based frameworks (including Web Components, Angular and Vue), using the new `html` parser. See the [documentation](docs/html.md) for more information.
+
+  HTML support for Code Connect is in preview, and the API is liable to change during this period. Please let us know your feedback via [GitHub Issues](https://github.com/figma/code-connect/issues/new/choose).
+
+### SwiftUI
+- Added a `swiftPackagePath` configuration option to specify a custom path to a `Package.swift` file to run Code Connect from.
+
+### React
+- Code Connect files created in the CLI assistant will now start including some auto-generated prop mappings between Figma properties and linked code props. This is an early feature and support for different prop types is limited.
+
+### General
+
+- Restructured the Code Connect documentation. All documentation can now be found in the [docs](docs) directory.
+
+## Fixed
+
+### React
+- `figma.nestedProps` can now be used in conjunction with `figma.boolean` for conditionally hidden nested instances (fixes https://github.com/figma/code-connect/issues/118, https://github.com/figma/code-connect/issues/89)
+- Fixed an issue where backticks could not be used in the example code (fixes https://github.com/figma/code-connect/issues/139)
+- Fixed an issue with wildcard paths in import mappings
+- Fixed an error when trying to use the icon script with component sets
+
 # Code Connect v1.0.6 (21st August 2024)
 
 ## Fixed
@@ -7,7 +34,6 @@
 
 ## Features
 
-
 ### React
 - figma.enum now supports floating point numbers
 

Package.resolved

@@ -14,8 +14,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/apple/swift-syntax",
       "state" : {
-        "revision" : "64889f0c732f210a935a0ad7cda38f77f876262d",
-        "version" : "509.1.1"
+        "revision" : "2bc86522d115234d1f588efe2bcb4ce4be8f8b82",
+        "version" : "510.0.3"
       }
     },
     {

Package.swift

@@ -15,7 +15,7 @@ let package = Package(
         .executable(name: "figma-swift", targets: ["CodeConnectCLI"])
     ],
     dependencies: [
-        .package(url: "https://github.com/apple/swift-syntax", from: "509.1.1"),
+        .package(url: "https://github.com/apple/swift-syntax", "510.0.3"..."600.0.0-prerelease-2024-08-14"),
         .package(url: "https://github.com/apple/swift-argument-parser", from: "1.0.0"),
         .package(url: "https://github.com/nicklockwood/SwiftFormat", from: "0.49.0"),
     ],

README.md

@@ -2,7 +2,7 @@
 
 Code Connect is a tool for connecting your design system components in code with your design system in Figma. When using Code Connect, Figma's Dev Mode will display true-to-production code snippets from your design system instead of autogenerated code examples. In addition to connecting component definitions, Code Connect also supports mapping properties from code to Figma enabling dynamic and correct examples. This can be useful for when you have an existing design system and are looking to drive consistent and correct adoption of that design system across design and engineering.
 
-Code Connect is easy to set up, easy to maintain, type-safe, and extensible. Out of the box Code Connect comes with support for React (and React Native), Storybook, SwiftUI and Jetpack Compose.
+Code Connect is easy to set up, easy to maintain, type-safe, and extensible. Out of the box Code Connect comes with support for React (and React Native), Storybook, HTML (e.g. Web Components, Angular and Vue), SwiftUI and Jetpack Compose.
 
 ![image](https://static.figma.com/uploads/d98e747613e01685d6a0f9dd3e2dcd022ff289c0.png)
 
@@ -25,9 +25,10 @@ We hope to provide a way to install Code Connect without requiring Node.js soon.
 
 To learn how to implement Code Connect for your platform, please navigate to the platform-specific API usage and documentation.
 
-- [React (or React Native)](cli/README.md)
-- [SwiftUI](swiftui/README.md)
-- [Jetpack Compose](compose/README.md)
+- [React (or React Native)](docs/react.md)
+- [HTML (Web Components, Angular, Vue, etc.)](docs/html.md)
+- [SwiftUI](docs/swiftui.md)
+- [Jetpack Compose](docs/compose.md)
 
 ## General configuration
 
@@ -53,10 +54,11 @@ Every platform supports some common configuration options, in addition to any pl
 Code Connect will attempt to determine your project type by looking the first ancestor of the working directory which matches one of the following:
 
 - If a `package.json` containing `react` is found, your project is detected as React
+- If a `package.json` is found not containing `react`, your project is detected as HTML
 - If a file matching `Package.swift` or `*.xcodeproj` is found, your project is detected as Swift
 - If a file matching `build.gradle.kts` is found, your project is detected as Jetpack Compose
 
-In case this does not correctly work for your project, you can override the project type by using the `parser` configuration key. Valid values are `react`, `swift` and `compose`.
+In case this does not correctly work for your project, you can override the project type by using the `parser` configuration key. Valid values are `react`, `html`, `swift` and `compose`.
 
 ```jsonp
 {
@@ -66,6 +68,10 @@ In case this does not correctly work for your project, you can override the proj
 }
 ```
 
+### `label`
+
+`label` allows you to specify the label used in Figma for your Code Connect docs. This defaults to the type of your project (e.g. `React`). You can override this to show a different name in the UI, which can be useful for e.g. showing different versions of the code.
+
 ### `documentUrlSubstitutions`
 
 `documentUrlSubstitutions` allows you to specify a set of substitutions which will be run on the `figmaNode` URLs when parsing or publishing documents.