open-index/open-npm huggingface dataset:
npm package: @jhoguet/react-debugger
Description: a simple debugger that enables you to access the react components given a dom node
Author: Jon Hoguet
Latest version: 0.0.2

## react-debugger

:exclamation: Use with caution, this is still in the proof of concept phase and lacks adequate testing both in automated
tests and in the wild.

## Getting Started

    npm install @jhoguet/react-debugger

Then in your webpack config, load this file first...

```js
entry: [
    '@jhoguet/react-debugger',
    './src/index.js'
],
```

## Intent
The intent of this debugger is to provide runtime support for getting access to the react components given a dom node. It
is inspired by Angular 1.x's `angular.element($0).scope()`.

## Api

`window.$r(domNode)` will get you an instance of `ReactElementDebugger` which wraps a `ReactElement`.

### `ReactElementDebugger`

`.parents()` will list the `DisplayName` of each parent that has one

`.parent(displayName)` will walk to the parent with that `DisplayName`

`.parent()` will walk to the parent react element

`.instance()` will get the react element instance for the current `ReactElement`, this is useful if you have any state
of functions living directly on `this` of your `ReactElement`

`.props()` will get you the props for your `ReactElement`, depending on the `ReactElement` this may not be very useful
 so it is best used after calling `.parent(someDisplayName)` to get to a `ReactElement` that has relevant props sent
 to it.

`.displayName` will get you the displayName of the current `ReactElement`

`._raw` gets you the raw `ReactElement` and isn't intended to be used.

## Assumptions / Constraints

* The debugger should defer as much as possible to "debug time" so that "startup" and "run time" are minimally impacted.
* This only works with React 0.15+, the way this works in < 0.15 is much more complex and wasn't worth porting in.
* I have only explored a couple of ways of walking the react tree, I am sure there are others to consider. see
`getParent()` if it is missing a parent you expected it to walk through.

## Similar Projects

