Comments (5)
If both the shell and foo fragments are synchronous then you don't need that require magic(def and undef) since the order of flushing them to the browser is guaranteed and requirejs takes care of the dependencies.
I did try out the scenario you have specified here and it works without any issues, It will also work if you have specified the foo.bundle.js
from foo fragment Link Headers.
It will not work incase if the shell fragment is marked async
.Please do provide an example repo if you still have any issues.
from tailor.
I though so as well, but I see two problems here:
-
require.js is fetching scripts with
<script async>
. So even if the fragments are synchronous, the order of the client-side fragment initialization [1] is not guaranteed, is it? -
tailor is fetching scripts via
require([script])
, wherescript
is the link provided in the fragment headers. So in order for other fragments to depend on that module, they must know the exact script URI upfront, which breaks encapsulation of fragments.
So the require magic, which is controlled by the shell fragment, defines a named shell
module, very similar to how you at zalando do it in the header for react et al. provided by base assets [2]. Then, the depending fragments only need to know the module name, not the location: define('foo', ['shell'], () => {});
.
[1] https://github.com/zalando/tailor/blob/master/src/pipe.js#L65
[2] Example from zalando
(function (d) {
require(d);
var arr = ['react', 'react-dom', /* ... */];
while (i = arr.pop()) (function (dep) { define(dep, d, function (b) { return b[dep]; }) })(i);
}(['/base-assets/bundle.js']));
from tailor.
Regarding your concerns
- Yes you are right here, require.js fetches the script via
async
so the order is not guaranteed. This is applicable only to scripts that are sent through link headers. If you want ordered behaviour you can use require.jsonNodeCreated
hook
require.config({
onNodeCreated: function(node){
node.async = false;
node.defer = true;
}
});
- This was a conscious decision we took, We do not want fragment scripts to be dependent on another fragments. This also applied to scripts that are sent through link headers.
But in your case, since you are defining the shell fragment through fragment html
//shell fragment
http.createServer((req, res) => {
res.end(`
// whatever
<script>
define('shell', ['http://shell.com/shell'], () => {});
<script>
`)
})
If you do it via this way and if the other fragments like foo or whatever depends on this shell
module, It wont break any behaviour since the fragments are loaded synchronously
from tailor.
Thanks for the reply.
Your last example is basically exactly how we solved it now, except that we also send the link header for http://shell.com/shell
to let tailor load and initialize the fragment bundle regularly with the DOM element. Note that we also do not expose the init function from the bundle (default export) in the named shell module but only the named api
export [1].
Generally I really like the decision to let fragments not depend on each other. In our case, the shell fragment is a special snowflake :-) but we still decided to serve it as a regular fragment. We probably stick with our solution for now, just wanted to know if there was already a proven solution to solve said problem.
From my side we can close the issue/question.
[1] https://gist.github.com/jmaicher/f696b510008adadd94d2b7fbb35c8966#file-2-shell-fragment-html-L9
from tailor.
Yes as you mentioned, tailor looks for default init module from the fragment scripts and it was a requirement.
Your solution will continue to work, But I would suggest you guys to put that script defining fragments to be in the head so that its loaded fast and user experience would be better.
Thanks. Feel free top open the issue if you have more questions :)
from tailor.
Related Issues (20)
- What is the difference between Tags and Fragments? HOT 4
- Custom Tags wraps html HOT 1
- tailorjs nextjs alternative HOT 11
- How to dynamically add fragment at client end HOT 2
- React re-hydration for multiple fragments
- Use templates sent along with the request. HOT 4
- Send Authentication Header for Fragments HOT 5
- requestFragment type definition does not match implementation
- parseTemplate type definition does not match implementation
- Stop to reload fixed fragments in different route for application. HOT 4
- Custom Attribute passing in <fragment> not working since 3.8.0 HOT 1
- Need to change the response status code when rendered the fallback url.
- Missing example of tailor consuming a template storage. HOT 1
- Fragment Attributes: Documentation doesn't match implementation HOT 1
- Possibility to switch between different environments
- Fix deprecated code and eslint
- Repository Status & Roadmap HOT 2
- Fragment-common, Vue 3 & RequireJS HOT 5
- Fragments Layout on a template
- Custom event during parsing template HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailor.