visual scripting

by Abdul Ahmad

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function App() {
	return <InstructionsConsumer />;
}

ReactDOM.render(<App />, document.querySelector("#app"))

function EditableField() {
	return 'editable field';
}

function getUserData() {
	return { name: 'larry' };
}

function getGetUserInstructions() {
	return {
  	execute: 'getUser',
    user: {
      type: 'userObj',
    },
  };
}

function getGetNameInstructions({ getUser: _getUser } = {}) {
	return {
    execute: 'getName',
    user: {
      value: _getUser(),
    },
  };
}


function getStaticValueInstructions({ val } = {}) {
	return val;
}

function getEqualsInstructions({ getVal1, getVal2 } = {}) {
  return {
    execute: 'equals',
    inputs: {
      val1: {
        value: getVal1(),
      },
      val2: {
        value: getVal2(), 
      },
    },
    outputs: {
      result: {
        type: 'bool',
        value: false,
      },
    },
  };
}

function getBranchInstructions({ getConditionInstructions } = {}) {
	return {
  	execute: '',
    name: 'branch',
    condition: {
      type: 'bool',
      value: getConditionInstructions(),
    },
    isTrue: {
      execute: {
        name: 'render',
        inputs: '',
        outputs: '',
      },
    },
    isFalse: {
      execute: '',
    },
  };
}

function handleGetUser({ obj } = {}) {
	const user = getUserData();
  return user;
}

function handleGetUserName({ obj } = {}) {
  const user = getObjValue({ obj: obj.user });
  return user.name;
}

function handleEquals({ obj } = {}) {
	const val1 = getObjValue({ obj: obj.inputs.val1 });
	const val2 = getObjValue({ obj: obj.inputs.val2 });

  if (val1 === val2) return true;
  return false;
}

function getExecuteFunc({ name } = {}) {
	if (name === 'equals') {
  	return handleEquals;
  } else if (name === 'getName') {
  	return handleGetUserName;
  } else if (name === 'getUser') {
  	return handleGetUser;
  }
}

function getObjValue({ obj } = {}) {
  if (typeof obj.value === 'string') return obj.value;
  return getExecuteFunc({ name: obj.value.execute })({...