- [https://github.com/facebook/react-devtools](https://github.com/facebook/react-devtools)

## Next Steps / How to help
* better build system so we can have separate files
* automated tests in a browser (real dom)
* improve the documentation (api)
* make it possible for the consumer to specify the global they want (if any) instead of assuming $r
npm package: @jhoguet/rxjs-debugger
Description: a debugger that enables you debug an rxjs stream
Author: Jon Hoguet
Latest version: 0.0.3

#rxjs-debugger
---

:exclamation: Use with caution, this is still in the proof of concept phase and lacks adequate testing both in automated
tests and in the wild.

## Intent
The intent of this repo is to make it easier to debug streams in a running application. 

Some of the driving goals are: 
1. You should not need to install any special tools / chrome extensions to debug the app
2. You should not need to restart the app / put it into debug mode
3. Debugging should do as little as possible until something asks for the debug info (delay as much as possible)
4. Debugging should not be able to break the app
5. You should be able to use the debugger to change state

## Getting Started

    npm i @jhoguet/rxjs-debugger

then in your index file

```js
import { extendObservable } from '@jhoguet/rxjs-debugger';
import { Observable } from 'rxjs';

extendObservable(Observable);

// now can add debug points to any stream or get a debugger... see api below

```

## Next Steps / How to help
* explore options other than extending the Observable prototype, eg `bind` aka `::` or a global `getDebugger(forStream)`
 instead of `forStream.getDebugger()`
* research the risk of `.source`, is this a non-starter? are there better options?
* catch up on todos
* companion UI library for visualizing the stream
* refactor to embrace fact that a subscription should be more first class than stream is, and that a subscription relies on 0
to many subscriptions (eg combineLatest and other aggregators)
* refactor tests in debugOperator.tests.js to be index.tests.js
* address memory leaks (eg in SubscriptionDebugger)

## Stream Api

On any observable, there is now a `debug` operator.

###`stream.debug(name :string, description :string)`

| name | description |
|--------|--------|
| name       |  the name for this debug point in the stream |
| description | a description to describe the value at this point in the stream |

### `stream.getDebugger(name :?string) :StreamDebugger`
This will return the closest `StreamDebugger` to the stream.

## StreamDebugger

### `debugger.nextUpstream(name :?string)`

### `debugger.nextDownstream(name :?string)`
You cannot go further downstream than the original stream on which .getDebugger() was called

### `debugger.getSubscriptions()`

### SubscriptionDebugger

### `debugger.trace()`
returns an array of `TimestampedValues` for the most recent subscription for each `debug` in the observable stream. 

### `debugger.setValue(value)`
sets the value on observable

## StreamDebuggerApi

### api.getDebugger(stream :Observable, name :?string)


## Next Steps / How to help
* explore options other than extending the Observable prototype, eg `bind` aka `::` or a global `getDebugger(forStream)`
 instead of `forStream.getDebugger()`
* research the risk of `.source`, is this a non-starter? are there better options?
* likely missing some documentation, what is missing? where is more depth needed?
npm package: @jhonathannc/strformatter
Description: string formatter for capitalize sentences
Author: Jhonathan Candeu
Latest version: 0.0.4

#### stringformatter
npm package for format senteces

## 📋 Usage
```bash
Pass your unformatted sentece to the method in package and obtain the formatted sentence.
Ex: 
Input: My uNfoRmated. seNTeNe coMINg oF. my OWN aPi.
Output: My unformated. Sentence coming of. My own api.
Thats all!
```
<p align="center">
<a href="https://i.ibb.co/xLfh8TQ/strformatter.jpg"><img src="https://i.ibb.co/xLfh8TQ/strformatter.jpg" alt="strformatter" border="0"></a>
</p>

## ⌨ How to use

```bash
Very simples. Assumig you already havt the nodejs installed, do so: 

# Installing package
npm i @jhonathannc/strformatter

# Import the package in your js file:
const strformatter = require('@jhonathannc/strformatter')

# Calling the format method and getting the formatted string
str.formatStr(str).formattedStr
```

Like this package? Give a star. Regards.
npm package: @jhonejhee/simple-lexical
Description: A simple, lightweight component inspired by [Facebook's Lexical](https://github.com/facebook/lexical).   This project provides a minimal, watered-down version for easier integration and experimentation.
Author: Jhone Jhee Patacsil
Latest version: 1.0.6

# simple-lexical


## Acknowledgements

A simple, lightweight component inspired by [Facebook's Lexical](https://github.com/facebook/lexical), which is licensed under MIT. 
This project provides a minimal, watered-down version for easier integration and experimentation.

---

## Features

- Lightweight and easy to use
- React-based
- Supports basic editor functionality
- Inspired by Facebook Lexical, but simplified for smaller use cases

---

## Peer Dependencies

This package relies on a few libraries that must be installed in your project before using `@jhonejhee/simple-lexical`. These are **not installed automatically**.

- [`lexical`](https://www.npmjs.com/package/lexical)
- [`@lexical/code-shiki`](https://www.npmjs.com/package/@lexical/code-shiki)
- [`@lexical/file`](https://www.npmjs.com/package/@lexical/file)
- [`@lexical/markdown`](https://www.npmjs.com/package/@lexical/markdown)
- [`@lexical/react`](https://www.npmjs.com/package/@lexical/react)
- [`@lexical/rich-text`](https://www.npmjs.com/package/@lexical/rich-text)
- [`@lexical/utils`](https://www.npmjs.com/package/@lexical/utils)

---

## How to Use

1. Install `@jhonejhee/simple-lexical`:

```bash
npm install @jhonejhee/simple-lexical
```

2. Install all dependencies:

```bash
npm install lexical @lexical/code-shiki @lexical/file @lexical/markdown @lexical/react @lexical/rich-text @lexical/utils
```

3. Import `LexicalEditor` component in your app:

```tsx
import LexicalEditor from "@jhonejhee/simple-lexical";
```

4. Render the component

```tsx
export function App() {

  const handleEditorChange = (content: string) => {
    // set content to your state
    console.log(content);
  };

  return (
    <>
      <LexicalEditor
        markdownText={document.text}
        handleEditorChange={handleEditorChange}
        loadOnce={true}
        objectId={document.id}
      />
    </>
  );
}
```

---

### Props

- `markdownText` | `string` - by default, the content is regarded as markdown and converted into styled components.
- `handleEditorChange` | `function(string)` - triggers the onChange function of the editor.
- `loadOnce` | `boolean` - by default is set to **false**, and decides whether the markdownText is loaded into the editor only once. Used with `objectId` to determine the uniqueness.
- `objectId` | `string | number` - by default is set to **null**. 

---
npm package: @jhonejhee/simple-lexical-dev
Description: A simple, lightweight component inspired by [Facebook's Lexical](https://github.com/facebook/lexical).   This project provides a minimal, watered-down version for easier integration and experimentation.
Author: Jhone Jhee Patacsil
Latest version: 1.0.7

# simple-lexical


## Acknowledgements

A simple, lightweight component inspired by [Facebook's Lexical](https://github.com/facebook/lexical), which is licensed under MIT. 
This project provides a minimal, watered-down version for easier integration and experimentation.

---

## Features

- Lightweight and easy to use
- React-based
- Supports basic editor functionality
- Inspired by Facebook Lexical, but simplified for smaller use cases

---

## Peer Dependencies

This package relies on a few libraries that must be installed in your project before using `@jhonejhee/simple-lexical`. These are **not installed automatically**.

- [`lexical`](https://www.npmjs.com/package/lexical)
- [`@lexical/code-shiki`](https://www.npmjs.com/package/@lexical/code-shiki)
- [`@lexical/file`](https://www.npmjs.com/package/@lexical/file)
- [`@lexical/markdown`](https://www.npmjs.com/package/@lexical/markdown)
- [`@lexical/react`](https://www.npmjs.com/package/@lexical/react)
- [`@lexical/rich-text`](https://www.npmjs.com/package/@lexical/rich-text)
- [`@lexical/utils`](https://www.npmjs.com/package/@lexical/utils)

---

## How to Use

1. Install `@jhonejhee/simple-lexical`:

```bash
npm install @jhonejhee/simple-lexical
```

2. Install all dependencies:

```bash
npm install lexical @lexical/code-shiki @lexical/file @lexical/markdown @lexical/react @lexical/rich-text @lexical/utils
```

3. Import `LexicalEditor` component in your app:

```tsx
import LexicalEditor from "@jhonejhee/simple-lexical";
```

4. Render the component

```tsx
export function App() {

  const handleEditorChange = (content: string) => {
    // set content to your state
    console.log(content);
  };

  return (
    <>
      <LexicalEditor
        markdownText={document.text}
        handleEditorChange={handleEditorChange}
        loadOnce={true}
        objectId={document.id}
      />
    </>
  );
}
```

---

### Props

- `markdownText` | `string` - by default, the content is regarded as markdown and converted into styled components.
- `handleEditorChange` | `function(string)` - triggers the onChange function of the editor.
- `loadOnce` | `boolean` - by default is set to **false**, and decides whether the markdownText is loaded into the editor only once. Used with `objectId` to determine the uniqueness.
- `objectId` | `string | number` - by default is set to **null**. 

---