|
1 | | -Jac Client |
2 | | -========== |
| 1 | +# Jac Client |
3 | 2 |
|
4 | | -Lightweight plugin that adds Vite-powered client bundling to Jac programs. It provides a `ClientBundleBuilder` implementation discovered by the Jac runtime via entry-points, so you can generate optimized browser bundles from Jac client code automatically. |
| 3 | +Build full-stack web applications with Jac - one language for frontend and backend. |
5 | 4 |
|
6 | | -Requirements |
7 | | ------------- |
8 | | -- Python: 3.12+ |
9 | | -- Python deps: `jaclang==0.8.10` (installed transitively) |
10 | | -- Node.js tooling available on PATH: |
11 | | - - `node`/`npm` (or `pnpm`/`yarn` if `npx` can execute Vite) |
12 | | - - `npx` and Vite present in your frontend project (`devDependencies`) |
| 5 | +Jac Client enables you to write React-like components, manage state, and build interactive UIs all in Jac. No need for separate frontend frameworks, HTTP clients, or complex build configurations. |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## ✨ Features |
| 10 | + |
| 11 | +- **Single Language**: Write frontend and backend in Jac |
| 12 | +- **No HTTP Client**: Use `__jacSpawn()` instead of fetch/axios |
| 13 | +- **Reactive State**: Built-in state management with `createState()` |
| 14 | +- **Component-Based**: Build reusable UI components with JSX |
| 15 | +- **Graph Database**: Built-in graph data model eliminates need for SQL/NoSQL |
| 16 | +- **Type Safety**: Type checking across frontend and backend |
| 17 | +- **Vite-Powered**: Optimized production bundles with Vite |
| 18 | + |
| 19 | +--- |
| 20 | + |
| 21 | +## 🚀 Quick Start |
13 | 22 |
|
14 | | -Install |
15 | | -------- |
16 | | -Using pip: |
| 23 | +### Installation |
17 | 24 |
|
18 | 25 | ```bash |
19 | 26 | pip install jac-client |
20 | 27 | ``` |
21 | 28 |
|
22 | | -Using Poetry inside a project: |
| 29 | +### Create a New App |
23 | 30 |
|
24 | 31 | ```bash |
25 | | -poetry add jac-client |
| 32 | +jac create_jac_app my-app |
| 33 | +cd my-app |
| 34 | +jac serve app.jac |
26 | 35 | ``` |
27 | 36 |
|
| 37 | +Visit `http://localhost:8000` to see your app! |
| 38 | + |
| 39 | +--- |
| 40 | + |
| 41 | +## 📚 Documentation |
| 42 | + |
| 43 | +For detailed guides and tutorials, see the **[docs folder](jac_client/docs/)**: |
| 44 | + |
| 45 | +- **[Getting Started Guide](jac_client/docs/README.md)** - Complete beginner's guide |
| 46 | +- **[Routing](jac_client/docs/routing.md)** - Multi-page applications with `initRouter()` |
| 47 | +- **[Lifecycle Hooks](jac_client/docs/lifecycle-hooks.md)** - Using `onMount()` for initialization |
| 48 | +- **[Advanced State](jac_client/docs/advanced-state.md)** - Managing complex state |
| 49 | +- **[Imports](jac_client/docs/imports.md)** - Importing libraries, Jac files, and JavaScript modules |
| 50 | + |
| 51 | +--- |
| 52 | + |
| 53 | +## 💡 Example |
| 54 | + |
| 55 | +```jac |
| 56 | +cl { |
| 57 | + let [count, setCount] = createState({"value": 0}); |
| 58 | +
|
| 59 | + def Counter() -> any { |
| 60 | + s = count(); |
| 61 | + return <div> |
| 62 | + <h1>Count: {s.value}</h1> |
| 63 | + <button onClick={lambda -> None { |
| 64 | + setCount({"value": s.value + 1}); |
| 65 | + }}> |
| 66 | + Increment |
| 67 | + </button> |
| 68 | + </div>; |
| 69 | + } |
| 70 | +
|
| 71 | + def jac_app() -> any { |
| 72 | + return Counter(); |
| 73 | + } |
| 74 | +} |
28 | 75 | ``` |
29 | | -your_app/ |
30 | | - package.json # contains vite in devDependencies |
31 | | - node_modules/ |
32 | | - static/ |
33 | | - client/ |
34 | | - js/ # Vite output will be written here |
35 | | - your_program.jac # your Jac source |
36 | | -``` |
37 | 76 |
|
38 | | -How it works |
39 | | ------------- |
40 | | -At runtime, Jac discovers the `JacClient` plugin and calls its builder: |
| 77 | +--- |
| 78 | + |
| 79 | +## 🔧 Requirements |
| 80 | + |
| 81 | +- Python: 3.12+ |
| 82 | +- Node.js: For npm and Vite |
| 83 | +- Jac Language: `jaclang` (installed automatically) |
| 84 | + |
| 85 | +--- |
| 86 | + |
| 87 | +## 🛠️ How It Works |
| 88 | + |
| 89 | +Jac Client is a plugin that: |
| 90 | +1. Compiles your `.jac` client code to JavaScript |
| 91 | +2. Bundles dependencies with Vite for optimal performance |
| 92 | +3. Provides a runtime for reactive state and components |
| 93 | +4. Integrates seamlessly with Jac's backend graph operations |
| 94 | + |
| 95 | +--- |
| 96 | + |
| 97 | +## 📖 Learn More |
41 | 98 |
|
42 | | -- `jac_client.plugin.client.JacClient.get_client_bundle_builder()` returns `ViteClientBundleBuilder` configured with paths resolved from `JacMachine.base_path_dir`. |
43 | | -- The builder compiles `.jac` client code to JS, stitches any client imports, injects an init script that registers exports with the Jac runtime, then runs Vite to produce an optimized IIFE bundle named `client.[hash].js`. |
| 99 | +- **Full Documentation**: See [docs/](jac_client/docs/) for comprehensive guides |
| 100 | +- **Examples**: Check `jac_client/examples/` for working examples |
| 101 | +- **Issues**: Report bugs on [GitHub Issues](https://github.com/Jaseci-Labs/jaseci/issues) |
44 | 102 |
|
45 | | -Troubleshooting |
46 | | ---------------- |
47 | | -- npx/vite not found: ensure Node.js is installed and that `package.json` has Vite in `devDependencies` (so `npx vite` works in your app root). |
48 | | -- Build completes but no bundle found: the builder expects Vite to emit `client.[hash].js`; check custom Vite configs or permissions in the output directory. |
49 | | -- Output directory missing: the plugin will create the directory if needed, but verify the process has write permissions to `<base_path_dir>/static/client/js`. |
| 103 | +--- |
50 | 104 |
|
51 | | -Contributing |
52 | | ------------- |
53 | | -- See `jac-client/TODO.md` for improvements and `jac-client/ROADMAP.md` for direction. |
54 | | -- PRs to enhance cross-platform path handling, dev HMR, and caching are welcome. |
| 105 | +## 📄 License |
55 | 106 |
|
56 | | -License |
57 | | -------- |
58 | | -MIT (see repository root `LICENSE`). |
| 107 | +MIT License - see [LICENSE](../LICENSE) file. |
59 | 108 |
|
| 109 | +--- |
60 | 110 |
|
| 111 | +**Happy coding with Jac!** 🎉 |
0 commit comments