open-index/open-npm huggingface dataset:
npm package: @platyplus/vue-hasura-backend-plus
Description: Nuxt plugin for Hasura Backend Plus
Author: Pierre-Louis Mercereau
Latest version: 0.2.1

# `@platyplus/vue-hasura-backend-plus`

Vue plugin for Hasura Backend Plus.
Works either with Vue 3 or the Vue Composition API, thanks to [Vue Demi]('https://github.com/vueuse/vue-demi').

## Installation

```sh
yarn add @platyplus/vue-hasura-backend-plus
```

Edit your `main` Vue file:

```js
import { createHasuraBackendPlus } from '@platyplus/vue-hasura-backend-plus'
import { createApp } from 'vue'

import App from './App.vue'

const hbp = createHasuraBackendPlus({
  endpoint: 'https://hasura-backend-plus.endpoint.com',
  refreshInSeconds: 600, // Defaults to 600 (10 minutes)
  router // Optional: vue-router instance. When set, will make sure the authentication is know prior to any routing
})

createApp(App).use(hbp).mount('#app')
```

## Usage

Vue compositions:

- useRegister
- useLogin
- useLogout
- useStatus
- useHasuraClaims
- useAllowedRoles
- useDefaultRole
npm package: @platyplus/vue-rxdb-hasura
Description: RxDB Hasura plugin
Author: Pierre-Louis Mercereau
Latest version: 0.3.0

# `@platyplus/vue-rxdb-hasura`

Vue RxDB-Hasura plugin

## Prerequisites

- Vue 3
- Vuex 4
- Vue Router 4
- PrimeVue and others
- Hasura

Optional

- Hasura Backend Plus

## Installation

- install the Hasura migrations and metadata
npm package: @platypus-project/uniswap-router-sdk
Description: An sdk for routing swaps using Uniswap v2 and Uniswap v3.
Latest version: 0.1.0-rc.1

# Alpha software

The latest version of the SDK is used in production in the Uniswap Interface,
but it is considered Alpha software and may contain bugs or change significantly between patch versions.
If you have questions about how to use the SDK, please reach out in the `#dev-chat` channel of the Discord.
Pull requests welcome!

# Uniswap Swap Router SDK

This SDK is meant to facilitate interactions with the contracts in [swap-router-contracts](https://github.com/Uniswap/swap-router-contracts).
npm package: @platypus-project/uniswap-v2-sdk
Description: 🛠 An SDK for building applications on top of Uniswap V2
Latest version: 0.1.0-rc.0

# Uniswap V2 SDK

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).
npm package: @platzh1rsch/pacman-canvas
Description: A Pacman game written in TypeScript using Canvas
Author: platzh1rsch
Latest version: 0.0.9

# Pacman Canvas

