@figma/code-connect 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +102 -2
- package/dist/connect/index_common.js +1 -1
- package/dist/connect/index_common.js.map +1 -1
- package/package.json +3 -2
- package/dist/common/__test__/project.test.d.ts +0 -2
- package/dist/common/__test__/project.test.d.ts.map +0 -1
- package/dist/common/__test__/project.test.js +0 -14
- package/dist/common/__test__/project.test.js.map +0 -1
- package/dist/common/api.d.ts +0 -224
- package/dist/common/api.d.ts.map +0 -1
- package/dist/common/api.js +0 -3
- package/dist/common/api.js.map +0 -1
- package/dist/common/external.d.ts +0 -14
- package/dist/common/external.d.ts.map +0 -1
- package/dist/common/external.js +0 -65
- package/dist/common/external.js.map +0 -1
- package/dist/common/figma_connect.d.ts +0 -26
- package/dist/common/figma_connect.d.ts.map +0 -1
- package/dist/common/figma_connect.js +0 -3
- package/dist/common/figma_connect.js.map +0 -1
- package/dist/common/intrinsics.d.ts +0 -93
- package/dist/common/intrinsics.d.ts.map +0 -1
- package/dist/common/intrinsics.js +0 -377
- package/dist/common/intrinsics.js.map +0 -1
- package/dist/common/project.d.ts +0 -86
- package/dist/common/project.d.ts.map +0 -1
- package/dist/common/project.js +0 -138
- package/dist/common/project.js.map +0 -1
- package/dist/index.d.ts +0 -9
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -53
- package/dist/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,3 +1,103 @@
|
|
|
1
|
-
|
|
1
|
+
# Code Connect
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
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.
|
|
6
|
+
|
|
7
|
+

