open-index/open-npm huggingface dataset:
npm package: @jsimple/dom-render
Description: ## Get started To install the library enter the following command:
Latest version: 0.1.2

# @jsimple/dom-render

## Get started
To install the library enter the following command:

```
npm install @jsimple/dom-render
```

## Example

```html
<!-- HTML file-->
<div data-define="app-component">
  <button id="btn" type="button" $click="setIsOpen(!isOpen())">open</button>
  <div $display="isOpen()">lorem ipsum</div>
</div>
```
```javascript
// Javascript file
import $ from "@jsimple/core";
import { DOMRender } from "@jsimple/dom-render";

function AppComponent() {
  const [isOpen, setIsOpen] = $.signal(false);
  return {isOpen, setIsOpen}
}

run([AppComponent])
```

or without the run function:

```javascript
// Javascript file
import $ from "@jsimple/core";
import { DOMRender } from "@jsimple/dom-render";

const [isOpen, setIsOpen] = $.signal(false);
DOMRender({isOpen, setIsOpen}, $.select("#app"))
```


## API

### DOMRender()

This packages consists of a tree walker that adds effects to rerender the dom.

The `DOMRender` function takes two arguments:
- a context object consisting of the variables and functions that are called in the dom.
- a mount element to identify which part should be scanned. To avoid walking multiple times the same tree if there are multiple DOMRender function running, you must add a data-define attribute to your mount element. It will stop a higher DOMRender tree walker and let the new one take over.

### run()

The run function takes an array of component functions and applies DOMRender() to each of the functions by auto-selecting the mount element by deriving it from the function name.

```html
<div data-define="my-fancy-component">
  <div data-define="my-second-fancy-component"></div>
</div>
<div data-define="my-third-fancy-component"></div>
```

```javascript
import $ from "@jsimple/core";
import { DOMRender } from "@jsimple/dom-render";

function MyFancyComponent() {
  ...
  return {...}
}
function MySecondFancyComponent() {
  ...
  return {...}
}
function MyThirdFancyComponent() {
  return {...}
}

run([MyFancyComponent, MySecondFancyComponent, MyThirdFancyComponent])
```

If you plan to minify your code you'll have to set the esbuild option `keepNames` to true as the code needs the real function name to infer the component to be walked.

### Events

you can use `$click`, `$mouseover`, `$mouseout`, `$change`, `$keydown` to add event listeners to your elements.

### $display

defines the display style of an element.
npm package: @jsimple/fetcher
Description: ## Get started To install the library enter the following command:
Latest version: 0.0.1

# @jsimple/fetcher

## Get started
To install the library enter the following command:

```
npm install @jsimple/fetcher
```

## Example

Using the fetcher package you can fetch and cache data easily.

```html
<!-- HTML file-->
<div data-define="component-with-data" class="component">
  <svg $display="isLoading()" class="spinner" viewBox="0 0 50 50">
    <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
  </svg>
  <div $display="!isLoading()" class="card">
    <p class="font-bold uppercase text-14 text-slate-900">{data()?.name}</p>
    <span>{data()?.body}</span>
  </div>
</div>
```

```javascript
// Javascript file
import { run } from "@jsimple/dom-render";
import { GET, load } from "@jsimple/fetcher";

const getTodos = GET<TodoData>("https://jsonplaceholder.typicode.com/comments/1");

function ComponentWithData() {
  const { data, isLoading } = load(getTodos, ["keyString"]);
  return {
    data,
    isLoading,
  };
}
  
run([ComponentWithData]);
```

## API

### load()

this functions takes a promise in argument, execute it, caches the results and returns the following object:

```javascript
function load<Schema>(promise: Promise<Schema>, cacheKeys: Array<string | TSignal>): {
  data: TSignal | null,
  isLoading: TSignal,
  isError: TSignal,
  error: TSignal,
}
```

### GET()

```javascript
function GET<TData>(url: string, options: RequesterOptions): Promise<TData>
```