chore: lint

src/client/components/entity.jsx

@@ -9,9 +9,9 @@ const decorate = compose(
   contempo(require('./entity.raw.scss')),
 );
 
-const json = require('~/../fixtures/rock.entity.json');
+const json = require('~/../fixtures/rock-projectile.entity.json');
 
-const EntityComponent = (props) => {
+const EntityComponent = () => {
   const entity = new Entity(json);
   const {traits} = json;
   return (

src/client/components/traits.jsx

@@ -13,7 +13,7 @@ import {
   TabPanel,
 } from 'react-tabs';
 import {createSelector} from '@reduxjs/toolkit';
-import {deregisterHooks, invokeHookFlat, registerHooks} from 'scwp';
+import {deregisterHooks, registerHooks} from 'scwp';
 
 import {all as allTypeRenderers} from './types/type-renderers.scwp';
 
@@ -47,8 +47,8 @@ let TypeRenderers;
 const ensureTypeRenderers = () => {
   if (!TypeRenderers) {
     TypeRenderers = Object.values(allTypeRenderers()).reduce((r, M) => {
-      const {default: {type, component}} = M;
-      return {...r, [type]: component};
+      const {default: {type, Component}} = M;
+      return {...r, [type]: Component};
     }, {});
   }
 };
@@ -79,13 +79,15 @@ const makeTabSelector = (context, type) => createSelector(
             <div className="invisible-separator" />
             {
               Component
-              ? <Component
-                context={context}
-                key={key}
-                options={options}
-                value={values[key]}
-              />
-              : <div class="unrenderable" title="No renderer found!">?</div>
+                ? (
+                  <Component
+                    context={context}
+                    key={key}
+                    options={options}
+                    value={values[key]}
+                  />
+                )
+                : <div className="unrenderable" title="No renderer found!">?</div>
             }
           </label>
         );
@@ -136,7 +138,7 @@ const Traits = (props) => {
     };
     registerHooks(M, __filename);
     return () => deregisterHooks(M);
-  }, [tabSelectorMap, traits]);
+  }, [context, tabSelectorMap, traits]);
   const [tabIndex, setTabIndex] = useState(0);
   let listRef;
   const entries = Object.entries(traits);

src/client/components/types/actions.type-renderer.jsx

@@ -1,5 +1,4 @@
 import {compose} from '@avocado/core';
