Skip to content

Commit fceaf48

Browse files
ognjenstognjenst
committed
Add litmus-ts project with initial setup and components
1 parent 1254920 commit fceaf48

File tree

10 files changed

+406
-1
lines changed

10 files changed

+406
-1
lines changed

‎litmus-ts/TestWidget.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/** @jsxImportSource react */
2+
3+
import { Widget } from "cx/widgets";
4+
import { RenderingContext, Instance } from "cx/ui";
5+
6+
interface TestWidgetProps {}
7+
8+
export class TestWidget extends Widget {
9+
constructor(props: TestWidgetProps) {
10+
super(props);
11+
}
12+
13+
render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
14+
return <div key={key}>Test Widget</div>;
15+
}
16+
}

‎litmus-ts/bugs/GridOnFetchRecords.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
2+
import { createAccessorModelProxy, createFunctionalComponent } from "cx/ui";
3+
import { Button, Grid, GridColumnConfig, LookupField, PureContainer } from "cx/widgets";
4+
5+
const tags = ["history", "american", "crime", "tets"].map(tag => ({ name: tag, id: tag }));
6+
7+
interface Model {
8+
$page: {
9+
showGrid: boolean;
10+
tag: string;
11+
}
12+
}
13+
14+
const m = createAccessorModelProxy<Model>();
15+
16+
const columns = [
17+
{
18+
field: "id",
19+
header: "ID",
20+
},
21+
{
22+
field: "title",
23+
header: "Title",
24+
},
25+
{
26+
field: "body",
27+
header: "Body",
28+
},
29+
] as GridColumnConfig[];
30+
31+
export default createFunctionalComponent(() => (<cx>
32+
<Button text="Show Grid" onClick={(e, { store }) => store.toggle(m.$page.showGrid)} />
33+
34+
<PureContainer visible={m.$page.showGrid}>
35+
<LookupField
36+
label="Tags"
37+
options={tags}
38+
value={m.$page.tag}
39+
optionTextField="name"
40+
/>
41+
<Grid
42+
columns={columns}
43+
filterParams={{
44+
tag: m.$page.tag,
45+
}}
46+
infinite
47+
scrollable
48+
onFetchRecords={async ({ }, { store }) => {
49+
const tag = store.get(m.$page.tag);
50+
const response = await fetch(`https://dummyjson.com/posts`);
51+
const data = await response.json();
52+
let finalData = data.posts;
53+
54+
if (tag) {
55+
finalData = finalData.filter(post => post.tags.includes(tag));
56+
}
57+
58+
return finalData;
59+
}} />
60+
</PureContainer>
61+
62+
</cx>))

‎litmus-ts/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!doctype html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
6+
<title>Cx - Litmus</title>
7+
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
8+
9+
<!--<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>-->
10+
<!--<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>-->
11+
12+
<!--<script src="https://unpkg.com/react@15.4.2/dist/react.min.js"></script>-->
13+
<!--<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js"></script>-->
14+
</head>
15+
<body>
16+
<div id="app"></div>
17+
</body>
18+
</html>

‎litmus-ts/index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "~cx/src/variables.scss";
2+
@import "~cx/src/index.scss";

‎litmus-ts/index.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Store } from "cx/data";
2+
import "cx/locale/de-de.js";
3+
import { History, Widget } from "cx/ui";
4+
import { startHotAppLoop } from "cx/ui/app/startHotAppLoop.js";
5+
import { Debug, Timing } from "cx/util";
6+
import { enableMsgBoxAlerts, enableTooltips } from "cx/widgets";
7+
import Demo from "./bugs/GridOnFetchRecords";
8+
9+
let store = new Store();
10+
11+
Widget.resetCounter();
12+
//Widget.optimizePrepare = false;
13+
//Widget.prototype.memoize = false;
14+
//Timing.enable('vdom-render');
15+
Timing.enable("app-loop");
16+
Debug.enable("app-data");
17+
18+
enableTooltips();
19+
enableMsgBoxAlerts();
20+
21+
History.connect(store, "url");
22+
23+
startHotAppLoop(
24+
module,
25+
document.getElementById("app"),
26+
store,
27+
<cx>
28+
29+
<Demo />
30+
</cx>,
31+
);

