Feature/pre 1.0.4 (#45)

Author: michael-yin

.github/workflows/ci.yml

@@ -21,69 +21,3 @@ jobs:
       - name: Check code style
         run: |
           pre-commit run --all-files
-
-  test_django:
-    runs-on: ubuntu-latest
-    needs: [build]
-    strategy:
-      matrix:
-        python-version: ['3.8', '3.9', '3.10']
-        node-version: [18.x, 20.x]
-        django-version: [3.2, 4.2]
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-      - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v4
-        with:
-          python-version: ${{ matrix.python-version }}
-      - name: Set up Django ${{ matrix.django-version }}
-        run: |
-          pip install --upgrade pip
-          pip install Django==${{ matrix.django-version }}
-      - name: Install dependencies
-        run: |
-          pip install .
-          pip install -r tests/requirements/django.txt
-      - name: PYTHONPATH
-        run: |
-          echo "PYTHONPATH=${PWD}" >> $GITHUB_ENV
-      - name: Test with pytest
-        run: |
-          pytest tests/tests_django
-
-  test_flask:
-    runs-on: ubuntu-latest
-    needs: [build]
-    strategy:
-      matrix:
-        python-version: ['3.8', '3.9', '3.10']
-        node-version: [18.x, 20.x]
-        flask-version: [1.1.4, 2.2.2, 3.0.0]
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-      - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v4
-        with:
-          python-version: ${{ matrix.python-version }}
-      - name: Set up Flask ${{ matrix.flask-version }}
-        run: |
-          pip install --upgrade pip
-          pip install Flask==${{ matrix.flask-version }}
-      - name: Install dependencies
-        run: |
-          pip install .
-          pip install -r tests/requirements/flask.txt
-      - name: PYTHONPATH
-        run: |
-          echo "PYTHONPATH=${PWD}" >> $GITHUB_ENV
-      - name: Test with pytest
-        run: |
-          pytest tests/tests_flask

.pre-commit-config.yaml

@@ -4,7 +4,7 @@ fail_fast: true
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: main
+    rev: v4.1.0
     hooks:
       - id: trailing-whitespace
       - id: end-of-file-fixer
@@ -26,10 +26,3 @@ repos:
     hooks:
       - id: flake8
         args: ['--config=setup.cfg']
-
-  # https://pre-commit.com/#regular-expressions
-  - repo: https://github.com/prettier/pre-commit
-    rev: v2.1.2
-    hooks:
-      - id: prettier
-        types: [javascript]

docs/react.md

@@ -54,7 +54,7 @@ Create `frontend/src/application/app_react.js`
 
 ```js
 import React, { useState, useEffect } from 'react';
-import { createRoot } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 
 const Clock = () => {

docs/setup_with_django.md

@@ -1,5 +1,7 @@
 # Setup With Django
 
+We will show you how to integrate `python-webpack-boilerplate` with Django and use Tailwind v4 as the style solution.
+
 ## Install Package
 
 ```bash
@@ -43,14 +45,20 @@ INSTALLED_APPS = [
 
 Let's run Django command to create frontend project from the templates
 
-```bash hl_lines="3 4"
+```bash
 $ python manage.py webpack_init
-
-project_slug [frontend]:
-run_npm_command_at_root [y]:
-[SUCCESS]: Frontend app 'frontend' has been created.
+  [1/3] project_slug (frontend):
+  [2/3] run_npm_command_at_root (y):
+  [3/3] Select style_solution
+    1 - tailwind
+    2 - bootstrap
+    3 - scss
+    Choose from [1/2/3] (1): 1
+ [SUCCESS]: Frontend app 'frontend' has been created. To know more, check https://python-webpack-boilerplate.rtfd.io/en/latest/frontend/
 ```
 
+Here we use the default `Tailwind CSS` as our style solution.
+
 Now a new `frontend` directory is created which contains pre-defined files for our frontend project.
 
 ```bash
@@ -75,9 +83,9 @@ Now a new `frontend` directory is created which contains pre-defined files for o
 
 ```bash
 $ node -v
-v20.10.0
+v22.13.1
 $ npm -v
-10.2.3
+10.9.2
 ```
 
 Now go to directory which contains `package.json`, by default, it is root directory.
@@ -178,39 +186,42 @@ TEMPLATES = [
 
 Add `index.html` to the above `example/templates`
 
-```html hl_lines="1 9 10 20"
+```html
 {% load webpack_loader static %}
 
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8" />
   <title>Index</title>
-  <script src="https://cdn.tailwindcss.com"></script>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   {% stylesheet_pack 'app' %}
-  {% javascript_pack 'app' attrs='defer' %}
 </head>
 <body>
 
-<div class="bg-gray-50 py-5" data-jumbotron>
-  <div class="container mx-auto px-4 py-10">
-    <h1 class="text-4xl font-bold leading-tight">Welcome to Our Website</h1>
-    <p class="mt-4 text-lg">This is a hero section built using Tailwind CSS.</p>
-    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-6 rounded-lg">Get Started</button>
+<div class="jumbotron py-5">
+  <div class="w-full max-w-7xl mx-auto px-4">
+    <h1 class="text-4xl mb-4">Hello, world!</h1>
+    <p class="mb-4">This is a template for a simple marketing or informational website. It includes a large callout called a
+      jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
+
+    <p><a class="btn-blue mb-4" href="#" role="button">Learn more »</a></p>
+
     <div class="flex justify-center">
       <img src="{% static 'vendors/images/webpack.png' %}"/>
     </div>
   </div>
 </div>
 
+{% javascript_pack 'app' %}
+
 </body>
 </html>
 ```
 
-1. Here we use `Tailwind CDN` to help user to do quick test, please remove it later.
-2. We `load webpack_loader` at the top of the template
-3. We can still use `static` tag to import image from the frontend project.
-4. We use `stylesheet_pack` and `javascript_pack` to load CSS and JS bundle files to Django
+1. We `load webpack_loader` at the top of the template
+2. We can still use `static` tag to import image from the frontend project.
+3. We use `stylesheet_pack` and `javascript_pack` to load CSS and JS bundle files to Django
 
 !!! note
     1. When your javascript and css files grow bigger and bigger, code splitting would be done automatically by Webpack.
@@ -220,6 +231,9 @@ Add `index.html` to the above `example/templates`
 ## Manual Test
 
 ```bash
+# restart webpack to let Tailwind auto scan
+$ npm run watch
+
 $ python manage.py migrate
 $ python manage.py runserver
 ```
@@ -233,7 +247,38 @@ dom ready
 jumbotron.js:8 Jumbotron initialized for node: [object HTMLDivElement]
 ```
 
-The source code can also be found in the [Examples](https://github.com/AccordBox/python-webpack-boilerplate/tree/master/examples/)
+## Explicitly Specify Source Files
+
+Even Tailwind 4 can AUTO scan all project files in the project directory, we still recommend to explicitly specify the source files to improve performance.
+
+Below is an example of `frontend/src/styles/index.css`
+
+```css
+/*import tailwindcss and disable automatic source detection*/
+@import "tailwindcss" source(none);
+
+/*register frontend directory*/
+@source "../";
+
+/*register django templates*/
+@source "../../../django_tailwind_app/**/*.html";
+
+.jumbotron {
+    /*should be relative path of the entry css file*/
+    background-image: url("../../vendors/images/sample.jpg");
+    background-size: cover;
+}
+
+@layer components{
+    .btn-blue {
+        @apply inline-flex items-center;
+        @apply px-4 py-2;
+        @apply font-semibold rounded-lg shadow-md;
+        @apply text-white bg-blue-500;
+        @apply hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/50;
+    }
+}
+```
 
 ## Live Reload