open-index/open-npm huggingface dataset:
npm package: @kano/es6-resolution
Description: Transforms your named ES6 Imports into resolved paths, allowing a browser to fetch the dependencies.
Latest version: 1.0.20

# ES6 names resolution for servers

Transforms your named ES6 Imports into resolved paths, allowing a browser to fetch the dependencies.

## Usage

```js
const resolve = require('@kano/es6-resolution');

const body = `
import { Utils } from '@acme/my-lib/lib/utils.js';

`;

const upgradedBody = resolve(body, 'application/javascript', __dirname + '/index.js');
```
Will be translated to
```js
import { Utils } from '../../node_modules/@acme/my-lib/lib/utils.js';
```

Browsers will be happy and no code compilation is needed
npm package: @kano/es6-server
Description: CLI built with connect to serve development files. Named modules in js and html files will be resolved against the `node_modules` directory and replaced with their relative path.
Latest version: 1.0.3

# ES6 Server

CLI built with connect to serve development files. Named modules in js and html files will be resolved against the `node_modules` directory and replaced with their relative path.

Example:

In source file:
```js
import { add } from 'math-lib/index.js';
```

Will be sent by this server as:

```js
import { add } from './node_modules/math-lib/index.js';
```

If the module cannot be resolved, it will be left as is and the browser will throw an error about the named module.

## Usage

```
es6-server # Serves the current directory on port 4000
es6-server ./subdir # Serves the provided directory on port 4000
es6-server --port 7000 # Serves the current directory on port 7000
es6-server --port 0 # Serves the current directory on a randomized port
```
npm package: @kano/eslint-config
Description: Kano Computing JS Style Guide extension of airbnb-base
Author: Radek Pazdera
Latest version: 1.0.1

# Kano Javascript Style Guide

