chp 0.0.1

* 描述
非常基础的Python函数，以可组合的方式生成HTML。

* 使用方法

非常受React的启发。

组件是任何返回 ~create_element~ 调用结果的函数。这个函数包括元素名称，

让我们首先定义一个Text组件。我们将创建一个不带任何属性的文本元素

#+begin_src python :session
from chp import create_element, create_prop, render_element

def Text(t)
return create_element("span", [], t)

t = Text("YourLabs")
render_element(t)
# 输出 => "<span >YourLabs</span>"
#+end_src

#+RESULTS
: <span >YourLabs</span>

现在让我们使用这个组件来在链接中显示文本


#+begin_src python :session
def Link(href, children)
href = create_prop("href", href)
return create_element("a", [href], children)

l = Link("yourlabs.org", [Text("YourLabs")])
render_element(l)
# 输出 => "<a href="yourlabs.org"><span >YourLabs</span></a>"
#+end_src

#+RESULTS
: <a href="yourlabs.org"><span >YourLabs</span></a>

现在让我们定义一个Menu组件，该组件将根据一些输入在nav元素中创建链接。同时，我们将~create_element~和~create_prop~函数分别重命名为~ce~和~cp~

#+begin_src python :session
ce = create_element
cp = create_prop

def Menu(links=[])
c = [] # 菜单子链接数组
for l in links
el = Link(l["href"], [Text(l["text"])])
c.append(el)

return ce("nav", [cp("class", "menu")], c)

links = [
{
"href": "yourlabs.org",
"text": "YourLabs",
},
{
"href": "novamedia.nyc",
"text": "NovaMedia",
},
]

m = Menu(links)
render_element(m)
# 输出 => "<nav class="menu"><a href="yourlabs.org"><span >YourLabs</span></a><a href="novamedia.nyc"><span >NovaMedia</span></a></nav>"
#+end_src

#+RESULTS

格式化后，最终输出是
#+begin_src html
<nav class="menu">
<a href="yourlabs.org">
<span>YourLabs</span>
</a>
<a href="novamedia.nyc">
<span>NovaMedia</span>
</a>
</nav>
#+end_src

您可以查看app.py和components.py文件，了解如何使用此方法轻松构建整个页面。app.py文件将html输出写入另一个名为output.html的文件。

* 尝试
#+begin_src bash
git clone git@github.com:tbinetruy/CHIP.git
cd CHIP

python app.py # 将html写入output.html文件
firefox output.html
#+end_src

* 示例

要运行示例项目
- pip install --user --editable path/to/chp[dev]
- yarn install; yarn start
- chp-django runserver
- py.test path/to/chp

#+begin_src python
import chp

def FormSchema(is_checked)
return chp.Form([
chp.Row([
chp.Input('username'),
chp.CheckboxField(is_checked),
])
])

class PostForm(forms.ModelForm)
def render(self)
is_checked = 'checked' # self.checked
return mark_safe(FormSchema(is_checked).render_element(Form))

#+end_src

~phtml~ 变成一个包含以下html代码的字符串

#+begin_src html
<form class="mdc-layout-grid__cell">
<div class="mdc-layout-grid__inner">
<input class="mdc-input__native-control" type="text" id="{{ id }}" value="{{ value }}" name="username"></input>
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input class="mdc-checkbox__native-control" type="checkbox" id="{{ id }}" name="password"></input>
<div class="mdc-checkbox-background"></div>
<label for="{{ id }}">{{ label }}</label>
</div>
</div>
</div>
<div >
{% for error in form.non_field_errors %}
{{ error }}
{% endfor %}
</div>
</form>
#+end_src

* TODOs
- 测试pyreact.py文件。一些高级结果被复制粘贴到tests.org