Socket
Socket
Sign inDemoInstall

@stackflow/react

Package Overview
Dependencies
Maintainers
1
Versions
91
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stackflow/react - npm Package Compare versions

Comparing version 0.1.1-alpha.172 to 0.2.0

3

dist/activity/useActivity.d.ts

@@ -0,1 +1,4 @@

/**
* Get current activity state
*/
export declare const useActivity: () => import("@stackflow/core").Activity;

3

dist/activity/useActivityParams.d.ts
import { ActivityParams } from "@stackflow/core";
/**
* Get current activity parameters
*/
export declare function useActivityParams<T extends ActivityParams<T> = ActivityParams>(): T;

2

dist/core/CoreActionsContext.d.ts
/// <reference types="react" />
import { AggregateOutput, DispatchEvent } from "@stackflow/core";
export interface CoreActionsContextValue {
getState: () => AggregateOutput;
getStack: () => AggregateOutput;
dispatchEvent: DispatchEvent;
}
export declare const CoreActionsContext: import("react").Context<CoreActionsContextValue>;

2

dist/core/useCoreActions.d.ts
export declare const useCoreActions: () => {
dispatchEvent: import("@stackflow/core").DispatchEvent;
getState: () => import("@stackflow/core").AggregateOutput;
getStack: () => import("@stackflow/core").AggregateOutput;
push: ({ activityId, activityName, params, }: {

@@ -5,0 +5,0 @@ activityId: string;

1

dist/index.d.ts
export * from "./activity/ActivityComponentType";
export * from "./activity/useActivity";
export * from "./activity/useActivityParams";
export * from "./plugins/usePlugins";
export * from "./stack/useStack";

@@ -6,0 +5,0 @@ export * from "./stackflow";

533

dist/index.js

@@ -1,533 +0,2 @@

var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
stackflow: () => stackflow,
useActions: () => useActions,
useActivity: () => useActivity,
useActivityParams: () => useActivityParams,
usePlugins: () => usePlugins,
useStack: () => useStack
});
module.exports = __toCommonJS(src_exports);
// src/activity/useActivity.ts
var import_react2 = require("react");
// src/activity/ActivityContext.ts
var import_react = require("react");
var ActivityContext = (0, import_react.createContext)(null);
// src/activity/useActivity.ts
var useActivity = () => (0, import_react2.useContext)(ActivityContext);
// src/activity/useActivityParams.ts
var import_react3 = require("react");
function useActivityParams() {
return (0, import_react3.useContext)(ActivityContext).params;
}
// src/plugins/usePlugins.ts
var import_react5 = require("react");
// src/plugins/PluginsContext.tsx
var import_react4 = require("react");
var PluginsContext = (0, import_react4.createContext)(null);
// src/plugins/usePlugins.ts
function usePlugins() {
return (0, import_react5.useContext)(PluginsContext);
}
// src/stack/useStack.ts
var import_react7 = require("react");
// src/stack/StackContext.ts
var import_react6 = require("react");
var StackContext = (0, import_react6.createContext)(null);
// src/stack/useStack.ts
var useStack = () => (0, import_react7.useContext)(StackContext);
// src/stackflow.tsx
var import_react23 = __toESM(require("react"));
// src/context/ContextContext.ts
var import_react8 = require("react");
var ContextContext = (0, import_react8.createContext)({});
// src/context/ContextProvider.tsx
var import_react9 = __toESM(require("react"));
var ContextProvider = ({
children,
value
}) => /* @__PURE__ */ import_react9.default.createElement(ContextContext.Provider, {
value
}, children);
// src/context/useContext.ts
var import_react10 = __toESM(require("react"));
function useContext5() {
return import_react10.default.useContext(ContextContext);
}
// src/core/CoreProvider.tsx
var import_core2 = require("@stackflow/core");
var import_react15 = __toESM(require("react"));
var import_react_fast_compare = __toESM(require("react-fast-compare"));
// src/activity/ActivityProvider.tsx
var import_react11 = __toESM(require("react"));
var ActivityProvider = ({
children,
value
}) => /* @__PURE__ */ import_react11.default.createElement(ActivityContext.Provider, {
value
}, children);
// src/activity/makeActivityId.ts
var import_core = require("@stackflow/core");
function makeActivityId() {
return (0, import_core.id)();
}
// src/plugins/PluginsProvider.tsx
var import_react12 = __toESM(require("react"));
var PluginsProvider = ({
children,
value
}) => /* @__PURE__ */ import_react12.default.createElement(PluginsContext.Provider, {
value
}, children);
// src/core/CoreActionsContext.ts
var import_react13 = require("react");
var CoreActionsContext = (0, import_react13.createContext)(null);
// src/core/CoreStateContext.ts
var import_react14 = require("react");
var CoreStateContext = (0, import_react14.createContext)(null);
// src/core/CoreProvider.tsx
var SECOND = 1e3;
var INTERVAL_MS = SECOND / 60;
var CoreProvider = ({
transitionDuration,
initialActivity,
activities,
children
}) => {
const plugins = usePlugins();
const context = useContext5();
const initialEvents = (0, import_react15.useMemo)(() => {
const initialEventDate = new Date().getTime() - transitionDuration;
const initialPushedEventByPlugin = plugins.reduce((acc, plugin) => {
var _a, _b;
return (_b = (_a = plugin.initialPushedEvent) == null ? void 0 : _a.call(plugin)) != null ? _b : acc;
}, null);
const initialPushedEventByOption = initialActivity ? (0, import_core2.makeEvent)("Pushed", {
activityId: makeActivityId(),
activityName: initialActivity({ context }),
params: {},
eventDate: initialEventDate
}) : null;
if (initialPushedEventByPlugin && initialPushedEventByOption) {
console.warn(`Stackflow - Some plugin overrides an "initialActivity" option. The "initialActivity" option you set to "${initialPushedEventByOption.activityName}" in the "stackflow" is ignored.`);
}
const initialPushedEvent = initialPushedEventByPlugin != null ? initialPushedEventByPlugin : initialPushedEventByOption;
const activityRegisteredEvents = Object.keys(activities).map((activityName) => (0, import_core2.makeEvent)("ActivityRegistered", {
activityName,
eventDate: initialEventDate
}));
const events = [
(0, import_core2.makeEvent)("Initialized", {
transitionDuration,
eventDate: initialEventDate
}),
...activityRegisteredEvents
];
if (initialPushedEvent) {
events.push(initialPushedEvent);
}
return events;
}, []);
const initialState = (0, import_react15.useMemo)(() => (0, import_core2.aggregate)(initialEvents, new Date().getTime()), []);
const [state, setState] = (0, import_react15.useState)(() => initialState);
const eventsRef = (0, import_react15.useRef)(initialEvents);
const stateRef = (0, import_react15.useRef)(initialState);
const getState = (0, import_react15.useCallback)(() => stateRef.current, [stateRef]);
const dispatchEvent = (0, import_react15.useCallback)((name, parameters) => {
const newEvent = (0, import_core2.makeEvent)(name, parameters);
const events = [...eventsRef.current, newEvent];
eventsRef.current = events;
setState((0, import_core2.aggregate)(events, new Date().getTime()));
}, [eventsRef, setState]);
(0, import_react15.useEffect)(() => {
const interval = setInterval(() => {
const events = eventsRef.current;
const nextState = (0, import_core2.aggregate)(events, new Date().getTime());
if (!(0, import_react_fast_compare.default)(state, nextState)) {
setState(nextState);
stateRef.current = nextState;
}
if (nextState.globalTransitionState === "idle") {
clearInterval(interval);
}
}, INTERVAL_MS);
return () => {
clearInterval(interval);
};
}, [eventsRef, state, setState]);
return /* @__PURE__ */ import_react15.default.createElement(CoreStateContext.Provider, {
value: state
}, /* @__PURE__ */ import_react15.default.createElement(CoreActionsContext.Provider, {
value: (0, import_react15.useMemo)(() => ({
getState,
dispatchEvent
}), [getState, dispatchEvent])
}, children));
};
// src/core/useCoreActions.ts
var import_react16 = __toESM(require("react"));
var useCoreActions = () => {
const plugins = usePlugins();
const context = useContext5();
const { dispatchEvent, getState } = import_react16.default.useContext(CoreActionsContext);
const triggerPreEffectHook = (0, import_react16.useCallback)((preEffect) => {
let isPrevented = false;
const preventDefault = () => {
isPrevented = true;
};
plugins.forEach((plugin) => {
var _a, _b, _c;
switch (preEffect) {
case "PUSHED":
(_a = plugin.onBeforePush) == null ? void 0 : _a.call(plugin, {
actions: {
dispatchEvent,
getState,
preventDefault
}
});
break;
case "REPLACED":
(_b = plugin.onBeforeReplace) == null ? void 0 : _b.call(plugin, {
actions: {
dispatchEvent,
getState,
preventDefault
}
});
break;
case "POPPED":
(_c = plugin.onBeforePop) == null ? void 0 : _c.call(plugin, {
actions: {
dispatchEvent,
getState,
preventDefault
}
});
break;
default:
break;
}
});
return { isPrevented };
}, [plugins, dispatchEvent, getState, context]);
const push = (0, import_react16.useCallback)(({
activityId,
activityName,
params
}) => {
const { isPrevented } = triggerPreEffectHook("PUSHED");
if (!isPrevented) {
dispatchEvent("Pushed", {
activityId,
activityName,
params
});
}
}, [dispatchEvent]);
const replace = (0, import_react16.useCallback)(({
activityId,
activityName,
params
}) => {
const { isPrevented } = triggerPreEffectHook("REPLACED");
if (!isPrevented) {
dispatchEvent("Replaced", {
activityId,
activityName,
params
});
}
}, [dispatchEvent]);
const pop = (0, import_react16.useCallback)(() => {
const { isPrevented } = triggerPreEffectHook("POPPED");
if (!isPrevented) {
dispatchEvent("Popped", {});
}
}, [dispatchEvent]);
return (0, import_react16.useMemo)(() => ({
dispatchEvent,
getState,
push,
replace,
pop
}), [dispatchEvent, getState, push, replace, pop]);
};
// src/core/useCoreState.ts
var import_react17 = __toESM(require("react"));
var useCoreState = () => import_react17.default.useContext(CoreStateContext);
// src/EffectManager.tsx
var import_core3 = require("@stackflow/core");
var import_react18 = require("react");
var EffectManager = () => {
const plugins = usePlugins();
const coreState = useCoreState();
const coreActions = useCoreActions();
const onInit = (0, import_react18.useCallback)((actions) => {
plugins.forEach((plugin) => {
var _a;
(_a = plugin.onInit) == null ? void 0 : _a.call(plugin, actions);
});
}, []);
const triggerEffect = (0, import_react18.useCallback)(({ actions, effect }) => {
switch (effect._TAG) {
case "PUSHED": {
plugins.forEach((plugin) => {
var _a;
return (_a = plugin.onPushed) == null ? void 0 : _a.call(plugin, { actions, effect });
});
break;
}
case "POPPED": {
plugins.forEach((plugin) => {
var _a;
return (_a = plugin.onPopped) == null ? void 0 : _a.call(plugin, { actions, effect });
});
break;
}
case "REPLACED": {
plugins.forEach((plugin) => {
var _a;
return (_a = plugin.onReplaced) == null ? void 0 : _a.call(plugin, { actions, effect });
});
break;
}
case "%SOMETHING_CHANGED%": {
plugins.forEach((plugin) => {
var _a;
return (_a = plugin.onChanged) == null ? void 0 : _a.call(plugin, { actions, effect });
});
break;
}
default: {
break;
}
}
}, []);
(0, import_react18.useEffect)(() => {
onInit == null ? void 0 : onInit({
actions: {
dispatchEvent: coreActions.dispatchEvent,
getState: coreActions.getState
}
});
}, []);
const prevStateRef = (0, import_react18.useRef)(coreState);
(0, import_react18.useEffect)(() => {
const prevState = prevStateRef.current;
const effects = prevState ? (0, import_core3.produceEffects)(prevState, coreState) : [];
effects.forEach((effect) => {
triggerEffect({
actions: {
dispatchEvent: coreActions.dispatchEvent,
getState: coreActions.getState
},
effect
});
});
prevStateRef.current = __spreadValues({}, coreState);
}, [coreState]);
return null;
};
var EffectManager_default = EffectManager;
// src/MainRenderer.tsx
var import_react21 = __toESM(require("react"));
// src/PluginRenderer.tsx
var import_react20 = __toESM(require("react"));
// src/stack/StackProvider.tsx
var import_react19 = __toESM(require("react"));
var StackProvider = ({
children,
value
}) => /* @__PURE__ */ import_react19.default.createElement(StackContext.Provider, {
value
}, children);
// src/PluginRenderer.tsx
var PluginRenderer = ({
activities,
plugin
}) => {
const coreState = useCoreState();
const plugins = usePlugins();
return plugin.render({
stack: __spreadProps(__spreadValues({}, coreState), {
render(overrideStack) {
const stack = __spreadValues(__spreadValues({}, coreState), overrideStack);
return {
activities: stack.activities.map((activity) => __spreadProps(__spreadValues({}, activity), {
key: activity.id,
render(overrideActivity) {
const ActivityComponent = activities[activity.name];
let output = /* @__PURE__ */ import_react20.default.createElement(ActivityComponent, __spreadValues({}, activity.params));
plugins.forEach((p) => {
var _a, _b;
output = (_b = (_a = p.wrapActivity) == null ? void 0 : _a.call(p, {
activity: __spreadProps(__spreadValues({}, activity), {
render: () => output
})
})) != null ? _b : output;
});
return /* @__PURE__ */ import_react20.default.createElement(StackProvider, {
value: stack
}, /* @__PURE__ */ import_react20.default.createElement(ActivityProvider, {
key: activity.id,
value: __spreadValues(__spreadValues({}, activity), overrideActivity)
}, output));
}
}))
};
}
})
});
};
var PluginRenderer_default = PluginRenderer;
// src/MainRenderer.tsx
var MainRenderer = ({ activities }) => {
const coreState = useCoreState();
const plugins = usePlugins();
const renderPlugins = plugins.filter((plugin) => !!plugin.render);
(0, import_react21.useEffect)(() => {
if (renderPlugins.length === 0) {
console.warn(`Stackflow - There is no rendering plugin, so "<Stack />" doesn't render anything. If you want to render some UI, use "@stackflow/plugin-renderer-basic" or add another rendering plugin.`);
}
}, [renderPlugins]);
let output = /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, renderPlugins.map((plugin) => /* @__PURE__ */ import_react21.default.createElement(PluginRenderer_default, {
activities,
key: plugin.key,
plugin
})));
plugins.forEach((plugin) => {
var _a, _b;
output = (_b = (_a = plugin.wrapStack) == null ? void 0 : _a.call(plugin, {
stack: __spreadProps(__spreadValues({}, coreState), {
render() {
return output;
}
})
})) != null ? _b : output;
});
return output;
};
var MainRenderer_default = MainRenderer;
// src/useActions.ts
var import_react22 = require("react");
function useActions() {
const coreActions = useCoreActions();
return (0, import_react22.useMemo)(() => ({
push(activityName, params, options) {
coreActions.push({
activityId: makeActivityId(),
activityName,
params
});
},
replace(activityName, params, options) {
coreActions.replace({
activityId: makeActivityId(),
activityName,
params
});
},
pop(options) {
coreActions.pop();
}
}), [coreActions.push, coreActions.replace, coreActions.pop]);
}
// src/stackflow.tsx
function stackflow(options) {
return {
Stack(props) {
var _a;
const plugins = (0, import_react23.useMemo)(() => {
var _a2;
return ((_a2 = options.plugins) != null ? _a2 : []).reduce((plugins2, plugin) => [
...plugins2,
...Array.isArray(plugin) ? plugin : [plugin]
], []).map((plugin) => plugin({ context: props.context }));
}, []);
return /* @__PURE__ */ import_react23.default.createElement(ContextProvider, {
value: (_a = props.context) != null ? _a : {}
}, /* @__PURE__ */ import_react23.default.createElement(PluginsProvider, {
value: plugins
}, /* @__PURE__ */ import_react23.default.createElement(CoreProvider, {
activities: options.activities,
initialActivity: options.initialActivity,
transitionDuration: options.transitionDuration
}, /* @__PURE__ */ import_react23.default.createElement(MainRenderer_default, {
activities: options.activities
}), /* @__PURE__ */ import_react23.default.createElement(EffectManager_default, null))));
},
useFlow: useActions
};
}
var ht=Object.create;var O=Object.defineProperty,Rt=Object.defineProperties,Tt=Object.getOwnPropertyDescriptor,wt=Object.getOwnPropertyDescriptors,Dt=Object.getOwnPropertyNames,z=Object.getOwnPropertySymbols,Ot=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty,bt=Object.prototype.propertyIsEnumerable;var $=(t,e,o)=>e in t?O(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,v=(t,e)=>{for(var o in e||(e={}))J.call(e,o)&&$(t,o,e[o]);if(z)for(var o of z(e))bt.call(e,o)&&$(t,o,e[o]);return t},E=(t,e)=>Rt(t,wt(e));var It=(t,e)=>{for(var o in e)O(t,o,{get:e[o],enumerable:!0})},K=(t,e,o,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of Dt(e))!J.call(t,s)&&s!==o&&O(t,s,{get:()=>e[s],enumerable:!(a=Tt(e,s))||a.enumerable});return t};var d=(t,e,o)=>(o=t!=null?ht(Ot(t)):{},K(e||!t||!t.__esModule?O(o,"default",{value:t,enumerable:!0}):o,t)),Nt=t=>K(O({},"__esModule",{value:!0}),t);var Wt={};It(Wt,{stackflow:()=>Lt,useActions:()=>L,useActivity:()=>Vt,useActivityParams:()=>Bt,useStack:()=>Mt});module.exports=Nt(Wt);var X=require("react");var Q=require("react"),h=(0,Q.createContext)(null);var Vt=()=>(0,X.useContext)(h);var Y=require("react");function Bt(){return(0,Y.useContext)(h).params}var tt=require("react");var Z=require("react"),I=(0,Z.createContext)(null);var Mt=()=>(0,tt.useContext)(I);var S=d(require("react"));var et=require("react"),N=(0,et.createContext)({});var ot=d(require("react"));var rt=({children:t,value:e})=>ot.default.createElement(N.Provider,{value:e},t);var it=d(require("react"));function V(){return it.default.useContext(N)}var C=require("@stackflow/core"),u=d(require("react")),dt=d(require("react-fast-compare"));var nt=d(require("react"));var at=({children:t,value:e})=>nt.default.createElement(h.Provider,{value:e},t);var st=require("@stackflow/core");function b(){return(0,st.id)()}var ct=require("react"),B=(0,ct.createContext)(null);var mt=d(require("react"));var pt=({children:t,value:e})=>mt.default.createElement(B.Provider,{value:e},t);var ft=require("react");function l(){return(0,ft.useContext)(B)}var ut=require("react"),M=(0,ut.createContext)(null);var vt=require("react"),U=(0,vt.createContext)(null);var Ut=1e3,Ft=Ut/60,xt=({transitionDuration:t,initialActivity:e,activities:o,children:a})=>{let s=l(),c=V(),i=(0,u.useMemo)(()=>{let x=new Date().getTime()-t,A=s.reduce((q,G)=>{var _,j;return(j=(_=G.initialPushedEvent)==null?void 0:_.call(G))!=null?j:q},null),P=e?(0,C.makeEvent)("Pushed",{activityId:b(),activityName:e({context:c}),params:{},eventDate:x}):null;A&&P&&console.warn(`Stackflow - Some plugin overrides an "initialActivity" option. The "initialActivity" option you set to "${P.activityName}" in the "stackflow" is ignored.`);let D=A!=null?A:P,Et=Object.keys(o).map(q=>(0,C.makeEvent)("ActivityRegistered",{activityName:q,eventDate:x})),W=[(0,C.makeEvent)("Initialized",{transitionDuration:t,eventDate:x}),...Et];return D&&W.push(D),W},[]),m=(0,u.useMemo)(()=>(0,C.aggregate)(i,new Date().getTime()),[]),[r,n]=(0,u.useState)(()=>m),f=(0,u.useRef)(i),p=(0,u.useRef)(m),k=(0,u.useCallback)(()=>p.current,[p]),w=(0,u.useCallback)((x,A)=>{let P=(0,C.makeEvent)(x,A),D=[...f.current,P];f.current=D,n((0,C.aggregate)(D,new Date().getTime()))},[f,n]);return(0,u.useEffect)(()=>{let x=setInterval(()=>{let A=f.current,P=(0,C.aggregate)(A,new Date().getTime());(0,dt.default)(r,P)||(n(P),p.current=P),P.globalTransitionState==="idle"&&clearInterval(x)},Ft);return()=>{clearInterval(x)}},[f,r,n]),u.default.createElement(U.Provider,{value:r},u.default.createElement(M.Provider,{value:(0,u.useMemo)(()=>({getStack:k,dispatchEvent:w}),[k,w])},a))};var y=d(require("react"));var F=()=>{let t=l(),e=V(),{dispatchEvent:o,getStack:a}=y.default.useContext(M),s=(0,y.useCallback)(r=>{let n=!1,f=()=>{n=!0};return t.forEach(p=>{var k,w,x;switch(r){case"PUSHED":(k=p.onBeforePush)==null||k.call(p,{actions:{dispatchEvent:o,getStack:a,preventDefault:f}});break;case"REPLACED":(w=p.onBeforeReplace)==null||w.call(p,{actions:{dispatchEvent:o,getStack:a,preventDefault:f}});break;case"POPPED":(x=p.onBeforePop)==null||x.call(p,{actions:{dispatchEvent:o,getStack:a,preventDefault:f}});break;default:break}}),{isPrevented:n}},[t,o,a,e]),c=(0,y.useCallback)(({activityId:r,activityName:n,params:f})=>{let{isPrevented:p}=s("PUSHED");p||o("Pushed",{activityId:r,activityName:n,params:f})},[o]),i=(0,y.useCallback)(({activityId:r,activityName:n,params:f})=>{let{isPrevented:p}=s("REPLACED");p||o("Replaced",{activityId:r,activityName:n,params:f})},[o]),m=(0,y.useCallback)(()=>{let{isPrevented:r}=s("POPPED");r||o("Popped",{})},[o]);return(0,y.useMemo)(()=>({dispatchEvent:o,getStack:a,push:c,replace:i,pop:m}),[o,a,c,i,m])};var Pt=d(require("react"));var R=()=>Pt.default.useContext(U);var lt=require("@stackflow/core"),g=require("react");var Ht=()=>{let t=l(),e=R(),o=F(),a=(0,g.useCallback)(i=>{t.forEach(m=>{var r;(r=m.onInit)==null||r.call(m,i)})},[]),s=(0,g.useCallback)(({actions:i,effect:m})=>{switch(m._TAG){case"PUSHED":{t.forEach(r=>{var n;return(n=r.onPushed)==null?void 0:n.call(r,{actions:i,effect:m})});break}case"POPPED":{t.forEach(r=>{var n;return(n=r.onPopped)==null?void 0:n.call(r,{actions:i,effect:m})});break}case"REPLACED":{t.forEach(r=>{var n;return(n=r.onReplaced)==null?void 0:n.call(r,{actions:i,effect:m})});break}case"%SOMETHING_CHANGED%":{t.forEach(r=>{var n;return(n=r.onChanged)==null?void 0:n.call(r,{actions:i,effect:m})});break}default:break}},[]);(0,g.useEffect)(()=>{a==null||a({actions:{dispatchEvent:o.dispatchEvent,getStack:o.getStack}})},[]);let c=(0,g.useRef)(e);return(0,g.useEffect)(()=>{let i=c.current;(i?(0,lt.produceEffects)(i,e):[]).forEach(r=>{s({actions:{dispatchEvent:o.dispatchEvent,getStack:o.getStack},effect:r})}),c.current=v({},e)},[e]),null},Ct=Ht;var T=d(require("react"));var H=d(require("react"));var yt=d(require("react"));var kt=({children:t,value:e})=>yt.default.createElement(I.Provider,{value:e},t);var qt=({activities:t,plugin:e})=>{let o=R(),a=l();return e.render({stack:E(v({},o),{render(s){let c=v(v({},o),s);return{activities:c.activities.map(i=>E(v({},i),{key:i.id,render(m){let r=t[i.name],n=H.default.createElement(r,v({},i.params));return a.forEach(f=>{var p,k;n=(k=(p=f.wrapActivity)==null?void 0:p.call(f,{activity:E(v({},i),{render:()=>n})}))!=null?k:n}),H.default.createElement(kt,{value:c},H.default.createElement(at,{key:i.id,value:v(v({},i),m)},n))}}))}}})})},At=qt;var Gt=({activities:t})=>{let e=R(),o=l(),a=o.filter(c=>!!c.render);(0,T.useEffect)(()=>{a.length===0&&console.warn(`Stackflow - There is no rendering plugin, so "<Stack />" doesn't render anything. If you want to render some UI, use "@stackflow/plugin-renderer-basic" or add another rendering plugin.`)},[a]);let s=T.default.createElement(T.default.Fragment,null,a.map(c=>T.default.createElement(At,{activities:t,key:c.key,plugin:c})));return o.forEach(c=>{var i,m;s=(m=(i=c.wrapStack)==null?void 0:i.call(c,{stack:E(v({},e),{render(){return s}})}))!=null?m:s}),s},gt=Gt;var St=require("react");function L(){let t=F();return(0,St.useMemo)(()=>({push(e,o,a){t.push({activityId:b(),activityName:e,params:o})},replace(e,o,a){t.replace({activityId:b(),activityName:e,params:o})},pop(e){t.pop()}}),[t.push,t.replace,t.pop])}function Lt(t){return{Stack(e){var a;let o=(0,S.useMemo)(()=>{var s;return((s=t.plugins)!=null?s:[]).reduce((c,i)=>[...c,...Array.isArray(i)?i:[i]],[]).map(c=>c({context:e.context}))},[]);return S.default.createElement(rt,{value:(a=e.context)!=null?a:{}},S.default.createElement(pt,{value:o},S.default.createElement(xt,{activities:t.activities,initialActivity:t.initialActivity,transitionDuration:t.transitionDuration},S.default.createElement(gt,{activities:t.activities}),S.default.createElement(Ct,null))))},useFlow:L}}
//# sourceMappingURL=index.js.map

