open-index/open-npm huggingface dataset:
npm package: @ionos-cloud/sdk-nodejs
Description: NodeJS SDK for the Ionos Cloud API
Author: Ionos
Latest version: 6.1.5

[![[ CI ] CloudApi V6 / NodeJS](https://github.com/ionos-cloud/sdk-resources/actions/workflows/ci-cloudapi-v6-node.yml/badge.svg)](https://github.com/ionos-cloud/sdk-resources/actions/workflows/ci-cloudapi-v6-node.yml)
[![Npm Version](https://img.shields.io/node/v/@ionos-cloud/sdk-nodejs)](https://www.npmjs.com/package/@ionos-cloud/sdk-nodejs) 
[![Gitter](https://badges.gitter.im/ionos-cloud/sdk-general.png)](https://gitter.im/ionos-cloud/sdk-general)
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=sdk-nodejs&metric=alert_status)](https://sonarcloud.io/dashboard?id=sdk-nodejs)
[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=sdk-nodejs&metric=bugs)](https://sonarcloud.io/dashboard?id=sdk-nodejs)
[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=sdk-nodejs&metric=sqale_rating)](https://sonarcloud.io/dashboard?id=sdk-nodejs)
[![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=sdk-nodejs&metric=reliability_rating)](https://sonarcloud.io/dashboard?id=sdk-nodejs)
[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=sdk-nodejs&metric=security_rating)](https://sonarcloud.io/dashboard?id=sdk-nodejs)
[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=sdk-nodejs&metric=vulnerabilities)](https://sonarcloud.io/dashboard?id=sdk-nodejs)

![Alt text](.github/IONOS.CLOUD.BLU.svg?raw=true "Title")

# Node JS API client for ionoscloud

An enterprise-grade Infrastructure is provided as a Service (IaaS) solution that can be managed through a browser-based \"Data Center Designer\" (DCD) tool or via an easy to use API. 

The API allows you to perform a variety of management tasks such as spinning up additional servers, adding volumes, adjusting networking, and so forth. It is designed to allow users to leverage the same power and flexibility found within the DCD visual tool. Both tools are consistent with their concepts and lend well to making the experience smooth and intuitive.

## Overview
This API client was generated by the [OpenAPI Generator](https://openapi-generator.tech) project.  By using the [OpenAPI-spec](https://www.openapis.org/) from a remote server, you can easily generate an API client.

- API version: 6.0
- Package version: 6.0.0
- Build package: org.openapitools.codegen.languages.GoClientCodegen

## Installation

Install the following dependencies:

```shell
npm i --save @ionos-cloud/sdk-nodejs
```

## Usage
Import the SDK using:

```javascript 
const sdk = require('@ionos-cloud/sdk-nodejs')
```

Or, if the import is done from an ES module, use:

```javascript
import * as sdk from '@ionos-cloud/sdk-nodejs';
```

Usage example:
```javascript
const config = new sdk.Configuration({username: 'YOUR_USERNAME', password: 'YOUR_PASSWORD'});
const dcApi = new sdk.DataCentersApi(config);

dcApi.datacentersGet().then((response) => console.log(response));
```
npm package: @ionos-cloud/sdk-nodejs-cert-manager
Description: NodeJS SDK for Certificate Manager
Author: Ionos
Latest version: 1.0.1

# sdk-nodejs-cert-manager
[![[ CI ] Certificate Manager / Node](https://github.com/ionos-cloud/sdk-resources/actions/workflows/ci-certmanager-node.yml/badge.svg)](https://github.com/ionos-cloud/sdk-resources/actions/workflows/ci-certmanager-node.yml)
# Overview
Using the Certificate Manager Service, you can conveniently provision and manage SSL certificates with IONOS services and your internal connected resources.

## Installation

Install the following dependencies:

```shell
npm i --save @ionos-cloud/sdk-nodejs-cert-manager
```

## Usage
Import the SDK using:

```javascript
const ionoscloud = require('@ionos-cloud/sdk-nodejs-cert-manager');
```

Or, if the import is done from an ES module, use:

```javascript
import * as ionoscloud from '@ionos-cloud/sdk-nodejs-cert-manager';
```

### Example

```javascript
const ionoscloud = require('@ionos-cloud/sdk-nodejs-cert-manager');
// setup authorization
const config = new ionoscloud.Configuration({
    username: 'YOUR_USERNAME',
    password: 'YOUR_PASSWORD',
    apiKey: 'YOUR_API_KEY'
});
const api_instance = new ionoscloud.InformationApi(config);
// Get the Service API Information
api_instance
  .getInfo()
  .then((response) => console.log(response.data))
  .catch((error) => console.log(error.response.data));
```

Returns the information about the API.

### Authentication

The username and password or the authentication token can be manually specified when initializing the configuration:

```javascript
const config = new ionoscloud.Configuration({
    username: 'YOUR_USERNAME',
    password: 'YOUR_PASSWORD',
    apiKey: 'YOUR_API_KEY'
});
```

Environment variables can also be used; the SDK uses the following variables:

* IONOS\_USERNAME - to specify the username used to log in
* IONOS\_PASSWORD - to specify the password
* IONOS\_TOKEN - if an authentication token is being used

In this case, the client configuration must be initialized using `fromEnv()`:

```javascript
const config = new ionoscloud.Configuration.fromEnv();
```

{% hint style="danger" %}
**Warning**: Make sure to follow the Information Security Best Practices when using credentials within your code or storing them in a file.
{% endhint %}

## Feature Reference

The IONOS Cloud SDK for Certificate Manager aims to offer access to all resources in the IONOS Certificate Manager API, and has additional features to make integration easier:

* Authentication for API calls
* Asynchronous request handling

## FAQ

1. How can I open a bug report/feature request?

Bug reports and feature requests can be opened in the Issues repository: [https://github.com/ionos-cloud/sdk-nodejs-cert-manager/issues/new/choose](https://github.com/ionos-cloud/sdk-nodejs-cert-manager/issues/new/choose)

2. Can I contribute to the NodeJS Certificate Manager SDK?

Our SDKs are automatically generated using OpenAPI Generator and don’t support manual changes. If you require changes, please open an issue, and we will try to address it.
npm package: @ionovitsky/test-component-2
Description: Made with create-react-library
Author: IgorNovitskiy
Latest version: 2.1.1

# test-component

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/test-component.svg)](https://www.npmjs.com/package/test-component) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save test-component
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from 'test-component'
import 'test-component/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [IgorNovitskiy](https://github.com/IgorNovitskiy)
npm package: @ionut.baciu1501/web-components-practice
Description: Webcomponent web-components-practice following open-wc recommendations
Author: web-components-practice
Latest version: 0.0.0

# \<web-components-practice>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation
```bash
npm i @ionut.baciu1501/web-components-practice
```

## Usage
```html
<script type="module">
  import '@ionut.baciu1501/web-components-practice/web-components-practice.js';
</script>

<web-components-practice></web-components-practice>
```



## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`
```bash
npm start
```
To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @ionutinit/test-it
Description: Syntactic shortcut to basic jest tests. Made for personal use and for testing npm.
Author: Ionut Cojocaru
Latest version: 0.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Syntactic shortcut to basic jest tests. Made for personal use and for testing npm.

### Syntax

---

```typescript
const tests = [
    [
        [<input params>], <expected result>,
        {
            // overrides global function settings
            type?: string,
            description?: string,
        }
        ]
]
```

```typescript
testIt(
    <function>, tests
    {
        type?: string,
        description?: string,
    }
)
```

### Currently supported types

---

\*defaults to **equal\***

| Type        | Jest method                            |
| ----------- | -------------------------------------- |
| be          | toBe                                   |
| equal       | toEqual                                |
| error       | toThrowError                           |
| hasProperty | toHaveProperty                         |
| warn        | toHaveBeenCalledWith <console, "warn"> |
npm package: @ionutmilica/please
Description: CLI app used to run, test, build and lint node applications
Author: Ionut Milica
Latest version: 0.7.0

# `@ionutmilica/please`

## Description
This tool comes with preconfigured build steps like: run, build, test, lint and format.

## Usage

```sh
npm install @ionutmilica/please --save-dev
```

Then you need to add the following scripts into your project package.json:
```json
{
  "scripts": {
    "start": "please run ./src/app.ts",
    "build": "please build",
    "format": "please format",
    "test": "please test",
    "lint": "please lint"
  }
}
```

In order to also support the editors your root project should contain:

#### tsconfig.json
```json
{
  "extends": "@ionutmilica/please/config/tsconfig.base.json",
  "include": ["src"],
  "exclude": [
    "node_modules",
    "**/*.test.ts",
    "**/*.spec.ts"
  ]
}
```
#### jest.config.js
```js
module.exports = require('@ionutmilica/please/config/jest.config.js');
```
#### prettier.config.js
```js
module.exports = require('@ionutmilica/please/config/prettier.config.js');
```
#### .eslintrc
```js
module.exports = require('@ionutmilica/please/config/eslint.config.js');
```

### Overwriting config
Config files are loaded by priority (config from working dir, config bundled in package). This means that for example if
we have a **prettier.config.js** in the project root we can overwrite the default configs bundled in the package.
```js
const baseConfig = require('@ionutmilica/please/config/prettier.config.js');
module.exports = {
  ...baseConfig,
  tabWidth: 4,
};
```
npm package: @ionx/enum
Description: A simple, zero-dependency JavaScript enum implementation
Author: Mesbah Mowlavi
Latest version: 1.0.0

Simple Enum
=============

A simple JavaScript enum implementation. It can be used in every way an enum should be usable.


### Installation
Like any other node package
`
yarn add @ionx/enum
`
Not using yarn? [You should be!](https://code.facebook.com/posts/1840075619545360)

### Usage
```js
const Enum = require('@ionx/enum')

var Fruit = Enum(['Apple', 'Kiwi', 'Banana', 'Tangerine', 'DragonFruit'])

var bestFruit = Fruit.DragonFruit

// Additional properties
// Fruit.keys: an array of all keys
// Fruit.length: number of keys
```

### Licence
Released under the MIT licence.
npm package: @ionx/react-routing
Description: Simple page router for React with minimal dependencies
Author: Mesbah Mowlavi
Latest version: 0.1.4

# React Routing

> Simple page router for React with minimal dependencies

[![NPM](https://img.shields.io/npm/v/@ionx/react-routing.svg)](https://www.npmjs.com/package/@ionx/react-routing) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @ionx/react-routing
```

## Basic Usage

Simple usage without redux:

```jsx
import React from 'react'
import { render } from 'react-dom'
import { Router } from 'react-routing'

const Page1 = props => <h1>Page 1</h1>
const Page2 = props => <h1>Page 2</h1>

const App = (
  <Router routes={{
    '/uno': Page1,
    '/dos': Page2,
    '': '/uno' // Default handler redirects to /uno
  }} />
)

render(App, document.getElementById('root'))
```

It is recommended to use React-Routing with redux, in which case the LocationReducer should be registered with `createStore`, and the funcion `bindHistory(store)` should be called after the store is created.

For a complete example using Redux, see the `example` folder.

## License

MIT © [PowerOfM](https://github.com/PowerOfM)
npm package: @ionyx-apps/cli
Description: Ionyx Framework CLI - High-performance desktop apps with Rust and WebGPU, featuring detailed template architectures
Author: Ionyx Apps
Latest version: 0.5.15

# 🚀 Ionyx Framework CLI

> **High-performance desktop apps with Rust, WebGPU, and Native Fusion.**

[![Ionyx Framework](https://img.shields.io/badge/Ionyx-Framework-blue?style=for-the-badge&logo=rust)](https://ionyx.app)
[![npm version](https://img.shields.io/npm/v/@ionyx-apps/cli.svg?style=for-the-badge)](https://www.npmjs.com/package/@ionyx-apps/cli)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)

Ionyx, modern masaüstü uygulamaları için geliştirilmiş, **Tauri** ve **Electron**'un gücünü **NW.js**'in kullanım kolaylığı (Native Fusion) ile birleştiren yeni nesil bir framework'tür.

---

## 🔥 Temel Özellikler

- 🦀 **Rust Core**: Güvenlik ve performans için TAO ve WRY üzerine kurulu.
- 🧬 **Native Fusion**: Backend state'ine frontend'den doğrudan (`window.fusion`) erişim. (Bi-directional Sync)
- 🎮 **WebGPU Support**: Yeni nesil grafik performansı tüm şablonlarda hazır.
- ⚕️ **Ionyx Doctor**: Geliştirme ortamınızı tek komutla denetleyin.
- 📦 **Native Bundling**: `.exe`, `.msi`, `.dmg`, `.appimage` ve taşınabilir ZIP paketleme.
- 🖼️ **Icon Support**: Uygulama ikonlarını tüm platformlar için otomatik dönüştürür.

---

## ⚡ Hızlı Başlangıç

### 1. Kurulum

Ionyx CLI'ı global olarak yükleyin:

```bash
npm install -g @ionyx-apps/cli
```

### 2. Ortam Kontrolü

Her şeyin hazır olduğundan emin olun:

```bash
ionyx doctor
```

### 3. Yeni Proje Oluşturun

İstediğiniz framework şablonuyla başlayın (React, Vue, Svelte, Leptos, Vanilla):

```bash
ionyx init my-app --template react
```

### 4. Geliştirmeye Başlayın

```bash
cd my-app
npm run ionyx:dev
```

---

## 🧬 Ionyx Native Fusion

NW.js'in "Unified Context" yapısından esinlenilen **Native Fusion**, frontend ve backend arasındaki sınırı kaldırır.

```javascript
// JS içinden Rust tarafındaki sistem verilerine anında erişin!
console.log(fusion.app_name); 
console.log(fusion.os);

// Değeri güncellediğinizde Rust tarafı otomatik senkronize olur
fusion.theme = "dark"; 
```

---

## 🏗️ Mimari Kıyaslama

| Özellik | Ionyx | Tauri | Electron |
| :--- | :---: | :---: | :---: |
| **Paket Boyutu** | ✅ ~3MB | ✅ ~5MB | ❌ ~100MB |
| **Native Fusion** | ✅ Var | ❌ Yok | ❌ Yok |
| **WebGPU** | ✅ Default | ⚠️ Limited | ✅ Var |
| **Performans** | 🚀 Native | 🚀 Native | 🐢 Node.js |
| **Güvenlik** | 🛡️ Sandbox | 🛡️ Sandbox | ⚠️ Açık |

---

## 📦 Dağıtım (Packaging)

Uygulamanızı paketlemek artık çok kolay:

```bash
# Windows için .exe ve .msi oluşturur
ionyx bundle

# Taşınabilir bir ZIP paketi oluşturur
ionyx bundle --portable
```

---

## 🤝 Katkıda Bulunma

Proje şu an aktif geliştirme aşamasındadır. PR'larınızı ve feedbacklerinizi bekliyoruz!

- **GitHub**: [ionyx-apps/ionyx](https://github.com/ionyx-apps/ionyx)
- **Website**: [ionyx.app](https://ionyx.app)

---

**🚀 Ionyx Framework - Desktop applications made fusion!**
npm package: @iooota_srl/angular-cron-gen
Description: A cron expression generator for AngularJS.
Author: Vincent Pizzo
Latest version: 1.0.0

# angular-cron-gen

A basic way to for users to graphically build a cron expression.

Demo can be found [here](https://vincentjames501.github.io/angular-cron-gen/).

**Requirements:** AngularJS 1.5+

## Usage

1. Include the dependency in your app

    ```js
    angular.module('myApp', ['angular-cron-gen'])
    ```

2. Include the supplied JS and CSS file (or create your own CSS to override defaults).

    ```html
    <link rel='stylesheet' href='build/cron-gen.min.css' type='text/css' media='all' />
    <script type='text/javascript' src='build/cron-gen.min.js'></script>
    ```

3. That's it -- you're done!

### Via npm

```
$ npm install @mrbatista/angular-cron-gen
```

## Options

```html
<cron-gen ng-model="cronExpression"
          options="cronOptions"
          template-url="your optional, custom template (Defaults to a bootstrap 3 template)"
          cron-format="quartz (Currently only compatible with 'quartz' and defaults to 'quartz')"
          ng-disabled="isCronDisabled">
</cron-gen>
```

```js
angular.module('myApp', ['angular-cron-gen'])
  .controller('myController', ['$scope', ($scope) => {
    $scope.cronExpression = '0 0 0/3 1/1 * ? *';
    $scope.isCronDisabled = false;
    $scope.cronOptions = {
      formInputClass: 'form-control cron-gen-input', // Form input class override
      formSelectClass: 'form-control cron-gen-select', // Select class override
      formRadioClass: 'cron-gen-radio', // Radio class override
      formCheckboxClass: 'cron-gen-checkbox', // Radio class override
      hideMinutesTab: false, // Whether to hide the minutes tab
      hideHourlyTab: false, // Whether to hide the hourly tab
      hideDailyTab: false, // Whether to hide the daily tab
      hideWeeklyTab: false, // Whether to hide the weekly tab
      hideMonthlyTab: false, // Whether to hide the monthly tab
      hideYearlyTab: false, // Whether to hide the yearly tab
      hideAdvancedTab: true, // Whether to hide the advanced tab
      use24HourTime: false, // Whether to show AM/PM on the time selectors
      hideSeconds: false // Whether to show/hide the seconds time picker
    };
  }])
```

## License

Licensed under the MIT license
npm package: @iooota_srl/cordova-plugin-crosswalk-migration-iooota
Description: Cordova/Phonegap plugin for Android to preserve persistent webview data after removing Crosswalk from your app.
Author: Dave Alden
Latest version: 1.0.8

Cordova Crosswalk Data Migration Plugin forked from:
https://github.com/salesfusion-dev/cordova-plugin-crosswalk-migration


Added a popup message dialog during migration and application 
autorestart after successful migration.

You can customize popup dialog title and message by using these global
preferences:

```xml
<preference name="XwalkMigration.alertTitle" value="TITLE" />
<preference name="XwalkMigration.alertMessage" value="MESSAGE">
```
npm package: @iooxa/ink-article
Description: Scientific web components for interactive scientific writing, reactive documents and explorable explanations.
Author: rowanc1
Latest version: 0.2.3
Deprecated: The package has been renamed to @iooxa/article. Thanks 🚀

# @iooxa/ink-article

[![Ink-Basic on npm](https://img.shields.io/npm/v/@iooxa/ink-article.svg)](https://www.npmjs.com/package/@iooxa/ink-article)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/iooxa/ink-article/blob/master/LICENSE)

The goal of `ink-article` is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). This library provides the layout and scientific specific parts of [ink-components](https://components.ink) including ways equations, asides.

The [ink-components](https://components.ink) project is heavily inspired by [tangle.js](http://worrydream.com/Tangle/guide.html), re-imagined to use [web-components](https://www.webcomponents.org/)!
This means you can declaratively write your variables and how to display them in `html` markup.
To get an idea of what that looks like, let's take the canonical example of *Tangled Cookies* - a simple reactive document.

![How many calories in that cookie?](images/tangle.gif)

```html
<ink-var name="cookies" value="3" format=".4"></ink-var>
<ink-var name="caloriesPerCookie" value="50"></ink-var>
<ink-var name="dailyCalories" value="2100"></ink-var>

<ink-var name="calories" :value="cookies * caloriesPerCookie" format=".0f"></ink-var>
<ink-var name="dailyPercent" :value="calories / dailyCalories" format=".0%"></ink-var>

<p>
  When you eat <ink-dynamic bind="cookies" min="2" max="100">cookies</ink-dynamic>,
  you consume <ink-display bind="calories"></ink-display> calories.<br>
  That's <ink-display bind="dailyPercent"></ink-display> of your recommended daily calories.
</p>
```

## Getting Started

Ink is based on web-components, which creates custom HTML tags so that they can make writing documents easier.
To get started, copy the built javascript file to the head of your page:

```html
<script src="https://unpkg.com/@iooxa/ink-article"></script>
```

You can also download the [latest release](https://github.com/iooxa/ink-article/releases) from GitHub. If you are running this without a web server, ensure the script has `charset="utf-8"` in the script tag. You can also [install from npm](https://www.npmjs.com/package/@iooxa/ink-article):

```bash
>> npm install @iooxa/ink-article
```

You should then be able to extend ink as you see fit:

```javascript
import components from '@iooxa/ink-article';
```

Note that the npm module does not setup the [@iooxa/runtime](https://github.com/iooxa/runtime) store, nor does it register the components. See the [ink.ts](/ink.ts) file for what the built package does to `setup` the store and `register` the components.
npm package: @iooxa/ink-chart
Description: Scientific web components for interactive scientific writing, reactive documents and explorable explanations.
Author: rowanc1
Latest version: 0.0.2
Deprecated: The package has been renamed to @iooxa/svg. Thanks 🚀

# @iooxa/ink-chart

[![Ink-Basic on npm](https://img.shields.io/npm/v/@iooxa/ink-chart.svg)](https://www.npmjs.com/package/@iooxa/ink-chart)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/iooxa/ink-chart/blob/master/LICENSE)

The goal of ink-chart is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). This library provides basic charting capabilities of [ink-components](https://components.ink) including 2D svg graphics.

## Getting Started

Ink is based on web-components, which creates custom HTML tags so that they can make writing documents easier.
To get started, copy the built javascript file to the head of your page:

```html
<script src="https://unpkg.com/@iooxa/ink-chart"></script>
```

You can also download the [latest release](https://github.com/iooxa/ink-chart/releases) from GitHub. If you are running this without a web server, ensure the script has `charset="utf-8"` in the script tag. You can also [install from npm](https://www.npmjs.com/package/@iooxa/ink-chart):

```bash
>> npm install @iooxa/ink-chart
```

You should then be able to extend ink as you see fit:

```javascript
import components from '@iooxa/ink-chart';
```

Note that the npm module does not setup the [@iooxa/runtime](https://github.com/iooxa/runtime) store, nor does it register the components. See the [ink.ts](/ink.ts) file for what the built package does to `setup` the store and `register` the components.

## Basic Components

* ink-chart
* ink-chart-text
* ink-chart-path
* ink-chart-eqn
* ink-chart-circle
* ink-chart-image
* ink-chart-node
npm package: @iooxa/svg
Description: Scientific web components for interactive scientific writing, reactive documents and explorable explanations.
Author: rowanc1
Latest version: 0.0.6
Deprecated: The package has been renamed to @curvenote/svg. Thanks 🚀

<p align="center"><a href="https://iooxa.dev"><img src="https://iooxa.dev/images/logo.png" alt="iooxa.dev" width="150"></a></p>

# @iooxa/svg

[![Ink-Basic on npm](https://img.shields.io/npm/v/@iooxa/svg.svg)](https://www.npmjs.com/package/@iooxa/svg)
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/iooxa/svg/blob/master/LICENSE)
[![Documentation](https://img.shields.io/badge/iooxa.dev-Docs-green)](https://iooxa.dev)

The goal of `@iooxa/svg` is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). This library provides basic charting and diagram capabilities through basic, reactive SVG graphics.

![Radius](images/radius.gif)

```html
<r-var name="a" value="3"></r-var>
<r-var name="b" value="3"></r-var>
<r-var name="r" :value="Math.sqrt(a*a + b*b)"></r-var>
<r-svg-chart xlim="[-5, 5]" ylim="[-5, 5]" height="400" width="400" x-axis-location="origin" y-axis-location="origin" style="text-align: center;">
  <r-svg-eqn :domain="[0, Math.atan2(b, a)]" eqn="[r * Math.cos(t), r * Math.sin(t)]" parameterize="t" stroke="#333" stroke-width="1" stroke-dasharray="3"></r-svg-eqn>
  <r-svg-path :data="[[0, 0],[r * Math.cos(Math.atan2(b, a)), r * Math.sin(Math.atan2(b, a))]]" stroke="#333" stroke-width="1" stroke-dasharray="3"></r-svg-path>
  <r-svg-text :x="(r/2) * Math.cos(Math.atan2(b, a) / 2)" :y="(r/2) * Math.sin(Math.atan2(b, a) / 2)" :text="Math.round(Math.atan2(b, a)*180/Math.PI) + '°'"></r-svg-text>
  <r-svg-node :x="a" :y="b" :drag="{a: x, b: y}" fill="#ff7f0e"></r-svg-node>
</r-svg-chart>
```

## Getting Started

`@iooxa/svg` is based on web-components, which creates custom HTML tags so that they can make writing documents easier.
To get started, copy the built javascript file to the head of your page:

```html
<script src="https://unpkg.com/@iooxa/svg"></script>
```

You can also download the [latest release](https://github.com/iooxa/svg/releases) from GitHub. If you are running this without a web server, ensure the script has `charset="utf-8"` in the script tag. You can also [install from npm](https://www.npmjs.com/package/@iooxa/svg):

```bash
>> npm install @iooxa/svg
```

You should then be able to extend the package as you see fit:

```javascript
import components from '@iooxa/svg';
```

Note that the npm module does not setup the [@iooxa/runtime](https://github.com/iooxa/runtime) store, nor does it register the components. See the [iooxa.ts](/iooxa.ts) file for what the built package does to `setup` the store and `register` the components.

## Documentation

See https://iooxa.dev for full documentation.

## Basic Components

* r-svg-chart
* r-svg-text
* r-svg-path
* r-svg-eqn
* r-svg-circle
* r-svg-image
* r-svg-node