Initial release

miguelgrinberg · Jan 31, 2021 · 968bb36 · 968bb36
commit 968bb36
Show file tree

Hide file tree

Showing 16 changed files with 963 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,47 @@
+*.py[cod]
+
+# C extensions
+*.so
+
+# Packages
+*.egg
+*.egg-info
+dist
+build
+eggs
+parts
+var
+sdist
+develop-eggs
+.installed.cfg
+lib
+lib64
+__pycache__
+
+# Installer logs
+pip-log.txt
+
+# Unit test / coverage reports
+.coverage
+.tox
+nosetests.xml
+
+# Translations
+*.mo
+
+# Mr Developer
+.mr.developer.cfg
+.project
+.pydevproject
+
+docs/_build
+venv*
+.eggs
+.ropeproject
+tags
+.idea
+.vscode
+htmlcov
+*.swp
+node_modules
+.python-version
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Miguel Grinberg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,90 @@
+turbo-flask
+===========
+
+Integration of Hotwire's Turbo library with Flask.
+
+How to Install
+--------------
+
+```bash
+pip install turbo-flask
+```
+
+How to Add to your Project
+--------------------------
+
+Direct initialization:
+
+```python
+from flask import Flask
+from turbo_flask import Turbo
+
+app = Flask(__name__)
+turbo = Turbo(app)
+```
+
+Factory function initialization:
+
+```python
+from flask import Flask
+from turbo_flask import Turbo
+
+turbo = Turbo()
+
+def create_app():
+    app = Flask(__name__)
+    turbo.init_app(app)
+
+    return app
+```
+
+To add Turbo-Flask to your pages, include `{{ turbo() }}` in the `<head>`
+element of your main Jinja template:
+
+```html
+<!doctype html>
+<html>
+  <head>
+    {{ turbo() }}
+  </head>
+  <body>
+    ...
+  </body>
+</html>
+```
+
+How to Use
+----------
+
+See the [turbo.js documentation](https://turbo.hotwire.dev/) to learn how to
+take advantage of this library.
+
+If you decide to use the Turbo Streams feature, this extension has helper
+functions to generate the correct Flask responses. Here is an example with a
+single streamed response:
+
+```python
+    if turbo.can_stream():
+        return turbo.stream(
+            turbo.append(render_template('_todo.html', todo=todo), target='todos'),
+        )
+    else:
+        return render_template('index.html', todos=todos)
+```
+
+And here is another with a list of them:
+
+```python
+    if turbo.can_stream():
+        return turbo.stream([
+            turbo.append(render_template('_todo.html', todo=todo), target='todos'),
+            turbo.update(render_template('_todo_input.html'), target='form')
+        ])
+    else:
+        return render_template('index.html', todos=todos)
+```
+
+WebSocket Streaming
+-------------------
+
+This feature of turbo.js has not been implemented at this time.
diff --git a/examples/todos/app.py b/examples/todos/app.py
@@ -0,0 +1,58 @@
+from flask import Flask, render_template, request, redirect, url_for, abort
+from turbo_flask import Turbo
+from models import Todo
+
+app = Flask(__name__)
+turbo = Turbo(app)
+
+todos = [Todo('buy eggs'), Todo('walk the dog')]
+
+
+def get_todo_by_id(id):
+    todo = [todo for todo in todos if todo.id == id]
+    if len(todo) == 0:
+        abort(404)
+    return todo[0]
+
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    if request.method == 'POST':
+        todo = Todo(request.form['task'])
+        todos.append(todo)
+        if turbo.can_stream():
+            return turbo.stream([
+                turbo.append(
+                    render_template('_todo.html', todo=todo), target='todos'),
+                turbo.update(
+                    render_template('_todo_input.html'), target='form')])
+    return render_template('index.html', todos=todos)
+
+
+@app.route('/toggle/<id>', methods=['POST'])
+def toggle(id):
+    todo = get_todo_by_id(id)
+    todo.completed = not todo.completed
+    if turbo.can_stream():
+        return turbo.stream(
+            turbo.replace(render_template('_todo.html', todo=todo),
+                          target=f'todo-{todo.id}'))
+    return redirect(url_for('index'))
+
+
+@app.route('/edit/<id>', methods=['GET', 'POST'])
+def edit(id):
+    todo = get_todo_by_id(id)
+    if request.method == 'POST':
+        todo.task = request.form['task']
+        return redirect(url_for('index'))
+    return render_template('index.html', todos=todos, edit_id=todo.id)
+
+
+@app.route('/delete/<id>', methods=['POST'])
+def delete(id):
+    todo = get_todo_by_id(id)
+    todos.remove(todo)
+    if turbo.can_stream():
+        return turbo.stream(turbo.remove(target=f'todo-{todo.id}'))
+    return redirect(url_for('index'))
diff --git a/examples/todos/models.py b/examples/todos/models.py
@@ -0,0 +1,8 @@
+import uuid
+
+
+class Todo:
+    def __init__(self, task):
+        self.id = uuid.uuid4().hex
+        self.task = task
+        self.completed = False
diff --git a/examples/todos/static/base.css b/examples/todos/static/base.css
@@ -0,0 +1,141 @@
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#issue-count {
+	display: none;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}
diff --git a/examples/todos/static/edit.svg b/examples/todos/static/edit.svg