open-index/open-npm huggingface dataset:
npm package: @iamovi/printcli
Description: PrintCLI is a command-line tool that allows users to quickly print code snippets in various programming languages.
Author: Maruf OVi
Latest version: 1.1.1

# PrintCLI

PrintCLI is a command-line tool that allows users to quickly print code snippets in various programming languages. It supports a wide range of popular languages, making it a handy utility for developers who want to view or copy code snippets on the command line.

## Installation

To install PrintCLI globally, use the following command:

```bash
npm install -g @iamovi/printcli
```

## Usage

After installation, you can use PrintCLI by typing printcli followed by the programming language you want to print. For example:

```bash
printcli python
```

This will display the Python code snippet for a "Hello World!" program - 

```python
print('Hello World!')
```

## Supported Languages

PrintCLI currently supports the following programming languages:

- Python
- JavaScript
- Java
- C
- C++
- Ruby
- Swift
- Go
- PHP
- HTML
- Brainfuck
- TypeScript
- Rust
- Kotlin
- Scala
- Groovy
- Bash
- Perl
- Lua
- C#
- Objective-C
- Swift3
- R
- MATLAB
- Perl6

Feel free to check the `hello.js` file in the project for an up-to-date list of supported languages.

## License

[MIT](LICENSE)

## Author

