open-index/open-npm huggingface dataset:
npm package: @ridestore/babel-plugin-dynamic-import-node-sync
Description: Babel 6 plugin to transpile import() to a require(), for node
Author: Ridestore team
Latest version: 1.0.5

# babel-plugin-dynamic-import-node-sync

Babel **6** plugin to transpile async `import()` to sync a `require()`, for node. Matches the [proposed spec](https://github.com/domenic/proposal-import-function).

I am using it for server-side rendering.

## Difference from babel-plugin-dynamic-import-node

**babel-plugin-dynamic-import-node-sync**
```
import(SOURCE) => () => { const r=require(SOURCE);r.then(cb=>cb(r));return r; }()
```

**babel-plugin-dynamic-import-node**
```
import(SOURCE) => Promise.resolve().then(() => require(SOURCE))
```

## Installation

```sh
$ npm install @ridestore/babel-plugin-dynamic-import-node-sync --save-dev
```

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

```json
{
  "plugins": [
    ["@ridestore/babel-plugin-dynamic-import-node-sync", { "target": "sync" }]
  ]
}
```


## Options

### opts.target

Script is looking for ```import()``` with comment provided in ``target`` field, example:

```js
// .babelrc
{
  "plugins": [
    ["@ridestore/babel-plugin-dynamic-import-node-sync", { "target": "sync" }]
  ]
}

// index.js
const component = import(/* sync */ './path/to/component').then(module => module.MyComponent);
// will be replaced with
const component = (()=>{const r=__webpack_require__(666);r.then=cb=>cb(r);return r;})().then(module => module.MyComponent);
```

Otherwise, if you initiate plugin without ``target`` option, it replaces all ```import()``` calls
npm package: @ridestore/stylecr3dtor
Description: 3D model viewer for Ridestore
Author: Ridestore
Latest version: 1.1.9

# Stylecr3dtor

Stylecreator 3d: core library, viewer and builder

## Installation

```bash
npm install @ridestore/stylecr3dtor
```

**Note:** Three.js is now bundled and code-split within the package. You don't need to install it separately.

## Features

- Easy configuration-based 3D model loading
- Material management and assignment
- Environment and lighting setup
- Automatic camera and controls setup
- Scene management utilities
- **Fully code-split and tree-shakable** - optimal parallel loading
- **Bundled Three.js** - no additional dependencies required
- **Parallel loading** - all chunks load simultaneously for best performance

## Usage

### Simple Usage (Recommended)

```javascript
import { App } from "@ridestore/stylecr3dtor";

// All modules and Three.js chunks load in parallel automatically
const { scene, camera, controls } = await App.init({
  scene: {
    background: 0x000000,
  },
  camera: {
    position: { x: 5, y: 2, z: 5 },
  },
  environment: {
    url: "path/to/environment.hdr",
  },
  materials: {
    default: {
      type: "MeshStandardMaterial",
      color: "#ffffff",
      maps: {
        // Texture maps: map, normal, roughness, metalness, etc.
      },
    },
  },
  models: {
    myModel: {
      url: "path/to/model.glb",
      position: { x: 0, y: 0, z: 0 },
      rotation: { x: 0, y: 0, z: 0 },
      scale: { x: 1, y: 1, z: 1 },
    },
  },
  meshes: {
    meshName: {
      material: "default",
      visible: true,
    },
  },
});
```

### Advanced Usage with Dynamic Loading

```javascript
import { Loader } from "@ridestore/stylecr3dtor";

// Load only core modules
const { Environment, Materials, Models, Scenes } = await Loader.loadCore();

// Or load specific modules
const { Animations } = await Loader.loadModule("Animations");

// Or load all modules
const allModules = await Loader.loadAll();

// Preload modules for better performance (non-blocking)
Loader.preload(["Environment", "Models"]);
```

### Tree-shakable imports (Legacy)

Import only what you need:

```javascript
// Import only specific components (static)
import { EnvironmentStatic as Environment } from "@ridestore/stylecr3dtor";
import { ModelsStatic as Models } from "@ridestore/stylecr3dtor";
import { MaterialsStatic as Materials } from "@ridestore/stylecr3dtor";

// Import types
import { AppConfig, ModelData } from "@ridestore/stylecr3dtor";
```

## Code Splitting Benefits

This package automatically splits Three.js and application code into optimal chunks:

- **Three.js chunks**: Core, Materials, Geometries, Lights, Cameras, Renderers, etc.
- **Loader chunks**: GLTF, DRACO, RGBE, Texture loaders, etc.
- **Controls chunks**: OrbitControls and other control systems
- **App chunks**: Environment, Models, Materials, Textures, Animations, etc.

All chunks load in parallel when using `App.init()`, providing optimal loading performance.

## Browser Compatibility

- Modern browsers (Chrome, Firefox, Safari, Edge)
- ES Modules support required
- Dynamic imports support required

## License

MIT
npm package: @ridesz/eslint-config-usual
Description: The usual eslint config for my projects (Ridesz)
Author: Tamás Ridinger
Latest version: 0.0.8

# @ridesz/eslint-config-usual

The typical eslint config I use for my TypeScript projects.

## How to use

### Install dependencies

Install the project and its peer dependencies as devDependency:

```bash
npm i --save-dev @ridesz/eslint-config-usual
```

### Add stuffs to the `package.json`

Add this eslint config part to your `package.json`:

```
"eslintConfig": {
  "extends": "@ridesz/eslint-config-usual"
},
```

And please add some `scripts` tag to your `package.json` file too:

```json
{
    "test:eslint": "eslint ./**/*.ts --color --max-warnings 0",
    "test:eslint:fix": "eslint --fix ./**/*.ts --color --max-warnings 0"
}
```

The `color` makes the console output pretty and the `max-warnings` makes the warnings forbidden too.

### GitLab CI config

Please add the necessary parts to your `.gitlab-ci.yml` file:

```yml
image: node:latest

stages:
    - test

eslint:
    stage: test
    script:
        - npm install
        - npm run test:eslint
```

This would use the latest node image and do the eslint check as part of the `test` stage.

### Running manually


If you would like to run the linter manually then you can use the following command:

```bash
npm run test:eslint
```

If you would like to get some auto fixes then use the same command with the `:fix` postfix:

```bash
npm run test:eslint:fix
```

## Some implementation details

I skip the check of some dependency and output folders I usually have:

- `node_modules`: dependencies
- `lib`: compiled code for the library
- `build`: compiled code for a top level project
- `reports`: generated reporst (documentation, dependency graph, etc.)
npm package: @ridesz/usual-dependency-graph-checker
Description: The usual dependency graph checker config for my projects (Ridesz)
Author: Tamás Ridinger
Latest version: 0.0.7

# @ridesz/usual-dependency-graph-checker

The typical dependency graph checking config I use for my TypeScript projects.

## How to use

### `package.json` setup

Just please add this `scripts` tag part to your `package.json` file too:

```json
{
    "test:dependency": "npx @ridesz/usual-dependency-graph-checker",
}
```

### GitLab CI config

Please add the necessary parts to your `.gitlab-ci.yml` file:

```yml
image: node:latest

stages:
    - test

dependecy:
    stage: test
    artifacts:
        paths:
            - build/
        expire_in: 1 week
        when: always
    script:
        - npm install
        - npm rebuild
        - npm run test:dependency
```

This would use the latest node image and do the dependency graph check as part of the `test` stage.

### Running manually


If you would like to run the documentation generation manually then you can use the following command:

```bash
npm run test:dependency
```

## Some implementation details

The result of the check (the graph in SVG and PNG formats) is generated into the `reports/dependency` folder.

The checker only checks the sources from the `src` folder and skips the `*.spec.ts` and `*.spec.tsx` files.
npm package: @ridesz/usual-dependency-graph-with-tests-checker
Description: The usual dependency graph with tests checker config for my projects (Ridesz)
Author: Tamás Ridinger
Latest version: 0.0.5

# @ridesz/usual-dependency-graph-with-tests-checker

The typical dependency graph with test checking config I use for my TypeScript projects.

## How to use

### `package.json` setup

Just please add this `scripts` tag part to your `package.json` file too:

```json
{
    "test:dependency:test": "npx @ridesz/usual-dependency-graph-with-tests-checker",
}
```

### GitLab CI config

Please add the necessary parts to your `.gitlab-ci.yml` file:

```yml
image: node:latest

stages:
    - test

dependecy:
    stage: test
    artifacts:
        paths:
            - build/
        expire_in: 1 week
        when: always
    script:
        - npm install
        - npm rebuild
        - npm run test:dependency:test
```

This would use the latest node image and do the dependency graph check as part of the `test` stage.

### Running manually


If you would like to run the documentation generation manually then you can use the following command:

```bash
npm run test:dependency
```

## Some implementation details

The result of the check (the graph in SVG and PNG formats) is generated into the `reports/dependencyWithTests` folder.

The checker only checks the sources from the `src` and the `tests` folders.
npm package: @ridesz/usual-documentation-generator
Description: The usual documentation generator config for my projects (Ridesz)
Author: Tamás Ridinger
Latest version: 1.0.3

# @ridesz/usual-documentation-generator

![Gitlab pipeline status](https://img.shields.io/gitlab/pipeline/ridesz/usual-documentation-generator/master)
![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/@ridesz/usual-documentation-generator)
![NPM](https://img.shields.io/npm/l/@ridesz/usual-documentation-generator)
![npm type definitions](https://img.shields.io/npm/types/@ridesz/usual-documentation-generator)
![npm](https://img.shields.io/npm/dw/@ridesz/usual-documentation-generator)

The typical documentation generator config I use for my TypeScript projects.

## How to use

### `package.json` setup

Just please add this `scripts` tag part to your `package.json` file too:

```json
{
    "doc": "npx @ridesz/usual-documentation-generator",
}
```

### GitLab CI config

Please add the necessary parts to your `.gitlab-ci.yml` file:

```yml
image: node:lts

stages:
    - documentation

documentation:
    stage: documentation
    script:
        - npm install
        - npm run doc
    artifacts:
        paths:
            - reports/docs
        expire_in: 1 week
```

This would use the latest node image and do the documentation generation as part of the `documentation` stage.

### Running manually


If you would like to run the documentation generation manually then you can use the following command:

```bash
npm run doc
```

## Some implementation details

The documentation is generated into the `reports/docs` folder.
npm package: @ridesz/usual-test-coverage-checker
Description: The usual test coverage checker config for my projects (Ridesz)
Author: Tamás Ridinger
Latest version: 0.0.5

# @ridesz/usual-test-coverage-checker

The typical unit test and cover checking config I use for my TypeScript projects.

## How to use

### `package.json` setup

Just please add this `scripts` tag part to your `package.json` file too:

```json
{
    "test:unit": "npx @ridesz/usual-test-coverage-checker",
}
```

### GitLab CI config

Please add the necessary parts to your `.gitlab-ci.yml` file:

```yml
image: node:latest

stages:
    - test

dependecy:
    stage: test
    artifacts:
        paths:
            - build/
        expire_in: 1 week
        when: always
    script:
        - npm install
        - npm rebuild
        - npm run test:unit
```

This would use the latest node image and do the dependency graph check as part of the `test` stage.

### Running manually


If you would like to run the unit testing manually then you can use the following command:

```bash
npm run test:unit
```

## Some implementation details

The result of the check is generated into the `reports/cover` folder.

The checker only checks the sources from the `src` folder and skips the `*.spec.ts` and `*.spec.tsx` files.
npm package: @ridesz/usual-unused-exports-checker
Description: The usual unused exports checker config for my projects (Ridesz)
Author: Tamás Ridinger
Latest version: 0.0.3

# @ridesz/usual-unused-exports-checker

The typical unused exports checking config I use for my TypeScript projects.

## How to use

### `package.json` setup

Just please add this `scripts` tag part to your `package.json` file too:

```json
{
    "test:exports": "npx @ridesz/usual-unused-exports-checker",
}
```

### GitLab CI config

Please add the necessary parts to your `.gitlab-ci.yml` file:

```yml
image: node:latest

stages:
    - test

exports:
    stage: test
    artifacts:
        paths:
            - build/
        expire_in: 1 week
        when: always
    script:
        - npm install
        - npm rebuild
        - npm run test:exports
```

This would use the latest node image and do the unused exports check as part of the `test` stage.

### Running manually


If you would like to run the unused exports check manually then you can use the following command:

```bash
npm run test:exports
```

## Some implementation details

The checker skips the unused exports in the `src/index.ts` file.
npm package: @ridgebox/eslint-config
Description: ESLint config of Ridgebox.com
Author: Georgiy Tarasov
Latest version: 2.0.2

# [Ridgebox.com](https://ridgebox.com) ESLint Config

To install:

```
yarn add -D @ridgebox/eslint-config
```

Add ESLint config to `package.json` or `.eslintrc.js`:

```
"eslint": {
  "extends": "@ridgebox/eslint-config"
}
```

## Licence

MIT
npm package: @ridgebox/prettier-config
Description: Prettier config of Ridgebox.com
Author: Georgiy Tarasov
Latest version: 1.1.0

# [Ridgebox.com](https://ridgebox.com) Prettier Config

To install Prettier config:
```
yarn add --dev prettier @ridgebox/prettier-config
```

Add to `package.json`:

```
"prettier": "@ridgebox/prettier-config"
```

or import the package in `prettier.config.js`:

```
module.exports = require('@ridgebox/prettier-config');
```

## License

MIT
npm package: @ridgehkr/useful
Description: A collection of performant React utility hooks for modern web applications
Author: Caleb Pierce
Latest version: 1.1.0

# Useful: a React Hooks Library

Welcome to Useful! This library provides a collection of efficient and modern React hooks to enhance your application development experience. These hooks are designed to simplify common tasks, improve code reusability, and promote best practices in your React projects. Useful is written in TypeScript, uses [Vite](https://vitejs.dev/) for its development environment, and [Vitest](https://vitest.dev/) for unit testing.

Useful officially supports [React v18.0](https://react.dev/blog/2022/03/29/react-v18) and newer.

## Documentation

Read the full documentation at [**https://docs.usefulhooks.com**](https://docs.usefulhooks.com/).

## Installation

```sh
pnpm install @ridgehkr/useful

# or with npm
npm install @ridgehkr/useful
```

## Development

This project uses [pNpm](https://pnpm.io/) as its package manager. To get started, first install all project dependencies:

```sh
pnpm install

# or with npm
npm install
```

Spin up the development server:

```sh
pnpm dev

# or with npm
npm run dev
```

All hooks live in `/src/hooks/`, and their associated unit tests are in `/src/tests/`. Every hook follows the standard hook naming convention of "use[hook capability]", e.g. useFetch or useLocalStorage.

Unit test files use the name format of `[hook name].test.tsx`, e.g. `useFetch.test.tsx` or `useLocalStorage.test.tsx`. All unit tests for a hook should exist in their associated test file and nowhere else.

### Unit tests

Useful relies on [Vitest](https://vitest.dev/) for its unit testing framework. [The test results](#test-scripts) can be seen either in the console (`test` task) or in a browser (`test:ui`). The scripts, when running, will watch your test files and automatically run again when any changes are made.

Note that [most hooks don't have unit tests yet](https://docs.usefulhooks.com#unit-tests). If you'd like to contribute to this effort, please [submit a pull request](https://github.com/ridgehkr/useful)!

#### Test Scripts

Run all tests in the console:

```sh
pnpm test

# or with npm
npm run test
```

Run all unit tests as well as Vitest's live test status UI:

```sh
pnpm test:ui

# or with npm
npm run test:ui
```

## Contributing

Useful thrives on contributions from developers like you! If you encounter issues or have any suggestions for improvements, please feel free to contribute by opening an issue or submitting a pull request in the [GitHub repository](https://github.com/ridgehkr/useful).

## License

This project is licensed under the [MIT License](https://github.com/ridgehkr/hooks/blob/master/LICENSE.txt).

Written by [Caleb Pierce](https://calebpierce.dev).
npm package: @ridi-web/inappbridge
Description: A bridge between App - Web
Latest version: 1.3.1

# @ridi-web/inappbridge

> 웹에서 앱에게 메시지를 보내고 받는 표준화된 방식을 정의하는 라이브러리

상세한 인터페이스 정의에 대해서는
[노션 문서:앱-웹 연동 인터페이스](https://www.notion.so/ridi/1db6facd78f24af68e85cdf4bc31144c)를 참고해주세요.

## 개발방법

### 개발자 도구

개발의 편의성을 위해 InAppBridge 테스트를 위한 개발자 도구를 지원합니다.  
[Tampermonkey 확장 프로그램](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) 설
치 후 [다음 링크](https://github.com/ridi/ridi/raw/master/frontends/web/inappbridge/devtools.user.js) 를 눌러서 설치합니
다.

우클릭 후 `Tampermonkey > InAppBridge DevTools (beta)` 를 눌러 실행합니다.

### 버저닝

기본적으로 [semver](https://semver.org/lang/ko/) 규칙을 따릅니다. 추가적으로 개발진행시 아래의 항목을 참고해 버저닝을 결
정합니다.

1. 앱의 모든 버전에 대응하거나 앱의 버전과 상관없는 기능추가나 변경이라면 패치 버전을 올립니다.
2. 신규 인터페이스 추가는 무조건 앱의 하위호환이 안되므로 마이너 버전을 올립니다.
  - 기존의 인터페이스에서 Object 형태의 파라미터가 추가되는 경우 앱의 하위호환이 되므로 패치 버전을 올립니다.
npm package: @ridi/cms-sdk
Description: Ridibooks CMS SDK
Latest version: 4.1.4

# Ridibooks CMS SDK

[![Packagist](https://img.shields.io/packagist/v/ridibooks/cms-sdk.svg)](https://packagist.org/packages/ridibooks/cms-sdk)

## Introduction

CMS SDK provides common resources used in RIDI CMS
This library uses [Apache Thrift](https://thrift.apache.org) for a RPC implementation.

## Supporting Languages

For more details, see below links.

- [PHP](./lib/php/README.md)
- [JS](./lib/js/README.md)
- [Python](./lib/python/README.md)

## For SDK developers

To build a RPC client, you should install Apache Thrift.

``` sh
# In macOS, you can install easily with homebrew.
brew install thrift
```

To generate thrift code, please run:

``` sh
make thrift
```

### CMS-SDK Release steps

1. Create `release/{version}` branch.
1. Update `CHANGELOG.md`.
1. Update new SDK version in `package.json` & `lib/python/setup.py`.
1. Commit & push all the changes and make a pull request.
1. After PR, tag a new release in github. This will release a new version in Packagist.
1. `make -C lib/js release` will release js module.
1. `make -C lib/python release` will release python package.
npm package: @ridi/cms-ui
Description: UI components for Ridibooks CMS SDK
Author: Ridibooks Performance Team
Latest version: 0.3.12

# Ridibooks CMS UI

[![npm (scoped)](https://img.shields.io/npm/v/@ridi/cms-ui.svg)](https://www.npmjs.com/package/@ridi/cms-ui)
[![Build Status](https://travis-ci.org/ridi/cms-ui.svg?branch=master)](https://travis-ci.org/ridi/cms-ui)
[![Greenkeeper badge](https://badges.greenkeeper.io/ridi/cms-ui.svg)](https://greenkeeper.io/)

UI components for [*Ridibooks CMS SDK*](https://github.com/ridi/cms-sdk).

## Getting Started

### Install
Install via npm:
```bash
npm install --save @ridi/cms-ui
```
Or use CDN:
```html
<script src="https://cdn.jsdelivr.net/npm/@ridi/cms-ui@0.3/dist/cms-ui.var.js"></script>
```

### Usage

#### React
```js
import { Menu } from '@ridi/cms-ui';

const menuItems = ... // get menu data from cms-sdk via server-side rendering or custom API.

const Example = (props) => {
  return (
    <div>
      <Menu items={menuItems} />
    </div>
  );
};
```

#### Browser
```html
<html>
  <head>
    <!-- Load library in <head> to avoid flickering. -->
    <script src="https://cdn.jsdelivr.net/npm/@ridi/cms-ui@0.3/dist/cms-ui.var.js"></script>
  </head>
  <body>
    <div id="menu_container"></div>

    <script>
      (function renderMenu() {
        var { createElement, render, Menu } = CmsUi;

        // Get menu data from cms-sdk via server-side rendering or custom API.
        var menuItems = ...

        var menuElement = createElement(Menu, { items: menuItems });
        var menuContainer = document.getElementById('menu_container');

        // Make sure to container DOM element is loaded before call render function.
        render(menuElement, menuContainer);
      })();
    </script>
  </body>
</html>
```

> **Note:**
> After *cms-ui* is loaded, following CSS is injected automatically for the layout.
> This is **not configurable for now**.
> If this causes any problem, please notify us.
> ```css
> body {
>   margin: 3.5rem 0 0 0;
> }
>
> @media (min-width: 1200px) {
>   body {
>     margin: 0 0 0 17rem;
>   }
> }
> ```

## Development

### Setup
Install all dependencies:
```bash
make install
```

### Run Example App
To compile and run example app, please run:

#### React
```bash
make start-umd
```

#### Browser
```bash
make start-var
```

### Build
To build *cms-ui* module, please run:
```bash
make build
```
The output file will be generated in `dist` directory.
npm package: @ridi/colors
Description: RIDI Colors
Latest version: 0.7.1

# @ridi/colors

## Install
```bash
$ npm install @ridi/colors
```

## Usage
```js static
import colors from '@ridi/colors';
import hex from '@ridi/colors/hex.json';
import rgb from '@ridi/colors/rgb.json';
import hsl from '@ridi/colors/hsl.json';
import hwb from '@ridi/colors/hwb.json';

colors.dogerBlue5; // #EBF6FF
hex.dogerBlue5; // #EBF6FF
rgb.dogerBlue5; // rgb(235, 246, 255)
hsl.dogerBlue5; // hsl(207, 100%, 96%)
hwb.dogerBlue5; // hwb(207, 92%, 0%)
```

## Colors
```jsx
import colors from '@ridi/colors';
import hex from '@ridi/colors/hex.json';
import rgb from '@ridi/colors/rgb.json';
import hsl from '@ridi/colors/hsl.json';
import hwb from '@ridi/colors/hwb.json';

import Color from 'color';

<div>
  {Object.keys(colors).map((name) => {
    const color = Color(colors[name]);

    return (
      <div
        key={name}
        style={{
          display: 'flex',
          alignItems: 'center',
          padding: '8px',
          color: color.isLight() ? 'black' : 'white',
          backgroundColor: color,
        }}
      >
        <div
          style={{
            flex: 1,
            userSelect: 'all',
            fontSize: '14px',
            fontWeight: 'bold',
          }}
        >
          {name}
        </div>

        <div style={{ fontSize: '10px', textAlign: 'right' }}>
          <div style={{ userSelect: 'all' }}>{hex[name]}</div>
          <div style={{ userSelect: 'all' }}>{rgb[name]}</div>
          <div style={{ userSelect: 'all' }}>{hsl[name]}</div>
          <div style={{ userSelect: 'all' }}>{hwb[name]}</div>
        </div>
      </div>
    );
  })}
</div>;
```