Import your JSON and CSS as ES Modules

so today i want to talk about json module imports and css module imports now this is in the browser this is the ability to import a json file or css file without doing a fetch call first to bring back the file so i've done videos recently on es modules themselves so how those works how you can use es modules in the browser as well as in node and also dynamic imports so how you can after the page loads load content at that point sort of a lazy loading approach to bringing in additional scripts so right here i've got a css file which is linked to and i've got a script that i've defined as module so these are both attached to the page my json file that i'm going to bring in and use on my page this is it it's just a simple little piece of data nothing to really show in the css the app.js file that we're going to build right here and this is the page that we're going to render it on so the css is already rendering right now so i'm going to remove that before we do the imports but for right now there it is now what i want to do is i want to bring that json data in here now this was something the json modules this was something that was added in chrome 91 so not that long ago and in chrome 93 which was only about a month ago css imports were added as well now edge and opera have support as well firefox is under development safari who knows um [Music] that aside let's jump in and start doing some imports so with the json if i want to do just a standard import the way i would with a javascript module we use our import command and we say i'm going to import into something called data this is going to be my variable data from data.json now if that was all that i was doing this would be fine if this were a javascript file but i save this i'm going to get an error in the browser and it says hey you can't bring in anything that's not application that's application json you can only bring in things that are text slash javascript as the mime type so this doesn't work on its own without the new keyword we can say hey i want to assert that this thing is a json file yes it's a module yes i'm bringing it in and i'm telling you explicitly that this thing is going to be json my error is gone now there is no problem i don't have to use fetch i now have something called data this variable right here which i can use on my page so if i wanted to write it out console.log data dot and these are what i'm bringing in here so let's just do the characters i save that and there it is i've got the data available i didn't need to use fetch i just imported it so just like any other module i've brought it in and i have this variable that i can access it and the cool thing about it is it automatically handles this like other modules are handled it's an asynchronous thing but it understands that it's not going to run anything else on the page until it has this it needs this thing to run the rest of the script okay now dynamic import so i'm just going to comment that out so we don't get that message again and again the dynamic import version means i can call the import method to bring it in when i want to do this so to make a to add a delay i'm going to use set timeout just so it doesn't run immediately i'm going to have a function that runs and we'll say after two seconds don't want to make it that long of a delay to wait so i'll just move this in here this is what i'm going to start off with just so after two seconds we will get there it is time's up now to do the import command same as with javascript when you're importing a javascript module we would just say what we're trying to import it's the json file but again if i just leave it like that i'm going to get that error coming up saying you can only bring in javascript files unless you add the second parameter the second parameter is going to be that object where we assert and the assertion is going to be an object same as we have right here above with type json now i will have access to this data and we can access it as well so i bring this in i don't assign this to a variable because this is an asynchronous thing just like a fetch which means at the end we have a then we put then on the end of here and i come up with a variable that i want to use which in this case is going to be mod mod is my module it's the module object if we write it out in the console we will see after the two seconds time's up and there it is there is our module inside this module object there is a property called default that is the actual contents of the file so the json string in the file has been taken out of the module and actually converted into a javascript object and it's inside of default so we can say mod dot default that is the whole thing if i write the that out after the two seconds there we go there's the entire object both properties all of it so you would use the default mod.default as the whole thing extract what you want use what you want from that file and that's it that's the whole thing that is dynamically importing a json file no fetch similar syntax you're doing import instead of fetch you've got a then but we're skipping over that first one where we have to convert it from the json string into the javascript object all right i will comment out this one and i'm also going to jump over here and comment out my css save that now we can see the css is no longer being applied to the page i want to bring in my css and apply it i'm just going to do the static one the dynamic works the exact same way [Music] so import i'm going to call it sheet it's my style sheet from we have to provide the full path just like the other imports so import sheet from main dutch css and again we have to otherwise we get that same error and i'm sure you can guess what this is there we are so import the css file type css i save it it has brought the css into my page but it hasn't applied it it's kind of like creating a dom element but not adding it to the screen i've brought in the css but i haven't applied it if i want to apply it we just do document dot adopted style sheets equals and it's an array that it gets so if there's another one we're sort of adding that in and here it is [Music] sheet [Music] and now it's applied and that's it now you can import json files and css files but again bear in mind that this is a fairly new thing css only a month a month old and it's just firefox sorry not firefox edge opera and chrome and with these the importing with the assert keyword again edge chrome and opera firefox under development safari who knows hopefully in the near future they will support this as well and that's it have some fun with that good luck with it and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 2,299

Keywords: MAD9013, MAD9014, MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, professor Steve, prof3ssorSt3v3, 100daysofcode, ES Modules, JS modules, browser modules, browser imports, how to import json, how to import css, import assert, adoptedStyleSheets, es6 modules, dynamic imports, static imports, dynamic browser imports

Id: K-H3sLupqbk

Length: 8min 40sec (520 seconds)

Published: Sun Oct 03 2021