Component SDK

Standard Tooling for UI Component Development

The IXON Component SDK (abbreviated as cdk) is a collection of NPM packages that can be used to simplify and speed up the development workflow for UI Components.

NPM packages

  • @ixon-cdk/core for core utils and services
  • @ixon-cdk/runner for running commands (see reference)
  • @ixon-cdk/templates for component starter templates
  • @ixon-cdk/simulator for previewing and testing components
  • @ixon-cdk/types for type definitions
  • @ixon-cdk/static-builder for bundling JS files into webcomponents
  • @ixon-cdk/vue-builder for compiling Vue Single-File Components into webcomponents
  • @ixon-cdk/svelte-builder for compiling Svelte components into webcomponents
  • @ixon-cdk/iframe-adapter for proxying component context to an iframe.

Versioning

The versions of the NPM packages are aligned. This means that in order to ensure the Component SDK functions properly, the versions of all @ixon-cdk/<name> packages need to be the same. You can find the version numbers in the package.json file.

Updating

You can use the npm outdated command, to find out if there are later versions of the @ixon-cdk/-scoped packages. See the example below which is based on a simple workspace with a vue component: (actual results may differ on your machine)

$ npm outdated
Package                Current  Wanted  Latest  Location                        
@ixon-cdk/core         1.2.1    1.3.0   1.3.0   node_modules/@ixon-cdk/core
@ixon-cdk/runner       1.2.1    1.3.0   1.3.0   node_modules/@ixon-cdk/runner
@ixon-cdk/simulator    1.2.1    1.3.0   1.3.0   node_modules/@ixon-cdk/simulator
@ixon-cdk/templates    1.2.1    1.3.0   1.3.0   node_modules/@ixon-cdk/templates
@ixon-cdk/vue-builder  1.2.1    1.3.0.  1.3.0   node_modules/@ixon-cdk/vue-buider

To update, use the npm update command. Because all the NPM package versions must be aligned, you should pass all the @ixon-cdk/-scoped package names to the update command. See the example below:

npm update @ixon-cdk/core @ixon-cdk/runner @ixon-cdk/simulator @ixon-cdk/templates @ixon-cdk/vue-builder

As an alternative way for updating you can use the following script, which uses npm-check-updates to update only the @ixon-cdk/-scoped packages.

npx -p npm-check-updates ncu "/^@ixon-cdk\/.*$/" -u

Config File

The Component SDK is configured via a config file cdk.config.json that is placed in the root of your project workspace.

The Config JSON can be validated against its schema.