Merge pull request #37 from unimal-jp/feature/add-composition

Add `useSpearly` composition function

README.md

@@ -31,7 +31,9 @@ app.use(SpearlyPlugin, { apiKey: 'SPEARLY_API_KEY' })
 
 ## How to use
 
-### Content List
+### Components
+
+#### Content List
 
 ```vue
 <template>
@@ -49,7 +51,7 @@ export default {}
 </script>
 ```
 
-#### use Custom Components
+##### use Custom Components
 
 - Make the wrapper its custom component: Specify a component name for `wrapper` prop.
 - Make the items its custom component: Specify a component name for `item` prop.
@@ -70,7 +72,7 @@ export default {}
 </script>
 ```
 
-#### use Show Loading
+##### use Show Loading
 
 Specify a component name for `loading` prop.
 
@@ -90,7 +92,7 @@ export default {}
 </script>
 ```
 
-#### Advanced props
+##### Advanced props
 
 - `limit` (number, 10)
 - `offset` (number, 0)
@@ -110,7 +112,7 @@ export default {}
 - `item` (string | Vue)
 - `loading` (Vue)
 
-#### pager slot
+##### pager slot
 
 The `pager` slot is a slot for creating paginations.
 Since the `pager slot has a `paging` scope, you can freely create paginations with it.
@@ -141,7 +143,7 @@ export default {}
 </script>
 ```
 
-### Content
+#### Content
 
 > **Warning**  
 > `content-type-id` props have been required since v0.7.0
@@ -163,11 +165,11 @@ export default {}
 </script>
 ```
 
-#### props
+##### props
 
 - `pattern-name` ('a' | 'b')
 
-#### use Show Loading
+##### use Show Loading
 
 Specify a component name for `loading` prop.
 
@@ -188,7 +190,7 @@ export default {}
 </script>
 ```
 
-#### show Preview
+##### show Preview
 
 You can preview the draft content by specifying `preview-token` and `id`.
 
@@ -209,7 +211,7 @@ export default {}
 </script>
 ```
 
-### Form
+#### Form
 
 ```vue
 <template>
@@ -221,7 +223,7 @@ export default {}
 </script>
 ```
 
-#### Advanced form
+##### Advanced form
 
 ```vue
 <template>
