Skip to content

Commit

Permalink
Code Connect v1.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
figma-bot committed Sep 10, 2024
1 parent 76c9fcc commit e7f8a0f
Show file tree
Hide file tree
Showing 190 changed files with 6,067 additions and 2,997 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,4 @@ bundle/
.swiftpm/
bundle-cli
webpack-dist
bundle-npm
28 changes: 27 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -7,7 +34,6 @@

## Features


### React
- figma.enum now supports floating point numbers

Expand Down
4 changes: 2 additions & 2 deletions Package.resolved
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
},
{
Expand Down
2 changes: 1 addition & 1 deletion Package.swift
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
],
Expand Down
16 changes: 11 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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

Expand All @@ -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
{
Expand All @@ -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.
Expand Down
Loading

0 comments on commit e7f8a0f

Please sign in to comment.