dars-framework 1.2.7__tar.gz → 1.2.9__tar.gz
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.
- {dars_framework-1.2.7 → dars_framework-1.2.9}/PKG-INFO +41 -2
- dars_framework-1.2.7/dars_framework.egg-info/PKG-INFO → dars_framework-1.2.9/README.md +244 -222
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/main.py +867 -714
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/config.py +1 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/security.py +21 -14
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/version.py +2 -2
- dars_framework-1.2.7/README.md → dars_framework-1.2.9/dars_framework.egg-info/PKG-INFO +57 -1
- {dars_framework-1.2.7 → dars_framework-1.2.9}/pyproject.toml +1 -1
- {dars_framework-1.2.7 → dars_framework-1.2.9}/LICENSE +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/MANIFEST.in +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/all.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/doctor/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/doctor/detect.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/doctor/doctor.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/doctor/installers.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/doctor/persist.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/doctor/preflight.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/doctor/ui.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/hot_reload.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/preview.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/cli/translations.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/advanced/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/advanced/accordion.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/advanced/card.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/advanced/modal.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/advanced/navbar.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/advanced/table.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/advanced/tabs.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/button.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/checkbox.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/container.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/datepicker.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/image.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/input.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/link.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/markdown.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/page.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/progressbar.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/radiobutton.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/select.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/slider.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/spinner.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/text.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/textarea.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/basic/tooltip.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/layout/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/layout/anchor.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/layout/flex.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/components/layout/grid.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/core/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/core/app.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/core/component.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/core/events.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/core/js_bridge.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/core/properties.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/core/state.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/dars_tests/apps_test/health_check.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/dars_tests/run_tests.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/dars_tests/tests/test_advanced_components.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/dars_tests/tests/test_basic_components.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/dars_tests/tests/test_core_and_cli.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/dars_tests/tests/test_layout_components.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/dars_tests/tests/test_version_check.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/app.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/cli.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/components.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/custom_components.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/events.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/exporters.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/getting_started.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/index.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/scripts.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/docs/state_management.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/exporters/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/exporters/base.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/exporters/web/OLD/html_css_js_OLD4.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/exporters/web/OLD/html_css_js_old.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/exporters/web/OLD/html_css_js_old2.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/exporters/web/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/exporters/web/html_css_js.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/exporters/web/vdom.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/js_lib.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/scripts/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/scripts/dscript.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/scripts/script.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/__pycache__/__init__.cpython-311.pyc +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/README.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/__pycache__/dynamic_event_demo.cpython-311.pyc +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/advanced/Modal_Demo/advanced_modal_demo.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/advanced/SimpleDashboard/dashboard.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/advanced/SimpleModermWeb/modern_web_app.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/advanced/VariousComponents/all_components_demo.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/advanced/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/advanced/dState/state_mods_demo.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/Forms/form_components.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/Forms/simple_form.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/HelloWorld/hello_world.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/Layouts/flex_layout_responsive.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/Layouts/grid_layout_responsive.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/Layouts/layout_multipage_demo.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/Multipage/multipage_example.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/PWA/icon-192x192.png +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/PWA/icon-512x512.png +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/PWA/pwa_custom_icons.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/basic/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/demo/__pycache__/complete_app.cpython-311.pyc +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/demo/complete_app.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/markdown/MarkdownTemplate/README.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/markdown/MarkdownTemplate/markdown_template.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/markdown/MarkdownTemplate/other_docs.md +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/examples/markdown/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars/templates/html/__init__.py +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars_framework.egg-info/SOURCES.txt +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars_framework.egg-info/dependency_links.txt +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars_framework.egg-info/entry_points.txt +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars_framework.egg-info/requires.txt +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/dars_framework.egg-info/top_level.txt +0 -0
- {dars_framework-1.2.7 → dars_framework-1.2.9}/setup.cfg +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Metadata-Version: 2.4
|
|
2
2
|
Name: dars_framework
|
|
3
|
-
Version: 1.2.
|
|
3
|
+
Version: 1.2.9
|
|
4
4
|
Summary: Dars is a Python UI framework for building modern, interactive web apps with only Python code. Write your interface in Python, export it to static HTML/CSS/JS, and deploy anywhere.
|
|
5
5
|
Author-email: ztamdev <ztadevs@gmail.com>
|
|
6
6
|
License-Expression: MIT
|
|
@@ -210,6 +210,7 @@ Example default:
|
|
|
210
210
|
"include": [],
|
|
211
211
|
"exclude": ["**/__pycache__", ".git", ".venv", "node_modules"],
|
|
212
212
|
"bundle": true,
|
|
213
|
+
"defaultMinify": true,
|
|
213
214
|
"viteMinify": true
|
|
214
215
|
}
|
|
215
216
|
```
|
|
@@ -220,7 +221,8 @@ Example default:
|
|
|
220
221
|
- `publicDir`: Folder (e.g., `public/` or `assets/`) copied into the output. If null, it is autodetected.
|
|
221
222
|
- `include`/`exclude`: Basic filters for copying from `publicDir`.
|
|
222
223
|
- `bundle`: Reserved for future use. CLI exports and build already bundle appropriately.
|
|
223
|
-
- `
|
|
224
|
+
- `defaultMinify`: Toggle the built-in Python minifier (safe, conservatively preserves `<pre>`, `<code>`, `script`, `style`, `textarea`). Controls HTML minification and provides JS/CSS fallback when advanced tools are unavailable. Default `true`.
|
|
225
|
+
- `viteMinify`: Toggle the Vite/esbuild minifier for JS/CSS. Default `true`.
|
|
224
226
|
|
|
225
227
|
Validate your config:
|
|
226
228
|
|
|
@@ -243,3 +245,40 @@ dars export config --format html
|
|
|
243
245
|
---
|
|
244
246
|
|
|
245
247
|
See LandingPage docs for details: state_management.md, events.md, scripts.md.
|
|
248
|
+
|
|
249
|
+
## More
|
|
250
|
+
|
|
251
|
+
- Visit dars [official website](https://ztamdev.github.io/Dars-Framework/)
|
|
252
|
+
- Visit the dars official [Documentation](https://ztamdev.github.io/Dars-Framework/documentation.html) now on separate website.
|
|
253
|
+
- Try dars without installing nothing just visit the [Dars Playground](https://dars-playground.vercel.app/)
|
|
254
|
+
|
|
255
|
+
## Local Execution and Live Preview
|
|
256
|
+
|
|
257
|
+
To test your app locally before exporting, use the hot-reload preview from any Python file that defines your app:
|
|
258
|
+
|
|
259
|
+
```python
|
|
260
|
+
if __name__ == "__main__":
|
|
261
|
+
app.rTimeCompile()
|
|
262
|
+
```
|
|
263
|
+
|
|
264
|
+
Then run your file directly:
|
|
265
|
+
|
|
266
|
+
```bash
|
|
267
|
+
python my_app.py
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
This will start a local server at http://localhost:8000 so you can view your app in the browser—no manual export needed. You can change the port with:
|
|
271
|
+
|
|
272
|
+
```bash
|
|
273
|
+
python my_app.py --port 8088
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
---
|
|
277
|
+
|
|
278
|
+
You can also use the CLI preview command on an exported app:
|
|
279
|
+
|
|
280
|
+
```bash
|
|
281
|
+
dars preview ./my_exported_app
|
|
282
|
+
```
|
|
283
|
+
|
|
284
|
+
This will start a local server at http://localhost:8000 to view your exported app in the browser.
|
|
@@ -1,20 +1,3 @@
|
|
|
1
|
-
Metadata-Version: 2.4
|
|
2
|
-
Name: dars_framework
|
|
3
|
-
Version: 1.2.7
|
|
4
|
-
Summary: Dars is a Python UI framework for building modern, interactive web apps with only Python code. Write your interface in Python, export it to static HTML/CSS/JS, and deploy anywhere.
|
|
5
|
-
Author-email: ztamdev <ztadevs@gmail.com>
|
|
6
|
-
License-Expression: MIT
|
|
7
|
-
Description-Content-Type: text/markdown
|
|
8
|
-
License-File: LICENSE
|
|
9
|
-
Requires-Dist: rich==14.2.0
|
|
10
|
-
Requires-Dist: bs4==0.0.2
|
|
11
|
-
Requires-Dist: uvicorn==0.35.0
|
|
12
|
-
Requires-Dist: fastapi==0.116.1
|
|
13
|
-
Requires-Dist: markdown2==2.5.4
|
|
14
|
-
Requires-Dist: requests==2.32.5
|
|
15
|
-
Requires-Dist: rjsmin==1.2.5
|
|
16
|
-
Dynamic: license-file
|
|
17
|
-
|
|
18
1
|
<h1 align="center">Dars Framework</h1>
|
|
19
2
|
|
|
20
3
|
<p align="center">
|
|
@@ -38,208 +21,247 @@ Try dars without installing nothing just visit the [Dars Playground](https://dar
|
|
|
38
21
|
- Preview instantly with hot-reload using `app.rTimeCompile()`.
|
|
39
22
|
- Export your app to static web files with a single CLI command.
|
|
40
23
|
- Use multipage, layouts, scripts, and more—see docs for advanced features.
|
|
41
|
-
- For more information visit the [Documentation](https://ztamdev.github.io/Dars-Framework/documentation.html)
|
|
42
|
-
|
|
43
|
-
## Quick Example: Your First App
|
|
44
|
-
```python
|
|
45
|
-
from dars.all import *
|
|
46
|
-
|
|
47
|
-
app = App(title="Hello World", theme="dark")
|
|
48
|
-
# Crear componentes
|
|
49
|
-
index = Page(
|
|
50
|
-
Text(
|
|
51
|
-
text="Hello World",
|
|
52
|
-
style={
|
|
53
|
-
'font-size': '48px',
|
|
54
|
-
'color': '#2c3e50',
|
|
55
|
-
'margin-bottom': '20px',
|
|
56
|
-
'font-weight': 'bold',
|
|
57
|
-
'text-align': 'center'
|
|
58
|
-
}
|
|
59
|
-
),
|
|
60
|
-
Text(
|
|
61
|
-
text="Hello World",
|
|
62
|
-
style={
|
|
63
|
-
'font-size': '20px',
|
|
64
|
-
'color': '#7f8c8d',
|
|
65
|
-
'margin-bottom': '40px',
|
|
66
|
-
'text-align': 'center'
|
|
67
|
-
}
|
|
68
|
-
),
|
|
69
|
-
|
|
70
|
-
Button(
|
|
71
|
-
text="Click Me!",
|
|
72
|
-
on_click= dScript("alert('Hello World')"),
|
|
73
|
-
on_mouse_enter=dScript("this.style.backgroundColor = '#2980b9';"),
|
|
74
|
-
on_mouse_leave=dScript("this.style.backgroundColor = '#3498db';"),
|
|
75
|
-
style={
|
|
76
|
-
'background-color': '#3498db',
|
|
77
|
-
'color': 'white',
|
|
78
|
-
'padding': '15px 30px',
|
|
79
|
-
'border': 'none',
|
|
80
|
-
'border-radius': '8px',
|
|
81
|
-
'font-size': '18px',
|
|
82
|
-
'cursor': 'pointer',
|
|
83
|
-
'transition': 'background-color 0.3s'
|
|
84
|
-
}
|
|
85
|
-
),
|
|
86
|
-
style={
|
|
87
|
-
'display': 'flex',
|
|
88
|
-
'flex-direction': 'column',
|
|
89
|
-
'align-items': 'center',
|
|
90
|
-
'justify-content': 'center',
|
|
91
|
-
'min-height': '100vh',
|
|
92
|
-
'background-color': '#f0f2f5',
|
|
93
|
-
'font-family': 'Arial, sans-serif'
|
|
94
|
-
}
|
|
95
|
-
)
|
|
96
|
-
index.attr()
|
|
97
|
-
app.add_page("index", index, title="Hello World", index=True)
|
|
98
|
-
|
|
99
|
-
if __name__ == "__main__":
|
|
100
|
-
app.rTimeCompile()
|
|
101
|
-
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
---
|
|
105
|
-
|
|
106
|
-
## Reactivity and State System
|
|
107
|
-
|
|
108
|
-
**Dars Framework** includes a built-in **reactive state system** (`dState` / `cState`) that allows dynamic and modular DOM updates directly from Python.
|
|
109
|
-
It enables fully event-driven interfaces without requiring manual JavaScript.
|
|
110
|
-
|
|
111
|
-
### Key Concepts
|
|
112
|
-
|
|
113
|
-
* **`dState(name, component, states)`**
|
|
114
|
-
Creates a reactive state controller bound to a specific component and a list of possible states.
|
|
115
|
-
|
|
116
|
-
* **`cState(idx, mods=[...])`**
|
|
117
|
-
Defines rules (modifications) that are automatically applied when entering a specific state.
|
|
118
|
-
|
|
119
|
-
* **`Mod` Helpers**
|
|
120
|
-
A compact way to modify DOM elements on state changes: `inc`, `dec`, `set`, `toggle_class`, `append_text`, `prepend_text`, `goto`, and more.
|
|
121
|
-
|
|
122
|
-
* **Deferred Mutations**
|
|
123
|
-
Using `component.attr(..., defer=True)` or `component.mod(...)` inside a `cComp=True` state defers HTML updates until an event occurs, preventing authoring-time mutations.
|
|
124
|
-
|
|
125
|
-
### Example Template
|
|
126
|
-
|
|
127
|
-
A complete example demonstrating `dState`, `cState`, `Mod`, and deferred updates is available [here](https://github.com/ZtaMDev/Dars-Framework/blob/CrystalMain/dars/templates/examples/advanced/dState/state_mods_demo.py)
|
|
128
|
-
|
|
129
|
-
<img width="384" height="187" alt="imagen" src="https://github.com/user-attachments/assets/7750ee7f-768f-48da-94df-2fa00339a99c" /> <img width="361" height="215" alt="imagen" src="https://github.com/user-attachments/assets/9b8a3e67-2424-49b4-aee0-9f1c0f747d66" />
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
### Features
|
|
134
|
-
|
|
135
|
-
* Reactive Mod system with compact `Mod` helpers
|
|
136
|
-
* Unified event model — any component can use `on_*` props (`on_click`, `on_input`, `on_change`, etc.)
|
|
137
|
-
* Deferred rendering for safer, predictable state transitions (`cComp=True`)
|
|
138
|
-
* Navigation between states using `goto`, including relative moves (`'+1'`, `'-1'`)
|
|
139
|
-
* Consistent, event-time mutation flow for reliable behavior
|
|
140
|
-
* Secure minification for production bundles (strong JS/CSS minifier integrated into the build pipeline)
|
|
141
|
-
|
|
142
|
-
---
|
|
143
|
-
|
|
144
|
-
## CLI Usage
|
|
145
|
-
| Command | What it does |
|
|
146
|
-
|-----------------------------------------|--------------------------------------------|
|
|
147
|
-
| `dars export my_app.py --format html` | Export app to HTML/CSS/JS in `./my_app_web` |
|
|
148
|
-
| `dars preview ./my_app_web` | Preview exported app locally |
|
|
149
|
-
| `dars init my_project` | Create a new Dars project (also creates dars.config.json) |
|
|
150
|
-
| `dars init --update` | Create/Update dars.config.json in current dir |
|
|
151
|
-
| `dars build` | Build using dars.config.json (entry/outdir/format) |
|
|
152
|
-
| `dars config validate` | Validate dars.config.json and print report |
|
|
153
|
-
| `dars info my_app.py` | Show info about your app |
|
|
154
|
-
| `dars formats` | List supported export formats |
|
|
155
|
-
| `dars --help` | Show help and all CLI options |
|
|
156
|
-
|
|
157
|
-
Tip: use `dars doctor` to review optional tooling that can enhance bundling/minification.
|
|
158
|
-
|
|
159
|
-
## More
|
|
160
|
-
|
|
161
|
-
- Visit dars [official website](https://ztamdev.github.io/Dars-Framework/)
|
|
162
|
-
- Visit the dars official [Documentation](https://ztamdev.github.io/Dars-Framework/documentation.html) now on separate website.
|
|
163
|
-
- Try dars without installing nothing just visit the [Dars Playground](https://dars-playground.vercel.app/)
|
|
164
|
-
|
|
165
|
-
## Local Execution and Live Preview
|
|
166
|
-
|
|
167
|
-
To test your app locally before exporting, use the hot-reload preview from any Python file that defines your app:
|
|
168
|
-
|
|
169
|
-
```python
|
|
170
|
-
if __name__ == "__main__":
|
|
171
|
-
app.rTimeCompile()
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
Then run your file directly:
|
|
175
|
-
|
|
176
|
-
```bash
|
|
177
|
-
python my_app.py
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
This will start a local server at http://localhost:8000 so you can view your app in the browser—no manual export needed. You can change the port with:
|
|
181
|
-
|
|
182
|
-
```bash
|
|
183
|
-
python my_app.py --port 8088
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
---
|
|
187
|
-
|
|
188
|
-
You can also use the CLI preview command on an exported app:
|
|
189
|
-
|
|
190
|
-
```bash
|
|
191
|
-
dars preview ./my_exported_app
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
This will start a local server at http://localhost:8000 to view your exported app in the browser.
|
|
195
|
-
|
|
196
|
-
---
|
|
197
|
-
|
|
198
|
-
## Project Configuration (dars.config.json)
|
|
199
|
-
|
|
200
|
-
Dars can read build/export settings from a `dars.config.json` at your project root. It is created automatically by `dars init`, and you can add it to existing projects with `dars init --update`.
|
|
201
|
-
|
|
202
|
-
Example default:
|
|
203
|
-
|
|
204
|
-
```json
|
|
205
|
-
{
|
|
206
|
-
"entry": "main.py",
|
|
207
|
-
"format": "html",
|
|
208
|
-
"outdir": "dist",
|
|
209
|
-
"publicDir": null,
|
|
210
|
-
"include": [],
|
|
211
|
-
"exclude": ["**/__pycache__", ".git", ".venv", "node_modules"],
|
|
212
|
-
"bundle": true,
|
|
213
|
-
"
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
- `
|
|
219
|
-
- `
|
|
220
|
-
- `
|
|
221
|
-
- `
|
|
222
|
-
- `
|
|
223
|
-
- `
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
24
|
+
- For more information visit the [Documentation](https://ztamdev.github.io/Dars-Framework/documentation.html)
|
|
25
|
+
|
|
26
|
+
## Quick Example: Your First App
|
|
27
|
+
```python
|
|
28
|
+
from dars.all import *
|
|
29
|
+
|
|
30
|
+
app = App(title="Hello World", theme="dark")
|
|
31
|
+
# Crear componentes
|
|
32
|
+
index = Page(
|
|
33
|
+
Text(
|
|
34
|
+
text="Hello World",
|
|
35
|
+
style={
|
|
36
|
+
'font-size': '48px',
|
|
37
|
+
'color': '#2c3e50',
|
|
38
|
+
'margin-bottom': '20px',
|
|
39
|
+
'font-weight': 'bold',
|
|
40
|
+
'text-align': 'center'
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
Text(
|
|
44
|
+
text="Hello World",
|
|
45
|
+
style={
|
|
46
|
+
'font-size': '20px',
|
|
47
|
+
'color': '#7f8c8d',
|
|
48
|
+
'margin-bottom': '40px',
|
|
49
|
+
'text-align': 'center'
|
|
50
|
+
}
|
|
51
|
+
),
|
|
52
|
+
|
|
53
|
+
Button(
|
|
54
|
+
text="Click Me!",
|
|
55
|
+
on_click= dScript("alert('Hello World')"),
|
|
56
|
+
on_mouse_enter=dScript("this.style.backgroundColor = '#2980b9';"),
|
|
57
|
+
on_mouse_leave=dScript("this.style.backgroundColor = '#3498db';"),
|
|
58
|
+
style={
|
|
59
|
+
'background-color': '#3498db',
|
|
60
|
+
'color': 'white',
|
|
61
|
+
'padding': '15px 30px',
|
|
62
|
+
'border': 'none',
|
|
63
|
+
'border-radius': '8px',
|
|
64
|
+
'font-size': '18px',
|
|
65
|
+
'cursor': 'pointer',
|
|
66
|
+
'transition': 'background-color 0.3s'
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
style={
|
|
70
|
+
'display': 'flex',
|
|
71
|
+
'flex-direction': 'column',
|
|
72
|
+
'align-items': 'center',
|
|
73
|
+
'justify-content': 'center',
|
|
74
|
+
'min-height': '100vh',
|
|
75
|
+
'background-color': '#f0f2f5',
|
|
76
|
+
'font-family': 'Arial, sans-serif'
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
index.attr()
|
|
80
|
+
app.add_page("index", index, title="Hello World", index=True)
|
|
81
|
+
|
|
82
|
+
if __name__ == "__main__":
|
|
83
|
+
app.rTimeCompile()
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Reactivity and State System
|
|
90
|
+
|
|
91
|
+
**Dars Framework** includes a built-in **reactive state system** (`dState` / `cState`) that allows dynamic and modular DOM updates directly from Python.
|
|
92
|
+
It enables fully event-driven interfaces without requiring manual JavaScript.
|
|
93
|
+
|
|
94
|
+
### Key Concepts
|
|
95
|
+
|
|
96
|
+
* **`dState(name, component, states)`**
|
|
97
|
+
Creates a reactive state controller bound to a specific component and a list of possible states.
|
|
98
|
+
|
|
99
|
+
* **`cState(idx, mods=[...])`**
|
|
100
|
+
Defines rules (modifications) that are automatically applied when entering a specific state.
|
|
101
|
+
|
|
102
|
+
* **`Mod` Helpers**
|
|
103
|
+
A compact way to modify DOM elements on state changes: `inc`, `dec`, `set`, `toggle_class`, `append_text`, `prepend_text`, `goto`, and more.
|
|
104
|
+
|
|
105
|
+
* **Deferred Mutations**
|
|
106
|
+
Using `component.attr(..., defer=True)` or `component.mod(...)` inside a `cComp=True` state defers HTML updates until an event occurs, preventing authoring-time mutations.
|
|
107
|
+
|
|
108
|
+
### Example Template
|
|
109
|
+
|
|
110
|
+
A complete example demonstrating `dState`, `cState`, `Mod`, and deferred updates is available [here](https://github.com/ZtaMDev/Dars-Framework/blob/CrystalMain/dars/templates/examples/advanced/dState/state_mods_demo.py)
|
|
111
|
+
|
|
112
|
+
<img width="384" height="187" alt="imagen" src="https://github.com/user-attachments/assets/7750ee7f-768f-48da-94df-2fa00339a99c" /> <img width="361" height="215" alt="imagen" src="https://github.com/user-attachments/assets/9b8a3e67-2424-49b4-aee0-9f1c0f747d66" />
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
### Features
|
|
117
|
+
|
|
118
|
+
* Reactive Mod system with compact `Mod` helpers
|
|
119
|
+
* Unified event model — any component can use `on_*` props (`on_click`, `on_input`, `on_change`, etc.)
|
|
120
|
+
* Deferred rendering for safer, predictable state transitions (`cComp=True`)
|
|
121
|
+
* Navigation between states using `goto`, including relative moves (`'+1'`, `'-1'`)
|
|
122
|
+
* Consistent, event-time mutation flow for reliable behavior
|
|
123
|
+
* Secure minification for production bundles (strong JS/CSS minifier integrated into the build pipeline)
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
## CLI Usage
|
|
128
|
+
| Command | What it does |
|
|
129
|
+
|-----------------------------------------|--------------------------------------------|
|
|
130
|
+
| `dars export my_app.py --format html` | Export app to HTML/CSS/JS in `./my_app_web` |
|
|
131
|
+
| `dars preview ./my_app_web` | Preview exported app locally |
|
|
132
|
+
| `dars init my_project` | Create a new Dars project (also creates dars.config.json) |
|
|
133
|
+
| `dars init --update` | Create/Update dars.config.json in current dir |
|
|
134
|
+
| `dars build` | Build using dars.config.json (entry/outdir/format) |
|
|
135
|
+
| `dars config validate` | Validate dars.config.json and print report |
|
|
136
|
+
| `dars info my_app.py` | Show info about your app |
|
|
137
|
+
| `dars formats` | List supported export formats |
|
|
138
|
+
| `dars --help` | Show help and all CLI options |
|
|
139
|
+
|
|
140
|
+
Tip: use `dars doctor` to review optional tooling that can enhance bundling/minification.
|
|
141
|
+
|
|
142
|
+
## More
|
|
143
|
+
|
|
144
|
+
- Visit dars [official website](https://ztamdev.github.io/Dars-Framework/)
|
|
145
|
+
- Visit the dars official [Documentation](https://ztamdev.github.io/Dars-Framework/documentation.html) now on separate website.
|
|
146
|
+
- Try dars without installing nothing just visit the [Dars Playground](https://dars-playground.vercel.app/)
|
|
147
|
+
|
|
148
|
+
## Local Execution and Live Preview
|
|
149
|
+
|
|
150
|
+
To test your app locally before exporting, use the hot-reload preview from any Python file that defines your app:
|
|
151
|
+
|
|
152
|
+
```python
|
|
153
|
+
if __name__ == "__main__":
|
|
154
|
+
app.rTimeCompile()
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Then run your file directly:
|
|
158
|
+
|
|
159
|
+
```bash
|
|
160
|
+
python my_app.py
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
This will start a local server at http://localhost:8000 so you can view your app in the browser—no manual export needed. You can change the port with:
|
|
164
|
+
|
|
165
|
+
```bash
|
|
166
|
+
python my_app.py --port 8088
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
You can also use the CLI preview command on an exported app:
|
|
172
|
+
|
|
173
|
+
```bash
|
|
174
|
+
dars preview ./my_exported_app
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
This will start a local server at http://localhost:8000 to view your exported app in the browser.
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## Project Configuration (dars.config.json)
|
|
182
|
+
|
|
183
|
+
Dars can read build/export settings from a `dars.config.json` at your project root. It is created automatically by `dars init`, and you can add it to existing projects with `dars init --update`.
|
|
184
|
+
|
|
185
|
+
Example default:
|
|
186
|
+
|
|
187
|
+
```json
|
|
188
|
+
{
|
|
189
|
+
"entry": "main.py",
|
|
190
|
+
"format": "html",
|
|
191
|
+
"outdir": "dist",
|
|
192
|
+
"publicDir": null,
|
|
193
|
+
"include": [],
|
|
194
|
+
"exclude": ["**/__pycache__", ".git", ".venv", "node_modules"],
|
|
195
|
+
"bundle": true,
|
|
196
|
+
"defaultMinify": true,
|
|
197
|
+
"viteMinify": true
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
- `entry`: Python entry file. Used by `dars build` and `dars export config`.
|
|
202
|
+
- `format`: Export format. Currently only `html` is supported.
|
|
203
|
+
- `outdir`: Output directory. Used by `dars build` and default for `dars export` when not overridden.
|
|
204
|
+
- `publicDir`: Folder (e.g., `public/` or `assets/`) copied into the output. If null, it is autodetected.
|
|
205
|
+
- `include`/`exclude`: Basic filters for copying from `publicDir`.
|
|
206
|
+
- `bundle`: Reserved for future use. CLI exports and build already bundle appropriately.
|
|
207
|
+
- `defaultMinify`: Toggle the built-in Python minifier (safe, conservatively preserves `<pre>`, `<code>`, `script`, `style`, `textarea`). Controls HTML minification and provides JS/CSS fallback when advanced tools are unavailable. Default `true`.
|
|
208
|
+
- `viteMinify`: Toggle the Vite/esbuild minifier for JS/CSS. Default `true`.
|
|
209
|
+
|
|
210
|
+
Validate your config:
|
|
211
|
+
|
|
212
|
+
```bash
|
|
213
|
+
dars config validate
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
Build using config:
|
|
217
|
+
|
|
218
|
+
```bash
|
|
219
|
+
dars build
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
Export using the config entry and outdir:
|
|
223
|
+
|
|
224
|
+
```bash
|
|
225
|
+
dars export config --format html
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
---
|
|
229
|
+
|
|
230
|
+
See LandingPage docs for details: state_management.md, events.md, scripts.md.
|
|
231
|
+
|
|
232
|
+
## More
|
|
233
|
+
|
|
234
|
+
- Visit dars [official website](https://ztamdev.github.io/Dars-Framework/)
|
|
235
|
+
- Visit the dars official [Documentation](https://ztamdev.github.io/Dars-Framework/documentation.html) now on separate website.
|
|
236
|
+
- Try dars without installing nothing just visit the [Dars Playground](https://dars-playground.vercel.app/)
|
|
237
|
+
|
|
238
|
+
## Local Execution and Live Preview
|
|
239
|
+
|
|
240
|
+
To test your app locally before exporting, use the hot-reload preview from any Python file that defines your app:
|
|
241
|
+
|
|
242
|
+
```python
|
|
243
|
+
if __name__ == "__main__":
|
|
244
|
+
app.rTimeCompile()
|
|
245
|
+
```
|
|
246
|
+
|
|
247
|
+
Then run your file directly:
|
|
248
|
+
|
|
249
|
+
```bash
|
|
250
|
+
python my_app.py
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
This will start a local server at http://localhost:8000 so you can view your app in the browser—no manual export needed. You can change the port with:
|
|
254
|
+
|
|
255
|
+
```bash
|
|
256
|
+
python my_app.py --port 8088
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
---
|
|
260
|
+
|
|
261
|
+
You can also use the CLI preview command on an exported app:
|
|
262
|
+
|
|
263
|
+
```bash
|
|
264
|
+
dars preview ./my_exported_app
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
This will start a local server at http://localhost:8000 to view your exported app in the browser.
|