Sorry if I'm doing something wrong, I'm just starting with Svelte. I looked around on the web and couldn't find anything
I have a large hard coded data array made of objects that I want to keep in its own file while being able to access the data in app.svelte. I'm trying to keep my app.svelte as simple as possible. I tried export const data=[{data:"mydata"}] along with import {data} from "./data.svelte" but the export keyword means it expects the data to be sent over to data.svelte file, not the other way around. I really have no clue how to acheive this in Svelte. The data could also be json in a json file, as long as it is imported in my app.
Thank you for your help
.svelte files should be reserverd for components only, you can add your data in a regular javascript file instead
in data.js
export const data=[{data:"mydata"}]
in App.svelte
<script>
import { data } from './data.js'
</script>
This is possible with json files as well, but it will require an extra step as svelte does not by default understand json files. Depending on what bundler you use, you will have to add plugin, for Rollup this is https://www.npmjs.com/package/#rollup/plugin-json
Related
I currently load a component when you go to the url /hsk1game. I have 6 urls hsk1game hsk2game etc. My single component loads the different files based on the url. I import my files as such:
import Hsk1Data from '../HskFiles/hsk1.json';
import Hsk2Data from '../HskFiles/hsk2.json';
import Hsk3Data from '../HskFiles/hsk3.json';
import Hsk4Data from '../HskFiles/hsk4.json';
import Hsk5Data from '../HskFiles/hsk5.json';
import Hsk6Data from '../HskFiles/hsk6.json';
I currently put the files into an array and pull out the correct file according to the current url. This works fine but I feel it might be expensive. I can put the data into a database and then only make a single request instead of importing them all. But I was wondering if there's a better way with files?
Thank you
So it depends on how much information is in those JSON files, people make a huge huff about performance when the reality is unless you are working with LOTS of data then its really negligible.
If your JSON files are massive, i'd recommend using the second method you described and returning that information via a request, because it won't be required by the bundler and so will reduce the amount of data that needs to be transferred when the page first loads.
If the JSON files are reasonably small, there is nothing wrong with just importing them.
how can I "block" imports of a javascript file?
ex: if the file is:
const file = require('./file');
or
import file from './file';
would it be possible to make sure that if there were any of these two forms of import, the file would give an error or would it just not work?
ps: i still want to be able to export
You could have a custom made hook where you could have access to all of the file content and upon that to decide to strip or to load the file but the logic could be quite tangled and complicated if you want to create and common approach. You could read more about custom hooks and decide for yourself if this approach is suitable for you.
I have a React table like this. Do we have anyway to export this table to CSV file and keep the same structure.
Yes, but how easy it is really depends on how the underlying state is being stored in your app.
The react-csv package allows you to pass it an array of data and add a Download button to your site, but you first need to arrange/collect the data into the right format for it.
I have a component in my app that is getting big... So I moved some chunks of code to another files (conditional and list renders to be specific).
Can I use it like a rails partial, for example? or a script tag?
I woudn't like to create a new component,it's just some code i wanna split.
of course there is a way, but do I have to import all the things (components, states, etc) to this file?
couldn't I do smt like this?
import myChunkOfCode from 'some/path';
// and then place it here like a script tag?
<myChunkOfCode>
and then this code that does not make any sense alone works pretty well when imported, without complaining about undefined stuff and etc...
I am building a no-code application using Vue. I have an idea that I have some JSON file and import it on runtime. However, JSON file don't allow to add a function. I change to use a javascript or typescript file to store the JSON object like below.
export {
"is": "button",
"props": {
"type": "button"
},
"events": {
"click": () => {
// do something
}
}
}
Currently, I want to trigger the import when Vue created the component.
{
created () {
// import here
}
}
I have two methods that I have tried:
Add a script tag but I need something to store it first, like window
use import but it only supports local file.
I store these files in backend and load each of them when frontend need it. Is there any better solution? Please help and thank you.
It sounds like you essentially want to do something like deferred module loading, if you use Webpack you may want to have a look at this: https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/
I'm not sure I can recommend the approach that you're taking but if you do want to stick with it, your solution would probably look something like:
Make an HTTP get request to the URL of your file. This should be a plain text response, not JSON. The file itself can be a .js file containing an object literal ({ a: ..., b: ..., c: ... }) with function definitions.
Once you get the text, evaluate it with eval(...the response) and save it to a local variable which you can then use. Note that if the code in your file has any dependencies, you will have to come up with some way to bring those over as well.
Clearly though, this is a lot of trouble and probably not worth it. Code splitting in general is only worth the effort if it's a fairly big app; for smaller apps the cost of the round trips outweighs the cost of loading the initial bundle.
In any case, you'll likely have more luck using Vue's baked-in dynamic import system than a hand-rolled solution, but it really just depends on what you're trying to achieve here.