fix build, add prettier plugin, rename to convention

Author: sergeysova

.prettierrc

@@ -6,5 +6,7 @@
   "trailingComma": "all",
   "bracketSpacing": false,
   "jsxBracketSameLine": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "importOrder": ["^@(.*)$", "^([^~])$", "^~/(.*)$", "^[./]"],
+  "importOrderSeparation": true
 }

package.json

@@ -18,6 +18,7 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/standalone": "^7.12.11",
+    "@trivago/prettier-plugin-sort-imports": "^3.1.1",
     "@types/babel__core": "^7.1.12",
     "@types/babel__standalone": "^7.1.3",
     "@types/codemirror": "^0.0.102",
@@ -29,6 +30,7 @@
     "@types/react": "^17.0.0",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-linaria": "file:./forks/parcel-plugin-linaria",
+    "prettier": "^2.4.1",
     "typescript": "^4.1.3"
   },
   "dependencies": {

src/Menu.tsx

@@ -7,7 +7,7 @@ import {config} from './github/config'
 import {$csrf, $githubToken, $githubUser} from './github/state'
 import {logout} from './github/index'
 
-import {clickPrettify, prettier} from './settings'
+import {clickPrettify, prettierFx} from './settings'
 import {packageVersions, version} from './editor/state'
 import {selectVersion} from './editor'
 import {LoadingIcon} from './components/Icons/LoadingIcon'
@@ -259,7 +259,7 @@ const GitHubCatIcon = () => (
 
 export const MenuContent = () => {
   const token = useStore($githubToken)
-  const isPrettifyPending = useStore(prettier.pending)
+  const isPrettifyPending = useStore(prettierFx.pending)
   const isOpen = useStore(isMenuOpen)
   const usedVersion = useStore(version)
   const versionList = useList(packageVersions, item => (

src/components/SecondaryTabs.tsx

@@ -11,7 +11,7 @@ import {
   $logs as logs,
   LogsPanel as LogsView,
 } from '~/features/logs'
-import {autoScrollLog} from '../settings/state'
+import {$autoScrollLog} from '../settings/state'
 import {IconButton} from './IconButton'
 import {DesktopScreens, SmallScreens} from '../tabs/view'
 import {Outline} from './Outline'
@@ -36,7 +36,7 @@ const Tab = styled.li`
 `
 
 const ToolbarView = createComponent(
-  {logs, tab, autoScrollLog, $mainTab},
+  {logs, tab, autoScrollLog: $autoScrollLog, $mainTab},
   ({}, {$mainTab, logs, tab, autoScrollLog}) => (
     <TabHeaderList justify="space-between" style={{border: 'none'}}>
       <div style={{display: 'flex'}}>

src/editor/init.tsx

@@ -5,7 +5,7 @@ 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 {$typechecker} from '../settings/state'
 
 evalEffect.use(evaluator)
 
@@ -65,7 +65,7 @@ forward({
 
 sample({
   source: sourceCode,
-  clock: [sourceCode, versionLoader, typechecker],
+  clock: [sourceCode, versionLoader, $typechecker],
   target: evalEffect,
 })
 

src/editor/state.tsx

@@ -3,7 +3,7 @@ import {createStore, Store} from 'effector'
 import {retrieveCode} from './retrieve'
 import defaultVersions from '../versions.json'
 import {StackFrame} from '../evaluator/stackframe/stack-frame'
-import {typechecker} from '../settings/state'
+import {$typechecker} from '../settings/state'
 
 export const version: Store<string> = createStore(defaultVersions[0])
 export const packageVersions: Store<string[]> = createStore(defaultVersions)
@@ -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/evaluator/index.tsx

@@ -4,7 +4,7 @@ import {combine, createEffect} from 'effector'
 import {prepareRuntime} from './prepareRuntime'
 import {selectVersion} from '../editor'
 import {version, sourceCode, compiledCode} from '../editor/state'
-import {typechecker} from '../settings/state'
+import {$typechecker} from '../settings/state'
 // TODO: remove exact dependency on feature, use requirements in the future
 import {consoleMap} from '~/features/logs'
 import {realmStatusApi, realmListener, realmRemoveListener} from '../realm'
@@ -19,7 +19,7 @@ import {availablePlugins} from '@babel/standalone'
 import {codeMirror} from '~/editor/view'
 
 const tag = `# source`
-const filename = combine(typechecker, (typechecker): string => {
+const filename = combine($typechecker, (typechecker): string => {
   if (typechecker === 'typescript') return 'repl.ts'
   return 'repl.js'
 })
@@ -240,7 +240,7 @@ export async function evaluator(code: string) {
       },
     ],
     filename: filename.getState(),
-    types: typechecker.getState() || 'typescript',
+    types: $typechecker.getState() || 'typescript',
     pluginRegistry: {
       'effector/babel-plugin': babelPlugin,
       'effector/babel-plugin-react': PluginEffectorReact,

src/evaluator/runtime.tsx

@@ -1,5 +1,4 @@
-import {transform, registerPlugin, availablePlugins} from '@babel/standalone'
-import { BabelFileResult } from '@babel/core'
+import {availablePlugins, registerPlugin, transform} from '@babel/standalone'
 
 export type BabelPlugin = string | [string, any]
 
@@ -67,8 +66,11 @@ export async function exec({
 function transformCode(code: string, babelOptions): string {
   const detail = transform(code, babelOptions)
   const compiled = detail.code
-  window.addons ||= {}
-  window.addons.transformation = detail
+  if (!window['addons']) {
+    window['addons'] = {}
+  }
+  // window['addons'] ||= {}
+  window['addons'].transformation = detail
   window.dispatchEvent(new CustomEvent('@babel/transform', {detail}))
   const wrappedCode = `async function main() {
 ${compiled}

src/init.tsx

@@ -6,7 +6,7 @@ import './github/init'
 import './share/init'
 import './editor/init'
 
-import {autoScrollLog} from './settings/state'
+import {$autoScrollLog} from './settings/state'
 import {changeSources, selectVersion} from './editor'
 import {realmStatus} from './realm'
 
@@ -16,14 +16,14 @@ import {
   autoScrollEnableClicked,
 } from '~/features/logs'
 
-forward({from: autoScrollLog, to: logs.autoScrollLogChanged})
+forward({from: $autoScrollLog, to: logs.autoScrollLogChanged})
 forward({from: changeSources, to: logs.sourcesChanged})
 forward({from: selectVersion, to: logs.versionChanged})
 forward({
   from: realmStatus.map(status => status.active),
   to: logs.realmActiveChanged,
 })
 
-autoScrollLog
+$autoScrollLog
   .on(autoScrollEnableClicked, () => true)
   .on(autoScrollDisableClicked, () => false)

src/settings/index.tsx

@@ -1,20 +1,16 @@
 import {SyntheticEvent} from 'react'
-import {createEvent, createEffect, Effect} from 'effector'
+import {createEffect, createEvent} from 'effector'
 
 export const flowToggleChange = createEvent<SyntheticEvent<HTMLInputElement>>()
 
 export const tsToggleChange = createEvent<SyntheticEvent<HTMLInputElement>>()
 
-export const typeHoverToggleChange = createEvent<
-  SyntheticEvent<HTMLInputElement>
->()
+export const typeHoverToggleChange = createEvent<SyntheticEvent<HTMLInputElement>>()
 
 export const clickPrettify = createEvent<any>()
-export const prettier: Effect<
-  {code: string; parser: 'flow' | 'typescript' | 'babel'},
+export const prettierFx = createEffect<{code: string; parser: 'flow' | 'typescript' | 'babel'},
   string,
-  Error
-> = createEffect()
+  Error>()
 
 export const enableAutoScroll = createEvent()
 export const disableAutoScroll = createEvent()

src/settings/init.tsx

@@ -2,8 +2,8 @@ import {sample, forward, guard} from 'effector'
 
 import {sourceCode} from '../editor/state'
 
-import {clickPrettify, prettier, enableAutoScroll, disableAutoScroll} from '.'
-import {domain, typechecker, autoScrollLog} from './state'
+import {clickPrettify, prettierFx, enableAutoScroll, disableAutoScroll} from '.'
+import {domain, $typechecker, $autoScrollLog} from './state'
 
 domain.onCreateStore(store => {
   const snapshot = localStorage.getItem(store.compositeName.fullName)
@@ -18,7 +18,7 @@ domain.onCreateStore(store => {
   return store
 })
 
-prettier.use(async ({code, parser}) => {
+prettierFx.use(async ({code, parser}) => {
   const req = await fetch('https://codebox.now.sh/prettier', {
     method: 'POST',
     body: JSON.stringify({code, config: {parser}}),
@@ -34,17 +34,17 @@ prettier.use(async ({code, parser}) => {
 sample({
   source: {
     code: sourceCode,
-    parser: typechecker.map(parser => parser ?? 'babel'),
+    parser: $typechecker.map(parser => parser ?? 'babel'),
   },
   clock: guard(clickPrettify, {
-    filter: prettier.pending.map(pending => !pending),
+    filter: prettierFx.pending.map(pending => !pending),
   }),
-  target: prettier,
+  target: prettierFx,
 })
 
 forward({
-  from: prettier.doneData,
+  from: prettierFx.doneData,
   to: sourceCode,
 })
 
-autoScrollLog.on(enableAutoScroll, _ => true).on(disableAutoScroll, _ => false)
+$autoScrollLog.on(enableAutoScroll, _ => true).on(disableAutoScroll, _ => false)

src/settings/state.tsx

@@ -1,13 +1,9 @@
-import {createDomain, combine, Store, createStore} from 'effector'
+import {createDomain, createStore, Store} from 'effector'
 
 export const domain = createDomain('settings')
 
-export const tsToggle = domain.store<boolean>(false)
-export const typechecker: Store<'typescript' | null> = combine(
-  tsToggle,
-  tsEnabled => {
-    if (tsEnabled) return 'typescript'
-    return null
-  },
+export const $tsToggle = domain.createStore<boolean>(false)
+export const $typechecker: Store<'typescript' | null> = $tsToggle.map(
+  tsEnabled => tsEnabled ? 'typescript' : null,
 )
-export const autoScrollLog = createStore<boolean>(true)
+export const $autoScrollLog = createStore<boolean>(true)

src/settings/view.tsx

@@ -1,14 +1,16 @@
-import React from 'react'
-import {useStore, useStoreMap, useList} from 'effector-react'
+import {useList, useStore, useStoreMap} from 'effector-react'
 import {styled} from 'linaria/react'
-import {clickPrettify, prettier} from '.'
+import React from 'react'
+
+import {clickPrettify, prettierFx} from '.'
+
+import {LoadingIcon} from '../components/Icons/LoadingIcon'
 import {selectVersion} from '../editor'
 import {packageVersions, version} from '../editor/state'
-import {LoadingIcon} from '../components/Icons/LoadingIcon'
 
 export const PrettifyButton = () => {
   const {disabled, pending} = useStoreMap({
-    store: prettier.pending,
+    store: prettierFx.pending,
     keys: [],
     fn: pending => ({
       disabled: pending,