Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@stackflow/react

Package Overview
Dependencies
Maintainers
3
Versions
93
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stackflow/react - npm Package Compare versions

Comparing version 1.1.11 to 1.2.0-canary.0

dist/__internal__/activity/ActivityProvider.d.ts

12

dist/index.d.ts

@@ -1,12 +0,2 @@

export * from "./activity/ActivityComponentType";
export * from "./activity/useActivity";
export * from "./activity/useActivityParams";
export * from "./stack/useStack";
export * from "./stackflow";
export * from "./StackflowReactPlugin";
export * from "./useActions";
export * from "./useActiveEffect";
export * from "./useEnterDoneEffect";
export * from "./useStep";
export * from "./useStepActions";
export * from "./stable";
//# sourceMappingURL=index.d.ts.map
"use strict";
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) => {

@@ -37,620 +14,6 @@ if (from && typeof from === "object" || typeof from === "function") {

};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
stackflow: () => stackflow,
useActions: () => useActions,
useActiveEffect: () => useActiveEffect,
useActivity: () => useActivity,
useActivityParams: () => useActivityParams,
useEnterDoneEffect: () => useEnterDoneEffect,
useStack: () => useStack,
useStep: () => useStep,
useStepActions: () => useStepActions
});
module.exports = __toCommonJS(src_exports);
// src/activity/useActivity.ts
var import_react3 = require("react");
// src/activity/ActivityProvider.tsx
var import_react2 = require("react");
// src/utils/isServer.ts
function isServer() {
return typeof window === "undefined";
}
// src/utils/isBrowser.ts
function isBrowser() {
return !isServer();
}
// src/utils/makeRef.ts
function makeRef() {
const ref = {
value: null
};
function get() {
return ref.value;
}
function set(value) {
ref.value = value;
}
return [get, set];
}
// src/utils/noop.ts
var noop = () => {
};
// src/utils/useMemoDeep.ts
var import_react = require("react");
var import_react_fast_compare = __toESM(require("react-fast-compare"));
function useMemoDeep(next) {
const previousRef = (0, import_react.useRef)(next);
const previous = previousRef.current;
const isEqual = (0, import_react_fast_compare.default)(previous, next);
(0, import_react.useEffect)(() => {
if (!isEqual) {
previousRef.current = next;
}
}, [next]);
return isEqual ? previous : next;
}
// src/activity/ActivityProvider.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var ActivityContext = (0, import_react2.createContext)(null);
var ActivityProvider = ({
children,
value
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActivityContext.Provider, { value: useMemoDeep(value), children });
ActivityProvider.displayName = "ActivityProvider";
// src/activity/useActivity.ts
var useActivity = () => (0, import_react3.useContext)(ActivityContext);
// src/activity/useActivityParams.ts
var import_react4 = require("react");
function useActivityParams() {
return (0, import_react4.useContext)(ActivityContext).params;
}
// src/stack/useStack.ts
var import_react6 = require("react");
// src/stack/StackProvider.tsx
var import_react5 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
var StackContext = (0, import_react5.createContext)(null);
var StackProvider = ({
children,
value
}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StackContext.Provider, { value: useMemoDeep(value), children });
StackProvider.displayName = "StackProvider";
// src/stack/useStack.ts
var useStack = () => (0, import_react6.useContext)(StackContext);
// src/stackflow.tsx
var import_core7 = require("@stackflow/core");
var import_react18 = require("react");
// src/MainRenderer.tsx
var import_react15 = require("react");
// src/activity/makeActivityId.ts
var import_core = require("@stackflow/core");
function makeActivityId() {
return (0, import_core.id)();
}
// src/activity/makeStepId.ts
var import_core2 = require("@stackflow/core");
function makeStepId() {
return (0, import_core2.id)();
}
// src/core/CoreProvider.tsx
var import_react10 = require("react");
// src/shims/useDeferredValue.ts
var import_react7 = __toESM(require("react"));
var _a;
var useDeferredValue = (_a = import_react7.default.useDeferredValue) != null ? _a : (value) => value;
// src/shims/useSyncExternalStore.ts
var import_react8 = __toESM(require("react"));
var _a2;
var useSyncExternalStore = (_a2 = import_react8.default.useSyncExternalStore) != null ? _a2 : (subscribe, getSnapshot) => {
const [state, setState] = (0, import_react8.useState)(() => getSnapshot());
(0, import_react8.useEffect)(() => {
const dispose = subscribe(() => {
setState(() => getSnapshot());
});
return dispose;
});
return state;
};
// src/shims/useTransition.ts
var import_react9 = __toESM(require("react"));
var _a3;
var useTransition = (_a3 = import_react9.default.useTransition) != null ? _a3 : () => [false, (cb) => cb()];
// src/core/CoreProvider.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var CoreActionsContext = (0, import_react10.createContext)(
null
);
var CoreStateContext = (0, import_react10.createContext)(null);
var CoreProvider = ({
coreStore,
children
}) => {
const stack = useSyncExternalStore(
coreStore.subscribe,
coreStore.actions.getStack,
coreStore.actions.getStack
);
const deferredStack = useDeferredValue(stack);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CoreStateContext.Provider, { value: deferredStack, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CoreActionsContext.Provider, { value: coreStore.actions, children }) });
};
CoreProvider.displayName = "CoreProvider";
// src/core/useCoreActions.ts
var import_react11 = require("react");
var useCoreActions = () => (0, import_react11.useContext)(CoreActionsContext);
// src/core/useCoreState.ts
var import_react12 = require("react");
var useCoreState = () => (0, import_react12.useContext)(CoreStateContext);
// src/plugins/PluginsProvider.tsx
var import_react13 = require("react");
var import_jsx_runtime4 = require("react/jsx-runtime");
var PluginsContext = (0, import_react13.createContext)(null);
var PluginsProvider = ({
children,
value
}) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PluginsContext.Provider, { value, children });
PluginsProvider.displayName = "PluginsProvider";
// src/plugins/usePlugins.ts
var import_react14 = require("react");
function usePlugins() {
return (0, import_react14.useContext)(PluginsContext);
}
// src/PluginRenderer.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var PluginRenderer = ({
activityComponentMap,
plugin,
initialContext
}) => {
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 Activity = activityComponentMap[activity.name];
let output = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Activity, { params: activity.params });
plugins.forEach((p) => {
var _a4, _b;
output = (_b = (_a4 = p.wrapActivity) == null ? void 0 : _a4.call(p, {
activity: __spreadProps(__spreadValues({}, activity), {
render: () => output
}),
initialContext
})) != null ? _b : output;
});
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StackProvider, { value: stack, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
ActivityProvider,
{
value: __spreadValues(__spreadValues({}, activity), overrideActivity),
children: output
},
activity.id
) });
}
}))
};
}
}),
initialContext
});
};
PluginRenderer.displayName = "PluginRenderer";
var PluginRenderer_default = PluginRenderer;
// src/MainRenderer.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var MainRenderer = ({
activityComponentMap,
initialContext
}) => {
const coreState = useCoreState();
const plugins = usePlugins();
const renderingPlugins = plugins.filter(
(plugin) => !!plugin.render
);
(0, import_react15.useEffect)(() => {
if (renderingPlugins.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.`
);
}
}, [renderingPlugins]);
let output = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: renderingPlugins.map((plugin) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
PluginRenderer_default,
{
activityComponentMap,
plugin,
initialContext
},
plugin.key
)) });
plugins.forEach((plugin) => {
var _a4, _b;
output = (_b = (_a4 = plugin.wrapStack) == null ? void 0 : _a4.call(plugin, {
stack: __spreadProps(__spreadValues({}, coreState), {
render() {
return output;
}
}),
initialContext
})) != null ? _b : output;
});
return output;
};
MainRenderer.displayName = "MainRenderer";
var MainRenderer_default = MainRenderer;
// src/useActions.ts
var import_react16 = require("react");
function parseActionOptions(options) {
if (!options) {
return { skipActiveState: false };
}
const isNullableAnimateOption = options.animate == null;
if (isNullableAnimateOption) {
return { skipActiveState: false };
}
return { skipActiveState: !options.animate };
}
function useActions() {
const coreActions = useCoreActions();
const [pending] = useTransition();
return (0, import_react16.useMemo)(
() => ({
pending,
push(activityName, activityParams, options) {
const activityId = makeActivityId();
coreActions == null ? void 0 : coreActions.push({
activityId,
activityName,
activityParams,
skipEnterActiveState: parseActionOptions(options).skipActiveState
});
return {
activityId
};
},
replace(activityName, activityParams, options) {
var _a4;
const activityId = makeActivityId();
coreActions == null ? void 0 : coreActions.replace({
activityId: (_a4 = options == null ? void 0 : options.activityId) != null ? _a4 : makeActivityId(),
activityName,
activityParams,
skipEnterActiveState: parseActionOptions(options).skipActiveState
});
return {
activityId
};
},
pop(count, options) {
let _count = 1;
let _options = {};
if (typeof count === "object") {
_options = __spreadValues({}, count);
}
if (typeof count === "number") {
_count = count;
}
if (options) {
_options = __spreadValues({}, options);
}
for (let i = 0; i < _count; i += 1) {
coreActions == null ? void 0 : coreActions.pop({
skipExitActiveState: i === 0 ? parseActionOptions(_options).skipActiveState : true
});
}
}
}),
[coreActions == null ? void 0 : coreActions.push, coreActions == null ? void 0 : coreActions.replace, coreActions == null ? void 0 : coreActions.pop, pending]
);
}
// src/useStepActions.ts
var import_react17 = require("react");
var useStepActions = () => {
const coreActions = useCoreActions();
const [pending] = useTransition();
return (0, import_react17.useMemo)(
() => ({
pending,
stepPush(params) {
const stepId = makeStepId();
coreActions == null ? void 0 : coreActions.stepPush({
stepId,
stepParams: params
});
},
stepReplace(params) {
const stepId = makeStepId();
coreActions == null ? void 0 : coreActions.stepReplace({
stepId,
stepParams: params
});
},
stepPop() {
coreActions == null ? void 0 : coreActions.stepPop({});
}
}),
[
coreActions == null ? void 0 : coreActions.stepPush,
coreActions == null ? void 0 : coreActions.stepReplace,
coreActions == null ? void 0 : coreActions.stepPop,
pending
]
);
};
// src/stackflow.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
function parseActionOptions2(options) {
if (!options) {
return { skipActiveState: false };
}
const isNullableAnimateOption = options.animate == null;
if (isNullableAnimateOption) {
return { skipActiveState: false };
}
return { skipActiveState: !options.animate };
}
function stackflow(options) {
var _a4;
const plugins = ((_a4 = options.plugins) != null ? _a4 : []).flat(Number.POSITIVE_INFINITY).map((p) => p);
const activityComponentMap = Object.entries(options.activities).reduce(
(acc, [key, Activity]) => __spreadProps(__spreadValues({}, acc), {
[key]: "component" in Activity ? (0, import_react18.memo)(Activity.component) : (0, import_react18.memo)(Activity)
}),
{}
);
const enoughPastTime = () => (/* @__PURE__ */ new Date()).getTime() - options.transitionDuration * 2;
const staticCoreStore = (0, import_core7.makeCoreStore)({
initialEvents: [
(0, import_core7.makeEvent)("Initialized", {
transitionDuration: options.transitionDuration,
eventDate: enoughPastTime()
}),
...Object.entries(options.activities).map(
([activityName, Activity]) => (0, import_core7.makeEvent)("ActivityRegistered", __spreadValues({
activityName,
eventDate: enoughPastTime()
}, "component" in Activity ? {
activityParamsSchema: Activity.paramsSchema
} : null))
)
],
plugins: []
});
const [getCoreStore, setCoreStore] = makeRef();
const Stack = (0, import_react18.memo)((props) => {
const coreStore = (0, import_react18.useMemo)(() => {
const prevCoreStore = getCoreStore();
if (isBrowser() && prevCoreStore) {
return prevCoreStore;
}
const initialPushedEventsByOption = options.initialActivity ? [
(0, import_core7.makeEvent)("Pushed", {
activityId: makeActivityId(),
activityName: options.initialActivity(),
activityParams: {},
eventDate: enoughPastTime(),
skipEnterActiveState: false
})
] : [];
const store = (0, import_core7.makeCoreStore)({
initialEvents: [
...staticCoreStore.pullEvents(),
...initialPushedEventsByOption
],
initialContext: props.initialContext,
plugins,
handlers: {
onInitialActivityIgnored: (initialPushedEvents) => {
console.warn(
`Stackflow - Some plugin overrides an "initialActivity" option. The "initialActivity" option you set to "${initialPushedEvents[0].activityName}" in the "stackflow" is ignored.`
);
},
onInitialActivityNotFound: () => {
console.warn(
"Stackflow - There is no initial activity. If you want to set the initial activity, add the `initialActivity` option of the `stackflow()` function or add a plugin that sets the initial activity. (e.g. `@stackflow/plugin-history-sync`)"
);
}
}
});
if (isBrowser()) {
store.init();
setCoreStore(store);
}
return store;
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PluginsProvider, { value: coreStore.pluginInstances, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CoreProvider, { coreStore, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
MainRenderer_default,
{
activityComponentMap,
initialContext: props.initialContext
}
) }) });
});
Stack.displayName = "Stack";
return {
activities: options.activities,
Stack,
useFlow: useActions,
useStepFlow: useStepActions,
addActivity(activity) {
if (getCoreStore()) {
console.warn(
"Stackflow - `addActivity()` API cannot be called after a `<Stack />` component has been rendered"
);
return;
}
activityComponentMap[activity.name] = (0, import_react18.memo)(activity.component);
staticCoreStore.actions.dispatchEvent("ActivityRegistered", {
activityName: activity.name,
activityParamsSchema: activity.paramsSchema,
eventDate: enoughPastTime()
});
},
addPlugin(plugin) {
if (getCoreStore()) {
console.warn(
"Stackflow - `addPlugin()` API cannot be called after a `<Stack />` component has been rendered"
);
return;
}
[plugin].flat(Number.POSITIVE_INFINITY).map((p) => p).forEach((p) => {
plugins.push(p);
});
},
actions: {
getStack() {
var _a5, _b;
return (_b = (_a5 = getCoreStore()) == null ? void 0 : _a5.actions.getStack()) != null ? _b : staticCoreStore.actions.getStack();
},
dispatchEvent(name, parameters) {
var _a5;
return (_a5 = getCoreStore()) == null ? void 0 : _a5.actions.dispatchEvent(name, parameters);
},
push(activityName, activityParams, options2) {
var _a5;
const activityId = makeActivityId();
(_a5 = getCoreStore()) == null ? void 0 : _a5.actions.push({
activityId,
activityName,
activityParams,
skipEnterActiveState: parseActionOptions2(options2).skipActiveState
});
return {
activityId
};
},
replace(activityName, activityParams, options2) {
var _a5, _b, _c;
const activityId = (_a5 = options2 == null ? void 0 : options2.activityId) != null ? _a5 : makeActivityId();
(_c = getCoreStore()) == null ? void 0 : _c.actions.replace({
activityId: (_b = options2 == null ? void 0 : options2.activityId) != null ? _b : makeActivityId(),
activityName,
activityParams,
skipEnterActiveState: parseActionOptions2(options2).skipActiveState
});
return {
activityId
};
},
pop(count, options2) {
var _a5;
let _count = 1;
let _options = {};
if (typeof count === "object") {
_options = __spreadValues({}, count);
}
if (typeof count === "number") {
_count = count;
}
if (options2) {
_options = __spreadValues({}, options2);
}
for (let i = 0; i < _count; i += 1) {
(_a5 = getCoreStore()) == null ? void 0 : _a5.actions.pop({
skipExitActiveState: i === 0 ? parseActionOptions2(_options).skipActiveState : true
});
}
},
stepPush(params) {
var _a5;
const stepId = makeStepId();
return (_a5 = getCoreStore()) == null ? void 0 : _a5.actions.stepPush({
stepId,
stepParams: params
});
},
stepReplace(params) {
var _a5;
const stepId = makeStepId();
return (_a5 = getCoreStore()) == null ? void 0 : _a5.actions.stepReplace({
stepId,
stepParams: params
});
},
stepPop() {
var _a5;
return (_a5 = getCoreStore()) == null ? void 0 : _a5.actions.stepPop({});
}
}
};
}
// src/useActiveEffect.ts
var import_react19 = require("react");
var useActiveEffect = (effect) => {
const { isActive } = useActivity();
(0, import_react19.useEffect)(() => {
if (isActive) {
return effect();
}
return noop;
}, [isActive]);
};
// src/useEnterDoneEffect.ts
var import_react20 = require("react");
var useEnterDoneEffect = (effect, deps = []) => {
const { isTop, transitionState } = useActivity();
(0, import_react20.useEffect)(() => {
if (isTop && transitionState === "enter-done") {
return effect();
}
return noop;
}, [isTop, transitionState, ...deps]);
};
// src/useStep.ts
var import_react21 = require("react");
function useStep() {
var _a4;
const { steps, id: id3 } = (0, import_react21.useContext)(ActivityContext);
return (_a4 = steps.filter((step) => step.id !== id3).at(-1)) != null ? _a4 : null;
}
//# sourceMappingURL=index.js.map
__reExport(src_exports, require("./stable"), module.exports);
{
"name": "@stackflow/react",
"version": "1.1.11",
"version": "1.2.0-canary.0",
"repository": {

@@ -15,2 +15,12 @@ "type": "git",

"import": "./dist/index.mjs"
},
"./stable": {
"types": "./dist/stable/index.d.ts",
"require": "./dist/stable/index.js",
"import": "./dist/stable/index.mjs"
},
"./future": {
"types": "./dist/future/index.d.ts",
"require": "./dist/future/index.js",
"import": "./dist/future/index.mjs"
}

@@ -35,5 +45,8 @@ },

"dependencies": {
"react-fast-compare": "^3.2.2"
"history": "^5.3.0",
"react-fast-compare": "^3.2.2",
"url-pattern": "^1.0.3"
},
"devDependencies": {
"@stackflow/config": "^1.0.1-canary.0",
"@stackflow/core": "^1.0.13",

@@ -48,2 +61,3 @@ "@stackflow/esbuild-config": "^1.0.3",

"peerDependencies": {
"@stackflow/config": "^1.0.1-canary.0",
"@stackflow/core": "^1",

@@ -50,0 +64,0 @@ "@types/react": ">=16.8.0",

@@ -1,11 +0,1 @@

export * from "./activity/ActivityComponentType";
export * from "./activity/useActivity";
export * from "./activity/useActivityParams";
export * from "./stack/useStack";
export * from "./stackflow";
export * from "./StackflowReactPlugin";
export * from "./useActions";
export * from "./useActiveEffect";
export * from "./useEnterDoneEffect";
export * from "./useStep";
export * from "./useStepActions";
export * from "./stable";

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc