jac-client 0.2.0__py3-none-any.whl → 0.2.3__py3-none-any.whl

jac_client/examples/asset-serving/import-alias/vite.config.js

@@ -0,0 +1,28 @@
+
+import { defineConfig } from "vite";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: ".", // base folder
+  build: {
+    rollupOptions: {
+      input: "build/main.js", // your compiled entry file
+      output: {
+        entryFileNames: "client.[hash].js", // name of the final js file
+        assetFileNames: "[name].[ext]",
+      },
+    },
+    outDir: "dist", // final bundled output
+    emptyOutDir: true,
+  },
+  publicDir: false,
+  resolve: {
+    alias: {
+      "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+      "@jac-client/assets": path.resolve(__dirname, "src/assets"),
+    },
+  },
+});

jac_client/examples/basic/app.jac

@@ -1,16 +1,21 @@
-
 # Pages
-cl import from react {useState, useEffect}
+cl import from react { useState, useEffect }
 cl {
-    def app() -> any {
+    def app()  -> any {
         let [count, setCount] = useState(0);
-        useEffect(lambda -> None {
-            console.log("Count: ", count);
-        }, [count]);
+        useEffect(lambda   -> None{ console.log("Count: ", count);} , [count]);
         return <div>
-            <h1>Hello, World!</h1>
-            <p>Count: {count}</p>
-            <button onClick={lambda e: any ->  None {setCount(count + 1);}}>Increment</button>
+            <h1>
+                Hello, World!
+            </h1>
+            <p>
+                Count: {count}
+            </p>
+            <button
+                onClick={lambda  e: any  -> None{ setCount(count + 1);} }
+            >
+                Increment
+            </button>
         </div>;
     }
 }

jac_client/examples/basic/package.json

@@ -24,4 +24,4 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   }
-}
+}

jac_client/examples/basic/vite.config.js

@@ -25,4 +25,3 @@ export default defineConfig({
     },
   },
 });
-

jac_client/examples/basic-auth/package.json

@@ -24,4 +24,4 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   }
-}
+}

jac_client/examples/basic-auth/vite.config.js

@@ -25,4 +25,3 @@ export default defineConfig({
     },
   },
 });
-

jac_client/examples/basic-auth-with-router/package.json

@@ -25,4 +25,4 @@
     "react-dom": "^19.2.0",
     "react-router-dom": "^6.30.1"
   }
-}
+}

jac_client/examples/basic-auth-with-router/vite.config.js

@@ -25,4 +25,3 @@ export default defineConfig({
     },
   },
 });
-

jac_client/examples/basic-full-stack/package.json

@@ -25,4 +25,4 @@
     "react-dom": "^19.2.0",
     "react-router-dom": "^7.3.0"
   }
-}
+}

jac_client/examples/basic-full-stack/vite.config.js

@@ -25,4 +25,3 @@ export default defineConfig({
     },
   },
 });
-

jac_client/examples/css-styling/js-styling/.babelrc

@@ -0,0 +1,9 @@
+
+{
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "modules": false
+        }
+    ], "@babel/preset-react"]
+}

jac_client/examples/css-styling/js-styling/README.md

