add babel plugin settings

Author: sergeysova

package.json

@@ -46,7 +46,7 @@
     "linkifyjs": "^2.1.8",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "patronum": "^0.110.0",
+    "patronum": "^1.6.0-next.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"

src/Menu.tsx

@@ -1,16 +1,15 @@
-import React from 'react'
-import {styled} from 'linaria/react'
 import {createStore, createEvent} from 'effector'
 import {useStore, useList} from 'effector-react'
+import {styled} from 'linaria/react'
+import React from 'react'
 
+import {LoadingIcon} from './components/Icons/LoadingIcon'
+import {selectVersion} from './editor'
+import {$packageVersions, $version} from './editor/state'
 import {config} from './github/config'
-import {$csrf, $githubToken, $githubUser} from './github/state'
 import {logout} from './github/index'
-
+import {$csrf, $githubToken, $githubUser} from './github/state'
 import {clickPrettify, prettierFx} from './settings'
-import {packageVersions, version} from './editor/state'
-import {selectVersion} from './editor'
-import {LoadingIcon} from './components/Icons/LoadingIcon'
 
 export const toggleMenu = createEvent<any>()
 const isMenuOpen = createStore(false).on(toggleMenu, open => !open)
@@ -261,8 +260,8 @@ export const MenuContent = () => {
   const token = useStore($githubToken)
   const isPrettifyPending = useStore(prettierFx.pending)
   const isOpen = useStore(isMenuOpen)
-  const usedVersion = useStore(version)
-  const versionList = useList(packageVersions, item => (
+  const usedVersion = useStore($version)
+  const versionList = useList($packageVersions, item => (
     <option value={item}>{item}</option>
   ))
   if (!isOpen) return null

src/editor/index.tsx

@@ -1,6 +1,6 @@
 import {createEvent, createEffect, Event, Effect} from 'effector'
 
-export const evalEffect: Effect<string, any, any> = createEffect()
+export const evalFx: Effect<string, any, any> = createEffect()
 
 export const changeSources: Event<string> = createEvent()
 

src/editor/init.tsx

@@ -1,23 +1,25 @@
 import {forward, sample} from 'effector'
+import {debounce} from 'patronum/debounce'
+
+import {changeSources, evalFx, selectVersion} from '.'
 
-import {changeSources, evalEffect, selectVersion} from '.'
-import {sourceCode, codeError, version} from './state'
-import {retrieveCode, retrieveVersion} from './retrieve'
-import {compress} from './compression'
 import {evaluator, versionLoader} from '../evaluator'
-import {$typechecker} from '../settings/state'
+import {$babelPluginSettings, $typechecker} from '../settings/state'
+import {compress} from './compression'
+import {retrieveCode, retrieveVersion} from './retrieve'
+import {$sourceCode, $codeError, $version} from './state'
 
-evalEffect.use(evaluator)
+evalFx.use(evaluator)
 
-version.on(selectVersion, (_, p) => p)
+$version.on(selectVersion, (_, p) => p)
 
-codeError
-  .on(evalEffect.done, () => ({
+$codeError
+  .on(evalFx.done, () => ({
     isError: false,
     error: null,
     stackFrames: [],
   }))
-  .on(evalEffect.fail, (_, e) => {
+  .on(evalFx.fail, (_, e) => {
     if ('stack' in e.error) {
       return {
         isError: true,
@@ -60,15 +62,20 @@ changeSources.watch(codeRaw => {
 
 forward({
   from: changeSources,
-  to: sourceCode,
+  to: $sourceCode,
+})
+
+const debouncedPluginSettings = debounce({
+  source: $babelPluginSettings,
+  timeout: 400,
 })
 
 sample({
-  source: sourceCode,
-  clock: [sourceCode, versionLoader, $typechecker],
-  target: evalEffect,
+  source: $sourceCode,
+  clock: [$sourceCode, versionLoader, $typechecker, debouncedPluginSettings],
+  target: evalFx,
 })
 
-evalEffect(sourceCode.getState())
+evalFx($sourceCode.getState())
 changeSources(retrieveCode())
 selectVersion(retrieveVersion())

src/editor/state.tsx

@@ -1,15 +1,15 @@
-import {createStore, Store} from 'effector'
+import {createStore} from 'effector'
 
-import {retrieveCode} from './retrieve'
-import defaultVersions from '../versions.json'
 import {StackFrame} from '../evaluator/stackframe/stack-frame'
 import {$typechecker} from '../settings/state'
+import defaultVersions from '../versions.json'
+import {retrieveCode} from './retrieve'
 
-export const version: Store<string> = createStore(defaultVersions[0])
-export const packageVersions: Store<string[]> = createStore(defaultVersions)
-export const sourceCode: Store<string> = createStore(retrieveCode())
-export const compiledCode: Store<string> = createStore('')
-export const codeError = createStore<
+export const $version = createStore(defaultVersions[0])
+export const $packageVersions = createStore(defaultVersions)
+export const $sourceCode = createStore(retrieveCode())
+export const $compiledCode = createStore('')
+export const $codeError = createStore<
   | {
       isError: true
       error: Error
@@ -26,7 +26,7 @@ export const codeError = createStore<
   stackFrames: [],
 })
 
-export const mode = $typechecker.map((typechecker): string => {
+export const $mode = $typechecker.map((typechecker): string => {
   if (typechecker === 'typescript') return 'text/typescript-jsx'
   return 'text/flow-jsx'
 })

src/editor/view.tsx

@@ -1,34 +1,33 @@
-import React from 'react'
 import CodeMirror from 'codemirror'
-import debounce from 'lodash.debounce'
-import {attach, forward, createEffect} from 'effector'
-import {createGate, useGate} from 'effector-react'
-
-import './mode/jsx'
-
-import 'codemirror/addon/lint/lint.css'
-import 'codemirror/addon/lint/lint'
 import 'codemirror/addon/comment/comment'
-import 'codemirror/addon/wrap/hardwrap'
-import 'codemirror/addon/fold/foldgutter'
 import 'codemirror/addon/fold/brace-fold'
 import 'codemirror/addon/fold/comment-fold'
-import 'codemirror/keymap/sublime'
+import 'codemirror/addon/fold/foldgutter'
 import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/addon/lint/lint'
+import 'codemirror/addon/lint/lint.css'
+import 'codemirror/addon/wrap/hardwrap'
+import 'codemirror/keymap/sublime'
+import {attach, forward, createEffect} from 'effector'
+import {createGate, useGate} from 'effector-react'
+import debounce from 'lodash.debounce'
+import React from 'react'
 
-import {mode, sourceCode} from './state'
 import {codeMarkLine, codeSetCursor, codeCursorActivity, changeSources} from '.'
+
 import {codeMirrorConfig} from './codeMirrorConfig'
+import './mode/jsx'
+import {$mode, $sourceCode} from './state'
 
 export let codeMirror: CodeMirror.EditorFromTextArea
 
 const CodeMirrorGate = createGate<{}>()
 
-mode.updates.watch(mode => {
+$mode.updates.watch(mode => {
   codeMirror.setOption('mode', mode)
 })
 
-sourceCode.updates.watch(code => {
+$sourceCode.updates.watch(code => {
   if (codeMirror.getValue() !== code) {
     codeMirror.setValue(code)
   }
@@ -90,7 +89,7 @@ const setupCodeMirrorFx = createEffect(
 forward({
   from: CodeMirrorGate.open,
   to: attach({
-    source: {code: sourceCode, mode},
+    source: {code: $sourceCode, mode: $mode},
     effect: setupCodeMirrorFx,
   }),
 })