open-index/open-npm huggingface dataset:
npm package: @suroc1/graphql
Description: Opinionated gql-server
Author: Igor Chubarets
Latest version: 0.0.11

Package is a wrap around `fastify`, `graphql-http` and various `@graphql-tools` to simplify development of graphql applications

## Instalation
`npm i @suroc1/graphql`

## How to use
```
import surocShema from "@suroc1/graphql/schema";
import surocServer from "@suroc1/graphql/server";

const resolvers = {
    Mutation: {
        hello: () => {}
    },
    Query: {
        world: () => {}
    },
    YourType: {
        resolver: () => {}
    }
};

const schema = surocShema({
    dir: '/path/to/your/gql/files/folder',
    resolvers,
})

const app = surocServer({
    schema,
});

app.listen({ host: config.appHost, port: parseInt(config.appPort) }, async (err, address) => {
    if (err) {
        app.log.error(err);
        process.exit(1);
    }
    console.log(`🚀 Server ready at: ${address}`);
});
```

## Server Options
```
// combination of two types bellow and fastifyHttpOptions
type Suroc1ServerOptions = Suroc1ServerConfig & FastifyHttpOptions<http.Server, FastifyBaseLogger> & Suroc1HandlerOptions;

interface Suroc1HandlerOptions extends HandlerOptions<GraphQLContext> {
    schema: GraphQLSchema; // schema is required to run the server
}

type Suroc1ServerConfig = {
    graphiql?: boolean | false; // enables visual representation of schema using https://www.npmjs.com/package/graphiql
    prefix?: string; // default is /graphql
    middlewaresOnRequest?: []; // fastify OnRequest function, order of middlewares matters,
    middlewaresPreHandler?: []; // fastify Prehandler function, order of middlewares matters
};
```

## Schema options
```
type Suroc1SchemaOptions = {
    dir: string; // location of .gql files

    // Typically contains of object containing resolvers for each type
    resolvers: unknown; // Query, Mutation, Subscription + custom types
    
    directives?: GraphQLAppliedDirective[]; // Examples can be found at: https://the-guild.dev/graphql/tools/docs/schema-directives
    
    resolverMiddlewares?: ResolverMiddleware[]; // Examples can be found at: https://the-guild.dev/graphql/tools/docs/resolvers-composition
    
    schemaMiddlewares?: SchemaTransformer[]; // Examples can be found at: https://the-guild.dev/graphql/tools/docs/schema-transformers
    /** 
     * auth enables authentication middleware and @auth directive
     * Example:
     * type Helloworld {
     *    hello: String! @auth // gonna throw auth error if `user` field is not present in context
     *    world: String!
     * }
     *
     * @default false
    */
    auth?: boolean;
    /**
     * Enabled when `extract` is true or `auth` is true
     */
    fields?: Suroc1FieldsConfig; // fields for specific resolver
};
```
npm package: @surpathhub/ugnay
Description: SurPath Hub's design system implementation for the web. Made with ❤, TypeScript, and SCSS
Author: SurPath Hub Community
Latest version: 0.1.0-beta.1

# Ugnay Components Web
- The web implementation of SurPath Hub's design system

## Component documentation lookup
[1. SPHAppbar](SPHAppbar/README.md)<br>
[2. SPHButton](SPHButton/README.md)<br>
[3. SPHCard](SPHCard/README.md)<br>
[4. SPHHeader](SPHHeader/README.md)<br>
[5. SPHNavbar](SPHNavbar/README.md)<br>
[6. SPHTextField](SPHTextField/README.md)<br>

## Prerequisites
- NPM
- Sass Preprocessor (or some build pack like Webpack or Gulp)
- Knowledge about basic HTML, CSS, JS, and SCSS

## Basic Usage
- Now, we need to know how to use the components in our project for the library to work (duh.)
- So here's the basic usage for the HTML portion of the library:

### HTML Usage

1. Go to this library's documentation page/s
2. Select the component that you want.
3. Copy its HTML code.
4. Paste it in your project's html page/s.
5. Enjoy!

- Now these HTML components are very dull in and of its own. We need to add styles.
- At the next section of this Basic Usage portion, we'll be showing you the basic usage of the library's SCSS modules.

### SCSS Usage

