Components.studio

package.json

package.json is used for npm package definition.

See npm Documentation for more details.

Optional

The package.json is optional on the platform. It will be automatically created when released to a npm registry via the release feature.

Enhanced

If a package.json exists, it will automatically be enhanced with the following properties when released on npm via the release feature:

  • name (overridden)
  • version (overridden)
  • author (if not present)
  • type: "module" (if not present)
  • homepage (if not present)
  • files
  • dependencies

Dependencies

As described in chapters JavaScript and TypeScript, bare imports are automatically resolved on npm. In other words, there is no obligation to define dependencies in package.json.

If a dependency is not defined in package.json, the latest version of the dependency is used.

If a dependency is defined in package.json, then the specific version will be used.

{ "dependencies" :
  {
    "foo" : "1.0.0",
    "bar" : "^2.0.0"
    ...
  }
}

See npm documentation about dependencies for more details about version formats.

Aliases

Aliases are supported through the alias field in package.json.

package.json

{
  ...
  "alias": {
      "react": "preact/compat",
      "react-dom": "preact/compat",
  }
  ...
}

In this example react and react-dom imports will be resolve to preact/compat.

Template variables

Some variables can be injected into package.json when released to npm.

{
  "homepage": "{{ homepage }}",
  "description": "Package {{ name }}",
  ...
}

Variables available:

  • id : ID of the component on the platform
  • name : name of the component on the platform
  • author : GitHub account name (for individuals)
  • version : Version number to be released
  • homepage : URL link to the editor
  • year : Current year

Please open a feature request for new variables

package.json

{
  "name": "<auto-filled>",
  "version": "<auto-filled>",
  "description": "My description",
  "author": {
    "name" : "Barney Rubble",
    "email" : "b@rubble.com",
    "url" : "http://www.barnyrubble.com/"
  }
  "license": "ISC",
  "type": "module",
  "dependencies": {
    ...
  }
}