Recently installed the project noted here: https://developer.salesforce.com/blogs/2020/11/how-to-use-apex-natively-with-svelte-vue-and-preact-within-lwc.html to test a theory on using Preact in a Lightning Web Component. Observed that in the Preact component any click in the component fires the onclick function for the first element rendered in the component (with an onclick property), any additional clicks or clicking directly on other elements (with or without an onclick properties) only fire the function for the first element. This behavior tracks with a separate project I've been working on that includes Preact. Does anyone know what would cause this and/or have suggestions on ways to address?
I'm assuming this is related to the LWC wrapper and how it redirects browser events to be processed, but I'm out of my depth in terms of fully debugging that path.
I ran this by the author of the linked blog post and we confirmed this doesn't work in an actual org, though it works fine in a local dev sandbox. Likely culprit is locker service, but neither the author nor I was willing to try to verify that, and there wouldn't be a whole lot to be done about it even if it were confirmed.
Short answer, Preact doesn't work in LWC framework currently.
Related
I have an ecommerce application in NextJS and I have a problem with my main menu. In fact, if I use the <Link> tag of Next, with or without the "prefetch" param, I still have the links that are prefetch (either on hover or if the item is in the viewport). My pages are loaded with getStaticProps.
I would like to use <Link> to keep all of benefits of Next and SPA, but I think that prefetching all of my products page before I need them destroys the performance of the backend.
Do you think I can use router.push to do this part of my app?
By using router.push instead of Link Component, your app would lose its capabilities such as
SPA (because it would redirect to a new page) and
SEO (because it cannot be
detected by crawlers)
Ideally for an e-commerce platform, i think it would be best to utilize the Link component and not overthink about your prefetch concern because these built in Components by nextJs are already optimized by the Vercel Team.
We should also only use router.push when Link Components are not enough. A good example of this would be upon clicking a button we want to trigger other frontend/backend functions and then redirecting to another page.
function handleClick(){
randomFunction();
anotherRandomFunction()
router.push('<random_link>')
}
Previously working code that downloads a csv file from our site, now fails. Chrome, Safari and Edge don't display anything helpful except "Blob Blocked", but Firefox shows a stack trace;
Uncaught TypeError: Location.href setter: Access to 'blob:http://oursite.test/7e283bab-e48c-a942-928c-fae0907fdc82' from script denied.
Then a stack dump from googletagmanager
This appears to be a fault in the tagmanager code introduced in the last couple of weeks.
The fault appears in all browsers and is resolved immediately by commenting out the tag manager. The problem reported by a customer on the production system, and then found on both staging and locally. The customer advised they had used the export function successfully 2 weeks ago.
The question really is, do Google maintain a public facing issues log for things like the tag manager?
It's not about GTM as a library really, it's about poor user implementation. It's not up to Google to check for user-introduced conflicts with the rest of the site's functionality.
What you could do is go to GTM, and see what has been released in the past two weeks. Inspect things and look for anything that could interfere with the site's functionality. At the same time - do the opposite, see all the front-end changes introduced during this time frame by the web-dev team.
Things to watch for is mostly unclosured JS deployed in custom HTML tags. junior GTM implementation specialists like to use the global space, taking the global variables, often after the page is loaded, thus overwriting front-end's variables.
Sometimes, people would deploy minified unclosured code to the DOM, thus chaotically taking short var names. To the same end.
This is likely the easiest and most common way for GTM to break front-end. There definitely still are many ways to do so besides this though.
If this doesn't help, there's another easy way to debug it: make a new workspace from Default (or whatever is live), go into the preview mode and confirm that the issue still happens. Now start disabling newest created fired tags one by one and pinpoint which one causes the issue.
Let us know what it was.
Solution was to replace the previous tag manager code with the latest recommended snippet
Thanks for your time.
I am working on a complicated next project for work. I understand it to be a static site generator and the assets (icons for buttons) used on the page are gathered via a pre build script and stored in the public directory of this project. This next project then generates forms, which i am observing unexpected behaviour on.
When looking at the network tab and loading one of the forms the page requests the icons and loads / renders my page, at completion of the load a GraphQl request is made for background data.
This should now be the finished state, there is no change to the page and there is no need for re-render / the components these icons sit within are not updated and a re-render does not happen, however...
A new network request is made and the assets/icons in my components flicker/reload, by what i think is by the framework - why is this new request made? Is this something that the framework is doing? Initiator looks like this - so i think so, but can't see any reason / documentation for it.
_next/static/chunks/framework-2191d16384373197bc0a.js
Finally have a answer. Bad architecture in the application.
This was not simply limited to the images. We had a stateContext which we have been dispatching to for everything, that context is what is causing the re-render, its not state so each update re-renders everything at a global level so each button press / graphql query response caused a re-render.
The re-render was not paid any attention to until we throttled and noticed the flickering of these icons.
Specifically, how does it manage to serve different versions of the same site, with no access to the server or anything, just a script on the head?
The way all client-side testing platforms work is by applying the changes by executing JS on the top of the existing HTML of the page.
Basically, these platforms provide WYSIWYG editor that allows you to make the changes on any site. These changes can range from simple changes like color/text/layout to more complex changes where you can modify the HTML content of any element altogether.
Every change done via visual editor generates a corresponding JS code that will get executed on the fly when someone participates in one of the variants.
To summarize, the flow will be:
Inside the platform
Place the JS snippet of the platform on the site(should be inside the head tag to avoid any flickering).
Create the test and the variants in the platform using the visual editor or by writing your own code inside the code editor.
Run the test.
On the website
The user visits the site and the respective platform's JS snippet executes.
Snippet connects to the nearest CDN and brings back the test configuration along with the platform's library.
The library executes quickly and applies the changes to the respective elements by firing the JS snippet generated during the variant creation.
The library sends a hit to track the user along with variant info inside the platform reporting.
You will get the stats in real-time and will get to know which variant performed the best.
My web-app records users via webcam and microphone. I want to use HTML/JS for the controls and content, so I created two separate Flex modules:
* A "Webcam Setup" module that lets you choose your camera and mic input devices
* A "record" module that lets the user record and submit the recording
When I embed either of these on the page, since they access the user's Camera/Mic object, Flash shows the Privacy dialog that says "[mysite] is requesting access to your camera and microphone. If you click Allow, you may be recorded."
The problem is, if I answer Yes in the Setup module, and later add the Record module to the page using Javascript, it again shows the Privacy dialog.
Is there a way to avoid the second privacy popup?
I would think that saying "Yes" for [mysite] would store that permission for at least that session, but apparently not.
What I've tried
I tried combining them into one SWF, adding it to the page once and moving the DOM element with jQuery's append() function when needed. When I move it, however, it reloads and asks me again.
Imagine if [mysite] was, say, blogger.com or livejournal.com (or, if it were still around, geocities.com). Would you want a "yes" response on that site to be good for every page under that domain?
Rememeber, just because you promise (cross your heart & hope to die) not to abuse the security hole you request, doesn't mean they can allow you to have that security hole.
Eventually, I found a usable workaround, similar to what I originally tried (above).
I combined the setup and record modules into one SWF. I first show the setup screen. When the user hits the Continue button on my page, Javascript calls a function in the SWF to swap to the Record screen.
I then move the <div> containing the Flash object to another location on page using absolute positioning, and resize the object.
Previously, I was trying to use jQuery's append() function to move the div within the DOM, and that was causing the SWF to reload. Just changing position and size does actually work.
You could build the "record" component to simply send and receive signals using an API you've created for your "setup" component (which has already been authorized, meaning one auth & two swfs) by using the LocalConnection class:
http://livedocs.adobe.com/flex/3/langref/flash/net/LocalConnection.html
This seems far closer to best practice than the other implementations mentioned, which smell a bit hacky and would probably confuse anyone who may inherit the codebase in the future.