[![npm version](https://badgen.net/npm/v/@platzh1rsch/pacman-canvas)](https://www.npmjs.com/package/@platzh1rsch/pacman-canvas)

Basically https://pacman.platzh1rsch.ch/ as a npm package for simple integration into your website.

## Get started

![simple setup](https://raw.githubusercontent.com/platzhersh/pacman-canvas-next/2e36ce9bf42585e62fcf0161f73602beb7d01930/packages/pacman-canvas/img/simple-setup-react.png)

### React Example

```jsx
import type { Game } from "@platzh1rsch/pacman-canvas";
import { getGameInstance } from "@platzh1rsch/pacman-canvas";
import { useEffect, useRef, useState } from "react";
import styles from "./gameCanvas.module.css";


export default function GameCanvasSimple() {
  
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [canvasContext, setCanvasContext] =
    useState<CanvasRenderingContext2D | null>(null);


  const game: Game = getGameInstance();
  
  useEffect(() => {
    if (canvasRef.current) {
      setCanvasContext(canvasRef.current.getContext("2d"));
    }
  }, []);

  useEffect(() => {
    if (game && canvasContext) {
      game.setCanvasContext2d(canvasContext);
    }
  }, [canvasContext]);

  return (
    <>
      <div>
        <section>
          {/* Game controls */}
          <button onClick={() => game.pauseResume()}>Pause / Resume</button>
          <button
            onClick={() => game.newGame()}
          >
            Restart Game
          </button>
          <button onClick={() => game.endGame()}>End Game</button>
        </section>
        
        <section>
          <div
            id={styles["canvas-container"]}
            onClick={() => {
              game.pauseResume();
            }}
          >
            <canvas
              ref={canvasRef}
              style={{ background: "black" }}
              id="myCanvas"
              width="540"
              height="390"
            >
              <p>Canvas not supported</p>
            </canvas>
          </div>
        </section>
      </div>
    </>
  );
}

``````
npm package: @platzi-test/components
Description: Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth i
Author: danielvaldivv
Latest version: 0.2.13

ERROR: No README data found!
npm package: @platzi/markdown
Description: Platzi Flavored Markdown parser
Author: Platzi Team
Latest version: 1.3.4

# Platzi Flavored Markdown
This is the markdown parser used in the Platzi education platform editor.

This version of Markdown support the usual Github Flavored Markdown and Youtube videos, emojis, figure wrapping images, `<mark />` tags, underlines, abbr and definition lists.

## How use it
Install it with **npm**.

```bash
npm i -S @platzi/markdown
```

Import it in your project.

```js
import createParser from '@platzi/markdown';
```

And the use it.

```js
const parser = createParser();
const html = parser(`**this is my text in bold**`);
```

## Contribute
- Fork the project.
- Modify `index.js`.
- Run tests `npm t`.
- Fix problems (or the test).

## Example Markdown
```markdown
![Platzi Logo](https://static.platzi.com/static/images/logos/platzi@2x.png)

*[HTML]: Hyper Text Markup Language
*[W3C]:  World Wide Web Consortium

# Heading 1
Lorem **ipsum** dolor _sit_ ++amet++ :D.

The HTML ==specification== is maintained by the W3C.

- item 1
- item 2
- item 3

Term 1
  ~ Definition 1

Term 2
  ~ Definition 2a
  ~ Definition 2b

@[youtube](ajLJOhf-WdA)
```
npm package: @platzi/react-markdown
Description: React component to parse and render Platzi Flavored Markdown content
Author: Platzi Team
Latest version: 1.0.4

# react-markdown
React component to parse and render Platzi Flavored Markdown content

This component made use of [@platzi/markdown](https://github.com/PlatziDev/markdown) to render a content using markdown in a React application.

## Usage
Install it with:

```bash
npm i -S react @platzi/react-markdown
```

Import it with:

```js
import React from 'react';
import Markdown from '@platzi/react-markdown';

function App() {
  return (
    <Markdown
      tagName="div"
      content="**Hello Platzi!**"
      parser={{
        // @platzi/markdown options
      }}
    />
  );
}
```

- You cand send any native DOM attribute to the Markdown component.
- The default `tagName` is a `div`.
- The value of `parser` is an empty object by default.
- The `content` is required.

## Run test
You have 4 ways to run tests.

- `npm t`: run the test once
- `npm run test:fix`: run the test and fix the snapshots
- `npm run test:watch`: run the test and keep watching changes
- `npm run test:report`: run test and generate a coverage report
npm package: @platzily-ui/components
Description: Platzily UI components API
Author: Platzily UI Team
Latest version: 0.1.5

# @platzily-ui/components

Platzily UI components solution

## Installation

Install the package in your project directory with:

```bash
// with npm
npm install @platzily-ui/components

// with yarn
yarn add @platzily-ui/components
```
npm package: @platzily-ui/styling
Description: Platzily UI styling API
Author: Platzily UI Team
Latest version: 0.1.4

# @platzily-ui/styling

Platzily UI styling solution, even if you are not using our components.

## Installation

Install the package in your project directory with:

```bash
// with npm
npm install @platzily-ui/styling

// with yarn
yarn add @platzily-ui/styling
```
npm package: @plaude/react-native
Description: Plaude React Native SDK
Author: Manu Lopez
Latest version: 1.1.1

<p align="center">
  <img src="https://plaudeai.com/apple-touch-icon.png" width="200px" align="center" alt="Plaude logo" style="border-radius:25%"/>
  <h1 align="center">Plaude for React Native</h1>
   <p align="center">
    <a href="https://plaudeai.com">Plaude</a>
    <br/>
    AI-powered tools for your company
  </p>
</p>
<br>

## Getting started

First, install the Plaude SDK.

```
npm install @plaude/react-native
```

<br/>

Then, add the following environment variable from your [Plaude dashboard](https://plaudeai.com/sign-in).

```sh
PLAUDE_APP_ID="This is an example"
```

<br/>

Then, wrap your application with the `PlaudeProvider` component.

```tsx
import { PlaudeProvider } from '@plaude/react-native';

export default function RootLayout({ children }: React.PropsWithChildren) {
  return <PlaudeProvider>{children}</PlaudeProvider>;
}
```

<br/>

Although Plaude automatically gets the `App ID` from your environment, you can opt for manually setting it in the `PlaudeProvider` component.

```tsx
import { PlaudeProvider } from '@plaude/react-native';

export default function RootLayout({ children }: React.PropsWithChildren) {
  return <PlaudeProvider appId="Your App ID">{children}</PlaudeProvider>;
}
```

<br/>

At this point the installation is completed, you can make use of the Plaude messenger by calling the `openMessenger()` method from the `usePlaude()` hook.

```tsx
import { Pressable, Text, View } from 'react-native';
import { usePlaude } from '@plaude/react-native';

export default function Page() {
  const { openMessenger } = usePlaude();

  return (
    <View>
      <Pressable onPress={openMessenger}>
        <Text>Open Plaude</Text>
      </Pressable>
    </View>
  );
}
```