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

jac_client/examples/little-x/submit-button.jac

@@ -5,4 +5,4 @@ cl def SubmitButton() -> any {
                 {"width" : "100%" , "padding" : "10px" , "backgroundColor" : "#1da1f2" , "color" : "white" , "border" : "none" , "borderRadius" : "4px" , "cursor" : "pointer" }}>
             Sign Up
             </button>
-}
+}

jac_client/examples/nested-folders/nested-advance/.babelrc

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

jac_client/examples/nested-folders/nested-advance/ButtonRoot.jac

@@ -0,0 +1,11 @@
+# Root Level Button
+cl import from antd { Button }
+
+cl def ButtonRoot()  -> any {
+    return <Button
+        type="primary"
+        size="large"
+    >
+        Root Level Button
+    </Button>;
+}

jac_client/examples/nested-folders/nested-advance/README.md

@@ -0,0 +1,77 @@
+# Nested Folder Levels Example
+
+This example demonstrates multiple levels of folder nesting and how relative imports work across different directory levels.
+
+## Project Structure
+
+```
+nested-advance/
+├── app.jac                    # Root entry point
+├── ButtonRoot.jac            # Root level button
+└── level1/
+    ├── ButtonSecondL.jac     # Second level button
+    ├── Card.jac              # Card component (imports from root and level2)
+    └── level2/
+        └── ButtonThirdL.jac  # Third level button
+```
+
+## Import Patterns Demonstrated
+
+### 1. Root Level (`app.jac`)
+```jac
+# Import from root
+cl import from .ButtonRoot { ButtonRoot }
+
+# Import from level1
+cl import from .level1.ButtonSecondL { ButtonSecondL }
+
+# Import from level1/level2
+cl import from .level1.level2.ButtonThirdL { ButtonThirdL }
+```
+
+### 2. Second Level (`level1/ButtonSecondL.jac`)
+```jac
+# Import from root (go up one level with ..)
+cl import from ..ButtonRoot { ButtonRoot }
+```
+
+### 3. Card Component (`level1/Card.jac`)
+This demonstrates importing from both above and below:
+```jac
+# Import from root (go up two levels with ..)
+cl import from ..ButtonRoot { ButtonRoot }
+
+# Import from level2 (go down one level with .level2)
+cl import from .level2.ButtonThirdL { ButtonThirdL }
+```
+
+### 4. Third Level (`level1/level2/ButtonThirdL.jac`)
+```jac
+# Import from root (go up three levels with ...)
+cl import from ...ButtonRoot { ButtonRoot }
+
+# Import from second level (go up one level with ..)
+cl import from ..ButtonSecondL { ButtonSecondL }
+```
+
+## Running the Example
+
+Make sure node modules are installed:
+```bash
+npm install
+```
+
+To run your Jac code, use the Jac CLI:
+```bash
+jac serve app.jac
+```
+
+## Key Concepts
+
+- **Single dot (`.`)** - Current directory
+- **Double dot (`..`)** - Parent directory (one level up)
+- **Triple dot (`...`)** - Two levels up
+- **Multiple dots** - Continue going up the directory tree
+- **Dot notation after dots** - Go down into subdirectories (e.g., `.level2`)
+
+This example shows how folder structure is preserved during compilation, ensuring all relative imports work correctly!

jac_client/examples/nested-folders/nested-advance/app.jac

@@ -0,0 +1,35 @@
+# Nested Folder Levels Example
+cl import from .ButtonRoot { ButtonRoot }
+cl import from .level1.ButtonSecondL { ButtonSecondL }
+cl import from .level1.level2.ButtonThirdL { ButtonThirdL }
+cl import from .level1.Card { Card }
+
+cl def app()  -> any {
+    return <div
+        style={{padding: "20px"}}
+    >
+        <h1>
+            Nested Folder Levels Demo
+        </h1>
+        <div
+            style={{margin: "10px 0"}}
+        >
+            <ButtonRoot />
+        </div>
+        <div
+            style={{margin: "10px 0"}}
+        >
+            <ButtonSecondL />
+        </div>
+        <div
+            style={{margin: "10px 0"}}
+        >
+            <ButtonThirdL />
+        </div>
+        <div
+            style={{margin: "10px 0"}}
+        >
+            <Card />
+        </div>
+    </div>;
+}

jac_client/examples/nested-folders/nested-advance/level1/ButtonSecondL.jac

@@ -0,0 +1,19 @@
+# Second Level Button (level1/)
+cl import from antd { Button }
+cl import from ..ButtonRoot { ButtonRoot }
+
+cl def ButtonSecondL()  -> any {
+    return <div>
+        <Button
+            type="default"
+            size="large"
+        >
+            Second Level Button (imports from root)
+        </Button>
+        <div
+            style={{marginTop: "10px"}}
+        >
+            <ButtonRoot />
+        </div>
+    </div>;
+}

jac_client/examples/nested-folders/nested-advance/level1/Card.jac

