How to use serialize-javascript - 10 common examples

function getScriptLoader ({vendor, entryPoint, loadjsConfig}:Object) {
  // eslint-disable-next-line quotes
  const scriptLoader = `
    var config = ${serialize(loadjsConfig)};
    var loadjs=function(){function e(e,n){e=e.push?e:[e];var t,r,o,i,c=[],s=e.length,h=s;for(t=function(e,t){t.length&&c.push(e),h--,h||n(c)};s--;)r=e[s],o=u[r],o?t(r,o):(i=f[r]=f[r]||[],i.push(t))}function n(e,n){if(e){var t=f[e];if(u[e]=n,t)for(;t.length;)t[0](e,n),t.splice(0,1)}}function t(e,n,r,o){var c,u,f=document,s=r.async,h=(r.numRetries||0)+1,a=r.before||i;o=o||0,/\.css$/.test(e)?(c=!0,u=f.createElement("link"),u.rel="stylesheet",u.href=e):(u=f.createElement("script"),u.src=e,u.async=void 0===s||s),u.onload=u.onerror=u.onbeforeload=function(i){var f=i.type[0];if(c&&"hideFocus"in u)try{u.sheet.cssText.length||(f="e")}catch(e){f="e"}return"e"==f&&(o+=1,o

resolver: createResolver(fetcher),
      render
    });

    //Run authentication
    if (authMiddleware) {
      let res = await authMiddleware(passport, ctx, next);
      if (!ctx.isAuthenticated()) return next();
    }

    //return if not found
    if (status !== 200) return next();

    //Serialize Relay payload
    if (process.env.GRAPHQL_ENDPOINT !== undefined)
      var relayPayload = serialize(fetcher, { isJSON: true });
    else var relayPayload = null;
  } catch (err) {
    return next();
  }

  ctx.status = 200;

  // Use custom render function if passed
  if (typeof RENDER_HTML_FUNCTION !== "undefined")
    ctx.body = RENDER_HTML_FUNCTION({
      element,
      clientStats,
      relayPayload,
      staticFiles
    });
  else

const HTMLComponent = ({css, asyncState, initialState, assets, i18n, app}: args) => {
	const stringifiedAsyncState: string = serealize(asyncState)
	const stringifiedState: string = serealize(initialState)
	const stringifiedI18N: string = serealize(i18n)
	const wrapFuncs = {
		css: ({path}) => ``,
		js: ({path}) =>
			``
	}
	const assetsOrdered = ['manifest', 'vendor', 'client']
	const getTags = assets => funcs => ext => {
		// sort assets to be injected in right order
		// const assetsOrdered = ['manifest', 'vendor', 'client']
		return Object.keys(assets)
			.filter(bundleName => assets[bundleName][ext])
			.sort((a, b) => assetsOrdered.indexOf(a) - assetsOrdered.indexOf(b))
			.map(bundleName => {
				const path = assets[bundleName][ext]
				return funcs[ext]({path})
			})

if (error) {
        reject(error)
      } else if (redirectLocation) {
        resolve({redirectLocation})
      } else if (!routerState) { // 404
        resolve({notFound: true})
      } else {
        store.dispatch(hydrate({
          group: req.group,
          subscriptions: req.subscriptions,
          leaderboard: req.leaderboard,
          connectedAccount: req.connectedAccount,
          homepage: req.homepage
        }));

        const initialState = serialize(store.getState());

        const html = renderToString(
          
            
          
        );

        resolve({
          url,
          html,
          initialState
        })
      }
    }));
  })

// The order in which the html head elements should be rendered.
  const headOrder: Array = [
    'title',
    'base',
    'meta',
    'link',
    'script',
    'style',
  ];

  // Render the html as a string and collect side-effects afterwards.
  const apiUri: string = JSON.stringify(env.API);
  const apiVersion: string =
    (env.API_VERSION && JSON.stringify(env.API_VERSION)) || '';

  const asyncState = serialize(asyncContext.getState());

  const renderedCss: string = styleSheet
    .getStyleTags()
    .replace(/(?:\r\n|\r|\n)/g, '');
  const helmetOutput: Object = Helmet.renderStatic();
  const htmlAttributes: string = helmetOutput.htmlAttributes.toString();
  const htmlHead: string = headOrder
    .map((key: string): string => helmetOutput[key].toString().trim())
    .join('');

  // Start profiling of the initial state extraction.
  logger.profile('Extracting initial state');

  const initialState: string = serialize({
    ...reduxStore.getState(),
    apollo: apolloClient.getInitialState(),

}, (err) => {
        if (err) {
            if (err.statusCode && err.statusCode === 404) {
                next();
            } else {
                next(err);
            }
            return;
        }

        debug('Exposing context state');
        const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

        debug('Rendering Application component into html');
        const markup = ReactDOM.renderToString(createElementWithContext(context));
        const htmlElement = React.createElement(HtmlComponent, {
            //clientFile: env === 'production' ? 'main.min.js' : 'main.js',
            //use main.js for both dev and prod modes
            clientFile: 'main.js',
            addAssets: (env === 'production'),
            context: context.getComponentContext(),
            state: exposed,
            markup: markup
        });
        const html = ReactDOM.renderToStaticMarkup(htmlElement);

        debug('Sending markup');
        res.type('html');

props.mainScript = settings.web.assets.mainScript();
  props.revAsset = settings.web.assets.revAsset.bind(settings.web.assets);
  props.trackingSnippet = config.analytics.snippet;
  props.browserConfig = settings.web.browserConfig;
  props.appManifest = settings.web.appManifest;
  props.otherStyles = settings.web.css.other;
  props.swRegistrationScript = settings.web.assets.swRegScript();
  props.swMainScript = '/' + settings.web.assets.swMainScript(true);
  props.polyfills = settings.web.polyfills;

  debug('Creating app state');
  state = app.dehydrate(context);
  state.analytics = config.analytics.globalRef;
  state.timestamp = Date.now();
  props.state = `window.App=${serialize(state)};`;

  if (clientSideRenderOnly) {
    debug('NOT Rendering app component');
    props.markup = '';
  } else {
    debug('Rendering app component into html');
    props.markup = ReactDOM.renderToString(createElement(context));
  }

  props.context = context.getComponentContext();

  debug('Rendering html');
  res.send('' +
    ReactDOM.renderToStaticMarkup(HtmlComponent(props))
  );
}

const toSanitizedJSONString = (obj) =>
  serializeJavascript(obj, { isJSON: true })

_getGlobalVariables() {
    const { initialState, envVariables } = this.props;

    const envVarsValues = {};
    envVariables.forEach(name => {
      const value = process.env[name];
      if (typeof value !== 'undefined') {
        envVarsValues[name] = value;
      }
    });

    const state = `window.__INITIAL_STATE__=${serialize(initialState, {
      isJSON: true,
    })};`;
    const gsEnvs = `window.__GS_ENV_VARS__=${serialize(envVarsValues, {
      isJSON: true,
    })};`;
    return state.concat(gsEnvs);
  }
}

${helmet.title.toString()}
        ${helmet.meta.toString()}
        ${helmet.link.toString()}
        
        
      
      
        <div id="root">${html}</div>
        
        
        
      
    
  `;

};