Improve build config

README.md

@@ -29,10 +29,10 @@ Vue.use(SoramitsuElements, options)
 ### 2.Install only necessary components (to reduce vendors bundle size)
 ```
 import Vue from 'vue
-import ElementUIPlugin from '@soramitsu/soramitsu-js-ui/src/plugins/elementUI'
-import SoramitsuUIStorePlugin from '@soramitsu/soramitsu-js-ui/src/plugins/soramitsuUIStore'
-import SButton from '@soramitsu/soramitsu-js-ui/src/components/Button/SButton'
-import SButton from '@soramitsu/soramitsu-js-ui/src/components/Input/SInput'
+import ElementUIPlugin from '@soramitsu/soramitsu-js-ui/lib/plugins/elementUI'
+import SoramitsuUIStorePlugin from '@soramitsu/soramitsu-js-ui/lib/plugins/soramitsuUIStore'
+import SButton from '@soramitsu/soramitsu-js-ui/lib/components/Button/SButton'
+import SButton from '@soramitsu/soramitsu-js-ui/lib/components/Input/SInput'
 
 Vue.use(ElementUIPlugin) // required
 Vue.use(SoramitsuUIStorePlugin, store) // optional

build/rollup.config.js

@@ -21,12 +21,17 @@ export default {
     'src/types/DesignSystem.ts',
     'src/types/Locale.ts',
     'src/types/Theme.ts',
+    'src/types/components.ts',
+    'src/types/index.ts',
     'src/locale/index.ts',
     'src/plugins/*.ts',
     'src/store/index.ts',
     'src/utils/*.ts',
     'src/directives/index.ts',
-    'src/components/*/**/index.ts'
+    'src/components/*/**/index.ts',
+    'src/components/*/**/consts.ts',
+    'src/components/DesignSystem/DesignSystemInject.ts',
+    'src/mixins/*.ts'
   ],
   output: {
     format: 'esm',
@@ -74,20 +79,13 @@ export default {
     }),
     scss(),
     resolve(),
-    terser(),
+    /* eslint-disable @typescript-eslint/camelcase */
+    terser({ keep_classnames: true }),
     del({
       targets: [
-        'lib/styles/index.d.ts',
-        'bundle.css'
-        // TODO: find a way how to remove this dependencies
-        // 'lib/BorderRadiusMixin-**.js',
-        // 'lib/SizeMixin-**.js',
-        // 'lib/DesignSystem-**.js',
-        // 'lib/DesignSystemInject-**.js',
+        // TODO: find a way how to remove this dependency below
         // 'lib/normalize-component-**.js',
-        // 'lib/components-**.js',
-        // 'lib/consts-**.js',
-        // 'lib/index-**.js'
+        'bundle.css'
       ],
       hook: 'writeBundle'
     })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

src/components/Breadcrumb/SBreadcrumb/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SBreadcrumb from './SBreadcrumb.vue'
 
 const SBreadcrumb = _SBreadcrumb as SFCWithInstall<typeof _SBreadcrumb>
 
-SBreadcrumb.install = function (vue: VueConstructor) {
-  vue.component(Components.SBreadcrumb, SBreadcrumb)
-}
+SBreadcrumb.install = install(Components.SBreadcrumb, SBreadcrumb)
 
 export { SBreadcrumb }
 export default SBreadcrumb

src/components/Breadcrumb/SBreadcrumbItem/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SBreadcrumbItem from './SBreadcrumbItem.vue'
 
 const SBreadcrumbItem = _SBreadcrumbItem as SFCWithInstall<typeof _SBreadcrumbItem>
 
-SBreadcrumbItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SBreadcrumbItem, SBreadcrumbItem)
-}
+SBreadcrumbItem.install = install(Components.SBreadcrumbItem, SBreadcrumbItem)
 
 export { SBreadcrumbItem }
 export default SBreadcrumbItem

src/components/Button/SButton/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SButton from './SButton.vue'
 
 const SButton = _SButton as SFCWithInstall<typeof _SButton>
 
-SButton.install = function (vue: VueConstructor) {
-  vue.component(Components.SButton, SButton)
-}
+SButton.install = install(Components.SButton, SButton)
 
 export { SButton }
 export default SButton

src/components/Button/SButtonGroup/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SButtonGroup from './SButtonGroup.vue'
 
 const SButtonGroup = _SButtonGroup as SFCWithInstall<typeof _SButtonGroup>
 
-SButtonGroup.install = function (vue: VueConstructor) {
-  vue.component(Components.SButtonGroup, SButtonGroup)
-}
+SButtonGroup.install = install(Components.SButtonGroup, SButtonGroup)
 
 export { SButtonGroup }
 export default SButtonGroup

src/components/Card/SCard/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCard from './SCard.vue'
 
 const SCard = _SCard as SFCWithInstall<typeof _SCard>
 
-SCard.install = function (vue: VueConstructor) {
-  vue.component(Components.SCard, SCard)
-}
+SCard.install = install(Components.SCard, SCard)
 
 export { SCard }
 export default SCard

src/components/Checkbox/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SCheckbox from './SCheckbox.vue'
 
 const SCheckbox = _SCheckbox as SFCWithInstall<typeof _SCheckbox>
 
-SCheckbox.install = function (vue: VueConstructor) {
-  vue.component(Components.SCheckbox, SCheckbox)
-}
+SCheckbox.install = install(Components.SCheckbox, SCheckbox)
 
 export { SCheckbox }
 export default SCheckbox

src/components/Collapse/SCollapse/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCollapse from './SCollapse.vue'
 
 const SCollapse = _SCollapse as SFCWithInstall<typeof _SCollapse>
 
-SCollapse.install = function (vue: VueConstructor) {
-  vue.component(Components.SCollapse, SCollapse)
-}
+SCollapse.install = install(Components.SCollapse, SCollapse)
 
 export { SCollapse }
 export default SCollapse

src/components/Collapse/SCollapseItem/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SCollapseItem from './SCollapseItem.vue'
 
 const SCollapseItem = _SCollapseItem as SFCWithInstall<typeof _SCollapseItem>
 
-SCollapseItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SCollapseItem, SCollapseItem)
-}
+SCollapseItem.install = install(Components.SCollapseItem, SCollapseItem)
 
 export { SCollapseItem }
 export default SCollapseItem

src/components/DatePicker/SDatePicker/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDatePicker from './SDatePicker.vue'
 
 const SDatePicker = _SDatePicker as SFCWithInstall<typeof _SDatePicker>
 
-SDatePicker.install = function (vue: VueConstructor) {
-  vue.component(Components.SDatePicker, SDatePicker)
-}
+SDatePicker.install = install(Components.SDatePicker, SDatePicker)
 
 export { SDatePicker }
 export default SDatePicker

src/components/DesignSystem/DesignSystemInject.ts

@@ -1,10 +1,12 @@
 import { Component, Vue, Inject, Prop } from 'vue-property-decorator'
+
 import { DesignSystemProvideKey } from './consts'
 import DesignSystem from '../../types/DesignSystem'
 
 @Component
 export default class DesignSystemInject extends Vue {
   @Prop({ default: true, type: Boolean }) readonly useDesignSystem!: boolean
+
   @Inject({ from: DesignSystemProvideKey, default: DesignSystem.DEFAULT }) readonly designSystem!: any
 
   get designSystemClass (): string {

src/components/DesignSystem/SDesignSystemProvider/SDesignSystemProvider.vue

@@ -6,12 +6,14 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Provide, Watch } from 'vue-property-decorator'
+
 import { DesignSystemProvideKey } from '../consts'
 import DesignSystem from '../../../types/DesignSystem'
 
 @Component
 export default class SDesignSystemProvider extends Vue {
   @Prop({ default: DesignSystem.DEFAULT, type: String }) readonly value!: string
+
   @Provide(DesignSystemProvideKey) providedObject = {
     value: DesignSystem.DEFAULT
   }

src/components/DesignSystem/SDesignSystemProvider/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDesignSystemProvider from './SDesignSystemProvider.vue'
 
 const SDesignSystemProvider = _SDesignSystemProvider as SFCWithInstall<typeof _SDesignSystemProvider>
 
-SDesignSystemProvider.install = function (vue: VueConstructor) {
-  vue.component(Components.SDesignSystemProvider, SDesignSystemProvider)
-}
+SDesignSystemProvider.install = install(Components.SDesignSystemProvider, SDesignSystemProvider)
 
 export { SDesignSystemProvider }
 export default SDesignSystemProvider

src/components/Dialog/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../types/components'
+import install from '../../utils/install'
 
 import _SDialog from './SDialog.vue'
 
 const SDialog = _SDialog as SFCWithInstall<typeof _SDialog>
 
-SDialog.install = function (vue: VueConstructor) {
-  vue.component(Components.SDialog, SDialog)
-}
+SDialog.install = install(Components.SDialog, SDialog)
 
 export { SDialog }
 export default SDialog

src/components/Divider/SDivider/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDivider from './SDivider.vue'
 
 const SDivider = _SDivider as SFCWithInstall<typeof _SDivider>
 
-SDivider.install = function (vue: VueConstructor) {
-  vue.component(Components.SDivider, SDivider)
-}
+SDivider.install = install(Components.SDivider, SDivider)
 
 export { SDivider }
 export default SDivider

src/components/Dropdown/SDropdown/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDropdown from './SDropdown.vue'
 
 const SDropdown = _SDropdown as SFCWithInstall<typeof _SDropdown>
 
-SDropdown.install = function (vue: VueConstructor) {
-  vue.component(Components.SDropdown, SDropdown)
-}
+SDropdown.install = install(Components.SDropdown, SDropdown)
 
 export { SDropdown }
 export default SDropdown

src/components/Dropdown/SDropdownItem/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SDropdownItem from './SDropdownItem.vue'
 
 const SDropdownItem = _SDropdownItem as SFCWithInstall<typeof _SDropdownItem>
 
-SDropdownItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SDropdownItem, SDropdownItem)
-}
+SDropdownItem.install = install(Components.SDropdownItem, SDropdownItem)
 
 export { SDropdownItem }
 export default SDropdownItem

src/components/Form/SForm/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SForm from './SForm.vue'
 
 const SForm = _SForm as SFCWithInstall<typeof _SForm>
 
-SForm.install = function (vue: VueConstructor) {
-  vue.component(Components.SForm, SForm)
-}
+SForm.install = install(Components.SForm, SForm)
 
 export { SForm }
 export default SForm

src/components/Form/SFormItem/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SFormItem from './SFormItem.vue'
 
 const SFormItem = _SFormItem as SFCWithInstall<typeof _SFormItem>
 
-SFormItem.install = function (vue: VueConstructor) {
-  vue.component(Components.SFormItem, SFormItem)
-}
+SFormItem.install = install(Components.SFormItem, SFormItem)
 
 export { SFormItem }
 export default SFormItem

src/components/Icon/SIcon/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SIcon from './SIcon.vue'
 
 const SIcon = _SIcon as SFCWithInstall<typeof _SIcon>
 
-SIcon.install = function (vue: VueConstructor) {
-  vue.component(Components.SIcon, SIcon)
-}
+SIcon.install = install(Components.SIcon, SIcon)
 
 export { SIcon }
 export default SIcon

src/components/Input/SFloatInput/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SFloatInput from './SFloatInput.vue'
 
 const SFloatInput = _SFloatInput as SFCWithInstall<typeof _SFloatInput>
 
-SFloatInput.install = function (vue: VueConstructor) {
-  vue.component(Components.SFloatInput, SFloatInput)
-}
+SFloatInput.install = install(Components.SFloatInput, SFloatInput)
 
 export { SFloatInput }
 export default SFloatInput

src/components/Input/SInput/index.ts

@@ -1,13 +1,11 @@
-import { VueConstructor } from 'vue'
 import { Components, SFCWithInstall } from '../../../types/components'
+import install from '../../../utils/install'
 
 import _SInput from './SInput.vue'
 
 const SInput = _SInput as SFCWithInstall<typeof _SInput>
 
-SInput.install = function (vue: VueConstructor) {
-  vue.component(Components.SInput, SInput)
-}
+SInput.install = install(Components.SInput, SInput)
 
 export { SInput }
 export default SInput