Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Oct 16 18:26

    greenkeeper[bot] on @types

    (compare)

  • Oct 16 18:22

    greenkeeper[bot] on @types

    chore(package): update @types/r… chore(package): update lockfile… (compare)

  • Oct 16 17:37

    greenkeeper[bot] on @types

    (compare)

  • Oct 16 17:36

    greenkeeper[bot] on @types

    chore(package): update @types/r… chore(package): update lockfile… (compare)

  • Oct 16 15:45

    greenkeeper[bot] on webpack-bundle-analyzer-3.6.0

    (compare)

  • Oct 16 15:37

    greenkeeper[bot] on webpack-bundle-analyzer-3.6.0

    chore(package): update webpack-… chore(package): update lockfile… (compare)

  • Oct 15 18:58

    greenkeeper[bot] on @types

    (compare)

  • Oct 15 18:52

    greenkeeper[bot] on @types

    chore(package): update @types/r… chore(package): update lockfile… (compare)

  • Oct 15 12:02

    greenkeeper[bot] on cloudinary-1.16.0

    (compare)

  • Oct 15 12:01

    greenkeeper[bot] on cloudinary-1.16.0

    chore(package): update cloudina… chore(package): update lockfile… (compare)

  • Oct 14 21:37

    greenkeeper[bot] on @types

    (compare)

  • Oct 14 21:25

    greenkeeper[bot] on @types

    chore(package): update @types/r… chore(package): update lockfile… (compare)

  • Oct 14 21:06

    greenkeeper[bot] on @types

    (compare)

  • Oct 14 20:52

    greenkeeper[bot] on @types

    chore(package): update @types/r… chore(package): update lockfile… (compare)

  • Oct 14 09:28

    greenkeeper[bot] on fork-ts-checker-webpack-plugin-1.5.1

    (compare)

  • Oct 14 09:26

    greenkeeper[bot] on fork-ts-checker-webpack-plugin-1.5.1

    chore(package): update fork-ts-… chore(package): update lockfile… (compare)

  • Oct 04 21:27
    snyk-bot opened #160
  • Oct 04 21:27

    tirthbodawala on snyk-fix-f96b4c442444a1e10527567a57485937

    fix: package.json, package-lock… (compare)

  • Oct 04 21:27

    tirthbodawala on snyk-fix-f96b4c442444a1e10527567a57485937

    (compare)

  • Oct 04 06:28
    snyk-bot opened #159
Mayank Patel
@patelmayankce
@tirthbodawala , am i correct?
Tirth Bodawala
@tirthbodawala
@patelmayankce that is perfect for client side, but if you want to access cookies at server and client both let me share some code snipped:
I have used
universal-cookie
react-cookie
server.js
import React from 'react';

// ...other imports
import cookiesMiddleware from 'universal-cookie-express';
import { CookiesProvider } from 'react-cookie';
import Cookies from 'universal-cookie';
//... other code


export default class ProjectServer {
  constructor({ addMiddleware }) {
    addMiddleware(cookiesMiddleware());

    // This should always come last
    // addMiddleware(appMiddleware);
  }
 /**
   * Universal cookies helps get cookies into the system
   * with a very simple api. This wrapper should be applied last in the hooks
   * thus wrapping it around all the other components.
   */
  addUniversalCookies() {
    // Add cookie storage - universal cookies
    this.serverHandler.hooks.renderRoutes.tap(
      'AddCookieProvider',
      (
        {
          setRenderedRoutes,
          getRenderedRoutes,
        }: any,
        req: any,
      ) => {
        setRenderedRoutes(
          (
            <CookiesProvider cookies={req.universalCookies}>
              {getRenderedRoutes()}
            </CookiesProvider>
          ),
        );
      },
    );
  }
  addCookiesToLoadData() {
    this.serverHandler.hooks.beforeLoadData.tapPromise(
      'CookiesToLoadData',
      async (setParams, getParams, req) => {
        const cookies = new Cookies(req.headers.cookie);
        setParams('cookies', cookies);
      },
    );
  }

  apply(serverHandler) {
    this.serverHandler = serverHandler;

    // Universal cookies come at top level
    this.addUniversalCookies();
    this.addCookiesToLoadData();
  }
}
Tirth Bodawala
@tirthbodawala
---> client.js
import React from 'react';
import { CookiesProvider } from 'react-cookie';
import Cookies from 'universal-cookie';
// ...other imports

