one
Version:
One is a new React Framework that makes Vite serve both native and web.
295 lines • 9.32 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
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(
// 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 import_vitest = require("vitest");
var import_react = __toESM(require("react"), 1);
var import_react_test_renderer = __toESM(require("react-test-renderer"), 1);
var import_WebStackView = require("../WebStackView.cjs");
var import_ScreenRenderContext = require("../ScreenRenderContext.cjs");
function makeRoute(name) {
return {
key: `${name}-key`,
name,
params: void 0
};
}
function makeState(names, index) {
return {
key: "stack-1",
index,
routeNames: names,
routes: names.map(makeRoute),
type: "stack",
stale: false,
preloadedRoutes: []
};
}
function makeDescriptors(perRoute) {
const out = {};
for (const name of Object.keys(perRoute)) {
out[`${name}-key`] = {
options: perRoute[name].options,
render: () => perRoute[name].content,
navigation: {}
};
}
return out;
}
const KeepMountedRender = ({
children,
open
}) => (0, import_react.createElement)("div", {
"data-open": String(open),
style: {
display: open ? "block" : "none"
}
}, children);
function IdProbe({
onId
}) {
const id = (0, import_react.useId)();
import_react.default.useEffect(() => {
onId(id);
}, [id, onId]);
return (0, import_react.createElement)("span", {
"data-id": id
});
}
function MountProbe({
onMount
}) {
import_react.default.useEffect(() => {
onMount();
}, [onMount]);
return null;
}
function StatefulProbe({
initial,
onMount
}) {
const [value, setValue] = (0, import_react.useState)(initial);
import_react.default.useEffect(() => {
onMount(setValue);
}, [onMount]);
return (0, import_react.createElement)("span", {
"data-value": String(value)
});
}
(0, import_vitest.describe)("useId stability", () => {
(0, import_vitest.it)("returns the same id across parent re-renders for the same mount", () => {
const captured = [];
const onId = id => captured.push(id);
const state = makeState(["home", "sheet"], 1);
const descriptors = makeDescriptors({
home: {
options: {
presentation: "card"
},
content: null
},
sheet: {
options: {
presentation: "formSheet"
},
content: (0, import_react.createElement)(IdProbe, {
onId
})
}
});
const navigation = {
dispatch: import_vitest.vi.fn()
};
let testRoot;
(0, import_react_test_renderer.act)(() => {
testRoot = import_react_test_renderer.default.create((0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, (0, import_react.createElement)(import_WebStackView.WebStackView, {
state,
navigation,
descriptors
})));
});
const firstId = captured.at(-1);
(0, import_vitest.expect)(firstId).toBeTruthy();
(0, import_react_test_renderer.act)(() => {
testRoot.update((0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, (0, import_react.createElement)(import_WebStackView.WebStackView, {
state,
navigation,
descriptors
})));
});
const secondId = captured.at(-1);
(0, import_vitest.expect)(secondId).toBe(firstId);
});
});
(0, import_vitest.describe)("regular overlay (no keepMounted) lifecycle", () => {
(0, import_vitest.it)("mounts once on open, unmounts on pop", () => {
const mounts = [];
const onMount = () => mounts.push(Date.now());
const stateOpen = makeState(["home", "sheet"], 1);
const stateClosed = makeState(["home"], 0);
const descriptors = makeDescriptors({
home: {
options: {
presentation: "card"
},
content: null
},
sheet: {
options: {
presentation: "formSheet"
},
content: (0, import_react.createElement)(MountProbe, {
onMount
})
}
});
const navigation = {
dispatch: import_vitest.vi.fn()
};
let testRoot;
(0, import_react_test_renderer.act)(() => {
testRoot = import_react_test_renderer.default.create((0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, (0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateOpen,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
(0, import_react_test_renderer.act)(() => {
testRoot.update((0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, (0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateClosed,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
(0, import_react_test_renderer.act)(() => {
testRoot.update((0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, (0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateOpen,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(2);
});
});
(0, import_vitest.describe)("keepMounted overlay lifecycle", () => {
(0, import_vitest.it)("survives dismissal: state persists when route is popped and re-opened", () => {
const mounts = [];
let setValue;
const stateOpen = makeState(["home", "settings"], 1);
const stateClosed = makeState(["home"], 0);
const stableContent = (0, import_react.createElement)(StatefulProbe, {
initial: 7,
onMount: setter => {
mounts.push(Date.now());
setValue = setter;
}
});
const descriptors = makeDescriptors({
home: {
options: {
presentation: "card"
},
content: null
},
settings: {
options: {
presentation: "formSheet",
keepMounted: true
},
content: stableContent
}
});
const navigation = {
dispatch: import_vitest.vi.fn()
};
let testRoot;
(0, import_react_test_renderer.act)(() => {
testRoot = import_react_test_renderer.default.create((0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, (0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateOpen,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
(0, import_vitest.expect)(typeof setValue).toBe("function");
(0, import_react_test_renderer.act)(() => {
setValue(42);
});
(0, import_react_test_renderer.act)(() => {
testRoot.update((0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, (0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateClosed,
navigation,
// descriptor for 'settings' no longer present in state.routes -
// we keep the same map so the captured slot still works.
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
(0, import_react_test_renderer.act)(() => {
testRoot.update((0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, (0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateOpen,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
const tree = testRoot.toJSON();
const json = JSON.stringify(tree);
(0, import_vitest.expect)(json).toContain('"data-value":"42"');
(0, import_vitest.expect)(json).not.toContain('"data-value":"7"');
});
});