@figspec/components
Advanced tools
@figspec/components - npm Package Compare versions
Comparing version 1.0.2 to 2.0.0
@@ -8,3 +8,3 @@ { | ||
| ], | ||
| "version": "1.0.2", | ||
| "version": "2.0.0", | ||
| "contributors": [ | ||
@@ -17,17 +17,12 @@ { | ||
| "license": "MIT", | ||
| "module": "esm/es2015/index.js", | ||
| "main": "cjs/es2016/index.js", | ||
| "browser": "esm/es2015/index.js", | ||
| "types": "esm/es2015/index.d.ts", | ||
| "main": "esm/es2019/index.js", | ||
| "type": "module", | ||
| "types": "esm/es2019/index.d.ts", | ||
| "files": [ | ||
| "esm", | ||
| "cjs" | ||
| "esm" | ||
| ], | ||
| "sideEffects": [ | ||
| "./src/index.ts", | ||
| "./{cjs,esm}/*/index.js" | ||
| "./esm/*/index.js" | ||
| ], | ||
| "dependencies": { | ||
| "lit": "^2.1.3" | ||
| }, | ||
| "devDependencies": { | ||
@@ -42,10 +37,9 @@ "@picocss/pico": "^1.5.10", | ||
| "node-fetch": "^2.6.1", | ||
| "prettier": "^2.1.2", | ||
| "typescript": "^4.7.4", | ||
| "vite": "^4.4.2" | ||
| "prettier": "^3.0.2", | ||
| "typescript": "^5.1.6", | ||
| "vite": "^4.4.2", | ||
| "vitest": "^0.34.2" | ||
| }, | ||
| "scripts": { | ||
| "build:esm": "tsc --outDir esm/es2015", | ||
| "build:cjs": "tsc --outDir cjs/es2016 --target es2016 --module CommonJS", | ||
| "build": "yarn build:esm && yarn build:cjs", | ||
| "build": "tsc -p tsconfig.build.json", | ||
| "prepublishOnly": "yarn build", | ||
@@ -55,3 +49,4 @@ "generate-static-figma-file": "node ./scripts/generateStaticFigmaFile/index.mjs", | ||
| "dev": "vite ./website", | ||
| "build:website": "vite build ./website" | ||
| "build:website": "vite build ./website", | ||
| "test": "vitest" | ||
| }, | ||
@@ -58,0 +53,0 @@ "lint-staged": { |
| # @figspec/components | ||
| CustomElements renders given Figma API's result into a rich preview. | ||
| [](https://www.npmjs.com/package/@figspec/components) | ||
| [-e67700>) | ||
| ](https://figspec.netlify.app/) | ||
| `@figspec/components` is a set of CustomElements that renders Figma file/frame and displays Figma's editor-like inspector for a selected node. | ||
| The components are designed to work on Figma REST API result. | ||
| This library does not provided a functionality to invoke Figma REST API endpoints. | ||
| ## Installation | ||
| ```sh | ||
| $ yarn add @figspec/components | ||
| # or | ||
| $ npm i @figspec/components | ||
| ``` | ||
| This library does not provide bundled script. Please use CDN or bundle on your own. | ||
| ## Usage | ||
@@ -20,2 +25,8 @@ | ||
| ```html | ||
| <body> | ||
| <figspec-frame-viewer id="figma_frame"></figspec-frame-viewer> | ||
| </body> | ||
| ``` | ||
| ```js | ||
@@ -25,9 +36,6 @@ // your script.js | ||
| // ... | ||
| ``` | ||
| const figmaFrame = document.getElementById("figma_frame") | ||
| ```html | ||
| <body> | ||
| <figspec-frame-viewer nodes="..." rendered-image="..."></figspec-frame-viewer> | ||
| </body> | ||
| figmaFrame.apiResponse = /* ... */; | ||
| figmaFrame.renderedImage = /* ... */; | ||
| ``` | ||
@@ -39,29 +47,22 @@ | ||
| <body> | ||
| <figspec-file-viewer | ||
| document-node="..." | ||
| rendered-images="..." | ||
| ></figspec-file-viewer> | ||
| <figspec-file-viewer id="figma_file"></figspec-file-viewer> | ||
| </body> | ||
| ``` | ||
| To see examples and API docs, please check out [docs site](https://figspec.netlify.app/). | ||
| ```js | ||
| // your script.js | ||
| import "@figspec/components"; | ||
| NOTE: We don't provide bundled scripts yet. If you want to put the script in head tag, please build the files at your own. | ||
| const figmaFile = document.getElementById("figma_file") | ||
| ## TypeScript support | ||
| figmaFrame.apiResponse = /* ... */; | ||
| figmaFrame.renderedImages = /* ... */; | ||
| ``` | ||
| This package ships with TypeScript definition file. | ||
| To see working examples and API docs, please check out [the docs site](https://figspec.netlify.app/). | ||
| One of our "typing dependencies" is missing from `package.json#dependencies`, because it's not our "runtime dependency". | ||
| So, you need to install that package in order to get full types (otherwise some properties turns into `any`). | ||
| ```sh | ||
| # By installing this package, FileNode related properties will get correct types. | ||
| yarn add -D figma-js | ||
| ``` | ||
| ## Browser supports | ||
| Browsers supporting WebComponents v1 spec and ES2015 or later. | ||
| The bundled codes are emitted under `esm/es2015` and `cjs/es2016`. | ||
| This library works on browser implementing WebComponents v1 spec and ES2019. | ||
| The bundled files are at `esm/es2019`. | ||
@@ -68,0 +69,0 @@ ## Related packages |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by14.08%
217234
- Dependency count
- decreased by-100%
0
- Number of package files
- increased by11.27%
79
- Lines of code
- increased by9.7%
5340
- Number of lines in readme file
- increased by1.47%
69
- Is type module
Yes
Worsened metrics
- Dev dependency count
- increased by9.09%
12
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
- Removedlit@^2.1.3
- Removed@lit-labs/ssr-dom-shim@1.2.1(transitive)
- Removed@lit/reactive-element@1.6.3(transitive)
- Removed@types/trusted-types@2.0.7(transitive)
- Removedlit@2.8.0(transitive)
- Removedlit-element@3.3.3(transitive)
- Removedlit-html@2.8.0(transitive)