New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: {{import x from "y"}} #610

Open
justinbmeyer opened this Issue Oct 17, 2018 · 6 comments

Comments

Projects
None yet
3 participants
@justinbmeyer
Copy link
Contributor

justinbmeyer commented Oct 17, 2018

Related to: canjs/can-view-import#111, I would like to replace <can-import> with something like:

{{import helper from "y"}}
{{import "my-component"}}

I think this can be determined statically fairly easily. This should create Let variables local to stache's scope.

@matthewp

This comment has been minimized.

Copy link
Contributor

matthewp commented Oct 17, 2018

How do dynamic imports work? {{#import helper from "y"}} {{helper(val)}} {{/import}}?

@matthewp

This comment has been minimized.

Copy link
Contributor

matthewp commented Oct 17, 2018

You'd want to ban non-string values in the static form but allow them in the dynamic. For example:

template({
  module: "~/app/components/tabs"
});

not allowed

{{import module}}

<my-tabs />

allowed

{{#eq(page, "tabs")}}

{{#import module}}
  {{#if(isResolved)}}
    <my-tabs />
  {{else}}
    <img src="/loading.gif" />
  {{/if}}
{{/import}}

{{/eq}}
@justinbmeyer

This comment has been minimized.

Copy link
Contributor

justinbmeyer commented Oct 17, 2018

@matthewp that's a great question. I think we'd want people to have access to the underlying promise. We might not need to solve this problem if we:

  • give can-view-scope access to the window cc @phillipskevin
  • support let in all blocks
{{# if(showComponent1) }}
  {{ let componentPromise = System.import("component1") }}
  {{# if(componentPromise.isPending) }}
     Loading ...
  {{/}}
  {{# if(componentPromise.isResolved) }}
     <the-component/>
  {{/}}
{{ else }}
@BigAB

This comment has been minimized.

Copy link
Contributor

BigAB commented Oct 29, 2018

Just to offer 2¢

Should probably have

{{ let componentPromise = import("component1") }}

instead of

{{ let componentPromise = System.import("component1") }}

... to match the proposed spec for JS Dynamic imports
https://github.com/tc39/proposal-dynamic-import

@justinbmeyer

This comment has been minimized.

Copy link
Contributor

justinbmeyer commented Oct 30, 2018

@BigAB ... to be clarify, we would allow lookup on the window, so people should be able to call anything global and the mechanics of the import do not matter.

@matthewp

This comment has been minimized.

Copy link
Contributor

matthewp commented Oct 30, 2018

import() is not global. It would need to be supported in stache-ast I believe.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment