We Keep Coding

Dynamically loaded script is not using dynamically loaded css until I 'prettify' css in devtools source

I am experimenting with mounting an existing Ember app in a React app. I have a React component that loads the vendor/app .css and then the vendor/app .js, with an await between each load. The app shows up in the React component but it doesn't use any of the styles from the dynamically loaded css until I go into devtools/source, find the .css file, and click the 'prettify' widget ("{}"). Then it immediately repaints the screen with the css applied correctly.
I even tried doing a this.forceUpdate after the load.
Any idea what I'm doing wrong? Or a way of triggering the browser to reapply the css from within my component's javascript?
Edit: More details about how things are arranged - see the code I'm using to load the 'emberapp' files below.
The React App, which I'm still learning, does a webpack build when starting (I realize that's probably not descriptive enough but will update when I learn more). It runs a proxy server for the API wrapped around an express server that serves the local app. Might be relevant - the React app components import their css at the component level.
During yarn start, react-app/dist gets destroyed so after the start finishes rebuilding and re-webpacking, I cd into react-app/dist and do a ln /path/to/ember-app/dist/assets emberapp
The ember-app/dist/assets contains
emberapp.js
emberapp.css
vendor.js
vendorapp.css
I also have all of my svg's inlined and loaded through the index.html - they obviously don't load right now and I'm OK with that.
This is really just a temporary setup for end-to-end API testing. I was just really surprised that the css was ignored util I clicked something in devtools, and then was suddenly loaded. I thought it might be a 'known' behavior.
My current goal is to repackage my ember app into an npm package that I can include in the build of the react app and 'import' its app/vendor js/css.
I know this isn't a great solution but we've got a lot of time built into the Ember App and don't have time to fully re-write it in React. When we started the Ember App 'how will we merge this into another app when we are acquired' was not a consideration.
If anyone has any recommendations along embedding Ember, I'd be interested in that too.
const appendScript = scriptToAppend => {
return new Promise(resolve => {
const _wrap = () => {
console.log('_script onload wrap');
resolve();
};
const script = document.createElement('script');
script.setAttribute('src', scriptToAppend);
script.setAttribute('async',true);
script.onload = _wrap;
document.body.appendChild(script);
});
};
const appendCss = cssToAdd => {
return new Promise(resolve => {
const _wrap = () => {
console.log('appendCss onLoad handler');
resolve();
};
const elem = document.createElement('link');
elem.setAttribute('rel', 'stylesheet');
elem.setAttribute('type', 'text/css');
elem.setAttribute('href', cssToAdd);
elem.onload = _wrap;
document.getElementsByTagName('head')[0].appendChild(elem);
});
};
export class MyWrapper extends React.Component {
async componentDidMount() {
await appendCss(`${EMBED_SCRIPT_PATH}${VENDOR_SCRIPT_NAME}.css`);
await appendCss(`${EMBED_SCRIPT_PATH}${SCRIPT_NAME}.css`);
await appendScript(`${EMBED_SCRIPT_PATH}${VENDOR_SCRIPT_NAME}.js`);
await appendScript(`${EMBED_SCRIPT_PATH}${SCRIPT_NAME}.js`);
this.forceUpdate();
}
}

How to use Vue-plugin-load-script

I am trying to load a custom JS file into my vue and I recently came across vue-plugin-load-script and installed it. I configured it as below:
In my main.js I have
Vue.loadScript("file.js").then(() => {
console.log("SUCESS")
}).catch(() => {
console.log("FAILED")
})
however, the npm page does not show how to use your functions in your views. For instances, lets say the file.js had a function called calculateTime(), and I have a view called Home.vue. How would I call the calculateTime() function from my
<script>
export default {
methods : {
** Trying to put function here **
}
}
</script>

If you have you JS File local, you can import it, like:
import * as localA from "./../../theFile.js"; /*put your path to file.js*/
And after that you can use all methods from theFile.js by writting in a method from your vue Component
methodVue: function (...) {
localA.theMethod(param); /*the Method is declared in theFile.js*/
return;
}
And in your theFile.js your method that you want to use need to be written like that
export function theMethod(param) {
...
}

Do you have a specific reason to use this library? Looking at the function all it does is add a script tag to the DOM if it is not already there and resolve the promise when it loads GitHub link. You could just as well use import * from 'file.js' at the top of the vue file. Then use the functions from that file as usual. The bundler should be able to figure out if the file is imported in multiple places and add it only once.

How to run a specific jquery script after each page load?

My client sent me an HTML template that heavily relies on jQuery. The app itself runs on nuxt. I have a js file that contains a whole lot of $(function(){...}). Now I don't know how to run this file on each page transition.
So far, I have tried:
Creating a plugin inside plugins dir that looks like:
export default async ({ app }) => {
app.router.afterEach((to, from) => {
require('~/static/js/base-init.js');
})
}
here base-init.js has all those jquery code
Adding mounted (inside default.vue layout) but that doesn't work either.
Does anyone have a clue?

If you want to use your jquery file on nuxt just do this
Inside your nuxt.config.js add
npm i jquery
plugins: [
'~plugins/my-jquery-code.js'
]
And inside plugins/my-jquery-code.js
if (process.BROWSER_BUILD) {
const $ = require('jquery')
$(function() {
console.log('document ready!');
// do whatever you want with html and jquery
})
}
I'm refering to this link => https://github.com/nuxt/nuxt.js/issues/356
its work for me !
Good Lucks.

Meteor: inject html into client-side file on startup

Using the SSR and inject initial packages,
I currently have the following server-side code:
Meteor.startup(function() {
.....
Inject.rawHead('importList', function(imports) {
return imports = Blaze.toHTML(Template.imports);
});
});
This injects a list of html imports into the head, and works perfectly.
I'd like to modify the function so that the code is injected into /client/imports.html instead of into the head... can this be done?

Looks close to this solution. Try this in the client folder of Meteor or use if(Meteor.isClient) for compactness:
Inject.rawHead('importList', function(imports){
return imports = Blaze.toHTML(Template.imports)
})
Meteor.startup(function(){
//...
})

dojo using custom module from custom cdn source

we can use dojo toolkit after reference dojo script in our html page.
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/dom"], function (dom) {
var button = dom.getById("ok");
});
</script>
we can use "dojo/dom" in our script.
I want to create my own javascript module in my server and use it everyvhere.
For example I have a domain http://mydomain.com/api/v1/app.js
I should use this app.js like this.
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
<script src="//mydomain.com/api/v1/app.js"></script>
<script type="text/javascript">
require(["dojo/dom","app/something"], function (dom,something) {
var st = new something();
});
</script>
I created app.js file like this but did not work.
declare(["dojo/_base/declare"],
function (declare) {
return declare(null, {
constructor: function () {
console.log("hello");
}
});
})
How should I create my app.js file?

There are multiple issues here. The first one (and the real issue) is that Dojo will look relatively for your modules. This means that it will look somewhere on the CDN for your app module (which it obviously can't find).
To change the location of a package you have to configure the package section of the Dojo config. In your case that would be:
<script type="text/javascript">
dojoConfig = {
packages: [{
name: 'custom',
location: 'http://mydomain.com/api/v1/'
}]
}
</script>
Then you can get your module using:
require(["custom/app"], function(app) {
// Do something
});
Important: Make sure that the Dojo config is loaded before the Dojo loader (dojo.js). So you have to put this <script>-tag above the dojo.js script tag to make it work.
Another issue is that in app.js you have to use define() as the first statement and not declare(). For example:
define(["dojo/_base/declare"],
function (declare) {
return declare(null, {
constructor: function () {
console.log("hello");
}
});
})