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
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",
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.
What is the correct way to install easydropdown into Rails 6?
I ran yarn add easydropdown to add it to my app. Seems ok; I verified that my browser sees it in the js sources.
After this, not totally sure what to do. In app/javascripts/packs/application.js, I've tried adding these lines. None cause errors.
require('easydropdown')
import easydropdown from 'easydropdown'
import Easydropdown from 'easydropdown' - does case matter?
But in my page and js console, I keep seeing easydropdown is not defined.
What am I missing?
When using webpack the require statements are not global so you need to require the library in the file in which you are using it.
In your application.js pack file add the following:
import easydropdown from 'easydropdown';
document.addEventListener("turbolinks:load", () => {
easydropdown('.easydropdown')
});
as long as your selects have class of "easydropdown" this should make them all work.
Your styles need to be added either in your assets or imported in this pack file as well.
Thanks to #ben-trewern for helping me get here.
For Rails 6, here's what works for me:
yarn add easydropdown to install it into your Rails App
Append loader code to app/javascripts/packs/application.js.
I've found 2 ways that work. I honestly don't know which is better or why.
Option 1: using import
import easydropdown from 'easydropdown';
window.easydropdown = easydropdown;
Option 2: using require
const easydropdown = require('easydropdown')
window.easydropdown = easydropdown.default
Now you can use easydropdown functions in your views (including <script> tags).
Bonus help: Are you using Stimulus JS?
If your dropdown is connected to a Stimulus controller, here's some tips:
I found that I still had to assign window.easydropdown (above) in order to call EDD in my controller code.
Seems the most straightforward thing to do is to call easydropdown.select('#my-select') in my Stimulus controller's initialize() method, e.g.
export default class extends Controller {
static targets = [...]
initialize() {
easydropdown.select('#region-switcher`);
...
}
...
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.
Context
I try to move assets in our application to webpack using Webpacker gem. Application is very big, so I need to do it partially.
What did so far...
I successfully managed to call the script using javascript_pack_tag
I export a super simple module:
# javascript/src/javascript/test.js'
const Direction = {
log_to_console: function(){
console.log('test');
}
};
export default Direction;
Then import it in the application entry point
# javascript/packs/application.js
import Test from '../src/javascript/test.js'
Test.log_to_console();
Finally rendering it in the layout:
# app/views/application.slim
= javascript_include_tag 'application'
The result is: "Test" string visible in the browser console.
The problem
Currently in the whole application we use Modules in views like this:
# app/views/assets/javascripts/test.coffee
log_to_console = ->
console.log('test');
#Test = { log_to_console }
# app/views/some/template.slim
javascript:
Test.log_to_console()
But after moving module to webpack I can't access the Test module anymore.
So my question is:
How to configure webpacker gem OR refactor the code above to make the log_to_console() method available in views/browser inspector?
Ideally it would be if we could also access them in old javascript files compiled by sprockets.
I figured out that solution for now. May be helpful for anyone that encounters that problem.
If anyone finds better solution, I would be glad to see it here ;).
For now all our modules/libraries that are needed to be visible in views/other coffee files, I just set as globally available via the window object.
import Foo from '../src/javascript/foo.js
window.Foo = Foo
I know it's ugly anti pattern, but works well as temporary solution until we update our scripts behave more like independent packs.