Support redux-devtools

packages/delir/browser.js

@@ -58,8 +58,12 @@ const install = async () => {
         const devtron = require('devtron')
         devtron.install()
 
-        const {default: installExtension, REACT_DEVELOPER_TOOLS} = require('electron-devtools-installer')
-        await installExtension(REACT_DEVELOPER_TOOLS)
+        const {default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS} = require('electron-devtools-installer')
+
+        await Promise.all([
+            installExtension(REACT_DEVELOPER_TOOLS),
+            installExtension(REDUX_DEVTOOLS),
+        ])
     }
 
     app.on('window-all-closed', () => {

packages/delir/domain/Editor/actions.ts

@@ -1,10 +1,10 @@
 import * as Delir from '@ragg/delir-core'
-import { action } from '@ragg/fleur'
+import { action, actions } from '@ragg/fleur'
 
 import { DragEntity } from './operations'
 import { ClipboardEntry, ParameterTarget } from './types'
 
-export const EditorActions = {
+export const EditorActions = actions('Editor', {
     setActiveProjectAction: action<{ project: Delir.Entity.Project, path?: string | null }>(),
     clearActiveProjectAction: action<{}>(),
     setDragEntityAction: action<DragEntity>(),
@@ -21,4 +21,4 @@ export const EditorActions = {
     seekPreviewFrameAction: action<{ frame: number }>(),
     setClipboardEntry: action<{ entry: ClipboardEntry }>(),
     changePreferenceOpenStateAction: action<{ open: boolean }>()
-}
+})

packages/delir/domain/History/actions.ts

@@ -1,9 +1,9 @@
-import { action } from '@ragg/fleur'
+import { action, actions } from '@ragg/fleur'
 
 import { Command } from './HistoryStore'
 
-export const HistoryActions = {
+export const HistoryActions = actions('History', {
     pushHistory: action<{ command: Command }>(),
     undoing: action<{}>(),
     redoing: action<{}>(),
-}
+})

packages/delir/domain/Preference/actions.ts

@@ -1,8 +1,8 @@
-import { action } from '@ragg/fleur'
+import { action, actions } from '@ragg/fleur'
 
 import { Preference } from './PreferenceStore'
 
-export const PreferenceActions = {
+export const PreferenceActions = actions('Preference', {
     restorePreference: action<{ preference: Preference }>(),
     changePreference: action<{ patch: Partial<Preference> }>(),
-}
+})

packages/delir/domain/Project/actions.ts

@@ -1,7 +1,7 @@
 import * as Delir from '@ragg/delir-core'
-import { action } from '@ragg/fleur'
+import { action, actions } from '@ragg/fleur'
 
-export const ProjectActions = {
+export const ProjectActions = actions('Project', {
     createCompositionAction: action<{
         composition: Delir.Entity.Composition
     }>(),
@@ -113,4 +113,4 @@ export const ProjectActions = {
         holderClipId: string,
         targetEffectId:  string,
     }>(),
-}
+})

packages/delir/domain/Renderer/actions.ts

@@ -1,6 +1,6 @@
-import { action } from '@ragg/fleur'
+import { action, actions } from '@ragg/fleur'
 
-export const RendererActions = {
+export const RendererActions = actions('Renderer', {
     addPlugins: action<{ plugins: any[] }>(),
     setPreviewCanvas: action<{ canvas: HTMLCanvasElement }>(),
-}
+})

packages/delir/main.ts

@@ -3,6 +3,7 @@ import Fleur from '@ragg/fleur'
 import { createElementWithContext } from '@ragg/fleur-react'
 import * as os from 'os'
 import * as ReactDOM from 'react-dom'
+import { fleurReduxDevTools } from './utils/fleurReduxDevtools'
 
 import * as EditorOps from './domain/Editor/operations'
 import * as PreferenceOps from './domain/Preference/operations'
@@ -39,7 +40,7 @@ window.addEventListener('DOMContentLoaded', async () => {
     }
 
     const app = new Fleur({ stores: [ EditorStore, ProjectStore, RendererStore, PreferenceStore, HistoryStore ] })
-    const context = window.delir = app.createContext()
+    const context = window.delir = fleurReduxDevTools(app.createContext())
 
     // console.log(createElementWithContext)
     // ReactDOM.unstable_deferredUpdates(() => {