open-index/open-npm huggingface dataset:
npm package: @spearly/sdk-js
Description: [![Spec Test](https://github.com/unimal-jp/spearly-sdk-js/actions/workflows/spec.yml/badge.svg)](https://github.com/unimal-jp/spearly-sdk-js/actions/workflows/spec.yml)
Latest version: 2.0.4

# @spearly/sdk-js

[![Spec Test](https://github.com/unimal-jp/spearly-sdk-js/actions/workflows/spec.yml/badge.svg)](https://github.com/unimal-jp/spearly-sdk-js/actions/workflows/spec.yml)

It is a Development Kit that makes it easy to use Spearly CMS from JavaScript or NodeJS in API mode.

## Getting Started

### Install

```
// npm
$ npm install -S @spearly/sdk-js

// yarn
$ yarn add @spearly/sdk-js
```

## Usage

### Setup

```js
import { SpearlyApiClient } from '@spearly/sdk-js'

const apiClient = new SpearlyApiClient(API_KEY)
```

You can specify the API Server as well using by optional.

```js
import { SpearlyApiClient } from '@spearly/sdk-js'

const apiClient = new SpearlyApiClient(API_KEY, API_SERVER_DOMAIN)
```

### Get Content Lists

```js
async function() {
  // basic
  const contents =  await apiClient.getList(CONTENT_TYPE_ID)

  // when using some options
  const filteredContents =  await apiClient.getList(CONTENT_TYPE_ID, { limit: 10, offset: 20 })}
```

### Get Content

```js
async function() {
  const content = await apiClient.getContent(CONTENT_TYPE_ID, CONTENT_ID)
}
```

### Get Form

```js
async function() {
  const form = await apiClient.getFormLatest(FORM_ID)
}
```

### Submit Form

```js
async function() {
  const submit = await apiClient.postFormAnswers(FORM_VERSION_ID, { ...YOUR_FORM_FIRLD_ANSWERS, _spearly_gotcha: '' })
}
```

### A/B Testing analytics

> **Warning**  
> A/B Testing does not support Server side.  
> We are working on it now, so please wait for a while.

#### Page view

If you are using A/B testing, you can run the following code on page load to count impressions.

```js
import { SpearlyAnalytics } from '@spearly/sdk-js'

const analytics = new SpearlyAnalytics()

analytics.pageView({
  patternName: PATTERN_NAME,
  contentId: CONTENT_ALIAS,
})
```

#### Conversion

If you are using A/B testing, you can count conversions by using the conversion method as follows

```js
import { SpearlyAnalytics } from '@spearly/sdk-js'

const analytics = new SpearlyAnalytics()

document.querySelector('#submit').addEventListener('submit', () => {
  analytics.conversion({
    patternName: PATTERN_NAME,
    contentId: CONTENT_ALIAS,
  })
});
```


## Support TypeScript

Type definitions are also included, so there is no need to add anything else.

- `GetParams` : This is options that can be set when retrieving the ContentList.
- `List` : The type of the content list returned by the API.
- `Content` : The type of content returned by the API.
- `Form` : The type of form returned by the API.
npm package: @spearwolf/astro-rainbow-line
Description: astro wrapper for the rainbow-line web component
Author: Wolfger Schramm
Latest version: 1.3.0

# @spearwolf/astro-rainbow-line

An astro wrapper for the [rainbow-line web component](https://github.com/spearwolf/visual-fx-web-components/tree/main/packages/rainbow-line).

> It is currently assumed that the [rainbow-line.js](./rainbow-line-v0.4.0.js) is located under `${import.meta.env.BASE_URL}/js/rainbow-line-v0.3.0.js`
> or set the `RAINBOW_LINE_JS` environment variable to a different location than `js/rainbow-line-v0.4.0.js` by editing your `.env` file

## CHANGELOG

### 1.3.0 (2024-12-12)

- update `rainbow-line` web component to `0.4.0`
npm package: @spearwolf/offscreen-display
Description: helpers for creating custom offscreen canvas elements
Author: Wolfger Schramm
Latest version: 0.2.0

# @spearwolf/offscreen-display

![npm (scoped)](https://img.shields.io/npm/v/%40spearwolf/offscreen-display) [![License](https://img.shields.io/badge/License-Apache_2.0-yellowgreen.svg)](https://opensource.org/licenses/Apache-2.0)

A minimal javascript library that makes it pretty easy for you to create a _custom element_ that creates an _offline canvas_ in a _web worker_ and renders it in the _animation frame_ loop of the browser.

Whether webgl, webgpu or 2d context is up to the user, the class takes care of the synchronization of the element dimension and rendering of the frames.


## 📖 How To

### 1. Install

```sh
➜ npm i -D @spearwolf/offscreen-display
```

To get started quickly, [vite](https://vitejs.dev/) is recommended, but this is purely optional and a matter of taste.

> just updated? there is also a [CHANGELOG](https://github.com/spearwolf/visual-fx-web-components/blob/main/packages/offscreen-display/CHANGELOG.md)


### 2. Create custom element

`awesome-display.js`

```javascript
import {OffscreenDisplay} from '@spearwolf/offscreen-display';

class AwesomeDisplay extends OffscreenDisplay {
  createWorker() {
    return new Worker(new URL('awesome-display-worker.js', import.meta.url), {
      type: 'module',
    });
  }
}

customElements.define('awesome-display', AwesomeDisplay);
```

### 3. Integrate the element in your page

`index.html`

```html
<html>
  <body>
    <awesome-display></awesome-display>
    <script type="module" src="awesome-display.js"></script>
  </body>
</html>
```

### 3. Create your worker

`awesome-display-worker.js`

``` javascript
import {OffscreenWorkerDisplay} from '@spearwolf/offscreen-display/worker.js';

const display = new OffscreenWorkerDisplay();

let ctx = null;

display.on({
  onCanvas({canvas}, contextAttributes) {
    ctx = canvas.getContext('2d', contextAttributes);
  },

  onFrame({now, canvasWidth: w, canvasHeight: h}) {
    ctx.clearRect(0, 0, w, h);
  },
});

self.addEventListener('message', (evt) => {
  display.parseMessageData(evt.data);
});

```

### 4. More features available

There are other features not listed here. For a complete example, see the [rainbow line element](https://github.com/spearwolf/visual-fx-web-components/tree/main/packages/rainbow-line).


## Copyright and License

Copyright &copy; 2024 by [Wolfger Schramm](mailto:wolfger@spearwolf.de?subject=[GitHub]%20@spearwolf/offscreen-display).

The source code and npm package is licensed under the [Apache-2.0 License](./LICENSE).


<small>have fun!</small>
🚀🌱
npm package: @spearwolf/shadow-objects
Description: a reactive entity-component framework that feels at home in the shadows
Author: Wolfger Schramm
Latest version: 0.30.2

# Shadow Objects

[![npm](https://img.shields.io/npm/v/@spearwolf/shadow-objects)](https://www.npmjs.com/package/@spearwolf/shadow-objects)

Shadow Objects is a reactive ECS (Entity Component System) library that decouples business logic from UI rendering. Entities are lightweight game objects; Shadow Objects are ECS components that attach behavior to them. Shadow environments can run on the main thread (local) or in a web worker (remote) -- both are first-class.

## Installation

```bash
npm install @spearwolf/shadow-objects
```

## Quick Example

```typescript
import { Registry } from '@spearwolf/shadow-objects';

// Define a shadow object -- an ECS component with behavior
function MyComponent({ entity, useSignals }) {
  const [count, setCount] = useSignals('count', 0);

  entity.on('increment', () => setCount(count.get() + 1));

  return () => {
    // cleanup on destroy
  };
}

// Register it: when a view node has the token 'my-component',
// this shadow object runs in the shadow environment
Registry.define('my-component', MyComponent);
```

## Documentation

- [Overview](./docs/README.md)
- [Getting Started](./docs/getting-started.md)
- [Concepts](./docs/concepts.md)
- [Guides](./docs/guides.md)
- [API Reference](./docs/api-reference.md)
- [Cheat Sheet](./docs/cheat-sheet.md)
- [Best Practices](./docs/best-practices.md)
npm package: @spearwolf/shae-offscreen-canvas
Description: an offscreen canvas element based on the shadow-objects framework
Author: Wolfger Schramm
Latest version: 0.6.0


# @spearwolf/shae-offscreen-canvas

> a multi threaded renderer 🚀 for your browser using web workers and shared offscreen canvases

_Caution‼️ this is a highly experimental setup, but with a damn high awesomeness factor!_ 😉

Using the [shadow-objects](../shadow-objects/) library, the shae-offscreen-canvas package provides several web components that can be used to create a shadow-objects scenario that supports general offscreen canvas rendering as well as a shared three.js offscreen renderer.

## Integrate the web components in your page

_thinktank_

```html
<html>
  <body>
    <shae-offscreen-canvas-ctx src="my-shae-offscreen-canvas-shadow-objects.js">
    
      <t.5d-assets-store src="textures.json" />
    
      <!-- somewhere in your layout -->
      
      <shae-offscreen-canvas>
        <spw-starfield star-count="10000" />
      </shae-offscreen-canvas>

      <!-- somewhere else in your layout -->
      
      <shae-offscreen-canvas>
        <t.5d-bouncing-sprites count="500" />
      </shae-offscreen-canvas>

    </shae-offscreen-canvas-ctx>

    <script type="module" src="shae-offscreen-canvas.js"></script>
  </body>
</html>
```

For a real working demo, check out [./index.html](./index.html)

[The documentation for the shadow objects can be found here.](./src/shadow-objects/README.md)

## Local Development Setup

Run the tests with ..

```sh
➜ pnpm watch  # or just use `pnpm test`
```

Run the local test server/scenario with ..

```sh
➜ pnpm dev  # or use `pnpm nx dev shae-offscreen-canvas`
```
npm package: @spearwolf/twopoint5d
Description: Create 2.5D realtime graphics and pixelart with WebGL and three.js
Author: Wolfger Schramm
Latest version: 0.19.0

`@spearwolf/twopoint5d`

_a library to create 2.5d realtime graphics and pixelart with three.js_

![twopoint5d preview](https://raw.githubusercontent.com/spearwolf/twopoint5d/refs/heads/main/cover.png)

please see :octocat: [spearwolf/twopoint5d](https://github.com/spearwolf/twopoint5d) for full project details

have fun! :rocket: