@faasjs/react 0.0.5-beta.4 → 0.0.5-beta.6

package/README.md

@@ -10,7 +10,31 @@ React plugin for FaasJS.
 
 ## Install
 
-    npm install @faasjs/react react react-dom
+    npm install @faasjs/react
+
+## Usage
+
+1. Initialize [FaasReactClient](#faasreactclient)
+
+```ts
+import { FaasReactClient } from '@faasjs/react'
+
+const client = FaasReactClient({
+  domain: 'localhost:8080/api'
+})
+```
+2. Use [faas](#faas), [useFaas](#usefaas) or [FaasDataWrapper](#faasdatawrapper).
+
+## Usage with `@preact/signal-react`
+
+1. `npm i --save-dev @preact/signals-react-transform`
+2. Add `@preact/signals-react-transform` to babel config:
+```json
+{
+	"plugins": [["module:@preact/signals-react-transform"]]
+}
+```
+3. Add `import '@preact/signals-react/auto'` to your test files.
 
 ## Modules
 
@@ -47,6 +71,7 @@ React plugin for FaasJS.
 - [getClient](#getclient)
 - [signal](#signal)
 - [useFaas](#usefaas)
+- [useSignalState](#usesignalstate)
 
 ## Type Aliases
 
@@ -256,7 +281,9 @@ A data wrapper for react components
 
 `JSX.Element`
 
-```ts
+**`Example`**
+
+```tsx
 <FaasDataWrapper<{
   id: string
   title: string
@@ -285,6 +312,8 @@ Before use faas, you should initialize a FaasReactClient.
 
 [`FaasReactClientInstance`](#faasreactclientinstance)
 
+**`Example`**
+
 ```ts
 const client = FaasReactClient({
   domain: 'localhost:8080/api'
@@ -316,6 +345,8 @@ Request faas server
 
 `Promise`\<[`Response`](classes/Response.md)\<[`FaasData`](#faasdata)\<`PathOrData`\>\>\>
 
+**`Example`**
+
 ```ts
 faas<{ title: string }>('post/get', { id: 1 }).then(res => {
   console.log(res.data.title)
@@ -340,6 +371,8 @@ Get FaasReactClient instance
 
 [`FaasReactClientInstance`](#faasreactclientinstance)
 
+**`Example`**
+
 ```ts
 getClient()
 // or
@@ -407,9 +440,51 @@ Request faas server with React hook
 
 [`FaasDataInjection`](#faasdatainjection)\<[`FaasData`](#faasdata)\<`PathOrData`\>\>
 
-```ts
+**`Example`**
+
+```tsx
 function Post ({ id }) {
   const { data } = useFaas<{ title: string }>('post/get', { id })
   return <h1>{data.title}</h1>
 }
 ```
+
+___
+
+### useSignalState
+
+▸ **useSignalState**\<`T`\>(`initialValue`, `options?`): readonly [`T`, (`changes`: `SetStateAction`\<`T`\>) => `void`]
+
+Create a [signal](https://preactjs.com/guide/v10/signals) like useState.
+
+```tsx
+import { useSignalState, useSignalEffect } from '@faasjs/react'
+
+function App () {
+  const [count, setCount] = useSignalState(0, { debugName: 'count' })
+
+  useSignalEffect(() => console.log('count', count))
+
+  return <div>
+    <button onClick={() => setCount(count + 1)}>+</button>
+    <span>{count}</span>
+  </div>
+}
+```
+
+#### Type parameters
+
+| Name | Type |
+| :------ | :------ |
+| `T` | `any` |
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `initialValue` | `T` |
+| `options` | [`SignalOptions`](#signaloptions) |
+
+#### Returns
+
+readonly [`T`, (`changes`: `SetStateAction`\<`T`\>) => `void`]

package/dist/index.d.mts

@@ -5,7 +5,8 @@ export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/brows
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ReactElement, Component, SetStateAction } from 'react';
 import * as _preact_signals_core from '@preact/signals-core';
-export { batch, computed, effect, signal as originSignal, useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react';
+export { batch, computed, effect, signal as originSignal } from '@preact/signals-react';
+export { useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react/runtime';
 
 type FaasReactClientInstance = {
   id: string
@@ -78,6 +79,7 @@ type FaasReactClientOptions = {
  * @param props.options {Options} The options of client
  * @returns {FaasReactClientInstance}
  *
+ * @example
  * ```ts
  * const client = FaasReactClient({
  *   domain: 'localhost:8080/api'
@@ -90,6 +92,7 @@ declare function FaasReactClient({ domain, options, onError, }: FaasReactClientO
  * @param domain {string} empty string for default domain
  * @returns {FaasReactClientInstance}
  *
+ * @example
  * ```ts
  * getClient()
  * // or
@@ -104,6 +107,7 @@ declare function getClient(domain?: string): FaasReactClientInstance;
  * @param params {object} action params
  * @returns {Promise<Response<any>>}
  *
+ * @example
  * ```ts
  * faas<{ title: string }>('post/get', { id: 1 }).then(res => {
  *   console.log(res.data.title)
@@ -113,11 +117,13 @@ declare function getClient(domain?: string): FaasReactClientInstance;
 declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrData, params: FaasParams$1<PathOrData>): Promise<Response$1<FaasData$1<PathOrData>>>;
 /**
  * Request faas server with React hook
+ *
  * @param action {string} action name
  * @param defaultParams {object} initial action params
  * @returns {FaasDataInjection<any>}
  *
- * ```ts
+ * @example
+ * ```tsx
  * function Post ({ id }) {
  *   const { data } = useFaas<{ title: string }>('post/get', { id })
  *   return <h1>{data.title}</h1>
@@ -127,9 +133,11 @@ declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrDa
 declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathOrData, defaultParams: FaasParams$1<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<FaasData$1<PathOrData>>;
 /**
  * A data wrapper for react components
+ *
  * @returns {JSX.Element}
  *
- * ```ts
+ * @example
+ * ```tsx
  * <FaasDataWrapper<{
  *   id: string
  *   title: string

package/dist/index.d.ts

@@ -5,7 +5,8 @@ export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/brows
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, ReactElement, Component, SetStateAction } from 'react';
 import * as _preact_signals_core from '@preact/signals-core';
-export { batch, computed, effect, signal as originSignal, useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react';
+export { batch, computed, effect, signal as originSignal } from '@preact/signals-react';
+export { useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react/runtime';
 
 type FaasReactClientInstance = {
   id: string
@@ -78,6 +79,7 @@ type FaasReactClientOptions = {
  * @param props.options {Options} The options of client
  * @returns {FaasReactClientInstance}
  *
+ * @example
  * ```ts
  * const client = FaasReactClient({
  *   domain: 'localhost:8080/api'
@@ -90,6 +92,7 @@ declare function FaasReactClient({ domain, options, onError, }: FaasReactClientO
  * @param domain {string} empty string for default domain
  * @returns {FaasReactClientInstance}
  *
+ * @example
  * ```ts
  * getClient()
  * // or
@@ -104,6 +107,7 @@ declare function getClient(domain?: string): FaasReactClientInstance;
  * @param params {object} action params
  * @returns {Promise<Response<any>>}
  *
+ * @example
  * ```ts
  * faas<{ title: string }>('post/get', { id: 1 }).then(res => {
  *   console.log(res.data.title)
@@ -113,11 +117,13 @@ declare function getClient(domain?: string): FaasReactClientInstance;
 declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrData, params: FaasParams$1<PathOrData>): Promise<Response$1<FaasData$1<PathOrData>>>;
 /**
  * Request faas server with React hook
+ *
  * @param action {string} action name
  * @param defaultParams {object} initial action params
  * @returns {FaasDataInjection<any>}
  *
- * ```ts
+ * @example
+ * ```tsx
  * function Post ({ id }) {
  *   const { data } = useFaas<{ title: string }>('post/get', { id })
  *   return <h1>{data.title}</h1>
@@ -127,9 +133,11 @@ declare function faas<PathOrData extends FaasAction$1>(action: string | PathOrDa
 declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathOrData, defaultParams: FaasParams$1<PathOrData>, options?: useFaasOptions<PathOrData>): FaasDataInjection<FaasData$1<PathOrData>>;
 /**
  * A data wrapper for react components
+ *
  * @returns {JSX.Element}
  *
- * ```ts
+ * @example
+ * ```tsx
  * <FaasDataWrapper<{
  *   id: string
  *   title: string

package/dist/index.js

@@ -4,6 +4,7 @@ var react = require('react');
 var browser = require('@faasjs/browser');
 var jsxRuntime = require('react/jsx-runtime');
 var signalsReact = require('@preact/signals-react');
+var runtime = require('@preact/signals-react/runtime');
 
 // src/client.tsx
 var clients = {};
@@ -220,9 +221,9 @@ function signal(initialValue, options = {}) {
   return state;
 }
 function useSignalState(initialValue, options = {}) {
-  const state = signalsReact.useSignal(initialValue);
+  const state = runtime.useSignal(initialValue);
   if (options.debugName) {
-    signalsReact.useSignalEffect(() => console.log(options.debugName, state.value));
+    runtime.useSignalEffect(() => console.log(options.debugName, state.value));
   }
   return [
     state.value,
@@ -250,15 +251,15 @@ Object.defineProperty(exports, "originSignal", {
 });
 Object.defineProperty(exports, "originUseSignal", {
   enumerable: true,
-  get: function () { return signalsReact.useSignal; }
+  get: function () { return runtime.useSignal; }
 });
 Object.defineProperty(exports, "useComputed", {
   enumerable: true,
-  get: function () { return signalsReact.useComputed; }
+  get: function () { return runtime.useComputed; }
 });
 Object.defineProperty(exports, "useSignalEffect", {
   enumerable: true,
-  get: function () { return signalsReact.useSignalEffect; }
+  get: function () { return runtime.useSignalEffect; }
 });
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;

package/dist/index.mjs

@@ -1,8 +1,10 @@
 import { useState, useEffect, cloneElement, Component } from 'react';
 import { FaasBrowserClient } from '@faasjs/browser';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { signal as signal$1, effect, useSignal, useSignalEffect } from '@preact/signals-react';
-export { batch, computed, effect, signal as originSignal, useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react';
+import { signal as signal$1, effect } from '@preact/signals-react';
+export { batch, computed, effect, signal as originSignal } from '@preact/signals-react';
+import { useSignal, useSignalEffect } from '@preact/signals-react/runtime';
+export { useSignal as originUseSignal, useComputed, useSignalEffect } from '@preact/signals-react/runtime';
 
 // src/client.tsx
 var clients = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "0.0.5-beta.4",
+  "version": "0.0.5-beta.6",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "0.0.5-beta.4"
+    "@faasjs/browser": "0.0.5-beta.6"
   },
   "peerDependencies": {
     "react": "*",