export default class ProjectClient {
  addUniversalCookies() {
    // Add cookie storage - universal cookies
    this.clientHandler.hooks.renderRoutes.tap(
      'AddCookieProvider',
      (
        {
          setRenderedRoutes,
          getRenderedRoutes,
        }: any,
      ) => {
        setRenderedRoutes(
          (
            <CookiesProvider>
              {getRenderedRoutes()}
            </CookiesProvider>
          ),
        );
      },
    );
  }
  addCookiesToLoadData() {
    this.clientHandler.hooks.beforeLoadData.tapPromise(
      'CookiesToLoadData',
      async (setParams) => {
        const cookies = new Cookies();
        setParams('cookies', cookies);
      },
    );
  }
  apply(clientHandler) {
    this.clientHandler = clientHandler;

    this.addUniversalCookies();
    this.addCookiesToLoadData();
  }
}
Once you do the above, all it is left is to utlize the cookies in loadData function as below:
loadData: async ({ match, updateSeo, cookies }) => {
    console.log(cookies.get('somestoredcookie'));
   // return whatever you like
}
With above you can achieve SSR cookie handling on server and client both.
also, as we added provider, the cookies can be used inside the components as well.
Mayank Patel
@patelmayankce

:thumbsup: Now I realize my mistake in client.js

import { Cookies, CookiesProvider } from 'react-cookie';

i am using Cookies form react-cookie package instead of from
import Cookies from 'universal-cookie';

and that's why i made custom preloader ;)
Thanks @tirthbodawala for correct me!!

Tirth Bodawala
@tirthbodawala
:+1:
Mayank Patel
@patelmayankce

to get the queryparam in client and server side i am process in beforeLoadData function using below way,

extraParams['queryParam'] = window.location.search && parseQueryString(window.location.search);

so is there any other way do you think/have ?

oongniel
@oongniel
Thanks @tirthbodawala ! I'll try this and let you know. I think it should work :)
oongniel
@oongniel
The above codes for cookies are working. Thanks @tirthbodawala. This would be useful on future projects as well.
Tirth Bodawala
@tirthbodawala
I understand
Mayank Patel
@patelmayankce
Hi @tirthbodawala
Tirth Bodawala
@tirthbodawala
Hi @patelmayankce
Yes. How can I assist today?
Mayank Patel
@patelmayankce
image.png
can we avoid this path from server in sw.js?
Tirth Bodawala
@tirthbodawala
Sure.
We can do that.
I will need to update @pawjs and ignore the variable for the same in sw.js
Mayank Patel
@patelmayankce
that's great!, Appreciate!
Tirth Bodawala
@tirthbodawala
I just completed upgrading the loadable component converted to TypeScript with 3 times more speed than before.
Mayank Patel
@patelmayankce
wow!!, it only requires to update @pawjs or any changes in an existing project?
Tirth Bodawala
@tirthbodawala
I am working on mv_typescript, converting whole project to TypeScript and have completed 80% of it, solving many many bugs and many performance improvements. I am sure you all will love the new upgrade with minimal changes in your current project setup.

Only one breaking change:

Whereever you define routes:

{
   path: '/',
   component: () => import('module'),
   layout: () => import('module-layout'),
}
So compoment and layout will compulsory need to be a function that returns import.
Mayank Patel
@patelmayankce
That's really good news :hero:
Tirth Bodawala
@tirthbodawala
That is the only breaking change. Everything else remains same and happens in the background.
Mayank Patel
@patelmayankce
ok let me try to understand, so layout is same as appshell right?
Tirth Bodawala
@tirthbodawala
Yes, but it is just a way to wrap compoments around it, it is more like component only.
App Shell is more stable though :)
layout is backword compatible support introduced in ReactPWA v1. Will depreciate in future release. but I will let it be there for now.
Mayank Patel
@patelmayankce
that's good way actually because right now i can only wrap the component by one Wrapper now i can per component!!
Tirth Bodawala
@tirthbodawala
Well yes you can, if layout is used more often, then I will not depreciate it :)
Mayank Patel
@patelmayankce
yeah I also not sure how often will use but let's see how it going to be useful
But really good to hear from you that we are continuously improving the core..
Tirth Bodawala
@tirthbodawala
yup. Great optimizations on way. Definitely increase application speed, What I am trying to achive here is reduce Main thread execution time and increase TTFI on page load.
Thanks to the team here they have helped a lot :)
Mayank Patel
@patelmayankce
if we achieve to reduce Main thread execution time that's awesome!!, I will be waiting for the new release
Tirth Bodawala
@tirthbodawala
Yup. It requires a lot of research and accuracy. I am trying to get it correct.
Mayank Patel
@patelmayankce

I will need to update @pawjs and ignore the variable for the same in sw.js

can be possible this to be done today?

Tirth Bodawala
@tirthbodawala
I am not sure. If you can wait till, Friday I will really appreciate that.
Mayank Patel
@patelmayankce
ok fine, I can wait
Tirth Bodawala
@tirthbodawala
Thanks @patelmayankce. I really appreciate your patience.
Mayank Patel
@patelmayankce
Hi @tirthbodawala , should I expect that change to be done today?
Tirth Bodawala
@tirthbodawala
Yes
Mayank Patel
@patelmayankce
Thx @tirthbodawala
Mayank Patel
@patelmayankce
hi @tirthbodawala , to which version should i update the pawjs to get the fix?