@@ -0,0 +1,183 @@
+# JavaScript Styling Example
+
+This example demonstrates styling a Jac application using JavaScript objects for inline styles.
+
+## Overview
+
+JavaScript styling uses JavaScript objects to define styles, which are then applied via the `style` prop. This approach is perfect for:
+- Dynamic styling based on state
+- Programmatic style generation
+- Component-scoped styles without CSS files
+- React-style inline styling
+
+## Project Structure
+
+```
+js-styling/
+├── app.jac          # Main application component
+├── styles.js        # Style objects exported as default
+├── package.json     # Dependencies
+└── vite.config.js   # Vite configuration
+```
+
+## Setup
+
+1. Install dependencies:
+```bash
+npm install
+```
+
+2. Run the application:
+```bash
+jac serve app.jac
+```
+
+## How It Works
+
+### 1. Define Style Objects
+
+In `styles.js`, export a default object with all styles:
+
+```javascript
+const countDisplay = {
+    fontSize: "3.75rem",
+    fontWeight: "bold",
+    transition: "color 0.3s ease"
+};
+
+export default {
+    container: {
+        minHeight: "100vh",
+        background: "linear-gradient(to bottom right, #dbeafe, #e0e7ff)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem"
+    },
+    card: {
+        backgroundColor: "#ffffff",
+        borderRadius: "1rem",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        padding: "2rem",
+        maxWidth: "28rem",
+        width: "100%"
+    },
+    countDisplayZero: {
+        ...countDisplay,
+        color: "#1f2937"
+    },
+    countDisplayPositive: {
+        ...countDisplay,
+        color: "#16a34a"
+    },
+    // ... more styles
+};
+```
+
+### 2. Import Styles
+
+In your Jac file:
+
+```jac
+cl import from .styles { default as styles }
+```
+
+### 3. Apply Styles
+
+Use the `style` prop with style objects:
+
+```jac
+return <div style={styles.container}>
+    <div style={styles.card}>
+        <h1 style={styles.title}>Counter Application</h1>
+    </div>
+</div>;
+```
+
+### 4. Dynamic Styles
+
+Select styles based on state:
+
+```jac
+let countStyle = styles.countDisplayZero if count == 0 else (styles.countDisplayPositive if count > 0 else styles.countDisplayNegative);
+
+return <div style={countStyle}>{count}</div>;
+```
+
+## Style Object Format
+
+JavaScript style objects use camelCase property names (React convention):
+
+```javascript
+{
+    backgroundColor: "#ffffff",  // not background-color
+    fontSize: "1.5rem",         // not font-size
+    marginTop: "10px",          // not margin-top
+    zIndex: 1                   // not z-index
+}
+```
+
+## Best Practices
+
+1. **Use object spread**: Share common styles with spread operator
+2. **Organize by component**: Group related styles together
+3. **Use constants**: Define reusable values at the top
+4. **CamelCase properties**: Follow React naming convention
+5. **Extract complex logic**: Move style calculations to functions
+
+## Advantages
+
+- ✅ Dynamic styling based on props/state
+- ✅ No CSS file needed
+- ✅ Type-safe (with TypeScript)
+- ✅ Component-scoped by default
+- ✅ Programmatic style generation
+
+## Limitations
+
+- ❌ No pseudo-classes (hover, focus, etc.)
+- ❌ No media queries
+- ❌ No CSS animations (use JavaScript)
+- ❌ Verbose for complex styles
+- ❌ No CSS preprocessor features
+
+## When to Use
+
+Choose JavaScript Styling when:
+- You need dynamic styles based on state
+- You want programmatic style generation
+- You prefer keeping styles in JavaScript
+- You're building component libraries
+- You need runtime style calculations
+
+## Advanced Patterns
+
+### Style Functions
+
+Create functions that return styles:
+
+```javascript
+export const getButtonStyle = (variant) => ({
+    ...buttonBase,
+    backgroundColor: variant === 'primary' ? '#007bff' : '#6c757d'
+});
+```
+
+### Conditional Styles
+
+Use ternary operators for conditional styles:
+
+```javascript
+export default {
+    button: {
+        backgroundColor: isActive ? '#007bff' : '#6c757d',
+        opacity: isDisabled ? 0.5 : 1,
+    }
+};
+```
+
+## Next Steps
+
+- Explore [Styled Components](../styled-components/) for CSS-in-JS with more features
+- Check out [Emotion](../emotion-example/) for similar CSS-in-JS approach (coming soon)
+- Learn about [CSS Modules](../css-modules/) for scoped CSS (coming soon)

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

@@ -0,0 +1,84 @@
+# Pages
+cl import from react { useState, useEffect }
+cl import from .styles { default as styles }
+
+cl {
+    def app()  -> any {
+        let [count, setCount] = useState(0);
+
+        useEffect(lambda   -> None{ console.log("Count changed: ", count);} , [count]);
+
+        let handleIncrement = lambda  e: any  -> None{ setCount(count + 1);} ;
+
+        let handleDecrement = lambda  e: any  -> None{ setCount(count - 1);} ;
+
+        let handleReset = lambda  e: any  -> None{ setCount(0);} ;
+
+        let countStyle = styles.countDisplayZero
+        if count == 0
+        else (
+            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
+                    </div>
+                    <div
+                        style={countStyle}
+                    >
+                        {count}
+                    </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>;
+    }
+}

jac_client/examples/css-styling/js-styling/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bootstrap-example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "build": "npm run compile && vite build",
+    "dev": "vite dev",
+    "preview": "vite preview",
+    "compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "Jac application: bootstrap-example",
+  "type": "module",
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "vite": "^6.4.1"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1"
+  }
+}

