jac-client 0.2.10__py3-none-any.whl → 0.2.12__py3-none-any.whl

jac_client/examples/css-styling/js-styling/main.jac

@@ -1,18 +1,19 @@
 # Pages
-cl import from react { useEffect }
 cl import from .styles { default as styles }
 
 cl {
     def:pub app -> any {
         has count: int = 0;
 
-        useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
+        can with count entry {
+            console.log("Count changed: ", count);
+        }
 
-        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
+        handleIncrement = lambda e: any  -> None { count = count + 1;};
 
-        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
+        handleDecrement = lambda e: any  -> None { count = count - 1;};
 
-        handleReset = lambda  e: any  -> None{ count = 0;} ;
+        handleReset = lambda e: any  -> None { count = 0;};
 
         countStyle = styles.countDisplayZero
         if count == 0
@@ -20,65 +21,43 @@ cl {
             styles.countDisplayPositive if count > 0 else styles.countDisplayNegative
         );
 
-        return <div
-            style={styles.container}
-        >
-            <div
-                style={styles.card}
-            >
-                <h1
-                    style={styles.title}
-                >
-                    Counter Application
-                </h1>
-                <div
-                    style={styles.divider}
-                ></div>
-                <div
-                    style={styles.counterSection}
-                >
-                    <div
-                        style={styles.label}
-                    >
-                        Current Count
+        return
+            <div style={styles.container}>
+                <div style={styles.card}>
+                    <h1 style={styles.title}>
+                        Counter Application
+                    </h1>
+                    <div style={styles.divider}></div>
+                    <div style={styles.counterSection}>
+                        <div style={styles.label}>
+                            Current Count
+                        </div>
+                        <div style={countStyle}>
+                            {count}
+                        </div>
                     </div>
-                    <div
-                        style={countStyle}
-                    >
-                        {count}
+                    <div style={styles.divider}></div>
+                    <div style={styles.buttonGroup}>
+                        <button
+                            style={styles.buttonDecrement}
+                            onClick={handleDecrement}
+                        >
+                            -
+                        </button>
+                        <button style={styles.buttonReset} onClick={handleReset}>
+                            ↻
+                        </button>
+                        <button
+                            style={styles.buttonIncrement}
+                            onClick={handleIncrement}
+                        >
+                            +
+                        </button>
+                    </div>
+                    <div style={styles.hint}>
+                        Click the buttons to increment, decrement, or reset the counter
                     </div>
                 </div>
-                <div
-                    style={styles.divider}
-                ></div>
-                <div
-                    style={styles.buttonGroup}
-                >
-                    <button
-                        style={styles.buttonDecrement}
-                        onClick={handleDecrement}
-                    >
-                        -
-                    </button>
-                    <button
-                        style={styles.buttonReset}
-                        onClick={handleReset}
-                    >
-                        ↻
-                    </button>
-                    <button
-                        style={styles.buttonIncrement}
-                        onClick={handleIncrement}
-                    >
-                        +
-                    </button>
-                </div>
-                <div
-                    style={styles.hint}
-                >
-                    Click the buttons to increment, decrement, or reset the counter
-                </div>
-            </div>
-        </div>;
+            </div>;
     }
 }

jac_client/examples/css-styling/material-ui/main.jac

@@ -1,4 +1,3 @@
-cl import from react { useEffect }
 cl import from '@mui/material/Button' { default as Button }
 cl import from '@mui/material/Card' { default as Card }
 cl import from '@mui/material/CardContent' { default as CardContent }
