Render a file tree using a JSX template.
Inspired by React FS Renderer.
npm install fileableimport { renderConsole, renderFS } from 'fileable';
import template from './path/to/sample-template.jsx';
const options = {
template_context:'./path/to/',
folder_context: './destination'
};
renderConsole(template, options);
renderFS(template, options);Templates are jsx files. The default export will be used to generate a file tree. (Note: You must always include a reference to 'React');
import React, {Fragment} from 'react';
export default ()=><></>;By default, React.Fragments are available and other components may be imported if installed locally.
npm install fileable-component-file fileable-component-folder fileable-component-clearimport React, {Fragment} from 'react';
import File from 'fileable-component-file';
import Folder from 'fileable-component-folder';
import Clear from 'fileable-component-clear';
export default ()=><>
<Clear>
<File name='readme.md'>
# I am a readme
</File>
<Folder name='src'>
<File name='index.html' doctype='html'>
<html>
<head></head>
<scrpit src='index.js'></script>
<body>
See Console for result.
</body>
</html>
</File>
<File name='index.js'>
console.log('hello world');
</File>
</Folder>
</Clear>
</>Components cand be composed and extended.
import React from 'react';
import File from 'fileable-component-file';
import Folder from 'fileable-component-folder';
import Clear from 'fileable-component-clear';
const DateFile = () =><File name='today.date' cmd='date' />
export default ()=><>
<Clear>
<File name='readme.md'>
# I am a readme
</File>
<DateFile />
</Clear>
</>If the template would accept inputs, you may pass them into the template as a function arguments;
export default (first, second, third)=><>...import {renderFS} from 'fileable';
import template from './path/to/sample-template.jsx';
const template_context = './path/to/';
const folder_context = './destination';
renderFS(template('first', 'second', 'third'), { folder_context, template_context});Creating fileable components is easy. Components must meet the following criteria.
-
Must be an asynchronous iterator yielding objects conforming to the "Fileable Component Protocol" (see below)
-
Must have key 'FILEABLE COMPONENT' set to a truthy value.
Fileable components must yield objects containing a 'directive' key -- along with other keys -- that and tells the renderer how to render the desired file tree.
The FILE directive is used to create files.
See the above File component for an example.
Name of file to create.
Content of file to create.
Mode of file to create.
If set to true, content will be added to a file. Othewise, content will be ovewrwriten.
Context in which to create file.
The FOLDER directive is used to create folders.
See the above Folder component for an example.
Name of folder to create.
Context in which to create folder.
The CLEAR directive is used to delete files and folders.
See the above Clear component for an example.
String representing files or folders to delete. May be a glob pattern. May use '!' to negate files.
The WARNING directive is used to denote that something went wrong but the process will continue.
Message explaining what went wrong.
The ERROR directive is used to denote that something went wrong but the process will continue.
Message explaining what went wrong.
Context in which to delete targets.
Creating fileable components is easy. Components must meet the following criteria.
-
Must be an asynchronous iterator yielding objects conforming to the "Fileable Component Protocol" (see below)
-
Must have key 'FILEABLE COMPONENT' set to true.
Fileable components must yield objects containing a 'directive' key -- along with other keys -- that and tells the renderer how to render the desired file tree.
The FILE is used to create files.
See the above File component for an example.
Name of file to create.
Content of file to create.
Mode of file to create.
If set to true, content will be added to a file. Othewise, content will be ovewrwriten.
Context in which to create file.
The FOLDER is used to create folders.
See the above Folder component for an example.
Name of folder to create.
Context in which to create folder.
The CLEAR is used to delete files and folders.
See the above Clear component for an example.
String representing files or folders to delete. May be a glob pattern. May use '!' to negate files.
Context in which to delete targets.
Render file tree to console
| Parameter | Type | Description |
|---|---|---|
input |
function | |
options |
object | |
options.folder_context |
string | Folder into which files should be renddered |
options.template_context |
string | Location of template. Used to determine relateive 'src' attributes |
import { renderConsole, iterator } from 'fileable'; const main = async () => renderConsole(template, { folder_context: '.' }); main();
Render file tree to file system
| Parameter | Type | Description |
|---|---|---|
input |
function | |
options |
object | |
options.folder_context |
string | Folder into which files should be renddered |
options.template_context |
string | Location of template. Used to determine relateive |
import {renderFS} from 'fileable'; const main = async () => renderFS(template, { folder_context: '.' }); main();
-
remove unnecessary dependencies
-
add proper typescript typeings
-
test multiple scenarious:
- local input + remote templated
- local input + local templated
- remote input + remote templated
- local input + local templated
- no input + remote templated
- no input + local templated
-
create template component
-
create File send attruibte to send content over http request
-
-> <File name='?' src='http://' send={method:'post', headers:{}} result_on={[true, 200, 201, '2**', '400']}>{CONTENT}
-
create File pipe attruibte to create a 'named pipe'
-
-> {CONTENT}
-
create File link attruibte to create a symbolic link
-
Create File result_on attribute to handle results of cmd, and src ()
-
create File fifo attribute to create a named pipe (temporary file)
-
move console outside of this repo infot fileab-cli (not particularly useful here)
-
make render sole export
-
create Link component to create a symbolic link or web shortcut
-
->
-
create "fileable-cloud" to write contents to cloud service
-
aws s3
-
google
-
azuer