open-index/open-npm huggingface dataset:
npm package: @marvinh/json-db
Description: Simple file based json database
Author: Marvin Hagemeister
Latest version: 0.0.3

# Simple JSON-Database

This is a simple implementation of a json-based collections, which can be queried
with predicates, similar to `Array.filter`.

## Installation

```bash
# npm
npm install @marvinh/json-db

# yarn
yarn add @marvinh/json-db
```

## Usage

```js
import { Collection, FileAdapter } from "@marvinh/json-db";

const posts = new Collection("posts", new FileAdapter("db.json"));

// Insert posts into the collection
await posts.update({ id: 1, title: "Hello World" });
await posts.update({ id: 2, title: "Second Post" });

// Contains the first post matching the predicate
const one = await posts.findOne(post => post.title = "Hello World");

// Contains all posts matching the predicate
const all = await posts.find(() => true);

// Delete a post
await posts.delete(one);
```

## License

`MIT`, see [License](./LICENSE).
npm package: @marvinh/locateable-error
Description: Print nice debug traces
Author: Marvin Hagemeister
Latest version: 1.2.1

# Locateable Error

Display a nicely formatted excerpt of the location where an `Error` occured.
Works with single pointers or ranges.

![Locateable Error](./example.png)

## Installation

```bash
npm install @marvinh/locateable-error

# or with yarn
yarn add @marvinh/locateable-error
```

## Usage

All objects which should produce nice coder-exerpts must implement the
`Locateable` interface:

```ts
interface Locateable {
  message: string;
  source: { body: string; name: string };
  inlineMessage?: string;
  locations: Array<{ line: number; column: number }>;
}
```

and then call `formatLocateable` on your object:

```ts
import { formatLocateable, Locateable } from "@marvinh/locateable-error";

// Your object which implements the `Locateable` interface
const err: Locateable = {...}

// Get the formatted string
const out = formatLocateable(err);

console.log(out);
// Prints
// > 1 | foo asd
//     |  ^^^ fail
//   2 | asd ads
//   3 | asd"
```

## License

`MIT`, see [License file](./LICENSE.md)
npm package: @marvinh/minichalk
Description: Minimal alternative to chalk
Author: Marvin Hagemeister
Latest version: 1.0.1

# minichalk

