we are using webcomponents in legacy project and we have an issue that zone.js patches all ajax calls which is quite bad since we don't do any ajax call by webcomponent since project limitations.
I know that it's recommended to disable zone.js in webcomponents like
platformBrowserDynamic()
.bootstrapModule(
AppModule, { ngZone: 'noop' })
.catch(err => console.log(err));
but we don't want to do it since our webcomponents is very complicated and we don't want to do change detection manually.
Is there a way how to disable only ajax patching by zone.js?
Related
I'm wondering if it is currently possible to have Supabase work with both server + client rendering. It seems as though we must generally choose one or the other, but NextJS allows one to define SSG (server-side generated), SSR (server-side rendered), and CSR (client-side rendered) pages.
For example, the webapp example for NextJS + Supabase seems to indicate that we should SessionContextProvider; however, wrapping the entire app in this context provider requires useState, which to my understanding will render the entire app as client-side rendered.
Supabase has a server-side rendering solution, but then this seems to require us to manually handle components/pages that we want to render client-side. For each component that requires authentication, we would need to explicitly make a session call, which seems unnecessarily excessive.
With the NextJS-13 beta, we can explicitly define server components, and it seems Supabase has a beta solution too. However, I was wondering if it is currently possible to do this without the beta?
Wrapping the entire app in this context provider requires useState, which to my understanding will render the entire app as client-side rendered.
No, it won't cause the entire app to be CSR. The use of React hooks on pages folder components (including _app.js) won't cause the page to be client-side rendered, it will still be pre-rendered (as long as there are no blocking data requirements, e.g. using getServerSideProps or getInitialProps in the case of _app.js, see Automatic Static Optimization) and then sent to the client to be hydrated. This is also true for pages/components marked as client-components on Next.js v13 app directory feature, they will still be pre-rendered.
The only way in which Next.js won't server-render a component is if using dynamic imports and setting ssr to false (doesn't apply for page components).
How can I make sure that the users of a Blazor client app always load the latest version of the code? I now have to instruct them to clear their browser caches every time a new version is published. This hampers the "release early and often" approach and I simply cannot believe that any serious blazor development is at all possible without checking for new versions at start up (what click once applications do).
I found this solution on https://learn.microsoft.com/en-us/answers/questions/214424/blazor-wpa-not-updating.html
/**
* Register Service Worker
*/
navigator.serviceWorker
.register('/***.js', { scope: '/' })
.then(() => {
console.log('Service Worker Registered');
});
This js file can contain a cache version like below.
const CACHE_VERSION = 1.0
But that is too cryptic for me? How can I implement the solution stated above as in "for dummies"?
The answer is (once you know it) quite simple:
In the index.html under the wwwrootfolder you will find:
<script>navigator.serviceWorker.register('service-worker.js');</script>
Below this write:
<script>navigator.serviceWorker.register('version.js');</script>
And create a "version.js" file in this folder with as single content:
const CACHE_VERSION = 1.0
Increment the 1.0 value each time you want your clients to load the new version.
It looks like this:
Once your clients have managed to clear their cache and load the version that contains this code, a simple reload or shut down and restart of the browser will make the new version active.
Svelte’s JavaScript server-side rendering API is described here: https://svelte.dev/docs#run-time-server-side-component-api
However, when I do this in TypeScript, there is no method App.render().
Do I need to change rollup.config.js (e.g. compilerOptions.generate)?
Do I need two versions of this file – one for the server and one for the client?
Can anyone help? Thanks!
Svelte Server-side component API is not directly accessible via import. Instead, you need to build the production with vite options --ssr. Otherwise, you're importing the component class extended SvelteComponent and that class has no render function.
You can check out this guide for Production SSR build: Vite Server-Side Rendering.
You don't need to set up the SSR Dev server or inject /#vite/client because svelte-hmr already does the magic under the hood.
The SSR Bundle options ssr.noExternal doesn't seem to work for me. So that I need to convert all Svelte components import into static import for a production build.
The official template relies on rollup-plugin-svelte, where similar question was asked. Essentially compiling in SSR mode does not automatically generate any HTML, in fact some post processing is required. The Svelte Server-side component API can be used for that.
There are several solutions out there for SSR:
SvelteKit
Routify
ElderJS
I am exploring the development with Web Components, more specifically, it's Fast. However, it would take a long time to rebuild the project and refresh the page, then verify for the CSS modification. Is there any CSS hot reload solution for the Web components(Fast)? (I am using Webpack)
There is no out-of-box solution for HMR with Web Components in General. It really depends on how you are using Web Components. Are you relying on just Custom Elements and using CSS-in-JS with it or fully using ShadowDOM with encapsulated styles and the underlying framework to declare those styles.
You can consider building your own HMR driver. To do this, you need all the three things in order for enable HMR - the bundler (assuming Webpack already has it), the server (webpack's dev server or middleware) and your own application.
In you own application, you would add the driver as:
// RUN SOME BOOSTRAPPING CODE
// HMR interface
if (module.hot) {
// Capture hot update for a particular module
module.hot.accept("./style.css", () => {
// Logic to remove old stylesheet
});
}
If you look at the above code, you can notice that it is almost impossible to change StyleSheet if it is defined within the shadow root for each component. If you have some global CSS which gets added to top Document then it simpler to implement HMR by manipulating StyleSheet objects from the javascript. At least, you will get partial HMR. For other activities, you can fall back to automatic full page refresh.
I am developing a widget, and am using extJS framework (along with stomp,orbited servers). It requires 5 different Javascript files. To avoid impacting load time for users, I am trying to load them asynchronously.
Through some callback stacks, I have managed to asynchronously load them in order they are required.
However, the widget does not work at all in the asynchronous case. I then copied the "modified" resultant HTML DOM from Chrome's developer tools, and created a static HTML file.
The static file works. I am printing few alerts when different JS files are loaded in both cases. The order of these alerts is the same.
How do I detect and fix the error. Stumped after lot of debugging.
(Link removed as they were on production server. Managed to detect the issue and find a workaround - please see answer below - keeping for anyone's reference).
The problem is that Ext.onReady is called as soon as document is ready, which is BEFORE any other scripts are loaded asynchronously.
Thus, the initialization code was not getting called. I manage to work it around by calling Ext.each("dummy args", initialization_function, this) in the last javascript that is loaded. This made things work for me.