-import classnames from 'classnames';
 import contempo from 'contempo';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -22,7 +21,7 @@ const Actions = ({
           value.traversals.map(
             (traversal) => (
               <li>
-                <Value.component
+                <Value.Component
                   context={context}
                   type="any"
                   value={traversal}
@@ -43,5 +42,5 @@ Actions.propTypes = {
 
 export default {
   type: 'actions',
-  component: decorate(Actions),
+  Component: decorate(Actions),
 };

src/client/components/types/bool.type-renderer.jsx

@@ -19,5 +19,5 @@ Bool.propTypes = {
 
 export default {
   type: 'bool',
-  component: Bool,
+  Component: Bool,
 };

src/client/components/types/condition.type-renderer.jsx

@@ -8,7 +8,7 @@ import Value from './value.type-renderer';
 
 const renderOperand = (context, operand, type) => (
   <span className="operand">
-    <Value.component context={context} type={type} value={operand} />
+    <Value.Component context={context} type={type} value={operand} />
   </span>
 );
 
@@ -38,7 +38,7 @@ const Condition = ({
           case '>':
           case '>=':
           case '<':
-          case '<=':
+          case '<=': {
             const type = -1 !== ['is', 'isnt'].indexOf(value.operator) ? 'any' : 'number';
             return value.operands.slice(1).reduce(
               (r, operand) => (
@@ -52,6 +52,7 @@ const Condition = ({
               ),
               renderOperand(context, value.operands[0], type),
             );
+          }
           default:
             return undefined;
         }
@@ -67,5 +68,5 @@ Condition.propTypes = {
 
 export default {
   type: 'condition',
-  component: decorate(Condition),
+  Component: decorate(Condition),
 };

src/client/components/types/number.type-renderer.jsx

@@ -26,7 +26,7 @@ const Number = ({
         : (
           <>
             <input
-              onWheel={(e) => (e.preventDefault(), false)}
+              // onWheel={(e) => (e.preventDefault(), false)}
               readOnly
               type="text"
               value={value}
@@ -48,5 +48,5 @@ Number.propTypes = {
 
 export default {
   type: 'number',
-  component: decorate(Number),
+  Component: decorate(Number),
 };

src/client/components/types/object.type-renderer.jsx

@@ -37,5 +37,5 @@ ObjectRenderer.propTypes = {
 
 export default {
   type: 'object',
-  component: decorate(ObjectRenderer),
+  Component: decorate(ObjectRenderer),
 };

src/client/components/types/routines.type-renderer.jsx

@@ -1,5 +1,4 @@
 import {compose} from '@avocado/core';
-import classnames from 'classnames';
 import contempo from 'contempo';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -26,7 +25,7 @@ const Routines = ({
                 <li className="routine">
                   <label>
                     <span className="text">{name}</span>
-                    <Actions.component context={context} value={routine.routine} />
+                    <Actions.Component context={context} value={routine.routine} />
                   </label>
                 </li>
               ),
@@ -45,5 +44,5 @@ Routines.propTypes = {
 
 export default {
   type: 'routines',
-  component: decorate(Routines),
+  Component: decorate(Routines),
 };

src/client/components/types/steps-lists.js

@@ -1,10 +1,18 @@
 import {flatten} from '@avocado/core';
-import {Context} from '@avocado/behavior'
+import {Context} from '@avocado/behavior';
 import {Traversal} from '@avocado/behavior/item/traversal';
 
 import {typeFits} from './typing';
 
-export const variableStepsList = (context, previousSteps, key, variable, variableType, type, isFinal) => {
+export const variableStepsList = (
+  context,
+  previousSteps,
+  key,
+  variable,
+  variableType,
+  type,
+  isFinal,
+) => {
   const steps = [];
   if (typeFits(type, variableType)) {
     steps.push({type: 'key', key});
@@ -41,7 +49,7 @@ export const variableStepsList = (context, previousSteps, key, variable, variabl
           ? [{type: 'key', key}].concat(stepsList)
           : []
       ))
-    ))
+    ));
   return sublists.length > 0 ? [steps].concat(flatten(sublists)) : [steps];
 };
 
@@ -50,7 +58,7 @@ export const contextStepsList = (context, type) => (
     Object.entries(context.all())
       .map(([key, [variable, variableType]]) => (
         variableStepsList(context, [{type: 'key', key}], key, variable, variableType, type, false)
-      ))
+      )),
   )
     .filter((stepsList) => stepsList.length > 0)
 );

src/client/components/types/steps.jsx

@@ -1,9 +1,9 @@
 import {compose} from '@avocado/core';
 import contempo from 'contempo';
-import React, {useState} from 'react';
+import React from 'react';
 
 import {contextStepsList} from './steps-lists';
-import {typeFits, typeFromSteps, typeFromLiteral} from './typing';
+import {typeFromSteps, typeFromLiteral} from './typing';
 import Value from './value.type-renderer';
 
 const decorate = compose(
@@ -11,20 +11,28 @@ const decorate = compose(
 );
 
 const Steps = (props) => {
-  const {context, steps, type, value} = props;
-  const stepsList = contextStepsList(
+  const {
     context,
-    'undefined' === typeof value
-      ? type
-      : value.steps
-        ? typeFromSteps(context, value.steps)
-        : typeFromLiteral(value),
-  );
+    steps,
+    type,
+    value,
+  } = props;
+  let stepsType;
+  if ('undefined' === typeof value) {
+    stepsType = type;
+  }
+  else if (value.steps) {
+    stepsType = typeFromSteps(context, value.steps);
+  }
+  else {
+    stepsType = typeFromLiteral(value);
+  }
+  const stepsList = contextStepsList(context, stepsType);
   return (
     <div className="steps">
       {steps.map((step, i) => {
         switch (step.type) {
-          case 'key':
+          case 'key': {
             const tierOptions = Object.keys(stepsList.reduce((r, optionSteps) => {
               if (!optionSteps[i] || !optionSteps[i].key) {
                 return r;
@@ -44,32 +52,33 @@ const Steps = (props) => {
                 <select readOnly value={steps[i].key}>
                   {
                     tierOptions
-                      .sort((l, r) => l.toLowerCase() < r.toLowerCase() ? -1 : 1)
+                      .sort((l, r) => (l.toLowerCase() < r.toLowerCase() ? -1 : 1))
                       .map((tierOption) => <option>{tierOption}</option>)
                   }
                 </select>
               </span>
             );
+          }
           case 'invoke':
             return (
               <div className="invoke">
                 <span className="paren open">(</span>
-                  {step.args.map((arg) => (
-                    <div className="arg">
-                      <label>
-                        {arg.label}
-                        <Value.component
-                          context={context}
-                          type={
-                            arg.steps
-                              ? typeFromSteps(context, arg.steps)
-                              : typeFromLiteral(arg)
-                          }
-                          value={arg}
-                        />
-                      </label>
-                    </div>
-                  ))}
+                {step.args.map((arg) => (
+                  <div className="arg">
+                    <label>
+                      {arg.label}
+                      <Value.Component
+                        context={context}
+                        type={
+                          arg.steps
+                            ? typeFromSteps(context, arg.steps)
+                            : typeFromLiteral(arg)
+                        }
+                        value={arg}
+                      />
+                    </label>
+                  </div>
+                ))}
                 <span className="paren close">)</span>
               </div>
             );
@@ -81,7 +90,7 @@ const Steps = (props) => {
         value && (
           <span className="assign">
             <span className="op">=</span>
-            <Value.component
+            <Value.Component
               context={context}
               type={typeFromSteps(context, steps)}
               value={value}

src/client/components/types/string.type-renderer.jsx

@@ -29,5 +29,5 @@ String.propTypes = {
 
 export default {
   type: 'string',
-  component: String,
+  Component: String,
 };

src/client/components/types/typing.js

@@ -1,4 +1,4 @@
-import {Context} from '@avocado/behavior'
+import {Context} from '@avocado/behavior';
 
 export function typeFromLiteral(v) {
   if ('literal' === v.type) {
@@ -33,18 +33,16 @@ export function typeFromSteps(context, steps) {
     return 'undefined';
   }
   const [, finalType] = steps.slice(1).reduce(
-    ([v, type], step, i) => {
+    ([v, type], step) => {
       const {key} = step;
       if (key) {
         const description = Context.typeDescription(type, v);
         return [
           'object' === typeof v ? v[key] : undefined,
-          description[key] ? description[key].type : type
+          description[key] ? description[key].type : type,
         ];
       }
-      else {
-        return [v, type];
-      }
+      return [v, type];
     },
     context.get(steps[0].key),
   );

src/client/components/types/value.type-renderer.jsx

@@ -1,25 +1,20 @@
 import {compose} from '@avocado/core';
-import classnames from 'classnames';
 import contempo from 'contempo';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import Bool from './bool.type-renderer';
-import Number from './number.type-renderer';
-import {default as ObjectType} from './object.type-renderer';
 import propertyPropTypes from './property-prop-types';
 import Steps from './steps';
-import String from './string.type-renderer';
 import {contextStepsList} from './steps-lists';
-import {typeFits, typeFromLiteral, typeFromSteps} from './typing';
+import {typeFromLiteral} from './typing';
 
 let TypeRenderers;
 const ensureTypeRenderers = () => {
   if (!TypeRenderers) {
     const {all: allTypeRenderers} = require('./type-renderers.scwp');
     TypeRenderers = Object.values(allTypeRenderers()).reduce((r, M) => {
-      const {default: {type, component}} = M;
-      return {...r, [type]: component};
+      const {default: {type, Component}} = M;
+      return {...r, [type]: Component};
     }, {});
   }
 };
@@ -31,7 +26,7 @@ const renderValue = (context, type, value) => {
       return <Steps context={context} steps={value.steps} type={type} value={value.value} />;
     }
     case 'actions': {
-      const Component = TypeRenderers['actions'];
+      const Component = TypeRenderers.actions;
       return <Component context={context} value={value} />;
     }
     case 'literal': {
@@ -49,7 +44,7 @@ const renderValue = (context, type, value) => {
           <select readOnly value="<literal>">
             {
               tierOptions
-                .sort((l, r) => l.toLowerCase() < r.toLowerCase() ? -1 : 1)
+                .sort((l, r) => (l.toLowerCase() < r.toLowerCase() ? -1 : 1))
                 .map((tierOption) => <option>{tierOption}</option>)
             }
           </select>
@@ -67,7 +62,7 @@ const renderValue = (context, type, value) => {
     default:
       return null;
   }
-}
+};
 
 const decorate = compose(
   contempo(require('./value.raw.scss')),
@@ -75,9 +70,6 @@ const decorate = compose(
 
 const Value = ({
   context,
-  name,
-  label,
-  options,
   type,
   value,
 }) => <span className="value">{renderValue(context, type, value)}</span>;
@@ -89,5 +81,5 @@ Value.propTypes = {
 
 export default {
   type: 'value',
-  component: decorate(Value),
+  Component: decorate(Value),
 };