3

dist/stack/useStack.d.ts

@@ -0,1 +1,4 @@

/**
* Get overall stack state
*/
export declare const useStack: () => import("@stackflow/core").AggregateOutput;

25

dist/stackflow.d.ts

@@ -6,2 +6,5 @@ import React from "react";

export declare type StackProps<C extends {} = {}> = {
/**
* Context data to pass to plugins in render time
*/
context?: C;

@@ -11,13 +14,35 @@ };

export declare type StackflowOptions<T extends BaseActivities> = {
/**
* Register activities used in your app
*/
activities: T;
/**
* Transition duration for stack animation (millisecond)
*/
transitionDuration: number;
/**
* Set the first activity to load at the bottom
* (It can be overwritten by plugin)
*/
initialActivity?: (args: {
context: any;
}) => Extract<keyof T, string>;
/**
* Inject stackflow plugins
*/
plugins?: Array<StackflowReactPlugin | StackflowReactPlugin[]>;
};
export declare type StackflowOutput<T extends BaseActivities> = {
/**
* Created `<Stack />` component
*/
Stack: StackComponentType;
/**
* Created `useFlow()` hooks
*/
useFlow: () => UseActionsOutputType<T>;
};
/**
* Make `<Stack />` component and `useFlow()` hooks that strictly typed with `activities`
*/
export declare function stackflow<T extends BaseActivities>(options: StackflowOptions<T>): StackflowOutput<T>;

