Merge pull request #2 from lukasborawski/issue-#2-variants-as-array

[#1] added the possibility to define variants as an array

Author: lukasborawski

CHANGELOG.md

@@ -1,7 +1,16 @@
+### 0.1.2
+
+- handling variants as an array of strings [#1]
+- add demo more examples
+- output terser
+- docs update
+
 ### 0.1.1
-* removed unnecessary dependencies
-* add the demo missing types
-* docs update
+
+- removed unnecessary dependencies
+- add the demo missing types
+- docs update
 
 ### 0.1.0
-* initial package state
+
+- initial package state

README.md

@@ -141,6 +141,25 @@ export default defineComponent({
 </script>
 ```
 
+Use as an Array.
+
+```vue
+<script lang="ts">
+import { buttonVariantsRef } from './variants.ts'
+
+export default defineComponent({
+  name: 'Button',
+  setup() {
+    const { defineVariant } = useVariant() as UseVariant
+
+    return {
+      buttonVariant: defineVariant(['button', 'buttonPrimary'], buttonVariantsRef),
+    }
+  },
+})
+</script>
+```
+
 Use straight without variant definitions.
 
 ```vue
@@ -190,7 +209,7 @@ Want to check or test it in action? Check out the simple app in the `demo` folde
 
 ---
 
-**API Reference**: Check out the [types](src/types.d.ts) for API definitions.
+**API Reference**: Check out the [types](src/types.ts) for API definitions.
 
 **Contribution**: Please add Pull Request to introduce some changes or fixes.
 

__tests__/index.spec.ts

@@ -3,7 +3,7 @@ import { useVariant } from '~/lib/index.es'
 describe('vue-use-variant', () => {
   const variantsDefinitions = {
     button: 'button-class',
-    buttonPrimary: 'button-class-primary'
+    buttonPrimary: 'button-class-primary',
   }
 
   it('Renders class string with regular configuration', () => {
@@ -30,10 +30,10 @@ describe('vue-use-variant', () => {
       {
         value: {
           button: true,
-          buttonPrimary: true
-        }
+          buttonPrimary: true,
+        },
       },
-      variantsDefinitions
+      variantsDefinitions,
     )
     // @ts-ignore
     expect(variants).toBe('button-class button-class-primary')
@@ -48,6 +48,12 @@ describe('vue-use-variant', () => {
     // @ts-ignore
     expect(variants).toBe('button-class button-class-primary')
   })
+  it('Renders class string with an array', () => {
+    const { defineVariant } = useVariant()
+    const variants = defineVariant(['button', 'buttonPrimary'], variantsDefinitions)
+    // @ts-ignore
+    expect(variants).toBe('button-class button-class-primary')
+  })
   it('Fails when using wrong variants data', () => {
     // @ts-ignore
     global.console = { warn: jest.fn() }

demo/package.json

@@ -4,11 +4,12 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "clean": "rm -rf node_modules"
   },
   "dependencies": {
     "vue": "^3.2.13",
-    "vue-use-variant": "0.1.0"
+    "vue-use-variant": "../"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.9.0",

demo/src/components/Button.vue

@@ -9,29 +9,40 @@ interface Props {
   buttonPrimary?: boolean
 }
 
-const definitions = ref({
-  button: 'button',
-  buttonPrimary: 'px-4 py-2 m-2 rounded text-white bg-blue-600 font-helvetica font-bold hover:opacity-80 transition-all'
-})
 const props = withDefaults(defineProps<Props>(), {
   button: true,
-  buttonPrimary: true
+  buttonPrimary: true,
 })
 
-const variantRegular = defineVariant({
-  button: true,
-  buttonPrimary: true
-}, {
+const definitions = {
   button: 'button',
   buttonPrimary:
-  definitions.value.buttonPrimary
-})
-const variantRef = defineVariant({ button: true, buttonPrimary: true }, definitions)
-const variantProps = defineVariant({ ...props }, definitions)
+    'px-4 py-2 m-2 rounded text-white bg-blue-600 font-helvetica font-bold hover:opacity-80 transition-all',
+}
+const definitionsRef = ref(definitions)
+
+const variantRegularDefinitionsRaw = defineVariant(
+  {
+    button: true,
+    buttonPrimary: true,
+  },
+  {
+    button: 'button',
+    buttonPrimary: definitionsRef.value.buttonPrimary,
+  },
+)
+const variantRefDefinitionsRef = defineVariant(ref({ button: true, buttonPrimary: true }), definitionsRef)
+const variantPropsDefinitionsRef = defineVariant(props as any, definitionsRef)
+const variantArrayDefinitionsRef = defineVariant(['button', 'buttonPrimary'], definitionsRef)
+const variantArrayDefinitionsRaw = defineVariant(['button', 'buttonPrimary'], definitions)
+const variantRefArrayDefinitionsRef = defineVariant(ref(['button', 'buttonPrimary']), definitionsRef)
 </script>
 
 <template>
-  <button :class="variantRegular" type="button">Test Button</button>
-  <button :class="variantRef" type="button">Test Button</button>
-  <button :class="variantProps" type="button">Test Button</button>
+  <button :class="variantRegularDefinitionsRaw" type="button">Test Button</button>
+  <button :class="variantRefDefinitionsRef" type="button">Test Button</button>
+  <button :class="variantPropsDefinitionsRef" type="button">Test Button</button>
+  <button :class="variantArrayDefinitionsRef" type="button">Test Button</button>
+  <button :class="variantArrayDefinitionsRaw" type="button">Test Button</button>
+  <button :class="variantRefArrayDefinitionsRef" type="button">Test Button</button>
 </template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-use-variant",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Vue.js CSS class variant resolver. Presented as handy composable.",
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
@@ -12,13 +12,18 @@
     "test": "jest",
     "prepublish": "yarn build"
   },
+  "files": [
+    "lib"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lukasborawski/vue-use-variant.git"
   },
   "keywords": [
     "vue",
     "vue3",
+    "nuxt",
+    "nuxt3",
     "composable",
     "tailwind",
     "javascript",
@@ -49,6 +54,7 @@
     "rollup": "^2.71.1",
     "rollup-plugin-dts": "^4.0.0",
     "rollup-plugin-typescript2": "^0.30.0",
+    "rollup-plugin-terser": "^7.0.2",
     "ts-jest": "^27.0.5",
     "ts-node": "^10.2.1"
   }

rollup.config.ts

@@ -1,6 +1,7 @@
 import pkg from './package.json'
 import typescript from 'rollup-plugin-typescript2'
 import dts from 'rollup-plugin-dts'
+import { terser } from 'rollup-plugin-terser'
 
 export default [
   {
@@ -19,14 +20,15 @@ export default [
     ],
     external: [...Object.keys(pkg.dependencies || {})],
     plugins: [
+      terser(),
       typescript({
         // eslint-disable-next-line global-require
         typescript: require('typescript'),
       }),
     ],
   },
   {
-    input: 'src/types.d.ts',
+    input: 'src/types.ts',
     output: [{ file: 'lib/index.d.ts', format: 'es' }],
     plugins: [dts()],
   },

src/demo.ts

@@ -4,3 +4,7 @@ import { UseVariant } from '~/lib'
 const { defineVariant } = useVariant() as UseVariant
 
 console.log(defineVariant({ value: { shadow: true } }, { shadow: 'shadow' }))
+console.log(defineVariant({ value: { shadow: true } }, { value: { shadow: 'shadow' } }))
+console.log(defineVariant({ shadow: true }, { shadow: 'shadow' }))
+console.log(defineVariant(['shadow'], { shadow: 'shadow' }))
+console.log(defineVariant({ value: ['shadow'] }, { shadow: 'shadow' }))

src/index.ts

@@ -1,11 +1,12 @@
-import { DefineVariant, ObjectRecord, UseVariantReturn } from '~/src/types'
+import { DefineVariant, ObjectRecord, UseVariantReturn } from './types'
 
 export const useVariant: UseVariantReturn = (definitions) => {
   const defineVariant: typeof DefineVariant = ($variants, $definitions) => {
-    const _variants = $variants.value || $variants
+    let _variants = ($variants as { value: ObjectRecord | string[] }).value || $variants
     const _definitions = definitions?.value || definitions || $definitions?.value || $definitions || {}
 
     try {
+      if (Array.isArray(_variants)) _variants = Object.fromEntries(_variants.map((key) => [key, true]))
       return Object.keys(_variants)
         .map((key) => {
           if (typeof (_variants as ObjectRecord)[key] === 'object') throw Error()