@@ -263,7 +265,7 @@ export default {
 </script>
 ```
 
-#### use Show Loading
+##### use Show Loading
 
 Specify a component name for `loading` prop.
 
@@ -277,6 +279,135 @@ export default {}
 </script>
 ```
 
+### Composable
+
+We provide composable functions to get content from Spearly CMS and to send A/B test impressions and conversions.
+
+
+#### getContentList
+
+```ts
+import { useSpearly } from "@spearly/vue"
+
+const spearly = useSpearly()
+
+const contentList = await spearly.getContentList(CONTENT_TYPE_ID, PARAMS)
+```
+
+- `CONTENT_TYPE_ID` (string) : Specify the ID of the content type in Spearly CMS.
+- `PARAMS` (Object) : Optional. Specify an Object that contains the following.
+  - `limit` (number, 10)
+  - `offset` (number, 0)
+  - `order` ('desc' | 'asc', 'desc')
+  - `order-by` ('latest' | 'popular' | string)
+  - `orders` ( { [fieldId: string]: 'desc' | 'asc' } )
+  - `filter-by` (string)
+  - `filter-value` (string | string[])
+  - `filter-ref` (string)
+  - `filters` ( { [fieldId: string]: string | string[] } )
+  - `filter-mode` ('or' | 'and')
+  - `range-to` (string)
+  - `range-from` (string)
+  - `session-id` (string)
+  - `pattern-name` ('a' | 'b')
+
+#### getContent
+
+```ts
+import { useSpearly } from "@spearly/vue"
+
+const spearly = useSpearly()
+
+const content = await spearly.getContent(CONTENT_TYPE_ID, CONTENT_ID, PARAMS)
+```
+
+- `CONTENT_TYPE_ID` (string) : Specify the ID of the content type that contains the content in Spearly CMS.
+- `CONTENT_ID` (string) : Specify the alias of the content in Spearly CMS.
+- `PARAMS` (Object) : Optional. Specify an Object that contains the following.
+  - `patternName` ('a' | 'b'): Use this when you want to get a fixed pattern when A/B testing is enabled.
+
+#### getContentPreview
+
+```ts
+import { useSpearly } from "@spearly/vue"
+
+const spearly = useSpearly()
+
+const content = await spearly.getContent(CONTENT_TYPE_ID, CONTENT_ID, PREVIEW_TOKEN)
+```
+
+- `CONTENT_TYPE_ID` (string) : Specify the ID of the content type that contains the content in Spearly CMS.
+- `CONTENT_ID` (string) : Specify the alias of the content in Spearly CMS.
+- `PREVIEW_TOKEN` (string) : Specify the preview token published by Spearly CMS.
+
+
+#### getFormLatest
+
+```ts
+import { useSpearly } from "@spearly/vue"
+
+const spearly = useSpearly()
+
+const form = await spearly.getFormLatest(FORM_PUBLIC_UID)
+```
+
+- `FORM_PUBLIC_UID` (string) : Specify the form public uid in Spearly CMS.
+
+#### postFormAnswer
+
+```ts
+import { useSpearly } from "@spearly/vue"
+
+const spearly = useSpearly()
+
+const onSubmit = async () => {
+  await spearly.postFormAnswer(FIELDS, FORM_VERSION_ID)
+}
+```
+
+- `FIELDS` (Record<string, unknown>) : Specify an Object with the form field ID as key and the input content as value. You must also specify `_spearly_gotcha: ""` .
+- `FORM_VERSION_ID` (string) : Optional. Specify if you want to send to a version that is not the latest.
+
+#### pageView
+
+This function must wait for getContent to resolve.
+
+```ts
+import { useSpearly } from "@spearly/vue"
+
+const spearly = useSpearly()
+const content = await spearly.getContent(CONTENT_TYPE_ID, CONTENT_ID);
+
+await spearly.pageView()
+
+// If you want send to a different pattern
+await spearly.pageView(CONTENT_ID, PATTERN_NAME)
+```
+
+- `CONTENT_ID` (string) : Optional. Specify if you want to send an ID different from the content ID obtained with the `getContent` function.
+- `PATTERN_NAME` ('a' | 'b') : Optional. Specify if you want to send a pattern different from the pattern obtained with the `getContent` function.
+
+#### conversion
+
+This function must wait for getContent to resolve.
+
+```ts
+import { useSpearly } from "@spearly/vue"
+
+const spearly = useSpearly()
+const content = await spearly.getContent(CONTENT_TYPE_ID, CONTENT_ID);
+
+const onSubmit = async () => {
+  await spearly.conversion()
+
+  // If you want send to a different pattern
+  await spearly.conversion(CONTENT_ID, PATTERN_NAME)
+}
+```
+
+- `CONTENT_ID` (string) : Optional. Specify if you want to send an ID different from the content ID obtained with the `getContent` function.
+- `PATTERN_NAME` ('a' | 'b') : Optional. Specify if you want to send a pattern different from the pattern obtained with the `getContent` function.
+
 ### Provide data
 
 The following two data are provide.

jest.config.js

@@ -2,16 +2,14 @@ module.exports = {
   roots: ['<rootDir>/src'],
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
-  globals: {
-    'ts-jest': {
-      tsconfig: './tsconfig.test.json',
-    },
-  },
   moduleFileExtensions: ['js', 'ts', 'vue', 'json', 'node'],
   transform: {
-    '^.+\\.vue$': 'vue-jest',
-    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
+    '^.+\\.tsx?$': ['ts-jest', {
+      tsconfig: './tsconfig.test.json'
+    }],
   },
+  transformIgnorePatterns: ['/node_modules/(?!(axios)/)'],
   testMatch: [
     '<rootDir>/src/**/*.spec.{js,ts}',
   ],