react-virtuoso 0.0.0-development

package/dist/react-urx/index.d.ts

@@ -0,0 +1,111 @@
+/**
+ * `@virtuoso.dev/react-urx` exports the [[systemToComponent]] function.
+ * It wraps urx systems in to UI **logic provider components**,
+ * mapping the system input and output streams to the component input / output points.
+ *
+ * ### Simple System wrapped as React Component
+ *
+ * ```tsx
+ * const sys = system(() => {
+ *   const foo = statefulStream(42)
+ *   return { foo }
+ * })
+ *
+ * const { Component: MyComponent, useEmitterValue } = systemToComponent(sys, {
+ *   required: { fooProp: 'foo' },
+ * })
+ *
+ * const Child = () => {
+ *   const foo = useEmitterValue('foo')
+ *   return <div>{foo}</div>
+ * }
+ *
+ * const App = () => {
+ *   return <Comp fooProp={42}><Child /><Comp>
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+import * as u from '../urx';
+import type { Emitter, Publisher, AnySystemSpec, SR, Stream } from '../urx';
+/** @internal */
+export type Observable<T> = Emitter<T> | Publisher<T>;
+/**
+ * Describes the mapping between the system streams and the component properties.
+ * Each property uses the keys as the names of the properties and the values as the corresponding stream names.
+ * @typeParam SS the type of the system.
+ */
+export interface SystemPropsMap<SS extends AnySystemSpec, K = keyof SR<SS>, D = {
+    [key: string]: K;
+}> {
+    /**
+     * Specifies the required component properties.
+     */
+    required?: D;
+    /**
+     * Specifies the optional component properties.
+     */
+    optional?: D;
+    /**
+     * Specifies the component methods, if any. Streams are converted to methods with a single argument.
+     * When invoked, the method publishes the value of the argument to the specified stream.
+     */
+    methods?: D;
+    /**
+     * Specifies the component "event" properties, if any.
+     * Event properties accept callback functions which get executed when the stream emits a new value.
+     */
+    events?: D;
+}
+/** @internal */
+export type PropsFromPropMap<E extends AnySystemSpec, M extends SystemPropsMap<E>> = {
+    [K in Extract<keyof M['required'], string>]: M['required'][K] extends string ? SR<E>[M['required'][K]] extends Observable<infer R> ? R : never : never;
+} & {
+    [K in Extract<keyof M['optional'], string>]?: M['optional'][K] extends string ? SR<E>[M['optional'][K]] extends Observable<infer R> ? R : never : never;
+} & {
+    [K in Extract<keyof M['events'], string>]?: M['events'][K] extends string ? SR<E>[M['events'][K]] extends Observable<infer R> ? (value: R) => void : never : never;
+};
+/** @internal */
+export type MethodsFromPropMap<E extends AnySystemSpec, M extends SystemPropsMap<E>> = {
+    [K in Extract<keyof M['methods'], string>]: M['methods'][K] extends string ? SR<E>[M['methods'][K]] extends Observable<infer R> ? (value: R) => void : never : never;
+};
+/**
+ * Used to correctly specify type refs for system components
+ *
+ * ```tsx
+ * const s = system(() => { return { a: statefulStream(0) } })
+ * const { Component } = systemToComponent(s)
+ *
+ * const App = () => {
+ *  const ref = useRef<RefHandle<typeof Component>>()
+ *  return <Component ref={ref} />
+ * }
+ * ```
+ *
+ * @typeParam T the type of the component
+ */
+export type RefHandle<T> = T extends React.ForwardRefExoticComponent<React.RefAttributes<infer Handle>> ? Handle : never;
+/**
+ * Converts a system spec to React component by mapping the system streams to component properties, events and methods. Returns hooks for querying and modifying
+ * the system streams from the component's child components.
+ * @param systemSpec The return value from a [[system]] call.
+ * @param map The streams to props / events / methods mapping Check [[SystemPropsMap]] for more details.
+ * @param Root The optional React component to render. By default, the resulting component renders nothing, acting as a logical wrapper for its children.
+ * @returns an object containing the following:
+ *  - `Component`: the React component.
+ *  - `useEmitterValue`: a hook that lets child components use values emitted from the specified output stream.
+ *  - `useEmitter`: a hook that calls the provided callback whenever the specified stream emits a value.
+ *  - `usePublisher`: a hook which lets child components publish values to the specified stream.
+ *  <hr />
+ */
+export declare function systemToComponent<SS extends AnySystemSpec, M extends SystemPropsMap<SS>, S extends SR<SS>, R>(systemSpec: SS, map: M, Root?: R): {
+    Component: React.ForwardRefExoticComponent<React.PropsWithoutRef<{ [K in Extract<keyof M["required"], string>]: M["required"][K] extends string ? ReturnType<SS["constructor"]>[M["required"][K]] extends Observable<infer R_1> ? R_1 : never : never; } & { [K_1 in Extract<keyof M["optional"], string>]?: (M["optional"][K_1] extends string ? ReturnType<SS["constructor"]>[M["optional"][K_1]] extends Observable<infer R_2> ? R_2 : never : never) | undefined; } & { [K_2 in Extract<keyof M["events"], string>]?: (M["events"][K_2] extends string ? ReturnType<SS["constructor"]>[M["events"][K_2]] extends Observable<infer R_3> ? (value: R_3) => void : never : never) | undefined; } & (R extends React.ComponentType<infer RP> ? RP : {
+        children?: React.ReactNode;
+    })> & React.RefAttributes<MethodsFromPropMap<SS, M>>>;
+    usePublisher: <K_3 extends keyof S>(key: K_3) => (value: S[K_3] extends u.Stream<infer R_4> ? R_4 : never) => void;
+    useEmitterValue: <K_4 extends keyof S, V = S[K_4] extends u.StatefulStream<infer R_5> ? R_5 : never>(key: K_4) => V;
+    useEmitter: <K_5 extends keyof S, V_1 = S[K_5] extends u.Stream<infer R_6> ? R_6 : never>(key: K_5, callback: (value: V_1) => void) => void;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/urx/index.d.ts

@@ -0,0 +1,7 @@
+export * from './streams';
+export * from './transformers';
+export * from './pipe';
+export * from './actions';
+export * from './system';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -0,0 +1,107 @@
+{
+  "name": "react-virtuoso",
+  "author": "Petyo Ivanov",
+  "type": "module",
+  "sideEffects": false,
+  "version": "0.0.0-development",
+  "homepage": "https://virtuoso.dev/",
+  "license": "MIT",
+  "source": "src/index.tsx",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "keywords": [
+    "react",
+    "reactjs",
+    "virtual",
+    "endless",
+    "load more",
+    "list",
+    "scrolling",
+    "infinite",
+    "virtualized",
+    "grid",
+    "feed",
+    "chat"
+  ],
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=16 || >=17 || >= 18",
+    "react-dom": ">=16 || >=17 || >= 18"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
+    "@emotion/core": "^10.1.0",
+    "@emotion/styled": "^10.0.27",
+    "@faker-js/faker": "^7.6.0",
+    "@testing-library/react": "^13.4.0",
+    "@ladle/react": "^2.4.5",
+    "@microsoft/api-extractor": "^7.33.7",
+    "@playwright/test": "^1.29.1",
+    "@types/jsdom": "^16.2.3",
+    "@types/lodash": "^4.14.165",
+    "@types/react": "^18.0.5",
+    "@types/react-beautiful-dnd": "^13.0.0",
+    "@types/react-dom": "^18.0.1",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/react-table": "^7.7.10",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
+    "@vitejs/plugin-react": "^3.0.0",
+    "eslint": "^8.30.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^6.0.0",
+    "jsdom": "^20.0.3",
+    "lodash": "^4.17.21",
+    "playwright": "^1.29.1",
+    "prettier": "^2.2.1",
+    "react": "^18.0.0",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^5.2.0",
+    "react-table": "^7.7.0",
+    "semantic-release": "^19.0.5",
+    "terser": "^5.16.1",
+    "tslib": "^2.0.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.0",
+    "vitest": "^0.26.2"
+  },
+  "packageManager": "pnpm@7.21.0",
+  "resolutions": {
+    "@types/react": "^16.14.2"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "prettier": {
+    "printWidth": 140,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/petyosi/react-virtuoso.git"
+  },
+  "scripts": {
+    "build": "vite build && ./scripts/build-types.sh",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "e2e": "playwright test",
+    "lint": "eslint src test e2e --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit -p tsconfig.typecheck.json",
+    "dev": "ladle serve --viteConfig ladle.vite.config.ts",
+    "semantic-release": "semantic-release"
+  }
+}