Minimal and tree-shake-able alternative to [chalk](https://github.com/chalk/chalk)
for coloring cli output.

## Installation

```bash
# npm
npm install --dev @marvinh/minichalk

# yarn
yarn add -D @marvinh/minichalk
```

## Usage

```js
import { red } from "@marvinh/minichalk";

console.log(red("Hello World"));
// logs (colorized in red on terminals that do support colors):
// -> "Hello World"
```

## License

`MIT`, see [LICENSE file](./LICENSE.md).
npm package: @marvinh/node-profiler
Description: Very simple wrapper around node's inspect module.
Author: Marvin Hagemeister
Latest version: 1.0.0

# node profiler

This is a very small module around node's built-in `inspector` module, because I always forget how to set it up.

## Usage

```sh
npm install -D @marvinh/node-profiler
# yarn
yarn add -D @marvinh/node-profiler
# pnpm
pnpm add -D @marvinh/node-profiler
```

Once installed:

```js
import * as fs from "fs";
import { startProfiling } from "@marvinh/node-profiler";

(async () => {
  // Start profiling session
  const stopProfiling = await startProfiling();

  // Do some stuff

  // Collect profile data and write it to disk
  const profile = await stopProfiling();
  // Write to disk
  fs.writeFileSync("./profile.cpuprofile", JSON.stringify(profile));
})();
```

## License

`MIT`, see [the license file](./LICENSE)
npm package: @marvinh/path-to-regexp
Description: Ultra small and fast path to regex generation
Author: Marvin Hagemeister
Latest version: 3.1.0

# Fast Path To RegExp

Ultra small and super fast library for converting paths
to `RegExp`. Only implements a subset of [path-to-regexp](https://github.com/pillarjs/path-to-regexp).

```txt
:myparam -> named parameters, f.ex. /bar/:foo
* -> wildcard catchall, f.ex. /bar/*/foo
```

## Usage

Installation:

```bash
# via npm
npm install --save @marvinh/path-to-regexp

# via yarn
yarn add @marvinh/path-to-regexp
```

```js
import { PathRegExp } from "@marvinh/path-to-regexp";

const Path = new PathRegExp("foo/:bar/*/bob");

// Returns params on match
Path.match("foo/asd/a/");
// -> {
//  matched: "", // The remaining part if any
//  params: { bar: "asd" }
// }
```

## License

`MIT`, see [License file](./LICENSE.md).
npm package: @marvinh/preact-router
Description: Simple router for preact
Author: Marvin Hagemeister
Latest version: 0.0.10

# Preact Simple Router

A simple router for [preact](https://github.com/developit/preact/).

## Installation

```bash
# npm
npm install --save @marvinh/preact-router

# yarn
yarn add @marvinh/preact-router
```

## Usage

// TODO

```jsx
import { h } from "preact";
import { Link } from "@marvinh/preact-router";

export default function App() {
  return (
    <div>
      <Link
        href="/blog/my-first-post"
        class="my-link"
        activeClass="my-active-link"
      >
        My First Blog Post
      </Link>
    </div>
  );
}
```

## License

`MIT`, see [License file](LICENSE.md).
npm package: @marvinh/proxystate
Description: A tiny reactive library similar to MobX, but based on proxies
Author: Marvin Hagemeister
Latest version: 0.0.7

# proxystate

A tiny reactive library similar to MobX, but based on proxies. It uses google
chrome's polyfill under the hood.

```bash
# npm
npm install @marvinh/proxystate

# yarn
yarn add @marvinh/proxystate
```

## Usage

```js
import { observable, observer } from "@marvinh/proxystate";

const obj = observable({ foo: "bar" });

observe(() => console.log(obj.foo));

obj.foo = 2;
// logs: 2
```

## License

`MIT`, see [License file](./LICENSE.md).
npm package: @marvinh/tiny-enzyme
Description: Minimal alternative of enzyme testing library
Author: Marvin Hagemeister
Latest version: 0.0.5

# Tiny Enzyme

Minimal alternative to [enzyme](https://github.com/airbnb/enzyme) for [preact](https://github.com/developit/preact/).

## Usage

Installation:

```bash
# npm
npm install --save-dev @marvinh/tiny-enzyme

# yarn
yarn add -D @marvinh/tiny-enzyme
```

Example test:

```jsx
import { h } from "preact";

descripe("Example suite", () => {
  it("should test something", () => {
    const spy = jest.fn();

    // Trigger a fake click
    mount(<div onClick={spy} />).simulate("click");

    // Check if our spy was called
    expect(spy.mocks.calls.length).toEqual(1);
  });
});
```

## License

MIT, see [License file](./LICENSE.md).
npm package: @marvinhealth/component-library
Description: Marvin Health Component Library
Author: Dale Salcedo
Latest version: 4.0.18

# Marvin UI Library

### To Publish
- `yarn build`
- `npm publish`

### Frameworks
- (Emotion) Styled Components
- Mantine
- Storybook
- Rollup.js

### Boilerplate Reference
- [[repo]](https://github.com/nickderaj/youtube/tree/main/UI%20Library)
- [[video]](https://youtu.be/FgMXpXD-4OY?si=pJawFqn4SFWr63hT)
- combined with:
- [[url]](https://dev.to/abhijitdotsharma/build-and-publish-a-component-library-react-typescript-storybook-34ba)
  - ended up taking rollup.config.js and tsconfig from here after couldn't solve some errors

### Modifications from Boilerplate
- tsconfig.json modifications:
  - "target": "es6"
  - "allowJs": true
  - "paths": { "@/*": ["./*"] }
- package.json
  - "^@/(.*)$": "<rootDir>/$1" to "jest/moduleNameMapper"
- Storybook
  - preview.tsx: added mantine theme from signup
  - main.ts: staticDirs: ['../public'],
  - copied preview-head.html from signup

### Troubleshooting
- Was running into an error: "Uncaught TypeError: Cannot read properties of null (reading 'useContext').
  - this library fixed the issue: rollup-plugin-peer-deps-external [src](https://stackoverflow.com/questions/74322410/how-to-fix-cannot-read-properties-of-null-reading-usecontext)
- I had issues running Storybook. Had to do the following to fix:
  - Node version >=18.12.0. (use nvm to switch versions)
  - use Yarn 4 according to this [[issue]](https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092)
  - instructions to install Yarn 4 here [[link]](https://yarnpkg.com/getting-started/install) 
  - "@storybook/addon-a11y": "7.6.16" works with this setup.  v8 doesn't work.
- Installing this fixed some errors: rollup-plugin-dts.  add it to your rollup.config

### Current Issue
- I cannot figure out how to build and publish this library if i were to put types in ts definition files (ie *.d.ts)
npm package: @marvinjs/january
Description: MarvinJS is a static site generator built around the themes.
Author: chenxsan
Latest version: 0.0.3

MarvinJS is a static site generator built around the themes.

## Why another static site generator?

There're already [so many battle-tested static site generators](https://www.staticgen.com/) so why bother creating another one?

Two things we care most in static site generator:

1. Templates
2. Data

Compile templates with data from markdown files or whatever, you will have a static site.

Templates could be written in any template languages you like. I have tried developing templates with `ejs`, `handlebars` in Node.js, there're something I am not content with:

1. Developer experience
2. How codes are structured

Here's what I expect from developing templates for static site generator after I finished some front-end projects with React.js:

1. Great developer experience. Hot reload is must-have.
2. Components. Partials are so old compared to components.
3. Scoped styles. I don't want to ruining my life with those global css rules, even with helps from something like BEM.

Since React.js already supports [server side render](https://reactjs.org/docs/react-dom-server.html), why not just developing templates for static site generator with React.js?

It could be funny!

## Demo

1. Please check [My blog](https://blog.zfanw.com)

## How to develop

We use [Neutrino React Components Preset](https://neutrino.js.org/packages/react-components/) to develop theme `January`.

1. Clone this repo
2. Run `npm install` or `yarn` to install dependencies
3. Run `npm start` or `yarn start` to start the dev server

## How to build

1. Clone this repo
2. Run `npm install` or `yarn` to install dependencies
3. Run `npm run build` or `yarn build`, you'll get the built components under `build` folder

## CSS

There're three types of css file in theme January, we'll handle them differently.

## Third party css

Say you want to include `normalize.min.css` in all you page, since we won't change them often, then we can just include them with `link`:

```css
<link rel='stylesheet' href='/static/css/normalize.min.css' />
```

Just make sure you put them under `src/static` folder so they'll get copied when build.

## Global css rules you defined

Of course we will define some global css rules for our pages, for example, `font-family` etc. Since we sometimes will modify it, so we just `import` them in our templates, when built, they get exported with hash value in their filenames. In this way, we can cache our css files for a long time.

## Scoped css rules

In `January`, we use `styled-components` to add scoped styles to our components.
npm package: @marvinrudolph/vue-storyblok-rich-text-renderer
Description: Vue.js plugin for Storyblok's rich-text renderer
Author: Marvin Rudolph
Latest version: 1.1.5
Deprecated: please use @marvr/storyblok-rich-text-vue-renderer@2.0.0

<p align="center">
  <h1>Vue.js Plugin</h1>
  <a href="https://www.npmjs.com/package/@marvinrudolph/vue-storyblok-rich-text-renderer"><img src="https://img.shields.io/npm/v/@marvinrudolph/vue-storyblok-rich-text-renderer/latest.svg" alt="License"></a>
  <a href="https://npmjs.com/package/@marvinrudolph/vue-storyblok-rich-text-renderer"><img src="https://img.shields.io/npm/dt/@marvinrudolph/vue-storyblok-rich-text-renderer.svg" alt="License"></a>
  <a href="https://github.com/MarvinRudolph/storyblok-rich-text-renderer/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@marvinrudolph/vue-storyblok-rich-text-renderer.svg" alt="License"></a>
</p>

## Documentation

Check out the docs at [https://storyblok-rich-text-renderer.netlify.com/vue-plugin/](https://storyblok-rich-text-renderer.netlify.com/vue-plugin/).

## License
[MIT](https://github.com/MarvinRudolph/storyblok-rich-text-renderer/blob/master/LICENSE)
npm package: @marvintau/exchange
Description: >
Author: marvintau
Latest version: 0.0.4

# exchange

> 

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

## Install

```bash
npm install --save exchange
```

## Usage

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

import MyComponent from 'exchange'

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

## License

MIT © [marvintau](https://github.com/marvintau)
npm package: @marvintau/schema
Description: | 语句覆盖率 | 条件分支覆盖率 | 函数覆盖率 | 行覆盖率 | | -----------|----------|-----------|-------| | ![Statements](https://img.shields.io/badge/Coverage-98.81%25-brightgreen.svg "Make me better!") | ![Branches](https://img.shields.io/badge/Coverage-90%25-brightgreen.svg "M
Author: Yue Marvin Tao
Latest version: 0.0.7

| 语句覆盖率 | 条件分支覆盖率 | 函数覆盖率 | 行覆盖率 |
| -----------|----------|-----------|-------|
| ![Statements](https://img.shields.io/badge/Coverage-99.09%25-brightgreen.svg "Make me better!") | ![Branches](https://img.shields.io/badge/Coverage-92.42%25-brightgreen.svg "Make me better!") | ![Functions](https://img.shields.io/badge/Coverage-100%25-brightgreen.svg "Make me better!") | ![Lines](https://img.shields.io/badge/Coverage-99.03%25-brightgreen.svg "Make me better!") |

# Schema
一个简单的自制ODM
npm package: @marvinxu/utils
Description: My awesome typescript library
Latest version: 1.1.0

# @marvinxu/utils

[![npm version](https://badgen.net/npm/v/@marvinxu/utils)](https://npm.im/@marvinxu/utils) [![npm downloads](https://badgen.net/npm/dm/@marvinxu/utils)](https://npm.im/@marvinxu/utils)



## Install

```bash
npm i @marvinxu/utils
```
npm package: @marvizusd/tiny
Description: Removes all spaces from a string
Latest version: 2.0.1

[![npm (scoped)](https://img.shields.io/npm/v/@marvizusd/tiny.svg)](https://github.com/marvizusd/tiny)
@marvizusd/tiny

Removes all spaces from a string.

## Install

```
$ npm install @marvizusd/tiny
```

## Usage

```js
const tiny = require("@marvizusd/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
```
npm package: @marvman/preact-cli-plugin-env-vars
Description: Consume variables in your environment with the Preact CLI
Author: Marvin Schopf
Latest version: 2.1.0

# preact-cli-plugin-env-vars

Consume variables in your environment with the Preact CLI.

[![NPM version](https://img.shields.io/npm/v/@marvman/preact-cli-plugin-env-vars.svg)](https://www.npmjs.com/package/preact-cli-plugin-env-vars) [![Node.js CI](https://github.com/marvinschopf/preact-cli-plugin-env-vars/actions/workflows/node.js.yml/badge.svg)](https://github.com/marvinschopf/preact-cli-plugin-env-vars/actions/workflows/node.js.yml)

## Installation

```
$ yarn add @marvman/preact-cli-plugin-env-vars
```

And include in your project by creating a `preact.config.js`:

```js
import envVars from "@marvman/preact-cli-plugin-env-vars";

export default function (config, env, helpers) {
	envVars(config, env, helpers);
}
```

## Usage

The plugin allows to use any environment variables prefixed with `PREACT_APP_` to be used within your script:

```js
console.log(process.env.PREACT_APP_SECRET_CODE);
```

The environment variables are embedded during the build time.

### Adding development Environment Variables in `.env`

To define permanent environment variables, create a file called `.env` in the root of your project:

```
PREACT_APP_SECRET_CODE=abcdef
```

These variables will act as the defaults if the machine does not explicitly set them.
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.

## License

MIT © [Marvin Schopf](https://www.marvinschopf.com), [Robin van der Vleuten](https://www.robinvdvleuten.nl)
npm package: @marvnet/express-dynamic-helpers-patch
Description: Dynamic helpers monkey patch for express 3.x and 4.x
Author: Pavel Vlasov
Latest version: 1.0.3

express-dynamic-helpers-patch
==============================

**This is a 'patched' version of pavelvlasov's original library that uses more modern and faster JavaScript.** 

Dynamic helpers monkey patch for express 3.x and 4.x

### How to install?

**Using yarn:**
```bash
  yarn add @marvnet/express-dynamic-helpers-patch
```

**Using npm:**
```bash
  npm install @marvnet/express-dynamic-helpers-patch --save
```

### How to use It?

```js
  require('@marvnet/express-dynamic-helpers-patch')(app);
  // and now You can use 2.x express dynamicHelpers
  app.dynamicHelpers({
    user: function (req, res) {
      ...
    }
  });
```

### License
This project is licensed under the MIT license.
npm package: @marvnet/hcaptcha
Description: Verify hCaptcha token
Author: Juho Hautala
Latest version: 1.0.7

# hcaptcha
## Original author: [vastus](https://github.com/vastus/node-hcaptcha)

Verify hCaptcha token validity.

## Install

```
yarn add @marvnet/hcaptcha
```

## Usage

```typescript
import { verify } from "@marvnet/hcaptcha";

const secret: string = 'my hcaptcha secret from hcaptcha.com';
const token: string = 'token from widget';

verify(secret, token)
  .then((data) => console.log('success!', data))
  .catch(console.error);
```
npm package: @marvnet/passport-instagram-graph
Description: Instagram graph authentication strategy for Passport.
Author: MarvNet Digital UG
Latest version: 1.0.1
Deprecated: false

# Passport-Instagram

[Passport](https://github.com/jaredhanson/passport) strategy for authenticating
with [Instagram](http://instagr.am/) using the OAuth 2.0 API.

This module lets you authenticate using Instagram in your Node.js applications.
By plugging into Passport, Instagram authentication can be easily and
unobtrusively integrated into any application or framework that supports
[Connect](http://www.senchalabs.org/connect/)-style middleware, including
[Express](http://expressjs.com/).

## Install

    $ npm install passport-instagram-graph

## Usage

#### Configure Strategy

The Instagram authentication strategy authenticates users using a Instagram
account and OAuth 2.0 tokens.  The strategy requires a `verify` callback, which
accepts these credentials and calls `done` providing a user, as well as
`options` specifying a client ID, client secret, and callback URL.

    passport.use(new InstagramStrategy({
        clientID: INSTAGRAM_CLIENT_ID,
        clientSecret: INSTAGRAM_CLIENT_SECRET,
        callbackURL: "http://127.0.0.1:3000/auth/instagram/callback"
      },
      function(accessToken, refreshToken, profile, done) {
        User.findOrCreate({ instagramId: profile.id }, function (err, user) {
          return done(err, user);
        });
      }
    ));

#### Authenticate Requests

Use `passport.authenticate()`, specifying the `'instagram'` strategy, to
authenticate requests.

For example, as route middleware in an [Express](http://expressjs.com/)
application:

    app.get('/auth/instagram',
      passport.authenticate('instagram'));

    app.get('/auth/instagram/callback', 
      passport.authenticate('instagram', { failureRedirect: '/login' }),
      function(req, res) {
        // Successful authentication, redirect home.
        res.redirect('/');
      });


## Credits

  - [Sang Huynh](http://github.com/huynhsang)
npm package: @marvs13/marvinel-nextjs-supabase-starting-kit
Description: A modern Next.js + Supabase starting kit with Tailwind, Zod, and shadcn/ui.
Author: Marvinel Torres Santos
Latest version: 1.0.35

### Getting Started

Installation command for npm and bun

- Using bun

```bash
bunx @marvs13/marvinel-nextjs-supabase-starting-kit@latest
```

- Using npm

```bash
npx  @marvs13/marvinel-nextjs-supabase-starting-kit
```
npm package: @marvue/eslint-config-vue-strict
Description: Tight ESLint rules conforming to Vue.js Official Style Guide
Author: Captain Pangyo
Latest version: 1.0.5

# Vue ESLint Strict Rules

[![npm (scoped with tag)](https://flat.badgen.net/npm/v/@marvue/eslint-config-vue-strict)](https://npmjs.com/package/@marvue/eslint-config-vue-strict)
[![npm](https://flat.badgen.net/npm/dt/@marvue/eslint-config-vue-strict)](https://npmjs.com/package/@marvue/eslint-config-vue-strict)

## Usage

Would you like to make your vue code tight? Follow this guideline.

Create a vue project with Vue CLI (^3.x)

```bash
$ vue create <my-vue>
```

Select these following project options in order

```
Please pick a preset: Manually select features
Check the features needed for your project: Babel, Linter / Formatter
Pick a linter / formatter config: ESLint + Prettier
Pick additional lint features: Lint on Save
Where do you prefer placing config for Babel, ESLint, etc.?: In dedicated config files
Save this as a preset for future projects? n
```

Then, install the npm package

```
$ npm i @marvue/eslint-config-vue-strict
```

Change the eslint config file `.eslintrc`

```js
{
  extends: [
    '@marvue/vue-strict',
  ]
}
```

## Rules

- [ESLint Plugin Vue - Recommended](https://eslint.vuejs.org/rules/)
- [ESLint Plugin Import](https://www.npmjs.com/package/eslint-plugin-import)

## License

MIT - CaptainPangyo
npm package: @marwajs/compiler
Description: Ahead-of-time compiler for **MarwaJS**.   Transforms `.marwa` Single File Components (SFCs) into plain ESM modules with no runtime parsing.
Latest version: 0.0.2

# @marwajs/compiler

Ahead-of-time compiler for **MarwaJS**.  
Transforms `.marwa` Single File Components (SFCs) into plain ESM modules with no runtime parsing.

- 🚀 Compiles `<template>`, `<script lang="ts">`, `<style scoped>`
- 🧑‍💻 DX-first — auto-imports, scoped styles, file-based routing
- 🔒 Produces strongly typed `.d.ts`
- 🔧 Outputs IR → Codegen → Component

---

## Install

```sh
npm install -D @marwajs/compiler
```

## CLI

```sh
npx marwa compile src/**/*.marwa
```

## Quick Tutorial

Example .marwa

```sh
<template>
  <div>
    <p>Count: {{ count() }}</p>
    <button @click.prevent="inc()">Inc</button>
  </div>
</template>

<script lang="ts">
  import { signal } from "@marwajs/core";
  const count = signal(0);
  const inc = () => count.set(count() + 1);
</script>

<style scoped>
  div { padding: 1rem; }
</style>
```

Output (simplified)

```sh
import { signal, Dom, onEvent, withModifiers } from "@marwajs/core";

const count = signal(0);
const inc = () => count.set(count() + 1);

export default {
  mount(target) {
    const p = Dom.createElement("p");
    const btn = Dom.createElement("button");

    Dom.setText(p, `Count: ${count()}`);
    Dom.setText(btn, "Inc");

    onEvent(app, btn, "click", withModifiers(() => inc(), ["prevent"]));

    Dom.insert(p, target);
    Dom.insert(btn, target);
  }
};
```
npm package: @marwajs/core
Description: Tiny, fast, DX-first runtime for **MarwaJS** built entirely on **signals**.
Latest version: 0.0.2

# @marwajs/core

Tiny, fast, DX-first runtime for **MarwaJS** built entirely on **signals**.

- 🔥 Zero runtime parsing — compiler emits plain TS/JS
- 🎯 Signals-based reactivity (`signal`, `computed`, `effect`)
- 🧩 Components (`defineComponent`, `onMount`, `provide/inject`)
- 🛠 Directives (`:text`, `:class`, `:style`, `:show`, `m-model`, `@click.stop.prevent`)
- 🌐 Router + DI + Stores
- ⚡ Super small, tree-shakeable

---

## Install

```sh
npm install @marwajs/core
```

# Quick Start

```sh
import { signal, effect, Dom, createApp } from "@marwajs/core";

// define state
const count = signal(0);

// watch changes
effect(() => console.log("count:", count()));

// build UI
const host = document.getElementById("app")!;
const app = createApp(host);

const btn = Dom.createElement("button");
Dom.setText(btn, "inc");
app.on("click", btn, () => count.set(count() + 1));
Dom.insert(btn, host);
```

## Tutorials

### 1. Counter Component

```sh
import { defineComponent, signal, Dom } from "@marwajs/core";

export const Counter = defineComponent(() => {
  const count = signal(0);

  return {
    mount(target) {
      const btn = Dom.createElement("button");
      const p = Dom.createElement("p");

      Dom.setText(p, `Count: ${count()}`);
      Dom.insert(p, target);
      Dom.insert(btn, target);

      btn.textContent = "Inc";
      btn.onclick = () => count.set(count() + 1);

      // reactive binding
      effect(() => {
        Dom.setText(p, `Count: ${count()}`);
      });
    },
  };
});

```

### 2. Provide / Inject

```sh
import { defineComponent, provide, inject } from "@marwajs/core";

const Parent = defineComponent(() => {
  provide("theme", "dark");
  return { mount(t) { /* mount child */ } };
});

const Child = defineComponent(() => {
  const theme = inject("theme", "light");
  return { mount(t) { console.log("theme:", theme); } };
});

```

# LICENSE

MIT License