Add comprehensive development roadmap via GitHub Issues

Created 10 detailed GitHub issues covering:
- Project activation and management UI (#1-2)
- Worker node coordination and visualization (#3-4)
- Automated GitHub repository scanning (#5)
- Intelligent model-to-issue matching (#6)
- Multi-model task execution system (#7)
- N8N workflow integration (#8)
- Hive-Bzzz P2P bridge (#9)
- Peer assistance protocol (#10)

Each issue includes detailed specifications, acceptance criteria,
technical implementation notes, and dependency mapping.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
anthonyrawlins
2025-07-12 19:41:01 +10:00
parent 9a6a06da89
commit e89f2f4b7b
4980 changed files with 1501266 additions and 57 deletions

View File

@@ -0,0 +1,3 @@
# Storybook for React & Vite
See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more.

View File

@@ -0,0 +1,50 @@
export * from '@storybook/react';
export { __definePreview as definePreview } from '@storybook/react';
import { StorybookConfig as StorybookConfig$1, TypescriptOptions as TypescriptOptions$1, CompatibleString } from 'storybook/internal/types';
import { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
import docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
type FrameworkName = CompatibleString<'@storybook/react-vite'>;
type BuilderName = CompatibleString<'@storybook/builder-vite'>;
type FrameworkOptions = {
builder?: BuilderOptions;
strictMode?: boolean;
/**
* Use React's legacy root API to mount components
*
* React has introduced a new root API with React 18.x to enable a whole set of new features (e.g.
* concurrent features) If this flag is true, the legacy Root API is used to mount components to
* make it easier to migrate step by step to React 18.
*
* @default false
*/
legacyRootApi?: boolean;
};
type StorybookConfigFramework = {
framework: FrameworkName | {
name: FrameworkName;
options: FrameworkOptions;
};
core?: StorybookConfig$1['core'] & {
builder?: BuilderName | {
name: BuilderName;
options: BuilderOptions;
};
};
};
type TypescriptOptions = TypescriptOptions$1 & {
/**
* Sets the type of Docgen when working with React and TypeScript
*
* @default `'react-docgen'`
*/
reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
/** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */
reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0];
};
/** The interface for Storybook configuration in `main.ts` files. */
type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript'> & StorybookConfigVite & StorybookConfigFramework & {
typescript?: Partial<TypescriptOptions>;
};
export { FrameworkOptions, StorybookConfig };

View File

@@ -0,0 +1 @@
"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to},__reExport=(target,mod,secondTarget)=>(__copyProps(target,mod,"default"),secondTarget&&__copyProps(secondTarget,mod,"default"));var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var index_exports={};__export(index_exports,{definePreview:()=>import_react.__definePreview});module.exports=__toCommonJS(index_exports);__reExport(index_exports,require("@storybook/react"),module.exports);var import_react=require("@storybook/react");0&&(module.exports={definePreview,...require("@storybook/react")});

View File

@@ -0,0 +1,2 @@
export * from '@storybook/react';
export { __definePreview as definePreview } from '@storybook/react';

View File

@@ -0,0 +1,9 @@
import { StorybookConfig } from '../index.js';
import '@storybook/react';
import 'storybook/internal/types';
import '@storybook/builder-vite';
import '@joshwooding/vite-plugin-react-docgen-typescript';
declare function defineMain(config: StorybookConfig): StorybookConfig;
export { defineMain };

View File

@@ -0,0 +1 @@
"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var node_exports={};__export(node_exports,{defineMain:()=>defineMain});module.exports=__toCommonJS(node_exports);function defineMain(config){return config}0&&(module.exports={defineMain});

View File

@@ -0,0 +1,3 @@
function defineMain(config){return config}
export { defineMain };

View File

@@ -0,0 +1,10 @@
import { PresetProperty } from 'storybook/internal/types';
import { StorybookConfig } from './index.js';
import '@storybook/react';
import '@storybook/builder-vite';
import '@joshwooding/vite-plugin-react-docgen-typescript';
declare const core: PresetProperty<'core'>;
declare const viteFinal: NonNullable<StorybookConfig['viteFinal']>;
export { core, viteFinal };

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,247 @@
import {type Options as LocatePathOptions} from 'locate-path';
/**
Return this in a `matcher` function to stop the search and force `findUp` to immediately return `undefined`.
*/
export const findUpStop: unique symbol;
export type Match = string | typeof findUpStop | undefined;
export type Options = {
/**
A directory path where the search halts if no matches are found before reaching this point.
Default: Root directory
*/
readonly stopAt?: string;
} & LocatePathOptions;
/**
Find a file or directory by walking up parent directories.
@param name - The name of the file or directory to find. Can be multiple.
@returns The first path found (by respecting the order of `name`s) or `undefined` if none could be found.
@example
```
// /
// └── Users
// └── sindresorhus
// ├── unicorn.png
// └── foo
// └── bar
// ├── baz
// └── example.js
// example.js
import {findUp} from 'find-up';
console.log(await findUp('unicorn.png'));
//=> '/Users/sindresorhus/unicorn.png'
console.log(await findUp(['rainbow.png', 'unicorn.png']));
//=> '/Users/sindresorhus/unicorn.png'
```
*/
export function findUp(name: string | readonly string[], options?: Options): Promise<string | undefined>;
/**
Find a file or directory by walking up parent directories.
@param matcher - Called for each directory in the search. Return a path or `findUpStop` to stop the search.
@returns The first path found or `undefined` if none could be found.
@example
```
import path from 'node:path';
import {findUp, pathExists} from 'find-up';
console.log(await findUp(async directory => {
const hasUnicorns = await pathExists(path.join(directory, 'unicorn.png'));
return hasUnicorns && directory;
}, {type: 'directory'}));
//=> '/Users/sindresorhus'
```
*/
export function findUp(matcher: (directory: string) => (Match | Promise<Match>), options?: Options): Promise<string | undefined>;
/**
Synchronously find a file or directory by walking up parent directories.
@param name - The name of the file or directory to find. Can be multiple.
@returns The first path found (by respecting the order of `name`s) or `undefined` if none could be found.
@example
```
// /
// └── Users
// └── sindresorhus
// ├── unicorn.png
// └── foo
// └── bar
// ├── baz
// └── example.js
// example.js
import {findUpSync} from 'find-up';
console.log(findUpSync('unicorn.png'));
//=> '/Users/sindresorhus/unicorn.png'
console.log(findUpSync(['rainbow.png', 'unicorn.png']));
//=> '/Users/sindresorhus/unicorn.png'
```
*/
export function findUpSync(name: string | readonly string[], options?: Options): string | undefined;
/**
Synchronously find a file or directory by walking up parent directories.
@param matcher - Called for each directory in the search. Return a path or `findUpStop` to stop the search.
@returns The first path found or `undefined` if none could be found.
@example
```
import path from 'node:path';
import {findUpSync, pathExistsSync} from 'find-up';
console.log(findUpSync(directory => {
const hasUnicorns = pathExistsSync(path.join(directory, 'unicorn.png'));
return hasUnicorns && directory;
}, {type: 'directory'}));
//=> '/Users/sindresorhus'
```
*/
export function findUpSync(matcher: (directory: string) => Match, options?: Options): string | undefined;
/**
Find files or directories by walking up parent directories.
@param name - The name of the file or directory to find. Can be multiple.
@returns All paths found (by respecting the order of `name`s) or an empty array if none could be found.
@example
```
// /
// └── Users
// └── sindresorhus
// ├── unicorn.png
// └── foo
// ├── unicorn.png
// └── bar
// ├── baz
// └── example.js
// example.js
import {findUpMultiple} from 'find-up';
console.log(await findUpMultiple('unicorn.png'));
//=> ['/Users/sindresorhus/foo/unicorn.png', '/Users/sindresorhus/unicorn.png']
console.log(await findUpMultiple(['rainbow.png', 'unicorn.png']));
//=> ['/Users/sindresorhus/foo/unicorn.png', '/Users/sindresorhus/unicorn.png']
```
*/
export function findUpMultiple(name: string | readonly string[], options?: Options): Promise<string[]>;
/**
Find files or directories by walking up parent directories.
@param matcher - Called for each directory in the search. Return a path or `findUpStop` to stop the search.
@returns All paths found or an empty array if none could be found.
@example
```
import path from 'node:path';
import {findUpMultiple, pathExists} from 'find-up';
console.log(await findUpMultiple(async directory => {
const hasUnicorns = await pathExists(path.join(directory, 'unicorn.png'));
return hasUnicorns && directory;
}, {type: 'directory'}));
//=> ['/Users/sindresorhus/foo', '/Users/sindresorhus']
```
*/
export function findUpMultiple(matcher: (directory: string) => (Match | Promise<Match>), options?: Options): Promise<string[]>;
/**
Synchronously find files or directories by walking up parent directories.
@param name - The name of the file or directory to find. Can be multiple.
@returns All paths found (by respecting the order of `name`s) or an empty array if none could be found.
@example
```
// /
// └── Users
// └── sindresorhus
// ├── unicorn.png
// └── foo
// ├── unicorn.png
// └── bar
// ├── baz
// └── example.js
// example.js
import {findUpMultipleSync} from 'find-up';
console.log(findUpMultipleSync('unicorn.png'));
//=> ['/Users/sindresorhus/foo/unicorn.png', '/Users/sindresorhus/unicorn.png']
console.log(findUpMultipleSync(['rainbow.png', 'unicorn.png']));
//=> ['/Users/sindresorhus/foo/unicorn.png', '/Users/sindresorhus/unicorn.png']
```
*/
export function findUpMultipleSync(name: string | readonly string[], options?: Options): string[];
/**
Synchronously find files or directories by walking up parent directories.
@param matcher - Called for each directory in the search. Return a path or `findUpStop` to stop the search.
@returns All paths found or an empty array if none could be found.
@example
```
import path from 'node:path';
import {findUpMultipleSync, pathExistsSync} from 'find-up';
console.log(findUpMultipleSync(directory => {
const hasUnicorns = pathExistsSync(path.join(directory, 'unicorn.png'));
return hasUnicorns && directory;
}, {type: 'directory'}));
//=> ['/Users/sindresorhus/foo', '/Users/sindresorhus']
```
*/
export function findUpMultipleSync(matcher: (directory: string) => Match, options?: Options): string[];
/**
Check if a path exists.
@param path - The path to a file or directory.
@returns Whether the path exists.
@example
```
import {pathExists} from 'find-up';
console.log(await pathExists('/Users/sindresorhus/unicorn.png'));
//=> true
```
*/
export function pathExists(path: string): Promise<boolean>;
/**
Synchronously check if a path exists.
@param path - Path to the file or directory.
@returns Whether the path exists.
@example
```
import {pathExistsSync} from 'find-up';
console.log(pathExistsSync('/Users/sindresorhus/unicorn.png'));
//=> true
```
*/
export function pathExistsSync(path: string): boolean;

View File

@@ -0,0 +1,107 @@
import path from 'node:path';
import {locatePath, locatePathSync} from 'locate-path';
import {toPath} from 'unicorn-magic';
export const findUpStop = Symbol('findUpStop');
export async function findUpMultiple(name, options = {}) {
let directory = path.resolve(toPath(options.cwd) ?? '');
const {root} = path.parse(directory);
const stopAt = path.resolve(directory, toPath(options.stopAt ?? root));
const limit = options.limit ?? Number.POSITIVE_INFINITY;
const paths = [name].flat();
const runMatcher = async locateOptions => {
if (typeof name !== 'function') {
return locatePath(paths, locateOptions);
}
const foundPath = await name(locateOptions.cwd);
if (typeof foundPath === 'string') {
return locatePath([foundPath], locateOptions);
}
return foundPath;
};
const matches = [];
// eslint-disable-next-line no-constant-condition
while (true) {
// eslint-disable-next-line no-await-in-loop
const foundPath = await runMatcher({...options, cwd: directory});
if (foundPath === findUpStop) {
break;
}
if (foundPath) {
matches.push(path.resolve(directory, foundPath));
}
if (directory === stopAt || matches.length >= limit) {
break;
}
directory = path.dirname(directory);
}
return matches;
}
export function findUpMultipleSync(name, options = {}) {
let directory = path.resolve(toPath(options.cwd) ?? '');
const {root} = path.parse(directory);
const stopAt = path.resolve(directory, toPath(options.stopAt) ?? root);
const limit = options.limit ?? Number.POSITIVE_INFINITY;
const paths = [name].flat();
const runMatcher = locateOptions => {
if (typeof name !== 'function') {
return locatePathSync(paths, locateOptions);
}
const foundPath = name(locateOptions.cwd);
if (typeof foundPath === 'string') {
return locatePathSync([foundPath], locateOptions);
}
return foundPath;
};
const matches = [];
// eslint-disable-next-line no-constant-condition
while (true) {
const foundPath = runMatcher({...options, cwd: directory});
if (foundPath === findUpStop) {
break;
}
if (foundPath) {
matches.push(path.resolve(directory, foundPath));
}
if (directory === stopAt || matches.length >= limit) {
break;
}
directory = path.dirname(directory);
}
return matches;
}
export async function findUp(name, options = {}) {
const matches = await findUpMultiple(name, {...options, limit: 1});
return matches[0];
}
export function findUpSync(name, options = {}) {
const matches = findUpMultipleSync(name, {...options, limit: 1});
return matches[0];
}
export {
pathExists,
pathExistsSync,
} from 'path-exists';

View File

@@ -0,0 +1,9 @@
MIT License
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,61 @@
{
"name": "find-up",
"version": "7.0.0",
"description": "Find a file or directory by walking up parent directories",
"license": "MIT",
"repository": "sindresorhus/find-up",
"funding": "https://github.com/sponsors/sindresorhus",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "https://sindresorhus.com"
},
"type": "module",
"exports": {
"types": "./index.d.ts",
"default": "./index.js"
},
"sideEffects": false,
"engines": {
"node": ">=18"
},
"scripts": {
"test": "xo && ava && tsd"
},
"files": [
"index.js",
"index.d.ts"
],
"keywords": [
"find",
"up",
"find-up",
"findup",
"look-up",
"look",
"file",
"search",
"match",
"package",
"resolve",
"parent",
"parents",
"folder",
"directory",
"walk",
"walking",
"path"
],
"dependencies": {
"locate-path": "^7.2.0",
"path-exists": "^5.0.0",
"unicorn-magic": "^0.1.0"
},
"devDependencies": {
"ava": "^5.3.1",
"is-path-inside": "^4.0.0",
"tempy": "^3.1.0",
"tsd": "^0.29.0",
"xo": "^0.56.0"
}
}

View File

@@ -0,0 +1,160 @@
# find-up
> Find a file or directory by walking up parent directories
## Install
```sh
npm install find-up
```
## Usage
```
/
└── Users
└── sindresorhus
├── unicorn.png
└── foo
└── bar
├── baz
└── example.js
```
`example.js`
```js
import path from 'node:path';
import {findUp, pathExists} from 'find-up';
console.log(await findUp('unicorn.png'));
//=> '/Users/sindresorhus/unicorn.png'
console.log(await findUp(['rainbow.png', 'unicorn.png']));
//=> '/Users/sindresorhus/unicorn.png'
console.log(await findUp(async directory => {
const hasUnicorns = await pathExists(path.join(directory, 'unicorn.png'));
return hasUnicorns && directory;
}, {type: 'directory'}));
//=> '/Users/sindresorhus'
```
## API
### findUp(name, options?)
### findUp(matcher, options?)
Returns a `Promise` for either the path or `undefined` if it could not be found.
### findUp([...name], options?)
Returns a `Promise` for either the first path found (by respecting the order of the array) or `undefined` if none could be found.
### findUpMultiple(name, options?)
### findUpMultiple(matcher, options?)
Returns a `Promise` for either an array of paths or an empty array if none could be found.
### findUpMultiple([...name], options?)
Returns a `Promise` for either an array of the first paths found (by respecting the order of the array) or an empty array if none could be found.
### findUpSync(name, options?)
### findUpSync(matcher, options?)
Returns a path or `undefined` if it could not be found.
### findUpSync([...name], options?)
Returns the first path found (by respecting the order of the array) or `undefined` if none could be found.
### findUpMultipleSync(name, options?)
### findUpMultipleSync(matcher, options?)
Returns an array of paths or an empty array if none could be found.
### findUpMultipleSync([...name], options?)
Returns an array of the first paths found (by respecting the order of the array) or an empty array if none could be found.
#### name
Type: `string`
The name of the file or directory to find.
#### matcher
Type: `Function`
A function that will be called with each directory until it returns a `string` with the path, which stops the search, or the root directory has been reached and nothing was found. Useful if you want to match files with certain patterns, set of permissions, or other advanced use-cases.
When using async mode, the `matcher` may optionally be an async or promise-returning function that returns the path.
#### options
Type: `object`
##### cwd
Type: `URL | string`\
Default: `process.cwd()`
The directory to start from.
##### type
Type: `string`\
Default: `'file'`\
Values: `'file' | 'directory'`
The type of path to match.
##### allowSymlinks
Type: `boolean`\
Default: `true`
Allow symbolic links to match if they point to the chosen path type.
##### stopAt
Type: `URL | string`\
Default: Root directory
A directory path where the search halts if no matches are found before reaching this point.
### pathExists(path)
Returns a `Promise<boolean>` of whether the path exists.
### pathExistsSync(path)
Returns a `boolean` of whether the path exists.
#### path
Type: `string`
The path to a file or directory.
### findUpStop
A [`Symbol`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) that can be returned by a `matcher` function to stop the search and cause `findUp` to immediately return `undefined`. Useful as a performance optimization in case the current working directory is deeply nested in the filesystem.
```js
import path from 'node:path';
import {findUp, findUpStop} from 'find-up';
await findUp(directory => {
return path.basename(directory) === 'work' ? findUpStop : 'logo.png';
});
```
## Related
- [find-up-cli](https://github.com/sindresorhus/find-up-cli) - CLI for this module
- [package-up](https://github.com/sindresorhus/package-up) - Find the closest package.json file
- [pkg-dir](https://github.com/sindresorhus/pkg-dir) - Find the root directory of an npm package
- [resolve-from](https://github.com/sindresorhus/resolve-from) - Resolve the path of a module like `require.resolve()` but from a given path

View File

@@ -0,0 +1,92 @@
export interface Options {
/**
The current working directory.
@default process.cwd()
*/
readonly cwd?: URL | string;
/**
The type of path to match.
@default 'file'
*/
readonly type?: 'file' | 'directory';
/**
Allow symbolic links to match if they point to the requested path type.
@default true
*/
readonly allowSymlinks?: boolean;
}
export interface AsyncOptions extends Options {
/**
The number of concurrently pending promises.
Minimum: `1`
@default Infinity
*/
readonly concurrency?: number;
/**
Preserve `paths` order when searching.
Disable this to improve performance if you don't care about the order.
@default true
*/
readonly preserveOrder?: boolean;
}
/**
Get the first path that exists on disk of multiple paths.
@param paths - The paths to check.
@returns The first path that exists or `undefined` if none exists.
@example
```
import {locatePath} from 'locate-path';
const files = [
'unicorn.png',
'rainbow.png', // Only this one actually exists on disk
'pony.png'
];
console(await locatePath(files));
//=> 'rainbow'
```
*/
export function locatePath(
paths: Iterable<string>,
options?: AsyncOptions
): Promise<string | undefined>;
/**
Synchronously get the first path that exists on disk of multiple paths.
@param paths - The paths to check.
@returns The first path that exists or `undefined` if none exists.
@example
```
import {locatePathSync} from 'locate-path';
const files = [
'unicorn.png',
'rainbow.png', // Only this one actually exists on disk
'pony.png'
];
console(locatePathSync(files));
//=> 'rainbow'
```
*/
export function locatePathSync(
paths: Iterable<string>,
options?: Options
): string | undefined;

View File

@@ -0,0 +1,77 @@
import process from 'node:process';
import path from 'node:path';
import fs, {promises as fsPromises} from 'node:fs';
import {fileURLToPath} from 'node:url';
import pLocate from 'p-locate';
const typeMappings = {
directory: 'isDirectory',
file: 'isFile',
};
function checkType(type) {
if (Object.hasOwnProperty.call(typeMappings, type)) {
return;
}
throw new Error(`Invalid type specified: ${type}`);
}
const matchType = (type, stat) => stat[typeMappings[type]]();
const toPath = urlOrPath => urlOrPath instanceof URL ? fileURLToPath(urlOrPath) : urlOrPath;
export async function locatePath(
paths,
{
cwd = process.cwd(),
type = 'file',
allowSymlinks = true,
concurrency,
preserveOrder,
} = {},
) {
checkType(type);
cwd = toPath(cwd);
const statFunction = allowSymlinks ? fsPromises.stat : fsPromises.lstat;
return pLocate(paths, async path_ => {
try {
const stat = await statFunction(path.resolve(cwd, path_));
return matchType(type, stat);
} catch {
return false;
}
}, {concurrency, preserveOrder});
}
export function locatePathSync(
paths,
{
cwd = process.cwd(),
type = 'file',
allowSymlinks = true,
} = {},
) {
checkType(type);
cwd = toPath(cwd);
const statFunction = allowSymlinks ? fs.statSync : fs.lstatSync;
for (const path_ of paths) {
try {
const stat = statFunction(path.resolve(cwd, path_), {
throwIfNoEntry: false,
});
if (!stat) {
continue;
}
if (matchType(type, stat)) {
return path_;
}
} catch {}
}
}

View File

@@ -0,0 +1,9 @@
MIT License
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,48 @@
{
"name": "locate-path",
"version": "7.2.0",
"description": "Get the first path that exists on disk of multiple paths",
"license": "MIT",
"repository": "sindresorhus/locate-path",
"funding": "https://github.com/sponsors/sindresorhus",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "https://sindresorhus.com"
},
"type": "module",
"exports": "./index.js",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"scripts": {
"test": "xo && ava && tsd"
},
"files": [
"index.js",
"index.d.ts"
],
"keywords": [
"locate",
"path",
"paths",
"file",
"files",
"exists",
"find",
"finder",
"search",
"searcher",
"array",
"iterable",
"iterator"
],
"dependencies": {
"p-locate": "^6.0.0"
},
"devDependencies": {
"ava": "^3.15.0",
"tsd": "^0.17.0",
"xo": "^0.44.0"
}
}

View File

@@ -0,0 +1,123 @@
# locate-path
> Get the first path that exists on disk of multiple paths
## Install
```
$ npm install locate-path
```
## Usage
Here we find the first file that exists on disk, in array order.
```js
import {locatePath} from 'locate-path';
const files = [
'unicorn.png',
'rainbow.png', // Only this one actually exists on disk
'pony.png'
];
console(await locatePath(files));
//=> 'rainbow'
```
## API
### locatePath(paths, options?)
Returns a `Promise<string>` for the first path that exists or `undefined` if none exists.
#### paths
Type: `Iterable<string>`
The paths to check.
#### options
Type: `object`
##### concurrency
Type: `number`\
Default: `Infinity`\
Minimum: `1`
The number of concurrently pending promises.
##### preserveOrder
Type: `boolean`\
Default: `true`
Preserve `paths` order when searching.
Disable this to improve performance if you don't care about the order.
##### cwd
Type: `URL | string`\
Default: `process.cwd()`
The current working directory.
##### type
Type: `string`\
Default: `'file'`\
Values: `'file' | 'directory'`
The type of paths that can match.
##### allowSymlinks
Type: `boolean`\
Default: `true`
Allow symbolic links to match if they point to the chosen path type.
### locatePathSync(paths, options?)
Returns the first path that exists or `undefined` if none exists.
#### paths
Type: `Iterable<string>`
The paths to check.
#### options
Type: `object`
##### cwd
Same as above.
##### type
Same as above.
##### allowSymlinks
Same as above.
## Related
- [path-exists](https://github.com/sindresorhus/path-exists) - Check if a path exists
---
<div align="center">
<b>
<a href="https://tidelift.com/subscription/pkg/npm-locate-path?utm_source=npm-locate-path&utm_medium=referral&utm_campaign=readme">Get professional support for this package with a Tidelift subscription</a>
</b>
<br>
<sub>
Tidelift helps make open source sustainable for maintainers while giving companies<br>assurances about security, maintenance, and licensing for their dependencies.
</sub>
</div>

View File

@@ -0,0 +1,40 @@
/* eslint-disable @typescript-eslint/member-ordering */
export interface LimitFunction {
/**
The number of promises that are currently running.
*/
readonly activeCount: number;
/**
The number of promises that are waiting to run (i.e. their internal `fn` was not called yet).
*/
readonly pendingCount: number;
/**
Discard pending promises that are waiting to run.
This might be useful if you want to teardown the queue at the end of your program's lifecycle or discard any function calls referencing an intermediary state of your app.
Note: This does not cancel promises that are already running.
*/
clearQueue: () => void;
/**
@param fn - Promise-returning/async function.
@param arguments - Any arguments to pass through to `fn`. Support for passing arguments on to the `fn` is provided in order to be able to avoid creating unnecessary closures. You probably don't need this optimization unless you're pushing a lot of functions.
@returns The promise returned by calling `fn(...arguments)`.
*/
<Arguments extends unknown[], ReturnType>(
fn: (...arguments: Arguments) => PromiseLike<ReturnType> | ReturnType,
...arguments: Arguments
): Promise<ReturnType>;
}
/**
Run multiple promise-returning & async functions with limited concurrency.
@param concurrency - Concurrency limit. Minimum: `1`.
@returns A `limit` function.
*/
export default function pLimit(concurrency: number): LimitFunction;

View File

@@ -0,0 +1,68 @@
import Queue from 'yocto-queue';
export default function pLimit(concurrency) {
if (!((Number.isInteger(concurrency) || concurrency === Number.POSITIVE_INFINITY) && concurrency > 0)) {
throw new TypeError('Expected `concurrency` to be a number from 1 and up');
}
const queue = new Queue();
let activeCount = 0;
const next = () => {
activeCount--;
if (queue.size > 0) {
queue.dequeue()();
}
};
const run = async (fn, resolve, args) => {
activeCount++;
const result = (async () => fn(...args))();
resolve(result);
try {
await result;
} catch {}
next();
};
const enqueue = (fn, resolve, args) => {
queue.enqueue(run.bind(undefined, fn, resolve, args));
(async () => {
// This function needs to wait until the next microtask before comparing
// `activeCount` to `concurrency`, because `activeCount` is updated asynchronously
// when the run function is dequeued and called. The comparison in the if-statement
// needs to happen asynchronously as well to get an up-to-date value for `activeCount`.
await Promise.resolve();
if (activeCount < concurrency && queue.size > 0) {
queue.dequeue()();
}
})();
};
const generator = (fn, ...args) => new Promise(resolve => {
enqueue(fn, resolve, args);
});
Object.defineProperties(generator, {
activeCount: {
get: () => activeCount,
},
pendingCount: {
get: () => queue.size,
},
clearQueue: {
value: () => {
queue.clear();
},
},
});
return generator;
}

View File

@@ -0,0 +1,9 @@
MIT License
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,54 @@
{
"name": "p-limit",
"version": "4.0.0",
"description": "Run multiple promise-returning & async functions with limited concurrency",
"license": "MIT",
"repository": "sindresorhus/p-limit",
"funding": "https://github.com/sponsors/sindresorhus",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "https://sindresorhus.com"
},
"type": "module",
"exports": "./index.js",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"scripts": {
"test": "xo && ava && tsd"
},
"files": [
"index.js",
"index.d.ts"
],
"keywords": [
"promise",
"limit",
"limited",
"concurrency",
"throttle",
"throat",
"rate",
"batch",
"ratelimit",
"task",
"queue",
"async",
"await",
"promises",
"bluebird"
],
"dependencies": {
"yocto-queue": "^1.0.0"
},
"devDependencies": {
"ava": "^3.15.0",
"delay": "^5.0.0",
"in-range": "^3.0.0",
"random-int": "^3.0.0",
"time-span": "^5.0.0",
"tsd": "^0.17.0",
"xo": "^0.44.0"
}
}

View File

@@ -0,0 +1,99 @@
# p-limit
> Run multiple promise-returning & async functions with limited concurrency
## Install
```
$ npm install p-limit
```
## Usage
```js
import pLimit from 'p-limit';
const limit = pLimit(1);
const input = [
limit(() => fetchSomething('foo')),
limit(() => fetchSomething('bar')),
limit(() => doSomething())
];
// Only one promise is run at once
const result = await Promise.all(input);
console.log(result);
```
## API
### pLimit(concurrency)
Returns a `limit` function.
#### concurrency
Type: `number`\
Minimum: `1`\
Default: `Infinity`
Concurrency limit.
### limit(fn, ...args)
Returns the promise returned by calling `fn(...args)`.
#### fn
Type: `Function`
Promise-returning/async function.
#### args
Any arguments to pass through to `fn`.
Support for passing arguments on to the `fn` is provided in order to be able to avoid creating unnecessary closures. You probably don't need this optimization unless you're pushing a *lot* of functions.
### limit.activeCount
The number of promises that are currently running.
### limit.pendingCount
The number of promises that are waiting to run (i.e. their internal `fn` was not called yet).
### limit.clearQueue()
Discard pending promises that are waiting to run.
This might be useful if you want to teardown the queue at the end of your program's lifecycle or discard any function calls referencing an intermediary state of your app.
Note: This does not cancel promises that are already running.
## FAQ
### How is this different from the [`p-queue`](https://github.com/sindresorhus/p-queue) package?
This package is only about limiting the number of concurrent executions, while `p-queue` is a fully featured queue implementation with lots of different options, introspection, and ability to pause the queue.
## Related
- [p-queue](https://github.com/sindresorhus/p-queue) - Promise queue with concurrency control
- [p-throttle](https://github.com/sindresorhus/p-throttle) - Throttle promise-returning & async functions
- [p-debounce](https://github.com/sindresorhus/p-debounce) - Debounce promise-returning & async functions
- [p-all](https://github.com/sindresorhus/p-all) - Run promise-returning & async functions concurrently with optional limited concurrency
- [More…](https://github.com/sindresorhus/promise-fun)
---
<div align="center">
<b>
<a href="https://tidelift.com/subscription/pkg/npm-p-limit?utm_source=npm-p-limit&utm_medium=referral&utm_campaign=readme">Get professional support for this package with a Tidelift subscription</a>
</b>
<br>
<sub>
Tidelift helps make open source sustainable for maintainers while giving companies<br>assurances about security, maintenance, and licensing for their dependencies.
</sub>
</div>

View File

@@ -0,0 +1,49 @@
export interface Options {
/**
The number of concurrently pending promises returned by `tester`.
Minimum: `1`
@default Infinity
*/
readonly concurrency?: number;
/**
Preserve `input` order when searching.
Disable this to improve performance if you don't care about the order.
@default true
*/
readonly preserveOrder?: boolean;
}
/**
Get the first fulfilled promise that satisfies the provided testing function.
@param input - An iterable of promises/values to test.
@param tester - This function will receive resolved values from `input` and is expected to return a `Promise<boolean>` or `boolean`.
@returns A `Promise` that is fulfilled when `tester` resolves to `true` or the iterable is done, or rejects if any of the promises reject. The fulfilled value is the current iterable value or `undefined` if `tester` never resolved to `true`.
@example
```
import {pathExists} from 'path-exists';
import pLocate from 'p-locate';
const files = [
'unicorn.png',
'rainbow.png', // Only this one actually exists on disk
'pony.png'
];
const foundPath = await pLocate(files, file => pathExists(file));
console.log(foundPath);
//=> 'rainbow'
```
*/
export default function pLocate<ValueType>(
input: Iterable<PromiseLike<ValueType> | ValueType>,
tester: (element: ValueType) => PromiseLike<boolean> | boolean,
options?: Options
): Promise<ValueType | undefined>;

View File

@@ -0,0 +1,48 @@
import pLimit from 'p-limit';
class EndError extends Error {
constructor(value) {
super();
this.value = value;
}
}
// The input can also be a promise, so we await it.
const testElement = async (element, tester) => tester(await element);
// The input can also be a promise, so we `Promise.all()` them both.
const finder = async element => {
const values = await Promise.all(element);
if (values[1] === true) {
throw new EndError(values[0]);
}
return false;
};
export default async function pLocate(
iterable,
tester,
{
concurrency = Number.POSITIVE_INFINITY,
preserveOrder = true,
} = {},
) {
const limit = pLimit(concurrency);
// Start all the promises concurrently with optional limit.
const items = [...iterable].map(element => [element, limit(testElement, element, tester)]);
// Check the promises either serially or concurrently.
const checkLimit = pLimit(preserveOrder ? 1 : Number.POSITIVE_INFINITY);
try {
await Promise.all(items.map(element => checkLimit(finder, element)));
} catch (error) {
if (error instanceof EndError) {
return error.value;
}
throw error;
}
}

View File

@@ -0,0 +1,9 @@
MIT License
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,56 @@
{
"name": "p-locate",
"version": "6.0.0",
"description": "Get the first fulfilled promise that satisfies the provided testing function",
"license": "MIT",
"repository": "sindresorhus/p-locate",
"funding": "https://github.com/sponsors/sindresorhus",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "https://sindresorhus.com"
},
"type": "module",
"exports": "./index.js",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"scripts": {
"test": "xo && ava && tsd"
},
"files": [
"index.js",
"index.d.ts"
],
"keywords": [
"promise",
"locate",
"find",
"finder",
"search",
"searcher",
"test",
"array",
"collection",
"iterable",
"iterator",
"race",
"fulfilled",
"fastest",
"async",
"await",
"promises",
"bluebird"
],
"dependencies": {
"p-limit": "^4.0.0"
},
"devDependencies": {
"ava": "^3.15.0",
"delay": "^5.0.0",
"in-range": "^3.0.0",
"time-span": "^5.0.0",
"tsd": "^0.17.0",
"xo": "^0.44.0"
}
}

View File

@@ -0,0 +1,91 @@
# p-locate
> Get the first fulfilled promise that satisfies the provided testing function
Think of it like an async version of [`Array#find`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/find).
## Install
```
$ npm install p-locate
```
## Usage
Here we find the first file that exists on disk, in array order.
```js
import {pathExists} from 'path-exists';
import pLocate from 'p-locate';
const files = [
'unicorn.png',
'rainbow.png', // Only this one actually exists on disk
'pony.png'
];
const foundPath = await pLocate(files, file => pathExists(file));
console.log(foundPath);
//=> 'rainbow'
```
*The above is just an example. Use [`locate-path`](https://github.com/sindresorhus/locate-path) if you need this.*
## API
### pLocate(input, tester, options?)
Returns a `Promise` that is fulfilled when `tester` resolves to `true` or the iterable is done, or rejects if any of the promises reject. The fulfilled value is the current iterable value or `undefined` if `tester` never resolved to `true`.
#### input
Type: `Iterable<Promise | unknown>`
An iterable of promises/values to test.
#### tester(element)
Type: `Function`
This function will receive resolved values from `input` and is expected to return a `Promise<boolean>` or `boolean`.
#### options
Type: `object`
##### concurrency
Type: `number`\
Default: `Infinity`\
Minimum: `1`
The number of concurrently pending promises returned by `tester`.
##### preserveOrder
Type: `boolean`\
Default: `true`
Preserve `input` order when searching.
Disable this to improve performance if you don't care about the order.
## Related
- [p-map](https://github.com/sindresorhus/p-map) - Map over promises concurrently
- [p-filter](https://github.com/sindresorhus/p-filter) - Filter promises concurrently
- [p-any](https://github.com/sindresorhus/p-any) - Wait for any promise to be fulfilled
- [More…](https://github.com/sindresorhus/promise-fun)
---
<div align="center">
<b>
<a href="https://tidelift.com/subscription/pkg/npm-p-locate?utm_source=npm-p-locate&utm_medium=referral&utm_campaign=readme">Get professional support for this package with a Tidelift subscription</a>
</b>
<br>
<sub>
Tidelift helps make open source sustainable for maintainers while giving companies<br>assurances about security, maintenance, and licensing for their dependencies.
</sub>
</div>

View File

@@ -0,0 +1,31 @@
/**
Check if a path exists.
@returns Whether the path exists.
@example
```
// foo.ts
import {pathExists} from 'path-exists';
console.log(await pathExists('foo.ts'));
//=> true
```
*/
export function pathExists(path: string): Promise<boolean>;
/**
Synchronously check if a path exists.
@returns Whether the path exists.
@example
```
// foo.ts
import {pathExistsSync} from 'path-exists';
console.log(pathExistsSync('foo.ts'));
//=> true
```
*/
export function pathExistsSync(path: string): boolean;

View File

@@ -0,0 +1,19 @@
import fs, {promises as fsPromises} from 'node:fs';
export async function pathExists(path) {
try {
await fsPromises.access(path);
return true;
} catch {
return false;
}
}
export function pathExistsSync(path) {
try {
fs.accessSync(path);
return true;
} catch {
return false;
}
}

View File

@@ -0,0 +1,9 @@
MIT License
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,41 @@
{
"name": "path-exists",
"version": "5.0.0",
"description": "Check if a path exists",
"license": "MIT",
"repository": "sindresorhus/path-exists",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "https://sindresorhus.com"
},
"type": "module",
"exports": "./index.js",
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"scripts": {
"test": "xo && ava && tsd"
},
"files": [
"index.js",
"index.d.ts"
],
"keywords": [
"path",
"exists",
"exist",
"file",
"filepath",
"fs",
"filesystem",
"file-system",
"access",
"stat"
],
"devDependencies": {
"ava": "^3.15.0",
"tsd": "^0.17.0",
"xo": "^0.44.0"
}
}

View File

@@ -0,0 +1,52 @@
# path-exists
> Check if a path exists
NOTE: `fs.existsSync` has been un-deprecated in Node.js since 6.8.0. If you only need to check synchronously, this module is not needed.
Never use this before handling a file though:
> In particular, checking if a file exists before opening it is an anti-pattern that leaves you vulnerable to race conditions: another process may remove the file between the calls to `fs.exists()` and `fs.open()`. Just open the file and handle the error when it's not there.
## Install
```
$ npm install path-exists
```
## Usage
```js
// foo.js
import {pathExists} from 'path-exists';
console.log(await pathExists('foo.js'));
//=> true
```
## API
### pathExists(path)
Returns a `Promise<boolean>` of whether the path exists.
### pathExistsSync(path)
Returns a `boolean` of whether the path exists.
## Related
- [path-exists-cli](https://github.com/sindresorhus/path-exists-cli) - CLI for this module
- [path-type](https://github.com/sindresorhus/path-type) - Check if a path exists and whether it's a file, directory, or symlink
---
<div align="center">
<b>
<a href="https://tidelift.com/subscription/pkg/npm-path-exists?utm_source=npm-path-exists&utm_medium=referral&utm_campaign=readme">Get professional support for this package with a Tidelift subscription</a>
</b>
<br>
<sub>
Tidelift helps make open source sustainable for maintainers while giving companies<br>assurances about security, maintenance, and licensing for their dependencies.
</sub>
</div>

View File

@@ -0,0 +1,75 @@
export default class Queue<ValueType> implements Iterable<ValueType> {
/**
The size of the queue.
*/
readonly size: number;
/**
Tiny queue data structure.
The instance is an [`Iterable`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols), which means you can iterate over the queue front to back with a “for…of” loop, or use spreading to convert the queue to an array. Don't do this unless you really need to though, since it's slow.
@example
```
import Queue from 'yocto-queue';
const queue = new Queue();
queue.enqueue('🦄');
queue.enqueue('🌈');
console.log(queue.size);
//=> 2
console.log(...queue);
//=> '🦄 🌈'
console.log(queue.dequeue());
//=> '🦄'
console.log(queue.dequeue());
//=> '🌈'
```
*/
constructor();
/**
The instance is an [`Iterable`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols), which means you can iterate over the queue front to back with a “for…of” loop. Using the iterator will not remove the items from the queue. If you want that, use `drain()` instead.
You can also use spreading to convert the queue to an array. Don't do this unless you really need to though, since it's slow.
*/
[Symbol.iterator](): IterableIterator<ValueType>;
/**
Returns an iterator that dequeues items as you consume it.
This allows you to empty the queue while processing its items.
If you want to not remove items as you consume it, use the `Queue` object as an iterator.
*/
drain(): IterableIterator<ValueType>;
/**
Add a value to the queue.
*/
enqueue(value: ValueType): void;
/**
Remove the next value in the queue.
@returns The removed value or `undefined` if the queue is empty.
*/
dequeue(): ValueType | undefined;
/**
Get the next value in the queue without removing it.
@returns The value or `undefined` if the queue is empty.
*/
peek(): ValueType | undefined;
/**
Clear the queue.
*/
clear(): void;
}

View File

@@ -0,0 +1,84 @@
/*
How it works:
`this.#head` is an instance of `Node` which keeps track of its current value and nests another instance of `Node` that keeps the value that comes after it. When a value is provided to `.enqueue()`, the code needs to iterate through `this.#head`, going deeper and deeper to find the last value. However, iterating through every single item is slow. This problem is solved by saving a reference to the last value as `this.#tail` so that it can reference it to add a new value.
*/
class Node {
value;
next;
constructor(value) {
this.value = value;
}
}
export default class Queue {
#head;
#tail;
#size;
constructor() {
this.clear();
}
enqueue(value) {
const node = new Node(value);
if (this.#head) {
this.#tail.next = node;
this.#tail = node;
} else {
this.#head = node;
this.#tail = node;
}
this.#size++;
}
dequeue() {
const current = this.#head;
if (!current) {
return;
}
this.#head = this.#head.next;
this.#size--;
return current.value;
}
peek() {
if (!this.#head) {
return;
}
return this.#head.value;
// TODO: Node.js 18.
// return this.#head?.value;
}
clear() {
this.#head = undefined;
this.#tail = undefined;
this.#size = 0;
}
get size() {
return this.#size;
}
* [Symbol.iterator]() {
let current = this.#head;
while (current) {
yield current.value;
current = current.next;
}
}
* drain() {
while (this.#head) {
yield this.dequeue();
}
}
}

View File

@@ -0,0 +1,9 @@
MIT License
Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@@ -0,0 +1,48 @@
{
"name": "yocto-queue",
"version": "1.2.1",
"description": "Tiny queue data structure",
"license": "MIT",
"repository": "sindresorhus/yocto-queue",
"funding": "https://github.com/sponsors/sindresorhus",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "https://sindresorhus.com"
},
"type": "module",
"exports": "./index.js",
"types": "./index.d.ts",
"sideEffects": false,
"engines": {
"node": ">=12.20"
},
"scripts": {
"//test": "xo && ava && tsd",
"test": "ava && tsd"
},
"files": [
"index.js",
"index.d.ts"
],
"keywords": [
"queue",
"data",
"structure",
"algorithm",
"queues",
"queuing",
"list",
"array",
"linkedlist",
"fifo",
"enqueue",
"dequeue",
"data-structure"
],
"devDependencies": {
"ava": "^3.15.0",
"tsd": "^0.17.0",
"xo": "^0.44.0"
}
}

View File

@@ -0,0 +1,80 @@
# yocto-queue [![](https://badgen.net/bundlephobia/minzip/yocto-queue)](https://bundlephobia.com/result?p=yocto-queue)
> Tiny queue data structure
You should use this package instead of an array if you do a lot of `Array#push()` and `Array#shift()` on large arrays, since `Array#shift()` has [linear time complexity](https://medium.com/@ariel.salem1989/an-easy-to-use-guide-to-big-o-time-complexity-5dcf4be8a444#:~:text=O(N)%E2%80%94Linear%20Time) *O(n)* while `Queue#dequeue()` has [constant time complexity](https://medium.com/@ariel.salem1989/an-easy-to-use-guide-to-big-o-time-complexity-5dcf4be8a444#:~:text=O(1)%20%E2%80%94%20Constant%20Time) *O(1)*. That makes a huge difference for large arrays.
> A [queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is an ordered list of elements where an element is inserted at the end of the queue and is removed from the front of the queue. A queue works based on the first-in, first-out ([FIFO](https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics))) principle.
## Install
```sh
npm install yocto-queue
```
## Usage
```js
import Queue from 'yocto-queue';
const queue = new Queue();
queue.enqueue('🦄');
queue.enqueue('🌈');
console.log(queue.size);
//=> 2
console.log(...queue);
//=> '🦄 🌈'
console.log(queue.dequeue());
//=> '🦄'
console.log(queue.dequeue());
//=> '🌈'
```
## API
### `queue = new Queue()`
The instance is an [`Iterable`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols), which means you can iterate over the queue front to back with a “for…of” loop. Using the iterator will not remove the items from the queue. If you want that, use [`drain()`](#drain) instead.
You can also use spreading to convert the queue to an array. Don't do this unless you really need to though, since it's slow.
#### `.enqueue(value)`
Add a value to the queue.
#### `.dequeue()`
Remove the next value in the queue.
Returns the removed value or `undefined` if the queue is empty.
#### `.peek()`
Get the next value in the queue without removing it.
Returns the value or `undefined` if the queue is empty.
#### `.drain()`
Returns an iterator that dequeues items as you consume it.
This allows you to empty the queue while processing its items.
If you want to not remove items as you consume it, use the `Queue` object as an iterator.
#### `.clear()`
Clear the queue.
#### `.size`
The size of the queue.
## Related
- [quick-lru](https://github.com/sindresorhus/quick-lru) - Simple “Least Recently Used” (LRU) cache

View File

@@ -0,0 +1,106 @@
{
"name": "@storybook/react-vite",
"version": "9.0.16",
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
"keywords": [
"storybook"
],
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-vite",
"bugs": {
"url": "https://github.com/storybookjs/storybook/issues"
},
"repository": {
"type": "git",
"url": "https://github.com/storybookjs/storybook.git",
"directory": "code/frameworks/react-vite"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"license": "MIT",
"exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./dist/index.js",
"import": "./dist/index.mjs",
"require": "./dist/index.js"
},
"./preset": {
"types": "./dist/preset.d.ts",
"require": "./dist/preset.js"
},
"./node": {
"types": "./dist/node/index.d.ts",
"node": "./dist/node/index.js",
"import": "./dist/node/index.mjs",
"require": "./dist/node/index.js"
},
"./package.json": "./package.json"
},
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
"typesVersions": {
"*": {
"*": [
"dist/index.d.ts"
],
"preset": [
"dist/preset.d.ts"
],
"node": [
"dist/node/index.d.ts"
]
}
},
"files": [
"dist/**/*",
"template/**/*",
"README.md",
"*.js",
"*.d.ts",
"!src/**/*"
],
"scripts": {
"check": "jiti ../../../scripts/prepare/check.ts",
"prep": "jiti ../../../scripts/prepare/bundle.ts"
},
"dependencies": {
"@joshwooding/vite-plugin-react-docgen-typescript": "0.6.1",
"@rollup/pluginutils": "^5.0.2",
"@storybook/builder-vite": "9.0.16",
"@storybook/react": "9.0.16",
"find-up": "^7.0.0",
"magic-string": "^0.30.0",
"react-docgen": "^8.0.0",
"resolve": "^1.22.8",
"tsconfig-paths": "^4.2.0"
},
"devDependencies": {
"@types/node": "^22.0.0",
"typescript": "^5.8.3",
"vite": "^6.2.5"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
"storybook": "^9.0.16",
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
},
"engines": {
"node": ">=20.0.0"
},
"publishConfig": {
"access": "public"
},
"bundler": {
"entries": [
"./src/index.ts",
"./src/preset.ts",
"./src/node/index.ts"
],
"platform": "node"
},
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
}

View File

@@ -0,0 +1 @@
module.exports = require('./dist/preset');

View File

@@ -0,0 +1,5 @@
{
"rules": {
"import/extensions": "off"
}
}

View File

@@ -0,0 +1,39 @@
import React from 'react';
import PropTypes from 'prop-types';
import './button.css';
/** Primary UI component for user interaction */
export const Button = ({
primary = false,
backgroundColor = null,
size = 'medium',
label,
...props
}) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={backgroundColor && { backgroundColor }}
{...props}
>
{label}
</button>
);
};
Button.propTypes = {
/** Is this the principal call to action on the page? */
primary: PropTypes.bool,
/** What background color to use */
backgroundColor: PropTypes.string,
/** How large should the button be? */
size: PropTypes.oneOf(['small', 'medium', 'large']),
/** Button contents */
label: PropTypes.string.isRequired,
/** Optional click handler */
onClick: PropTypes.func,
};

View File

@@ -0,0 +1,49 @@
import { fn } from 'storybook/test';
import { Button } from './Button';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
export default {
title: 'Example/Button',
component: Button,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
// More on argTypes: https://storybook.js.org/docs/api/argtypes
argTypes: {
backgroundColor: { control: 'color' },
},
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
args: { onClick: fn() },
};
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary = {
args: {
primary: true,
label: 'Button',
},
};
export const Secondary = {
args: {
label: 'Button',
},
};
export const Large = {
args: {
size: 'large',
label: 'Button',
},
};
export const Small = {
args: {
size: 'small',
label: 'Button',
},
};

View File

@@ -0,0 +1,56 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from './Button';
import './header.css';
export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
<header>
<div className="storybook-header">
<div>
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
fill="#FFF"
/>
<path
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
fill="#555AB9"
/>
<path
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
fill="#91BAF8"
/>
</g>
</svg>
<h1>Acme</h1>
</div>
<div>
{user ? (
<>
<span className="welcome">
Welcome, <b>{user.name}</b>!
</span>
<Button size="small" onClick={onLogout} label="Log out" />
</>
) : (
<>
<Button size="small" onClick={onLogin} label="Log in" />
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
</>
)}
</div>
</div>
</header>
);
Header.propTypes = {
user: PropTypes.shape({
name: PropTypes.string.isRequired,
}),
onLogin: PropTypes.func.isRequired,
onLogout: PropTypes.func.isRequired,
onCreateAccount: PropTypes.func.isRequired,
};

View File

@@ -0,0 +1,29 @@
import { fn } from 'storybook/test';
import { Header } from './Header';
export default {
title: 'Example/Header',
component: Header,
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'fullscreen',
},
args: {
onLogin: fn(),
onLogout: fn(),
onCreateAccount: fn(),
},
};
export const LoggedIn = {
args: {
user: {
name: 'Jane Doe',
},
},
};
export const LoggedOut = {};

View File

@@ -0,0 +1,69 @@
import React from 'react';
import { Header } from './Header';
import './page.css';
export const Page = () => {
const [user, setUser] = React.useState();
return (
<article>
<Header
user={user}
onLogin={() => setUser({ name: 'Jane Doe' })}
onLogout={() => setUser(undefined)}
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
/>
<section className="storybook-page">
<h2>Pages in Storybook</h2>
<p>
We recommend building UIs with a{' '}
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
<strong>component-driven</strong>
</a>{' '}
process starting with atomic components and ending with pages.
</p>
<p>
Render pages with mock data. This makes it easy to build and review page states without
needing to navigate to them in your app. Here are some handy patterns for managing page
data in Storybook:
</p>
<ul>
<li>
Use a higher-level connected component. Storybook helps you compose such data from the
"args" of child component stories
</li>
<li>
Assemble data in the page component from your services. You can mock these services out
using Storybook.
</li>
</ul>
<p>
Get a guided tutorial on component-driven development at{' '}
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
Storybook tutorials
</a>
. Read more in the{' '}
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
docs
</a>
.
</p>
<div className="tip-wrapper">
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
id="a"
fill="#999"
/>
</g>
</svg>
Viewports addon in the toolbar
</div>
</section>
</article>
);
};

View File

@@ -0,0 +1,28 @@
import { expect, userEvent, within } from 'storybook/test';
import { Page } from './Page';
export default {
title: 'Example/Page',
component: Page,
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'fullscreen',
},
};
export const LoggedOut = {};
// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
export const LoggedIn = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const loginButton = canvas.getByRole('button', { name: /Log in/i });
await expect(loginButton).toBeInTheDocument();
await userEvent.click(loginButton);
await expect(loginButton).not.toBeInTheDocument();
const logoutButton = canvas.getByRole('button', { name: /Log out/i });
await expect(logoutButton).toBeInTheDocument();
},
};

View File

@@ -0,0 +1,54 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { Button } from './Button';
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
const meta = {
title: 'Example/Button',
component: Button,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
// More on argTypes: https://storybook.js.org/docs/api/argtypes
argTypes: {
backgroundColor: { control: 'color' },
},
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
args: { onClick: fn() },
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
args: {
primary: true,
label: 'Button',
},
};
export const Secondary: Story = {
args: {
label: 'Button',
},
};
export const Large: Story = {
args: {
size: 'large',
label: 'Button',
},
};
export const Small: Story = {
args: {
size: 'small',
label: 'Button',
},
};

View File

@@ -0,0 +1,37 @@
import React from 'react';
import './button.css';
export interface ButtonProps {
/** Is this the principal call to action on the page? */
primary?: boolean;
/** What background color to use */
backgroundColor?: string;
/** How large should the button be? */
size?: 'small' | 'medium' | 'large';
/** Button contents */
label: string;
/** Optional click handler */
onClick?: () => void;
}
/** Primary UI component for user interaction */
export const Button = ({
primary = false,
size = 'medium',
backgroundColor,
label,
...props
}: ButtonProps) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={{ backgroundColor }}
{...props}
>
{label}
</button>
);
};

View File

@@ -0,0 +1,34 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { Header } from './Header';
const meta = {
title: 'Example/Header',
component: Header,
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
tags: ['autodocs'],
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'fullscreen',
},
args: {
onLogin: fn(),
onLogout: fn(),
onCreateAccount: fn(),
},
} satisfies Meta<typeof Header>;
export default meta;
type Story = StoryObj<typeof meta>;
export const LoggedIn: Story = {
args: {
user: {
name: 'Jane Doe',
},
},
};
export const LoggedOut: Story = {};

View File

@@ -0,0 +1,56 @@
import React from 'react';
import { Button } from './Button';
import './header.css';
type User = {
name: string;
};
export interface HeaderProps {
user?: User;
onLogin?: () => void;
onLogout?: () => void;
onCreateAccount?: () => void;
}
export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
<header>
<div className="storybook-header">
<div>
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
fill="#FFF"
/>
<path
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
fill="#555AB9"
/>
<path
d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
fill="#91BAF8"
/>
</g>
</svg>
<h1>Acme</h1>
</div>
<div>
{user ? (
<>
<span className="welcome">
Welcome, <b>{user.name}</b>!
</span>
<Button size="small" onClick={onLogout} label="Log out" />
</>
) : (
<>
<Button size="small" onClick={onLogin} label="Log in" />
<Button primary size="small" onClick={onCreateAccount} label="Sign up" />
</>
)}
</div>
</div>
</header>
);

View File

@@ -0,0 +1,33 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { expect, userEvent, within } from 'storybook/test';
import { Page } from './Page';
const meta = {
title: 'Example/Page',
component: Page,
parameters: {
// More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
layout: 'fullscreen',
},
} satisfies Meta<typeof Page>;
export default meta;
type Story = StoryObj<typeof meta>;
export const LoggedOut: Story = {};
// More on component testing: https://storybook.js.org/docs/writing-tests/interaction-testing
export const LoggedIn: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
const loginButton = canvas.getByRole('button', { name: /Log in/i });
await expect(loginButton).toBeInTheDocument();
await userEvent.click(loginButton);
await expect(loginButton).not.toBeInTheDocument();
const logoutButton = canvas.getByRole('button', { name: /Log out/i });
await expect(logoutButton).toBeInTheDocument();
},
};

View File

@@ -0,0 +1,73 @@
import React from 'react';
import { Header } from './Header';
import './page.css';
type User = {
name: string;
};
export const Page: React.FC = () => {
const [user, setUser] = React.useState<User>();
return (
<article>
<Header
user={user}
onLogin={() => setUser({ name: 'Jane Doe' })}
onLogout={() => setUser(undefined)}
onCreateAccount={() => setUser({ name: 'Jane Doe' })}
/>
<section className="storybook-page">
<h2>Pages in Storybook</h2>
<p>
We recommend building UIs with a{' '}
<a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
<strong>component-driven</strong>
</a>{' '}
process starting with atomic components and ending with pages.
</p>
<p>
Render pages with mock data. This makes it easy to build and review page states without
needing to navigate to them in your app. Here are some handy patterns for managing page
data in Storybook:
</p>
<ul>
<li>
Use a higher-level connected component. Storybook helps you compose such data from the
"args" of child component stories
</li>
<li>
Assemble data in the page component from your services. You can mock these services out
using Storybook.
</li>
</ul>
<p>
Get a guided tutorial on component-driven development at{' '}
<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
Storybook tutorials
</a>
. Read more in the{' '}
<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
docs
</a>
.
</p>
<div className="tip-wrapper">
<span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fillRule="evenodd">
<path
d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
id="a"
fill="#999"
/>
</g>
</svg>
Viewports addon in the toolbar
</div>
</section>
</article>
);
};