‎litmus-ts/package.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "litmus-ts",
3+
"private": true,
4+
"version": "1.0.0",
5+
"scripts": {
6+
"start": "webpack-dev-server --open",
7+
"build": "webpack"
8+
},
9+
"dependencies": {
10+
"cx": "workspace:*",
11+
"cx-react": "workspace:*",
12+
"react": "^19.2.3",
13+
"react-dom": "^19.2.3"
14+
},
15+
"devDependencies": {
16+
"@babel/core": "^7.28.5",
17+
"@types/node": "^25.0.3",
18+
"@types/react": "^19.2.7",
19+
"@types/webpack-env": "^1.18.8",
20+
"babel-loader": "^10.0.0",
21+
"babel-plugin-transform-cx-imports": "^26.0.1",
22+
"copy-webpack-plugin": "^12.0.2",
23+
"css-loader": "^7.1.2",
24+
"file-loader": "^6.2.0",
25+
"html-webpack-plugin": "^5.6.5",
26+
"mini-css-extract-plugin": "^2.9.2",
27+
"sass": "^1.77.8",
28+
"sass-loader": "^16.0.6",
29+
"style-loader": "^4.0.0",
30+
"svg-url-loader": "^8.0.0",
31+
"ts-loader": "9.5.4",
32+
"typescript": "^5.7.2",
33+
"url-loader": "^4.1.1",
34+
"webpack": "^5.103.0",
35+
"webpack-bundle-analyzer": "^4.10.2",
36+
"webpack-cleanup-plugin": "^0.5.1",
37+
"webpack-cli": "^5.1.4",
38+
"webpack-combine-loaders": "^2.0.4",
39+
"webpack-dev-server": "^5.2.2",
40+
"webpack-merge": "^6.0.1"
41+
}
42+
}

‎litmus-ts/tsconfig.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"jsx": "react-jsx",
4+
//"jsxFactory": "cx",
5+
"jsxImportSource": "cx",
6+
"module": "esnext",
7+
"moduleResolution": "bundler",
8+
"esModuleInterop": true,
9+
"allowJs": true,
10+
"types": ["webpack-env"],
11+
"outDir": "dist",
12+
"target": "esnext"
13+
},
14+
"exclude": ["**.spec.**"]
15+
}

