xtyle-server

Xtyle Util Server

Install

npm i xtyle-server

File | index.js

import xtyle from "xtyle-server";

const port = process.env.PORT || 3000;

xtyle.server(port);

File | package.json

{
  "scripts": {
    "app": "node index.js"
  }
}

Utils

import xtyle from "xtyle-server";

xtyle.minify(`/* JS CODE */`);
xtyle.tsx(`/* TSX Render */`);
xtyle.css(`/* SCSS Minify */`);

Component

import xtyle from "xtyle-server";

const example = {
  code: `
  export default function Component(props: Props = {}) {
    return (
      <div x-html {...props} class={[$NAME, props.class]}>
        {props.children}
      </div>
    );
  }
      `,
  style: `
  $color: red;
  .#{$NAME} { color: $color; }
      `,
  props: `
  type Props = {
    class?: string | string[] | object;
    style?: string | string[] | object;
    children?: any;
  };
  
  export default Props;
      `,
  docs: `
  /**
   * Component - This is a my component.
   */
      `,
};

// Usage
xtyle.component({
  theme: "my-lib", // Optional
  name: "kebab-case-name",
  code: example.code,
  style: example.style,
  props: example.props,
  docs: example.docs,
});

Plugin

import xtyle from "xtyle-server";

const demoData = (name) => {
  return {
    name: name,
    code: `
  export default function Component(props: Props = {}) {
    return (
      <div x-html {...props} class={[$NAME, props.class]}>
        {props.children}
      </div>
    );
  }
      `,
    style: `
  $color: red;
  .#{$NAME} { color: $color; }
      `,
    props: `
  type Props = {
    class?: string | string[] | object;
    style?: string | string[] | object;
    children?: any;
  };

  export default Props;
      `,
    docs: `
  /**
   * Component - This is a my component.
   */
      `,
  };
};

const components = [demoData("custom-div"), demoData("button")];

const install = {
  directives: null,
  globals: null,
  store: null,
  init: `export default [() => console.log("Plugin INIT")]`,
};

xtyle.plugin({
  name: "my-lib",
  components: components,
  install: install,
});