Skip to content

Latest commit

 

History

History
350 lines (282 loc) · 4.24 KB

README.md

File metadata and controls

350 lines (282 loc) · 4.24 KB
Raw

Tip

BATI is a global available during the templating phase, which is a Set containing all chosen features

Special file names

$.*\.ts

File names encapsulated between $ and .ts, like $README.md.ts, are process through callback, which let one manipulate destination file. Take a look at boilerplates/shared/files/$README.md.ts for example.

!.*

File names starting with a ! will take precedence over any other file for the same destination. The priority order is as follows (from lesser to higher priority):

  • non ! files
  • ! files
  • $ files
  • !$ files

Syntax

Bati uses specific syntaxes to generate its boilerplates. The global idea is to have templating as code, making it is easy to write and maintain templates.

Snippet if condition 1, compiles to else/if condition 2, compiles to
.js,.jsx,.ts,.tsx,.vue script 
if (BATI.has("feature")) {
  console.log("A");
} else {
  console.log("B");
}

// also works with elseif
 
console.log("A");
 
console.log("B");
 
const myvar = BATI.has("feature") ?
  "A" : "B";
 
const myvar = "a";
 
const myvar = "B";
 
// BATI.has("feature")
import "./mycss";
 
import "./mycss";

nothing

 
/*# BATI include-if-imported #*/

const a = 1;
 true if the file is at least imported by any other generated file 
const a = 1;

nothing

 
// Equivalent to `as any` but in Bati's codebase only. It is dropped entirely when compiled.
// Only use this to bypass complex type mixing, but prefer using `BATI.If<...>` instead if possible.
const a = 'react' as BATI.Any;
 
const a = 'react';
 
const a = 'react';
 
interface Context {
  // First valid match is the one that will be applied
  ui: BATI.If<{
    'BATI.has("react")': "react";
    'BATI.has("vue")': "vue";
    'BATI.has("solid")': "solid";
    // fallback
    _: "other";
  }>;
}
 For instance, if `--react` was given 
interface Context {
  ui: "react";
}
 
interface Context {
  ui: "other";
}
.jsx,.tsx 
const Component = () => {
  return (
    <div
      // BATI.has("feature")
      class="p-5"
      // !BATI.has("feature")
      style={{
        padding: "20px",
      }}
    >
      {props.children}
    </div>
  );
};
 
const Component = () => {
  return (
    <div
      class="p-5"
    >
      {props.children}
    </div>
  );
};
 
const Component = () => {
  return (
    <div
      style={{
        padding: "20px",
      }}
    >
      {props.children}
    </div>
  );
};
.jsx,.tsx,.vue template 
<div>
  <!-- BATI.has("feature") -->
  <div>
    <span>my text</span>
  </div>
  <span>my other text</span>
</div>
 
<div>
  <div>
    <span>my text</span>
  </div>
  <span>my other text</span>
</div>
 
<div>
  <span>my other text</span>
</div>
any extension 
/*{ @if (it.BATI.has("feature")) }*/
@import "./feature.css";
/*{ /if }*/

We use SquirellyJS with a custom /*{ ... }*/ tag

 
@import "./feature.css";

nothing

Note

Using this kind of condition in a templates is not supported!

{BATI.has("feature") && <div>show me</div>}

Details

  • BATI is a global var available at compile time. It is also defined in typings so that it is considered valid in your IDE
  • After compilation, any unused imports are removed
  • After compilation, code is formatted with prettier