I couldn't find any detailed resource about the preload script.
I don't understand after which event (did-finish-load/did-start-load/will-navigate/did-navigate ....) does the preload script begin to run.
I tried searching for detailed preload explanation but all I could find were minimal documents that explain only the minimum.
I would appreciate such a document as well.
electron-quick-start
https://github.com/electron/electron-quick-start
According the Electron Quick Start Guide, preload.js is
preload.js - A content script that runs before the renderer process loads.
But depending on what you wish to accomplish within your preload.js script, for example accessing the DOM of the your html page, you will have to wait till your page has loaded...
Example:
// When document has loaded, initialize
document.onreadystatechange = (event) => {
if (document.readyState == "complete") {
// Do something useful here...
}
};
Related
First, I'm much more of a Rails back end person. The JS world today scares me. I know this is a super basic question, but I've racked my brain for a solid couple days trying to figure, this out. I don't know why I can't put a CDN link somewhere in my HTML and get all the JS I need. Those were the good ol' days...
Anyway, I have a nearly fresh Rails 7 app that uses import-maps (do they all?) and I'm trying to get a dropdown "component" from https://tailwindui.com/preview (the first navbar from that page) working. It starts popped open, no hover effects, and is unable to close. My goal is to use more of those components, but all the docs I read seem to leave me thinking there's a missing piece I'm not understanding.
Gemfile contains gem "tailwindcss-rails", "~> 2.0" # github: "rails/tailwindcss-rails"
app/assets/stylesheets/application.tailwind.css:
#tailwind base;
#tailwind components;
#tailwind utilities;
app/assets/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
// what else needs to go here???
config/tailwind.config.js
// const defaultTheme = require('tailwindcss/defaultTheme')
// module.exports = {
// content: [
// './app/helpers/**/*.rb',
// './app/javascript/**/*.js',
// './app/views/**/*'
// ],
// theme: {
// extend: {
// fontFamily: {
// sans: ['Inter var', ...defaultTheme.fontFamily.sans],
// },
// },
// },
// plugins: [
// require('#tailwindcss/forms'),
// require('#tailwindcss/aspect-ratio'),
// require('#tailwindcss/typography'),
// ]
// }
What else do I need to put where to get this working? Thank you kindly for filling in the missing pieces in my brain.
I know it's been a while since you've asked this question, yet I've been fighting this thing recently and I'd like to talk about what I've found, in case anybody's wondering.
So, Tailwind UI provides components in 3 variants: HTML, React, and Vue. If you pick HTML, you'll have to figure out how to write your own JavaScript. this answer mentions that, but I'll elaborate on that point, though.
Aside from mentioning "do your own JavaScript" on their website, they also give us instructions how exactly we should style our components when we add JavaScript:
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
Yet, that doesn't really tell us that we must code it ourselves. Surely, there's something we're missing, right? Turns out, not really.
Basically, the "dynamic" aspect of the layout is implemented via Headless UI, a set of components developed & maintained by the same people. It only has three public packages: #headlessui/vue, #headlessui/react and #headlessui/tailwindcss.
I ran npm i #headlessui/tailwindcss and added #headlessui/tailwindcss to the plugins, but it didn't really do much. If you inspect the source code for the package, you'll find a pretty tiny index.js which only adds some utility classes. So that didn't help and I had to scratch it.
So far it seems the most viable option is to grab a React or Vue version of the template and integrate those into your pipeline. Otherwise you'll have to write a bunch of JS to basically reimplement headless UI yourself.
I'm still looking for an importmap-based solution to integrate Vue, while webpack should be pretty much straightfoward.
There is no JavaScript in their HTML code. On TailwindUI homepage, they explain:
Accessible, interactive examples for React and Vue powered by
Headless UI, plus vanilla HTML if you’d rather write any necessary JS
yourself.
So I guess in this case you have to write the necessary JS yourself.
In my Cypress test,
I need to test a link which downloads a .txt, .xlsx and a .zip file when clicked, but when I use "click()" to click the hyperlink, it starts a page load and expects a new action to happen as a result of clicking a link.
As an alternative to this I tried using the cy.downloadFile() to download the files directly through the link but the link I am using is dynamically generated hence I am unable to use that as well. Hence I want to store the newly generated link in the variable and then use it in cy.downloadFile() every time I run the test.
Are there any other ways to test a hyperlink or how to store the dynamically generated link every time the test is run?
Hi there i been through this problem before.
I think it is the same scenario where the cypress test runner just keep waiting page load event and not go to the next test command while file are successfully downloaded.
Add custom cy.window event to listen the click event and add timeout to "force" reload current page, you need to tweak the timeout value so it suitable for your test.
it.only('tes button download', ()=> {
// visit url
cy.visit("/spmb/list_nilaiseleksi");
cy.get('#wrap-button > .btn').click()
//download
cy.window().document().then(function (doc) {
doc.addEventListener('click', () => {
setTimeout(function () { doc.location.reload() }, 5000)
})
cy.get(':nth-child(9) > .col-md-12 > .btn').click()
})
})
More details and discussion available here on cypress github issue :
https://github.com/cypress-io/cypress/issues/14857
I found a way to store the link of the element I want to click. Since I am able to store the link, I am able to solve the requirement by using cy.downloadFile().
cy.get('#selector', {timeout: 15000}).then(($input) => {
cy.downloadFile($input.attr('href'),'cypress/downloads','filename.csv')
});
For me, the problem was resolved after I added the download attribute to the link, This is changing the element in the DOM, but it keeps the solution simple:
cy.get('[href="download?type=php"]')
.then((el) => {
el.attr('download', '');
})
.click();
I've created a script using electron-link. Within the links are basic requires needed for electron i.e:
function get_app() {
return app = app || require("./node_modules/electron/index.js").app;
}
when running the script through electron I get the below error:
"To use Node's require you need to call snapshotResult.setGlobals first!"
I've attempted to add this line to many areas without much affect. is there a correct area to place this?
Figured it out. I needed to wrap my main.js file in a function and export that function. then I can call the function after calling the .setGlobals function.
I am building Firefox extension, that creates single XMPP chat connection, that can be accessed from all tabs and windows, so I figured, that only way to to this, is to create connection in javascript module and include it on every browser window. Correct me if I am wrong...
EDIT: I am building traditional extension with xul overlays, not using sdk, and talking about those modules: https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules
So I copied Strophe.js into js module. Strophe.js uses code like this:
/*_Private_ function that creates a dummy XML DOM document to serve as
* an element and text node generator.
*/
[---]
if (document.implementation.createDocument === undefined) {
doc = this._getIEXmlDom();
doc.appendChild(doc.createElement('strophe'));
} else {
doc = document.implementation
.createDocument('jabber:client', 'strophe', null);
}
and later uses doc.createElement() to create xml(or html?) nodes.
All worked fine, but in module I got error "Error: ReferenceError: document is not defined".
How to get around this?
(Larger piece of exact code: http://pastebin.com/R64gYiKC )
Use the hiddenDOMwindow
Cu.import("resource://gre/modules/Services.jsm");
var doc = Services.appShell.hiddenDOMWindow.document;
It sounds like you might not be correctly attaching your content script to the worker page. Make sure that you're using something like tabs.attach() to attach one or more content scripts to the worker page (see documentation here).
Otherwise you may need to wait for the DOM to load, waiting for the entire page to load
window.onload = function ()
{
Javascript code goes here
}
Should take at least diagnose that issue (even if the above isn't the best method to use in production). But if I had to wager, I'd say that you're not attaching the content script.
I have written dust js I call render function from my jquery local function.
Anyone please example how dust render get back. Do I need to call in onload function or not?
dust.render("tmp_skill", json_object, function(err, html_out) {
//HTML output
$('#page').html(html_out);
console.log(html_out);
});
your code is ok, you can call the render method at any time. if you call it in the onload, you have to compile and load that template (tmp_skill) in the dust cache previously.
the steps to render dust are:
1) compile the template
2) load it to the dust cache with a name.
3) render the template
SO
var compiled = dust.compile("Hello world {name}", "tmp_skill");
dust.loadSource(compiled);
dust.render("tmp_skill", json_object, function(err, html_out) {
//HTML output
$('#page').html(html_out);
console.log(html_out);
});
Anything you need you can read our wiki. you will find a lot of documentation and examples here: https://github.com/linkedin/dustjs/wiki
I suppose this question is related to your previous question, How to write dustjs in php code without nodejs
I tested your code and it works just fine.
do check your browser's console to see if there are errors after loading the page.
also, do use the linkedin fork of dust: https://github.com/linkedin/dustjs - it's much more actively developed.