Closed fmvilas closed 3 years ago
We should also consider as followup Folder
(or Directory
) component to generate structure of generated template. Something like:
<Folder name="someFolder">
<Folder name="folderInsideSomeFolder">
<File name="deepFile.js">
... content
</File>
</Folder>
<File name="someFile.js">
... content
</File>
</Folder>
and then in output we will have:
someFolder
folderInsideSomeFolder
deepFile.js
someFile.js
In my opinion, this should not even be considered. Nobody ever asked to have this feature in the template language and its functionality is something we already provide to the user in a different way. Having multiple ways of doing the same thing will only make the tool more complicated to use and maintain.
If at some point we get rid of Nunjucks, then it's something we can happily consider but this will change how the whole Generator works.
@fmvilas what is the procedure for finishing a cycle bet? 🤔
Closing this issue :)
Bet implemented in the react-sdk and integrated into the generator here. Template for templates was also re-written to only support React along with the markdown template.
Closing bet 🎉
On This Page
Summary
Make Generator support React as a template engine, along with Nunjucks.
Problem
The current templating system —based on Nunjucks— has some really important drawbacks:
--debug
flag turned on. That's a problem of Nunjucks itself and has been there for quite some time now.typeof variable === 'object'
or running basic JS logic.Solution
In general, the solution goes through adding React as a template engine to the Generator. When the template declares that it's using React as its template engine, the Generator will render files using React instead of Nunjucks.
There a slight change in the "rendering paradigm" though. In the case of React, we don't "render the file" but instead we "import" it, "process" it, and get the result as a string that has to be written to the destination file. This will allow us to have top-level metadata on each file, like in the following example:
In the example above, we have a top-level
<File>
component that allows us to add meta information about the file itself, like its name, permissions, and more. Even more, we can tell Generator not to render this file by simply returningnull
in theSchemaFile
function:In the example above, this file will only be rendered if the type of the schema is
object
. This will allow us to eventually get rid of file name template syntax like$$schema$$
,$$everySchema$$
, and$$objectSchema$$
. Also, the usage of<File name="...">
will eventually allow us to get rid of all the file name templates.Solution elements
<File>
component: the component in charge of defining a file's metadata and content. As metadata, we should havename
and leavepermissions
as a nice to have.<Text>
component: this would be used for rendering plain text, e.g., code. Should offer props to set indentation and its type. For instance,<Text indentation={1} indentationType="tabs">
to indent the whole text with 1 tab. Or we can provide something like<Indent size={1} type="tabs">
.Rabbit holes & challenges
import
syntax may be challenging. Watch out. We may have to introduce a step to precompile ES7 and JSX syntax before the rendererrequire
s the files.Out of bounds