-: Now one important note, by the way,
you might be wondering why autobind works here
in ProjectList even though I didn't add a import
to the autobind decorator.
Well, because in app.ts, I have all these imports.
Now actually, if I remove these imports there,
which would be correct, because in here
I technically only use ProjectInput ProjectList is on,
we'll have a problem.
You see, if this reloads, we have an error here,
even though we get no compilation error unfortunately,
but we get a runtime error.
So we need to make sure we import everything
we use in a file into that file to be safe.
Technically, we can import everything in app.ts,
and since ProjectInput and ProjectList which,
for example, use the autobind decorator come later,
the autobind decorator will be available when they need it.
But this is not the cleanest possible way.
If you instead import everything a file needs
from inside that file,
you have to guarantee that this file
will have it available when it needs it,
and you're not relying on some global file
which imports everything,
where you then might remove an import
and suddenly, everything breaks.
So, what's the solution here?
Well, let's go back to the files
and import what they need.
For example, ProjectInput does not just need
the base component, it also needs
the validation logic and autobind.
So in here, I will import
by going up one level with two dots,
from decorators, the autobind decorator, whoops, like this,
and from util, the validation.ts file.
That is definitely needed in this file here.
I also need the project's state in here.
So I will import /state/project-state.ts.
And I will grab these imports and go to ProjectItem,
and there I don't need the project state and validation,
so we can remove that.
But we will need the autobind decorator.
We also need the draggable interface and the project model.
So we'll also go to the models folder here,
and import project.ts and drag-drop.ts.
In ProjectList, we won't need validation,
but I do need ProjectState and autobind.
And in addition from the models folder,
I need the project.ts file and the drag-drop.ts file.
With that just saves and compiles,
and now this all works again, as you see,
now we got no runtime errors, because now we got
all these imports back in the files.
So, this is the proper way of doing it,
every file specifies what it needs,
and we can split our code
and still end up with one file,
so we get the best of both worlds, we could say.
Yet, this is not necessarily
the best possible way of doing it.