Merge remote-tracking branch 'source/master' into master

Author: mekhami

.flake8

@@ -0,0 +1,5 @@
+
+[flake8]
+max-line-length = 100
+ignore = E501,W503
+exclude = .git,__pycache__,docs/source/conf.py,build,dist,venv,node_modules,.tox,scaffolds

.github/workflows/build.yml

@@ -0,0 +1,52 @@
+name: Running unittests
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  unittests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        python-version: [3.6, 3.9]
+        django: ["2.2", "3.1"]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Set up Python ${{ matrix.python-version }}
+      uses: actions/setup-python@v2
+      with:
+        python-version: ${{ matrix.python-version }}
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip
+        pip install -r requirements_test.txt
+        if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
+    - name: Linting
+      run: flake8
+    - name: Run unittests
+      env:
+        TOX_ENV: py${{ matrix.python-version}}-django${{ matrix.django }}
+      run: |
+        tox -e $TOX_ENV
+  integrationtests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Set up Python 3.x
+        uses: actions/setup-python@v2
+        with:
+          python-version: '3.9'
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements_test.txt
+          if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
+      - name: Run integration tests
+        env:
+          TOX_ENV: py3.9-django3.1-cypress
+        run: |
+          tox -e $TOX_ENV

.travis.yml

@@ -83,6 +83,21 @@ python manage.py runserver
 # visit https://localhost:8000/test
 ```
 
+## ⛑ Running tests locally
+The most important tests are integration tests that makes sure that frontend and backend work together in conjunction with each other.
+
+```
+# Install the cypress et al
+npm install
+
+# Spin up a dev server.
+python manage.py runserver
+
+# Run the cypress tests
+npm run cypress:run
+```
+
+
 ## 🔜 Release
 
 ```

README.md

@@ -53,3 +53,12 @@ Also, we just really enjoy using **Django**.
 
 Sockpuppet was originally inspired by StimulusReflex which was inspired by LiveView, but we are charting our own course together with StimulusReflex. Our goal has always been to make building modern apps with Django the most productive and enjoyable option available. We want to inspire our friends working with other tools and technologies to evaluate how concepts like Sockpuppet could work in their ecosystems and communities.
 
+## Architecture
+
+So what is happening behind the scenes here? Sockpuppet works in three layers.
+
+It uses javascript; The javascript is re-used from StimulusReflex, which in itself is built upon stimulusjs. The javascript in StimulusReflex also uses something called cable_ready which has the responsibility of modifying the DOM. The javascript layer ensures that the data is being sent to the server layer through websockets. When a message is received from the server layer it will re-render the dom according to the server side instructions.
+
+The HTML layer has the responsibility of defining where and how a "reflex" is going to be triggered. Ie, a reflex could be triggered by an browser event or the click of a button. When building more complex applications the HTML layer may also be used to store state so that this state is accessible when doing some interactivity in a stimulus controller.
+
+The last layer is server layer. This is where a "Reflex" class is defined. The reflex knows what path and template was received and will re-render that template to contain any new information defined in the reflex. The reflex could also make database queries and such as well. Once the template is re-rendered it will send it back to frontend where javascript will modify the DOM to update everything.

docs/README.md

@@ -133,9 +133,11 @@ The configuration above will look for javascript files in the folder `your_app/j
 
 If you add that folder to `STATICFILES_DIRS` in settings it will pick that compiled javascript and you can use it in templates.
 
-```text
+```python
+from pathlib import Path
+BASE_DIR = Path.cwd()
 STATICFILES_DIRS = [
-    ("js", "/dist/js"),
+    ("js", f"{BASE_DIR}/dist/js"),
 ]
 ```
 

docs/setup-django.md

@@ -1,11 +1,9 @@
 from pathlib import Path
 
-from django.apps import apps
-from django.core.management.base import BaseCommand, CommandError
 from django.template.loader import get_template
 
 from ._base import BaseGenerateCommand
-
+from ...utils import classify
 
 TEMPLATES = {
     '_reflex.py': 'sockpuppet/scaffolds/reflex.py',
@@ -48,8 +46,8 @@ def handle(self, *args, **options):
         for path, suffix in paths:
             template_name = TEMPLATES[suffix]
             template = get_template(template_name)
-            rendered = template.render({'reflex_name': reflex_name})
-            self.create_file(path, '{}{}'.format(reflex_name, suffix), rendered)
+            rendered = template.render({'class_name': classify(reflex_name), 'reflex_name': reflex_name})
+            self.create_file(path, '{}{}'.format(reflex_name.lower(), suffix), rendered)
 
         self.create_file('views', '__init__.py', '')
         self.create_file('reflexes', '__init__.py', '')

sockpuppet/management/commands/generate_reflex.py

@@ -1,7 +1,7 @@
 import { Application } from 'stimulus'
 import StimulusReflex from 'stimulus_reflex'
 import WebsocketConsumer from 'sockpuppet-js'
-import {{reflex_name|title }}Controller from './controllers/{{reflex_name}}_controller'
+import {{ reflex_name|title }}Controller from './controllers/{{ reflex_name|lower }}_controller'
 
 const application = Application.start()
 const consumer = new WebsocketConsumer('ws://localhost:8000/ws/sockpuppet-sync')

sockpuppet/templates/sockpuppet/scaffolds/application.js

@@ -9,6 +9,6 @@ export default class extends Controller {
   increment(event) {
     console.log('increment')
     event.preventDefault()
-    this.stimulate('{{ reflex_name|title }}Reflex#increment', 1)
+    this.stimulate('{{ reflex_name }}Reflex#increment', 1)
   }
 }

sockpuppet/templates/sockpuppet/scaffolds/controller.js

@@ -1,6 +1,6 @@
 from sockpuppet.reflex import Reflex
 
 
-class {{ reflex_name|title }}Reflex(Reflex):
+class {{ class_name }}Reflex(Reflex):
     def increment(self, step=1):
         self.count = int(self.element.dataset['count']) + step