A -> Main BrowserWindow
B -> New BrowserWindow, which I create to print some files.
In B, which I create, I load a new html file, which in its script tag, inits a svelte component.
e.g
import SvelteComponent from 'app/pages/component.svelte';
const component = new SvelteComponent({
target: document.body,
});
This Svelte component has some markup and uses svelte/store which I import in this svelte component to display data available in store.
The problem is, in A, when I view the component, the store data is visible. But, in B, the html file when runs the above JS snippet, the store is empty. I can see the proper markup of the SvelteComponent, but there's no data, as the store is empty. (I confirmed this from console.log)
I don't know why is the store empty when viewed from B, if both are referencing the same file. I'm using webpack for bundling, so all imports should be available.
I would appreciate any help here, thanks!
Had the same issue, ended up using this neat answer from another thread (note that it would require you to set nativeWindowOpen : true in your webPreferences BrowserWindow configuration.
Related
We are using the inside one of our react components which we called "GridViewWrapper" in which i've made all the required css et js ag-grid's related imports (i will share below how i did the imports).
Actually, Since a long time we've been using that "GridViewWrapper" only in one view in the whole app without any problem but then we needed to reuse it somewhere else in the app (in a different view which means that in the runtime that component will never be instanciated more than once in the same time because both views won't be shown together in the same time too)
Now, since i've started to used our "GridViewWrapper" in two views of our app , we started to have css issues in the ag-grid (some looks to be broken , for example checkboxes can't get checked anymore). It looks like there is a mess in the order of loading css files and some css might be overriden by another. https://i.imgur.com/jE8vcSv.gif
When i get started using the ag-grid in our react app , i don't remember i've seen any required webpack specific config for the ag-grid or specifically for typescript (which we are using it in our app too). But now i found this SO thread which talks about a webpack config https://stackoverflow.com/a/56552750/1705922 (they're using react too) and i also found this ag doc also mentionning a webpack config https://www.ag-grid.com/javascript-data-grid/building-typescript/.
Should we implement that in our react app too ?
Here is how i made the css et js ag-grid related files :
import { LicenseManager, RowNode } from "ag-grid-enterprise";
import {
GridApi,
Column,
RowClassParams,
PasteStartEvent,
PasteEndEvent,
CellValueChangedEvent,
CellEditingStoppedEvent,
CellEditingStartedEvent,
ColumnMovedEvent,
ColumnResizedEvent,
DragStoppedEvent,
GridReadyEvent,
RowDragEvent,
} from "ag-grid-community";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridReact } from "ag-grid-react";
Are we missing something ?
These are the ag-grid verions in the package.json
"ag-grid-community": "^26.2.0",
"ag-grid-enterprise": "^26.2.0",
"ag-grid-react": "^26.2.0",
Ok so this is a pretty complicated question but I appreciate any help.
I have vue webpacker running on a rails application, I would like to use Vuex on it however all Vue components are unrelated, a solution I found online (here) was someone who added Vuex to the global window instance and imported that javascript into his main layout, I have done so and can see properly that a Vuex instance exists on my global window instance.
The code for that javascript I'm running is this:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const vuex_store = new Vuex.Store({
strict: true,
});
window["vue"] = Vue;
window["vuex_store"] = vuex_store;
Now my question is, in an unrelated vue component also running on my rails server, how would I import and use this Vuex instance?
Used it as a bus directly as I wanted initially.
window.vue.$on and window.vue.$emit anywhere
I'm currently working on a rails project where we use webpacker. I want to be able to create small dynamic components and wrap these in packs. We want to be able to use these packs as elements within our server side rendered html. While this works (we currently have a pack for each component) I don't know what the best way would be for sharing the vuex store between these packs. I'm guessing this can be done through webpacker but i'm not sure.
the situation eg:
dynamic_component_one data-id="abc"
dynamic_component_two data-id="abc
= javascript_pack_tag 'dynamic_component_one'
= javascript_pack_tag 'dynamic_component_two'
Basically what i want to achieve is that
dynamic_component_1 and dynamic_component_2 share a common vuex store
My current solution exists of the following and feels very hacky. I register the Vue constructor and Vuex Store to the global window object to re-use them in different packs.
const vuex_store = new Vuex.Store({
strict: true
});
window['vue'] = Vue
window['vuex_store'] = vuex_store
if anyone could point me in the right direction i would greatly appreciate it.
I'm a newbie to DART. Spent many years doing OO (PDC) Prolog. I have a beginner's knowledge of HTML5 and CSS3.
I've started playing around with Polymer paper elements, and (sampler-scaffold). I have (paper-item)s as a menu on the left, and each item opens a different HTML page. Visually, it looks and behaves fine.
1) As I understand it, main() is called for each of these HTML pages, since they're shadow doms. So my app has multiple main()s - is that OK? Each main() is called each time I choose its page from the menu. I'm trying to control what each main() does by using a global variable...next.
2) I have a top level DART variable - bool is_init, not initialised. In the main() call from index.dart, I set it to a value. I read it to check it is correct. After clicking the menu to open a "sub page", it is already NULL in that page's main().
I've also tried doing the same within a class in a library - but of course, the initialised object becomes null because of the said problem!
I obviously misunderstand something here. Clues and advice most appreciated.
cheers
Steve
1) You have only one single main() for an Polymer app (entry page like index.html). You can have more than one Polymer app within one your_package/web directory though where each app has one main() method.
If all your custom code is within Polymer elements you don't even need this one main() method because there is a default one provided by Polymer.dart (see how to implement a main function in polymer apps for more details)
main() has nothing to do with Shadow DOM, nothing at all.
Each main() is called each time I choose its page from the menu.
If each of your menu items link to different Polymer applications, this might be true, but with Dart and Polymer.dart you usually build Single Page Applications where a click on a menu doesn't load a different application but instead changes what the current application displays (see http://en.wikipedia.org/wiki/Single-page_application).
2) I don't fully understand what this is about. Maybe you should provide some concrete code and name some concrete filenames which contain that code.
Please edit your question accordingly.
I decided to give Mozilla's Add-on Builder a try. My directory structure looks something like this:
The problem is that the file popup.html needs to reference stackapi.js. But I have absolutely no clue how to do that. Looking through the Mozilla docs, there seems to be a way to do the opposite:
var data = require("self").data;
var url_of_popup = data.url("popup.html");
This allows scripts in Lib to access data files in Data. But I need to do the opposite.
In add-ons built with the Add-on SDK (and the Builder is merely a web interface for the SDK) web pages cannot access extension modules directly - they don't have the necessary privileges. If you simply need to include a JavaScript file from the web page then you should put that file into the data directory. However, it won't have any special privileges then (like being able to call require()).
You don't tell how you are using popup.html but I guess that it is a panel. If you want that page to communicate with your add-on you need to use content scripts. Put a content script file into the data directory, assign it to your panel via contentScriptFile parameter. See documentation on content scripts, the content script will be able to use self.postMessage() to send messages to the extension, the extension can perform the necessary operations and send a message back then.
You can get the url of the stackapi.js file by navigating up from the /data folder and back down the /lib folder like so:
var url=require("sdk/self").data.url("../lib/stackapi.js");
Then use that resource url in the contentScriptFile parameter when attaching scripts to what I assume is going to be popup.html.
You'll need to check which environment you're currently in to determine if you need to add any references to the exports object to make them accessible from within the addon.
if(typeof(exports)!="undefined"){
exports.something=function(){...};
}
Had to go through the same scenario, but solution by jongo45 does not seem to work anymore. Somehow found a solution which worked for me. Posting below as it might help someone in need.
Below code obtains list of all files under "lib/subdir".
const fileIO = require("sdk/io/file");
const fspath = require("sdk/fs/path");
const {Cc, Ci} = require("chrome");
const currDir = Cc["#mozilla.org/file/directory_service;1"]
.getService(Ci.nsIDirectoryServiceProvider)
.getFile("CurWorkD", {}).path;
const listOfFiles = fileIO.list(fspath.resolve(currDir,'lib/subdir'));