[Solved] Question: "import" v.s. "can-import"

CanJS
1

Sometimes I see:

// widget.js
import './widget.less';

And other times I see:

<!-- widget.stache -->
<can-import from="./widget.less" />

What’s the difference and why do some people seem to prefer one over the other?

EDIT:

Is one more efficient than the other, and/or does one happen sooner than the other?

EDIT:

On this page:

https://canjs.com/doc/can-view-import.pages.static.html

Should import from "mymodule"; be just import "mymodule";?

EDIT:

On these pages:

I don’t necessarily see any example of this syntax:

<can-import from="~/components/page-home/" can-tag="loading-indicator">
  <page-home/>
</can-import>

And I would be led to believe I’d need to use can-dynamic-import and {{#if isResolved}}, which doesn’t seem to be the case because the above seems to work fine. Is the above method/syntax explained somewhere in the docs? UPDATE: After some testing it seems like when you add the can-tag attribute it essentially causes can-import to behave like can-dynamic-import with an {{#if isResolved}} check. If that’s literally what happens might be worth adding a note about that to the https://canjs.com/doc/can-view-import.can-tag.html documentation? ALSO: It seems then it would make more sense to use can-tag with can-dynamic-import instead of can-import, wouldn’t it? Or maybe this was a concession or decision to make can-tag turn can-import into a dynamic import? I think it could be explained in the docs either way.

2

The difference between import "x" and <can-import from="x">:

  • import "x" imports something for a JS file
  • <can-import from="x"> imports something for a template. This is nice when only the template uses that import.

==============

There’s a difference between <can-import/> and <can-import> CONTENT </can-import>.

  • <can-import/> does a static import similar to import "x".
  • <can-import> CONTENT </can-import> does a dynamic import similar to import(x)

<can-dynamic-import/> does the same thing <can-import> SOME CONTENT </can-import> does.

3

Thanks, although my experience has been that:

<can-import from="~/components/a-comp.component">
 <a-comp/>
</can-import>

Will throw an warning (the element also disappears when using SSR):

image
image.png794×56 4.8 KB

This warning goes away and the element stays if can-tag is added like:

<can-import from="~/components/a-comp.component" can-tag="loading-tag">
 <a-comp/>
</can-import>

You can try this yourself by using the following demo project:

Where can I learn more about import "x" v.s. import("x")?

4

Yes, that warning is expected because the component hasn’t been fetched yet. Check out these docs for more info: https://canjs.com/doc/can-view-import.pages.dynamic.html

5

Oh, okay, so you’d have to use {{#if isResolved}} with <can-import></can-import> because it literally adheres to the Dynamic Import docs. It didn’t register with me when @justinbmeyer said:

<can-dynamic-import/> does the same thing <can-import> SOME CONTENT </can-import> does.

I know it’s like adding training wheels, but I think the Dynamic Imports and Static imports pages could be a little clearer about this (essentially just add what Justin wrote above) instead of leaving it up the reader to make an assumption. It’s clear now, but I didn’t think about it that way for whatever reason when encountering the issue.