codaxy · ognjenst · Jan 19, 2026 · Jan 19, 2026 · Jan 19, 2026 · Jan 20, 2026
diff --git a/litmus-ts/TestWidget.tsx b/litmus-ts/TestWidget.tsx
@@ -0,0 +1,16 @@
+/** @jsxImportSource react */
+
+import { Widget } from "cx/widgets";
+import { RenderingContext, Instance } from "cx/ui";
+
+interface TestWidgetProps {}
+
+export class TestWidget extends Widget {
+   constructor(props: TestWidgetProps) {
+      super(props);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      return <div key={key}>Test Widget</div>;
+   }
+}
diff --git a/litmus-ts/bugs/GridOnFetchRecords.tsx b/litmus-ts/bugs/GridOnFetchRecords.tsx
@@ -0,0 +1,91 @@
+import {
+  bind,
+  createAccessorModelProxy,
+  createFunctionalComponent,
+  KeySelection,
+} from "cx/ui";
+import {
+  Button,
+  Grid,
+  GridColumnConfig,
+  LookupField,
+  PureContainer,
+} from "cx/widgets";
+
+const tags = ["history", "american", "crime", "tets"].map((tag) => ({
+  name: tag,
+  id: tag,
+}));
+
+interface Model {
+  $page: {
+    showGrid: boolean;
+    tag: string;
+  };
+}
+
+const m = createAccessorModelProxy<Model>();
+
+const columns = [
+  {
+    field: "id",
+    header: "ID",
+  },
+  {
+    field: "title",
+    header: "Title",
+  },
+  {
+    field: "body",
+    header: "Body",
+  },
+] as GridColumnConfig[];
+
+export default createFunctionalComponent(() => (
+  <cx>
+    <Button
+      text="Show Grid"
+      onClick={(e, { store }) => store.toggle(m.$page.showGrid)}
+    />
+
+    <PureContainer visible={m.$page.showGrid}>
+      <PureContainer>
+        <PureContainer>
+          <LookupField
+            label="Tags"
+            options={tags}
+            value={m.$page.tag}
+            optionTextField="name"
+          />
+          <Grid
+            columns={columns}
+            filterParams={{
+              tag: m.$page.tag,
+            }}
+            infinite
+            scrollable
+            style="height: 400px"
+            cached
+            remoteSort
+            selection={{ type: KeySelection }}
+            sortDirection={bind("sortDir")}
+            sortField={bind("sortField")}
+            onFetchRecords={async ({}, { store }) => {
+              const tag = store.get(m.$page.tag);
+              await new Promise((resolve) => setTimeout(resolve, 300));
+              const response = await fetch(`https://dummyjson.com/posts`);
+              const data = await response.json();
+              let finalData = data.posts;
+
+              if (tag) {
+                finalData = finalData.filter((post) => post.tags.includes(tag));
+              }
+
+              return finalData;
+            }}
+          />
+        </PureContainer>
+      </PureContainer>
+    </PureContainer>
+  </cx>
+));
diff --git a/litmus-ts/index.html b/litmus-ts/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+   <head lang="en">
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
+      <title>Cx - Litmus</title>
+      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
+
+      <!--<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>-->
+      <!--<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>-->
+
+      <!--<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>-->
+      <!--<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>-->
+   </head>
+   <body>
+      <div id="app"></div>
+   </body>
+</html>
diff --git a/litmus-ts/index.scss b/litmus-ts/index.scss
@@ -0,0 +1,2 @@
+@import "~cx/src/variables.scss";
+@import "~cx/src/index.scss";
diff --git a/litmus-ts/index.tsx b/litmus-ts/index.tsx
@@ -0,0 +1,31 @@
+import { Store } from "cx/data";
+import "cx/locale/de-de.js";
+import { History, Widget } from "cx/ui";
+import { startHotAppLoop } from "cx/ui/app/startHotAppLoop.js";
+import { Debug, Timing } from "cx/util";
+import { enableMsgBoxAlerts, enableTooltips } from "cx/widgets";
+import Demo from "./bugs/GridOnFetchRecords";
+
+let store = new Store();
+
+Widget.resetCounter();
+//Widget.optimizePrepare = false;
+//Widget.prototype.memoize = false;
+//Timing.enable('vdom-render');
+Timing.enable("app-loop");
+Debug.enable("app-data");
+
+enableTooltips();
+enableMsgBoxAlerts();
+
+History.connect(store, "url");
+
+startHotAppLoop(
+   module,
+   document.getElementById("app"),
+   store,
+   <cx>
+
+      <Demo />
+   </cx>,
+);
diff --git a/litmus-ts/package.json b/litmus-ts/package.json
@@ -0,0 +1,42 @@
+{
+   "name": "litmus-ts",
+   "private": true,
+   "version": "1.0.0",
+   "scripts": {
+      "start": "webpack-dev-server --open",
+      "build": "webpack"
+   },
+   "dependencies": {
+      "cx": "workspace:*",
+      "cx-react": "workspace:*",
+      "react": "^19.2.3",
+      "react-dom": "^19.2.3"
+   },
+   "devDependencies": {
+      "@babel/core": "^7.28.5",
+      "@types/node": "^25.0.3",
+      "@types/react": "^19.2.7",
+      "@types/webpack-env": "^1.18.8",
+      "babel-loader": "^10.0.0",
+      "babel-plugin-transform-cx-imports": "^26.0.1",
+      "copy-webpack-plugin": "^12.0.2",
+      "css-loader": "^7.1.2",
+      "file-loader": "^6.2.0",
+      "html-webpack-plugin": "^5.6.5",
+      "mini-css-extract-plugin": "^2.9.2",
+      "sass": "^1.77.8",
+      "sass-loader": "^16.0.6",
+      "style-loader": "^4.0.0",
+      "svg-url-loader": "^8.0.0",
+      "ts-loader": "9.5.4",
+      "typescript": "^5.7.2",
+      "url-loader": "^4.1.1",
+      "webpack": "^5.103.0",
+      "webpack-bundle-analyzer": "^4.10.2",
+      "webpack-cleanup-plugin": "^0.5.1",
+      "webpack-cli": "^5.1.4",
+      "webpack-combine-loaders": "^2.0.4",
+      "webpack-dev-server": "^5.2.2",
+      "webpack-merge": "^6.0.1"
+   }
+}
diff --git a/litmus-ts/tsconfig.json b/litmus-ts/tsconfig.json
@@ -0,0 +1,15 @@
+{
+   "compilerOptions": {
+      "jsx": "react-jsx",
+      //"jsxFactory": "cx",
+      "jsxImportSource": "cx",
+      "module": "esnext",
+      "moduleResolution": "bundler",
+      "esModuleInterop": true,
+      "allowJs": true,
+      "types": ["webpack-env"],
+      "outDir": "dist",
+      "target": "esnext"
+   },
+   "exclude": ["**.spec.**"]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import "~cx/src/variables.scss";
		@import "~cx/src/index.scss";