jac-client 0.2.3__py3-none-any.whl → 0.2.8__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/app.jac +494 -347
- jac_client/examples/all-in-one/assets/workers/worker.py +5 -0
- jac_client/examples/all-in-one/button.jac +1 -1
- jac_client/examples/all-in-one/components/CategoryFilter.jac +35 -0
- jac_client/examples/all-in-one/components/Header.jac +13 -0
- jac_client/examples/all-in-one/components/ProfitOverview.jac +50 -0
- jac_client/examples/all-in-one/components/Summary.jac +53 -0
- jac_client/examples/all-in-one/components/TransactionForm.jac +158 -0
- jac_client/examples/all-in-one/components/TransactionItem.jac +55 -0
- jac_client/examples/all-in-one/components/TransactionList.jac +37 -0
- jac_client/examples/all-in-one/components/button.jac +1 -1
- jac_client/examples/all-in-one/components/navigation.jac +132 -0
- jac_client/examples/all-in-one/constants/categories.jac +37 -0
- jac_client/examples/all-in-one/constants/clients.jac +13 -0
- jac_client/examples/all-in-one/context/BudgetContext.jac +28 -0
- jac_client/examples/all-in-one/hooks/useBudget.jac +116 -0
- jac_client/examples/all-in-one/hooks/useLocalStorage.jac +36 -0
- jac_client/examples/all-in-one/pages/BudgetPlanner.cl.jac +70 -0
- jac_client/examples/all-in-one/pages/BudgetPlanner.jac +126 -0
- jac_client/examples/all-in-one/pages/FeaturesTest.cl.jac +552 -0
- jac_client/examples/all-in-one/pages/FeaturesTest.jac +126 -0
- jac_client/examples/all-in-one/pages/LandingPage.jac +101 -0
- jac_client/examples/all-in-one/pages/loginPage.jac +132 -0
- jac_client/examples/all-in-one/pages/nestedDemo.jac +61 -0
- jac_client/examples/all-in-one/pages/notFound.jac +24 -0
- jac_client/examples/all-in-one/pages/signupPage.jac +133 -0
- jac_client/examples/all-in-one/utils/formatters.jac +52 -0
- jac_client/examples/asset-serving/css-with-image/{app.jac → src/app.jac} +4 -4
- jac_client/examples/asset-serving/image-asset/{app.jac → src/app.jac} +4 -4
- jac_client/examples/asset-serving/import-alias/{app.jac → src/app.jac} +5 -5
- jac_client/examples/basic/{app.jac → src/app.jac} +4 -4
- jac_client/examples/basic-auth/src/app.jac +371 -0
- jac_client/examples/basic-auth-with-router/{app.jac → src/app.jac} +28 -28
- jac_client/examples/basic-full-stack/{app.jac → src/app.jac} +166 -127
- jac_client/examples/css-styling/js-styling/{app.jac → src/app.jac} +7 -7
- jac_client/examples/css-styling/material-ui/{app.jac → src/app.jac} +6 -6
- jac_client/examples/css-styling/pure-css/{app.jac → src/app.jac} +7 -7
- jac_client/examples/css-styling/sass-example/{app.jac → src/app.jac} +7 -7
- jac_client/examples/css-styling/styled-components/{app.jac → src/app.jac} +6 -6
- jac_client/examples/css-styling/tailwind-example/{app.jac → src/app.jac} +7 -7
- jac_client/examples/full-stack-with-auth/{app.jac → src/app.jac} +47 -47
- 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} +15 -15
- jac_client/plugin/cli.jac +504 -0
- jac_client/plugin/client.jac +45 -0
- jac_client/plugin/client_runtime.cl.jac +42 -0
- jac_client/plugin/impl/client.impl.jac +193 -0
- jac_client/plugin/impl/client_runtime.impl.jac +195 -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 +67 -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 +89 -0
- jac_client/plugin/src/impl/compiler.impl.jac +288 -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 +626 -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 +44 -0
- jac_client/plugin/vite_client_bundle.jac +31 -0
- jac_client/tests/conftest.py +283 -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 +15 -18
- jac_client/tests/fixtures/with-ts/app.jac +35 -0
- jac_client/tests/test_cli.py +811 -0
- jac_client/tests/test_it.py +592 -97
- {jac_client-0.2.3.dist-info → jac_client-0.2.8.dist-info}/METADATA +41 -34
- jac_client-0.2.8.dist-info/RECORD +97 -0
- {jac_client-0.2.3.dist-info → jac_client-0.2.8.dist-info}/WHEEL +2 -1
- jac_client-0.2.8.dist-info/entry_points.txt +4 -0
- jac_client-0.2.8.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/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,29 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "all-in-one",
|
|
3
|
-
"version": "1.0.0",
|
|
4
|
-
"main": "index.js",
|
|
5
|
-
"scripts": {
|
|
6
|
-
"build": "npm run compile && vite build",
|
|
7
|
-
"dev": "vite dev",
|
|
8
|
-
"preview": "vite preview",
|
|
9
|
-
"compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
|
|
10
|
-
},
|
|
11
|
-
"keywords": [],
|
|
12
|
-
"author": "",
|
|
13
|
-
"license": "ISC",
|
|
14
|
-
"description": "Jac application: all-in-one",
|
|
15
|
-
"type": "module",
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"@babel/cli": "^7.28.3",
|
|
18
|
-
"@babel/core": "^7.28.5",
|
|
19
|
-
"@babel/preset-env": "^7.28.5",
|
|
20
|
-
"@babel/preset-react": "^7.28.5",
|
|
21
|
-
"vite": "^6.4.1"
|
|
22
|
-
},
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"antd": "^6.0.0",
|
|
25
|
-
"react": "^19.2.0",
|
|
26
|
-
"react-dom": "^19.2.0",
|
|
27
|
-
"react-router-dom": "^6.30.1"
|
|
28
|
-
}
|
|
29
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
background-image: url('/static/assets/burger.png');
|
|
3
|
-
background-size: cover;
|
|
4
|
-
background-position: center;
|
|
5
|
-
min-height: 300px;
|
|
6
|
-
border-radius: 10px;
|
|
7
|
-
padding: 20px;
|
|
8
|
-
margin: 20px 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.card {
|
|
12
|
-
background: white;
|
|
13
|
-
border-radius: 10px;
|
|
14
|
-
padding: 20px;
|
|
15
|
-
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
16
|
-
max-width: 400px;
|
|
17
|
-
margin: 20px auto;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.burgerImage {
|
|
21
|
-
width: 200px;
|
|
22
|
-
height: auto;
|
|
23
|
-
border-radius: 10px;
|
|
24
|
-
display: block;
|
|
25
|
-
margin: 0 auto;
|
|
26
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { defineConfig } from "vite";
|
|
3
|
-
import path from "path";
|
|
4
|
-
import { fileURLToPath } from "url";
|
|
5
|
-
|
|
6
|
-
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
7
|
-
|
|
8
|
-
export default defineConfig({
|
|
9
|
-
root: ".", // base folder
|
|
10
|
-
build: {
|
|
11
|
-
rollupOptions: {
|
|
12
|
-
input: "build/main.js", // your compiled entry file
|
|
13
|
-
output: {
|
|
14
|
-
entryFileNames: "client.[hash].js", // name of the final js file
|
|
15
|
-
assetFileNames: "[name].[ext]",
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
outDir: "dist", // final bundled output
|
|
19
|
-
emptyOutDir: true,
|
|
20
|
-
},
|
|
21
|
-
publicDir: false,
|
|
22
|
-
resolve: {
|
|
23
|
-
alias: {
|
|
24
|
-
"@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
|
|
25
|
-
"@jac-client/assets": path.resolve(__dirname, "src/assets"),
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
});
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
# Relative Imports Example
|
|
2
|
-
|
|
3
|
-
This example demonstrates how to import static assets using relative path imports.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Imports image using relative path (`./assets/burger.png`)
|
|
8
|
-
- Component-scoped asset organization
|
|
9
|
-
- Vite processes and optimizes the asset
|
|
10
|
-
- Familiar import syntax
|
|
11
|
-
|
|
12
|
-
## Project Structure
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
relative-imports/
|
|
16
|
-
├── app.jac # Main application file
|
|
17
|
-
├── assets/ # Static assets directory
|
|
18
|
-
│ └── burger.png # Burger image
|
|
19
|
-
├── src/ # Source files (generated)
|
|
20
|
-
├── build/ # Build output (generated)
|
|
21
|
-
└── dist/ # Distribution output (generated)
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## Running the Example
|
|
25
|
-
|
|
26
|
-
1. Make sure node modules are installed:
|
|
27
|
-
```bash
|
|
28
|
-
npm install
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
2. Run the Jac server:
|
|
32
|
-
```bash
|
|
33
|
-
jac serve app.jac
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
3. Open your browser and navigate to:
|
|
37
|
-
```
|
|
38
|
-
http://localhost:8000/page/app
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## How It Works
|
|
42
|
-
|
|
43
|
-
### Import Syntax
|
|
44
|
-
|
|
45
|
-
```jac
|
|
46
|
-
cl import from "./assets/burger.png" { default as burgerImage }
|
|
47
|
-
<img src={burgerImage} />
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Path Resolution
|
|
51
|
-
|
|
52
|
-
- Relative paths are resolved from the current file location
|
|
53
|
-
- `./assets/burger.png` resolves relative to `app.jac`
|
|
54
|
-
- Vite processes the import during build
|
|
55
|
-
- Assets are optimized and bundled
|
|
56
|
-
|
|
57
|
-
### Use Cases
|
|
58
|
-
|
|
59
|
-
**Component-Scoped Assets:**
|
|
60
|
-
```jac
|
|
61
|
-
# In a component file
|
|
62
|
-
cl import from "./images/icon.svg" { default as icon }
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
**Parent Directory Assets:**
|
|
66
|
-
```jac
|
|
67
|
-
# Access assets from parent directory
|
|
68
|
-
cl import from "../shared/assets/logo.png" { default as logo }
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
**Nested Assets:**
|
|
72
|
-
```jac
|
|
73
|
-
# Assets in subdirectories
|
|
74
|
-
cl import from "./assets/images/hero.jpg" { default as hero }
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
### Benefits
|
|
78
|
-
|
|
79
|
-
- **Familiar Syntax**: Standard relative import pattern
|
|
80
|
-
- **Component Organization**: Assets organized by component/feature
|
|
81
|
-
- **Flexibility**: Easy to reorganize without changing alias config
|
|
82
|
-
- **Modular**: Works well with component-based architecture
|
|
83
|
-
|
|
84
|
-
## Best Practices
|
|
85
|
-
|
|
86
|
-
1. Use relative imports for component-specific assets
|
|
87
|
-
2. Organize assets near the components that use them
|
|
88
|
-
3. Keep relative paths simple and clear
|
|
89
|
-
4. Use consistent naming conventions
|
|
90
|
-
|
|
91
|
-
Happy coding with Jac! 🍔
|
|
Binary file
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "relative-imports",
|
|
3
|
-
"version": "1.0.0",
|
|
4
|
-
"main": "index.js",
|
|
5
|
-
"scripts": {
|
|
6
|
-
"build": "npm run compile && vite build",
|
|
7
|
-
"dev": "vite dev",
|
|
8
|
-
"preview": "vite preview",
|
|
9
|
-
"compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
|
|
10
|
-
},
|
|
11
|
-
"keywords": [],
|
|
12
|
-
"author": "",
|
|
13
|
-
"license": "ISC",
|
|
14
|
-
"description": "Jac application: relative-imports",
|
|
15
|
-
"type": "module",
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"vite": "^6.4.1",
|
|
18
|
-
"@babel/cli": "^7.28.3",
|
|
19
|
-
"@babel/core": "^7.28.5",
|
|
20
|
-
"@babel/preset-env": "^7.28.5",
|
|
21
|
-
"@babel/preset-react": "^7.28.5"
|
|
22
|
-
},
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"react": "^19.2.0",
|
|
25
|
-
"react-dom": "^19.2.0",
|
|
26
|
-
"react-router-dom": "^6.30.1"
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
background-image: url('/static/assets/burger.png');
|
|
3
|
-
background-size: cover;
|
|
4
|
-
background-position: center;
|
|
5
|
-
min-height: 300px;
|
|
6
|
-
border-radius: 10px;
|
|
7
|
-
padding: 20px;
|
|
8
|
-
margin: 20px 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.card {
|
|
12
|
-
background: white;
|
|
13
|
-
border-radius: 10px;
|
|
14
|
-
padding: 20px;
|
|
15
|
-
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
16
|
-
max-width: 400px;
|
|
17
|
-
margin: 20px auto;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.burgerImage {
|
|
21
|
-
width: 200px;
|
|
22
|
-
height: auto;
|
|
23
|
-
border-radius: 10px;
|
|
24
|
-
display: block;
|
|
25
|
-
margin: 0 auto;
|
|
26
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { defineConfig } from "vite";
|
|
3
|
-
import path from "path";
|
|
4
|
-
import { fileURLToPath } from "url";
|
|
5
|
-
|
|
6
|
-
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
7
|
-
|
|
8
|
-
export default defineConfig({
|
|
9
|
-
root: ".", // base folder
|
|
10
|
-
build: {
|
|
11
|
-
rollupOptions: {
|
|
12
|
-
input: "build/main.js", // your compiled entry file
|
|
13
|
-
output: {
|
|
14
|
-
entryFileNames: "client.[hash].js", // name of the final js file
|
|
15
|
-
assetFileNames: "[name].[ext]",
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
outDir: "dist", // final bundled output
|
|
19
|
-
emptyOutDir: true,
|
|
20
|
-
},
|
|
21
|
-
publicDir: false,
|
|
22
|
-
resolve: {
|
|
23
|
-
alias: {
|
|
24
|
-
"@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
|
|
25
|
-
"@jac-client/assets": path.resolve(__dirname, "src/assets"),
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
});
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
# Static Path Example
|
|
2
|
-
|
|
3
|
-
This example demonstrates how to serve static assets using direct `/static/` path references.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Direct path references using `/static/assets/` URLs
|
|
8
|
-
- Simple and straightforward approach
|
|
9
|
-
- No build configuration required
|
|
10
|
-
- Works immediately without imports
|
|
11
|
-
|
|
12
|
-
## Project Structure
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
image-asset/
|
|
16
|
-
├── app.jac # Main application file
|
|
17
|
-
├── assets/ # Static assets directory
|
|
18
|
-
│ └── burger.png # Burger image
|
|
19
|
-
├── src/ # Source files (generated)
|
|
20
|
-
├── build/ # Build output (generated)
|
|
21
|
-
└── dist/ # Distribution output (generated)
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## Running the Example
|
|
25
|
-
|
|
26
|
-
1. Make sure node modules are installed:
|
|
27
|
-
```bash
|
|
28
|
-
npm install
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
2. Run the Jac server:
|
|
32
|
-
```bash
|
|
33
|
-
jac serve app.jac
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
3. Open your browser and navigate to:
|
|
37
|
-
```
|
|
38
|
-
http://localhost:8000/page/app
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## How It Works
|
|
42
|
-
|
|
43
|
-
### Static Path Syntax
|
|
44
|
-
|
|
45
|
-
```jac
|
|
46
|
-
<img src="/static/assets/burger.png" alt="Burger" />
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### Server Configuration
|
|
50
|
-
|
|
51
|
-
The server automatically serves files from:
|
|
52
|
-
- `dist/` directory (Vite-bundled assets)
|
|
53
|
-
- `assets/` directory (user-provided static assets)
|
|
54
|
-
|
|
55
|
-
Both directories are checked when serving `/static/*` requests.
|
|
56
|
-
|
|
57
|
-
### Path Resolution
|
|
58
|
-
|
|
59
|
-
1. Request: `/static/assets/burger.png`
|
|
60
|
-
2. Server checks `dist/assets/burger.png` first
|
|
61
|
-
3. If not found, checks `assets/burger.png`
|
|
62
|
-
4. Serves file with appropriate MIME type
|
|
63
|
-
5. Sets cache headers for optimal performance
|
|
64
|
-
|
|
65
|
-
### Benefits
|
|
66
|
-
|
|
67
|
-
- **Simplicity**: No imports or build configuration needed
|
|
68
|
-
- **Immediate**: Works right away without build step
|
|
69
|
-
- **Flexible**: Easy to reference assets from anywhere
|
|
70
|
-
- **Quick Prototyping**: Perfect for rapid development
|
|
71
|
-
|
|
72
|
-
### Use Cases
|
|
73
|
-
|
|
74
|
-
**Direct Image References:**
|
|
75
|
-
```jac
|
|
76
|
-
<img src="/static/assets/logo.png" alt="Logo" />
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
**CSS Background Images:**
|
|
80
|
-
```jac
|
|
81
|
-
<div style={{backgroundImage: "url('/static/assets/hero.jpg')"}} />
|
|
82
|
-
```
|
|
83
|
-
|
|
84
|
-
**Dynamic Asset Paths:**
|
|
85
|
-
```jac
|
|
86
|
-
let imagePath = `/static/assets/${imageName}.png`;
|
|
87
|
-
<img src={imagePath} />
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
## Best Practices
|
|
91
|
-
|
|
92
|
-
1. Use this method for quick prototypes
|
|
93
|
-
2. Organize assets in the `assets/` folder
|
|
94
|
-
3. Use descriptive file names
|
|
95
|
-
4. Keep assets reasonably sized
|
|
96
|
-
5. Consider using imports for production apps
|
|
97
|
-
|
|
98
|
-
## Limitations
|
|
99
|
-
|
|
100
|
-
- No automatic optimization
|
|
101
|
-
- No hash-based cache busting
|
|
102
|
-
- Manual cache control required
|
|
103
|
-
- No type safety for asset paths
|
|
104
|
-
|
|
105
|
-
## When to Use
|
|
106
|
-
|
|
107
|
-
**Choose Static Path if:**
|
|
108
|
-
- Building a quick prototype
|
|
109
|
-
- Assets don't need optimization
|
|
110
|
-
- Want immediate results
|
|
111
|
-
- Working with simple, small assets
|
|
112
|
-
|
|
113
|
-
**Consider Import Methods if:**
|
|
114
|
-
- Building for production
|
|
115
|
-
- Need automatic optimization
|
|
116
|
-
- Want cache busting
|
|
117
|
-
- Prefer type-safe references
|
|
118
|
-
|
|
119
|
-
Happy coding with Jac! 🍔
|
|
Binary file
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "image-asset",
|
|
3
|
-
"version": "1.0.0",
|
|
4
|
-
"main": "index.js",
|
|
5
|
-
"scripts": {
|
|
6
|
-
"build": "npm run compile && vite build",
|
|
7
|
-
"dev": "vite dev",
|
|
8
|
-
"preview": "vite preview",
|
|
9
|
-
"compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
|
|
10
|
-
},
|
|
11
|
-
"keywords": [],
|
|
12
|
-
"author": "",
|
|
13
|
-
"license": "ISC",
|
|
14
|
-
"description": "Jac application: image-asset",
|
|
15
|
-
"type": "module",
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"vite": "^6.4.1",
|
|
18
|
-
"@babel/cli": "^7.28.3",
|
|
19
|
-
"@babel/core": "^7.28.5",
|
|
20
|
-
"@babel/preset-env": "^7.28.5",
|
|
21
|
-
"@babel/preset-react": "^7.28.5"
|
|
22
|
-
},
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"react": "^19.2.0",
|
|
25
|
-
"react-dom": "^19.2.0",
|
|
26
|
-
"react-router-dom": "^6.30.1"
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
background-image: url('/static/assets/burger.png');
|
|
3
|
-
background-size: cover;
|
|
4
|
-
background-position: center;
|
|
5
|
-
min-height: 300px;
|
|
6
|
-
border-radius: 10px;
|
|
7
|
-
padding: 20px;
|
|
8
|
-
margin: 20px 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.card {
|
|
12
|
-
background: white;
|
|
13
|
-
border-radius: 10px;
|
|
14
|
-
padding: 20px;
|
|
15
|
-
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
|
16
|
-
max-width: 400px;
|
|
17
|
-
margin: 20px auto;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.burgerImage {
|
|
21
|
-
width: 200px;
|
|
22
|
-
height: auto;
|
|
23
|
-
border-radius: 10px;
|
|
24
|
-
display: block;
|
|
25
|
-
margin: 0 auto;
|
|
26
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { defineConfig } from "vite";
|
|
3
|
-
import path from "path";
|
|
4
|
-
import { fileURLToPath } from "url";
|
|
5
|
-
|
|
6
|
-
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
7
|
-
|
|
8
|
-
export default defineConfig({
|
|
9
|
-
root: ".", // base folder
|
|
10
|
-
build: {
|
|
11
|
-
rollupOptions: {
|
|
12
|
-
input: "build/main.js", // your compiled entry file
|
|
13
|
-
output: {
|
|
14
|
-
entryFileNames: "client.[hash].js", // name of the final js file
|
|
15
|
-
assetFileNames: "[name].[ext]",
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
outDir: "dist", // final bundled output
|
|
19
|
-
emptyOutDir: true,
|
|
20
|
-
},
|
|
21
|
-
publicDir: false,
|
|
22
|
-
resolve: {
|
|
23
|
-
alias: {
|
|
24
|
-
"@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
|
|
25
|
-
"@jac-client/assets": path.resolve(__dirname, "src/assets"),
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
});
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
# Import Alias Example
|
|
2
|
-
|
|
3
|
-
This example demonstrates how to import static assets using the `@jac-client/assets` alias pattern.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Imports image using `@jac-client/assets` alias
|
|
8
|
-
- Vite processes and optimizes the asset
|
|
9
|
-
- Automatic hash generation for cache busting
|
|
10
|
-
- Type-safe asset references
|
|
11
|
-
|
|
12
|
-
## Project Structure
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
import-alias/
|
|
16
|
-
├── app.jac # Main application file
|
|
17
|
-
├── assets/ # Static assets directory
|
|
18
|
-
│ └── burger.png # Burger image
|
|
19
|
-
├── src/ # Source files (generated)
|
|
20
|
-
├── build/ # Build output (generated)
|
|
21
|
-
└── dist/ # Distribution output (generated)
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## Running the Example
|
|
25
|
-
|
|
26
|
-
1. Make sure node modules are installed:
|
|
27
|
-
```bash
|
|
28
|
-
npm install
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
2. Run the Jac server:
|
|
32
|
-
```bash
|
|
33
|
-
jac serve app.jac
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
3. Open your browser and navigate to:
|
|
37
|
-
```
|
|
38
|
-
http://localhost:8000/page/app
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## How It Works
|
|
42
|
-
|
|
43
|
-
### Import Syntax
|
|
44
|
-
|
|
45
|
-
```jac
|
|
46
|
-
cl import from "@jac-client/assets/burger.png" { default as burgerImage }
|
|
47
|
-
<img src={burgerImage} />
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### Configuration
|
|
51
|
-
|
|
52
|
-
The alias is configured in `vite.config.js`:
|
|
53
|
-
|
|
54
|
-
```javascript
|
|
55
|
-
resolve: {
|
|
56
|
-
alias: {
|
|
57
|
-
"@jac-client/assets": path.resolve(__dirname, "src/assets"),
|
|
58
|
-
},
|
|
59
|
-
}
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
### Build Process
|
|
63
|
-
|
|
64
|
-
1. Assets from root `assets/` folder are copied to `src/assets/` during build
|
|
65
|
-
2. Vite processes the import and generates optimized asset URLs
|
|
66
|
-
3. Assets are bundled with hash-based filenames for cache invalidation
|
|
67
|
-
4. The imported variable contains the processed asset URL
|
|
68
|
-
|
|
69
|
-
### Benefits
|
|
70
|
-
|
|
71
|
-
- **Type Safety**: Import errors caught at build time
|
|
72
|
-
- **Optimization**: Vite automatically optimizes assets
|
|
73
|
-
- **Cache Busting**: Hash-based filenames prevent stale cache
|
|
74
|
-
- **Code Splitting**: Assets can be code-split automatically
|
|
75
|
-
|
|
76
|
-
## Best Practices
|
|
77
|
-
|
|
78
|
-
1. Use this method for production applications
|
|
79
|
-
2. Organize assets in the `assets/` folder
|
|
80
|
-
3. Let Vite handle optimization and caching
|
|
81
|
-
4. Use descriptive variable names for imported assets
|
|
82
|
-
|
|
83
|
-
Happy coding with Jac! 🍔
|
|
Binary file
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "import-alias",
|
|
3
|
-
"version": "1.0.0",
|
|
4
|
-
"main": "index.js",
|
|
5
|
-
"scripts": {
|
|
6
|
-
"build": "npm run compile && vite build",
|
|
7
|
-
"dev": "vite dev",
|
|
8
|
-
"preview": "vite preview",
|
|
9
|
-
"compile": "babel src --out-dir build --extensions \".jsx,.js\" --out-file-extension .js"
|
|
10
|
-
},
|
|
11
|
-
"keywords": [],
|
|
12
|
-
"author": "",
|
|
13
|
-
"license": "ISC",
|
|
14
|
-
"description": "Jac application: import-alias",
|
|
15
|
-
"type": "module",
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"vite": "^6.4.1",
|
|
18
|
-
"@babel/cli": "^7.28.3",
|
|
19
|
-
"@babel/core": "^7.28.5",
|
|
20
|
-
"@babel/preset-env": "^7.28.5",
|
|
21
|
-
"@babel/preset-react": "^7.28.5"
|
|
22
|
-
},
|
|
23
|
-
"dependencies": {
|
|
24
|
-
"react": "^19.2.0",
|
|
25
|
-
"react-dom": "^19.2.0",
|
|
26
|
-
"react-router-dom": "^6.30.1"
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { defineConfig } from "vite";
|
|
3
|
-
import path from "path";
|
|
4
|
-
import { fileURLToPath } from "url";
|
|
5
|
-
|
|
6
|
-
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
7
|
-
|
|
8
|
-
export default defineConfig({
|
|
9
|
-
root: ".", // base folder
|
|
10
|
-
build: {
|
|
11
|
-
rollupOptions: {
|
|
12
|
-
input: "build/main.js", // your compiled entry file
|
|
13
|
-
output: {
|
|
14
|
-
entryFileNames: "client.[hash].js", // name of the final js file
|
|
15
|
-
assetFileNames: "[name].[ext]",
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
outDir: "dist", // final bundled output
|
|
19
|
-
emptyOutDir: true,
|
|
20
|
-
},
|
|
21
|
-
publicDir: false,
|
|
22
|
-
resolve: {
|
|
23
|
-
alias: {
|
|
24
|
-
"@jac-client/utils": path.resolve(__dirname, "src/client_runtime.js"),
|
|
25
|
-
"@jac-client/assets": path.resolve(__dirname, "src/assets"),
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
});
|