@@ -15,108 +14,109 @@ cl {
     def:pub app -> any {
         has count: int = 0;
 
-        useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
+        can with count entry {
+            console.log("Count changed: ", count);
+        }
 
-        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
+        handleIncrement = lambda e: any  -> None { count = count + 1;};
 
-        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
+        handleDecrement = lambda e: any  -> None { count = count - 1;};
 
-        handleReset = lambda  e: any  -> None{ count = 0;} ;
+        handleReset = lambda e: any  -> None { count = 0;};
 
-        return <Box
-            sx={{
-                "display": "flex",
-                "justifyContent": "center",
-                "alignItems": "center",
-                "minHeight": "100vh",
-                "backgroundColor": "#f5f5f5"
-            }}
-        >
-            <Card
-                sx={{"minWidth": 400, "boxShadow": 3}}
+        return
+            <Box
+                sx={{
+                    "display": "flex",
+                    "justifyContent": "center",
+                    "alignItems": "center",
+                    "minHeight": "100vh",
+                    "backgroundColor": "#f5f5f5"
+                }}
             >
-                <CardContent>
-                    <Typography
-                        variant="h4"
-                        component="div"
-                        gutterBottom
-                        sx={{"textAlign": "center", "color": "primary.main"}}
-                    >
-                        Counter Application
-                    </Typography>
-                    <Divider
-                        sx={{"my": 2}}
-                    />
-                    <Box
-                        sx={{
-                            "display": "flex",
-                            "flexDirection": "column",
-                            "alignItems": "center",
-                            "py": 3
-                        }}
-                    >
+                <Card sx={{"minWidth": 400, "boxShadow": 3}}>
+                    <CardContent>
                         <Typography
-                            variant="h6"
-                            color="text.secondary"
+                            variant="h4"
+                            component="div"
                             gutterBottom
+                            sx={{"textAlign": "center", "color": "primary.main"}}
                         >
-                            Current Count
+                            Counter Application
                         </Typography>
-                        <Typography
-                            variant="h1"
-                            component="div"
+                        <Divider sx={{"my": 2}} />
+                        <Box
                             sx={{
-                                "fontWeight": "bold",
-                                "color": "success.main"
-                                if count > 0
-                                else "error.main" if count < 0 else "text.primary"
+                                "display": "flex",
+                                "flexDirection": "column",
+                                "alignItems": "center",
+                                "py": 3
                             }}
                         >
-                            {count}
+                            <Typography
+                                variant="h6"
+                                color="text.secondary"
+                                gutterBottom
+                            >
+                                Current Count
+                            </Typography>
+                            <Typography
+                                variant="h1"
+                                component="div"
+                                sx={{
+                                    "fontWeight": "bold",
+                                    "color": "success.main"
+                                    if count > 0
+                                    else "error.main" if count < 0 else "text.primary"
+                                }}
+                            >
+                                {count}
+                            </Typography>
+                        </Box>
+                    </CardContent>
+                    <Divider />
+                    <CardActions
+                        sx={{
+                            "display": "flex",
+                            "justifyContent": "space-around",
+                            "p": 2
+                        }}
+                    >
+                        <IconButton
+                            color="error"
+                            size="large"
+                            onClick={handleDecrement}
+                            sx={{"border": "2px solid", "borderColor": "error.main"}}
+                        >
+                            <RemoveIcon />
+                        </IconButton>
+                        <IconButton
+                            color="primary"
+                            size="large"
+                            onClick={handleReset}
+                            sx={{"border": "2px solid", "borderColor": "primary.main"}}
+                        >
+                            <RefreshIcon />
+                        </IconButton>
+                        <IconButton
+                            color="success"
+                            size="large"
+                            onClick={handleIncrement}
+                            sx={{"border": "2px solid", "borderColor": "success.main"}}
+                        >
+                            <AddIcon />
+                        </IconButton>
+                    </CardActions>
+                    <Box sx={{"px": 3, "pb": 2}}>
+                        <Typography
+                            variant="caption"
+                            color="text.secondary"
+                            sx={{"display": "block", "textAlign": "center"}}
+                        >
+                            Click the buttons to increment, decrement, or reset the counter
                         </Typography>
                     </Box>
-                </CardContent>
-                <Divider />
-                <CardActions
-                    sx={{"display": "flex", "justifyContent": "space-around", "p": 2}}
-                >
-                    <IconButton
-                        color="error"
-                        size="large"
-                        onClick={handleDecrement}
-                        sx={{"border": "2px solid", "borderColor": "error.main"}}
-                    >
-                        <RemoveIcon />
-                    </IconButton>
-                    <IconButton
-                        color="primary"
-                        size="large"
-                        onClick={handleReset}
-                        sx={{"border": "2px solid", "borderColor": "primary.main"}}
-                    >
-                        <RefreshIcon />
-                    </IconButton>
-                    <IconButton
-                        color="success"
-                        size="large"
-                        onClick={handleIncrement}
-                        sx={{"border": "2px solid", "borderColor": "success.main"}}
-                    >
-                        <AddIcon />
-                    </IconButton>
-                </CardActions>
-                <Box
-                    sx={{"px": 3, "pb": 2}}
-                >
-                    <Typography
-                        variant="caption"
-                        color="text.secondary"
-                        sx={{"display": "block", "textAlign": "center"}}
-                    >
-                        Click the buttons to increment, decrement, or reset the counter
-                    </Typography>
-                </Box>
-            </Card>
-        </Box>;
+                </Card>
+            </Box>;
     }
 }