9

dist/StackflowReactPlugin.d.ts

@@ -6,2 +6,5 @@ import { Activity, AggregateOutput, StackflowPlugin } from "@stackflow/core";

}) => {
/**
* Determine how to render by using the stack state
*/
render?: (args: {

@@ -17,2 +20,5 @@ stack: AggregateOutput & {

}) => React.ReactElement<any, any> | null;
/**
* Wrap `<Stack />` component with your `Provider` or custom elements
*/
wrapStack?: (args: {

@@ -23,2 +29,5 @@ stack: AggregateOutput & {

}) => React.ReactElement<any, any> | null;
/**
* Wrap an activity with your `Provider` or custom elements
*/
wrapActivity?: (args: {

@@ -25,0 +34,0 @@ activity: Activity & {

9

dist/useActions.d.ts
import { ActivityComponentType } from "./activity";
import { BaseActivities } from "./BaseActivities";
export declare type UseActionsOutputType<T extends BaseActivities> = {
/**
* Push new activity
*/
push: <V extends Extract<keyof T, string>>(activityName: V, params: T[V] extends ActivityComponentType<infer U> ? U : {}, options?: {
animate?: boolean;
}) => void;
/**
* Push new activity in the top and remove current top activity when new activity is activated
*/
replace: <V extends Extract<keyof T, string>>(activityName: V, params: T[V] extends ActivityComponentType<infer U> ? U : {}, options?: {
animate?: boolean;
}) => void;
/**
* Remove top activity
*/
pop: (options?: {

@@ -11,0 +20,0 @@ animate?: boolean;

6

package.json
{
"name": "@stackflow/react",
"version": "0.1.1-alpha.172+f372be6",
"version": "0.2.0",
"license": "Apache-2.0",

@@ -31,3 +31,3 @@ "exports": {

"devDependencies": {
"@stackflow/core": "^0.1.1-alpha.172+f372be6",
"@stackflow/core": "^0.2.0",
"@types/react": "^18.0.9",

@@ -53,3 +53,3 @@ "react": "^18.1.0",

},
"gitHead": "f372be6903b87738dabf3d0d50f85da26d5419b8"
"gitHead": "7fa3ce6d240d2cc8e959cba76f6b21b9fbef8ce9"
}

3

src/activity/useActivity.ts

@@ -5,2 +5,5 @@ import { useContext } from "react";

/**
* Get current activity state
*/
export const useActivity = () => useContext(ActivityContext);

3

src/activity/useActivityParams.ts

@@ -6,2 +6,5 @@ import { ActivityParams } from "@stackflow/core";

/**
* Get current activity parameters
*/
export function useActivityParams<

@@ -8,0 +11,0 @@ T extends ActivityParams<T> = ActivityParams,

2

src/core/CoreActionsContext.ts

@@ -5,3 +5,3 @@ import { AggregateOutput, DispatchEvent } from "@stackflow/core";

export interface CoreActionsContextValue {
getState: () => AggregateOutput;
getStack: () => AggregateOutput;
dispatchEvent: DispatchEvent;

@@ -8,0 +8,0 @@ }

14

src/core/useCoreActions.ts

@@ -12,3 +12,3 @@ import { Effect } from "@stackflow/core";

const { dispatchEvent, getState } = React.useContext(CoreActionsContext);
const { dispatchEvent, getStack } = React.useContext(CoreActionsContext);

@@ -29,3 +29,3 @@ const triggerPreEffectHook = useCallback(

dispatchEvent,
getState,
getStack,
preventDefault,

@@ -39,3 +39,3 @@ },

dispatchEvent,
getState,
getStack,
preventDefault,

@@ -49,3 +49,3 @@ },

dispatchEvent,
getState,
getStack,
preventDefault,

@@ -62,3 +62,3 @@ },

},
[plugins, dispatchEvent, getState, context],
[plugins, dispatchEvent, getStack, context],
);

@@ -123,3 +123,3 @@

dispatchEvent,
getState,
getStack,
push,

@@ -129,4 +129,4 @@ replace,

}),
[dispatchEvent, getState, push, replace, pop],
[dispatchEvent, getStack, push, replace, pop],
);
};

1

src/index.ts
export * from "./activity/ActivityComponentType";
export * from "./activity/useActivity";
export * from "./activity/useActivityParams";
export * from "./plugins/usePlugins";
export * from "./stack/useStack";

@@ -6,0 +5,0 @@ export * from "./stackflow";

3

src/stack/useStack.ts

@@ -5,2 +5,5 @@ import { useContext } from "react";

/**
* Get overall stack state
*/
export const useStack = () => useContext(StackContext);

11

src/StackflowReactPlugin.ts

@@ -5,2 +5,5 @@ import { Activity, AggregateOutput, StackflowPlugin } from "@stackflow/core";

export type StackflowReactPlugin = (args: { context: any }) => {
/**
* Determine how to render by using the stack state
*/
render?: (args: {

@@ -18,2 +21,6 @@ stack: AggregateOutput & {

}) => React.ReactElement<any, any> | null;
/**
* Wrap `<Stack />` component with your `Provider` or custom elements
*/
wrapStack?: (args: {

@@ -24,2 +31,6 @@ stack: AggregateOutput & {

}) => React.ReactElement<any, any> | null;
/**
* Wrap an activity with your `Provider` or custom elements
*/
wrapActivity?: (args: {

@@ -26,0 +37,0 @@ activity: Activity & {

11

src/useActions.ts

@@ -8,2 +8,5 @@ import { useMemo } from "react";

export type UseActionsOutputType<T extends BaseActivities> = {
/**
* Push new activity
*/
push: <V extends Extract<keyof T, string>>(

@@ -16,2 +19,6 @@ activityName: V,

) => void;
/**
* Push new activity in the top and remove current top activity when new activity is activated
*/
replace: <V extends Extract<keyof T, string>>(

@@ -24,2 +31,6 @@ activityName: V,

) => void;
/**
* Remove top activity
*/
pop: (options?: { animate?: boolean }) => void;

@@ -26,0 +37,0 @@ };

README.md
dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

src/core/CoreProvider.tsx

Sorry, the diff of this file is not supported yet

src/EffectManager.tsx

Sorry, the diff of this file is not supported yet

src/stackflow.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc