react-ko/dist/index.js

React + Knockout integration library

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

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

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

// src/components/structural/KoForeach.tsx
import React3 from "react";
import { jsx as jsx3 } from "react/jsx-runtime";
var KoForeach = React3.memo(function KoForeach2({ items, children }) {
  const vm = { items };
  return /* @__PURE__ */ jsx3(KnockoutScope, { viewModel: vm, children: /* @__PURE__ */ jsx3("div", { "data-bind": "foreach: items", style: { display: "contents" }, children }) });
});

// src/components/structural/KoIf.tsx
import React4 from "react";
import { jsx as jsx4 } from "react/jsx-runtime";
var KoIf = React4.memo(function KoIf2({ condition, children }) {
  const vm = { condition };
  return /* @__PURE__ */ jsx4(KnockoutScope, { viewModel: vm, children: /* @__PURE__ */ jsx4("div", { "data-bind": "if: condition", style: { display: "contents" }, children }) });
});

// src/components/structural/KoIfNot.tsx
import React5 from "react";
import { jsx as jsx5 } from "react/jsx-runtime";
var KoIfNot = React5.memo(function KoIfNot2({ condition, children }) {
  const vm = { condition };
  return /* @__PURE__ */ jsx5(KnockoutScope, { viewModel: vm, children: /* @__PURE__ */ jsx5("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;
export {
  AppViewModelContext,
  KnockoutScope,
  KoForeach,
  KoForeachComment,
  KoIf,
  KoIfComment,
  KoIfNot,
  KoIfNotComment,
  KnockoutScope as KoScope,
  RootKnockoutProvider,
  useAppViewModel
};
//# sourceMappingURL=index.js.map