jac_client/examples/css-styling/pure-css/main.jac

@@ -1,64 +1,55 @@
 # Pages
-cl import from react { useEffect }
 cl import ".styles.css";
 
 cl {
     def:pub app -> any {
         has count: int = 0;
 
-        useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
+        can with count entry {
+            console.log("Count changed: ", count);
+        }
 
-        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
+        handleIncrement = lambda e: any  -> None { count = count + 1;};
 
-        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
+        handleDecrement = lambda e: any  -> None { count = count - 1;};
 
-        handleReset = lambda  e: any  -> None{ count = 0;} ;
+        handleReset = lambda e: any  -> None { count = 0;};
 
         countClass = "countDisplay " + (
             "positive" if count > 0 else "negative" if count < 0 else "zero"
         );
 
-        return <div className="container">
-            <div className="card">
-                <h1 className="title">
-                    Counter Application
-                </h1>
-                <div className="divider"></div>
-                <div className="counterSection">
-                    <div className="label">
-                        Current Count
+        return
+            <div className="container">
+                <div className="card">
+                    <h1 className="title">
+                        Counter Application
+                    </h1>
+                    <div className="divider"></div>
+                    <div className="counterSection">
+                        <div className="label">
+                            Current Count
+                        </div>
+                        <div className={countClass}>
+                            {count}
+                        </div>
                     </div>
-                    <div
-                        className={countClass}
-                    >
-                        {count}
+                    <div className="divider"></div>
+                    <div className="buttonGroup">
+                        <button className="btn btnDecrement" onClick={handleDecrement}>
+                            -
+                        </button>
+                        <button className="btn btnReset" onClick={handleReset}>
+                            ↻
+                        </button>
+                        <button className="btn btnIncrement" onClick={handleIncrement}>
+                            +
+                        </button>
+                    </div>
+                    <div className="hint">
+                        Click the buttons to increment, decrement, or reset the counter
                     </div>
                 </div>
-                <div className="divider"></div>
-                <div className="buttonGroup">
-                    <button
-                        className="btn btnDecrement"
-                        onClick={handleDecrement}
-                    >
-                        -
-                    </button>
-                    <button
-                        className="btn btnReset"
-                        onClick={handleReset}
-                    >
-                        ↻
-                    </button>
-                    <button
-                        className="btn btnIncrement"
-                        onClick={handleIncrement}
-                    >
-                        +
-                    </button>
-                </div>
-                <div className="hint">
-                    Click the buttons to increment, decrement, or reset the counter
-                </div>
-            </div>
-        </div>;
+            </div>;
     }
 }

jac_client/examples/css-styling/sass-example/main.jac

@@ -1,64 +1,55 @@
 # Pages
