one
Version:
One is a new React Framework that makes Vite serve both native and web.
336 lines (333 loc) • 10.9 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.native.js");
var import_ScreenRenderContext = require("../ScreenRenderContext.native.js");
function _type_of(obj) {
"@swc/helpers - typeof";
return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
}
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) {
var out = {};
var _iteratorNormalCompletion = true,
_didIteratorError = false,
_iteratorError = void 0;
try {
var _loop = function () {
var name = _step.value;
out[`${name}-key`] = {
options: perRoute[name].options,
render: function () {
return perRoute[name].content;
},
navigation: {}
};
};
for (var _iterator = Object.keys(perRoute)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
return out;
}
var KeepMountedRender = function (param) {
var {
children,
open
} = param;
return /* @__PURE__ */(0, import_react.createElement)("div", {
"data-open": String(open),
style: {
display: open ? "block" : "none"
}
}, children);
};
function IdProbe(param) {
var {
onId
} = param;
var id = (0, import_react.useId)();
import_react.default.useEffect(function () {
onId(id);
}, [id, onId]);
return /* @__PURE__ */(0, import_react.createElement)("span", {
"data-id": id
});
}
function MountProbe(param) {
var {
onMount
} = param;
import_react.default.useEffect(function () {
onMount();
}, [onMount]);
return null;
}
function StatefulProbe(param) {
var {
initial,
onMount
} = param;
var [value, setValue] = (0, import_react.useState)(initial);
import_react.default.useEffect(function () {
onMount(setValue);
}, [onMount]);
return /* @__PURE__ */(0, import_react.createElement)("span", {
"data-value": String(value)
});
}
(0, import_vitest.describe)("useId stability", function () {
(0, import_vitest.it)("returns the same id across parent re-renders for the same mount", function () {
var captured = [];
var onId = function (id) {
return captured.push(id);
};
var state = makeState(["home", "sheet"], 1);
var descriptors = makeDescriptors({
home: {
options: {
presentation: "card"
},
content: null
},
sheet: {
options: {
presentation: "formSheet"
},
content: /* @__PURE__ */(0, import_react.createElement)(IdProbe, {
onId
})
}
});
var navigation = {
dispatch: import_vitest.vi.fn()
};
var testRoot;
(0, import_react_test_renderer.act)(function () {
testRoot = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, /* @__PURE__ */(0, import_react.createElement)(import_WebStackView.WebStackView, {
state,
navigation,
descriptors
})));
});
var firstId = captured.at(-1);
(0, import_vitest.expect)(firstId).toBeTruthy();
(0, import_react_test_renderer.act)(function () {
testRoot.update(/* @__PURE__ */(0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, /* @__PURE__ */(0, import_react.createElement)(import_WebStackView.WebStackView, {
state,
navigation,
descriptors
})));
});
var secondId = captured.at(-1);
(0, import_vitest.expect)(secondId).toBe(firstId);
});
});
(0, import_vitest.describe)("regular overlay (no keepMounted) lifecycle", function () {
(0, import_vitest.it)("mounts once on open, unmounts on pop", function () {
var mounts = [];
var onMount = function () {
return mounts.push(Date.now());
};
var stateOpen = makeState(["home", "sheet"], 1);
var stateClosed = makeState(["home"], 0);
var descriptors = makeDescriptors({
home: {
options: {
presentation: "card"
},
content: null
},
sheet: {
options: {
presentation: "formSheet"
},
content: /* @__PURE__ */(0, import_react.createElement)(MountProbe, {
onMount
})
}
});
var navigation = {
dispatch: import_vitest.vi.fn()
};
var testRoot;
(0, import_react_test_renderer.act)(function () {
testRoot = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, /* @__PURE__ */(0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateOpen,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
(0, import_react_test_renderer.act)(function () {
testRoot.update(/* @__PURE__ */(0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, /* @__PURE__ */(0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateClosed,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
(0, import_react_test_renderer.act)(function () {
testRoot.update(/* @__PURE__ */(0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, /* @__PURE__ */(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", function () {
(0, import_vitest.it)("survives dismissal: state persists when route is popped and re-opened", function () {
var mounts = [];
var setValue;
var stateOpen = makeState(["home", "settings"], 1);
var stateClosed = makeState(["home"], 0);
var stableContent = /* @__PURE__ */(0, import_react.createElement)(StatefulProbe, {
initial: 7,
onMount: function (setter) {
mounts.push(Date.now());
setValue = setter;
}
});
var descriptors = makeDescriptors({
home: {
options: {
presentation: "card"
},
content: null
},
settings: {
options: {
presentation: "formSheet",
keepMounted: true
},
content: stableContent
}
});
var navigation = {
dispatch: import_vitest.vi.fn()
};
var testRoot;
(0, import_react_test_renderer.act)(function () {
testRoot = import_react_test_renderer.default.create(/* @__PURE__ */(0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, /* @__PURE__ */(0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateOpen,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
(0, import_vitest.expect)(typeof setValue === "undefined" ? "undefined" : _type_of(setValue)).toBe("function");
(0, import_react_test_renderer.act)(function () {
setValue(42);
});
(0, import_react_test_renderer.act)(function () {
testRoot.update(/* @__PURE__ */(0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, /* @__PURE__ */(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)(function () {
testRoot.update(/* @__PURE__ */(0, import_react.createElement)(import_ScreenRenderContext.StackRenderProvider, {
value: {
web: KeepMountedRender
}
}, /* @__PURE__ */(0, import_react.createElement)(import_WebStackView.WebStackView, {
state: stateOpen,
navigation,
descriptors
})));
});
(0, import_vitest.expect)(mounts).toHaveLength(1);
var tree = testRoot.toJSON();
var json = JSON.stringify(tree);
(0, import_vitest.expect)(json).toContain('"data-value":"42"');
(0, import_vitest.expect)(json).not.toContain('"data-value":"7"');
});
});
//# sourceMappingURL=WebStackView.runtime.test.native.js.map