I am developing a Vue+Vuex based app running on Electron.
I hold a directory path as part of the state, signifying the current working directory for the user. In the app, I have a component in which I want to display all the files in the working directory. However, those change over time (the app / user can delete them, create new files, rename file etc...).
The way I originally structured it was to have a getter, which given the current working directory from the state, would fetch the file list. However, as the working directory didn't change, the getter (which only depends on it) wasn't called again.
I don't want to gold the file list in the state, as I don't want to have to update it + the actual file on the machine for every action taken.
I lathered it right now by having a "refresh" action that deletes and resets the working directory in the state, triggering a call to the getter. However, having to call it whenever I suspect something happened to a file is a little tedious.
What is the recommended solution here?
Related
I am writing an Electron application. I'm using HTML + CSS + JAVASCRIPT with Electron. As you can see below, I have a form and I keep this form information in an .env file. I start the Electron application, open and fill the form, and then save it to the .env file. Thus, my .env file is changed, but I cannot immediately recognize the changes in my .env file. Therefore, if I open my form again, old information is coming. If I restart my Electron application, this event is fixed. How can i solve this problem? I would appreciate your help, my dear developer friends.
First situation: Before I don't save informations to .env file
Second situation: Saved time view
I'm reopen settings window and last result (It gets old information but .env file changed)
Last situation: As you can see...
I'm try app.relaunch() method on this situation. But nothing affect.
There are a few ways to detect changes to a .env file during a process in real-time:
File System Watcher: You can use the watch command in Linux or the fs.watch method in Node.js to watch for changes to a specific file or directory. This method will trigger a callback function whenever the .env file is modified.
Polling: You can use a setInterval or setTimeout function to periodically check the .env file for changes. This method will trigger a callback function if the .env file has been modified since the last check.
Event-driven: You can use an event-driven approach to detect changes to the .env file. This method will trigger a callback function whenever the .env file is modified.
Use a library: There are several libraries available that can be used to detect changes in the .env file like dotenv-expand, dotenv-webpack and etc.
You should choose the method that best suits your specific use case and programming language.
Please keep in mind that the above methods are general suggestions and you may need to make some adjustments depending on your specific use case.
Context: Working through the Odin Project and finishing a "ToDo List" application. Trying to implement a functionality where the user will store data locally and be able to re-load data when the app is reloaded.
What I expect: I added 2 functions: saveToLocalStorage and getFromLocalStorage and expect any projects that I create to automatically reload when I refresh the page. They are stored in an object called "allProjects".
What happens instead: The first time a user creates projects, they populate as normal. However, when the page is reloaded, I'm not able to add anymore projects, AND the old projects don't populate the page. I know from console.log statements that the data is being loaded, and am parsing/stringifying the JSONS.
The really weird part: When I examine the allProjects variable in the chrome debugger (by hovering over the variable), I can see that it contains all the project objects I have been creating. However, watching that same object under "watch" it shows up as empty. And when I call it in updateProjectSidebar() as Projects.allProjects (because it is coming from a module), I hover over Projects.allProjects and it is empty there too. I figure this is probably why my sidebar won't render, since it sees nothing in that object to render.
A link to my whole code if you wish to see the whole thing in context.
I figured it out. It was a scope issue. The allProjects var was being returned before getFromLocalStorage() was run.
I am experiencing one bizare problem with which you will probably not be able to help me, but I will try asking it anyway:
My Vue component does not want to update when it has specific name. When I rename it, it updates without problem.
To be precise, I named my Vue component Webinar.vue.
Here is the code for "Webinar.vue":
<template><div>test</div></template>
I display this component in browser in my Web application and it displays properly.
Now, I change test to test2 and save file and nothing happens.
But if I change the name of the component to be, for example, Webi.vue and do not change any content of the file nor anything anywhere else in the project, no config, nothing, it starts working. When I write test inside the div browser displays test, when I set test1 it displays test1 and so on.
When I change the name of the component back to the original name, update stops working again. And this is not the only name that does not work. I found a few other names that do not work, one of which is Webin.
How is this possible?
I know that you probably will not be able to help me since I did not provide minimal reproducable example, and if you ask me about the project, about the environment where is this running, I would say "it is complicated", so yea... But if one name works, just by changing the component name it should not stop working, right?
This is very bizare bug. I have very interesting environment... This component is nested within another component, that component is initialized from within the JSP file, there is Vue object created, JSP is rendered by Liferay, there is node.js involved, webpack and so on and so on. Very complex project with a lot of unusual stuff. Only way I can get this component to refresh when it has "bad name", is by restarting the node completely.
Vue in question is Vue 2.
But, how can changing the name of the component unbreak it. I do not get that.
I am creating an extension to track changes that have been made to any JS or CSS file of a page via DevTools. At will, I want to then push those changes - as a whole file if necessary, but changed-elements only would be nice - for the purpose of sending directly to my server to be handled.
My question pertains specifically to this:
Image of DevTools Changed Tab
Can I, via an extension, hook into the Changes tab in order to take those changes and process them? (Or is there a similar process that can handle this manually?)
This ideal output I'm hoping to find or be able to get to would be something like this:
{
fileName: nameofeditedfile.css,
change: [SomeComplexObjectWithTheSpecificChanges]
}
I'm aware that I can save these files locally and then do as I please with them, but for multiple reasons that's definitely NOT the route I want to go.
Let me know if I need to include a more specific example or other details!
I've written a quite complex brunch-config.js configuration file that modifies these arrays at the start:
paths.watched and,
files.javascripts / stylesheets (the joinTo "filename" => /patterns/).
What I'd like to do is to restart Brunch when it detects a particular change.
I've got a specific file (acts like a flag to set focus on a specific watch-folder) that can be moved around, and in doing so I'd like the above arrays to re-populate different data based on the special file relocation.
Regarding brunch's built-in restart mechanism, I'm not sure how far it goes (ie: when it's reinstalling NPM modules, or when the brunch-config.js file itself is modified). But if that causes a full reload of the brunch-config.js - How can I trigger this restart functionality via NodeJS code executed within the configuration file, more specifically in the "preCompile" hook?
Here's how it looks like so far in action: