How to use the fluxible-addons-react.createElementWithContext function in fluxible-addons-react

To help you get started, we’ve selected a few fluxible-addons-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github yahoo / fluxible / packages / generator-fluxible / app / templates / server.js View on Github external
}, (err) => {
        if (err) {
            if (err.statusCode && err.statusCode === 404) {
                // Pass through to next middleware
                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',
            context: context.getComponentContext(),
            state: exposed,
            markup: markup
        });
        const html = ReactDOM.renderToStaticMarkup(htmlElement);

        debug('Sending markup');
        res.type('html');
        res.write('' + html);
        res.end();
    });
});
github numenta / numenta-apps / unicorn / app / browser / entry.js View on Github external
.then(() => {
      let contextEl = FluxibleReact.createElementWithContext(context);
      let container = document.getElementById('main');
      ReactDOM.render(contextEl, container);
    })
    .catch((error) => {
github ali1k / ld-r / server.js View on Github external
}, (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');
        res.write('' + html);
        res.end();
    });
github yahoo / fluxible / site / server.js View on Github external
function renderApp(res, context) {
    const appElement = createElementWithContext(context);
    const renderedApp = renderToString(appElement);
    const exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';
    const doctype = '';
    const componentContext = context.getComponentContext();
    const html = renderToStaticMarkup(htmlComponent({
        assets: assets,
        context: componentContext,
        state: exposed,
        markup: renderedApp
    }));

    res.send(doctype + html);
}
github yahoo / fluxible / examples / chat / server.js View on Github external
function renderPage(req, res, context) {
    debug('Exposing context state');
    var exposed = 'window.App=' + serialize(app.dehydrate(context)) + ';';

    var mainMarkup;
    if ('0' === req.query.render) {
        mainMarkup = '';
    } else {
        mainMarkup = ReactDOM.renderToString(createElement(context));
    }

    debug('Rendering Application component into html');
    var html = ReactDOM.renderToStaticMarkup(React.createElement(HtmlComponent, {
        state: exposed,
        markup: mainMarkup
    }));

    debug('Sending markup');
    res.send(html);
}
github numenta / numenta-apps / imbu / gui / browser / app.js View on Github external
.then(() => {
    let container = document.getElementById('main');
    ReactDOM.render(FluxibleReact.createElementWithContext(context), container);
  });
github localnerve / flux-react-example / server / main.js View on Github external
function renderApp (res, context, app, props) {
  var state;

  props.mainScript = settings.web.assets.mainScript();
  props.images = settings.web.images;
  props.trackingSnippet = config.analytics.snippet;

  debug('Creating app state');
  state = app.dehydrate(context);
  state.analytics = config.analytics.globalRef;
  props.state = 'window.App=' + serialize(state) + ';';

  debug('Rendering app component into html');
  props.markup = ReactDOM.renderToString(createElement(context));
  props.context = context.getComponentContext();

  res.send('' +
    ReactDOM.renderToStaticMarkup(HtmlComponent(props))
  );
}
github dockunit / platform / client.js View on Github external
app.rehydrate(dehydratedState, function(error, context) {
    if (error) {
        throw error;
    }
    
    window.context = context;
    let mountNode = document.getElementById('app');

    debug('React Rendering');
    React.render(createElementWithContext(context), mountNode, function() {
        debug('React Rendered');
    });
});

fluxible-addons-react

Fluxible addons for use with React

BSD-3-Clause
Latest version published 2 years ago

Package Health Score

65 / 100
Full package analysis