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

Loading order #57

Closed
richburdon opened this Issue Aug 9, 2015 · 8 comments

Comments

Projects
None yet
5 participants
@richburdon

richburdon commented Aug 9, 2015

This might be a more general systemjs feature/question: is it possible to ensure that CSS gets loaded before the main page loads?

I.e., to replace the need for hard coded package links in the header:

<link rel="stylesheet" href="/res/packages/github/twbs/bootstrap@3.3.5/css/bootstrap.css">

With something like this (which works, but loads asynchronously -- so you see the raw HTML for half a second before the CSS loads):

<script type="application/javascript">
  System.import('bootstrap/css/bootstrap.css!');
  System.import('app/test/js/bootstrap.js');
</script>
@guybedford

This comment has been minimized.

Show comment
Hide comment
@guybedford

guybedford Aug 24, 2015

Member

We don't provide guarantees for CSS loading order, just like modules. Although the next major release will actually provide this feature as load execution order is set to be deterministic in the latest loader specification.

Member

guybedford commented Aug 24, 2015

We don't provide guarantees for CSS loading order, just like modules. Although the next major release will actually provide this feature as load execution order is set to be deterministic in the latest loader specification.

@dalgard

This comment has been minimized.

Show comment
Hide comment
@dalgard

dalgard Jan 8, 2016

@guybedford: When you say 'major release' – are we talking about 1.0.0 of SystemJS? Do you have any idea when that will be?

I need to be able to depend on load order in order to override UI library features without relying on !important statements or inefficient ancestor selectors.

dalgard commented Jan 8, 2016

@guybedford: When you say 'major release' – are we talking about 1.0.0 of SystemJS? Do you have any idea when that will be?

I need to be able to depend on load order in order to override UI library features without relying on !important statements or inefficient ancestor selectors.

@guybedford

This comment has been minimized.

Show comment
Hide comment
@guybedford

guybedford Jan 9, 2016

Member

@dalgard unfortunately that update won't be anytime soon, as it requires the whatwg loader spec to be stable first.

Member

guybedford commented Jan 9, 2016

@dalgard unfortunately that update won't be anytime soon, as it requires the whatwg loader spec to be stable first.

@guybedford guybedford closed this Aug 21, 2016

@dazinator

This comment has been minimized.

Show comment
Hide comment
@dazinator

dazinator Nov 6, 2016

I am experiencing this problem..

Is there some javascript event / method of being notified once all dependencies have been loaded? Because I was thinking of perhaps hiding the entire page content, and then once all dependencies loaded, unhide the content. Does this sound workable?

dazinator commented Nov 6, 2016

I am experiencing this problem..

Is there some javascript event / method of being notified once all dependencies have been loaded? Because I was thinking of perhaps hiding the entire page content, and then once all dependencies loaded, unhide the content. Does this sound workable?

@dazinator

This comment has been minimized.

Show comment
Hide comment
@dazinator

dazinator Nov 6, 2016

Ok - it was as simple as:

  System.import("js/site").then(function(m) { $('.body').show(); });

dazinator commented Nov 6, 2016

Ok - it was as simple as:

  System.import("js/site").then(function(m) { $('.body').show(); });

@djflex68

This comment has been minimized.

Show comment
Hide comment
@djflex68

djflex68 Mar 16, 2017

Any updates on this ?

djflex68 commented Mar 16, 2017

Any updates on this ?

@dazinator

This comment has been minimized.

Show comment
Hide comment
@dazinator

dazinator Mar 16, 2017

@djflex68 - does System.import("your css").then(function(m) { $('.body').show(); }); not work for you - in combination with the css loader plugin? (with body hidden by default)

dazinator commented Mar 16, 2017

@djflex68 - does System.import("your css").then(function(m) { $('.body').show(); }); not work for you - in combination with the css loader plugin? (with body hidden by default)

@djflex68

This comment has been minimized.

Show comment
Hide comment
@djflex68

djflex68 Mar 16, 2017

Unfortunately not in my case. I'm trying to load all CSS files of my application using import directive in a single .ts file. Ordering matters because of CSS selectors precedence.

djflex68 commented Mar 16, 2017

Unfortunately not in my case. I'm trying to load all CSS files of my application using import directive in a single .ts file. Ordering matters because of CSS selectors precedence.

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