Skip to main content

Template syntax

Costro's component templates can be written in native Template String or with JSX. When building large scale applications with Costro, JSX is recommended because it provides more readable templates and offers more flexibility than native Template Strings.

Template String​

The Template String is the easiest way to define the template of a component. The component can be a Function or a Class Component.

src/components/home.js
function Home() {
  return `<h2>Home</h2>`;
}

Try it on CodeSandbox.

JSX ⚡​

Out of the box, Costro provides the createElement() and Fragment() functions to transforms JSX syntax into valid DOM elements.

To further optimize the size of the generated file and pay homage to the hyperscript, short names are available:

  • createElement => h
  • Fragment => F
info

Costro is also compatible with the jsx-dom package with the syntaxes declared below.

Try it on CodeSandbox.

src/components/home.js
function Home() {
  return <h2>Home</h2>;
}

Fragments​

src/components/home.js
class Home extends Component {
  render() {
    return (
      <>
        <h2>Home</h2>
        <p>Fragment</p>
      </>
    );
  }
}

Attributes​

Class​

String

You can use class or className.

<div class="item"></div>
<div className="item"></div>

Style​

String|Object

<div style="display: flex; justify-content: center;"></div>
<div style={{ display: 'flex', justifyContent: 'center' }}></div>

Dataset​

Object

<div dataset={{ firstName: 'John', lastName: 'Doe' }}></div>

Inner HTML​

String

const html = '<span>Hello</span>'
<div innerHTML={html}></div>

Boolean attributes​

Boolean attributes can be declared without a value or with the value true.

<button disabled></button>
<button disabled={true}></button>

SVG​

Costro applies the SVG attributes as they are written. This means that you can copy and paste unmodified SVG directly into your code and have them work right away.

http://localhost:3000

Try it on CodeSandbox.

Configuration files​

Babel​

To transpile JSX, you need the Babel preset @babel/preset-react that converts JSX to valid JavaScript code.

npm install @babel/preset-react --save-dev

Then, update the Babel configuration to register the plugin and the pragmas.

babel.config.json
{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic",
        "importSource": "costro"
      }
    ]
  ]
}
info

The automatic runtime automatically adds imports for costro. If you prefer the classic runtime environment, see the Babel preset configuration

Pragmas with CDN links

Pragmas are exposed in the global variable window.Costro.jsx.

babel.config.json
{
  "pragma": "Costro.jsx.h",
  "pragmaFrag": "Costro.jsx.F"
}

Documentation of the @babel/plugin-transform-react-jsx

ESLint​

ESLint provide support for JSX syntax with the eslint-plugin-react package.

npm install eslint@7 eslint-plugin-react --save-dev

When using ESLint and JSX outside of React/Preact, you needs to update the following rules.

.eslintrc.json
{
  "extends": ["plugin:react/recommended"],

  "rules": {
    "react/display-name": 0,
    "react/jsx-key": 0,
    "react/prop-types": 0,
    "react/react-in-jsx-scope": "off"
  },

  "settings": {
    "react": {
      "version": "0"
    }
  }
}