react-ko/dist/index.cjs

React + Knockout integration library

"use strict";
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 __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(
  // 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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  AppViewModelContext: () => AppViewModelContext,
  KnockoutScope: () => KnockoutScope,
  KoForeach: () => KoForeach,
  KoForeachComment: () => KoForeachComment,
  KoIf: () => KoIf,
  KoIfComment: () => KoIfComment,
  KoIfNot: () => KoIfNot,
  KoIfNotComment: () => KoIfNotComment,
  KoScope: () => KnockoutScope,
  RootKnockoutProvider: () => RootKnockoutProvider,
  useAppViewModel: () => useAppViewModel
});
module.exports = __toCommonJS(index_exports);

// src/context/AppViewModelContext.ts
var import_react = require("react");
var AppViewModelContext = (0, import_react.createContext)(null);
function useAppViewModel() {
  const context = (0, import_react.useContext)(AppViewModelContext);
  if (context === null) {
    throw new Error("useAppViewModel must be used within a RootKnockoutProvider.");
  }
  return context;
}

// src/components/scope/RootKnockoutProvider.tsx
var import_react2 = __toESM(require("react"));
var import_knockout = __toESM(require("knockout"));
var import_jsx_runtime = require("react/jsx-runtime");
var RootKnockoutProvider = import_react2.default.memo(function RootKnockoutProvider2({ viewModel, children }) {
  const koContainer = (0, import_react2.useRef)(null);
  const isBoundRef = (0, import_react2.useRef)(false);
  const appViewModel = (0, import_react2.useMemo)(() => viewModel, [viewModel]);
  (0, import_react2.useLayoutEffect)(() => {
    if (koContainer.current === null) {
      return;
    }
    if (isBoundRef.current === true) {
      return;
    }
    import_knockout.default.applyBindings(appViewModel, koContainer.current);
    isBoundRef.current = true;
  }, [appViewModel]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppViewModelContext.Provider, { value: appViewModel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: koContainer, style: { display: "contents" }, children }) });
});

// src/components/scope/KnockoutScope.tsx
var import_react3 = __toESM(require("react"));
var import_jsx_runtime2 = require("react/jsx-runtime");
var KnockoutScope = import_react3.default.memo(function KnockoutScope2({ viewModel, children }) {
  const appViewModel = useAppViewModel();
  const uniqueKey = (0, import_react3.useMemo)(() => crypto.randomUUID(), []);
  (0, import_react3.useLayoutEffect)(() => {
    appViewModel[uniqueKey] = viewModel;
    return () => {
      delete appViewModel[uniqueKey];
    };
  }, [appViewModel, viewModel, uniqueKey]);
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "data-bind": `with: $root['${uniqueKey}']`, style: { display: "contents" }, children });
});

// src/components/structural/KoForeach.tsx
var import_react4 = __toESM(require("react"));
var import_jsx_runtime3 = require("react/jsx-runtime");
var KoForeach = import_react4.default.memo(function KoForeach2({ items, children }) {
  const vm = { items };
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(KnockoutScope, { viewModel: vm, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-bind": "foreach: items", style: { display: "contents" }, children }) });
});

// src/components/structural/KoIf.tsx
var import_react5 = __toESM(require("react"));
var import_jsx_runtime4 = require("react/jsx-runtime");
var KoIf = import_react5.default.memo(function KoIf2({ condition, children }) {
  const vm = { condition };
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(KnockoutScope, { viewModel: vm, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-bind": "if: condition", style: { display: "contents" }, children }) });
});

// src/components/structural/KoIfNot.tsx
var import_react6 = __toESM(require("react"));
var import_jsx_runtime5 = require("react/jsx-runtime");
var KoIfNot = import_react6.default.memo(function KoIfNot2({ condition, children }) {
  const vm = { condition };
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(KnockoutScope, { viewModel: vm, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-bind": "ifnot: condition", style: { display: "contents" }, children }) });
});

// src/components/structural/compat/KoForeachComment.tsx
var KoForeachComment = KoForeach;

// src/components/structural/compat/KoIfComment.tsx
var KoIfComment = KoIf;

// src/components/structural/compat/KoIfNotComment.tsx
var KoIfNotComment = KoIfNot;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  AppViewModelContext,
  KnockoutScope,
  KoForeach,
  KoForeachComment,
  KoIf,
  KoIfComment,
  KoIfNot,
  KoIfNotComment,
  KoScope,
  RootKnockoutProvider,
  useAppViewModel
});
//# sourceMappingURL=index.cjs.map