‎litmus-ts/webpack.config.js‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
const webpack = require("webpack"),
2+
HtmlWebpackPlugin = require("html-webpack-plugin"),
3+
MiniCssExtractPlugin = require("mini-css-extract-plugin"),
4+
{ merge } = require("webpack-merge"),
5+
path = require("path");
6+
7+
let production = process.env.npm_lifecycle_event && process.env.npm_lifecycle_event.indexOf("build") == 0;
8+
9+
let common = {
10+
resolve: {
11+
// alias: {
12+
// cx: path.resolve(path.join(__dirname, "../packages/cx")),
13+
// },
14+
extensions: [".js", ".ts", ".tsx", ".json"],
15+
},
16+
17+
module: {
18+
rules: [
19+
{
20+
test: /\.json$/,
21+
loader: "json-loader",
22+
},
23+
{
24+
test: /\.(ts|tsx)$/,
25+
include: /(litmus-ts)/,
26+
exclude: /node_modules/,
27+
use: [
28+
{
29+
loader: "babel-loader",
30+
options: {
31+
plugins: [["transform-cx-imports", { useSrc: true }]],
32+
},
33+
},
34+
{
35+
loader: "ts-loader",
36+
options: {
37+
colors: false,
38+
logLevel: "info",
39+
},
40+
},
41+
],
42+
},
43+
],
44+
},
45+
entry: {
46+
app: [__dirname + "/index.tsx", __dirname + "/index.scss"],
47+
},
48+
output: {
49+
path: __dirname,
50+
filename: "[name].js",
51+
},
52+
plugins: [
53+
//new webpack.optimize.CommonsChunkPlugin("vendor"),
54+
new HtmlWebpackPlugin({
55+
template: path.join(__dirname, "index.html"),
56+
}),
57+
// new CxScssManifestPlugin({
58+
// outputPath: path.join(__dirname, "manifest.scss")
59+
// })
60+
],
61+
stats: {
62+
usedExports: true,
63+
},
64+
cache: {
65+
// 1. Set cache type to filesystem
66+
type: "filesystem",
67+
68+
buildDependencies: {
69+
// 2. Add your config as buildDependency to get cache invalidation on config change
70+
config: [__filename],
71+
72+
// 3. If you have other things the build depends on you can add them here
73+
// Note that webpack, loaders and all modules referenced from your config are automatically added
74+
},
75+
},
76+
};
77+
78+
let specific;
79+
80+
if (production) {
81+
specific = {
82+
mode: "production",
83+
target: ["web", "es2022"], // Modern browsers for better tree-shaking
84+
module: {
85+
rules: [
86+
{
87+
test: /\.scss$/,
88+
use: [
89+
MiniCssExtractPlugin.loader,
90+
"css-loader",
91+
{
92+
loader: "sass-loader",
93+
options: {
94+
sassOptions: {
95+
quietDeps: true,
96+
silenceDeprecations: ["legacy-js-api", "import", "global-builtin"],
97+
},
98+
},
99+
},
100+
],
101+
},
102+
{
103+
test: /\.css$/,
104+
use: [MiniCssExtractPlugin.loader, "css-loader"],
105+
},
106+
],
107+
},
108+
109+
plugins: [
110+
new webpack.DefinePlugin({
111+
"process.env.NODE_ENV": JSON.stringify("production"),
112+
}),
113+
114+
new MiniCssExtractPlugin({
115+
filename: "app.css",
116+
}),
117+
],
118+
119+
output: {
120+
path: path.join(__dirname, "dist"),
121+
publicPath: ".",
122+
},
123+
124+
optimization: {
125+
usedExports: true,
126+
sideEffects: false,
127+
},
128+
};
129+
} else {
130+
specific = {
131+
module: {
132+
rules: [
133+
{
134+
test: /\.scss$/,
135+
use: [
136+
"style-loader",
137+
"css-loader",
138+
{
139+
loader: "sass-loader",
140+
options: {
141+
sassOptions: {
142+
quietDeps: true,
143+
silenceDeprecations: ["legacy-js-api", "import", "global-builtin"],
144+
},
145+
},
146+
},
147+
],
148+
},
149+
{
150+
test: /\.css$/,
151+
use: ["style-loader", "css-loader"],
152+
},
153+
],
154+
},
155+
mode: "development",
156+
//target: ["web", "es5"], //Uncomment for IE testing
157+
plugins: [
158+
new webpack.DefinePlugin({
159+
"process.env.NODE_ENV": JSON.stringify("development"),
160+
"process.env.NODE_DEBUG": JSON.stringify(false),
161+
}),
162+
],
163+
output: {
164+
publicPath: "/",
165+
},
166+
performance: {
167+
hints: false,
168+
},
169+
//devtool: "eval",
170+
devServer: {
171+
//contentBase: "/",
172+
hot: true,
173+
port: 8091,
174+
//noInfo: false,
175+
//inline: true,
176+
historyApiFallback: true,
177+
//quiet: true
178+
},
179+
};
180+
}
181+
182+
module.exports = merge(common, specific);

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@
5151
"benchmark",
5252
"fiddle",
5353
"ts-minimal",
54-
"homedocs"
54+
"homedocs",
55+
"litmus-ts"
5556
],
5657
"jest": {
5758
"transform": {

0 commit comments

Comments
 (0)