Repository navigation
chore: delete Alpine editor remnants and Phase 0 spike - #290
Merged
ViewFromTheBox merged 1 commit intoApr 14, 2026
Merged
ViewFromTheBox merged 1 commit into
ViewFromTheBox merged 1 commit into
Conversation
Phase 1.14 — completes the React migration's Phase 1 goal. After this lands, the visual editor tree contains no Alpine-era or spike-era scaffolding. - Remove resources/js/editor-spike/ (Phase 0 architecture spike) - Remove resources/js/visual-editor/editor/__dnd-kit-spike__/ (Phase 1 dnd-kit harness that depended on @spike/richtext/useTiptap) - Remove editor-spike route, blade view, index.html entry, and the visual-editor-spike-assets publish tag - Consolidate vite.editor.config.ts into the root vite.config.ts and drop the spike-only vite.config.ts; simplify npm scripts - Drop the @spike path alias from tsconfig.json and vitest.config.ts - Move the Tiptap/jsdom test setup into resources/js/visual-editor/editor/test-setup.ts - Update EditorMountViewTest route assertion and remove public/editor-spike/ from .gitignore - Mark Phase 1 as landed in REACT-MIGRATION.md Closes #276 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR removes the entire Phase 0 editor spike implementation ( Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes This PR involves deletions across diverse file types and configuration updates requiring verification across multiple domains (build config, routing, tests, TypeScript setup). While individual file deletions are straightforward, the breadth of affected areas and the need to validate config consolidation (especially Vite/Vitest changes) warrants moderate review effort. Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@vite.config.ts`:
- Around line 7-24: Add the Laravel Vite plugin to the Vite configuration so the
Blade `@vite` directive is processed: install laravel-vite-plugin as a dev
dependency, import the plugin in vite.config.ts (from 'laravel-vite-plugin'),
and include it at the start of the plugins array passed into defineConfig (i.e.,
add the laravel/vite plugin entry before react() in the plugins list used by
defineConfig).
- Around line 27-33: The vite.config.ts contains an external: [...] block
listing 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom',
'react-dom/client' which causes those packages to be treated as externals and
leaves unresolved bare imports when dist/editor/main.js is loaded; remove the
external property (or at least these React-related entries) so Vite bundles
React into the editor build; update any comments if present and verify main.tsx
imports resolve correctly after rebuilding.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 01430f32-0fe4-4842-9bd1-96c6765e82b9
📒 Files selected for processing (46)
.gitignoreREACT-MIGRATION.mdindex.htmlpackage.jsonresources/js/editor-spike/App.tsxresources/js/editor-spike/__tests__/BlockContext.test.tsxresources/js/editor-spike/__tests__/mocks.test.tsresources/js/editor-spike/__tests__/paragraph.test.tsxresources/js/editor-spike/__tests__/postTitle.test.tsxresources/js/editor-spike/__tests__/queryLoop.test.tsxresources/js/editor-spike/__tests__/smoke.test.tsxresources/js/editor-spike/__tests__/useBlockPreview.test.tsxresources/js/editor-spike/__tests__/useInnerBlocksProps.test.tsxresources/js/editor-spike/blocks/paragraph/edit.tsxresources/js/editor-spike/blocks/paragraph/index.tsresources/js/editor-spike/blocks/post-title/edit.tsxresources/js/editor-spike/blocks/post-title/index.tsresources/js/editor-spike/blocks/query-loop/edit.tsxresources/js/editor-spike/blocks/query-loop/index.tsresources/js/editor-spike/index.cssresources/js/editor-spike/main.tsxresources/js/editor-spike/mocks/blockTree.tsresources/js/editor-spike/mocks/mockApi.tsresources/js/editor-spike/mocks/posts.tsresources/js/editor-spike/primitives/BlockContext.tsxresources/js/editor-spike/primitives/BlockTreeContext.tsxresources/js/editor-spike/primitives/ReadOnlyContext.tsxresources/js/editor-spike/primitives/useBlockPreview.tsxresources/js/editor-spike/primitives/useInnerBlocksProps.tsxresources/js/editor-spike/registry.tsresources/js/editor-spike/richtext/useTiptap.tsresources/js/visual-editor/editor/__dnd-kit-spike__/DndKitSpike.tsxresources/js/visual-editor/editor/__dnd-kit-spike__/SpikeBlock.tsxresources/js/visual-editor/editor/__dnd-kit-spike__/__tests__/DndKitSpike.test.tsxresources/js/visual-editor/editor/__dnd-kit-spike__/index.htmlresources/js/visual-editor/editor/__dnd-kit-spike__/main.tsxresources/js/visual-editor/editor/__dnd-kit-spike__/spike.cssresources/js/visual-editor/editor/test-setup.tsresources/views/editor-spike.blade.phproutes/web.phpsrc/VisualEditorServiceProvider.phptests/Feature/EditorMountViewTest.phptsconfig.jsonvite.config.tsvite.editor.config.tsvitest.config.ts
💤 Files with no reviewable changes (41)
- .gitignore
- package.json
- resources/js/editor-spike/tests/smoke.test.tsx
- resources/js/editor-spike/tests/BlockContext.test.tsx
- index.html
- resources/js/editor-spike/App.tsx
- resources/js/editor-spike/main.tsx
- resources/js/editor-spike/mocks/blockTree.ts
- resources/js/editor-spike/index.css
- src/VisualEditorServiceProvider.php
- resources/js/visual-editor/editor/dnd-kit-spike/main.tsx
- resources/js/editor-spike/mocks/posts.ts
- resources/js/editor-spike/blocks/post-title/index.ts
- resources/js/editor-spike/tests/paragraph.test.tsx
- routes/web.php
- resources/js/editor-spike/tests/queryLoop.test.tsx
- resources/js/editor-spike/blocks/paragraph/edit.tsx
- resources/js/editor-spike/tests/postTitle.test.tsx
- resources/js/editor-spike/blocks/paragraph/index.ts
- resources/js/editor-spike/blocks/post-title/edit.tsx
- vite.editor.config.ts
- resources/js/visual-editor/editor/dnd-kit-spike/index.html
- tsconfig.json
- resources/js/visual-editor/editor/dnd-kit-spike/tests/DndKitSpike.test.tsx
- resources/js/editor-spike/primitives/ReadOnlyContext.tsx
- resources/js/editor-spike/tests/useBlockPreview.test.tsx
- resources/js/editor-spike/blocks/query-loop/index.ts
- resources/js/visual-editor/editor/dnd-kit-spike/SpikeBlock.tsx
- resources/js/editor-spike/mocks/mockApi.ts
- resources/js/visual-editor/editor/dnd-kit-spike/DndKitSpike.tsx
- resources/views/editor-spike.blade.php
- resources/js/editor-spike/primitives/BlockContext.tsx
- resources/js/editor-spike/tests/mocks.test.ts
- resources/js/editor-spike/blocks/query-loop/edit.tsx
- resources/js/editor-spike/primitives/BlockTreeContext.tsx
- resources/js/editor-spike/tests/useInnerBlocksProps.test.tsx
- resources/js/editor-spike/richtext/useTiptap.ts
- resources/js/editor-spike/registry.ts
- resources/js/editor-spike/primitives/useBlockPreview.tsx
- resources/js/visual-editor/editor/dnd-kit-spike/spike.css
- resources/js/editor-spike/primitives/useInnerBlocksProps.tsx
Comment on lines
+7
to
+24
| export default defineConfig(({ command }) => ({ | ||
| plugins: [react()], | ||
| root: command === 'serve' ? editorRoot : __dirname, | ||
| resolve: { | ||
| alias: { | ||
| '@spike': resolve(__dirname, 'resources/js/editor-spike'), | ||
| '@editor': editorRoot, | ||
| }, | ||
| }, | ||
| server: { | ||
| port: 5175, | ||
| strictPort: false, | ||
| }, | ||
| build: { | ||
| target: 'esnext', | ||
| outDir: 'public/editor-spike', | ||
| outDir: resolve(__dirname, 'dist/editor'), | ||
| emptyOutDir: true, | ||
| manifest: false, | ||
| sourcemap: true, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "1) Find server-rendered `@vite` usages:"
rg -n "@vite\\(" resources/views tests routes || true
echo
echo "2) Confirm whether Laravel Vite plugin is configured in vite.config.ts:"
rg -n "laravel\\s*\\(" vite.config.ts || true
rg -n "plugins\\s*:\\s*\\[" vite.config.tsRepository: ArtisanPack-UI/visual-editor
Length of output: 436
🏁 Script executed:
cat vite.config.tsRepository: ArtisanPack-UI/visual-editor
Length of output: 1226
🏁 Script executed:
rg -i "laravel-vite-plugin" package.json package-lock.json yarn.lock pnpm-lock.yaml 2>/dev/null || echo "Not found in lock files"Repository: ArtisanPack-UI/visual-editor
Length of output: 95
Add Laravel Vite plugin to vite.config.ts to enable @vite directive processing.
resources/views/editor/mount.blade.php (Line 8) uses the @vite directive, which requires laravel-vite-plugin to be installed and configured in vite.config.ts. The current config loads only react() without the Laravel plugin, causing asset resolution and HMR to fail for the editor mount route.
Install laravel-vite-plugin as a dev dependency and add it to the plugins array in vite.config.ts before the React plugin.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@vite.config.ts` around lines 7 - 24, Add the Laravel Vite plugin to the Vite
configuration so the Blade `@vite` directive is processed: install
laravel-vite-plugin as a dev dependency, import the plugin in vite.config.ts
(from 'laravel-vite-plugin'), and include it at the start of the plugins array
passed into defineConfig (i.e., add the laravel/vite plugin entry before react()
in the plugins list used by defineConfig).
Comment on lines
+27
to
+33
| external: [ | ||
| 'react', | ||
| 'react/jsx-runtime', | ||
| 'react/jsx-dev-runtime', | ||
| 'react-dom', | ||
| 'react-dom/client', | ||
| ], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Check for import-map/CDN React provisioning in server-rendered templates:"
rg -n "importmap|react-dom/client|unpkg\\.com/react|esm\\.sh/react|jsdelivr.*react" resources/views || true
echo
echo "If dist/editor/main.js exists, check for unresolved bare React imports:"
if [ -f dist/editor/main.js ]; then
rg -n "from ['\\\"]react|from ['\\\"]react-dom/client" dist/editor/main.js || true
else
echo "dist/editor/main.js not present in repo checkout."
fiRepository: ArtisanPack-UI/visual-editor
Length of output: 268
🏁 Script executed:
# Get the full vite.config.ts file
cat -n vite.config.tsRepository: ArtisanPack-UI/visual-editor
Length of output: 1520
🏁 Script executed:
# Check what the editor entry point actually imports
head -30 resources/js/visual-editor/editor/main.tsxRepository: ArtisanPack-UI/visual-editor
Length of output: 944
🏁 Script executed:
# Look for how React is provided in the build/install
cat -n package.json | grep -A 20 '"dependencies"'Repository: ArtisanPack-UI/visual-editor
Length of output: 1070
🏁 Script executed:
# Check if there are other entry points that might handle React differently
rg -n "input:" vite.config.ts -A 2Repository: ArtisanPack-UI/visual-editor
Length of output: 181
🏁 Script executed:
# Search for how the editor bundle is loaded/imported
rg -n "dist/editor|editor/main|ve-root" --type php --type html --type js --type tsRepository: ArtisanPack-UI/visual-editor
Length of output: 1152
🏁 Script executed:
# Check if there's documentation about bundle usage
cat -n README.md 2>/dev/null | head -100 || echo "No README"Repository: ArtisanPack-UI/visual-editor
Length of output: 737
🏁 Script executed:
# Look for a loader or integration script in the resources directory
find resources -type f \( -name "*.php" -o -name "*.blade.php" \) | head -10Repository: ArtisanPack-UI/visual-editor
Length of output: 110
🏁 Script executed:
# Check package.json scripts to understand build/serve workflow
cat -n package.json | grep -A 10 '"scripts"'Repository: ArtisanPack-UI/visual-editor
Length of output: 497
🏁 Script executed:
cat -n resources/views/editor/mount.blade.phpRepository: ArtisanPack-UI/visual-editor
Length of output: 609
🏁 Script executed:
# Search for any manifest or import map setup in views
rg -n "importmap|manifest|script.*type.*module" resources/views -A 2Repository: ArtisanPack-UI/visual-editor
Length of output: 54
🏁 Script executed:
# Check if there's a app.blade.php or layout that might provide React globally
find resources/views -name "*.blade.php" -type f | xargs ls -lhRepository: ArtisanPack-UI/visual-editor
Length of output: 158
Remove the external block to bundle React with the editor.
The entry point (main.tsx) directly imports React and React DOM, and the package lists them as dependencies rather than peer dependencies. Marking them as external without providing an import map or CDN means the built dist/editor/main.js will have unresolved bare imports when loaded via Laravel's @vite() directive. This will cause a module resolution failure in the browser.
Suggested change
rollupOptions: {
input: resolve(editorRoot, 'main.tsx'),
- external: [
- 'react',
- 'react/jsx-runtime',
- 'react/jsx-dev-runtime',
- 'react-dom',
- 'react-dom/client',
- ],
output: {
format: 'es',
entryFileNames: 'main.js',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| external: [ | |
| 'react', | |
| 'react/jsx-runtime', | |
| 'react/jsx-dev-runtime', | |
| 'react-dom', | |
| 'react-dom/client', | |
| ], | |
| output: { | |
| format: 'es', | |
| entryFileNames: 'main.js', | |
| dir: resolve(editorRoot, '../../public/dist/editor'), | |
| }, |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@vite.config.ts` around lines 27 - 33, The vite.config.ts contains an
external: [...] block listing 'react', 'react/jsx-runtime',
'react/jsx-dev-runtime', 'react-dom', 'react-dom/client' which causes those
packages to be treated as externals and leaves unresolved bare imports when
dist/editor/main.js is loaded; remove the external property (or at least these
React-related entries) so Vite bundles React into the editor build; update any
comments if present and verify main.tsx imports resolve correctly after
rebuilding.
github-project-automation
Bot
moved this from In Review
to Done
in ArtisanPack UI Overview
ViewFromTheBox
deleted the
enhancement/276-delete-alpine-editor-phase-0-spike
branch
April 14, 2026 21:55
5 of 12 tasks
9 tasks done
14 of 20 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Phase 1.14 — the final Phase 1 issue. Deletes the Phase 0 React spike and the Phase 1 dnd-kit spike harness. After this lands, the visual editor tree contains no Alpine-era or spike-era scaffolding and Phase 1 of the React migration is complete.
Closes: #276
Type of Change
Related Issue
Issue: #276
Motivation and Context
Issue #276 is the cleanup milestone that closes out Phase 1 of the Alpine→React editor migration. The Alpine stores, canvas, block renderers, and editor-shell blade were already gone by the time this branch was cut, so the remaining work was deleting the Phase 0
editor-spike/tree and the Phase 1__dnd-kit-spike__harness (which depended on@spike/richtext/useTiptapand would not compile without it), then consolidating the Vite/TS/Vitest configs around the single canonical editor entrypoint.Changes Made
resources/js/editor-spike/and its route, blade view, rootindex.html, andvisual-editor-spike-assetspublish tag inVisualEditorServiceProviderresources/js/visual-editor/editor/__dnd-kit-spike__/(Phase 1 dnd-kit harness — its follow-up Phase 1.9: dnd-kit integration in production BlockList (top-level) #271 is the production integration, and it can't build without the@spikealias)vite.editor.config.tsinto the rootvite.config.ts, dropped the spike-onlyvite.config.ts, and simplifiedpackage.jsonscripts (dev/buildare now the editor)@spikepath alias fromtsconfig.jsonandvitest.config.ts, and narrowed the testincluderesources/js/visual-editor/editor/test-setup.ts(still required for Tiptap tests)EditorMountViewTestto assert/editor-spikeis absent fromroutes/web.phppublic/editor-spike/from.gitignoreREACT-MIGRATION.mdPHASE-0-FINDINGS.mdanddocs/phase-1-dnd-kit-findings.mdare kept as historical reference per the issue's "decide whether to archive" note.How Has This Been Tested?
Testing Environment:
Tests Performed:
npm test— 196 vitest tests pass (22 files)composer test— 25 Pest tests pass (69 assertions)npm run build— editor bundle builds cleanly (dist/editor/main.js478 kB)/editor/{id}in the dev app — confirmed workingAccessibility Tests Run
Tests Added
EditorMountViewTestroute assertion)Documentation
REACT-MIGRATION.mdstatus line updated to "Phase 1 landed. Phase 2 next."Pre-Submission Checklist
add/phase-one— no findings🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes