to configure docx by tag syntax

[trevorHsu]

Hello, i wrote a package called docxload to configure docx by tag template. https://github.com/trevorHsu/docxload

import docxload from 'docxload'

// when a tag attribute's data type is string, using Double quotes
// when a tag attribute's data type is js expression, using curly braces
// a tag attribute could have multiple subattributes configured as "key1: value1; key2: value2;", such as the "underline" attribute
let template = `
  <page>
    <p>
      <span 
        underline="type: single; color: #000;"
        color="#000"
      >Hello, </span>
      <span font-size={30}>docxload</span>
    </p>
  </page>
`

docxload(template).then(() => {
  console.log('done')
}).catch(err => {
  console.log('failed', err)
})

[dolanmiu]

This is cool! So kind of like React's tsx? How will intellisense work?

Looking forward to what this can bring

[trevorHsu]

Haha, thanks! It doesn't support tsx or jsx yet, but this feature is comming soon.
I am developing docxload's template parser to implement this feature.

[wvbe]

I've used docx in Deno, and because Deno supports JSX/TSX out of the box I had my hands free to do this.

https://github.com/wvbe/docxml/blob/develop/demos/hello-world.tsx

It involved writing a pretty simple custom JSX pragma. I've created some "component" that wrap the normal docx classes that would redirect some (traditionally called) "children" to the appropriate option of a parent component. The other props accepted by each component are based directly on the typing that docx already has. I think docx would need very little changes to support a full 1-to-1 feature parity.

Intellisense is mostly fine; full code intelligence on any prop passed to the JSX components. The only thing AFAIK that doesn't work well is that the system will not warn me if I put a component (eg. <Section>) inside an invalid parent (eg. <Text>). Not sure if that is my mistake or simply impossible with JSX.

I did make my JSX pragma a little bit more complex, and I intend to add more complexity to my script later too, for things like;

• Automatically wrap text children in Text
• If a component is found within a component where it is invalid, attempt to split the parent component(s) until the structure is valid, or error out when reaching the top level
  • Text components that are now empty are removed. This required me to invent a separate component for line breaks, because <Text break={1} /> is probably always empty.
• Footnotes could be simplified by just dropping a footnote somewhere that self-registers with the document.

[trevorHsu]

This is cool！Very good job!

[trevorHsu]

docxload v2 has been released, compatible with the latest docx package and optimized for syntax parsing logic. It supports JS/TS. Looking forward to your use and PRs.

[wvbe]

Hey @trevorHsu, I've actually left the company where I worked with DOCX and I'll not be making further updates. My lib did use docx for a while, but switched to doing the whole thing itself after a while for a reason I don't really remember. I do remember adding "magic" to the JSX pragma like automatically wrapping text nodes in <Text> and that this essentially made its behavior less predictable -- ultimately something I wish I had avoided!

But that's just my experience ;) Good luck, have fun, and congrats on the release of v2!

[trevorHsu]

Hahah, thanks @wvbe, that's good to know. I would try to deal with the JSX pragma feature for docxload later on.

Very appreciate your work on docxml!

[wvbe]

Kind words @trevorHsu, thank you! It may be useful to know that my ex-colleagues forked the repo - they are the most likely to make progress at this time, although there hasn't been much activity yet.

https://github.com/fontoxml/docxml

[trevorHsu]

Thanks @wvbe , it is useful ! 😄