minor: сборщик CodeMirror и доки поменяли свои каталоги (подготовка к NPM для TailWindCSS) + в доки и скрипты внесены соответствующие правки.

This commit is contained in:
2026-07-17 19:17:04 +03:00
parent ef7a37fa6a
commit 5b911007de
4 changed files with 42 additions and 49 deletions
@@ -2,29 +2,29 @@
## Обзор
Это руководство описывает, как использовать и обновлять сборку CodeMirror 6, которая используется для редактирования текстовых полей в админке Django.
Это руководство описывает, как использовать и обновлять сборку CodeMirror 6, которая используется для редактирования
текстовых полей в админке Django.
## Структура проекта
- `frontend-assembly/`: Исходные файлы и скрипты для сборки.
- `frontend-assembly/codemirror/`: Исходные файлы и конфиг для CodeMirror.
- `package.json`: Список зависимостей CodeMirror 6.
- `package-lock.json`: Файл с зафиксированными версиями зависимостей. **Не редактировать вручную!**
- `build-codemirror6.sh`: Скрипт, который генерирует и собирает финальный JS-бандл.
- `scripts/`: Скрипты для сборки компонентов CodeMirror.
- `build-codemirror.sh`: Скрипт, который генерирует и собирает финальный JS-бандл.
- `public/static/codemirror/`: Каталог с готовыми файлами для Django.
- `editor.js`: Финальный, минифицированный JS-бандл. **Не редактировать вручную!**
- `codemirror-styles.css`: Кастомные стили для интеграции с админкой.
- `codemirror-patch.js`: JS-патч для управления размерами редактора.
- `codemirror-styles.css`: Кастомные стили для интеграции с админкой (_приготовлено отдельно, не входят
в сборку CodeMirror_).
- `codemirror-patch.js`: JS-патч для управления размерами редактора (_приготовлено отдельно, не входит
в сборку CodeMirror_).
## Как собрать бандл
После клонирования репозитория или обновления зависимостей, выполните:
После клонирования репозитория или обновления зависимостей, выполните из корня проекта:
```bash
# Перейдите в каталог сборки
cd frontend-assembly
# Установите зависимости и соберите бандл
bash ./build-codemirror6.sh
bash ./scripts/build-codemirror.sh
```
## Как использовать в Django Admin
@@ -104,7 +104,7 @@ class YourModelAdmin(admin.ModelAdmin):
## Как добавить новый язык (например, jinja2 или xml)
1. **Добавить зависимость**: Откройте `frontend-assembly/package.json` и добавьте в `devDependencies` новый языковой пакет. Версию выбирайте близкую к другим пакетам `@codemirror/lang-*`.
1. **Добавить зависимость**: Откройте `frontend-assembly/codemirror/package.json` и добавьте в `devDependencies` новый языковой пакет. Версию выбирайте близкую к другим пакетам `@codemirror/lang-*`.
```json
// package.json
@@ -115,7 +115,7 @@ class YourModelAdmin(admin.ModelAdmin):
...
```
2. **Обновить скрипт сборки**: Откройте `frontend-assembly/build-codemirror6.sh` и внесите два изменения в секцию `cat > "$WORK_DIR/src/editor.js" <<'EOF'`:
2. **Обновить скрипт сборки**: Откройте `scripts/build-codemirror.sh` и внесите два изменения в секцию `cat > "$CODEMIRROR_DIR/src/editor.js" <<'EOF'`:
- Добавьте импорт:
```javascript
import { xml } from '@codemirror/lang-xml';
@@ -129,9 +129,7 @@ class YourModelAdmin(admin.ModelAdmin):
3. **Пересобрать бандл**:
```bash
cd frontend-assembly
npm install # Установит новый пакет и обновит package-lock.json
bash build-codemirror6.sh # Пересоберет editor.js с поддержкой XML
bash ./scripts/build-codemirror.sh
```
4. **Использовать в админке**: Теперь вы можете использовать `data-language="xml"` для любого поля.
@@ -140,13 +138,15 @@ class YourModelAdmin(admin.ModelAdmin):
1. **Проверить устаревшие пакеты**:
```bash
cd frontend-assembly
cd frontend-assembly/codemirror
npm outdated
```
2. **Обновить версии**: Аккуратно обновите номера версий в `package.json`.
2. **Обновить версии**: Аккуратно обновите номера версий в `frontend-assembly/codemirror/package.json`.
3. **Установить обновления и пересобрать**:
```bash
cd frontend-assembly/codemirror
npm install
bash build-codemirror6.sh
cd ../../
bash ./scripts/build-codemirror.sh
```
4. **Закоммитить изменения**: Добавьте в коммит обновленные `package.json`, `package-lock.json` и `public/static/codemirror/editor.js`.
4. **Закоммитить изменения**: Добавьте в коммит обновленные `frontend-assembly/codemirror/package.json`, `frontend-assembly/codemirror/package-lock.json` и `public/static/codemirror/editor.js`.
@@ -5,7 +5,7 @@
"private": true,
"type": "module",
"scripts": {
"build": "esbuild src/editor.js --bundle --format=iife --minify --outfile=${CM6_OUTPUT_DIR:-../public/static/codemirror}/editor.js"
"build": "esbuild src/editor.js --bundle --format=iife --minify --outfile=${CM6_OUTPUT_DIR:-../../public/static/codemirror}/editor.js"
},
"devDependencies": {
"@babel/runtime": "7.29.7",
+21 -28
View File
@@ -1,17 +1,12 @@
#!/usr/bin/env bash
# Скрипт создаёт временную рабочую папку, ставит зависимости через `npm ci`, собирает
# минимизированный бандл и затем сам удаляет временные `src/` и `node_modules/`.
# В проекте остаётся только готовая статика:
# * `public/static/codemirror/editor.js`
#
# Запуск:
# bash ./frontend-assembly/build-codemirror6.sh
# Сборка CodeMirror 6 для админки Django
# Запуск из корня проекта: bash ./scripts/build-codemirror.sh
set -euo pipefail
ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
OUTPUT_DIR="$ROOT_DIR/../public/static/codemirror"
WORK_DIR="$(mktemp -d "${TMPDIR:-/tmp}/codemirror6.XXXXXX")"
PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
CODEMIRROR_DIR="$PROJECT_ROOT/frontend-assembly/codemirror"
OUTPUT_DIR="$PROJECT_ROOT/public/static/codemirror"
log() {
printf '[codemirror6] %s\n' "$*"
@@ -22,29 +17,25 @@ fail() {
exit 1
}
cleanup() {
rm -rf "$WORK_DIR"
rm -rf "$ROOT_DIR/src" "$ROOT_DIR/node_modules"
}
trap cleanup EXIT INT TERM
if ! command -v npm >/dev/null 2>&1; then
fail 'Не найден `npm`. Установи Node.js и повтори сборку.'
fi
if [[ ! -f "$ROOT_DIR/package.json" ]]; then
fail "Не найден package.json: $ROOT_DIR/package.json"
if [[ ! -f "$CODEMIRROR_DIR/package.json" ]]; then
fail "Не найден package.json: $CODEMIRROR_DIR/package.json"
fi
if [[ ! -f "$ROOT_DIR/package-lock.json" ]]; then
fail "Не найден package-lock.json: $ROOT_DIR/package-lock.json"
if [[ ! -f "$CODEMIRROR_DIR/package-lock.json" ]]; then
fail "Не найден package-lock.json: $CODEMIRROR_DIR/package-lock.json"
fi
mkdir -p "$WORK_DIR/src" "$OUTPUT_DIR"
cp "$ROOT_DIR/package.json" "$ROOT_DIR/package-lock.json" "$WORK_DIR/"
mkdir -p "$OUTPUT_DIR"
cat > "$WORK_DIR/src/editor.js" <<'EOF'
# Создаём src/editor.js для CodeMirror
mkdir -p "$CODEMIRROR_DIR/src"
log "Создаю src/editor.js в $CODEMIRROR_DIR"
cat > "$CODEMIRROR_DIR/src/editor.js" <<'EOF'
import { Compartment, EditorState } from '@codemirror/state';
import { EditorView, lineNumbers, placeholder } from '@codemirror/view';
import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
@@ -169,9 +160,8 @@ if (document.readyState === 'loading') {
}
EOF
log "СОБИРАЮ CodeMirror 6 ДЛЯ ФРОНТЕНДА АДМИНКИ ПРОЕКТА"
log "Временная рабочая папка: $WORK_DIR"
cd "$WORK_DIR"
log "СОБИРАЮ CodeMirror 6"
cd "$CODEMIRROR_DIR"
log 'Устанавливаю зависимости через npm ci'
npm ci
@@ -180,4 +170,7 @@ log 'Собираю CodeMirror 6'
export CM6_OUTPUT_DIR="$OUTPUT_DIR"
npm run build
log 'ГОТОВО'
log 'Удаляю временные файлы (src/ и node_modules/)'
rm -rf src node_modules
log 'ГОТОВО! Результат: '"$OUTPUT_DIR/editor.js"