1. Install the modules using npm:
```shell
npm install @surpathhub/ugnay
```
1A. Alternatively, you can instantiate the component styles using the official CDN
```html
<link rel="stylesheet" href="https://unpkg.com/@surpathhub/ugnay@0.1.0-beta/main.css">
```
2. Import all the components that you want to use in your project.
```scss
@use '~@surpathhub/ugnay/SPHCore/Theme';
@use '~@surpathhub/ugnay/SPHButton';
@use '~@surpathhub/ugnay/SPHTextField';
```
2A. Alternatively, if you write in CSS directly, you can use the `@import url()` at-rule.
```css
@import url('https://unpkg.com/@surpathhub/ugnay@0.1.0-beta/[component_name]/main.css');

/*  
    Examples:
    @import url('https://unpkg.com/@surpathhub/ugnay@0.1.0-beta/SPHAppbar/main.css');
    @import url('https://unpkg.com/@surpathhub/ugnay@0.1.0-beta/SPHButton/main.css');
    @import url('https://unpkg.com/@surpathhub/ugnay@0.1.0-beta/SPHHeader/main.css');
    @import url('https://unpkg.com/@surpathhub/ugnay@0.1.0-beta/SPHTextField/main.css');
*/
```
3. Call the component styles using the `use()` mixin.
```scss
...

@include SPHComponent.use();
```
4. DONE! Happy styling!

### TypeScript Usage
1. Import the typescript module of the component you want to use.
```typescript
import SPHNavbar from "@surpathhub/ugnay/Components/SPHNavbar";
```
2. Make a new instance of that component.
```typescript
import SPHNavbar from "@surpathhub/ugnay/Components/SPHNavbar";

const myNavbar = new SPHNavbar();
```
3. Attach `.use()` at the end of the instance variable.
```typescript
import SPHNavbar from "@surpathhub/ugnay/Components/SPHNavbar";

const myNavbar = new SPHNavbar();

myNavbar.use();
```
4. Let your compiler do its thing.
5. Done!
npm package: @surplus/array
Description: Array utilities for S.js/Surplus applications
Author: Josh Junon
Latest version: 1.0.0

# SArray

Convenient array signals for [S.js](https://github.com/surplus/s).

SArray adds utility methods to S signals carrying arrays. These utility methods parallel the standard ES3/5/6 array methods.

```javascript
// transformations without SArray
var arr = S.data([1, 2, 3]),
  mapped = S(() => arr().map((x) => x * 2)),
  filtered = S(() => arr().filter((x) => x > 2));

// transformations with SArray
var arr = SArray([1, 2, 3]),
  mapped = arr.map((x) => x * 2), // arr() now has array methods
  filtered = arr.filter((x) => x > 2);

// mutations without SArray
var tmp = S.sample(arr).slice(0);
tmp.push(4);
arr(tmp);

// mutations with SArray
arr.push(4);

// SArray methods also return SArrays
var mappedAndFiltered = arr.map((x) => x * 2).filter((x) => x > 2);

// Any array-carrying signal can be 'lifted' to create an SArray
var plain = S.data([1, 2, 3]),
  arr = SArray.lift(plain),
  mapped = arr.map((x) => x * 2); // etc

// When an array signal changes, map() will re-use prior computations
// for new items that === the old.
var rands = arr.map(() => Math.random().toFixed(2));
rands(); // ["0.83", "0.75", "0.77"]
arr.push(4);
rands(); // ["0.83", "0.75", "0.77", "0.25"] unchanged values reused
```

For a full list of methods and their signatures, consult [index.ts](index.ts).
npm package: @surplus/create-surplus-app
Description: npx create-surplus-app - create a Surplus application in seconds
Author: Joshua Lee Junon
Latest version: 0.2.0

# `npx create-surplus-app`

This repository is the package for `@surplus/create-surplus-app`, and
hosts the `create-surplus-app` binary.

```shell
$ npx create-surplus-app --help
```

> [!TIP]
> The Surplus ecosystem, in its current incarnation, is rather young, but serious.
> If you happen to try out any part of the ecosystem (including `create-surplus-app`)
> and you're turned off by lack of some feature or nicety, please open an issue -
> I want to know about it, even if it's just an issue title.

# License

Copyright &copy; 2026, Joshua Lee Junon. Released under the [MIT License](LICENSE.txt).
npm package: @surplus/esbuild
Description: Surplus framework ESBuild plugin
Author: Josh Junon
Latest version: 2.0.2

# Surplus ESBuild Plugin

[ESBuild](https://esbuild.github.io/) plugin for the Surplus
Javascript framework.

> **NOTE:** This plugin strips typescript types from the output.
> If this is affecting you negatively, please open an issue
> with the [compiler](https://github.com/surplus/compiler/issues).

## Usage

```
npm i --save-dev @surplus/esbuild
pnpm add -D @surplus/esbuild
yarn add -D @surplus/esbuild
```

```js
import esbuild from "esbuild";
import surplus from "@surplus/esbuild";

const surplusOptions = {
	/* see @surplus/compiler for options */
};

await esbuild.build({
	entryPoints: ["app.js"],
	bundle: true,
	minify: true,
	outfile: "out.js",
	plugins: [surplus(surplusOptions)], // options are optional
});
```

# License

Copyright &copy; 2023-2025 Josh Junon.

Released under the [MIT License](LICENSE).