{"id":13773749,"url":"https://github.com/johnhenry/fileable","last_synced_at":"2026-01-06T14:04:21.606Z","repository":{"id":57235702,"uuid":"178656129","full_name":"johnhenry/fileable","owner":"johnhenry","description":"Render file trees using JSX Templates","archived":false,"fork":false,"pushed_at":"2019-05-25T20:22:50.000Z","size":178,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T03:34:30.132Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnhenry.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-31T07:26:17.000Z","updated_at":"2024-04-18T12:05:29.000Z","dependencies_parsed_at":"2022-09-05T21:10:52.018Z","dependency_job_id":null,"html_url":"https://github.com/johnhenry/fileable","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnhenry%2Ffileable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnhenry%2Ffileable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnhenry%2Ffileable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnhenry%2Ffileable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnhenry","download_url":"https://codeload.github.com/johnhenry/fileable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239921844,"owners_count":19718844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T17:01:19.713Z","updated_at":"2026-01-06T14:04:16.587Z","avatar_url":"https://github.com/johnhenry.png","language":"JavaScript","readme":"![fileable logo](./static/docs/logo.png)\n\n# Fileable\n\nRender a file tree using a JSX template.\n\nInspired by [React FS Renderer](https://github.com/ericvicenti/react-fs-renderer).\n\n## Related Projects\n\n### CLI\n- [CLI](https://github.com/johnhenry/fileable-cli)\n\n### Components\n- [File](https://github.com/johnhenry/fileable-component-file) - create files\n- [Folder](https://github.com/johnhenry/fileable-component-folder) - create folders and archives\n- [Clear](https://github.com/johnhenry/fileable-component-clear) - remove files and folders\n\n## Installation\n\n```sh\nnpm install fileable\n```\n\n## Usage\n\n## Bacis Usage\n\n```javascript\nimport { renderConsole, renderFS } from 'fileable';\nimport template from './path/to/sample-template.jsx';\nconst options = {\n template_context:'./path/to/',\n folder_context: './destination'\n};\nrenderConsole(template, options);\nrenderFS(template, options);\n```\n\n### Templates Files\n\nTemplates are jsx files. The default export will be used to generate a file tree.\n(Note: You must always include a reference to 'React');\n\n```javascript\nimport React, {Fragment} from 'react';\nexport default ()=\u003e\u003c\u003e\u003c/\u003e;\n```\n\n#### Components\n\nBy default, [React.Fragments](https://reactjs.org/docs/fragments.html) are available and other components may be imported if installed locally.\n\n```sh\nnpm install fileable-component-file fileable-component-folder fileable-component-clear\n```\n\n```javascript\nimport React, {Fragment} from 'react';\nimport File from 'fileable-component-file';\nimport Folder from 'fileable-component-folder';\nimport Clear from 'fileable-component-clear';\nexport default ()=\u003e\u003c\u003e\n    \u003cClear\u003e\n    \u003cFile name='readme.md'\u003e\n    # I am a readme\n    \u003c/File\u003e\n    \u003cFolder name='src'\u003e\n        \u003cFile name='index.html' doctype='html'\u003e\n        \u003chtml\u003e\n            \u003chead\u003e\u003c/head\u003e\n            \u003cscrpit src='index.js'\u003e\u003c/script\u003e\n            \u003cbody\u003e\n                See Console for result.\n            \u003c/body\u003e\n        \u003c/html\u003e\n        \u003c/File\u003e\n        \u003cFile name='index.js'\u003e\n        console.log('hello world');\n        \u003c/File\u003e\n    \u003c/Folder\u003e\n    \u003c/Clear\u003e\n\u003c/\u003e\n```\n\nComponents cand be composed and extended.\n\n```javascript\nimport React from 'react';\nimport File from 'fileable-component-file';\nimport Folder from 'fileable-component-folder';\nimport Clear from 'fileable-component-clear';\nconst DateFile = () =\u003e\u003cFile name='today.date' cmd='date' /\u003e\nexport default ()=\u003e\u003c\u003e\n    \u003cClear\u003e\n    \u003cFile name='readme.md'\u003e\n    # I am a readme\n    \u003c/File\u003e\n    \u003cDateFile /\u003e\n    \u003c/Clear\u003e\n\u003c/\u003e\n```\n\n\n#### Inputs\n\nIf the template would accept inputs, you may pass them into the template as a function arguments;\n\n```javascript\nexport default (first, second, third)=\u003e\u003c\u003e...\n```\n\n```javascript\nimport {renderFS} from 'fileable';\nimport template from './path/to/sample-template.jsx';\nconst template_context = './path/to/';\nconst folder_context = './destination';\nrenderFS(template('first', 'second', 'third'), { folder_context, template_context});\n```\n\n## Creating a Fileable Component\n\nCreating fileable components is easy. Components must meet the following criteria.\n\n1. Must be an asynchronous iterator yielding objects conforming to the \"Fileable Component Protocol\" (see below)\n\n2. Must have key 'FILEABLE COMPONENT' set to a truthy value.\n\n### Fileable Component Protocol\n\nFileable components must yield objects containing a 'directive' key -- along with other keys -- that and tells the renderer how to render the desired file tree.\n\n### directive: FILE\n\nThe FILE directive is used to create files.\n\nSee the above File component for an example.\n\n#### key: name\n\nName of file to create.\n\n#### key: content\n\nContent of file to create.\n\n#### key: mode\n\nMode of file to create.\n\n#### key: append\n\nIf set to true, content will be added to a file. Othewise, content will be ovewrwriten.\n\n#### key: folder_context\n\nContext in which to create file.\n\n### Directive: FOLDER\n\nThe FOLDER directive is used to create folders.\n\nSee the above Folder component for an example.\n\n#### key: name\n\nName of folder to create.\n\n#### key: folder_context\n\nContext in which to create folder.\n\n### Directive: CLEAR\n\nThe CLEAR directive is used to delete files and folders.\n\nSee the above Clear component for an example.\n\n#### key: target\n\nString representing files or folders to delete.\nMay be a [glob](https://github.com/isaacs/node-glob) pattern.\nMay use '!' to negate files.\n\n\n### Directive: WARNING\n\nThe WARNING directive is used to denote that something went wrong but the process will continue.\n\n#### key: message\n\nMessage explaining what went wrong.\n\n\n### Directive: ERROR\n\nThe ERROR directive is used to denote that something went wrong but the process will continue.\n\n\n#### key: message\n\nMessage explaining what went wrong.\n\n\n#### key: folder_context\n\nContext in which to delete targets.\n\n## Creating a Fileable Component\n\nCreating fileable components is easy. Components must meet the following criteria.\n\n1. Must be an asynchronous iterator yielding objects conforming to the \"Fileable Component Protocol\" (see below)\n\n2. Must have key 'FILEABLE COMPONENT' set to true.\n\n### Fileable Component Protocol\n\nFileable components must yield objects containing a 'directive' key -- along with other keys -- that and tells the renderer how to render the desired file tree.\n\n### directive: FILE\n\nThe FILE is used to create files.\n\nSee the above File component for an example.\n\n#### key: name\n\nName of file to create.\n\n#### key: content\n\nContent of file to create.\n\n#### key: mode\n\nMode of file to create.\n\n#### key: append\n\nIf set to true, content will be added to a file. Othewise, content will be ovewrwriten.\n\n#### key: folder_context\n\nContext in which to create file.\n\n### Directive: FOLDER\n\nThe FOLDER is used to create folders.\n\nSee the above Folder component for an example.\n\n#### key: name\n\nName of folder to create.\n\n#### key: folder_context\n\nContext in which to create folder.\n\n### Directive: CLEAR\n\nThe CLEAR is used to delete files and folders.\n\nSee the above Clear component for an example.\n\n#### key: target\n\nString representing files or folders to delete.\nMay be a [glob](https://github.com/isaacs/node-glob) pattern.\nMay use '!' to negate files.\n\n#### key: folder_context\n\nContext in which to delete targets.\n## API\n\n### Table of contents\n\n- [function renderConsole](#function-renderconsole)\n  - [Examples](#examples)\n- [function renderFS](#function-renderfs)\n  - [Examples](#examples-1)\n\n### function renderConsole\n\nRender file tree to console\n\n| Parameter                  | Type     | Description                                                        |\n| :------------------------- | :------- | :----------------------------------------------------------------- |\n| `input`                    | function |                                                                    |\n| `options`                  | object   |                                                                    |\n| `options.folder_context`   | string   | Folder into which files should be renddered                        |\n| `options.template_context` | string   | Location of template. Used to determine relateive 'src' attributes |\n\n#### Examples\n\n\u003e ```javascript\n\u003e import { renderConsole, iterator } from 'fileable';\n\u003e const main = async () =\u003e\n\u003e renderConsole(template, { folder_context: '.' });\n\u003e main();\n\u003e ```\n\n* * *\n\n### function renderFS\n\nRender file tree to file system\n\n| Parameter                  | Type     | Description                                       |\n| :------------------------- | :------- | :------------------------------------------------ |\n| `input`                    | function |                                                   |\n| `options`                  | object   |                                                   |\n| `options.folder_context`   | string   | Folder into which files should be renddered       |\n| `options.template_context` | string   | Location of template. Used to determine relateive |\n\n#### Examples\n\n\u003e ```javascript\n\u003e import {renderFS} from 'fileable';\n\u003e const main = async () =\u003e\n\u003e renderFS(template, { folder_context: '.' });\n\u003e main();\n\u003e ```\n\n## Todo\n\n- remove unnecessary dependencies\n- add proper typescript typeings\n- test multiple scenarious:\n     - local input + remote templated\n     - local input + local templated\n     - remote input + remote templated\n     - local input + local templated\n     - no input + remote templated\n     - no input + local templated\n- create template component\n- create File *send* attruibte to send content over http request\n - -\u003e \u003cFile name='?' src='http://' send={method:'post', headers:{}} result_on={[true, 200, 201, '2**', '400']}\u003e{CONTENT}\u003c/File\u003e\n\n- create File *pipe* attruibte to create a 'named pipe'\n - -\u003e \u003cFile name='?' src='.' link\u003e{CONTENT}\u003c/File\u003e\n\n\n- create File *link* attruibte to create a symbolic link\n- Create File *result_on* attribute to handle results of cmd, and src ()\n- create File *fifo* attribute to create a named pipe (temporary file)\n- move console outside of this repo infot fileab-cli (not particularly useful here)\n - make **render** sole export\n\n\n- create *Link* component to create a symbolic link or web shortcut\n - -\u003e \u003cLink target='...' /\u003e\n\n- create \"fileable-cloud\" to write contents to cloud service\n - aws s3\n - google\n - azuer\n","funding_links":[],"categories":["File"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnhenry%2Ffileable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnhenry%2Ffileable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnhenry%2Ffileable/lists"}