Following [Paul's proposal](https://github.com/KanoComputing/rfc/issues/5) in January 2018,
we agreed to adopt new Javascript style that makes more sense as we use more ES6 features.
This will apply to all new projects. We'll be moving old code to the new style as we go.

## Style Guide

We use the [Airbnb Style Guide](https://github.com/airbnb/javascript) and evolve the configuration with our own preferences

## ESLint Configuration

The AirBnB guys provide an ESLint config that we're extending. See [eslintrc.js](https://github.com/KanoComputing/eslint-config-kano/blob/master/eslintrc.js) for more information.

## Adding Kano ESLint config to your project

Add the following dev-depencencies:

```bash
yarn add --dev @kano/eslint-config
```

Create an eslint configuration file in your repo `.eslintrc.js`:

```js
module.exports = {
    extends: "kano",
    rules: {
        /* add any project-specific rules */
    }
};
```

Then you'll need to configure your editor to run eslint using the project configuration.

## VSCode Configuration

Install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) from the VS Code marketplace.

In User Settings, set the following:

```json
{
    "javascript.validate.enable": false
}
```

This will disable the default javascript linter to avoid conflicts with eslint. If you have jshint or jscs installed, make sure to disable those as well.

Restart VSCode and you should be all set!

## Atom Configuration

Install the [linter-eslint](https://atom.io/packages/linter-eslint) package. It will pick up the project configuration by default.

Make sure to disable `linter-jshint`, `linter-jscs` and other linters that might give you conflicting messages.

## Sublime Text Configuration

For Sublime Text, install the following packages

* [SublimeLinter](http://www.sublimelinter.com/en/latest/)
* [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)

Make sure to install the packages in that order, otherwise the eslint plugin won't be picked up.

The default configuration is enough to pick up both `eslint` and `.eslintrc.js` from the project folder.
npm package: @kano/i18n
Description: Provide a simple message DB managment and localization function.
Author: Kano Computing
Latest version: 1.0.4

# Web i18n

Provide a simple message DB managment and localization function.

## Usage

Add to your project using `yarn add @kano/i18n`;

Im port and use as follow

```js
import { _, setDefaultLang, addSupportedLanguage } from '@kano/i18n/index.js';

// Add the supported langauges before using any other functions
addSupportedLanguage('de-DE');
// Set the default language, will be used if the browser is configured to use a non supported language
setDefaultLang('en-GB');

// Use the _ function to resolve all messages. Provide a fallback that will be used to generate
// the default language file
const message = _('UPDATE_NOW', 'Update now');

```

## Generating the language files

Once all the strings in your codebase has been tokenized using the `_` function, you can generate a language file using the provided tool.


Example:
```
i18n-generator ./code/**/*.js
```

Will print all keys and their default values from the codebase. Run `i18n-generator --help` to see all options
npm package: @kano/icons
Description: Set of icons to use and re-use across UIs
Latest version: 3.3.14

# Kano icons

Set of icons to use and re-use across UIs

## Installation

```
yarn add @kano/icons
```

## Usage

```js
// Import the needed icon
import { close } from '@kano/icons/ui.js';

// Create a new instance by cloning the template's content
const instance = close.content.cloneNode(true);

// Add it anywhere, it's just a DOM node
document.body.appendChild(instance);

// If using a string template engine that supports templates, just do
const template = html`
    <div>${close}</div>
`;
```
npm package: @kano/icons-rendering
Description: A small set of functions to help organizing the rendering of SVG icons with HTML templates.
Latest version: 3.3.14

# Icons rendering

A small set of functions to help organizing the rendering of SVG icons with HTML templates.

## Create the template

Keeping your SVG icons in memory as HTML template is efficient as the browser can copy the DOM tree really fast.
You can create the template using the `svg` string litteral tag.
This can be used to create a SVG icon sheet with a whole set of icons.

```js
import { svg } from '@kano/icons-rendering/index.js';

const svgTemplate = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"></svg>`;

```

## Render the icon

Rendering an icon by embedding its svg is the most efficient way to do it, you can clone the template to append its contents for a quick icon injection:

```js

const { content } = svgTemplate.cloneNode(true);

el.appendChild(content);

```

If you do not control where the icon will be rendered and a src is required, you can use the `dataURI` method:

```js
import { svg, dataURI } from '@kano/icons-rendering/index.js';

const svgTemplate = svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"></svg>`;

const imageSrc = dataURI(svgTemplate);

```
npm package: @kano/icons-tool
Description: Generates svg icon sheet from a collection of svg files. Icons are optinized using https://github.com/svg/svgo. The default formatter exports a SVG icon sheet ready to be used with `@kano/icons-rendering`
Latest version: 3.3.14

## Generation

Generates svg icon sheet from a collection of svg files. Icons are optinized using https://github.com/svg/svgo.
The default formatter exports a SVG icon sheet ready to be used with `@kano/icons-rendering`

Example:

```js
import { svg } from '@kano/icons-rendering/index.js';

export const logout = svg`...`;
export const login = svg`...`;
export const exit = svg`...`;
export const caret = svg`...`;
// ...

```

## Installation

`yarn global add @kano/icons-tool`

## Usage

Print to console:
`icons-tool generate ./icons`

Generate a file:
`icons-tool generate ./icons -o icons.js`

## Programmatic usage

Use this module to bundle SVG icons with a custom formatter

```js
const iconsTool = require('@kano/icons-tool');

iconsTool.generate({
    sources: './icons',
    formatter: (svgIcon) => `const ${svgIcon.name} = '${svgIcon.content}';`, // Optional
    header: '// Optional header append at the top of the generated file', // Optional
}).then((result) => {
    console.log(result);
});

```
npm package: @kano/kit-app-shell-android
Description: Android support for kit-app projects
Latest version: 0.0.3-alpha.90

# KASH android

Android support for kit-app projects

## Installation

```
yarn global add @kano/kit-app-shell-android
```

## Usage

Create a project following the guide at [@kano/kit-app-shell-core](../core). Then run

```
kash run android ./
```

This will create an android application from your project, install it on a connected android device and launch the application.
This application linked to your local sources. Your files are watched and the application will refresh on changes.

```
kash build android ./
```

This will create an .apk with your application, transpiled and compressed.

## Options

In your project's kash-config file, you can configure the android build as follow:

```js
/**
 * @type {import('@kano/kit-app-shell-core/types').KashConfig}
 */
module.exports = {
    android: {
        minSdkVersion: 21,
        maxSdkVersion: 28,
        preferences: {
            // Here drop cordova preferences for your project. See https://cordova.apache.org/docs/en/latest/config_ref/#preference
        },
        supportsScreens: {
            anyDensity: true,
            smallScreens: false,
            normalScreens: false,
            largeScreens: true,
            xlargeScreens: true,
        },
    },
};
```

In your project's config (`config/*.json`), you can add:

```json
{
    "ICONS": {
        "ANDROID": "assets/app/android/icon.png"
    },
    "SPLASHSCREENS": {
        "ANDROID": "assets/app/android/screen.png"
    }
}
```

The icon will be used to generate all the necessary icons for an android project, so make sure it is at least 512x512, same thing goes for the splashcreen, it will be cropped to fit the screens.
To support landsapce and portrait orientations, provide a large square splashcreen.

## TODO:

 - run: Only work on target platforms with Chrome 61+ for es6 imports. Add a flag to transpile on the fly with livereload watch. Rollup connect middleware?
 - Maybe embed the android licenses hash to accept them automatically on CI servers. See https://developer.android.com/studio/intro/update#download-with-gradle
npm package: @kano/kit-app-shell-cordova
Description: This platform provides common tools to develop, build and test on mobile platforms using the cordova project.
Latest version: 0.0.3-alpha.90

# KASH cordova

This platform provides common tools to develop, build and test on mobile platforms using the cordova project.

## Extra

The run command uses your IP to setup livereload using your local network.
It tries to guess your IP address but can select the wrong one if you have multiple valid network interfaces (e.g. VirtualBox interfaces).

If you have troubles gettin livereload working, try to set the environment variable `KASH_NET_INTERFACE_NAME` to your network interface name.
This will tell the platform where to look for your local IP.
npm package: @kano/kit-app-shell-core
Description: Set of tools to bundle, transpile and compress apps.
Latest version: 0.0.3-alpha.90

# KASH Core

Set of tools to bundle, transpile and compress apps.

## Creating a project

This guide will explain how to create a minimal project that can be used to output an application on all the platforms supported by kit-app-shell

### index.js

Create an `index.js` file and input the following:

```js
// This is your app main class, the bridge between the shell and your web content
class App {
    // When your app is created, it is given a bus to communicate with the backend and
    // a config object containing your project's config
    constructor(bus, config) {
        // kit-app-shell will be looking for this property to be set as the root of your DOM tree
        this.root = document.createElement('div');
        // Show something
        this.root.innerText = 'Hello World'
    }
}

// By calling this method, you provide the shell your App class and it will be used to start the app
Shell.define(App);
```

With this simple configuration, you can already run `kash run web ./` in your project's directory (Make sure you have `@kano/kit-app-shell-web` installed) and open a browser to the given URL.
You should now see your `Hello World` message.

### Environment and config

Each app is ran or built for a target environment. This environment can be defined using the `--env` flag with the CLI, its default value will be `development`
Config managment for your project is done through a set of JSON files under your project's `config` directory.

Create a `config` directory and a `default.json` inside. The `default.json` file will always be loaded, but its values can be overriden by a config file matching an environment.
If you add a `development.json` file both default and development config will be loaded and values in the development config will override the default values.
Common environments are `staging`, `production`, `rc`, `test`.

You can retrieve the app's environment at runtime through the `ENV` property in the config object.

In your newly created `default.json`, add the following:

```json
{
    "APP_ID": "com.acme.app",
    "APP_NAME": "My App"
}
```

Then update your `index.js`:

```js
class App {
    constructor(bus, config) {
        this.root = document.createElement('div');
        this.root.innerText = `${config.APP_NAME} - ${config.ENV}`;
    }
}

Shell.define(App);
```

Refreshing your browser page should now display the message `My App - development`, you can try running `kash run web ./ --env=<env>` with different environment to see the changes

### Versioning

The version of the app will be loaded from your project's `package.json` and will be added to the config object under the `VERSION` key.

Add a `package.json` file in your project if it doesn;t already have one. Set the `version` field to a custom version.

Update your `index.js` again to use the `VERSION` key from the config:

```js
this.root.innerText = `${config.APP_NAME} - ${config.ENV} running version ${config.VERSION}`;
```
npm package: @kano/kit-app-shell-electron
Description: - Reliable postinstall script that installs and build required dependencies when missing  - Investigate v8-compile-cache
Latest version: 0.0.3-alpha.90


## TODO

 - Reliable postinstall script that installs and build required dependencies when missing
 - Investigate v8-compile-cache

## v8-compile-cache

Without: 755ms
With: 687ms
With, warm: 655ms
npm package: @kano/kit-app-shell-windows
Description: Generates a windows installer
Latest version: 0.0.3-alpha.90

# Kash windows

Generates a windows installer

## Setup

In your project's config files add the following:

```json
{
    "ICONS": {
        "WINDOWS": "<path to icon>",
        "WINDOWS_INSTALLER": "<path to icon>",
        "WINDOWS_INSTALLER_BIG": "<path to icon>",
        "MIN_WINDOWS_VERSION": "<Min supported version for this app>",
        "MANUFACTURER": "<Manufacturer>"
    }
}
```

All the icons are resolved from the root of your project. These images must have the right extension and format:

`WINDOWS`: App icon, used in taskbar and titlebar .ico -> 256x256
`WINDOWS_INSTALLER`: Installer icon used in installer menu .bmp -> 410x797
`WINDOWS_INSTALLER_BIG`: Installer Left pane icon .bmp -> 138x140

Default icons will be used is not provided.

`MIN_WINDOWS_VERSION`: See http://www.jrsoftware.org/ishelp/index.php?topic=setup_minversion. Default to `10.0.15014`

`MANUFACTURER`: Is used in the metadata of the generated app

## Development

This platform uses `electron-packager` to create a windows application from your project.
This application is then used to create a windows Innosetup installer using the `installer.iss` script
npm package: @kano/kit-app-shell-windows-store
Description: Builds an .appx to be published on the Windows Store
Latest version: 0.0.3-alpha.90

# KASH Windows Store

Builds an .appx to be published on the Windows Store

## Setup

To build applications for the Windows Store, you will need a developer certificate. Each certificate is tied to a publisher.
If you are building an app locally and don't intend to publish it as is, you can use any publisher. e.g. CN=Myself.
If you are preparing a Store Submission, see the Preparing a submission chapter.

Now run `kash configure windows-store`, choose Create a new certificate and input your choosen Publisher. This will create a save a certificate for that publisher and will be used when building the .appx package.

In your project's config files add the following:

```json
{
    "WINDOWS_STORE": {
        "PACKAGE_NAME": "<Package name>",
        "PACKAGE_DISPLAY_NAME": "<Display name>",
        "PUBLISHER": "<Publisher>",
        "PUBLISHER_DISPLAY_NAME": "<Publisher Display Name>"
    }
}
```
This information can be found in the App identity section of the Microsoft partner center. For a local test, you can choose these fields, but make sure your generated certificate uses the same publisher as the one defined here.

### Preparing a submission

Login the partner center at https://partner.microsoft.com/en-us/dashboard/windows/overview,
navigate to your app in Overview > [App] > App Managment > App identity

![App identity](./docs/app-identity.png)

You will find here all the info to fill in the fields in your project's config files


## TODO
 - Generate All icons, some are missing
 - Add get-publisher key that retrieves the publisher ID for a given app