@@ -0,0 +1,43 @@
+# Card Component on Second Level
+# Imports from both above (root) and below (level2)
+cl import from ..ButtonRoot {
+    ButtonRoot
+}
+cl import from .level2.ButtonThirdL { ButtonThirdL }
+
+cl def Card()  -> any {
+    return <div
+        style={{
+            border: "2px solid #007bff",
+            borderRadius: "8px",
+            padding: "20px",
+            margin: "10px 0",
+            backgroundColor: "#f8f9fa"
+        }}
+    >
+        <h3>
+            Card Component (Second Level)
+        </h3>
+        <p>
+            This card imports from:
+        </p>
+        <ul>
+            <li>
+                Root level: ButtonRoot (using ..)
+            </li>
+            <li>
+                Third level: ButtonThirdL (using .level2)
+            </li>
+        </ul>
+        <div
+            style={{marginTop: "15px"}}
+        >
+            <ButtonRoot />
+        </div>
+        <div
+            style={{marginTop: "10px"}}
+        >
+            <ButtonThirdL />
+        </div>
+    </div>;
+}

jac_client/examples/nested-folders/nested-advance/level1/level2/ButtonThirdL.jac

@@ -0,0 +1,25 @@
+# Third Level Button (level1/level2/)
+cl import from antd { Button }
+cl import from ...ButtonRoot { ButtonRoot }
+cl import from ..ButtonSecondL { ButtonSecondL }
+
+cl def ButtonThirdL()  -> any {
+    return <div>
+        <Button
+            type="dashed"
+            size="large"
+        >
+            Third Level Button (imports from root and second level)
+        </Button>
+        <div
+            style={{marginTop: "10px"}}
+        >
+            <ButtonRoot />
+        </div>
+        <div
+            style={{marginTop: "10px"}}
+        >
+            <ButtonSecondL />
+        </div>
+    </div>;
+}

jac_client/examples/nested-folders/nested-advance/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "nested-advance",
+  "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: nested-advance",
+  "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": {
+    "antd": "^6.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^6.30.1"
+  }
+}

jac_client/examples/nested-folders/nested-advance/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/nested-folders/nested-basic/.babelrc

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

jac_client/examples/nested-folders/nested-basic/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/nested-folders/nested-basic/app.jac

@@ -0,0 +1,13 @@
+cl import from .components.button { CustomButton }
+cl import from .button { CustomButtonRoot }
+
+cl def RelativeImport()  -> any {
+    return <div>
+        <CustomButton />
+        <CustomButtonRoot />
+    </div>;
+}
+
+cl def app()  -> any {
+    return <RelativeImport />;
+}

jac_client/examples/nested-folders/nested-basic/app.js

@@ -0,0 +1,7 @@
+import { CustomButton } from "./components/button.js";
+function RelativeImport() {
+  return __jacJsx("div", {}, [__jacJsx(CustomButton, {}, [])]);
+}
+function app() {
+  return __jacJsx(RelativeImport, {}, []);
+}

jac_client/examples/nested-folders/nested-basic/button.jac

@@ -0,0 +1,7 @@
+cl import from antd { Button }
+
+cl def CustomButtonRoot()  -> any {
+    return <Button>
+        Click Me
+    </Button>;
+}

jac_client/examples/nested-folders/nested-basic/components/button.jac

@@ -0,0 +1,7 @@
+cl import from antd { Button }
+
+cl def CustomButton()  -> any {
+    return <Button>
+        Click Me
+    </Button>;
+}

jac_client/examples/nested-folders/nested-basic/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/nested-folders/nested-basic/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/with-router/app.jac

@@ -32,7 +32,7 @@ cl {
                 <strong>
                     HashRouter
                 </strong>
-                 for client-side routing.
+                #  for client-side routing.
             </p>
             <p>
                 Current path:

jac_client/examples/with-router/package.json

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

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

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

jac_client/plugin/cli.py

@@ -7,7 +7,7 @@ import subprocess
 import sys
 
 from jaclang.cli.cmdreg import cmd_registry
-from jaclang.runtimelib.machine import hookimpl
+from jaclang.runtimelib.runtime import hookimpl
 
 
 class JacCmd:
@@ -73,7 +73,7 @@ class JacCmd:
 
                 # Read the generated package.json
                 package_json_path = os.path.join(project_path, "package.json")
-                with open(package_json_path, "r") as f:
+                with open(package_json_path) as f:
                     package_data = json.load(f)
 
                 # create temp folder
@@ -84,6 +84,10 @@ class JacCmd:
                 build_folder = os.path.join(project_path, "build")
                 os.makedirs(build_folder, exist_ok=True)
 
+                # create assets folder for static assets (images, fonts, etc.)
+                assets_folder = os.path.join(project_path, "assets")
+                os.makedirs(assets_folder, exist_ok=True)
+
                 # Update package.json with Jac-specific configuration
                 package_data.update(
                     {
@@ -186,6 +190,7 @@ export default defineConfig({
   resolve: {
     alias: {
       "@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
+      "@jac-client/assets": path.resolve(__dirname, "src/assets"),
     },
   },
 });