You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@sketch-hq/sketch-file-format-ts

Package Overview
Dependencies
0
Maintainers
3
Versions
31
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@sketch-hq/sketch-file-format-ts

TypeScript types for the Sketch File Format


Version published
Maintainers
3
Created

Readme

Source

Sketch File Format TS

Contains TypeScript types automatically generated from the Sketch File Format JSON Schemas.

Overview

Types are maintained and exported for each Sketch File Format major version. See usage instructions below for more information.

Usage

Add the npm module using npm or yarn

npm install @sketch-hq/sketch-file-format-ts

Types for the latest file format are on the default export

import FileFormat from '@sketch-hq/sketch-file-format-ts'

Read about how file format versions map to Sketch document versions here

Examples

Create a typed layer blur object

import FileFormat from '@sketch-hq/sketch-file-format-ts'

const blur: FileFormat.Blur = {
  _class: 'blur',
  isEnabled: false,
  center: '{0.5, 0.5}',
  motionAngle: 0,
  radius: 10,
  saturation: 1,
  type: FileFormat.BlurType.Gaussian,
}

Layer types can be narrowed using discriminate properties on the helper union types like AnyLayer

import FileFormat from '@sketch-hq/sketch-file-format-ts'

const mapLayers = (layers: FileFormat.AnyLayer[]) => {
  return layers.map((layer) => {
    switch (layer._class) {
      case 'bitmap':
      // type narrowed to Bitmap layers
      case 'star':
      // type narrowed to Star layers
    }
  })
}

Development

Following is further information for making changes to how the types are generated.

Approach

The scripts/generate.ts ingests the file format JSON Schema, and generates type definitions using the TypeScript compiler API.

We depend on multiple major versions of the schemas in package.json using yarn aliases, and generate types for each one. This means that users that have to implement multiple versions of the file format don't need to manually manage multiple versions of this package.

Please note that the latest version of the schemas is referenced directly within the monorepo and not using aliases.

Scripts

ScriptDescription
yarn buildBuilds the project into the dist folder
yarn testBuild script unit tests
yarn format-checkChecks the repo with Prettier

Workflows

Conventional commits

Try and use the conventional commits convention when writing commit messages.

Changing how the types are generated
  1. Update scripts/generate.ts
  2. Unit test your changes
  3. Determine the semver bump type and call yarn changeset to create an intent to release your changes (read more about changesets here).
  4. Open a PR to main
Adding or updating a file format version
  1. Use the yarn aliases syntax to add new schema version
  2. Use exact semvers, for example to update or add v3 of the schemas as 3.4.3 run,
    yarn add @sketch-hq/sketch-file-format-3@npm:@sketch-hq/sketch-file-format@3.4.3
  3. If the schema version is new to the repo you'll also need to update the index.ts to export the types, and scripts/generate.ts to generate the new types
  4. Open a PR to main

Keywords

FAQs

Package last updated on 03 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc