Skip to content
No description, website, or topics provided.
TypeScript JavaScript Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
dist/lib
scripts
src
static/docs
test
.gitignore
LICENSE
package.json
readme.md

readme.md

fileable logo

Fileable Component: File

Fileable template component used to create files

import {File} from 'fileable-component-file';
const template = ()=><File name='readme.md'>
# This is a sample file.
</File>

If a file may contains other files, content will be concatinated.

const template = ()=><File name='readme.md'>
    # This is a sample file.
    <File>{'\n'}## This is more content</File>
    <File>{'\n'}## As is this{'\n'}</File>
    ## This is the end
</File>

Attributs

name

Name of the file.

const template = ()=><File name="empty_file"/>;

If no name is passed, a hash (SHA_256) of the content will be used.

extension

Extension appended to name. Particularly useful when name is autogenerated.

const template = ()=><File extension='.js'>
...javascript content
</File>;

src

File content in src attribute will be appended to child content.

const template = ()=><File src='https://www.google.com'>Google's Home Page:</File>;

src_context

Relative sources are, by default, resolved relative to the template location.

const template = ()=><File src='./sibbling-of-template'/>;

Setting src_content to 'File.SRC_CONTEXT_FOLDER' will resolve the file relative to the destination folder.

const template = ()=><File src='./sibbling-of-template' src_context={File.SRC_CONTEXT_FOLDER}/>;

You may also set src_context to a string.

const template = ()=><File src='./bashrc' src_context='~'/>;

Defaults to 'File.SRC_CONTEXT_TEMPLATE'

const template = ()=><File src='./sibbling-of-template' src_context={File.SRC_CONTEXT_TEMPLATE}/>;

cmd

Command will be run and content in src attribute will be appended to child content.

const template = ()=><File cmd='date'>Content created at:</File>;

If cmd starts with '|', child content will be piped through command

const template = ()=><File name='.cheesefile' cmd='|grep Cheese'>{
`Lines containing "Cheese:":
    - Feta Cheese
    - Broccoli
    - American Cheese
    - Ham
    - Bread
    - Cheesebread
`}</File>;

mode

Set the mode of a file.

const template = ()=><File name='helloworld' mode={0o777}>
#!/usr/bin/env node
console.log('hello world');
</File>;

sgmldoctype

Add a doctype to the beginning of an SGML file.

const template = ()=><File name='index.html' sgmldoctype='html'>
{`<html>
    <head></head>
    <body></body>
</html>`}
</File>;

transform

Content will be transformed via given function

const addBeginning = (content)=>
`// Begin$
${content}`;

const template = ()=><File transform={addBeginning}>
// Middle
</File>;

raw

Content is not transformed into a buffer.

const template = ()=><File name='main.js' transform={(obj)=>JSON.stringify(obj)} >
    <File raw>{{
        name: 'Amy',
        age: 25
    }}</File>
</File>;

ps

When used within other files, the ps attribute adds content to files after any transfomations from (cmd, transform) are applied.

const addEnd = (content)=>
`${content}
// ^End`;

const template = ()=><File transform={addBeginning}>
    // Middle
    <File ps/>
    // Post End
    </File>
</File>;

content

...

const template = ()=><File name='main.js' content='hello world'/>;

clone

When used within other files, the clone command takes the content of the file up to that point and clones it to another file.

const template = ()=><File name='main.js'>
    Content
    <File clone />
</File>;

If a placeholder string is passed as the clone attribute, it will appear in place of that file within the parent.

const template = ()=><File name='main.js'>
    Content
    <File clone='// filed cloned at hash' />
</File>;

Combine other attributes to create "sidecar" files

const template = ()=><File src='../src/index.js' name='index.js' cmd='|./minify-file'>
    <File clone='//src-map: index.map.js' ps name='index.map.js' cmd='|./produce-file-map'></File>
</File>;

map

Chlldren will be transformed via given function.

const incrementAge = (person)=> {person.age += 1; return person;};
const template = ()=><File name='main.js' map={incrementAge}>
    <File raw>{{
        name='Amy',
        age:25
    }}<File/>
    <File raw>{{
        name='Bob',
        age:30
    }}<File/>
    <File raw>{{
        name='Carl',
        age:35
    }}<File/>
</File>;

react_renderer

By default, React's HTML tags can be used to produce a file's content.

const template = ()=> <File name="index.html">
    &lt;!doctype html&gt;
    <html>
        <body> Hello World
            <script src='index.js'></script>
        </body>
    </html>
</File>;

Adding the "react_renderer" allows you to customize how react componets are rendered.

import repng from 'repng';
const template = ()=> <File name="index.png" react_renderer={(component, props) => repng(component, { props, width: 162, height: 100 })}>
    <html>
        <style>{
            `
            * {
                color: green;
            }`
        }</style>
        <body> Hello World
            <script src='index.js'></script>
        </body>
    </html>
</File>;

Rendering new lines

The folowing template:

const template = () => <File>
1
2
3
</File>

renders as:

123

To add a new line in react, there are at least 3 options.

Brackets and backtics

The folowing template:

const template = () => <File>{
`1
2
3`
}</File>

renders as:

1
2
3

Newline character within brackets

The folowing template:

const template = () => <File>
1{'\n'}
2{'\n'}
3
</File>

renders as:

1
2
3

Sub-Files with new-line characters

The folowing template:

const template = () => <File>
1<File end />
2<File end />
3
</File>

renders as:

1
2
3

API

Table of contents

Todo

  • remove unnecessary dependencies
  • add proper typescript typeings
  • add "ovewrite" attribute
You can’t perform that action at this time.