|
|
8
|
+
|
|
9
|
+
> [!NOTE]
|
|
10
|
+
> Code Connect is available on Organization and Enterprise plans and requires a full Design or Dev Mode seat to use.
|
|
11
|
+
|
|
12
|
+
## CLI installation
|
|
13
|
+
|
|
14
|
+
To install Code Connect locally to a React project, you can follow the instructions in the [React README](https://github.com/figma/code-connect/blob/main/cli/README.md#installation).
|
|
15
|
+
|
|
16
|
+
For other platforms, you first need to have Node.js v16 or newer installed on your computer. You can check if you already have Node.js installed and which version by running `node -v`. If you need to install Node.js, instructions for all platforms can be found [on the Node.js website](https://nodejs.org/en/download/package-manager).
|
|
17
|
+
|
|
18
|
+
Once you have Node.js installed, you can install Code Connect globally, so it can be run from anywhere on your machine, by running:
|
|
19
|
+
|
|
20
|
+
`npm install --global @figma/code-connect`
|
|
21
|
+
|
|
22
|
+
We hope to provide a way to install Code Connect without requiring Node.js soon.
|
|
23
|
+
|
|
24
|
+
## Setup
|
|
25
|
+
|
|
26
|
+
To learn how to implement Code Connect for your platform, please navigate to the platform-specific API usage and documentation.
|
|
27
|
+
|
|
28
|
+
- [React (or React Native)](https://github.com/figma/code-connect/blob/main/docs/react.md)
|
|
29
|
+
- [HTML (Web Components, Angular, Vue, etc.)](https://github.com/figma/code-connect/blob/main/docs/html.md)
|
|
30
|
+
- [SwiftUI](https://github.com/figma/code-connect/blob/main/docs/swiftui.md)
|
|
31
|
+
- [Jetpack Compose](https://github.com/figma/code-connect/blob/main/docs/compose.md)
|
|
32
|
+
|
|
33
|
+
## General configuration
|
|
34
|
+
|
|
35
|
+
Code Connect can be configured with a `figma.config.json` file, which must be located in your project root (e.g. alongside the `package.json` or `.xcodeproj` file).
|
|
36
|
+
|
|
37
|
+
Every platform supports some common configuration options, in addition to any platform-specific options.
|
|
38
|
+
|
|
39
|
+
### `include` and `exclude`
|
|
40
|
+
|
|
41
|
+
`include` and `exclude` are lists of globs for where to parse Code Connect files, and for where to search for your component code when using the [interactive setup](https://github.com/figma/code-connect/blob/main/cli/README.md#interactive-setup). `include` and `exclude` paths must be relative to the location of the config file.
|
|
42
|
+
|
|
43
|
+
```jsonp
|
|
44
|
+
{
|
|
45
|
+
"codeConnect": {
|
|
46
|
+
"include": [],
|
|
47
|
+
"exclude": ["test/**", "docs/**", "build/**"]
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### `parser`
|
|
53
|
+
|
|
54
|
+
Code Connect will attempt to determine your project type by looking the first ancestor of the working directory which matches one of the following:
|
|
55
|
+
|
|
56
|
+
- If a `package.json` containing `react` is found, your project is detected as React
|
|
57
|
+
- If a `package.json` is found not containing `react`, your project is detected as HTML
|
|
58
|
+
- If a file matching `Package.swift` or `*.xcodeproj` is found, your project is detected as Swift
|
|
59
|
+
- If a file matching `build.gradle.kts` is found, your project is detected as Jetpack Compose
|
|
60
|
+
|
|
61
|
+
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`.
|
|
62
|
+
|
|
63
|
+
```jsonp
|
|
64
|
+
{
|
|
65
|
+
"codeConnect": {
|
|
66
|
+
"parser": "react"
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### `label`
|
|
72
|
+
|
|
73
|
+
`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.
|
|
74
|
+
|
|
75
|
+
### `documentUrlSubstitutions`
|
|
76
|
+
|
|
77
|
+
`documentUrlSubstitutions` allows you to specify a set of substitutions which will be run on the `figmaNode` URLs when parsing or publishing documents.
|
|
78
|
+
|
|
79
|
+
This allows you to use different config files to switch publishing Code Connect between different files, without having to modify every Code Connect file (e.g. if you have a test version of your document you want to publish to). The substitutions are specified as an object, where the key is the string to be replaced, and the value is the string to replace that with.
|
|
80
|
+
|
|
81
|
+
For example, the config:
|
|
82
|
+
|
|
83
|
+
```
|
|
84
|
+
{
|
|
85
|
+
"codeConnect": {
|
|
86
|
+
"documentUrlSubstitutions": {
|
|
87
|
+
"https://figma.com/design/1234abcd/File-1": "https://figma.com/design/5678dcba/File-2"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
would change Figma node URLs like `https://figma.com/design/1234abcd/File-1/?node-id=12:345` to `https://figma.com/design/5678dbca/File-2/?node-id=12:345`.
|
|
94
|
+
|
|
95
|
+
## Common issues
|
|
96
|
+
|
|
97
|
+
### Connectivity issues due to proxies or network security software
|
|
98
|
+
|
|
99
|
+
Some proxies or network security software can prevent Code Connect from communicating with Figma's servers. If you encounter issues, you may need to explicitly allow connections to `https://api.figma.com/`. Please reach out to [Figma support](https://help.figma.com/hc/en-us/requests/new) if you are still unable to use Code Connect.
|
|
100
|
+
|
|
101
|
+
### 413 errors due to too large uploads
|
|
102
|
+
|
|
103
|
+
Please rerun with the `--batch-size` parameter. This will upload the Code Connect in batches of documents of batch_size length. We suggest starting with 50 and decreasing until converging on a size that works for your Code Connect.
|
|
@@ -15,7 +15,7 @@ exports.getClient = void 0;
|
|
|
15
15
|
function getClient() {
|
|
16
16
|
let client = {};
|
|
17
17
|
if (typeof process !== 'undefined' && process.versions && process.versions.node) {
|
|
18
|
-
client = require('
|
|
18
|
+
client = require('../client/external');
|
|
19
19
|
}
|
|
20
20
|
return client;
|
|
21
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index_common.js","sourceRoot":"","sources":["../../src/connect/index_common.ts"],"names":[],"mappings":";;;AAEA,gFAAgF;AAChF,0EAA0E;AAC1E,gFAAgF;AAChF,2CAA2C;AAC3C,EAAE;AACF,4EAA4E;AAC5E,gFAAgF;AAChF,kCAAkC;AAClC,EAAE;AACF,+EAA+E;AAC/E,0CAA0C;AAE1C,SAAgB,SAAS;IACvB,IAAI,MAAM,GAAuB,EAAS,CAAA;IAC1C,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QAChF,MAAM,GAAG,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"index_common.js","sourceRoot":"","sources":["../../src/connect/index_common.ts"],"names":[],"mappings":";;;AAEA,gFAAgF;AAChF,0EAA0E;AAC1E,gFAAgF;AAChF,2CAA2C;AAC3C,EAAE;AACF,4EAA4E;AAC5E,gFAAgF;AAChF,kCAAkC;AAClC,EAAE;AACF,+EAA+E;AAC/E,0CAA0C;AAE1C,SAAgB,SAAS;IACvB,IAAI,MAAM,GAAuB,EAAS,CAAA;IAC1C,IAAI,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,QAAQ,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QAChF,MAAM,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAA;IACxC,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAND,8BAMC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@figma/code-connect",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "A tool for connecting your design system components in code with your design system in Figma",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"author": "Figma",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"test:swift": "npm run test -- --runInBand --testPathPattern=e2e_parse_command_swift.test.ts --testPathPattern=e2e_wizard_swift.test.ts --testPathPattern=e2e_parse_command_swift_xcodeproj.test.ts",
|
|
48
48
|
"test:non-mac": "npm run test -- --testPathIgnorePatterns=e2e_parse_command_swift.test.ts --testPathIgnorePatterns=e2e_wizard_swift.test.ts --testPathIgnorePatterns=e2e_parse_command_swift_xcodeproj.test.ts",
|
|
49
49
|
"bundle": "npm run build && npm pack && mkdir -p bundle && mv figma-code-connect*.tgz bundle",
|
|
50
|
-
"bundle:local": "cp package.json package.json.bak && grep -v 'workspace:' package.json > package.json && npm run build && npm pack && mkdir -p bundle-local && mv figma-code-connect*.tgz bundle-local; mv package.json.bak package.json",
|
|
50
|
+
"bundle:local": "cp package.json package.json.bak && grep -v 'workspace:' package.json > package.json.tmp && mv package.json.tmp package.json && npm run build && npm pack && mkdir -p bundle-local && mv figma-code-connect*.tgz bundle-local; mv package.json.bak package.json",
|
|
51
51
|
"bundle:npm-readme:prepare": "mv README.md ../cli-README.md.bak && cp ../README.md . && npx ts-node ../scripts/make_readme_links_absolute.ts",
|
|
52
52
|
"bundle:npm-readme:restore": "mv ../cli-README.md.bak README.md",
|
|
53
53
|
"bundle:npm": "npm run build && npm run bundle:npm-readme:prepare && npm pack && mkdir -p bundle-npm && mv figma-code-connect*.tgz bundle-npm; npm run bundle:npm-readme:restore",
|
|
@@ -56,6 +56,7 @@
|
|
|
56
56
|
"bundle:cli:mac": "npm run bundle:cli -- -o bundle-cli/figma-mac --target node18-mac-x64,node18-mac-arm64",
|
|
57
57
|
"bundle:cli:mac:arm64": "npm run bundle:cli -- -o bundle-cli/figma-mac-arm64 --target node18-mac-arm64",
|
|
58
58
|
"bundle:cli:win": "npm run bundle:cli -- -o bundle-cli/figma-win --target node18-win-x64",
|
|
59
|
+
"publish:npm": "npm install && npm run build && npm run bundle:npm-readme:prepare && npm publish --access public; npm run bundle:npm-readme:restore",
|
|
59
60
|
"typecheck": "tsc --noEmit"
|
|
60
61
|
},
|
|
61
62
|
"devDependencies": {
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"project.test.d.ts","sourceRoot":"","sources":["../../../src/common/__test__/project.test.ts"],"names":[],"mappings":""}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const project_1 = require("../../connect/project");
|
|
4
|
-
describe('project functions', () => {
|
|
5
|
-
describe('getRemoteFileUrl', () => {
|
|
6
|
-
it('handles git repo urls', () => {
|
|
7
|
-
expect((0, project_1.getRemoteFileUrl)('/path/file.ts', 'git@github.com:myorg/myrepo.git')).toBe('https://github.com/myorg/myrepo/blob/master/path/file.ts');
|
|
8
|
-
});
|
|
9
|
-
it('handles https repo urls', () => {
|
|
10
|
-
expect((0, project_1.getRemoteFileUrl)('/path/file.ts', 'https://github.com/myorg/myrepo.git')).toBe('https://github.com/myorg/myrepo/blob/master/path/file.ts');
|
|
11
|
-
});
|
|
12
|
-
});
|
|
13
|
-
});
|
|
14
|
-
//# sourceMappingURL=project.test.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"project.test.js","sourceRoot":"","sources":["../../../src/common/__test__/project.test.ts"],"names":[],"mappings":";;AAAA,mDAAwD;AAExD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAChC,EAAE,CAAC,uBAAuB,EAAE,GAAG,EAAE;YAC/B,MAAM,CAAC,IAAA,0BAAgB,EAAC,eAAe,EAAE,iCAAiC,CAAC,CAAC,CAAC,IAAI,CAC/E,0DAA0D,CAC3D,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;YACjC,MAAM,CAAC,IAAA,0BAAgB,EAAC,eAAe,EAAE,qCAAqC,CAAC,CAAC,CAAC,IAAI,CACnF,0DAA0D,CAC3D,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
|
package/dist/common/api.d.ts
DELETED
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export type EnumValue = string | boolean | number | symbol | undefined | JSX.Element | Function | Object;
|
|
3
|
-
export interface FigmaConnectAPI {
|
|
4
|
-
/**
|
|
5
|
-
* Defines a code snippet that displays in Figma when a component is selected. This function has two signatures:
|
|
6
|
-
* - When called with a component reference as the first argument, it will infer metadata such as the import statement
|
|
7
|
-
* and location in source file from the component reference
|
|
8
|
-
* - When called only with a Figma node URL, this metadata will not be included. This is useful when you want to display a code snippet
|
|
9
|
-
* for something that isn't a React component, such as a `<button>` element
|
|
10
|
-
*
|
|
11
|
-
* @param component A reference to the React component
|
|
12
|
-
* @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456`
|
|
13
|
-
* @param meta {@link FigmaConnectMeta}
|
|
14
|
-
*/
|
|
15
|
-
connect<P = {}>(component: any, figmaNodeUrl: string, meta?: FigmaConnectMeta<P>): void;
|
|
16
|
-
/**
|
|
17
|
-
* Defines a code snippet that displays in Figma when a component is selected. This function has two signatures:
|
|
18
|
-
* - When called with a component reference as the first argument, it will infer metadata such as the import statement
|
|
19
|
-
* and location in source file from the component reference
|
|
20
|
-
* - When called only with a Figma node URL, this metadata will not be included. This is useful when you want to display a code snippet
|
|
21
|
-
* for something that isn't a React component, such as a `<button>` element
|
|
22
|
-
*
|
|
23
|
-
* @param figmaNodeUrl A link to the node in Figma, for example:`https://www.figma.com/file/123abc/My-Component?node-id=123:456`
|
|
24
|
-
* @param meta {@link FigmaConnectMeta}
|
|
25
|
-
*/
|
|
26
|
-
connect<P = {}>(figmaNodeUrl: string, meta?: FigmaConnectMeta<P>): void;
|
|
27
|
-
/**
|
|
28
|
-
* Maps a Figma property to a boolean value for the connected component. This prop is replaced
|
|
29
|
-
* with values from the Figma instance when viewed in Dev Mode. For example:
|
|
30
|
-
* ```ts
|
|
31
|
-
* props: {
|
|
32
|
-
* disabled: figma.boolean('Disabled'),
|
|
33
|
-
* }
|
|
34
|
-
* ```
|
|
35
|
-
* Would show the `disabled` property if the Figma property "Disabled" is true.
|
|
36
|
-
*
|
|
37
|
-
* @param figmaPropName The name of the property on the Figma component
|
|
38
|
-
*/
|
|
39
|
-
boolean(figmaPropName: string): boolean;
|
|
40
|
-
/**
|
|
41
|
-
* Maps a Figma boolean property to a set of values for the connected component, providing
|
|
42
|
-
* a value mapping for `true` and `false`. This prop is replaced with values from the
|
|
43
|
-
* Figma instance when viewed in Dev Mode. Example:
|
|
44
|
-
* ```ts
|
|
45
|
-
* props: {
|
|
46
|
-
* label: figma.boolean('Disabled', {
|
|
47
|
-
* true: <Label />,
|
|
48
|
-
* false: <HiddenLabel />
|
|
49
|
-
* }),
|
|
50
|
-
* }
|
|
51
|
-
* ```
|
|
52
|
-
* Would replace `label` with `<Label />` if the Figma property "Disabled" is true.
|
|
53
|
-
*
|
|
54
|
-
* @param figmaPropName The name of the property on the Figma component
|
|
55
|
-
* @param valueMapping A mapping of values for `true` and `false`
|
|
56
|
-
*/
|
|
57
|
-
boolean<TrueT extends EnumValue, FalseT extends EnumValue>(figmaPropName: string, valueMapping?: {
|
|
58
|
-
true?: TrueT;
|
|
59
|
-
false?: FalseT;
|
|
60
|
-
}): ValueOf<Record<'true' | 'false', TrueT | FalseT>>;
|
|
61
|
-
/**
|
|
62
|
-
* Maps a Figma Variant property to a set if values for the connected component. This prop is replaced
|
|
63
|
-
* with values from the Figma instance when viewed in Dev Mode. For example:
|
|
64
|
-
* ```ts
|
|
65
|
-
* props: {
|
|
66
|
-
* type: figma.enum('Type', {
|
|
67
|
-
* Primary: 'primary',
|
|
68
|
-
* Secondary: 'secondary',
|
|
69
|
-
* }),
|
|
70
|
-
* }
|
|
71
|
-
* ```
|
|
72
|
-
* Would output "primary" if the Type Variant in Figma is set to "Primary".
|
|
73
|
-
*
|
|
74
|
-
* @param figmaPropName The name of the property on the Figma component
|
|
75
|
-
* @param valueMapping A mapping of values for the Figma Variant
|
|
76
|
-
*/
|
|
77
|
-
enum<V extends EnumValue>(figmaPropName: string, valueMapping: Record<string, V>): V;
|
|
78
|
-
/**
|
|
79
|
-
* Maps a Figma property to a string value for the connected component. This prop is replaced
|
|
80
|
-
* with values from the Figma instance when viewed in Dev Mode. For example:
|
|
81
|
-
* ```ts
|
|
82
|
-
* props: {
|
|
83
|
-
* text: figma.string('Text'),
|
|
84
|
-
* }
|
|
85
|
-
* ```
|
|
86
|
-
* Would replace `text` with the text content from the Figma property "Text".
|
|
87
|
-
*
|
|
88
|
-
* @param figmaPropName The name of the property on the Figma component
|
|
89
|
-
*/
|
|
90
|
-
string(figmaPropName: string): string;
|
|
91
|
-
/**
|
|
92
|
-
* Maps a Figma instance property for the connected component. This prop is replaced
|
|
93
|
-
* with values from the Figma instance when viewed in Dev Mode. For example:
|
|
94
|
-
* ```ts
|
|
95
|
-
* props: {
|
|
96
|
-
* icon: figma.instance('Icon'),
|
|
97
|
-
* }
|
|
98
|
-
* ```
|
|
99
|
-
* Would show the nested examples for the component passed to the "Icon" property in Figma.
|
|
100
|
-
*
|
|
101
|
-
* @param figmaPropName The name of the property on the Figma component
|
|
102
|
-
*/
|
|
103
|
-
instance(figmaPropName: string): JSX.Element;
|
|
104
|
-
/**
|
|
105
|
-
* Maps a Figma instance layer to a nested code example. For example:
|
|
106
|
-
* ```ts
|
|
107
|
-
* props: {
|
|
108
|
-
* icon: figma.children('Icon')
|
|
109
|
-
* }
|
|
110
|
-
* ```
|
|
111
|
-
* Would show the nested code example for the child instance named 'Icon'. This also supports
|
|
112
|
-
* an array: `tabs: figma.children(['Tab 1', 'Tab 2'])` to map multiple nested examples.
|
|
113
|
-
*
|
|
114
|
-
* You can pass a single wildcard '*' character to match partial names. For example:
|
|
115
|
-
* ```ts
|
|
116
|
-
* props: {
|
|
117
|
-
* icon: figma.children('Icon*')
|
|
118
|
-
* }
|
|
119
|
-
* ```
|
|
120
|
-
* Would show the nested code example for any child instance which name starts with "Icon"
|
|
121
|
-
*
|
|
122
|
-
* @param figmaPropName The name of the property on the Figma component
|
|
123
|
-
*/
|
|
124
|
-
children(layerNames: string | string[]): JSX.Element;
|
|
125
|
-
/**
|
|
126
|
-
* Maps nested properties from a Figma instance layer. The first argument
|
|
127
|
-
* should be the layer name of the nested instance. The mapping object passed
|
|
128
|
-
* in is in the same format as the `props` object in the `connect` function.
|
|
129
|
-
* For example:
|
|
130
|
-
* ```ts
|
|
131
|
-
* props: {
|
|
132
|
-
* nested: figma.nestedProps('Nested', {
|
|
133
|
-
* label: figma.string('Text'),
|
|
134
|
-
* icon: figma.instance('Icon'),
|
|
135
|
-
* }),
|
|
136
|
-
* }
|
|
137
|
-
* Which would then allow you to access the nested properties in the `example` function like so:
|
|
138
|
-
* ```ts
|
|
139
|
-
* (props) => <Button label={props.nested.label} icon={props.nested.icon} />
|
|
140
|
-
* ```
|
|
141
|
-
*/
|
|
142
|
-
nestedProps<V>(layer: string, input: V): V;
|
|
143
|
-
/**
|
|
144
|
-
* Creates a className string by joining an array of strings. The argument supports both
|
|
145
|
-
* string literals and nested functions like `figma.enum` and `figma.boolean` that return
|
|
146
|
-
* a string. For example:
|
|
147
|
-
* ```ts
|
|
148
|
-
* props: {
|
|
149
|
-
* className: figma.className([
|
|
150
|
-
* 'btn-base',
|
|
151
|
-
* figma.enum('Size', { Large: 'btn-large' }),
|
|
152
|
-
* figma.boolean('Disabled', { true: 'btn-disabled', false: '' }),
|
|
153
|
-
* ]),
|
|
154
|
-
* }
|
|
155
|
-
*
|
|
156
|
-
* @param className
|
|
157
|
-
*/
|
|
158
|
-
className(className: (string | undefined)[]): string;
|
|
159
|
-
/**
|
|
160
|
-
* Maps a Figma text layer to a string value representing the text content of that layer.
|
|
161
|
-
* This function takes the layer name within the original component as its parameter.
|
|
162
|
-
* For example:
|
|
163
|
-
* ```ts
|
|
164
|
-
* props: {
|
|
165
|
-
* text: figma.textContent('Text Layer')
|
|
166
|
-
* }
|
|
167
|
-
* ```
|
|
168
|
-
*
|
|
169
|
-
* @param layer The name of the text layer in the Figma component
|
|
170
|
-
*/
|
|
171
|
-
textContent(layer: string): string;
|
|
172
|
-
}
|
|
173
|
-
export type ValueOf<T> = T[keyof T];
|
|
174
|
-
export type PropMapping<T> = {
|
|
175
|
-
[key in keyof T]: T[key];
|
|
176
|
-
};
|
|
177
|
-
export interface FigmaConnectLink {
|
|
178
|
-
name: string;
|
|
179
|
-
url: string;
|
|
180
|
-
}
|
|
181
|
-
export interface FigmaConnectMeta<T = {}, ExtraExampleT = never> {
|
|
182
|
-
/**
|
|
183
|
-
* Restricts this figma connect to any variants that fullfill the given filter.
|
|
184
|
-
* The filter is a map of Figma variant names to values. Example:
|
|
185
|
-
* ```ts
|
|
186
|
-
* {
|
|
187
|
-
* variant: { "Has Icon": true }
|
|
188
|
-
* }
|
|
189
|
-
*/
|
|
190
|
-
variant?: Record<string, string | boolean | number>;
|
|
191
|
-
/**
|
|
192
|
-
* Prop mappings for the connected component. This is used to map the values of the component's props
|
|
193
|
-
* to the values that are used in Figma, using helper functions like `Figma.boolean`. For example:
|
|
194
|
-
* ```ts
|
|
195
|
-
* props: {
|
|
196
|
-
* disabled: figma.boolean('Disabled'),
|
|
197
|
-
* text: figma.string('Text'),
|
|
198
|
-
* size: figma.enum('Size', {
|
|
199
|
-
* slim: 'slim',
|
|
200
|
-
* medium: 'medium',
|
|
201
|
-
* large: 'large',
|
|
202
|
-
* }),
|
|
203
|
-
* }
|
|
204
|
-
*/
|
|
205
|
-
props?: T;
|
|
206
|
-
/**
|
|
207
|
-
* The code example to display in Figma. Any mapped `props` is passed to the component,
|
|
208
|
-
* where those values will be replaced with the mapped value when inspecting that instance in Figma.
|
|
209
|
-
* @param props
|
|
210
|
-
* @returns
|
|
211
|
-
*/
|
|
212
|
-
example?: ((props: T) => React.Component | JSX.Element) | ExtraExampleT;
|
|
213
|
-
/**
|
|
214
|
-
* A list of import statements that will render in the Code Snippet in Figma.
|
|
215
|
-
* This overrides the auto-generated imports for the component. When this is specified,
|
|
216
|
-
* the `importPaths` option in the config file is also ignored.
|
|
217
|
-
*/
|
|
218
|
-
imports?: string[];
|
|
219
|
-
/**
|
|
220
|
-
* A list of links that will display in Figma along with the examples
|
|
221
|
-
*/
|
|
222
|
-
links?: FigmaConnectLink[];
|
|
223
|
-
}
|
|
224
|
-
//# sourceMappingURL=api.d.ts.map
|
package/dist/common/api.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/common/api.ts"],"names":[],"mappings":"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"}
|
package/dist/common/api.js
DELETED
package/dist/common/api.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"api.js","sourceRoot":"","sources":["../../src/common/api.ts"],"names":[],"mappings":""}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { FigmaConnectMeta, PropMapping, ValueOf, EnumValue } from './api';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
declare function connectType<P = {}>(_figmaNodeUrl: string, _meta?: FigmaConnectMeta<P>): void;
|
|
4
|
-
declare function connectType<P = {}>(_component: any, _figmaNodeUrl: string, _meta?: FigmaConnectMeta<P>): void;
|
|
5
|
-
declare function booleanType(_figmaPropName: string): boolean;
|
|
6
|
-
declare function enumType<V extends EnumValue>(_figmaPropName: string, _valueMapping: PropMapping<Record<string, V>>): ValueOf<Record<string, V>>;
|
|
7
|
-
declare function stringType(_figmaPropName: string): string;
|
|
8
|
-
declare function instanceType(_figmaPropName: string): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
9
|
-
declare function childrenType(_layers: string | string[]): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
|
|
10
|
-
declare function nestedPropsType<T>(_layer: string, props: T): T;
|
|
11
|
-
declare function classNameType(_className: (string | undefined)[]): string;
|
|
12
|
-
declare function textContentType(_layer: string): string;
|
|
13
|
-
export { connectType as connect, booleanType as boolean, enumType as enum, stringType as string, instanceType as instance, childrenType as children, nestedPropsType as nestedProps, classNameType as className, textContentType as textContent, };
|
|
14
|
-
//# sourceMappingURL=external.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"external.d.ts","sourceRoot":"","sources":["../../src/common/external.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,iBAAS,WAAW,CAAC,CAAC,GAAG,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;AACtF,iBAAS,WAAW,CAAC,CAAC,GAAG,EAAE,EACzB,UAAU,EAAE,GAAG,EACf,aAAa,EAAE,MAAM,EACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAC1B,IAAI,CAAA;AAGP,iBAAS,WAAW,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAA;AAWrD,iBAAS,QAAQ,CAAC,CAAC,SAAS,SAAS,EACnC,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,GAC5C,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAE5B;AAED,iBAAS,UAAU,CAAC,cAAc,EAAE,MAAM,UAEzC;AAED,iBAAS,YAAY,CAAC,cAAc,EAAE,MAAM,kFAE3C;AAED,iBAAS,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,kFAE/C;AAED,iBAAS,eAAe,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,KAEnD;AAED,iBAAS,aAAa,CAAC,UAAU,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,UAExD;AAED,iBAAS,eAAe,CAAC,MAAM,EAAE,MAAM,UAEtC;AAED,OAAO,EACL,WAAW,IAAI,OAAO,EACtB,WAAW,IAAI,OAAO,EACtB,QAAQ,IAAI,IAAI,EAChB,UAAU,IAAI,MAAM,EACpB,YAAY,IAAI,QAAQ,EACxB,YAAY,IAAI,QAAQ,EACxB,eAAe,IAAI,WAAW,EAC9B,aAAa,IAAI,SAAS,EAC1B,eAAe,IAAI,WAAW,GAC/B,CAAA"}
|
package/dist/common/external.js
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.textContent = exports.className = exports.nestedProps = exports.children = exports.instance = exports.string = exports.enum = exports.boolean = exports.connect = void 0;
|
|
27
|
-
const React = __importStar(require("react"));
|
|
28
|
-
function connectType(_component, _figmaNodeUrl, _meta) { }
|
|
29
|
-
exports.connect = connectType;
|
|
30
|
-
function booleanType(_figmaPropName, _valueMapping) {
|
|
31
|
-
if (_valueMapping) {
|
|
32
|
-
return enumType(_figmaPropName, _valueMapping);
|
|
33
|
-
}
|
|
34
|
-
return true;
|
|
35
|
-
}
|
|
36
|
-
exports.boolean = booleanType;
|
|
37
|
-
function enumType(_figmaPropName, _valueMapping) {
|
|
38
|
-
return Object.values(_valueMapping)[0];
|
|
39
|
-
}
|
|
40
|
-
exports.enum = enumType;
|
|
41
|
-
function stringType(_figmaPropName) {
|
|
42
|
-
return '';
|
|
43
|
-
}
|
|
44
|
-
exports.string = stringType;
|
|
45
|
-
function instanceType(_figmaPropName) {
|
|
46
|
-
return React.createElement('div');
|
|
47
|
-
}
|
|
48
|
-
exports.instance = instanceType;
|
|
49
|
-
function childrenType(_layers) {
|
|
50
|
-
return React.createElement('div');
|
|
51
|
-
}
|
|
52
|
-
exports.children = childrenType;
|
|
53
|
-
function nestedPropsType(_layer, props) {
|
|
54
|
-
return props;
|
|
55
|
-
}
|
|
56
|
-
exports.nestedProps = nestedPropsType;
|
|
57
|
-
function classNameType(_className) {
|
|
58
|
-
return '';
|
|
59
|
-
}
|
|
60
|
-
exports.className = classNameType;
|
|
61
|
-
function textContentType(_layer) {
|
|
62
|
-
return '';
|
|
63
|
-
}
|
|
64
|
-
exports.textContent = textContentType;
|
|
65
|
-
//# sourceMappingURL=external.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"external.js","sourceRoot":"","sources":["../../src/common/external.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,6CAA8B;AAQ9B,SAAS,WAAW,CAAC,UAAmB,EAAE,aAAsB,EAAE,KAAe,IAAS,CAAC;AA6C1E,8BAAO;AA1CxB,SAAS,WAAW,CAClB,cAAsB,EACtB,aAA2C;IAE3C,IAAI,aAAa,EAAE,CAAC;QAClB,OAAO,QAAQ,CAAI,cAAc,EAAE,aAAa,CAAC,CAAA;IACnD,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AAmCgB,8BAAO;AAjCxB,SAAS,QAAQ,CACf,cAAsB,EACtB,aAA6C;IAE7C,OAAO,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAA+B,CAAA;AACtE,CAAC;AA6Ba,wBAAI;AA3BlB,SAAS,UAAU,CAAC,cAAsB;IACxC,OAAO,EAAE,CAAA;AACX,CAAC;AA0Be,4BAAM;AAxBtB,SAAS,YAAY,CAAC,cAAsB;IAC1C,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AACnC,CAAC;AAuBiB,gCAAQ;AArB1B,SAAS,YAAY,CAAC,OAA0B;IAC9C,OAAO,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;AACnC,CAAC;AAoBiB,gCAAQ;AAlB1B,SAAS,eAAe,CAAI,MAAc,EAAE,KAAQ;IAClD,OAAO,KAAK,CAAA;AACd,CAAC;AAiBoB,sCAAW;AAfhC,SAAS,aAAa,CAAC,UAAkC;IACvD,OAAO,EAAE,CAAA;AACX,CAAC;AAckB,kCAAS;AAZ5B,SAAS,eAAe,CAAC,MAAc;IACrC,OAAO,EAAE,CAAA;AACX,CAAC;AAWoB,sCAAW"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { FigmaConnectLink } from './api';
|
|
2
|
-
import { Intrinsic } from './intrinsics';
|
|
3
|
-
export type BaseCodeConnectObject = {
|
|
4
|
-
figmaNode: string;
|
|
5
|
-
component?: string;
|
|
6
|
-
variant?: Record<string, any>;
|
|
7
|
-
template: string;
|
|
8
|
-
templateData: {
|
|
9
|
-
props?: Record<string, Intrinsic>;
|
|
10
|
-
imports?: string[];
|
|
11
|
-
nestable?: boolean;
|
|
12
|
-
};
|
|
13
|
-
language: string;
|
|
14
|
-
label: string;
|
|
15
|
-
links?: FigmaConnectLink[];
|
|
16
|
-
source?: string;
|
|
17
|
-
sourceLocation?: {
|
|
18
|
-
line: number;
|
|
19
|
-
};
|
|
20
|
-
};
|
|
21
|
-
export type CodeConnectJSON = BaseCodeConnectObject & {
|
|
22
|
-
metadata: {
|
|
23
|
-
cliVersion: string;
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
//# sourceMappingURL=figma_connect.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"figma_connect.d.ts","sourceRoot":"","sources":["../../src/common/figma_connect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAExC,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC7B,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;QACjC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;QAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;KACnB,CAAA;IACD,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,cAAc,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CAClC,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG;IACpD,QAAQ,EAAE;QACR,UAAU,EAAE,MAAM,CAAA;KACnB,CAAA;CACF,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"figma_connect.js","sourceRoot":"","sources":["../../src/common/figma_connect.ts"],"names":[],"mappings":""}
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import * as ts from 'typescript';
|
|
2
|
-
import { ParserContext } from '../react/parser';
|
|
3
|
-
import { FCCValue } from '../react/parser_template_helpers';
|
|
4
|
-
export declare const API_PREFIX = "figma";
|
|
5
|
-
export declare const FIGMA_CONNECT_CALL = "figma.connect";
|
|
6
|
-
export declare enum IntrinsicKind {
|
|
7
|
-
Enum = "enum",
|
|
8
|
-
String = "string",
|
|
9
|
-
Boolean = "boolean",
|
|
10
|
-
Instance = "instance",
|
|
11
|
-
Children = "children",
|
|
12
|
-
NestedProps = "nested-props",
|
|
13
|
-
ClassName = "className",
|
|
14
|
-
TextContent = "text-content"
|
|
15
|
-
}
|
|
16
|
-
export interface IntrinsicBase {
|
|
17
|
-
kind: IntrinsicKind;
|
|
18
|
-
args: {};
|
|
19
|
-
}
|
|
20
|
-
export type ValueMappingKind = FCCValue | Intrinsic;
|
|
21
|
-
export interface FigmaBoolean extends IntrinsicBase {
|
|
22
|
-
kind: IntrinsicKind.Boolean;
|
|
23
|
-
args: {
|
|
24
|
-
figmaPropName: string;
|
|
25
|
-
valueMapping?: Record<'true' | 'false', ValueMappingKind>;
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
export interface FigmaEnum extends IntrinsicBase {
|
|
29
|
-
kind: IntrinsicKind.Enum;
|
|
30
|
-
args: {
|
|
31
|
-
figmaPropName: string;
|
|
32
|
-
valueMapping: Record<string, ValueMappingKind>;
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
export interface FigmaString extends IntrinsicBase {
|
|
36
|
-
kind: IntrinsicKind.String;
|
|
37
|
-
args: {
|
|
38
|
-
figmaPropName: string;
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
export interface FigmaInstance extends IntrinsicBase {
|
|
42
|
-
kind: IntrinsicKind.Instance;
|
|
43
|
-
args: {
|
|
44
|
-
figmaPropName: string;
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
export interface FigmaChildren extends IntrinsicBase {
|
|
48
|
-
kind: IntrinsicKind.Children;
|
|
49
|
-
args: {
|
|
50
|
-
layers: string[];
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
export interface FigmaNestedProps extends IntrinsicBase {
|
|
54
|
-
kind: IntrinsicKind.NestedProps;
|
|
55
|
-
args: {
|
|
56
|
-
layer: string;
|
|
57
|
-
props: Record<string, Intrinsic>;
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
export interface FigmaClassName extends IntrinsicBase {
|
|
61
|
-
kind: IntrinsicKind.ClassName;
|
|
62
|
-
args: {
|
|
63
|
-
className: (string | Intrinsic)[];
|
|
64
|
-
};
|
|
65
|
-
}
|
|
66
|
-
export interface FigmaTextContent extends IntrinsicBase {
|
|
67
|
-
kind: IntrinsicKind.TextContent;
|
|
68
|
-
args: {
|
|
69
|
-
layer: string;
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
export type Intrinsic = FigmaBoolean | FigmaEnum | FigmaString | FigmaInstance | FigmaChildren | FigmaNestedProps | FigmaClassName | FigmaTextContent;
|
|
73
|
-
/**
|
|
74
|
-
* Parses a call expression to an intrinsic
|
|
75
|
-
*
|
|
76
|
-
* @param exp Expression to parse
|
|
77
|
-
* @param parserContext parser context
|
|
78
|
-
* @returns
|
|
79
|
-
*/
|
|
80
|
-
export declare function parseIntrinsic(exp: ts.CallExpression, parserContext: ParserContext): Intrinsic;
|
|
81
|
-
export declare function valueMappingToString(valueMapping: Record<string, ValueMappingKind>, childLayer?: string): string;
|
|
82
|
-
export declare function intrinsicToString({ kind, args }: Intrinsic, childLayer?: string): string;
|
|
83
|
-
/**
|
|
84
|
-
* Parses the `props` field in a `figma.connect()` call, returning a mapping of
|
|
85
|
-
* prop names to their respective intrinsic types
|
|
86
|
-
*
|
|
87
|
-
* @param objectLiteral An object literal expression
|
|
88
|
-
* @param parserContext Parser context
|
|
89
|
-
* @returns
|
|
90
|
-
*/
|
|
91
|
-
export declare function parsePropsObject(objectLiteral: ts.ObjectLiteralExpression, parserContext: ParserContext): PropMappings;
|
|
92
|
-
export type PropMappings = Record<string, Intrinsic>;
|
|
93
|
-
//# sourceMappingURL=intrinsics.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"intrinsics.d.ts","sourceRoot":"","sources":["../../src/common/intrinsics.ts"],"names":[],"mappings":"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"}
|