[Maruf OVi](https://oviportfo.netlify.app/)
npm package: @iampava-devtools-ds/dom-inspector
Description: An emulation of the Chrome and Firefox DOM inspector, built on the `@iampava-devtools-ds/tree` component.
Author: Tyler Krupicka github@tylerkrupicka.com
Latest version: 1.2.5

# @iampava-devtools-ds/dom-inspector

An emulation of the Chrome and Firefox DOM inspector, built on the `@iampava-devtools-ds/tree` component.

## Installation

```sh
npm i @iampava-devtools-ds/dom-inspector
# or with yarn
yarn add @iampava-devtools-ds/dom-inspector
```

## Usage

```js
import { DOMInspector } from "@iampava-devtools-ds/dom-inspector";
```

```js
const div = document.createElement("div");
const html = `
      <!--This is a comment-->
      <span>A span</span>
      <button type="submit" class="btn">Submit</button>
`;
div.insertAdjacentHTML("beforeend", html);

export const Custom = () => <DOMInspector data={div} expandLevel={2} />;
```

## Useful References

- [MDN Empty Elements](https://developer.mozilla.org/en-US/docs/Glossary/Empty_element)
- [MDN HTML Node Types](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType)
- [W3Schools DocType Reference](https://www.w3schools.com/tags/tag_doctype.asp)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://tylerkrupicka.com/"><img src="https://avatars.githubusercontent.com/u/5761061?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tyler Krupicka</b></sub></a><br /><a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Code">💻</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Documentation">📖</a> <a href="#design-tylerkrupicka" title="Design">🎨</a> <a href="#infra-tylerkrupicka" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#example-tylerkrupicka" title="Examples">💡</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Tests">⚠️</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
npm package: @iampava-devtools-ds/node
Description: A component for rendering DOM Node style opening and closing HTML tags.
Author: Tyler Krupicka github@tylerkrupicka.com
Latest version: 1.2.5

# @iampava-devtools-ds/node

A component for rendering DOM Node style opening and closing HTML tags.

## Installation

```sh
npm i @iampava-devtools-ds/node
# or with yarn
yarn add @iampava-devtools-ds/node
```

Then to use the component in your code just import it!

```js
import { Node } from "@iampava-devtools-ds/node";
```

## Usage

The label can be a string or a React component.

```jsx

const properties = {
  class: 'test',
  style: 'font-weight: bold;'
};

<Node name="div" properties={properties} />
  Content
<Node closing name="div" />

```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://tylerkrupicka.com/"><img src="https://avatars.githubusercontent.com/u/5761061?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tyler Krupicka</b></sub></a><br /><a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Documentation">📖</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Code">💻</a> <a href="#design-tylerkrupicka" title="Design">🎨</a> <a href="#example-tylerkrupicka" title="Examples">💡</a> <a href="https://github.com/design-systems/devtools-ds/commits?author=tylerkrupicka" title="Tests">⚠️</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
npm package: @iampava-devtools-ds/object-parser
Description: Object parser is a utility used by the the `Object Inspector` package, which creates a JSON tree structure with node types that help simplify the JavaScript type system. It also uses TypeScript to make logic around using the tree strongly typed.
Author: Tyler Krupicka github@tylerkrupicka.com
Latest version: 1.2.5

# @iampava-devtools-ds/object-parser

Object parser is a utility used by the the `Object Inspector` package, which creates a JSON tree structure with node types that help simplify the JavaScript type system. It also uses TypeScript to make logic around using the tree strongly typed.

If you plan on using this, I recommend looking at the type definitions for the best description of how it formats.

The current supported types are:

```ts
export type SupportedTypes =
  | boolean
  | null
  | number
  | string
  | Error
  | symbol
  | undefined
  | Date
  | RegExp
  | object
  | Map<any, any>
  | WeakMap<any, any>
  | Set<any>
  | WeakSet<any>
  | Promise<any>
  | any[]
  | Function;
```

## Installation

```sh
npm i @iampava-devtools-ds/object-parser
# or with yarn
yarn add @iampava-devtools-ds/object-parser
```

## Usage

```js
import parse from "@iampava-devtools-ds/object-parser";

const data = { foo: "bar" };
const sortKeys = true;
const result = await parse(data, sortKeys);
```

## FAQ

### Why is it asynchronous?

Unfortunately, the parser has to be asynchronous in order to support Promises. From what I can find, there is [no good way](https://stackoverflow.com/questions/30564053/how-can-i-synchronously-determine-a-javascript-promises-state) to inspect a promise synchronously. In the browser devtools they have access to the full Javascript engine.

### Why do children return a function?

This parser is in service to building a UI, which needs to be responsive. In deeply nested objects, we want to avoid having to parse everything before we can render the top node. To stop this, the parser only evaluates the current node, and then returns functions so that you can get the children on demand. For example, when you are expanding a tree view.
npm package: @iampava-devtools-ds/port-controller
Description: `PortController` is a simple class for managing browser `Runtime.Port` objects in the `background` script of your extension.
Author: Tyler Krupicka github@tylerkrupicka.com
Latest version: 1.2.5

# @iampava-devtools-ds/port-controller

`PortController` is a simple class for managing browser `Runtime.Port` objects in the `background` script of your extension.

Some background:

If you are developing an extension with a popup dialog or a devtools panel, they'll need to send messages to your `background` script. Only the background script has permissions to communicate with the `content` script (the page). Managing these connections can be a little confusing, because there is only one instance of your background script running but multiple tabs, popups, and panels can exist and try to talk to each other.

## Installation

```sh
npm i @iampava-devtools-ds/port-controller
# or with yarn
yarn add @iampava-devtools-ds/port-controller
```

## Example

Here is an example `background` script using the port controller.

```ts
import { PortController } from "@iampava-devtools-ds/port-controller";

const controller = new PortController<Message>();

browser.runtime.onConnect.addListener((port) => {
  if (port.name === PORT_NAME) {
    // Attach listener to the Panel
    port.onMessage.addListener((message: Message) => {
      if (message.type === "connect" && message.tabId) {
        controller.connect(message.tabId, port);
      }

      // Pass message to content script
      controller.toContent(message.tabId, message);
    });

    // Handle Panel disconnect
    port.onDisconnect.addListener(function (p) {
      const message: DisconnectMessage = {
        type: "disconnect",
        source: PANEL_SOURCE,
        tabId: 0,
      };
      controller.disconnect(p, message);
    });
  }
});

// Attach listener to content
browser.runtime.onMessage.addListener(function (
  message: Message,
  sender: Runtime.MessageSender
) {
  // Messages from content scripts should have sender.tab set
  if (sender.tab) {
    const tabId = sender.tab.id;
    if (tabId) controller.toPanel(tabId, message);
  } else {
    logger.log("Could not pass message, sender.tab not defined.", message);
  }
});
```
npm package: @iampava-devtools-ds/themes
Description: Each of the UI components in this project contains themes for multiple browsers. These themes are built using the [postcss-themed](https://github.com/intuit/postcss-themed) package, which allows us to specify themes for multiple browsers in light and dark
Author: Tyler Krupicka github@tylerkrupicka.com
Latest version: 1.2.5

# @iampava-devtools-ds/themes

Each of the UI components in this project contains themes for multiple browsers. These themes are built using the [postcss-themed](https://github.com/intuit/postcss-themed) package, which allows us to specify themes for multiple browsers in light and dark mode.

This package contains colors, types, and React utilities for using browser themes.

## Installation

```sh
npm i @iampava-devtools-ds/themes
# or with yarn
yarn add @iampava-devtools-ds/themes
```

## Examples

### ThemeProvider

You can use the `ThemeProvider` component to set the theme for all `@iampava-devtools-ds` components underneath it.

```js
import { ThemeProvider } from "@iampava-devtools-ds/themes";

<ThemeProvider theme={"chrome"} colorScheme={"light"}>
  <YourApp />
</ThemeProvider>;
```

### AutoThemeProvider

We also provide an `AutoThemeProvider`, which will automatically set the theme and color scheme of `@iampava-devtools-ds` components based on the users browser and preferred color scheme.

```jsx
<AutoThemeProvider>
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>
```

You can always override the `AutoThemeProvider` like a normal `ThemeProvider`.

```jsx
<AutoThemeProvider theme="firefox">
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>
```

You can also have the `AutoThemeProvider` automatically change the background color and text color to match the current browser and color scheme. In dark mode, this means the background color will be the browser's dark background and light text.

```jsx
<AutoThemeProvider autoStyle>
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>
```

### useTheme

If you want to build your own component that leverages the `ThemeProvider`, we have a hook that allows you to get the current theme.

```js
import { useTheme } from "@iampava-devtools-ds/themes";

const { currentTheme, currentColorScheme } = useTheme(
  { theme, colorScheme },
  styles
);
```

### Variables

We have created a number of theme variables that have the common colors for different browsers. These are stored as JS objects. You can view the available variables in the `Browser Themes` story in Storybook.

```js
import { chrome, firefox } from "@iampava-devtools-ds/themes";

chrome.light.gray01;
firefox.dark.blue02;
```