jac-client 0.2.3__py3-none-any.whl → 0.2.6__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- jac_client/examples/all-in-one/assets/workers/worker.py +5 -0
- jac_client/examples/all-in-one/src/app.jac +841 -0
- jac_client/examples/all-in-one/{button.jac → src/button.jac} +1 -1
- jac_client/examples/all-in-one/{components → src/components}/button.jac +1 -1
- jac_client/examples/asset-serving/css-with-image/{app.jac → src/app.jac} +2 -2
- jac_client/examples/asset-serving/image-asset/{app.jac → src/app.jac} +2 -2
- jac_client/examples/asset-serving/import-alias/{app.jac → src/app.jac} +3 -3
- jac_client/examples/basic/{app.jac → src/app.jac} +2 -2
- jac_client/examples/basic-auth/src/app.jac +377 -0
- jac_client/examples/basic-auth-with-router/{app.jac → src/app.jac} +18 -18
- jac_client/examples/basic-full-stack/{app.jac → src/app.jac} +175 -130
- jac_client/examples/css-styling/js-styling/{app.jac → src/app.jac} +6 -6
- jac_client/examples/css-styling/material-ui/{app.jac → src/app.jac} +5 -5
- jac_client/examples/css-styling/pure-css/{app.jac → src/app.jac} +6 -6
- jac_client/examples/css-styling/sass-example/{app.jac → src/app.jac} +6 -6
- jac_client/examples/css-styling/styled-components/{app.jac → src/app.jac} +5 -5
- jac_client/examples/css-styling/tailwind-example/{app.jac → src/app.jac} +6 -6
- jac_client/examples/full-stack-with-auth/{app.jac → src/app.jac} +37 -37
- jac_client/examples/little-x/{app.jac → src/app.jac} +27 -32
- jac_client/examples/little-x/src/submit-button.jac +16 -0
- jac_client/examples/nested-folders/nested-advance/{ButtonRoot.jac → src/ButtonRoot.jac} +1 -1
- jac_client/examples/nested-folders/nested-advance/{app.jac → src/app.jac} +1 -1
- jac_client/examples/nested-folders/nested-advance/{level1 → src/level1}/ButtonSecondL.jac +1 -1
- jac_client/examples/nested-folders/nested-advance/{level1 → src/level1}/Card.jac +1 -1
- jac_client/examples/nested-folders/nested-advance/{level1 → src/level1}/level2/ButtonThirdL.jac +1 -1
- jac_client/examples/nested-folders/nested-basic/{app.jac → src/app.jac} +2 -2
- jac_client/examples/nested-folders/nested-basic/{button.jac → src/button.jac} +1 -1
- jac_client/examples/nested-folders/nested-basic/{components → src/components}/button.jac +1 -1
- jac_client/examples/ts-support/src/app.jac +35 -0
- jac_client/examples/with-router/{app.jac → src/app.jac} +11 -11
- jac_client/plugin/cli.jac +547 -0
- jac_client/plugin/client.jac +52 -0
- jac_client/plugin/client_runtime.cl.jac +38 -0
- jac_client/plugin/impl/client.impl.jac +134 -0
- jac_client/plugin/impl/client_runtime.impl.jac +177 -0
- jac_client/plugin/impl/vite_client_bundle.impl.jac +72 -0
- jac_client/plugin/plugin_config.jac +195 -0
- jac_client/plugin/src/__init__.jac +20 -0
- jac_client/plugin/src/asset_processor.jac +33 -0
- jac_client/plugin/src/babel_processor.jac +18 -0
- jac_client/plugin/src/compiler.jac +66 -0
- jac_client/plugin/src/config_loader.jac +32 -0
- jac_client/plugin/src/impl/asset_processor.impl.jac +127 -0
- jac_client/plugin/src/impl/babel_processor.impl.jac +84 -0
- jac_client/plugin/src/impl/compiler.impl.jac +251 -0
- jac_client/plugin/src/impl/config_loader.impl.jac +119 -0
- jac_client/plugin/src/impl/import_processor.impl.jac +33 -0
- jac_client/plugin/src/impl/jac_to_js.impl.jac +41 -0
- jac_client/plugin/src/impl/package_installer.impl.jac +105 -0
- jac_client/plugin/src/impl/vite_bundler.impl.jac +513 -0
- jac_client/plugin/src/import_processor.jac +19 -0
- jac_client/plugin/src/jac_to_js.jac +35 -0
- jac_client/plugin/src/package_installer.jac +26 -0
- jac_client/plugin/src/vite_bundler.jac +36 -0
- jac_client/plugin/vite_client_bundle.jac +31 -0
- jac_client/tests/conftest.py +281 -0
- jac_client/tests/fixtures/basic-app/app.jac +2 -2
- jac_client/tests/fixtures/cl_file/app.cl.jac +2 -2
- jac_client/tests/fixtures/client_app_with_antd/app.jac +1 -1
- jac_client/tests/fixtures/js_import/app.jac +5 -5
- jac_client/tests/fixtures/spawn_test/app.jac +7 -7
- jac_client/tests/fixtures/with-ts/app.jac +35 -0
- jac_client/tests/test_cli.py +755 -0
- jac_client/tests/test_it.py +347 -67
- {jac_client-0.2.3.dist-info → jac_client-0.2.6.dist-info}/METADATA +28 -30
- jac_client-0.2.6.dist-info/RECORD +74 -0
- {jac_client-0.2.3.dist-info → jac_client-0.2.6.dist-info}/WHEEL +2 -1
- jac_client-0.2.6.dist-info/entry_points.txt +4 -0
- jac_client-0.2.6.dist-info/top_level.txt +1 -0
- jac_client/docs/README.md +0 -689
- jac_client/docs/advanced-state.md +0 -1265
- jac_client/docs/asset-serving/intro.md +0 -209
- jac_client/docs/assets/pipe_line-v2.svg +0 -32
- jac_client/docs/assets/pipe_line.png +0 -0
- jac_client/docs/file-system/app.jac.md +0 -121
- jac_client/docs/file-system/backend-frontend.md +0 -217
- jac_client/docs/file-system/intro.md +0 -72
- jac_client/docs/file-system/nested-imports.md +0 -348
- jac_client/docs/guide-example/intro.md +0 -115
- jac_client/docs/guide-example/step-01-setup.md +0 -270
- jac_client/docs/guide-example/step-02-components.md +0 -416
- jac_client/docs/guide-example/step-03-styling.md +0 -478
- jac_client/docs/guide-example/step-04-todo-ui.md +0 -477
- jac_client/docs/guide-example/step-05-local-state.md +0 -530
- jac_client/docs/guide-example/step-06-events.md +0 -749
- jac_client/docs/guide-example/step-07-effects.md +0 -468
- jac_client/docs/guide-example/step-08-walkers.md +0 -534
- jac_client/docs/guide-example/step-09-authentication.md +0 -586
- jac_client/docs/guide-example/step-10-routing.md +0 -539
- jac_client/docs/guide-example/step-11-final.md +0 -963
- jac_client/docs/imports.md +0 -1141
- jac_client/docs/lifecycle-hooks.md +0 -773
- jac_client/docs/routing.md +0 -659
- jac_client/docs/styling/intro.md +0 -249
- jac_client/docs/styling/js-styling.md +0 -367
- jac_client/docs/styling/material-ui.md +0 -341
- jac_client/docs/styling/pure-css.md +0 -299
- jac_client/docs/styling/sass.md +0 -403
- jac_client/docs/styling/styled-components.md +0 -395
- jac_client/docs/styling/tailwind.md +0 -298
- jac_client/examples/all-in-one/.babelrc +0 -9
- jac_client/examples/all-in-one/README.md +0 -16
- jac_client/examples/all-in-one/app.jac +0 -426
- jac_client/examples/all-in-one/assets/burger.png +0 -0
- jac_client/examples/all-in-one/package.json +0 -29
- jac_client/examples/all-in-one/styles.css +0 -26
- jac_client/examples/all-in-one/vite.config.js +0 -28
- jac_client/examples/asset-serving/css-with-image/.babelrc +0 -9
- jac_client/examples/asset-serving/css-with-image/README.md +0 -91
- jac_client/examples/asset-serving/css-with-image/assets/burger.png +0 -0
- jac_client/examples/asset-serving/css-with-image/package.json +0 -28
- jac_client/examples/asset-serving/css-with-image/styles.css +0 -26
- jac_client/examples/asset-serving/css-with-image/vite.config.js +0 -28
- jac_client/examples/asset-serving/image-asset/.babelrc +0 -9
- jac_client/examples/asset-serving/image-asset/README.md +0 -119
- jac_client/examples/asset-serving/image-asset/assets/burger.png +0 -0
- jac_client/examples/asset-serving/image-asset/package.json +0 -28
- jac_client/examples/asset-serving/image-asset/styles.css +0 -26
- jac_client/examples/asset-serving/image-asset/vite.config.js +0 -28
- jac_client/examples/asset-serving/import-alias/.babelrc +0 -9
- jac_client/examples/asset-serving/import-alias/README.md +0 -83
- jac_client/examples/asset-serving/import-alias/assets/burger.png +0 -0
- jac_client/examples/asset-serving/import-alias/package.json +0 -28
- jac_client/examples/asset-serving/import-alias/vite.config.js +0 -28
- jac_client/examples/basic/.babelrc +0 -9
- jac_client/examples/basic/README.md +0 -16
- jac_client/examples/basic/package.json +0 -27
- jac_client/examples/basic/vite.config.js +0 -27
- jac_client/examples/basic-auth/.babelrc +0 -9
- jac_client/examples/basic-auth/README.md +0 -16
- jac_client/examples/basic-auth/app.jac +0 -308
- jac_client/examples/basic-auth/package.json +0 -27
- jac_client/examples/basic-auth/vite.config.js +0 -27
- jac_client/examples/basic-auth-with-router/.babelrc +0 -9
- jac_client/examples/basic-auth-with-router/README.md +0 -60
- jac_client/examples/basic-auth-with-router/package.json +0 -28
- jac_client/examples/basic-auth-with-router/vite.config.js +0 -27
- jac_client/examples/basic-full-stack/.babelrc +0 -9
- jac_client/examples/basic-full-stack/README.md +0 -18
- jac_client/examples/basic-full-stack/package.json +0 -28
- jac_client/examples/basic-full-stack/vite.config.js +0 -27
- jac_client/examples/css-styling/js-styling/.babelrc +0 -9
- jac_client/examples/css-styling/js-styling/README.md +0 -183
- jac_client/examples/css-styling/js-styling/package.json +0 -28
- jac_client/examples/css-styling/js-styling/styles.js +0 -100
- jac_client/examples/css-styling/js-styling/vite.config.js +0 -27
- jac_client/examples/css-styling/material-ui/.babelrc +0 -9
- jac_client/examples/css-styling/material-ui/README.md +0 -16
- jac_client/examples/css-styling/material-ui/package.json +0 -32
- jac_client/examples/css-styling/material-ui/vite.config.js +0 -27
- jac_client/examples/css-styling/pure-css/.babelrc +0 -9
- jac_client/examples/css-styling/pure-css/README.md +0 -16
- jac_client/examples/css-styling/pure-css/package.json +0 -28
- jac_client/examples/css-styling/pure-css/styles.css +0 -111
- jac_client/examples/css-styling/pure-css/vite.config.js +0 -27
- jac_client/examples/css-styling/sass-example/.babelrc +0 -9
- jac_client/examples/css-styling/sass-example/README.md +0 -16
- jac_client/examples/css-styling/sass-example/package.json +0 -29
- jac_client/examples/css-styling/sass-example/styles.scss +0 -153
- jac_client/examples/css-styling/sass-example/vite.config.js +0 -27
- jac_client/examples/css-styling/styled-components/.babelrc +0 -9
- jac_client/examples/css-styling/styled-components/README.md +0 -16
- jac_client/examples/css-styling/styled-components/package.json +0 -29
- jac_client/examples/css-styling/styled-components/styled.js +0 -90
- jac_client/examples/css-styling/styled-components/vite.config.js +0 -27
- jac_client/examples/css-styling/tailwind-example/.babelrc +0 -9
- jac_client/examples/css-styling/tailwind-example/README.md +0 -16
- jac_client/examples/css-styling/tailwind-example/global.css +0 -1
- jac_client/examples/css-styling/tailwind-example/package.json +0 -30
- jac_client/examples/css-styling/tailwind-example/vite.config.js +0 -29
- jac_client/examples/full-stack-with-auth/.babelrc +0 -9
- jac_client/examples/full-stack-with-auth/README.md +0 -16
- jac_client/examples/full-stack-with-auth/package.json +0 -28
- jac_client/examples/full-stack-with-auth/vite.config.js +0 -29
- jac_client/examples/little-x/package.json +0 -23
- jac_client/examples/little-x/submit-button.jac +0 -8
- jac_client/examples/nested-folders/nested-advance/.babelrc +0 -9
- jac_client/examples/nested-folders/nested-advance/README.md +0 -77
- jac_client/examples/nested-folders/nested-advance/package.json +0 -29
- jac_client/examples/nested-folders/nested-advance/vite.config.js +0 -28
- jac_client/examples/nested-folders/nested-basic/.babelrc +0 -9
- jac_client/examples/nested-folders/nested-basic/README.md +0 -183
- jac_client/examples/nested-folders/nested-basic/app.js +0 -7
- jac_client/examples/nested-folders/nested-basic/package.json +0 -28
- jac_client/examples/nested-folders/nested-basic/vite.config.js +0 -27
- jac_client/examples/with-router/.babelrc +0 -9
- jac_client/examples/with-router/README.md +0 -17
- jac_client/examples/with-router/package.json +0 -28
- jac_client/examples/with-router/vite.config.js +0 -27
- jac_client/plugin/cli.py +0 -244
- jac_client/plugin/client.py +0 -152
- jac_client/plugin/client_runtime.jac +0 -234
- jac_client/plugin/vite_client_bundle.py +0 -503
- jac_client/tests/fixtures/js_import/utils.js +0 -21
- jac_client/tests/fixtures/package-lock.json +0 -329
- jac_client/tests/fixtures/package.json +0 -11
- jac_client/tests/test_asset_examples.py +0 -322
- jac_client/tests/test_cl.py +0 -530
- jac_client/tests/test_create_jac_app.py +0 -131
- jac_client/tests/test_nested_file.py +0 -374
- jac_client-0.2.3.dist-info/RECORD +0 -171
- jac_client-0.2.3.dist-info/entry_points.txt +0 -4
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
# The `app.jac` Entry Point
|
|
2
|
-
|
|
3
|
-
Every Jac client project **must** have an `app.jac` file. This file serves as the entry point for your application and is required for the build system to work correctly.
|
|
4
|
-
|
|
5
|
-
## Why `app.jac` is Required
|
|
6
|
-
|
|
7
|
-
### Entry Point for the Build System
|
|
8
|
-
|
|
9
|
-
When you run `jac serve app.jac`, the build system:
|
|
10
|
-
1. Compiles `app.jac` to JavaScript
|
|
11
|
-
2. Generates an entry file (`src/main.js`) that imports your `app` function:
|
|
12
|
-
```javascript
|
|
13
|
-
import { app as App } from "./app.js";
|
|
14
|
-
```
|
|
15
|
-
3. Renders your app component in the browser
|
|
16
|
-
|
|
17
|
-
**Without `app.jac`, the build system cannot find your application entry point.**
|
|
18
|
-
|
|
19
|
-
## The `app()` Function
|
|
20
|
-
|
|
21
|
-
The `app.jac` file **must** export an `app()` function. This function is:
|
|
22
|
-
- The root component of your application
|
|
23
|
-
- Automatically imported and rendered by the build system
|
|
24
|
-
- The starting point for all your UI components
|
|
25
|
-
|
|
26
|
-
### Required Structure
|
|
27
|
-
|
|
28
|
-
Every `app.jac` file must contain:
|
|
29
|
-
|
|
30
|
-
```jac
|
|
31
|
-
cl {
|
|
32
|
-
def app() -> any {
|
|
33
|
-
return <div>
|
|
34
|
-
{/* Your application UI */}
|
|
35
|
-
</div>;
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
### Minimal Example
|
|
41
|
-
|
|
42
|
-
```jac
|
|
43
|
-
cl {
|
|
44
|
-
def app() -> any {
|
|
45
|
-
return <div>
|
|
46
|
-
<h1>Hello, World!</h1>
|
|
47
|
-
</div>;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Key Requirements
|
|
53
|
-
|
|
54
|
-
1. **File must be named `app.jac`**
|
|
55
|
-
- The build system specifically looks for this filename
|
|
56
|
-
- Located at the root of your project
|
|
57
|
-
|
|
58
|
-
2. **Must contain `app()` function**
|
|
59
|
-
- Function name must be exactly `app`
|
|
60
|
-
- Must be defined inside a `cl { }` block
|
|
61
|
-
- Must return JSX (HTML-like syntax)
|
|
62
|
-
|
|
63
|
-
3. **Must be a client function**
|
|
64
|
-
- Defined inside `cl { }` block
|
|
65
|
-
- This ensures it runs in the browser
|
|
66
|
-
|
|
67
|
-
## Common Mistakes
|
|
68
|
-
|
|
69
|
-
**Missing `app()` function:**
|
|
70
|
-
```jac
|
|
71
|
-
# ❌ WRONG - No app() function
|
|
72
|
-
cl {
|
|
73
|
-
def HomePage() -> any {
|
|
74
|
-
return <div>Home</div>;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
**Wrong function name:**
|
|
80
|
-
```jac
|
|
81
|
-
# ❌ WRONG - Function named 'main' instead of 'app'
|
|
82
|
-
cl {
|
|
83
|
-
def main() -> any {
|
|
84
|
-
return <div>App</div>;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
**Not in `cl` block:**
|
|
90
|
-
```jac
|
|
91
|
-
# ❌ WRONG - app() not in cl block
|
|
92
|
-
def app() -> any {
|
|
93
|
-
return <div>App</div>;
|
|
94
|
-
}
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
## Project Structure
|
|
98
|
-
|
|
99
|
-
Your project structure should look like this:
|
|
100
|
-
|
|
101
|
-
```
|
|
102
|
-
my-app/
|
|
103
|
-
├── app.jac # ✅ Required entry point
|
|
104
|
-
├── package.json
|
|
105
|
-
├── vite.config.js
|
|
106
|
-
└── ...
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
## Running Your App
|
|
110
|
-
|
|
111
|
-
To start your application:
|
|
112
|
-
|
|
113
|
-
```bash
|
|
114
|
-
jac serve app.jac
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
This command compiles `app.jac`, creates the build entry point, and serves your app at `http://localhost:8000/page/app`.
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
**Remember**: `app.jac` with `app()` function is **required** for every Jac client project. Without it, your application cannot start!
|
|
@@ -1,217 +0,0 @@
|
|
|
1
|
-
# Separating Backend and Frontend Code
|
|
2
|
-
|
|
3
|
-
Jac allows you to organize your code by execution environment, making it easier to maintain and understand your application architecture.
|
|
4
|
-
|
|
5
|
-
## File Extensions
|
|
6
|
-
|
|
7
|
-
### `.jac` Files - Server-side Code
|
|
8
|
-
|
|
9
|
-
Standard Jac files (`.jac`) contain your backend logic:
|
|
10
|
-
- Node definitions
|
|
11
|
-
- Walker implementations
|
|
12
|
-
- Business logic
|
|
13
|
-
- Data processing
|
|
14
|
-
|
|
15
|
-
**Example: `app.jac`**
|
|
16
|
-
```jac
|
|
17
|
-
# Backend - Todo Node
|
|
18
|
-
node Todo {
|
|
19
|
-
has text: str;
|
|
20
|
-
has done: bool = False;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
# Backend - Walkers
|
|
24
|
-
walker create_todo {
|
|
25
|
-
has text: str;
|
|
26
|
-
|
|
27
|
-
can create with `root entry {
|
|
28
|
-
new_todo = here ++> Todo(text=self.text);
|
|
29
|
-
report new_todo;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
walker read_todos {
|
|
34
|
-
can read with `root entry {
|
|
35
|
-
visit [-->(`?Todo)];
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
can report_todos with Todo entry {
|
|
39
|
-
report here;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### `.cl.jac` Files - Client-side Code (Optional)
|
|
45
|
-
|
|
46
|
-
Client files (`.cl.jac`) contain your frontend components and logic. All code in these files is automatically treated as client-side code without requiring the `cl` keyword.
|
|
47
|
-
|
|
48
|
-
**Example: `app.cl.jac`**
|
|
49
|
-
```jac
|
|
50
|
-
import from react {
|
|
51
|
-
useState
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
def app -> Any {
|
|
55
|
-
let [answer, setAnswer] = useState(0);
|
|
56
|
-
|
|
57
|
-
async def computeAnswer() -> None {
|
|
58
|
-
response = root spawn add(x=40, y=2);
|
|
59
|
-
result = response.reports;
|
|
60
|
-
setAnswer(result);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
return <div>
|
|
64
|
-
<button onClick={computeAnswer}>
|
|
65
|
-
Click Me
|
|
66
|
-
</button>
|
|
67
|
-
<div>
|
|
68
|
-
<h1>
|
|
69
|
-
Answer:
|
|
70
|
-
<span>{answer}</span>
|
|
71
|
-
</h1>
|
|
72
|
-
</div>
|
|
73
|
-
</div>;
|
|
74
|
-
}
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
## Mixed Backend and Frontend in Same File
|
|
78
|
-
|
|
79
|
-
You can also combine backend and frontend code in the same `.jac` file using `cl` blocks:
|
|
80
|
-
|
|
81
|
-
**Example: `app.jac` with both backend and frontend**
|
|
82
|
-
```jac
|
|
83
|
-
# Backend - Todo Node
|
|
84
|
-
node Todo {
|
|
85
|
-
has text: str;
|
|
86
|
-
has done: bool = False;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
# Backend - Walker
|
|
90
|
-
walker create_todo {
|
|
91
|
-
has text: str;
|
|
92
|
-
can create with `root entry {
|
|
93
|
-
new_todo = here ++> Todo(text=self.text);
|
|
94
|
-
report new_todo;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
# Frontend Components
|
|
99
|
-
cl {
|
|
100
|
-
def app() -> any {
|
|
101
|
-
let [todos, setTodos] = useState([]);
|
|
102
|
-
|
|
103
|
-
async def addTodo() -> None {
|
|
104
|
-
response = root spawn create_todo(text="New task");
|
|
105
|
-
# Update UI
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
return <div>
|
|
109
|
-
{/* Your UI here */}
|
|
110
|
-
</div>;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
## Key Benefits
|
|
116
|
-
|
|
117
|
-
### 1. No `cl` Keyword Required in `.cl.jac` Files
|
|
118
|
-
|
|
119
|
-
In `.cl.jac` files, you don't need to prefix declarations with `cl`:
|
|
120
|
-
- All code is compiled for the client environment
|
|
121
|
-
- Cleaner syntax for frontend-only files
|
|
122
|
-
|
|
123
|
-
### 2. Clear Separation of Concerns
|
|
124
|
-
|
|
125
|
-
**Option 1: Separate Files**
|
|
126
|
-
```
|
|
127
|
-
my-app/
|
|
128
|
-
├── app.jac # Server-side: walkers, nodes, business logic
|
|
129
|
-
└── app.cl.jac # Client-side: components, UI, event handlers
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
**Option 2: Single File with `cl` Blocks**
|
|
133
|
-
```jac
|
|
134
|
-
# Backend code (no cl keyword)
|
|
135
|
-
node Todo { ... }
|
|
136
|
-
walker create_todo { ... }
|
|
137
|
-
|
|
138
|
-
# Frontend code (cl block)
|
|
139
|
-
cl {
|
|
140
|
-
def app() -> any { ... }
|
|
141
|
-
}
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
### 3. Seamless Integration
|
|
145
|
-
|
|
146
|
-
Client code can invoke server walkers using `root spawn`:
|
|
147
|
-
|
|
148
|
-
```jac
|
|
149
|
-
# In app.cl.jac or cl block
|
|
150
|
-
async def computeAnswer() -> None {
|
|
151
|
-
response = root spawn create_todo(text="Task 1"); # Calls walker from app.jac
|
|
152
|
-
result = response.reports;
|
|
153
|
-
setAnswer(result);
|
|
154
|
-
}
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
## Best Practices
|
|
158
|
-
|
|
159
|
-
1. **Keep backend logic in `.jac` files**: Data models, business rules, and walker implementations
|
|
160
|
-
2. **Keep frontend logic in `.cl.jac` files or `cl` blocks**: React components, UI state, event handlers
|
|
161
|
-
3. **Use `root spawn` for client-server communication**: Clean API between frontend and backend
|
|
162
|
-
4. **Organize by feature**: Group related `.jac` and `.cl.jac` files together
|
|
163
|
-
|
|
164
|
-
## Project Structure Examples
|
|
165
|
-
|
|
166
|
-
### Simple Structure
|
|
167
|
-
```
|
|
168
|
-
my-app/
|
|
169
|
-
├── app.jac # Backend: nodes and walkers
|
|
170
|
-
└── app.cl.jac # Frontend: React components
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
### Feature-Based Structure
|
|
174
|
-
```
|
|
175
|
-
my-app/
|
|
176
|
-
├── app.jac # Main backend logic
|
|
177
|
-
├── app.cl.jac # Main frontend entry
|
|
178
|
-
├── todos/
|
|
179
|
-
│ ├── todos.jac # Todo backend logic
|
|
180
|
-
│ └── todos.cl.jac # Todo frontend components
|
|
181
|
-
└── auth/
|
|
182
|
-
├── auth.jac # Auth backend logic
|
|
183
|
-
└── auth.cl.jac # Auth frontend components
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
### Mixed Structure (Single Files)
|
|
187
|
-
```
|
|
188
|
-
my-app/
|
|
189
|
-
├── app.jac # Backend + Frontend in one file
|
|
190
|
-
├── todos.jac # Todo feature (backend + frontend)
|
|
191
|
-
└── auth.jac # Auth feature (backend + frontend)
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
## When to Use Each Approach
|
|
195
|
-
|
|
196
|
-
### Use Separate Files (`.jac` + `.cl.jac`)
|
|
197
|
-
- Large applications with clear separation
|
|
198
|
-
- Team workflows where backend/frontend are separate
|
|
199
|
-
- When you want explicit file-based organization
|
|
200
|
-
|
|
201
|
-
### Use Single File with `cl` Blocks
|
|
202
|
-
- Small to medium applications
|
|
203
|
-
- When backend and frontend are tightly coupled
|
|
204
|
-
- Quick prototypes and demos
|
|
205
|
-
- When you prefer fewer files
|
|
206
|
-
|
|
207
|
-
## Examples
|
|
208
|
-
|
|
209
|
-
See working examples in the codebase:
|
|
210
|
-
- [`basic-full-stack/`](../../examples/basic-full-stack/) - Mixed backend/frontend in single file
|
|
211
|
-
- [`full-stack-with-auth/`](../../examples/full-stack-with-auth/) - Complete full-stack application
|
|
212
|
-
|
|
213
|
-
## Related Documentation
|
|
214
|
-
|
|
215
|
-
- [Nested Folder Imports](nested-imports.md)
|
|
216
|
-
- [Import System](../imports.md)
|
|
217
|
-
- [Lifecycle Hooks](../lifecycle-hooks.md)
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
# File System Organization
|
|
2
|
-
|
|
3
|
-
Jac client supports flexible file organization patterns that allow you to structure your code for maintainability and scalability.
|
|
4
|
-
|
|
5
|
-
## Overview
|
|
6
|
-
|
|
7
|
-
This guide covers two main aspects of file organization:
|
|
8
|
-
|
|
9
|
-
1. **Separating Backend and Frontend Code** - Organizing server-side and client-side logic
|
|
10
|
-
2. **Nested Folder Imports** - Managing imports across multiple directory levels
|
|
11
|
-
|
|
12
|
-
## Quick Start
|
|
13
|
-
|
|
14
|
-
### Backend/Frontend Separation
|
|
15
|
-
|
|
16
|
-
Jac allows you to organize code by execution environment:
|
|
17
|
-
- Use `.jac` files for backend logic (nodes, walkers)
|
|
18
|
-
- Use `.cl.jac` files for frontend-only code
|
|
19
|
-
- Or mix both in the same file using `cl` blocks
|
|
20
|
-
|
|
21
|
-
**Example:**
|
|
22
|
-
```jac
|
|
23
|
-
# Backend
|
|
24
|
-
node Todo { has text: str; }
|
|
25
|
-
|
|
26
|
-
# Frontend
|
|
27
|
-
cl {
|
|
28
|
-
def app() -> any {
|
|
29
|
-
return <div>Hello</div>;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
### Nested Folder Imports
|
|
35
|
-
|
|
36
|
-
Jac preserves folder structure during compilation, allowing you to organize code in nested folders:
|
|
37
|
-
|
|
38
|
-
**Example:**
|
|
39
|
-
```jac
|
|
40
|
-
# From level1/Button.jac importing from root
|
|
41
|
-
cl import from ..ButtonRoot { ButtonRoot }
|
|
42
|
-
|
|
43
|
-
# From root importing from level1
|
|
44
|
-
cl import from .level1.Button { Button }
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
## Guides
|
|
48
|
-
|
|
49
|
-
- **[The `app.jac` Entry Point](app.jac.md)** - Required entry point file and `app()` function
|
|
50
|
-
- **[Backend/Frontend Separation](backend-frontend.md)** - Complete guide to organizing server and client code
|
|
51
|
-
- **[Nested Folder Imports](nested-imports.md)** - Guide to managing imports across directory levels
|
|
52
|
-
|
|
53
|
-
## Examples
|
|
54
|
-
|
|
55
|
-
Working examples demonstrating file organization:
|
|
56
|
-
|
|
57
|
-
- [`nested-basic/`](../../examples/nested-folders/nested-basic/) - Simple nested folder structure
|
|
58
|
-
- [`nested-advance/`](../../examples/nested-folders/nested-advance/) - Advanced multi-level nesting
|
|
59
|
-
|
|
60
|
-
Run any example:
|
|
61
|
-
|
|
62
|
-
```bash
|
|
63
|
-
cd jac-client/jac_client/examples/nested-folders/<example-name>
|
|
64
|
-
npm install
|
|
65
|
-
jac serve app.jac
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## Related Documentation
|
|
69
|
-
|
|
70
|
-
- [Import System](../imports.md)
|
|
71
|
-
- [Styling](../styling/intro.md)
|
|
72
|
-
- [Asset Serving](../asset-serving/intro.md)
|