Components DOCS WIP

Shoyify is based on shoyo. It extends the library by providing basic components to build the base of any large scale app. Even if it uses the stylesheet of shoyo, there is a lot of options to customise the style, look and feel.

Architecture

To understand how shoyify components can be used, let's discuss a little bit about how they are built. Shoyify is completely built atop the Vue 3 API and it supports Vue 3 only. The exported component is of custom type PluginComponent, which extends the Vue 3 Component type. The exported component holds an additional install method which enables the component to be used as a plugin.

Structure

Here is the structure of the ShoyoButton component.

<script lang="ts">
import { defineComponent, h, PropType, ref, toRefs } from 'vue';
import { ShoyoButtonSizes, ShoyoButtonTypes } from '../../../types';
export default defineComponent({
  name: 'ShoyoButton',
  props: {
    type: {
      type: String as PropType<ShoyoButtonTypes>,
      default: 'btn'
    },
    size: {
      type: String as PropType<ShoyoButtonSizes>,
      default: ''
    },
    content: {
      type: String,
      default: 'button'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const { type, size } = toRefs(props);
    const changeType = ref<string>(type.value);
    const changeClass = ref<string>('');
    if (type.value !== 'btn') {
      changeType.value = `btn + ${changeType.value}`;
    }

    changeClass.value = `${size.value} ${changeType.value}`;

    return { changeClass };
  },
  render() {
    return h(
      'button',
      { class: this.changeClass, disabled: this.$props.disabled },
      this.$props.content
    );
  }
});
</script>
<style module></style>

The exported component is of custom type PluginComponent, which extends the Vue 3 Component type. The exported component holds an additional install method which enables the component to be used as a plugin.

import { PluginComponent, ShoyoButtonProps } from './../../../types/index.d';
import { App as Vue, Plugin } from "vue";
import ShoyoButton from "./ShoyoButton.vue";


const install: Exclude<Plugin['install'], undefined> = (app: Vue) => {
    app.component(ShoyoButton.name, ShoyoButton)
}

(ShoyoButton as any as PluginComponent<ShoyoButtonProps>).install = install;

export default ShoyoButton

Again by using ESmodules by default, Tree Shaking can be achieved which leads to a much smaller bundle size.

Build

All the components are bundled by Rollup with support for Tree Shaking. Rollup plugin Vue is used to load and parse *.vue files. The <style> tags inside vue components are processed by PostCSS and inlined inside the component after build.