-cl import from react { useEffect }
 cl import ".styles.scss";
 
 cl {
     def:pub app -> any {
         has count: int = 0;
 
-        useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
+        can with count entry {
+            console.log("Count changed: ", count);
+        }
 
-        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
+        handleIncrement = lambda e: any  -> None { count = count + 1;};
 
-        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
+        handleDecrement = lambda e: any  -> None { count = count - 1;};
 
-        handleReset = lambda  e: any  -> None{ count = 0;} ;
+        handleReset = lambda e: any  -> None { count = 0;};
 
         countClass = "countDisplay " + (
             "positive" if count > 0 else "negative" if count < 0 else "zero"
         );
 
-        return <div className="container">
-            <div className="card">
-                <h1 className="title">
-                    Counter Application
-                </h1>
-                <div className="divider"></div>
-                <div className="counterSection">
-                    <div className="label">
-                        Current Count
+        return
+            <div className="container">
+                <div className="card">
+                    <h1 className="title">
+                        Counter Application
+                    </h1>
+                    <div className="divider"></div>
+                    <div className="counterSection">
+                        <div className="label">
+                            Current Count
+                        </div>
+                        <div className={countClass}>
+                            {count}
+                        </div>
                     </div>
-                    <div
-                        className={countClass}
-                    >
-                        {count}
+                    <div className="divider"></div>
+                    <div className="buttonGroup">
+                        <button className="btn btnDecrement" onClick={handleDecrement}>
+                            -
+                        </button>
+                        <button className="btn btnReset" onClick={handleReset}>
+                            ↻
+                        </button>
+                        <button className="btn btnIncrement" onClick={handleIncrement}>
+                            +
+                        </button>
+                    </div>
+                    <div className="hint">
+                        Click the buttons to increment, decrement, or reset the counter
                     </div>
                 </div>
-                <div className="divider"></div>
-                <div className="buttonGroup">
-                    <button
-                        className="btn btnDecrement"
-                        onClick={handleDecrement}
-                    >
-                        -
-                    </button>
-                    <button
-                        className="btn btnReset"
-                        onClick={handleReset}
-                    >
-                        ↻
-                    </button>
-                    <button
-                        className="btn btnIncrement"
-                        onClick={handleIncrement}
-                    >
-                        +
-                    </button>
-                </div>
-                <div className="hint">
-                    Click the buttons to increment, decrement, or reset the counter
-                </div>
-            </div>
-        </div>;
+            </div>;
     }
 }

jac_client/examples/css-styling/styled-components/main.jac

@@ -1,5 +1,4 @@
 # Pages
-cl import from react { useEffect }
 cl import from .styled {
     Container,
     Card,
@@ -17,55 +16,47 @@ cl {
     def:pub app -> any {
         has count: int = 0;
 
-        useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
+        can with count entry {
+            console.log("Count changed: ", count);
+        }
 
-        handleIncrement = lambda  e: any  -> None{ count = count + 1;} ;
+        handleIncrement = lambda e: any  -> None { count = count + 1;};
 
-        handleDecrement = lambda  e: any  -> None{ count = count - 1;} ;
+        handleDecrement = lambda e: any  -> None { count = count - 1;};
 
-        handleReset = lambda  e: any  -> None{ count = 0;} ;
+        handleReset = lambda e: any  -> None { count = 0;};
 
-        return <Container>
-            <Card>
-                <Title>
-                    Counter Application
-                </Title>
-                <Divider></Divider>
-                <CounterSection>
-                    <Label>
-                        Current Count
-                    </Label>
-                    <CountDisplay
-                        count={count}
-                    >
-                        {count}
-                    </CountDisplay>
-                </CounterSection>
-                <Divider></Divider>
-                <ButtonGroup>
-                    <Button
-                        bgColor="#ef4444"
-                        onClick={handleDecrement}
-                    >
-                        -
-                    </Button>
-                    <Button
-                        bgColor="#6b7280"
-                        onClick={handleReset}
-                    >
-                        ↻
-                    </Button>
-                    <Button
-                        bgColor="#22c55e"
-                        onClick={handleIncrement}
-                    >
-                        +
-                    </Button>
-                </ButtonGroup>
-                <Hint>
-                    Click the buttons to increment, decrement, or reset the counter
-                </Hint>
-            </Card>
-        </Container>;
+        return
+            <Container>
+                <Card>
+                    <Title>
+                        Counter Application
+                    </Title>
+                    <Divider></Divider>
+                    <CounterSection>
+                        <Label>
+                            Current Count
+                        </Label>
+                        <CountDisplay count={count}>
+                            {count}
+                        </CountDisplay>
+                    </CounterSection>
+                    <Divider></Divider>
+                    <ButtonGroup>
+                        <Button bgColor="#ef4444" onClick={handleDecrement}>
+                            -
+                        </Button>
+                        <Button bgColor="#6b7280" onClick={handleReset}>
+                            ↻
+                        </Button>
+                        <Button bgColor="#22c55e" onClick={handleIncrement}>
+                            +
+                        </Button>
+                    </ButtonGroup>
+                    <Hint>
+                        Click the buttons to increment, decrement, or reset the counter
+                    </Hint>
+                </Card>
+            </Container>;
     }
 }