to configure docx by tag template

[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.