jac_client/examples/css-styling/js-styling/styles.js

@@ -0,0 +1,100 @@
+// Style objects for the counter app
+const countDisplay = {
+    fontSize: "3.75rem",
+    fontWeight: "bold",
+    transition: "color 0.3s ease"
+};
+
+const button = {
+    color: "#ffffff",
+    fontWeight: "bold",
+    padding: "0.75rem 1.5rem",
+    borderRadius: "0.5rem",
+    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+    transition: "all 0.2s ease",
+    fontSize: "1.25rem",
+    border: "none",
+    cursor: "pointer"
+};
+
+export default {
+    container: {
+        minHeight: "100vh",
+        background: "linear-gradient(to bottom right, #dbeafe, #e0e7ff)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem"
+    },
+    card: {
+        backgroundColor: "#ffffff",
+        borderRadius: "1rem",
+        boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+        padding: "2rem",
+        maxWidth: "28rem",
+        width: "100%"
+    },
+    title: {
+        fontSize: "1.875rem",
+        fontWeight: "bold",
+        color: "#1f2937",
+        textAlign: "center",
+        marginBottom: "1.5rem"
+    },
+    divider: {
+        height: "1px",
+        background: "linear-gradient(to right, transparent, #d1d5db, transparent)",
+        marginBottom: "1.5rem"
+    },
+    counterSection: {
+        textAlign: "center",
+        marginBottom: "2rem"
+    },
+    label: {
+        fontSize: "0.875rem",
+        fontWeight: "600",
+        color: "#4b5563",
+        marginBottom: "0.5rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em"
+    },
+    countDisplay: countDisplay,
+    countDisplayZero: {
+        ...countDisplay,
+        color: "#1f2937"
+    },
+    countDisplayPositive: {
+        ...countDisplay,
+        color: "#16a34a"
+    },
+    countDisplayNegative: {
+        ...countDisplay,
+        color: "#dc2626"
+    },
+    buttonGroup: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "1rem",
+        marginBottom: "1.5rem"
+    },
+    button: button,
+    buttonDecrement: {
+        ...button,
+        backgroundColor: "#ef4444"
+    },
+    buttonReset: {
+        ...button,
+        backgroundColor: "#6b7280"
+    },
+    buttonIncrement: {
+        ...button,
+        backgroundColor: "#22c55e"
+    },
+    hint: {
+        textAlign: "center",
+        fontSize: "0.875rem",
+        color: "#6b7280",
+        fontStyle: "italic"
+    }
+};

jac_client/examples/css-styling/js-styling/vite.config.js

@@ -0,0 +1,27 @@
+
+import { defineConfig } from "vite";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  root: ".", // base folder
+  build: {
+    rollupOptions: {
+      input: "build/main.js", // your compiled entry file
+      output: {
+        entryFileNames: "client.[hash].js", // name of the final js file
+        assetFileNames: "[name].[ext]",
+      },
+    },
+    outDir: "dist", // final bundled output
+    emptyOutDir: true,
+  },
+  publicDir: false,
+  resolve: {
+    alias: {
+      "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+    },
+  },
+});

jac_client/examples/css-styling/material-ui/.babelrc

@@ -0,0 +1,9 @@
+
+{
+    "presets": [[
+        "@babel/preset-env",
+        {
+            "modules": false
+        }
+    ], "@babel/preset-react"]
+}

jac_client/examples/css-styling/material-ui/README.md

@@ -0,0 +1,16 @@
+# my-test-app
+
+## Running Jac Code
+
+make sure node modules are installed:
+```bash
+npm install
+```
+
+To run your Jac code, use the Jac CLI:
+
+```bash
+jac serve app.jac
+```
+
+Happy coding with Jac!