https://github.com/alsiola/pptjsx
Declarative syntax for generating pptx
https://github.com/alsiola/pptjsx
Last synced: 7 months ago
JSON representation
Declarative syntax for generating pptx
- Host: GitHub
- URL: https://github.com/alsiola/pptjsx
- Owner: alsiola
- Created: 2019-08-11T11:00:21.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:52:09.000Z (over 3 years ago)
- Last Synced: 2025-02-22T06:24:08.583Z (over 1 year ago)
- Language: TypeScript
- Size: 520 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pptjsx
Declarative JSX-like syntax for defining pptx presentations to be rendered by pptxgenjs.
This is an early proof-of-concept, which works but with minimal features implemented.
## Usage
There is a bit of toolchain faffery to make this work - mainly around using a custom JSX
pragma with Babel. See `babel.config.js` for the babel config used by the demo.
So far there are three usable components - `presentation`, `slide` and `text`. They must be rendered
hierarchically, i.e.
```
const MyDeck = (
Hello There
Human Friend
);
```
To produce a file, use the exported `render` function, which will resolve to a pptxgenjs slideshow that
can be saved.
```
PPTJSX.render(Deck).then(deck => {
deck.save("deck-filename");
});
```
### Data Getting
To be useful, we're probably going to need some data, and it's probably going to be async. Because the model
here diverges from React, in that it won't "re-render" the presentation when props change, we can't use the
same model of HOCs. To get around this, we simply allow our components to be async functions, that must resolve
to valid components.
```
const MyDataSlide = async () => {
const value = await callMyApi();
return (
The value is: {value}
)
};
```
## Demo
There is a runnable demo included. In the root of the project run `yarn demo` and all necessary build steps will
be run. The source can be modified in `demo-src`.