Hi there!

[This is an incomplete PR to start a conversation]

Love redocx. I'm trying to make an http server that can serve up small word docs without hitting the filesystem. I figured I'd add a method to convert to a buffer but I'm running into some trouble understanding officegen. It seems like the finalize event that we pass to generate gets called before the stream gets its first data event. Does that make sense?

... otherwise there's stuff like this in the library (look for regeneratorRuntime):

(excerpt from renderer/parse.js)

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.testRenderer = exports.render = undefined;

var renderToFile = function () {
  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(element, filePath) {
    var container, node, output, stream;
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            container = (0, _createElement.createElement)('ROOT');


            (0, _renderUtils.validateElement)(element);

            (0, _renderUtils.validatePath)(filePath);

            node = _renderer.WordRenderer.createContainer(container);


            _renderer.WordRenderer.updateContainer(element, node, null);

            _context.next = 7;
            return (0, _parse2.default)(container).toBuffer();

          case 7:
            output = _context.sent;
            stream = _fs2.default.createWriteStream(filePath);
            _context.next = 11;
            return new Promise(function (resolve, reject) {
              output.doc.generate(stream, (0, _renderUtils.Events)(filePath, resolve, reject));

              (0, _renderUtils.openDocApp)(filePath);
            });

          case 11:
          case 'end':
            return _context.stop();
        }
      }
    }, _callee, this);
  }));

  ....

ref: https://github.com/nitin42/redocx/issues/18

This makes it problematic to use this library where babel runtime is not used.

Uncaught ReferenceError: regeneratorRuntime is not defined at modules.js?hash=ef51e63ae4ee39b60c1820fb31cac832c0ce8cf6:231605 at render.js (modules.js?hash=ef51e63ae4ee39b60c1820fb31cac832c0ce8cf6:231647) at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353) at require (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248) at index.js (modules.js?hash=ef51e63ae4ee39b60c1820fb31cac832c0ce8cf6:231541) at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353)

Not uncommon for new versions of npm to break babel or something on a few projects. Installing dependencies in a fresh new npm module using newest npm version results in an error like this:

Error: Cannot find module 'react/lib/checkPropTypes'
    at Function.Module._resolveFilename (module.js:489:15)
    at Function.Module._load (module.js:439:25)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\harmon\Desktop\redocx-testing\node_modules\react-dom\lib\checkReactTypeSpec.js:13:22)
    at Module._compile (module.js:573:30)
    at Module._extensions..js (module.js:584:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\harmon\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)

This may be a Just a Windows problem.. Removing node_modules folder, and reinstalled dependencies using yarn install resolved the problem!

Figure I would make a post for people looking to try this out, that run into the same issue. Very cool library!

Hey there. I've just optimized all of you images. They are the same dimensions and quality as before, only they take up less space now.

\redocx.png (20.22%)) \examples\concr.png (23.97%))

This PR adds the ability to render the document to memory mapped stream instead of directly to FS. This is useful for APIs that need to return Docx, etc.

I added the Platform API to be consistent with React Native. A lot of other custom renderers (react-sketchapp, Apple TV, macOS, etc) all have it. It's useful for platform differences within universal components. 😀

Feel free to change the platform name word to whatever you'd prefer.

babel-node ./demo/Word.js

/usr/bin/env: ‘node’: No such file or directory

npm ERR! Linux 4.10.0-32-generic npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "example" npm ERR! node v4.2.6 npm ERR! npm v3.5.2 npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! [email protected] example: babel-node ./demo/Word.js npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the [email protected] example script 'babel-node ./demo/Word.js'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the redocx package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! babel-node ./demo/Word.js npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs redocx npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls redocx npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /home/jsroyal/redocx/npm-debug.log

I could not get it.

Hi, Dear team,

Thanks for the awesome efforts u guys put onto this project, it's great. Recently, Ive started using this cool stuff to create CV-like document. Ive seen a few limits, so wanna ask some questions here:

1. Can header component render other intermediate components? just like Text component with the capability to render LineBreak/Image/Hr components, so that I could so things like this(looks like putting text on top of an image): Alternatively, lets say in Text component, is it possible to align the text on top of an image?

2. would Column be supported in the future?

i want to react page export to word(.docx) upper image is react PolarChart page i searched how to export to word for chart but all of your documentation can export to letter or image only

If you wrap the document with a context provider, it throws the error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.\n\nCheck the render method of `ContextProvider`.

To Replicate

import React, {createContext} from 'react'
import { render, Document, Text } from 'redocx';

const ContextProvider = createContext().Provider

render(
    <ContextProvider>
        <Document>
            <Text>Hello</Text>
        </Document>
    </ContextProvider>
);

This is mainly intended as a workaround to render images in a word document when rendering to a stream.

Since it's not supported in the officegen package, the solution was based on this issue https://github.com/Ziv-Barber/officegen/issues/32.

(Also updated dependencies and updated offigen to the latest version 0.6.4)

When I add the <ImageComponent /> to the word-memory.js file, the process silently fails... The same document does work when rendering to a file directly.

import fs from 'fs';
import React, { Component } from 'react';
import TextComponent from '../examples/Text';
import { render, Document, Text } from '../src/';

// Uncomment any of the below component to see what they render

import FooterComponent from '../examples/Footer';
import HeaderComponent from '../examples/Header';
import HrComponent from '../examples/Hr';
import LineBreakComponent from '../examples/LineBreak';
import PageBreakComponent from '../examples/PageBreak';
import TableComponent from '../examples/Table';
import ListComponent from '../examples/List';
import ImageComponent from '../examples/Image';

class MyDocument extends Component {
  render() {
    return (
      <Document>
        <TextComponent />
        <ImageComponent />
      </Document>
    );
  }
}

render(<MyDocument />).then((stream) => {
  fs.open('./demo/Memory.docx', 'w+', stream.length, (err, fd) => {
    if (err) {
      console.log(err);
    }
    fs.write(fd, stream.toBuffer(), (writeErr) => {
      if (writeErr) {
        console.log(writeErr);
      }
      console.log('Docx generated and saved to ./demo/Memory.docx');
    });
  });
});

Can this convert only after a click event?
I need to wait for some user interactions and API requests to finish. I guess it would need an option to work at run time