The requirement of the project is to separate DOM from logic in different files.

Thus, I have these files:

default.js

import { submitForm } from './logic'

function displayTaskForm(key) {
  // function create form HTML content with btn submit.
  submitForm(addTaskbtn, key);
  return form;
}

export { displayTable };

logic.js

import { displayTable } from './default';

const submitForm = (btn, key) => {
  // Adds event listener to add input to the table && local storage
  displayTable(key) // shows the table content including recent input
  return btn;
}

export { submitForm };

And I have these errors:

default.js

1:1 error Dependency cycle detected import/no-cycle

logic.js

1:1 error Dependency cycle detected import/no-cycle

Could you advise how I could solve this issue? the problem is I have to split my DOM from the logic part. I don't see a way to link creating DOM based on if statement results without linking both files with exporting & importing functions to each other.

Here is the original repository link

The requirement of the project is to separate DOM from logic in different files.

Thus, I have these files:

default.js

import { submitForm } from './logic'

function displayTaskForm(key) {
  // function create form HTML content with btn submit.
  submitForm(addTaskbtn, key);
  return form;
}

export { displayTable };

logic.js

import { displayTable } from './default';

const submitForm = (btn, key) => {
  // Adds event listener to add input to the table && local storage
  displayTable(key) // shows the table content including recent input
  return btn;
}

export { submitForm };

And I have these errors:

default.js

1:1 error Dependency cycle detected import/no-cycle

logic.js

1:1 error Dependency cycle detected import/no-cycle

Could you advise how I could solve this issue? the problem is I have to split my DOM from the logic part. I don't see a way to link creating DOM based on if statement results without linking both files with exporting & importing functions to each other.

Here is the original repository link

• javascript
• dom
• eslint

1 Answer 1

I think the issue might be rooted in where you've decided to draw the line between UI-related code, and logic. Here's how I draw it:

UI: anything that touches the DOM - this includes creating elements, attaching event listeners, etc. The UI can call out to logic for help.

logic: A bunch of helper functions (maybe classes if you're into that), which are mostly pure. These are functions in which the UI can delegate difficult tasks to. A DOM element should never be seen by this logic module. The logic should never depend upon a specific UI (so it shouldn't ever import the UI).

Another way to think of it - if I were to toss your current UI file and build a CLI version of your program that ran in node, would I have to make any changes to your logic file? If so, then your logic is touching UI-specific things it shouldn't be touching.

It's a little hard to tell, looking at your examples what's going on in your specific scenario, and your GitHub link currently doesn't have any code in it. But, hopefully, these guiding principles should help out. It could be that this circular dependency is really just showing that something that currently sets in the logic file needs to be partially or entirely moved to the UI file.

If you find that most to all of your code qualifies as UI-related code, then it could be that you need to work on finding and extracting out the pure parts of a chunk of logic and making that piece of logic able to stand by itself and be reusable in other contexts. Or, it could be that your particular webpage mostly deals with logic that's highly coupled with the UI.