--declare Flag

Accepted keys

• --declare

Syntax

`--declare${"="typeof boolean}`

Example

--declare

--declare=true
--declare=false

--declare=yes
--declare=no

----declare

When to use

Based on this tsx react example - assuming the input design has a deep-depthed children structure, you can specify the --declare flag to split one of the child as a in-module component and transformt the module tree.

In result,

import React from "react";

function Root() {
  return (
    <div>
      <div>
        <div>
          <div>
            <div>complex</div>
          </div>
        </div>
      </div>
      <div>
        <div>
          <div>
            <div>complex</div>
          </div>
        </div>
      </div>
    </div>
  );
}

The above complex tree would be splitted with in-module component, resulting below.

import React from "react";

function Root() {
  return (
    <div>
      <ComplexDeclared1 />
      <ComplexDeclared2 />
    </div>
  );
}

const ComplexDeclared1 = () => {
  return (
    <div>
      <div>
        <div>
          <div>complex</div>
        </div>
      </div>
    </div>
  );
};

const ComplexDeclared2 = () => {
  return (
    <div>
      <div>
        <div>
          <div>complex</div>
        </div>
      </div>
    </div>
  );
};

This may make the lines longer, but there is no argue that this makes the code more readable and maintainable.

Behavior

Element When applied, this will have no impact on its scoped element tree.

Composition When applied, this will transform the element tree to be a declaration, e.g. a const or function on React, a Widget Class on Flutter, which splitting ui tree by its interest and scope.

See Also

• nothing to see within